/* Fellows Mood Bank case study — v2 layer.
   Adds: project metadata, the Identity chapter (Mood Bank takeover + One Mark /
   Three Readings sequence), story-based product proof, revised result.
   Extends site/v11.css + site/mb-case.css. No new Ced&Dunn type or colour.

   MOOD BANK TOKENS — sampled from the supplied mark artwork.
   --mb-blue is the exact value read off MB Mark Blue Tr.png (#1800AD). */
body{--mb-blue:#1800AD;--mb-ink:#0A0033;--mb-gray:#565A66;--mb-paper:#F3F4F8}

/* ---------- project metadata + summary ---------- */
.metabar{position:relative;z-index:2;background:var(--black);border-top:1px solid rgba(176,137,74,.34);border-bottom:1px solid rgba(176,137,74,.34)}
.metabar .in{max-width:1500px;margin:0 auto;padding:5vh 6vw;display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);gap:5vw;text-align:left}
.mgrp{display:grid;gap:14px;align-content:start}
.mgrp .k{font-family:var(--font-display);text-transform:uppercase;font-weight:600;font-size:13px;letter-spacing:.14em;color:var(--brass)}
.mgrp .v{display:flex;flex-wrap:wrap;gap:12px 34px}
.mgrp .v span{font-family:var(--font-display);text-transform:uppercase;font-weight:600;font-size:clamp(17px,1.6vw,26px);letter-spacing:.05em;line-height:1}
.summary{position:relative;z-index:2;background:var(--black)}
.summary .in{max-width:1500px;margin:0 auto;padding:13vh 6vw;text-align:center}
.summary p{font-size:clamp(28px,3.4vw,58px);line-height:1.24;max-width:32ch;margin:0 auto;text-wrap:balance}

/* ---------- Mood Bank takeover ---------- */
.mb{position:relative;z-index:2;background:var(--mb-blue);color:var(--mb-paper)}
.mb.ink{background:var(--mb-ink)}
.mb h2,.mb h3,.mb h4{color:inherit}
.mb .kick,.mb .ed,.mb .txt{color:rgba(243,244,248,.82)}
.mb .chhd{border-top:0}
.mb .chhd .n,.mb .eyebrow{color:rgba(243,244,248,.72)}
/* the transition into blue: black dissolving upward into the Mood Bank field */
.mbedge{position:relative;z-index:2;height:34vh;background:linear-gradient(var(--black),var(--mb-blue))}
.mbedge.out{background:linear-gradient(var(--mb-ink),var(--black))}
.mbedge.into-ink{background:linear-gradient(var(--mb-blue),var(--mb-ink))}
.mb .idlede{font-size:26px;line-height:1.52;max-width:54ch;text-wrap:pretty;color:rgba(243,244,248,.86)}
.lockup{margin-bottom:6vh}
.lockup img{width:min(300px,26vw);height:auto}
.threeup{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(34px,6.6vw,132px);line-height:.92;margin-top:9vh}
.threeup .b{display:grid;gap:.02em;margin-top:.34em;font-size:.42em;color:rgba(243,244,248,.6)}
.threeup .b span.on{color:var(--mb-paper)}

/* ---------- ONE MARK / THREE READINGS sequence ---------- */
/* the sequence flips to Mood Bank paper — the mark's own presentation */
.seq{position:relative;z-index:2;background:var(--mb-paper);color:var(--mb-ink)}
.seq .stage .cap .no{color:var(--mb-blue)}
.seq .stage .cap .say{color:rgba(10,0,51,.72)}
.seq .dots b{background:rgba(10,0,51,.3)}
.seq .dots b:hover{background:var(--mb-blue)}
.seq .dots b.on{background:var(--mb-blue)}
.seq .scaffnote{color:rgba(10,0,51,.5)}
.seq .track{position:relative}
/* the mark is the axis: state number above it, name to its left, description below it */
.stage{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,36vw) minmax(0,1fr);grid-template-rows:auto auto auto auto;grid-template-areas:". no rt" "ttl art rt" ". say rt" "dots dots dots";align-items:center;align-content:center;gap:2.4vh 3vw;padding:5vh 6vw 4vh;overflow:hidden}
.stage .cap{display:grid;gap:16px;align-content:center}
.stage .cap:not(.rt),.stage .cap:not(.rt)>[data-cap]{display:contents}
.stage .cap:not(.rt)>[data-cap][hidden]{display:none}
.stage .cap .no{grid-area:no;justify-self:center;align-self:end;text-align:center}
.stage .cap .ttl{grid-area:ttl;align-self:center}
.stage .cap .say{grid-area:say;justify-self:center;align-self:start;text-align:center}
.stage .cap.rt{grid-area:rt}
.stage .art{grid-area:art}
.stage .cap .no{font-family:var(--font-display);text-transform:uppercase;font-weight:600;text-transform:uppercase;font-size:13px;letter-spacing:.14em;color:rgba(243,244,248,.62)}
.stage .cap .ttl{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(26px,3.6vw,68px);line-height:.94}
.stage .cap .say{font-size:27px;font-weight:500;line-height:1.4;max-width:44ch;color:rgba(243,244,248,.82);text-wrap:balance}
.stage .cap.rt .say{font-size:21px;line-height:1.44;max-width:30ch;text-align:left;text-wrap:pretty}
.stage .cap>*,.stage .cap>[data-cap]>*{opacity:0;transform:translateY(14px);transition:opacity .7s,transform .8s}
.stage[data-live="1"] .cap>*,.stage[data-live="1"] .cap>[data-cap]>*{opacity:1;transform:none}
/* the right caption is metadata to the mark: it keeps its own left axis */
.stage .cap.rt,.stage .cap.rt .no{text-align:left}
.stage .art{position:relative;aspect-ratio:1;height:44vh;max-height:44vh;width:auto;height:100%;margin-inline:auto;display:grid;place-items:center}
.stage .art svg{width:100%;height:auto;overflow:visible}
.stage .drop{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;transition:opacity .6s}
.stage .drop image-slot{width:100%;height:100%}
.stage .drop[data-filled]{opacity:1;pointer-events:auto}
.dots{grid-area:dots;justify-self:center;z-index:5;display:flex;gap:12px;align-items:center;padding-top:1.4vh}
.dots .hint{margin-right:8px;font-family:var(--font-display);text-transform:uppercase;font-weight:600;font-size:13px;letter-spacing:.14em;color:var(--mb-blue)}
.dots b{display:block;width:36px;height:3px;background:rgba(243,244,248,.28);cursor:pointer;transition:background .4s,transform .4s}
.dots b:hover{transform:scaleY(2)}
.dots b.on{background:var(--mb-paper)}
.scaffnote{position:absolute;left:6vw;bottom:2vh;z-index:5;max-width:34ch;font-family:var(--font-display);text-transform:uppercase;font-weight:600;font-size:13px;letter-spacing:.12em;color:rgba(243,244,248,.55);line-height:1.7}

/* ---------- the real mark, annotated ---------- */
.mkr{position:relative;width:100%;aspect-ratio:1}
.mkr img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .6s,transform .9s cubic-bezier(.2,.8,.2,1)}
.mkr .hf{opacity:0}
.mkr .hf.l{clip-path:inset(0 50% 0 0)}
.mkr .hf.r{clip-path:inset(0 0 0 50%)}
.mkr svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mkr g[data-l]{opacity:0;transition:opacity .7s}
.mkr .cn{fill:none;stroke:var(--mb-blue);stroke-width:3;stroke-dasharray:9 9}
.mkr .axis{stroke:var(--mb-blue);stroke-width:3;stroke-dasharray:9 9}
.mkr .lt{fill:var(--mb-blue);font-family:var(--font-display);font-weight:700;font-size:132px;letter-spacing:.08em;text-anchor:middle}
.mkr .ring{fill:none;stroke:var(--mb-blue);stroke-width:5}
.mkr .arc{fill:none;stroke:var(--mb-blue);stroke-width:6;stroke-linecap:round}
.mkr .mute{fill:var(--mb-paper);opacity:.74}
.mkr .head{fill:none;stroke:var(--mb-blue);stroke-width:6}
.mkr .tick{fill:var(--mb-blue);font-family:var(--font-display);font-weight:600;font-size:30px;letter-spacing:.14em}
.mkr[data-state="1"] g[data-l="geo"],.mkr[data-state="2"] g[data-l="geo"]{opacity:.85}
.mkr[data-state="2"] g[data-l="name"]{opacity:1}
.mkr[data-state="4"] g[data-l="mood"]{opacity:1}
/* state 07: the seam is a black line on the mark's own axis, pulsing so the
   separation reads as an act rather than a static rule */
.mkr .seam{stroke:var(--black);stroke-width:7;stroke-linecap:square;animation:seamPulse 2.8s ease-in-out infinite}
@keyframes seamPulse{0%,100%{opacity:.12}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.mkr .seam{animation:none;opacity:.9}}
.mkr[data-state="6"] g[data-l="emb"]{opacity:1}
/* the centre axis is drawn; the halves are NOT offset — a flat PNG cannot separate
   interlocking M|O without shearing the letterforms. Awaiting the vector mark. */
.mkr[data-state="1"] .base,.mkr[data-state="2"] .base{opacity:.34}

@media (prefers-reduced-motion:reduce){.mkr *{transition:none}}
/* the .mono override on this page resolves to Antonio — undo the Space Mono nav compensation */
#nl a,#nl a.tight{word-spacing:normal}

/* ---------- from identity to institution ---------- */
/* the turn is a statement moment: centred, the paragraph in a readable measure */
.turn{position:relative;z-index:2;background:var(--mb-ink);color:var(--mb-paper);padding:16vh 6vw}
.turn .in{max-width:1500px;margin:0 auto;text-align:center;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:6vh}
.turn h2{font-size:clamp(30px,5vw,96px);line-height:.94;max-width:none;text-wrap:balance}
.turn .ed{font-size:24px;line-height:1.6;max-width:46ch;margin:0 auto;color:rgba(243,244,248,.8);text-wrap:pretty}

/* ---------- product proof — stories ---------- */
.stories{position:relative;z-index:2;background:var(--mb-ink);color:var(--mb-paper);padding:4vh 0 14vh}
.story{max-width:1500px;margin:0 auto;padding:10vh 6vw;display:grid;gap:5vh;text-align:left;border-top:1px solid rgba(139,146,171,.3)}
.story:first-child{border-top:0}
.story .hd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:6vw;align-items:end}
.story .no{font-family:var(--font-display);text-transform:uppercase;font-weight:600;font-size:13px;letter-spacing:.14em;color:var(--mb-gray);margin-bottom:18px}
.story h3{font-size:clamp(26px,4.2vw,78px);line-height:.96;max-width:20ch}
.story .sys{font-family:var(--font-display);text-transform:uppercase;font-weight:600;font-size:15px;letter-spacing:.16em;color:var(--mb-gray);margin-top:20px}
.story .ed{font-size:23px;line-height:1.5;max-width:48ch;color:rgba(243,244,248,.8);text-wrap:pretty}
.story .proof{display:grid;gap:2vw}
.story .proof.p1{grid-template-columns:minmax(0,1fr)}
.story .proof.p2{grid-template-columns:repeat(2,minmax(0,1fr))}
.story .proof.p3{grid-template-columns:repeat(3,minmax(0,1fr))}
.story .fr{position:relative;overflow:hidden;background:#04060f;border:1px solid rgba(139,146,171,.34)}
.story .fr.tall{aspect-ratio:9/16}
.story .fr.wide{aspect-ratio:16/9}
.story .fr.big{aspect-ratio:21/9}
.story .fr image-slot{width:100%;height:100%}
.story .lb{display:flex;gap:16px;align-items:baseline;margin-top:14px}
.story .lb b{font-family:var(--font-display);text-transform:uppercase;font-weight:600;font-size:17px;letter-spacing:.08em}
.story .lb span{font-size:18px;line-height:1.4;color:rgba(243,244,248,.66)}
.story .pnote .cls{color:var(--mb-gray)}
.story .pnote .must{color:rgba(243,244,248,.62)}
.other{max-width:1500px;margin:0 auto;padding:8vh 6vw 0;text-align:left;border-top:1px solid rgba(139,146,171,.3)}
.other .k{font-family:var(--font-display);text-transform:uppercase;font-weight:600;font-size:13px;letter-spacing:.14em;color:var(--mb-gray);margin-bottom:22px}
.other .v{display:flex;flex-wrap:wrap;gap:14px 30px}
.other .v span{font-family:var(--font-display);text-transform:uppercase;font-weight:600;font-size:clamp(17px,1.9vw,30px);letter-spacing:.04em;color:rgba(243,244,248,.5)}

/* the client mark gets a plate of its own: no melt gradient, no crop */
.split .fig.mark{background:var(--black);display:grid;place-items:center;padding:12vh 4vw;border-left:1px solid rgba(176,137,74,.34)}
.split .fig.mark img{width:min(300px,64%);height:auto;object-fit:contain}
@media (max-width:820px){.split.f6535{grid-template-columns:minmax(0,1fr)}.split .fig.mark{min-height:52vh;border-left:0;border-top:1px solid rgba(176,137,74,.34);padding:9vh 6vw}}

/* supplied device renders carry their own body \u2014 the layout adds no second frame */
.story .fr.dev{background:none;border:0;overflow:visible;aspect-ratio:1170/2080}
.story .fr.dev img{width:100%;height:100%;object-fit:contain;display:block}

/* closing beat: the portrait holds the right, the proposition ranges left against it.
   The plate is already vignetted to pure black, so it needs no frame and no scrim. */
.beat.close2{display:grid;place-items:center;padding:132px 6vw 116px;text-align:left;background:var(--black)}
.beat.close2 .cl{width:100%;max-width:1500px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:5vw;align-items:center}
.beat.close2 .statement{font-size:clamp(26px,3.5vw,72px);line-height:1.06;max-width:none;text-wrap:balance}
.beat.close2 .acts{justify-content:flex-start;margin-top:5vh}
.beat.close2 .por img{width:100%;height:auto;display:block}
@media (max-width:900px){
.beat.close2 .cl{grid-template-columns:minmax(0,1fr);gap:6vh}
.beat.close2 .por{order:-1;max-width:min(420px,80vw)}
}

/* Story 03 closes on a statement, not a plate */
.story .offline{display:block;font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(26px,3.6vw,64px);line-height:1.04;max-width:none;text-wrap:balance}
/* 04 The Experience: one column, the editorial voice centred on the page axis.
   The verse keeps its own left axis \u2014 it is a list, not a statement. */
.quietch .inner{grid-template-columns:minmax(0,1fr)}
.quietch .eyebrow{text-align:center}
.quietch .ed{margin-inline:auto;text-align:center}
.quietch .verse{text-align:left}

/* ---------- alignment + orphan corrections 2026-08-28 ---------- */
/* centred chapter: number, title and lead all on the page axis */
.ch.ctr .chhd{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:22px;padding-bottom:3.6vw}
.ch.ctr .chhd .n{padding-top:0}
.ch.ctr .bd{text-align:center}
.ch.ctr .lead{margin:0 auto}
/* an editorial lead: Antonio scale, Cormorant voice */
.lead.ser{font-family:var(--font-body);text-transform:none;font-weight:400;letter-spacing:0;line-height:1.02;font-size:clamp(28px,4.6vw,88px);max-width:26ch}
/* the life field is a sentence, not a stack — one line, editorial face */
.lifefield{flex-wrap:nowrap;gap:0 1.5vw;max-width:none}
.lifefield span{font-family:var(--font-body);text-transform:none;font-weight:400;letter-spacing:0;font-size:clamp(14px,1.7vw,30px);white-space:nowrap}
/* the transformation reads across the word "became" — no far-left drift */
.pairs div{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:28px}
.pairs b{text-align:right}
.mb .axiom{font-size:clamp(32px,4.2vw,76px)}
/* the authored <br> governs the break — a 26ch measure was re-wrapping inside it */
.axiom{max-width:44ch}
@media (max-width:900px){
.lifefield{flex-wrap:wrap;gap:10px 24px}
.lifefield span{font-size:19px}
}

/* result — Ced&Dunn framing returns */
.result .ed{max-width:54ch}
@media (max-width:1100px){
.metabar .in,.story .hd{grid-template-columns:minmax(0,1fr);gap:4vh}
.story .proof.p2,.story .proof.p3{grid-template-columns:minmax(0,1fr)}
.scaffnote{display:none}
}
/* short viewports: the three-column stage still holds — the art just budgets height */
@media (max-height:760px){
.stage{padding:3vh 5vw}
.stage .art{height:38vh;max-height:38vh}
.stage .cap .ttl{font-size:clamp(24px,3vw,48px)}
.stage .cap .say{font-size:22px}
.stage .cap.rt .say{font-size:19px}
}
/* genuinely narrow: stack, and budget the height explicitly */
@media (max-width:820px){
.stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto auto;grid-template-areas:"ttl" "no" "art" "say" "rt" "dots";align-content:stretch;justify-items:start;gap:1.6vh;padding:5vh 6vw 7vh}
.stage .cap .no,.stage .cap .say{justify-self:start;text-align:left}
.stage .art{height:30vh;max-height:30vh;width:auto;aspect-ratio:1;align-self:center;justify-self:center}
.stage .cap{align-content:start}
.stage .cap .ttl{font-size:clamp(24px,5vw,42px)}
.stage .cap .say{font-size:16px;line-height:1.4;max-width:40ch}
.stage .cap.rt{display:grid;gap:6px}
.stage .cap.rt .say{font-size:15px;line-height:1.36}
}