/* VEILWATCH | INSTRUMENT GRADE INTERFACE
 * Borrowed principles from Prime: single compositor lease per visible control,
 * static glass/foil materials, native scrolling, event-driven selection, parked media.
 * Art and typography are untouched. No continuous JS render loops.
 */
:root{
  --vw-chrome:#f1d6a5;
  --vw-chrome-mid:#ad7e59;
  --vw-violet-lamp:#c69af1;
  --vw-machine-line:rgba(244,202,144,.23);
  --vw-machine-shadow:0 16px 38px rgba(0,0,0,.31);
  --vw-shift:cubic-bezier(.22,1,.36,1);
}
/* Two physical metal rails and one optical lens, not an entire spatial engine. */
.prime-command-pill{
  position:relative;isolation:isolate;overflow:hidden;
  border:1px solid rgba(249,213,160,.45);
  outline:1px solid rgba(255,232,191,.085);outline-offset:2px;
  background:
    linear-gradient(180deg,rgba(255,242,213,.13),transparent 20%,rgba(0,0,0,.2) 90%),
    linear-gradient(125deg,#342a31,#14121b 43%,#2b202b 100%);
  box-shadow:
    0 14px 32px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,240,214,.23),
    inset 0 -1px 0 rgba(0,0,0,.87);
}
.prime-command-pill::before{
  content:"";pointer-events:none;position:absolute;inset:3px;
  border:1px solid rgba(247,218,170,.09);border-radius:17px;
  background:linear-gradient(100deg,rgba(240,194,122,.045),transparent 42%,rgba(165,102,202,.075));
}
.prime-command-pill::after{
  content:"";pointer-events:none;position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,220,172,.68),transparent);
  box-shadow:0 0 12px rgba(246,178,103,.28);
}
.prime-command-pill .vw-nav-lens{
  position:absolute;top:0;left:0;z-index:0;pointer-events:none;
  width:var(--vw-lens-width,0px);height:var(--vw-lens-height,0px);
  border:1px solid rgba(255,222,168,.58);border-radius:13px;
  background:
    linear-gradient(180deg,rgba(255,247,215,.25),rgba(227,188,131,.045) 29%,rgba(126,73,144,.22) 100%),
    linear-gradient(110deg,rgba(226,171,105,.24),rgba(60,31,67,.24));
  box-shadow:0 0 20px rgba(205,132,199,.14),inset 0 1px 0 rgba(255,245,215,.3),inset 0 -1px 0 rgba(183,134,82,.25);
  transform:translate3d(var(--vw-lens-x,0px),var(--vw-lens-y,0px),0);
  transition:none;
}
.prime-command-pill[data-vw-lens-ready="true"] .vw-nav-lens{
  transition:transform .45s var(--vw-shift),width .45s var(--vw-shift),height .25s ease;
}
.prime-command-pill .vw-nav-lens::after{
  content:"";position:absolute;inset:3px;border-top:1px solid rgba(255,236,193,.18);
  border-radius:9px;pointer-events:none;
}
.prime-command-pill a{
  position:relative;z-index:1;
  transition:color .21s ease,transform .21s var(--vw-shift),text-shadow .21s ease,border-color .21s ease;
  border-color:transparent!important;background:transparent!important;box-shadow:none!important;
}
.prime-command-pill a::before{
  content:"";position:absolute;top:7px;bottom:7px;left:1px;width:1px;
  background:linear-gradient(transparent,rgba(238,190,143,.12),transparent);
  pointer-events:none;
}
.prime-command-pill a:first-of-type::before{display:none}
.prime-command-pill a[aria-current="page"]{
  color:#fff0d2!important;text-shadow:0 0 13px rgba(254,199,141,.24);
}
.prime-command-pill a[aria-current="page"] span{color:#ffdcaa!important}
.prime-command-pill a:not([aria-current="page"]):hover{color:#f9e4c2;transform:translateY(-1px)}
.prime-command-pill a:active{transform:translateY(1px) scale(.97)}
.prime-command-pill a span{font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}

/* Fine foil conductor details trace the panel chassis, never the illustrations. */
.panel .vw-panel-foil{
  pointer-events:none;position:absolute;inset:11px;z-index:0;border-radius:inherit;
  background:
    linear-gradient(90deg,#f0c891,transparent) top left/100px 1px no-repeat,
    linear-gradient(270deg,#ddb785,transparent) top right/100px 1px no-repeat,
    linear-gradient(90deg,rgba(219,150,219,.55),transparent) bottom left/100px 1px no-repeat,
    linear-gradient(270deg,rgba(221,176,119,.7),transparent) bottom right/100px 1px no-repeat,
    linear-gradient(#d6a67a,transparent) top left/1px 72px no-repeat,
    linear-gradient(#d6a67a,transparent) top right/1px 72px no-repeat,
    linear-gradient(transparent,rgba(168,104,196,.6)) bottom left/1px 62px no-repeat,
    linear-gradient(transparent,rgba(215,176,118,.65)) bottom right/1px 62px no-repeat;
  opacity:.68;
}
.panel .vw-panel-foil::before{
  content:"";position:absolute;top:-9px;left:clamp(30px,7%,105px);
  width:min(135px,21%);height:2px;border-radius:20px;
  background:linear-gradient(90deg,transparent,#eec688 38%,#f9e0ad 57%,transparent);
  box-shadow:0 0 12px rgba(228,159,84,.34);
}
/* Important: no overlay is permitted on source artwork or video. */
.content-panel>:not(.vw-panel-foil){position:relative;z-index:1}
#threshold .vw-panel-foil{inset:14px;opacity:.6}
#threshold .hero-copy,#threshold .artifact,#threshold .veilwatch-home-bubbles,#threshold .hero-foot{z-index:2}
.content-panel .eyebrow{
  text-shadow:0 0 12px rgba(241,186,109,.14);
}
.content-panel .eyebrow::after{
  content:"";display:inline-block;vertical-align:middle;
  width:clamp(28px,5vw,75px);height:1px;margin-left:16px;
  background:linear-gradient(90deg,rgba(233,182,115,.52),transparent);
}
/* Optical polish on structural cards. Static brushed foil is practically free to idle. */
:is(.lore-grid article,.watcher-grid article[data-watcher],.media-card,.series-stats>div){
  position:relative;isolation:isolate;
  box-shadow:
    inset 0 1px 0 rgba(255,231,190,.14),
    inset 0 -1px 0 rgba(0,0,0,.58),
    0 9px 24px rgba(0,0,0,.18);
}
:is(.lore-grid article,.watcher-grid article[data-watcher],.series-stats>div)::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:
    linear-gradient(112deg,rgba(241,199,143,.055),transparent 26%),
    radial-gradient(ellipse at 100% 0,rgba(191,124,214,.08),transparent 48%);
}
:is(.lore-grid article,.watcher-grid article[data-watcher],.media-card,.series-stats>div){
  border-color:rgba(237,194,138,.32);
}
@media(hover:hover) and (pointer:fine){
  :is(.lore-grid article,.watcher-grid article[data-watcher],.media-card):hover{
    border-color:rgba(255,215,156,.69);
    box-shadow:0 14px 34px rgba(0,0,0,.3),0 0 0 1px rgba(235,176,115,.05),inset 0 1px 0 rgba(255,230,184,.23);
  }
}
.media-frame::after{
  content:"";position:absolute;inset:7px;pointer-events:none;z-index:3;
  border:1px solid rgba(240,202,149,.15);
  border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.22);
}
.media-frame img,.media-frame video{position:relative;z-index:1}
.media-card figcaption{border-top:1px solid rgba(238,193,130,.18)}
.watcher-media-card .media-frame{background:radial-gradient(ellipse at center,#302139,#0a0810 76%)}
.watcher-media-card .media-frame img{object-fit:contain}
.section-media .media-frame img{object-fit:contain}
.section-media-grid .media-card{background:linear-gradient(135deg,rgba(58,38,47,.5),rgba(13,13,20,.96))}
/* Crystal face of interactive controls, with sharp inward and outer light. */
.primary{
  border-radius:10px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    inset 0 -2px 0 rgba(85,39,33,.2),
    0 6px 0 rgba(73,39,40,.33),
    0 14px 27px rgba(0,0,0,.27);
}
.primary:active{
  transform:translateY(2px) scale(.992);
  box-shadow:inset 0 1px 5px rgba(74,40,35,.25),0 2px 0 rgba(73,39,40,.3),0 6px 15px rgba(0,0,0,.23);
}
.utility{
  position:relative;isolation:isolate;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,240,199,.14),0 4px 13px rgba(0,0,0,.15);
}
.utility::after{
  content:"";pointer-events:none;position:absolute;inset:3px;border-radius:inherit;
  border-top:1px solid rgba(249,208,155,.2);
}
.utility[aria-pressed="true"]{
  border-color:rgba(197,138,235,.6);
  background:linear-gradient(135deg,rgba(135,77,158,.25),rgba(40,32,51,.6));
  color:#f5dfed;
}
.utility:active{transform:scale(.965)}
.text-link{transition:color .2s,border-color .2s,transform .2s}
.text-link:hover{transform:translateX(2px)}
.text-link:active{transform:translateX(1px) scale(.985)}
.records details{
  box-shadow:inset 0 1px 0 rgba(248,220,167,.13),0 7px 24px rgba(0,0,0,.16);
}
.records summary{
  position:relative;
  transition:background .2s ease;
}
.records summary:hover{background:linear-gradient(90deg,rgba(229,176,111,.07),transparent)}
.records summary:active{background:rgba(223,174,129,.12)}
.records .plus{
  background:radial-gradient(circle at 32% 22%,rgba(235,202,154,.17),rgba(30,24,34,.68));
  box-shadow:inset 0 1px 0 rgba(255,225,166,.22);
  transition:transform .28s var(--vw-shift),border-color .2s,background .2s;
}
.records details[open] .plus{border-color:rgba(235,171,122,.65);background:rgba(141,87,116,.17)}
.records details[open] summary{border-bottom:1px solid rgba(231,182,134,.16)}
a:focus-visible,button:focus-visible,summary:focus-visible,
.vw-chapter-next:focus-visible{
  outline:2px solid #ffd7a0;outline-offset:4px;
}
/* Editorial chapter portal. Every panel leads somewhere without asking the reader to hunt for controls. */
.vw-chapter-next{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:clamp(14px,3vw,35px);min-height:110px;
  margin:clamp(30px,5vw,58px) 0 16px;
  padding:clamp(19px,3vw,33px) clamp(20px,4vw,42px);
  border:1px solid rgba(236,195,141,.42);border-radius:15px;
  background:
    linear-gradient(140deg,rgba(224,169,107,.12),transparent 30%,rgba(116,68,133,.13) 89%),
    linear-gradient(125deg,#211b24,#14121b 67%,#251d2d);
  color:#f3e2ca;
  box-shadow:inset 0 1px 0 rgba(254,232,194,.16),0 11px 29px rgba(0,0,0,.23);
  overflow:hidden;position:relative;isolation:isolate;
  transition:border-color .26s ease,transform .26s var(--vw-shift),box-shadow .26s ease;
}
.vw-chapter-next::before{
  content:"";position:absolute;inset:8px;border:1px solid rgba(237,193,144,.1);
  border-radius:9px;pointer-events:none;
}
.vw-chapter-next::after{
  content:"";position:absolute;top:0;left:0;width:43%;height:1px;
  background:linear-gradient(90deg,rgba(255,218,164,.74),transparent);
  pointer-events:none;
}
.vw-chapter-next .vw-chapter-copy{
  display:grid;gap:8px;min-width:0;
}
.vw-chapter-next .vw-chapter-kicker{
  color:#c4a77f;font:700 10px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.21em;
}
.vw-chapter-next strong{
  color:#f4dfbf;font:600 clamp(18px,2.35vw,30px)/1.24 var(--veil-heading,Georgia,serif);
  letter-spacing:.025em;text-wrap:balance;
}
.vw-chapter-next .vw-chapter-arrow{
  display:grid;place-items:center;flex:none;width:55px;height:55px;
  border:1px solid rgba(246,205,148,.48);border-radius:50%;
  background:linear-gradient(135deg,rgba(235,188,131,.24),rgba(114,69,137,.18));
  color:#f4d3a3;font:600 25px/1 var(--veil-heading,Georgia,serif);
  box-shadow:inset 0 1px 0 rgba(255,230,198,.22);
  transition:transform .3s var(--vw-shift),background .2s;
}
.vw-chapter-next:hover{
  border-color:rgba(255,224,172,.77);transform:translateY(-2px);
  box-shadow:0 15px 37px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,237,203,.25);
}
.vw-chapter-next:hover .vw-chapter-arrow{transform:translateX(4px);background:rgba(228,177,114,.22)}
.vw-chapter-next:active{transform:translateY(1px) scale(.998)}
/* Page transitions operate on short text group only, never whole-page GPU textures. */
@keyframes vw-copy-arrive{
  from{opacity:.38;transform:translate3d(0,10px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
#primeViewport[data-vw-interface="ready"][data-still="false"]
.panel:not([hidden]) :is(.section-heading,.hero-copy){
  animation:vw-copy-arrive .38s var(--vw-shift) both;
  animation-play-state:running!important;
}
/* The original compass alone continues its authored movement when the threshold is selected. */
#primeViewport[data-paused="true"] :is(.vw-nav-lens,.vw-panel-foil){animation:none!important}
@supports (content-visibility:auto){
  /* Only long offscreen media/cards. Never the frame, navigation or current page root. */
  .content-panel .watcher-grid article[data-watcher],
  .content-panel #media-grid > .media-card{
    content-visibility:auto;
    contain-intrinsic-size:auto 340px;
  }
}
@media(max-width:760px){
  .prime-command-pill{overflow:hidden;outline-offset:1px}
  .prime-command-pill::before{inset:2px;border-radius:14px}
  .prime-command-pill .vw-nav-lens{border-radius:10px}
  .prime-command-pill a{min-width:0;min-height:50px;padding:7px 1px}
  .prime-command-pill a::before{left:0;top:10px;bottom:10px}
  .panel .vw-panel-foil{inset:7px;opacity:.48;
    background-size:40px 1px,40px 1px,40px 1px,40px 1px,1px 42px,1px 42px,1px 42px,1px 42px}
  .panel .vw-panel-foil::before{width:70px}
  .vw-chapter-next{margin:25px 0 12px;padding:19px;min-height:92px;border-radius:12px;gap:12px}
  .vw-chapter-next .vw-chapter-kicker{font-size:8px;letter-spacing:.13em}
  .vw-chapter-next strong{font-size:clamp(16px,4.3vw,22px)}
  .vw-chapter-next .vw-chapter-arrow{width:42px;height:42px;font-size:20px}
}
@media(max-width:390px){
  .prime-command-pill{margin-bottom:5px}
  .prime-command-pill a{font-size:7px}
  .vw-chapter-next{padding:15px;gap:9px}
  .vw-chapter-next .vw-chapter-arrow{width:38px;height:38px}
}
@media(hover:none){
  .primary:hover,.vw-chapter-next:hover{transform:none}
  .vw-chapter-next:hover .vw-chapter-arrow{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .prime-command-pill .vw-nav-lens,
  .prime-command-pill a,.vw-chapter-next,.vw-chapter-next .vw-chapter-arrow,
  .primary,.records .plus{transition:none!important}
  #primeViewport .panel:not([hidden]) :is(.section-heading,.hero-copy){animation:none!important;opacity:1;transform:none}
}
#primeViewport[data-still="true"] .panel:not([hidden]) :is(.section-heading,.hero-copy){
  animation:none!important;opacity:1!important;transform:none!important;
}

/* Mobile optical budget: the satin chassis is already opaque enough to
   look polished without repeatedly blurring the moving page behind it. */
@media(max-width:760px){
  .status-shell,.prime-command-pill{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .prime-command-pill a,.primary,.utility,.vw-chapter-next{
    touch-action:manipulation;
  }
}
