/* Shared ORVL site styles */
:root{
  --bg:#111214;
  --panel1:rgba(26,28,31,.95);
  --panel2:rgba(12,13,15,.95);
  --line:rgba(255,255,255,.10);
  --text:rgba(235,240,244,.92);
  --title:#f3f6f9;
  --grad:linear-gradient(180deg,#fafcfe 0%,#c1c7cd 40%,#fbfdff 62%,#949ba3 100%);
}

html,body{
  width:100%;
  height:100%;
  margin:0;
}

body.orvl-frame-page{
  font-family:Arial, Helvetica, sans-serif;
  color:#fff;
}

.page-shell{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)), var(--bg);
}

.scroll-content{
  position:absolute;
  inset:0 22px 0 0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:40px 42px 48px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.scroll-content::-webkit-scrollbar{
  width:0;
  height:0;
}

.page-wrap{
  width:min(100%,1180px);
  margin:0 auto;
}

.page-title{
  margin:0;
  text-align:center;
  font-size:clamp(30px,3vw,52px);
  line-height:1.12;
  font-weight:800;
  letter-spacing:.03em;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.10),0 18px 32px rgba(0,0,0,.35);
}

.main-divider,
.item-divider,
.author-divider{
  position:relative;
}

.main-divider{
  height:30px;
  margin:16px 0 26px;
}

.item-divider{
  height:38px;
  margin:2px 0 10px;
}

.main-divider::before,
.item-divider::before,
.author-divider::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(210,218,226,.45) 18%,rgba(255,255,255,.9) 50%,rgba(210,218,226,.45) 82%,rgba(255,255,255,0) 100%);
  transform:translateY(-50%);
}

.main-divider::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:18px;
  height:18px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 35% 35%,#ffffff 0%,#d7dde3 28%,#9aa2aa 68%,#7f8790 100%);
  box-shadow:0 0 0 6px rgba(255,255,255,.04),0 10px 22px rgba(0,0,0,.35);
}

.hero-head{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:18px;
  align-items:center;
  margin-bottom:28px;
}

.hero-logo{
  width:90px;
  height:90px;
  border-radius:50%;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025)),#1a1c20;
  box-shadow:0 16px 34px rgba(0,0,0,.30),0 0 0 1px rgba(255,255,255,.08) inset;
}

.hero-logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero-name{
  margin:0;
  font-size:clamp(26px,2.2vw,42px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--title);
  text-shadow:0 1px 0 rgba(255,255,255,.10),0 18px 32px rgba(0,0,0,.35);
}

.card-list{
  display:flex;
  flex-direction:column;
  gap:0;
}

.content-card{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:28px;
  align-items:start;
  padding:28px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),linear-gradient(180deg, var(--panel1), var(--panel2));
  border:1px solid var(--line);
  box-shadow:0 30px 70px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.025) inset;
}

.cover-square,
.cover-book,
.cover-wide{
  width:100%;
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)),#1a1c20;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 18px 40px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.08) inset;
}

.cover-square{ aspect-ratio:1/1; }
.cover-book{ aspect-ratio:2/3; }
.cover-wide{ aspect-ratio:16/9; }

.cover-square img,
.cover-book img,
.cover-wide img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.card-title{
  margin:0 0 14px;
  font-size:clamp(24px,2.2vw,38px);
  line-height:1.15;
  font-weight:800;
  letter-spacing:.015em;
  color:var(--title);
  text-shadow:0 10px 24px rgba(0,0,0,.28);
}

.card-text{
  margin:0;
  font-size:clamp(17px,1.2vw,21px);
  line-height:1.55;
  color:var(--text);
  max-width:860px;
}

.link-row{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:22px;
}

.service-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-width:170px;
  padding:14px 18px;
  border-radius:16px;
  text-decoration:none;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),linear-gradient(180deg,#22252a,#111317);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 14px 30px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.025) inset;
  transition:transform .22s ease, filter .22s ease, border-color .22s ease;
}

.service-link:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
  border-color:rgba(255,255,255,.18);
}

.service-icon{
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  font-size:15px;
  font-weight:900;
  letter-spacing:.03em;
  color:#0b0d10;
  background:linear-gradient(180deg,#ffffff 0%,#d6dde5 55%,#9aa3ac 100%);
  box-shadow:0 6px 16px rgba(0,0,0,.26);
}

.service-name{
  font-size:16px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* author separators for books */
.author-divider{
  height:120px;
  margin:54px 0 34px;
}

.author-name{
  position:relative;
  z-index:1;
  display:inline-block;
  padding:0 16px;
  background:#16181b;
  margin:0 auto;
  left:50%;
  transform:translateX(-50%);
  font-size:clamp(22px,2vw,34px);
  line-height:1.15;
  font-weight:800;
  letter-spacing:.03em;
  color:var(--title);
  text-shadow:0 10px 24px rgba(0,0,0,.28);
}

.author-divider-first{
  height:44px !important;
  margin:14px 0 18px !important;
}

.author-divider:not(.author-divider-first)::before{
  content:"";
  position:absolute;
  left:50%;
  top:14px;
  width:min(72%,760px);
  height:34px;
  transform:translateX(-50%);
  background:radial-gradient(circle at center, rgba(255,255,255,.16) 0%, rgba(255,255,255,.06) 22%, rgba(255,255,255,0) 68%);
  filter:blur(10px);
  opacity:.7;
}

.author-divider:not(.author-divider-first)::after{
  content:"✦";
  position:absolute;
  left:50%;
  top:24px;
  transform:translateX(-50%);
  font-size:20px;
  line-height:1;
  color:#d8dde3;
  text-shadow:0 0 14px rgba(255,255,255,.18),0 8px 18px rgba(0,0,0,.35);
}

.author-divider:not(.author-divider-first) .author-name{
  top:28px;
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset,0 12px 26px rgba(0,0,0,.22);
  border-radius:999px;
  padding:10px 22px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)),#16181b;
}

.author-endcap{
  position:relative;
  height:54px;
  margin:18px 0 8px;
}

.author-endcap::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:min(44%,420px);
  height:1px;
  transform:translate(-50%,-50%);
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(220,226,232,.18) 18%,rgba(245,248,251,.8) 50%,rgba(220,226,232,.18) 82%,rgba(255,255,255,0) 100%);
}

.author-endcap::after{
  content:"◈";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-52%);
  font-size:18px;
  line-height:1;
  color:#d9dfe5;
  text-shadow:0 0 12px rgba(255,255,255,.16),0 6px 14px rgba(0,0,0,.35);
}

/* contacts/info */
.info-card{
  padding:28px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),linear-gradient(180deg, var(--panel1), var(--panel2));
  border:1px solid var(--line);
  box-shadow:0 30px 70px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.025) inset;
}

.section-title{
  margin:0 0 16px;
  font-size:clamp(24px,2.2vw,38px);
  line-height:1.15;
  font-weight:800;
  letter-spacing:.015em;
  color:var(--title);
  text-shadow:0 10px 24px rgba(0,0,0,.28);
}

.promo-text{
  display:grid;
  gap:16px;
}

.promo-text p{
  margin:0;
  font-size:clamp(17px,1.2vw,21px);
  line-height:1.65;
  color:var(--text);
}

.contacts-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.contact-link{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 20px;
  border-radius:18px;
  text-decoration:none;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),linear-gradient(180deg,#22252a,#111317);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 14px 30px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.025) inset;
  transition:transform .22s ease, filter .22s ease, border-color .22s ease;
}

.contact-link:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
  border-color:rgba(255,255,255,.18);
}

.contact-icon{
  width:42px;
  height:42px;
  border-radius:12px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  font-size:16px;
  font-weight:900;
  letter-spacing:.02em;
  color:#0b0d10;
  background:linear-gradient(180deg,#ffffff 0%,#d6dde5 55%,#9aa3ac 100%);
  box-shadow:0 6px 16px rgba(0,0,0,.26);
}

.contact-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.contact-name{
  font-size:15px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.contact-value{
  font-size:16px;
  line-height:1.3;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* custom scrollbar */
.scrollbar{
  position:absolute;
  top:18px;
  right:0;
  bottom:18px;
  width:20px;
  display:flex;
  justify-content:center;
  z-index:10;
  pointer-events:none;
}

.scrollbar-track{
  position:relative;
  width:10px;
  height:100%;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), #111317;
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset;
  pointer-events:auto;
}

.scrollbar-thumb{
  position:absolute;
  left:50%;
  top:0;
  width:18px;
  height:72px;
  transform:translateX(-50%);
  border:none;
  padding:0;
  background:transparent;
  cursor:pointer;
  touch-action:none;
}

.scrollbar-thumb img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.32));
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}



/* INTRO PAGE */
body.orvl-intro{
  --hub-shift-x: 0px;
  --hub-shift-y: 12px;

  --bg-size: min(56vw, 760px);
  --logo-width: min(34vw, 520px);
  --production-width: min(20vw, 270px);

  --logo-shift-y: 90px;
  --production-shift-y: -100px;

  overflow:hidden;
  background:#000;
  font-family:Arial, Helvetica, sans-serif;
}

body.orvl-intro .stage{
  position:relative;
  width:100%;
  height:100%;
  min-height:100vh;
  min-height:100dvh;
  isolation:isolate;
}

body.orvl-intro .stage::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    url("img/set/circles_bg.png")
    calc(50% + var(--hub-shift-x))
    calc(50% + var(--hub-shift-y))
    / var(--bg-size) var(--bg-size)
    no-repeat,
    #000;
  z-index:0;
  pointer-events:none;
}

body.orvl-intro .stage::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 18%,
      rgba(0,0,0,.04) 38%,
      rgba(0,0,0,.18) 62%,
      rgba(0,0,0,.60) 82%,
      rgba(0,0,0,1) 100%);
  z-index:1;
  pointer-events:none;
}

body.orvl-intro .center{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%) translate(var(--hub-shift-x), var(--hub-shift-y));
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:4;
}

body.orvl-intro .logo-lockup{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  user-select:none;
  -webkit-user-drag:none;
}

body.orvl-intro .logo-lockup .logo{
  position:relative;
  z-index:5;
  width:var(--logo-width);
  max-width:72vw;
  display:block;
  filter:drop-shadow(0 0 24px rgba(255,255,255,.05));
  user-select:none;
  -webkit-user-drag:none;
  transform:translateY(var(--logo-shift-y));
}

body.orvl-intro .logo-lockup .production{
  position:relative;
  z-index:5;
  width:var(--production-width);
  max-width:38vw;
  display:block;
  opacity:.95;
  user-select:none;
  -webkit-user-drag:none;
  transform:translateY(var(--production-shift-y));
}

body.orvl-intro .orbit{
  position:absolute;
  inset:0;
  z-index:5;
  transform:translate(var(--hub-shift-x), var(--hub-shift-y));
}

body.orvl-intro .orbit::before,
body.orvl-intro .orbit::after{
  content:none !important;
}

body.orvl-intro .menu-item{
  --ring:min(37vw, 390px);
  --item-size:min(12vw, 140px);
  position:absolute;
  left:50%;
  top:50%;
  width:var(--item-size);
  height:var(--item-size);
  margin-left:calc(var(--item-size) / -2);
  margin-top:calc(var(--item-size) / -2);
  transform:
    rotate(var(--angle))
    translateY(calc(var(--ring) * -1))
    rotate(calc(var(--angle) * -1));
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
  z-index:3;
}

body.orvl-intro .menu-inner{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .28s ease, filter .28s ease, opacity .28s ease;
  opacity:.96;
}

body.orvl-intro .menu-item:hover .menu-inner,
body.orvl-intro .menu-item:focus-visible .menu-inner{
  transform:scale(1.08);
  filter:drop-shadow(0 0 18px rgba(255,255,255,.16));
  opacity:1;
}

body.orvl-intro .menu-item:focus-visible{
  outline:none;
}

body.orvl-intro .icon,
body.orvl-intro .icon-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.65));
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

body.orvl-intro .label{
  display:none;
}

body.orvl-intro .frame-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(6px);
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
  z-index:20;
}

body.orvl-intro .frame{
  position:absolute;
  left:50%;
  top:50%;
  width:min(99vw, 1920px);
  height:min(97vh, 1400px);
  transform:translate(-50%, -48%) scale(.97);
  border-radius:28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    linear-gradient(180deg, #0c0c0c, #050505);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:
    0 40px 100px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 0 60px rgba(255,255,255,.045);
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  transition:transform .35s ease, opacity .35s ease;
  z-index:21;
}

body.orvl-intro .frame.open,
body.orvl-intro .frame-backdrop.open{
  opacity:1;
  pointer-events:auto;
}

body.orvl-intro .frame.open{
  transform:translate(-50%, -50%) scale(1);
}

body.orvl-intro .frame-header{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px 0 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02)),
    linear-gradient(180deg, #101010, #090909);
  border-bottom:1px solid rgba(255,255,255,.08);
}

body.orvl-intro .frame-title{
  font-size:clamp(18px, 1.25vw, 24px);
  letter-spacing:.18em;
  font-weight:800;
  text-transform:uppercase;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

body.orvl-intro .close-btn{
  width:52px;
  height:52px;
  border:none;
  border-radius:16px;
  cursor:pointer;
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)),
    linear-gradient(180deg, #1b1b1b, #090909);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 14px 30px rgba(0,0,0,.45);
}

body.orvl-intro .close-btn::before,
body.orvl-intro .close-btn::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:24px;
  height:3px;
  border-radius:3px;
  transform-origin:center;
  background:linear-gradient(180deg, #fafcfe, #8d949b);
  box-shadow:0 1px 0 rgba(255,255,255,.25);
}

body.orvl-intro .close-btn::before{ transform:translate(-50%,-50%) rotate(45deg); }
body.orvl-intro .close-btn::after{ transform:translate(-50%,-50%) rotate(-45deg); }

body.orvl-intro .frame-body{
  height:calc(100% - 72px);
  background:#050505;
}

body.orvl-intro iframe{
  width:100%;
  height:100%;
  border:0;
  background:#fff;
  display:block;
}

@media (max-width:1100px){
  body.orvl-intro{
    --bg-size: min(62vw, 700px);
    --logo-width: min(42vw, 520px);
    --production-width: min(24vw, 270px);
    --logo-shift-y: 80px;
    --production-shift-y: -80px;
  }

  body.orvl-intro .menu-item{
    --ring:min(34vw, 320px);
    --item-size:min(14vw, 118px);
  }
}

@media (max-width:820px){
  body.orvl-intro{
    --bg-size: min(70vw, 620px);
    --logo-width: min(56vw, 520px);
    --production-width: min(34vw, 270px);
    --hub-shift-y: 8px;
    --logo-shift-y: 80px;
    --production-shift-y: -80px;
  }

  body.orvl-intro .menu-item{
    --ring:min(33vw, 250px);
    --item-size:min(17vw, 98px);
  }
}

@media (max-width:560px){
  body.orvl-intro{
    --bg-size: min(78vw, 560px);
    --logo-width: 66vw;
    --production-width: 42vw;
    --hub-shift-y: 4px;
    --logo-shift-y: 50px;
    --production-shift-y: -60px;
  }

  body.orvl-intro .center{
    transform:translate(-50%, -50%) translate(var(--hub-shift-x), var(--hub-shift-y)) scale(.96);
  }

  body.orvl-intro .menu-item{
    --ring:34vw;
    --item-size:20vw;
  }

  body.orvl-intro .frame{
    width:99vw;
    height:97vh;
    border-radius:18px;
  }
}


@media (max-width: 950px) and (orientation: landscape){
  body.orvl-intro{
    --hub-shift-y: 0px;

    --bg-size: min(58vh, 78vw);
    --logo-width: min(34vh, 34vw, 420px);
    --production-width: min(20vh, 20vw, 220px);

    --logo-shift-y: 30px;
    --production-shift-y: -20px;
  }

  body.orvl-intro .menu-item{
    --ring: min(26vh, 30vw);
    --item-size: min(11vh, 10vw, 82px);
  }

  body.orvl-intro .center{
    transform:translate(-50%, -50%) translate(var(--hub-shift-x), var(--hub-shift-y)) scale(.92);
  }
}









body.orvl-index{
  background:#000;
  overflow:hidden;
  cursor:pointer;
  font-family:Arial, Helvetica, sans-serif;
}

body.orvl-index .stage{
  position:relative;
  width:100%;
  height:100%;
  min-height:100vh;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.025) 0%, rgba(255,255,255,.01) 16%, rgba(0,0,0,0) 40%),
    #000;
}

body.orvl-index .link-wrap{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

body.orvl-index .logo-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  user-select:none;
  -webkit-user-drag:none;
  transform:translateY(0);
}

body.orvl-index .orvl-box{
  position:relative;
  width:min(62vw, 980px);
  aspect-ratio:1448 / 354;
  flex:0 0 auto;
  line-height:0;
}

body.orvl-index .orvl-box img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  pointer-events:none;
  -webkit-user-drag:none;
}

body.orvl-index .orvl-dark{
  opacity:1;
  filter:brightness(.24) contrast(1.12);
  transition:opacity 1.4s ease;
}

body.orvl-index .orvl-dark-pos{
  transform:translate(-15px, 18px);
}

body.orvl-index .orvl-light{
  opacity:0;
  filter:brightness(1.03) contrast(1.02);
  transition:opacity 4.8s ease;
}

body.orvl-index .prod-box{
  position:relative;
  width:min(34vw, 520px);
  flex:0 0 auto;
  margin-top:-150px;
  line-height:0;
}

body.orvl-index .prod-box img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  opacity:0;
  filter:brightness(1.02) contrast(1.02);
  transition:opacity 5.6s ease;
  pointer-events:none;
  -webkit-user-drag:none;
}

body.orvl-index.reveal-orvl .orvl-light{
  opacity:1;
}

body.orvl-index.reveal-orvl .orvl-dark{
  opacity:0;
}

body.orvl-index.reveal-production .prod-box img{
  opacity:1;
}

@media (max-width:1100px){
  body.orvl-index .orvl-box{
    width:min(72vw, 980px);
  }
  body.orvl-index .prod-box{
    width:min(42vw, 520px);
    margin-top:-150px;
  }
}

@media (max-width:900px){
  body.orvl-index .orvl-box{
    width:min(80vw, 980px);
  }
  body.orvl-index .prod-box{
    width:min(50vw, 520px);
    margin-top:-150px;
  }
}

@media (max-width:560px){
  body.orvl-index .orvl-box{
    width:min(88vw, 980px);
  }
  body.orvl-index .prod-box{
    width:min(62vw, 520px);
    margin-top:-150px;
  }
}

body.orvl-index .orvl-dark-pos {
  transform: translate(-15px, 18px);
}

.page-close{
  display:none;
  position:fixed;
  top:0;
  right:0;
  margin-top:20px;
  margin-right:30px;
  width:52px;
  height:52px;
  border:none;
  border-radius:16px;
  cursor:pointer;
  z-index:9999;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)),
    linear-gradient(180deg, #1b1b1b, #090909);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 14px 30px rgba(0,0,0,.45);
}

.page-close::before,
.page-close::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:24px;
  height:3px;
  border-radius:3px;
  transform-origin:center;
  background:linear-gradient(180deg, #fafcfe, #8d949b);
  box-shadow:0 1px 0 rgba(255,255,255,.25);
}

.page-close::before{
  transform:translate(-50%,-50%) rotate(45deg);
}

.page-close::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}

.page-close.is-visible{
  display:block;
}

.content-card > div:last-child{
  display:flex;
  flex-direction:column;
  height:100%;
}

.link-row{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-top:auto;
  padding-top:22px;
}


/* mobile adaptation */
html,
body{
  min-height:100%;
}

.page-shell,
.orvl-intro .stage,
body.orvl-index .stage{
  min-height:var(--app-h, 100dvh);
}

@media (max-width:820px){
  .page-shell{
    height:var(--app-h, 100dvh);
  }

  .scroll-content{
    inset:0 14px 0 0;
    padding:20px 18px 28px;
  }

  .page-wrap{
    width:100%;
  }

  .content-card{
    grid-template-columns:1fr;
    gap:18px;
    padding:18px;
  }

  .cover-book,
  .cover-square,
  .cover-wide{
    max-width:100%;
    margin:0 auto;
  }

  .link-row{
    justify-content:flex-end;
    gap:10px;
  }

  .service-link,
  .contact-link{
    min-width:0;
    padding:12px 14px;
  }

  .page-close{
    width:44px;
    height:44px;
    margin:10px;
    border-radius:12px;
  }

  .page-close::before,
  .page-close::after{
    width:20px;
  }

  .scrollbar{
    width:16px;
  }

  .scrollbar-track{
    width:8px;
  }

  .scrollbar-thumb{
    width:14px;
  }

  .orvl-intro .frame{
    width:98vw;
    height:96vh;
    height:var(--app-h, 96vh);
    border-radius:22px;
  }
}

@media (max-width:560px){
  .scroll-content{
    inset:0 10px 0 0;
    padding:16px 14px 22px;
  }

  .page-title{
    font-size:clamp(24px, 7vw, 34px);
  }

  .card-title{
    font-size:clamp(20px, 5.8vw, 28px);
  }

  .card-text,
  .promo-text p,
  .contact-value{
    font-size:15px;
    line-height:1.5;
  }

  .link-row{
    justify-content:stretch;
  }

  .service-link,
  .contact-link{
    width:100%;
  }

  .orvl-intro .frame{
    width:99vw;
    height:97vh;
    height:var(--app-h, 97vh);
    border-radius:18px;
  }
}

@media (hover:none) and (pointer:coarse){
  .menu-item:hover .menu-inner,
  .service-link:hover,
  .contact-link:hover{
    transform:none;
    filter:none;
  }

  .frame-backdrop{
    backdrop-filter:blur(3px);
  }
}


body.orvl-index .logo-dark{
  opacity:1;
  filter:brightness(.24) contrast(1.12);
  transform:translate(-15px, 18px);
  transition:opacity 1.4s ease;
}

body.orvl-index .logo-light{
  opacity:0;
  filter:brightness(1.03) contrast(1.02);
  transition:opacity 3.8s ease;
}

body.orvl-index .production{
  opacity:0;
  transition:opacity 4.8s ease;
}

body.orvl-index.reveal-orvl .logo-light{
  opacity:1;
}

body.orvl-index.reveal-orvl .logo-dark{
  opacity:0;
}

body.orvl-index.reveal-production .production{
  opacity:1;
}



/* INDEX SPLASH PAGE */

body.orvl-index{
  margin:0;
  background:#000;
  overflow:hidden;
  cursor:pointer;
  font-family:Arial, Helvetica, sans-serif;
}

body.orvl-index .stage{
  min-height:100vh;
  min-height:100dvh;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.025) 0%, rgba(255,255,255,.01) 16%, rgba(0,0,0,0) 40%),
    #000;
}

body.orvl-index .link-wrap{
  display:block;
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  text-decoration:none;
}

body.orvl-index .center{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  box-sizing:border-box;
}

body.orvl-index .logo-lockup{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:min(88vw, 980px);
  gap:6px;
  user-select:none;
  -webkit-user-drag:none;
}

body.orvl-index .logo-wrap{
  position:relative;
  width:100%;
  line-height:0;
  transform:translateY(100px);
}

body.orvl-index .logo-wrap::before{
  content:"";
  display:block;
  width:100%;
  padding-top:24.45%;
}

body.orvl-index .logo-wrap img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  pointer-events:none;
  -webkit-user-drag:none;
}

body.orvl-index .logo-dark{
  opacity:1;
  filter:brightness(.24) contrast(1.12);
  transform:translate(-15px, 18px);
  transition:opacity 1.4s ease;
}

body.orvl-index .logo-light{
  opacity:0;
  filter:brightness(1.03) contrast(1.02);
  transition:opacity 3.8s ease;
}

body.orvl-index .production{
  display:block;
  width:54%;
  max-width:520px;
  height:auto;
  transform:translateY(2px);
  opacity:0;
  filter:brightness(1.02) contrast(1.02);
  pointer-events:none;
  -webkit-user-drag:none;
  transition:opacity 4.8s ease;
}

body.orvl-index.reveal-orvl .logo-light{
  opacity:1;
}

body.orvl-index.reveal-orvl .logo-dark{
  opacity:0;
}

body.orvl-index.reveal-production .production{
  opacity:1;
}

@media (max-width:900px){
  body.orvl-index .logo-lockup{
    width:min(92vw, 820px);
    gap:5px;
  }

  body.orvl-index .logo-wrap{
    transform:translateY(8px);
  }

  body.orvl-index .production{
    width:56%;
    transform:translateY(0);
  }

  body.orvl-index .logo-dark{
    transform:translate(-10px, 12px);
  }
}

@media (max-width:560px){
  body.orvl-index .center{
    padding:12px;
  }

  body.orvl-index .logo-lockup{
    width:min(94vw, 680px);
    gap:4px;
  }

  body.orvl-index .logo-wrap{
    transform:translateY(4px);
  }

  body.orvl-index .production{
    width:58%;
    transform:translateY(-1px);
  }

  body.orvl-index .logo-dark{
    transform:translate(-6px, 8px);
  }
}

@media (max-width:380px){
  body.orvl-index .logo-lockup{
    width:min(96vw, 560px);
    gap:3px;
  }

  body.orvl-index .logo-wrap{
    transform:translateY(2px);
  }

  body.orvl-index .production{
    width:60%;
    transform:translateY(-2px);
  }

  body.orvl-index .logo-dark{
    transform:translate(-4px, 6px);
  }
}


.comic-volumes{
  margin-top:20px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.comic-volume-line{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:0 0 18px 0;
}

.comic-volume-line:not(:last-child)::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:11px;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.08) 18%,
      rgba(255,255,255,.16) 50%,
      rgba(255,255,255,.08) 82%,
      rgba(255,255,255,0) 100%
    );
  mask:
    linear-gradient(#000 0 0) center / 100% 1px no-repeat;
  -webkit-mask:
    linear-gradient(#000 0 0) center / 100% 1px no-repeat;
  opacity:.9;
}

.comic-volume-head{
  flex:0 0 auto;
  min-width:110px;
}

.comic-volume-name{
  display:inline-block;
  color:#d9dee4;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.comic-volume-meta{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height:42px;
  padding-left:8px;
}

.comic-volume-status{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  color:#9ea5ad;
  font-weight:600;
  letter-spacing:.03em;
}

@media (max-width:640px){
  .comic-volume-line{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding:0 0 16px 0;
  }

  .comic-volume-head{
    min-width:0;
  }

  .comic-volume-meta{
    padding-left:0;
    min-height:auto;
  }
}