/* =====================================================================
   miraca.me — base stylesheet
   Structure: tokens -> landing -> reveal -> entered -> work -> responsive -> a11y
   ===================================================================== */

/* ============ TOKENS ============ */
:root{
  --bg:#120B1A;          /* deep purple page background */
  --content:#F4F1F1;     /* off-white text + logo */
  --signal:#F008D7;      /* signal magenta — active + hover/focus action */
  --experience:#9581FF;  /* reveal-only "experience" purple (out of palette by design) */

  --ui:'Baloo Bhaijaan 2', system-ui, sans-serif;   /* nav / labels / logo / titles */
  --read:'Source Serif 4', Georgia, serif;           /* narrative reading voice */
  --hand:'Architects Daughter', cursive;             /* her voice / annotations */

  --ease:cubic-bezier(.22,.61,.36,1);   /* calm settle */
  --snap-hold:2000ms;                    /* the "snapshot" hold */
  --cgap:clamp(44px,7vw,108px);          /* gap between columns in the work view */
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--content);
  font-family:var(--ui);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ============ LANDING ============ */
.landing{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
}

/* clickable affordance: logo + ring + label */
.crack{
  position:relative;display:block;
  background:none;border:0;padding:0;cursor:pointer;color:inherit;
  transform-origin:center center;
  transition:transform 1100ms var(--ease);
  z-index:3;
}

.stage{
  position:relative;
  width:360px;height:360px;
  display:grid;place-items:center;
  isolation:isolate;                 /* contain the blend within the stage */
}

/* ambient affordance ring — landing only */
.ring{
  position:absolute;inset:0;
  border-radius:50%;
  border:1.5px solid var(--signal);
  opacity:.5;                        /* resting: ambient, sensed not read */
  transition:opacity 600ms var(--ease), transform 600ms var(--ease),
             border-color 600ms var(--ease), border-width 600ms var(--ease),
             box-shadow 600ms var(--ease);
  z-index:1;
}
/* hover/focus: the ring closes all the way in over the logo, ready to crack */
.crack:hover .ring,
.crack:focus-visible .ring{
  opacity:1;
  transform:scale(.78);              /* contracts to sit on the logo's own ring */
}
.crack:focus-visible{outline:none}

/* the photo "window" — hidden until activation */
.reveal-photo{
  position:absolute;
  width:300px;height:300px;          /* backs the logo; edge aligns with the closed ring */
  border-radius:50%;
  background-image:url('../assets/landing/miraca-reveal.jpeg');
  background-size:155%;
  background-position:57% 26%;        /* centered on her face/torso */
  background-repeat:no-repeat;
  opacity:0;
  transform:scale(.96);
  transition:opacity 520ms var(--ease), transform 700ms var(--ease);
  z-index:2;
  pointer-events:none;
}

/* the logo mark */
.logo{
  position:relative;
  width:280px;height:280px;
  z-index:3;
  pointer-events:none;
  transition:filter 600ms var(--ease);
}
.logo svg{width:100%;height:100%;display:block}
.logo .logo-fill{
  fill:var(--content);
  transition:fill 600ms var(--ease);
}

/* her voice, beside the logo */
.crack-label{
  position:absolute;
  left:calc(50% + 200px);
  top:50%;
  transform:translateY(-50%);
  font-family:var(--hand);
  font-size:1.7rem;line-height:1.15;
  color:var(--content);opacity:.85;
  text-align:left;white-space:nowrap;
  transition:opacity 500ms var(--ease);
  pointer-events:none;
}
/* hand-drawn arrow pointing from the note to the ring */
.crack-arrow{
  position:absolute;
  left:calc(50% + 150px);
  top:calc(50% + 14px);
  width:78px;height:78px;
  opacity:.85;
  transition:opacity 500ms var(--ease);
  pointer-events:none;
  overflow:visible;
}
.crack-arrow path{
  fill:none;stroke:var(--content);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}

/* single, soft, stage-confined flash (photosensitivity-safe) */
.flash{
  position:absolute;inset:-10%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.5), rgba(255,255,255,0) 65%);
  opacity:0;z-index:4;pointer-events:none;
}

/* positioning statement */
.phrase{
  position:fixed;left:50%;bottom:6vh;
  transform:translateX(-50%);
  width:min(90vw,720px);text-align:center;
  font-family:var(--ui);font-weight:400;font-size:1rem;letter-spacing:.2px;
  color:var(--content);opacity:.9;
  transition:opacity 700ms var(--ease), transform 700ms var(--ease);
  z-index:2;
}

/* ============ ACTIVATION / REVEAL ============ */
/* the closed ring becomes the purple neon glow — aligned with image edge + logo ring */
body.reveal:not(.entered) .ring{
  opacity:1;
  transform:scale(.78);              /* stays closed/aligned through the reveal */
  border-color:rgba(149,129,255,.85);
  border-width:2px;
  box-shadow:
    0 0 16px 2px rgba(149,129,255,.8),
    0 0 48px 12px rgba(149,129,255,.45),
    inset 0 0 22px 2px rgba(149,129,255,.4);
}
body.reveal .reveal-photo{opacity:.65;transform:scale(1)}               /* dimmed, but bright enough for color-dodge to read */
body.reveal .logo{mix-blend-mode:color-dodge}
body.reveal .logo .logo-fill{fill:var(--experience)}                    /* whole logo -> experience purple */
body.reveal .crack-label,
body.reveal .crack-arrow{opacity:0}                                     /* note clears as we enter */
body.reveal .flash{animation:flash 560ms var(--ease) forwards}
@keyframes flash{0%{opacity:0}35%{opacity:1}100%{opacity:0}}

/* ============ ENTERED -> WORK ============ */
/* logo shrinks + rises to top (same node); photo dissolves; mono white logo returns */
body.entered .crack{transform:translateY(-42vh) scale(.27);cursor:default}
body.entered .reveal-photo{opacity:0;transform:scale(.97)}
body.entered .ring{opacity:0;box-shadow:none;border-color:transparent}
body.entered .logo{mix-blend-mode:normal}
body.entered .logo .logo-fill{fill:var(--content)}
body.entered .crack-label,
body.entered .crack-arrow{opacity:0}
body.entered .phrase{opacity:0;transform:translateX(-50%) translateY(16px)}

/* ============ WORK VIEW ============ */
.work{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:16vh 7vw 10vh;                 /* spacing handled by item margins, not flex gap */
  opacity:0;visibility:hidden;
  transition:opacity 800ms var(--ease);
  z-index:2;
}
body.entered .work{opacity:1;visibility:visible;transition-delay:520ms}

/* mobile-only navbar toggle — hidden on desktop, surfaced in the mobile media query */
.mobnav-toggle{display:none}

/* "work" sits a column-gap to the left of the entries (margin, not flex gap, so it can
   animate its own collapse on commit without a hard reflow). */
.work-label{
  font-family:var(--ui);font-weight:500;
  font-size:clamp(2rem,3.4vw,2.8rem);
  color:var(--content);
  white-space:nowrap;
  margin-right:var(--cgap);
  transition:opacity 720ms var(--ease), transform 720ms var(--ease), margin-right 720ms var(--ease);
}

.entries{
  list-style:none;
  display:flex;flex-direction:column;
  width:100%;max-width:440px;
  text-align:right;
  /* when the open case + its chapters run tall, the menu scrolls internally
     instead of spilling under the viewport edge */
  max-height:calc(100vh - 24vh);
  overflow-y:auto;
  scrollbar-width:none;
}
.entries::-webkit-scrollbar{display:none}
/* edge fades — mirror the reading frame; only while the list actually overflows */
.entries.is-scrollable{
  -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 52px), transparent 100%);
          mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 52px), transparent 100%);
}
.entries.is-scrollable.scrolled{
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 52px, #000 calc(100% - 52px), transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 52px, #000 calc(100% - 52px), transparent 100%);
}
.entries.is-scrollable.at-end{
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 52px, #000 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 52px, #000 100%);
}
.entry-row{border-bottom:1px solid rgba(244,241,241,.16)}

.entry{
  width:100%;background:none;border:0;cursor:pointer;
  text-align:right;
  padding:20px 2px 22px;
  font-family:var(--ui);color:var(--content);
  display:block;
  transition:opacity 320ms var(--ease);          /* recede / flashlight-lift */
}
.entry .eyebrow{
  display:block;
  font-weight:400;font-size:.8rem;letter-spacing:.3px;
  color:#A39FB0;                      /* muted grey LABEL (a color choice, not a recede) */
  margin-bottom:6px;
}
.entry .title{
  display:inline-block;              /* ONE underline under the element, not under each line */
  font-weight:600;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.12;
  border-bottom:2px solid transparent;padding-bottom:2px;   /* underline hugs the font */
  transition:border-color 220ms var(--ease), color 220ms var(--ease);
}
.entry:focus-visible{outline:none}

/* hover / focus → magenta underline (off-white text) */
.entry:hover .title,
.entry:focus-visible .title{border-bottom-color:var(--signal)}
/* active "you are here" → the whole word fills magenta (no underline) */
.entry.is-active .title{color:var(--signal);border-bottom-color:transparent}
/* case studies go deeper: the active title stays off-white and the magenta
   indicator moves to the active depth layer (Overview / Narrative / Tags) */
.entry-row.has-depth .entry.is-active .title{color:var(--content)}

/* ---- depth layers (Overview / Narrative / Tags) — shown under the active case study ---- */
.depth{
  list-style:none;display:none;flex-direction:column;align-items:flex-end;
  gap:9px;margin-top:18px;margin-bottom:14px;   /* breathing room before the next title */
}
.entry-row.has-depth:has(.entry.is-active) .depth{display:flex}
.depth-tab{
  background:none;border:0;cursor:pointer;
  font-family:var(--ui);font-weight:500;font-size:1.05rem;
  color:var(--content);
  border-bottom:2px solid transparent;padding:0 0 2px;
  transition:border-color 200ms var(--ease), color 200ms var(--ease);
}
.depth-tab:focus-visible{outline:none}
.depth-tab:hover,
.depth-tab:focus-visible{border-bottom-color:var(--signal)}
.depth-tab.is-active{color:var(--signal);border-bottom-color:transparent}

/* narrative chapters (Context / Approach / Solution / Outcome) — shown under Narrative.
   Inset from the right edge (a deliberate margin) to read as nested under Narrative. */
.chapters{
  list-style:none;display:none;flex-direction:column;align-items:flex-end;
  gap:18px;margin-top:18px;margin-right:clamp(36px,4.5vw,68px);
}
.depth-tab.is-active + .chapters{display:flex}   /* only while Narrative is the active layer */
.chapter-tab{
  background:none;border:0;cursor:pointer;
  font-family:var(--ui);font-weight:400;font-size:.96rem;
  color:var(--content);
  border-bottom:2px solid transparent;padding:0 0 2px;
  transition:border-color 200ms var(--ease), color 200ms var(--ease);
}
.chapter-tab:focus-visible{outline:none}
.chapter-tab:hover,
.chapter-tab:focus-visible{border-bottom-color:var(--signal)}
.chapter-tab.is-active{color:var(--signal);border-bottom-color:transparent}

/* ---- narrative mode: the active case-study title recedes + shrinks (32 → 24) so the
       reading frame takes focus ---- */
.entry .title{transition:border-color 220ms var(--ease), color 220ms var(--ease),
                         font-size 360ms var(--ease), opacity 360ms var(--ease)}
.work.narrative-mode .entry-row.has-depth .entry.is-active .title{
  font-size:1.5rem;          /* 24px — down from ~32 */
  opacity:.55;
}

/* ============ COMMITTED — a path is open ============ */
/* On commit, "work" collapses its own footprint by pulling left with a negative margin
   (animatable — no hard reflow) while fading out. The entries glide left into the freed
   space and the panel widens in from zero, so the whole move is smooth, not a snap. */
.work.committed .work-label{
  opacity:0;
  /* the negative margin re-centres the group rightward; this leftward shift cancels that
     drift (half the reclaimed width) and carries "work" further out to the left */
  transform:translateX(calc((var(--work-w, 160px) + var(--cgap)) / -2 - 64px));
  margin-right:calc((var(--work-w, 160px) + var(--cgap)) * -1);
}

/* once a path is open, non-active siblings recede — flashlight: lift to full on hover/focus */
.entries.committed .entry-row:not(:has(.entry.is-active)) .entry{opacity:.4}
.entries.committed .entry-row:not(:has(.entry.is-active)) .entry:hover,
.entries.committed .entry-row:not(:has(.entry.is-active)) .entry:focus-visible{opacity:1}

/* ============ CONTENT PANEL (third column) ============ */
.panels{position:relative;display:flex}
.panel{
  flex:0 0 auto;
  width:min(46vw,500px);
  margin-left:var(--cgap);                 /* gap from the entries; hidden panels claim no box */
  border-left:1px solid rgba(244,241,241,.16);
  padding-left:clamp(28px,3vw,56px);
  text-align:left;
  opacity:0;transform:translateY(12px);
  transition:opacity 620ms var(--ease) 200ms, transform 620ms var(--ease) 200ms, width 560ms var(--ease);
}
.panel.is-open{opacity:1;transform:none}

/* depth layers inside a case-study panel */
.panel .layer[hidden]{display:none}
.layer-stub{
  font-family:var(--ui);font-size:.9rem;color:#A39FB0;
}

/* the right rule appears in narrative mode — it sets the tone for the scroll frame */
.panel--case{
  border-right:1px solid transparent;
  transition:opacity 620ms var(--ease) 200ms, transform 620ms var(--ease) 200ms,
             border-right-color 500ms var(--ease) 200ms, padding-right 500ms var(--ease);
}
/* in narrative the framing rules read as bright white, with equal small padding to the
   text box on both sides; the panel is sized so the text reaches near the right rule */
.work.narrative-mode .panel--case{
  width:min(56vw,656px);                 /* sized to the 68ch measure so padding reads equal */
  border-left-color:rgba(244,241,241,.72);
  border-right-color:rgba(244,241,241,.72);
  padding-left:clamp(28px,2.8vw,40px);
  padding-right:clamp(28px,2.8vw,40px);
}

/* ---- reading column (Narrative) — one continuous scroll through the chapters ---- */
.reading{
  position:relative;
  max-height:60vh;
  overflow-y:auto;
  padding:6px 0;
  scrollbar-width:none;
  /* default: top crisp, bottom fade (more below) */
  -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 110px), transparent 100%);
          mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 110px), transparent 100%);
}
.reading::-webkit-scrollbar{display:none}
/* top fade appears once there's text scrolled above */
.reading.scrolled{
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 72px, #000 calc(100% - 110px), transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 72px, #000 calc(100% - 110px), transparent 100%);
}
/* at the very end the bottom fade clears so the last lines read fully (mirrors the 0-fade top) */
.reading.at-end{
  -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 100%);
          mask-image:linear-gradient(to bottom, #000 0, #000 100%);
}
.reading.scrolled.at-end{
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 72px, #000 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 72px, #000 100%);
}
.chapter-content[hidden]{display:none}
.chapter-content + .chapter-content{margin-top:clamp(40px,7vh,72px)}   /* breathing between sections */
.reading-end{height:clamp(48px,14vh,140px)}                            /* trailing room so the last lines clear */

/* visible section titles so the chapter breaks are legible in the scroll */
.chapter-title{
  font-family:var(--ui);font-weight:600;
  font-size:clamp(1.2rem,1.5vw,1.45rem);
  color:var(--content);letter-spacing:.2px;
  margin-bottom:.85em;
}
.chapter-title:focus{outline:none}   /* programmatic jump target; scroll + active tab are the cue */

.chapter-content p{
  font-family:var(--read);              /* Source Serif — the reading voice */
  font-size:1.02rem;line-height:1.62;
  color:var(--content);
  max-width:68ch;                       /* ~13 words per line — blog-post measure */
}
.chapter-content p + p{margin-top:1.25em}
.chapter-content .layer-stub{font-family:var(--ui)}

/* bulleted reading list */
.reading-list{list-style:none;margin:1.3em 0;padding:0;max-width:68ch}
.reading-list li{
  font-family:var(--read);font-size:1.02rem;line-height:1.5;color:var(--content);
  position:relative;padding-left:1.1em;margin-top:.55em;
}
.reading-list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--signal);
}

/* ---- figures, image controls (zoom / notes), and captions ---- */
/* per-case seamless plate colour (matches each case's source image background)
   + --frame-ink: the contrast colour for controls sitting on that plate */
.panel[data-for="1"]{--frame:#0F0F0F;--frame-ink:#F4F1F1}   /* CS01 — transparent art on near-black, light ink (matches CS02) */
.panel[data-for="2"]{--frame:#0F0F0F;--frame-ink:#F4F1F1}   /* CS02 — UI on near-black, light ink */
.cs-figure{margin:2em 0}
/* the figure plate matches each case's image background (--frame), so the art reads
   seamless — no contrasting frame around it. CS01 = white, CS02 = the UI dark. */
.figure-img{
  display:block;width:100%;cursor:zoom-in;overflow:hidden;
  padding:clamp(10px,1.4vw,16px);
  background:var(--frame,#0F0F0F);
  border:0;
  border-radius:2px;
}
.figure-img img{display:block;width:100%;height:auto}
.figure-controls{display:flex;justify-content:flex-end;gap:16px;margin-top:12px}
/* icon states: default = outline · hover/focus = magenta underline · active = full magenta */
.fig-ctrl{
  background:none;border:0;cursor:pointer;line-height:0;
  color:rgba(244,241,241,.75);
  border-bottom:2px solid transparent;padding:2px 1px 4px;
  transition:color 180ms var(--ease), border-color 180ms var(--ease);
}
.fig-ctrl:hover,
.fig-ctrl:focus-visible{color:var(--content);border-bottom-color:var(--signal);outline:none}
.fig-ctrl[aria-expanded="true"],
.fig-ctrl.is-active{color:var(--signal);border-bottom-color:transparent}
/* zoom is the image's default action (the whole image is hover-to-zoom),
   so it carries the active underline at rest */
.fig-zoom{color:var(--content);border-bottom-color:var(--signal)}
.fig-ctrl svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.figure-note{
  font-family:var(--read);font-style:italic;
  font-size:.92rem;line-height:1.5;color:#C9C4D4;
  margin-top:12px;max-width:64ch;
  border-left:2px solid rgba(244,241,241,.22);padding-left:14px;
}
.figure-note[hidden]{display:none}

/* zoom lightbox */
.lightbox{
  position:fixed;inset:0;z-index:50;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--frame,#0F0F0F);padding:4vh 4vw;cursor:zoom-out;   /* full-bleed seamless field */
  opacity:0;transition:opacity 260ms var(--ease);
}
.lightbox.is-open{opacity:1}
.lightbox[hidden]{display:none}
.lightbox-img{
  max-width:100%;max-height:92vh;
  /* frame colour is set per case via --frame (JS copies it from the source figure) */
  background:var(--frame,#0F0F0F);border:0;border-radius:2px;
  padding:clamp(10px,1.4vw,16px);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  transform-origin:center center;touch-action:none;cursor:zoom-in;
  transition:transform 240ms var(--ease);will-change:transform;
  image-rendering:-webkit-optimize-contrast;image-rendering:high-quality;
  /* panning must not start a native image-drag or a text/image selection */
  user-select:none;-webkit-user-select:none;-webkit-user-drag:none;
}
/* once magnified the image becomes draggable */
.lightbox-img.zoomed{cursor:grab}
.lightbox-img.dragging{cursor:grabbing;transition:none}
/* a no-zoom image (low-res source) opens but never magnifies */
.lightbox.no-zoom .lightbox-img{cursor:default}
@media (prefers-reduced-motion: reduce){.lightbox-img{transition:none}}
.lightbox-close{
  position:absolute;top:22px;right:30px;
  background:none;border:0;color:var(--frame-ink,#F4F1F1);   /* contrast against the frame field */
  font-size:2.4rem;line-height:1;cursor:pointer;opacity:.85;
}
.lightbox-close:hover,
.lightbox-close:focus-visible{opacity:1;outline:none}

/* ---- Tags — contextual word field; size + dim encode relevance to the case ---- */
.tag-field{
  list-style:none;margin:0;padding:6px 0;max-width:62ch;
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:clamp(10px,1.5vh,18px) clamp(14px,1.8vw,26px);
}
.tag{font-family:var(--ui);line-height:1.12;letter-spacing:.1px}
/* single colour (off-white); relevance reads through size + dimming only */
.tag--t1{font-size:clamp(1.5rem,2.5vw,2.05rem);font-weight:600;color:var(--content)}          /* signature */
.tag--t2{font-size:clamp(1.02rem,1.6vw,1.3rem);font-weight:500;color:rgba(244,241,241,.82)}    /* core */
.tag--t3{font-size:clamp(.82rem,1.1vw,.98rem);font-weight:400;color:rgba(244,241,241,.5)}      /* contextual */

/* label-left / value-right snapshot grid */
.snapshot{display:flex;flex-direction:column;gap:clamp(26px,3vw,40px)}
.snap-row{
  display:grid;
  grid-template-columns:96px 1fr;
  column-gap:clamp(16px,1.6vw,28px);
  align-items:start;
}
.snap-row dt{
  font-family:var(--ui);font-weight:400;font-size:.82rem;line-height:1.25;
  color:#A39FB0;                          /* muted grey label (a color choice) */
  text-align:right;
}
.snap-row dd{
  font-family:var(--ui);font-weight:600;font-size:.92rem;line-height:1.5;
  color:var(--content);
}
.snap-row dd p + p{margin-top:1.1em}

.connect{list-style:none;display:flex;flex-direction:column;gap:11px}
.connect a,
.connect .copy-email{
  display:inline-block;
  font-family:var(--ui);font-size:.92rem;font-weight:600;color:var(--content);
  text-decoration:none;background:none;border:0;cursor:pointer;
  border-bottom:2px solid transparent;padding:0 0 1px;   /* underline hugs the font */
  transition:border-color 200ms var(--ease), color 200ms var(--ease);
}
.connect a:hover,
.connect a:focus-visible,
.connect .copy-email:hover,
.connect .copy-email:focus-visible{border-bottom-color:var(--signal);outline:none}
/* brief confirmation after the email is copied */
.connect .copy-email.copied{color:var(--signal);border-bottom-color:transparent}

/* ============ RESPONSIVE — MOBILE ============ */
@media (max-width:640px){
  /* ---- landing / reveal ---- */
  .stage{width:264px;height:264px}
  .logo{width:204px;height:204px}
  .reveal-photo{width:218px;height:218px}
  .crack-label{
    left:50%;top:auto;bottom:-58px;transform:translateX(-50%);
    text-align:center;font-size:1.45rem;
  }
  .crack-arrow{display:none}                      /* note simplifies on mobile */
  body.entered .crack{transform:translateY(-40vh) scale(.34)}
  .phrase{bottom:4vh;font-size:.92rem}

  /* ---- WORK ROOT (entered, no case open): entries stacked, 20px gutters ---- */
  .work{
    flex-direction:column;align-items:flex-end;justify-content:flex-start;
    padding:18vh 20px 10vh;gap:16px;
  }
  .work-label{align-self:flex-start;opacity:.6;margin-right:0}
  .entries{max-width:none}
  .entry{padding:16px 2px 18px}

  /* ===== COMMITTED (a case is open): top navbar + overlay menu ===== */
  .work.committed{
    display:block;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:80px 20px 0;   /* fixed 80px clearance under the navbar; 20px side gutters */
  }
  .work.committed .work-label{display:none}

  /* mobile navbar: active-position label (magenta) + caret, fixed top-left */
  .mobnav-toggle{display:none}
  .work.committed .mobnav-toggle{
    display:flex;align-items:center;gap:9px;
    position:fixed;top:0;left:0;z-index:7;
    padding:26px 22px 0;   /* fixed top + edge breathing room (no safe-area) */
    background:none;border:0;cursor:pointer;font-family:var(--ui);
  }
  .mobnav-label{
    font-weight:600;font-size:1.3rem;color:var(--signal);   /* active = magenta */
    border-bottom:2px solid transparent;padding-bottom:2px;line-height:1;
  }
  .mobnav-toggle:focus-visible{outline:none}
  .mobnav-toggle:hover .mobnav-label,
  .mobnav-toggle:focus-visible .mobnav-label{border-bottom-color:var(--signal)}
  .mobnav-caret{
    width:22px;height:22px;fill:none;stroke:var(--signal);
    stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
    transition:transform 220ms var(--ease);
  }
  .work.menu-open .mobnav-caret{transform:rotate(180deg)}

  /* the mark rides to the top-right corner as the navbar's right end */
  body.case-open .crack{
    position:fixed;top:14px;right:22px;left:auto;
    transform:none;z-index:7;width:auto;height:auto;
  }
  body.case-open .stage{width:44px;height:44px}
  body.case-open .logo{width:36px;height:36px}
  body.case-open .reveal-photo,
  body.case-open .flash{display:none}

  /* ---- open panel: full-height framed column, content left-aligned ---- */
  .work.committed .panels{display:block;width:100%}
  .work.committed .panel,
  .work.committed.narrative-mode .panel--case{
    width:100%;margin:0;text-align:left;
    /* full height below the fixed 80px navbar clearance; no side rules on mobile */
    min-height:calc(100dvh - 80px);
    box-sizing:border-box;
    border-left:0;
    border-right:0;
    padding:0;
    display:flex;flex-direction:column;
  }
  .work.committed .panel[hidden]{display:none}     /* keep non-active panels hidden */
  /* the visible layer fills the frame; Overview / Tags centre vertically, Narrative tops out */
  .work.committed .layer{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  .work.committed .layer[hidden]{display:none}
  .work.committed .layer[data-layer="overview"],
  .work.committed .layer[data-layer="tags"]{justify-content:center;padding:24px}
  .work.committed .layer[data-layer="narrative"]{justify-content:flex-start;padding:0}

  /* Narrative: text sits inside the rules with padding; images break out to the
     full frame width (rule to rule) with a clean gap + 2px corners */
  .work.committed .reading{
    max-height:calc(100dvh - 80px);
    padding:6px 0;
  }
  .chapter-content p,
  .reading-list{padding-left:20px;padding-right:20px;text-align:left;max-width:none}
  .cs-figure{margin:1.9em 0;padding:0}            /* full reading width, between the rules */
  .figure-img{border-radius:2px}
  /* the navbar carries the chapter name — hide the redundant in-content heading,
     but keep it in the DOM as a live <h2> jump target for assistive tech */
  .work.committed .chapter-title{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  /* Overview / Tags content, structured + left-aligned within the frame */
  .snapshot,.snap-row dt,.snap-row dd{text-align:left}
  .snap-row{grid-template-columns:1fr;row-gap:6px}
  .connect{align-items:flex-start}
  .tag-field{justify-content:flex-start}

  /* ---- overlay menu: caret opens the full menu over the screen ---- */
  .work.committed .entries{display:none}
  .work.committed.menu-open .entries{
    display:flex;
    position:fixed;inset:0;z-index:6;
    background:var(--bg);
    padding:calc(72px + env(safe-area-inset-top)) 24px 12vh;
    max-height:none;overflow-y:auto;
    align-items:flex-end;text-align:right;
    -webkit-mask-image:none;mask-image:none;
  }

  /* ---- sequential nudge buttons (layer-boundary / case-boundary taps) ---- */
  /* Tags layer: stack top→bottom so back/fwd nudges sit at the layer edges */
  .work.committed .layer[data-layer="tags"]{justify-content:flex-start}
  .work.committed .layer[data-layer="overview"]{justify-content:flex-start}
  /* pin the forward nudge to the bottom of overview layers and the summary panel */
  .work.committed .layer[data-layer="overview"] .seq-nudge--fwd,
  .work.committed #panel-summary .seq-nudge--fwd{margin-top:auto}

  /* nudge inside the narrative reading scroll (e.g. "Tags →" at end of Outcome) */
  .seq-nudge--fwd{display:flex;justify-content:flex-end;padding:32px 20px 20px}

  /* "← Outcome" pinned top-left, flush with the tag cloud (layer padding = 24px) */
  .seq-nudge--back{display:flex;justify-content:flex-start;padding:0;margin-bottom:20px}

  /* "CS02 Overview →" pinned to bottom of Tags layer */
  .seq-nudge--next-cs{display:flex;justify-content:flex-end;padding:0;margin-top:auto}

  .seq-next,.seq-back{
    background:none;border:0;cursor:pointer;
    font-family:var(--ui);font-size:1rem;font-weight:600;
    color:rgba(244,241,241,.4);
    padding:8px 0;
    transition:color 180ms var(--ease);
  }
  .seq-next:hover,.seq-next:focus-visible,
  .seq-back:hover,.seq-back:focus-visible{color:var(--signal);outline:none}
}

/* sequential nudge buttons — mobile only */
.seq-nudge{display:none!important}
@media(max-width:640px){.seq-nudge{display:flex!important}}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  *{transition-duration:.001ms!important;animation-duration:.001ms!important}
  .flash{display:none}                            /* no flash at all */
  .crack:hover .ring,
  .crack:focus-visible .ring{transform:none}
}