/* --- zn case ----------------------------------------------------------------
   The case-page layer (patterns pass C, 2026-09-13). Pairs with /sqs/zn-case.js.
   Linked on the 25 case studies after /sqs/zn-motion.css. Tokens only: the page
   ground and ink come from the body (page-grounds.css), the label token from the
   theme (--zn-label / --zn-label-track), the faces from --serif / --sans / --mono.

   1. arrow-key hint under the header chevrons, the neighbour's name on hover
   2. the nav tagline crossfading to the case name once the masthead is gone
   3. the overscroll hairline under the NEXT card
   4. the wall card zoom sheet (FLIP, transform-only)
   5. the consequence row (numerals tick through the motion layer's count effect)
   6. the system bento, a cs-story variant (build_case_v2.py layout "bento")
   ---------------------------------------------------------------------------- */

/* ---------------------------------------------------------- 0. loops */
video[data-zn-loop]{ background:transparent }

/* ------------------------------------------------ 1. chevrons: hint + peek */
.zn-headnav{ overflow:visible }
.zn-case-peek{
  position:absolute; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:var(--zn-label,12px); letter-spacing:var(--zn-label-track,.08em);
  text-transform:uppercase; line-height:1.2; white-space:nowrap; color:var(--v4-mute);
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.zn-headnav-prev .zn-case-peek{ left:100%; margin-left:6px }
.zn-headnav-next .zn-case-peek{ right:100%; margin-right:6px }
.zn-headnav:hover .zn-case-peek, .zn-headnav:focus-visible .zn-case-peek{ opacity:1 }
.zn-case-hint{
  position:absolute; right:12px; top:calc(50% + 52px); width:80px; z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:2px; pointer-events:none;
  font-family:var(--mono); font-size:var(--zn-label,12px); letter-spacing:var(--zn-label-track,.08em);
  text-transform:uppercase; line-height:1.2; white-space:nowrap; color:var(--v4-mute);
  opacity:0; transform:translateY(-4px); transition:opacity .5s ease .9s, transform .5s ease .9s;
}
.zn-case-hint.is-on{ opacity:1; transform:none }
.zn-case-hint.is-off{ opacity:0; transition:opacity .6s ease }
main.pc .zn-case-hint, main.pcs .zn-case-hint{ right:2px; width:auto; align-items:flex-end }
@media (max-width:900px){ .zn-case-hint{ right:6px; width:auto; align-items:flex-end } }
@media (max-width:720px), (hover:none), (pointer:coarse){ .zn-case-hint, .zn-case-peek{ display:none } }

/* --------------------------------------------------- 2. nav case marker */
/* the tagline hides under 1100px (site-shell.css); these rules only apply where it shows */
@media (min-width:1101px){
  .v4-nav-tagline.zn-nav-mark{ display:grid; justify-items:center }
  .v4-nav-tagline.zn-nav-mark > span{
    grid-area:1/1; transition:opacity .38s var(--ease-soft, cubic-bezier(.22,.61,.36,1)), transform .38s var(--ease-soft, cubic-bezier(.22,.61,.36,1));
  }
  .v4-nav-tagline.zn-nav-mark .zn-nav-case{ color:var(--v4-ink); opacity:0; transform:translateY(6px) }
  .v4-nav-tagline.zn-nav-mark.is-case .zn-nav-tag{ opacity:0; transform:translateY(-6px) }
  .v4-nav-tagline.zn-nav-mark.is-case .zn-nav-case{ opacity:1; transform:none }
}

/* -------------------------------------------------- 3. overscroll hairline */
.zn-next-track{
  display:block; align-self:stretch; height:1px; margin-top:14px; position:relative; overflow:hidden;
  background:transparent; pointer-events:none;
}
.zn-next-track::after{
  content:""; position:absolute; inset:0; background:var(--v4-accent);
  transform:scaleX(var(--zn-p,0)); transform-origin:right; will-change:transform;
}
@media (max-width:720px){ .zn-next-track::after{ transform-origin:left } }
.zn-next-edge{
  position:fixed; left:0; right:0; bottom:0; height:2px; z-index:60; pointer-events:none;
  background:var(--v4-accent); transform:scaleX(var(--zn-p,0)); transform-origin:left; will-change:transform;
}
@media (min-width:721px){ .zn-next-edge{ display:none } }
@media (prefers-reduced-motion:reduce){ .zn-next-track, .zn-next-edge{ display:none } }

/* ------------------------------------------------------- 4. wall sheet */
.zn-wall-card, .zn-wall-phone{ cursor:zoom-in }
.zn-wall-card:focus, .zn-wall-phone:focus{ outline:none }
.zn-wall-card:focus-visible, .zn-wall-phone:focus-visible{ outline:2px solid var(--v4-accent); outline-offset:4px }
.zn-wall-card.is-zn-lifted, .zn-wall-phone.is-zn-lifted{ visibility:hidden }
html.zn-sheet-open, html.zn-sheet-open body{ overflow:hidden }
.zn-sheet{
  position:fixed; inset:0; z-index:1000; display:block;
  background:color-mix(in srgb, var(--v4-paper) 84%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; transition:opacity .32s ease; outline:none;
  font-family:var(--sans); color:var(--v4-ink);
}
.zn-sheet.is-in{ opacity:1 }
.zn-sheet-img{
  position:absolute; left:0; top:0; display:block; margin:0; object-fit:cover; object-position:top;
  transform-origin:0 0; will-change:transform, opacity; border-radius:6px; background:var(--v4-paper-3);
  box-shadow:0 44px 120px -24px color-mix(in srgb, var(--v4-ink) 60%, transparent), 0 8px 24px color-mix(in srgb, var(--v4-ink) 16%, transparent);
  transition:transform .46s var(--ease-soft, cubic-bezier(.22,.61,.36,1)), opacity .32s ease;
}
.zn-sheet-img.is-phone{ border-radius:18px }
.zn-sheet-img.is-swap-out{ opacity:0; transform:scale(.96) }
.zn-sheet-img.is-swap-in{ opacity:0; transform:scale(1.04) }
.zn-sheet-meta, .zn-sheet-close{
  position:absolute; font-family:var(--mono); font-size:var(--zn-label,12px); letter-spacing:var(--zn-label-track,.08em);
  text-transform:uppercase; line-height:1.2; color:var(--v4-mute); white-space:nowrap;
}
.zn-sheet-meta{ left:50%; transform:translateX(-50%); bottom:28px; font-variant-numeric:tabular-nums }
.zn-sheet-close{
  top:16px; right:16px; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:none; border:0; padding:0; margin:0; cursor:pointer; color:var(--v4-ink); font-size:22px; line-height:1;
  font-family:var(--sans); letter-spacing:0; text-transform:none;
}
.zn-sheet-close:hover{ color:var(--v4-accent) }
.zn-sheet-close:focus{ outline:none }
.zn-sheet-close:focus-visible{ outline:2px solid var(--v4-accent); outline-offset:2px; border-radius:4px }
.zn-sheet-step{
  position:absolute; top:50%; width:56px; height:88px; margin-top:-44px; display:flex; align-items:center; justify-content:center;
  background:none; border:0; padding:0; cursor:pointer; color:var(--v4-ink); opacity:.55; transition:opacity .25s ease;
}
.zn-sheet-step:hover, .zn-sheet-step:focus-visible{ opacity:1; color:var(--v4-accent) }
.zn-sheet-step:focus{ outline:none }
.zn-sheet-step svg{ display:block; width:20px; height:48px }
.zn-sheet-step.is-prev{ left:12px }
.zn-sheet-step.is-next{ right:12px }
.zn-sheet-step.is-next svg{ transform:scaleX(-1) }
@media (max-width:720px){ .zn-sheet-step{ display:none } .zn-sheet-meta{ bottom:18px } }
@media (prefers-reduced-motion:reduce){
  .zn-sheet, .zn-sheet-img{ transition:none }
}

/* ------------------------------------------------- 5. consequence row */
.zn-outcomes{
  position:relative; z-index:1; padding:clamp(56px,6.5vw,92px) clamp(20px,10.9vw,157px) clamp(44px,5vw,72px);   /* bottom air before the credits rule (Chris 2026-09-13: it sat on the copy) */
  font-family:var(--sans); color:var(--v4-ink); line-height:1.5; letter-spacing:0; text-transform:none;
  box-sizing:border-box;
}
.zn-outcomes *{ box-sizing:border-box; margin:0 }
.zn-outcomes-inner{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:clamp(24px,3vw,44px); row-gap:40px;
  max-width:1126px; margin:0 auto;
}
.zn-outcomes-inner.is-two{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.zn-outcomes-inner.is-one{ grid-template-columns:minmax(0,1fr) }
.zn-outcome{ display:flex; flex-direction:column; min-width:0 }
.zn-outcome-num{
  font-family:var(--serif); font-weight:500; font-size:clamp(36px,3.1vw,44px); line-height:1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; font-variation-settings:"opsz" 48; color:var(--v4-ink);
}
.zn-outcome-label{
  margin-top:8px; font-family:var(--mono); font-size:var(--zn-label,12px); letter-spacing:var(--zn-label-track,.08em);
  text-transform:uppercase; line-height:1.2; color:var(--v4-mute);
}
.zn-outcome-line{ margin-top:14px; font-size:15px; line-height:1.5; max-width:34ch; color:var(--v4-ink); opacity:.82 }
.zn-outcome-line a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--v4-line) }
.zn-outcome-line a:hover{ color:var(--v4-accent); border-color:var(--v4-accent) }
/* the Squarespace credits section carries its own top padding; the cs-credits keeps 82px */
@media (max-width:767px){
  .zn-outcomes{ padding:48px 23px 40px }
  .zn-outcomes-inner, .zn-outcomes-inner.is-two{ grid-template-columns:minmax(0,1fr); row-gap:32px }
}

/* ------------------------------------------------------ 6. system bento */
.cs-story.is-bento .cs-stack > .cs-bento{ margin-top:48px }
.cs-bento{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.4vw,20px);
  padding:0 clamp(20px,3vw,43px); max-width:1440px; margin:0 auto;
}
.cs-bento-tile{
  position:relative; grid-column:span 1; margin:0; min-width:0; display:flex; flex-direction:column;
  padding:clamp(16px,1.6vw,24px); min-height:0;
  background:linear-gradient(180deg, var(--cs-plate-a, var(--v4-paper-2)), var(--cs-plate-b, var(--v4-line-soft)));
  color:var(--v4-ink);
}
.cs-bento-tile.is-wide{ grid-column:span 2 }
.cs-bento-tile.is-brand{
  background:linear-gradient(180deg, var(--cs-brand-a, var(--v4-paper-2)), var(--cs-brand-b, var(--v4-paper-3)));
  color:var(--cs-bento-brand-ink, var(--v4-ink));
}
/* the media box takes the tile's height (the row's tallest tile sets it); the object inside keeps
   its own ratio (--cs-bento-ar, the w/h the builder writes), fits both ways and centres, so a
   16:9 loop in a one-column tile letterboxes on the plate rather than cropping to it */
.cs-bento-media{
  flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; width:100%;
}
.cs-bento-media > img, .cs-bento-media > video{
  display:block; width:100%; height:auto; max-height:min(56vh, 420px);
  aspect-ratio:var(--cs-bento-ar, 16/9); object-fit:contain;
  filter:drop-shadow(0 18px 30px color-mix(in srgb, var(--v4-ink) 26%, transparent));
}
.cs-bento-tile.is-wide .cs-bento-media > img, .cs-bento-tile.is-wide .cs-bento-media > video{ max-height:min(60vh, 480px) }
.cs-bento-media.is-flat > img, .cs-bento-media.is-flat > video{ filter:none }
/* is-box (a rectangular screen or photo): the same drop shadow, which follows the painted
   picture, so a portrait letterboxed in its tile is not outlined by an empty box */
.cs-bento-tile figcaption{ margin-top:clamp(16px,1.6vw,22px); display:flex; flex-direction:column; gap:6px; min-width:0 }
.cs-bento-title{
  font-family:var(--serif); font-weight:400; font-size:clamp(19px,1.6vw,23px); line-height:1.1; letter-spacing:-.012em;
  font-variation-settings:"opsz" 32; text-wrap:balance;
}
.cs-bento-meta{ font-family:var(--sans); font-size:13px; line-height:1.4; color:var(--v4-mute) }
.cs-bento-tile.is-brand .cs-bento-meta{ color:inherit; opacity:.7 }
@media (max-width:1023px){
  .cs-bento{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .cs-bento-tile.is-wide{ grid-column:span 2 }
}
@media (max-width:767px){
  .cs-story.is-bento .cs-stack > .cs-bento{ margin-top:32px }
  .cs-bento{ grid-template-columns:minmax(0,1fr); padding:0 20px; gap:14px }
  .cs-bento-tile, .cs-bento-tile.is-wide{ grid-column:span 1; padding:18px }
  .cs-bento-media, .cs-bento-tile.is-wide .cs-bento-media{ max-height:none }
}
/* --- end zn case --- */

/* ------------------------------------------------- 6. story head to copy */
/* the cs template sets .cs-body{margin-top:34px}; Chris (2026-09-13): "increase by 20px or so" */
.cs-story .cs-body{ margin-top:54px }

/* ------------------------------------------------- 7. night bands read light */
/* var(--v4-paper) is dark on the Portal-model pages, so a night band went dark on dark
   (Beer Mode, Chris 2026-09-13). The built cs pages carry the old rule inline; this wins. */
.cs-lsd.is-night, .cs-story.is-night, .sqs-sections .cs-lsd.is-night, .sqs-sections .cs-story.is-night{ color:#F2EEE6 }
.is-night .cs-eyebrow, .sqs-sections .is-night .cs-eyebrow{ color:#F2EEE6 }
.is-night .cs-body, .is-night .cs-lsd-cell p{ color:#F2EEE6 }