/* --- 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); max-width:920px }
/* One stat (Chris 2026-09-17: "rethink the stat component ... when it just has one"): the number carries the row,
   label and line sit beside it, hairlines above and below anchor it to the page. */
.zn-outcomes-inner.is-one .zn-outcome{
  display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"num label" "num line";
  column-gap:clamp(28px,5vw,72px); row-gap:6px; align-items:center;
  padding:36px 0 40px; border-top:1px solid var(--v4-line); border-bottom:1px solid var(--v4-line);
}
.zn-outcomes-inner.is-one .zn-outcome-num{ grid-area:num; font-size:clamp(64px,7.5vw,104px); align-self:center }
.zn-outcomes-inner.is-one .zn-outcome-label{ grid-area:label; margin-top:0; align-self:end }
.zn-outcomes-inner.is-one .zn-outcome-line{ grid-area:line; margin-top:0; max-width:44ch; font-size:17px; align-self:start }
@media (max-width:600px){ .zn-outcomes-inner.is-one .zn-outcome{ grid-template-columns:minmax(0,1fr); grid-template-areas:"num" "label" "line" } }
.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 }

/* icon tiles (2026-09-18): a disc above a title and a sentence, the Outdoorsy outcomes as live text */
.cs-bento-tile.is-icon{ justify-content:flex-start }
.cs-bento-tile.is-icon .cs-bento-media{ flex:0 0 auto; width:88px; height:88px; justify-content:flex-start; margin:4px 0 26px }
.cs-bento-tile.is-icon .cs-bento-media > img{ width:88px; height:88px; max-height:none; aspect-ratio:1/1; border-radius:50%; filter:none }
.cs-bento-tile.is-icon figcaption{ margin-top:0; gap:12px }
.cs-bento-tile.is-icon .cs-bento-meta{ font-size:15px; line-height:1.5; max-width:30ch }
@media (max-width:767px){ .cs-bento-tile.is-icon .cs-bento-media{ margin-bottom:18px } }
/* a bento on the white band (2026-09-18, the Portal sprint): tiles go to warm paper so the ink reads */
.cs-story.is-white .cs-bento-tile{ background:linear-gradient(180deg,#F5F3EF,#ECE9E4); color:#0E0F0E }
.cs-story.is-white .cs-bento-meta{ color:#5B5B57 }
/* text discs (2026-09-18, the Portal steps and prices): the icon slot holds a word or two of live text */
.cs-bento-disc{
  display:flex; align-items:center; justify-content:center; width:88px; height:88px; border-radius:50%;
  border:1px solid color-mix(in srgb, currentColor 34%, transparent); padding:0 8px; box-sizing:border-box;
  font-family:var(--mono); font-size:var(--zn-label,11px); font-weight:500; letter-spacing:var(--zn-label-track,.14em);
  text-transform:uppercase; line-height:1.3; text-align:center; color:var(--v4-ink); white-space:nowrap;
}
@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 }
/* Chris (2026-09-18): the centred blocks (headline over the media) read too loose at 54, "fix margin below headline" */
.cs-story .cs-text.is-center .cs-body{ margin-top:26px }
/* Chris (2026-09-18): one card radius on every page. The white plates behind media (the cs template's
   is-white inset and corner plates) round to the same 14px as the white block cards. */
.cs-media.is-white.is-inset::before, .cs-media.is-white.is-corner::before,
.sqs-sections .cs-media.is-white.is-inset::before, .sqs-sections .cs-media.is-white.is-corner::before{ border-radius:14px }

/* Chris (2026-09-18): no orphaned last words in the story copy */
.cs-story .cs-body, .cs-lsd-cell p, .cs-bento-meta, .cs-text .cs-body{ text-wrap:pretty }


/* ------------------------------------------------- 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 }