/* ==========================================================================
   project-naked-nutrition.css · work/case-naked-nutrition.html

   Scoped entirely under body.nn. The shell (Carbon strip, universal closing,
   Radikal) stays the Walker system; everything inside main belongs to the
   study. Colours are sampled from the delivered creative: the cream and near
   black of the email system, and the six product accents recorded in
   Volume 2's campaigns.json. Page type stays Radikal. Sentence case, because
   the creative is set that way and the typographic doctrine defaults to it.

   v2.0, 19 September 2026: the creative-first pass. The opening is one
   dominant headline with the film directly beneath it; format choice, open
   file, scripts, hypotheses and project notes are disclosures; A/B pairs
   switch on phones instead of squeezing side by side; major artwork takes
   the content width behind a narrow gutter.

   Load order: tokens, system, lightbox, typography, exhibition, site-nav,
   then this sheet.
   ========================================================================== */

body.nn{
  --nn-cream:#F3EDE4;
  --nn-cream-2:#EAE1D2;
  --nn-paper:#FFFFFF;
  --nn-ink:#101010;
  --nn-ink-soft:#575048;
  --nn-ink-faint:#6E675E;
  --nn-rule:rgba(16,16,16,.15);
  --nn-rule-2:rgba(16,16,16,.28);
  --nn-night:#101010;
  --nn-night-soft:rgba(243,237,228,.80);
  --nn-night-faint:rgba(243,237,228,.58);
  --nn-night-rule:rgba(243,237,228,.20);
  --nn-accent:#087D43;
  /* small text needs 4.5:1. --c is the graphic accent, --c-ink the text-safe
     darkening of it for cream, white and the 10% tint; --nn-accent-lite is the
     lightening that clears 4.5:1 on Carbon. */
  --nn-accent-ink:#07703C;
  --nn-accent-lite:#2B8F5D;
  --c:var(--nn-accent);
  --c-ink:var(--nn-accent-ink);
  --nn-edge:clamp(16px,4.4vw,84px);
  --nn-gap:clamp(14px,1.8vw,28px);
  --nn-face:var(--font-brand);
  background:var(--nn-night);
}
body.nn main{background:var(--nn-cream);color:var(--nn-ink);overflow-x:clip;font-family:var(--nn-face)}
body.nn ::selection{background:var(--nn-accent);color:#fff}
.nn .vwrap{width:100%;max-width:1560px;margin:0 auto;padding:0 var(--nn-edge);box-sizing:border-box}
.nn main img{max-width:100%;height:auto;display:block}
/* zero specificity on both halves, so an ordinary single-class rule below can
   set a margin without having to shout. It still beats the UA defaults. */
:where(.nn main) :where(h1,h2,h3,h4,p,figure,ol,ul,dl,dd,blockquote){margin:0}
:where(.nn main) p{color:inherit}
.nn main :focus-visible{outline:2px solid var(--nn-ink);outline-offset:3px}
.nn main .nn-night :focus-visible,.nn main .nn-hero :focus-visible{outline-color:var(--nn-cream)}
.nn .sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nn .nn-sprite{position:absolute;width:0;height:0;overflow:hidden}
.nn .nn-q{width:1em;height:1em;flex:none;fill:currentColor}
/* a closed disclosure holds nothing that can be seen or reached, whatever the engine */
.nn details:not([open]) > :not(summary){display:none}
/* a direct visit lands under the real header; a section link lands on its
   heading rather than on the band of space above it */
.nn main [id]{scroll-margin-top:calc(var(--jw-head-h,64px) + 14px)}
.nn main .nn-sec[id]{scroll-margin-top:calc(var(--jw-head-h,64px) + 18px - clamp(48px,6.4vw,104px))}

/* product accents, one per Volume 2 campaign, sampled from campaigns.json */
.nn .c-pea{--c:#087D43;--c-ink:#07703C}
.nn .c-whey{--c:#086CAB;--c-ink:#0866A1}
.nn .c-creatine{--c:#193D8D;--c-ink:#193D8D}
.nn .c-pb{--c:#85530C;--c-ink:#85530C}
.nn .c-rice{--c:#715144;--c-ink:#715144}
.nn .c-collagen{--c:#426675;--c-ink:#426675}

/* ---------------------------------------------------------------- hero --- */
.nn-hero{background:var(--nn-night);color:var(--nn-cream);padding:clamp(28px,4.2vw,64px) 0 clamp(40px,5vw,80px)}
.nn-coord{display:flex;align-items:center;gap:12px;font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--nn-night-faint)}
.nn-coord::before{content:'';width:26px;height:2px;background:var(--nn-accent);flex:none}
.nn-hero__title{margin-top:clamp(12px,1.4vw,20px)!important;font-weight:700;font-size:clamp(36px,5.6vw,84px);line-height:.94;letter-spacing:-.03em;color:var(--nn-cream);text-wrap:balance;max-width:16ch}
.nn-hero__deck{margin-top:clamp(12px,1.4vw,18px)!important;font-size:clamp(16px,1.35vw,21px);line-height:1.45;color:var(--nn-night-soft);max-width:48ch}
.nn-hero__role{margin-top:10px!important;font-size:12.5px;line-height:1.5;color:var(--nn-night-faint);letter-spacing:.02em}
.nn-hero__status{color:var(--nn-night-soft)}
.nn-hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,2.6vw,40px)}
.nn-hero__film{min-width:0}
.nn-herofilm{margin:0}
/* wide screens: one dominant opening with the film beside it, whole and in view */
@media (min-width:1100px){
  .nn-hero{padding-top:clamp(40px,5vw,72px)}
  .nn-hero__grid{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(32px,4vw,72px);align-items:end}
  .nn-hero__title{font-size:clamp(44px,4.6vw,72px)}
  .nn-hero__text{padding-bottom:28px}
}
.nn-herofilm .nn-player{border:1px solid var(--nn-night-rule)}
.nn-cap{margin-top:12px!important;font-size:13.5px;line-height:1.5;color:var(--nn-night-faint);max-width:70ch}
.nn-fdpair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,2.6vw,48px);margin-top:clamp(28px,3.6vw,60px);align-items:start;max-width:1040px}
.nn-premise{margin-top:clamp(22px,2.6vw,36px)!important;font-size:clamp(16px,1.3vw,20px);line-height:1.45;color:var(--nn-night-soft);max-width:52ch}

/* ------------------------------------------------------------ sections --- */
.nn-sec{padding:clamp(48px,6.4vw,104px) 0}
.nn-day{background:var(--nn-cream);color:var(--nn-ink)}
.nn-paper{background:var(--nn-paper);color:var(--nn-ink)}
.nn-night{background:var(--nn-night);color:var(--nn-cream)}
.nn-night .nn-h2,.nn-night .nn-h3{color:var(--nn-cream)}
.nn-night .nn-line{color:var(--nn-night-soft)}
.nn-kick{display:flex;align-items:center;gap:12px;font-weight:500;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-ink);margin-bottom:clamp(12px,1.4vw,18px)!important}
.nn-kick::before{content:'';width:26px;height:2px;background:currentColor}
.nn-night .nn-kick{color:var(--nn-night-faint)}
.nn-night .nn-kick::before{background:var(--nn-accent)}
.nn-h2{font-weight:700;font-size:clamp(30px,4vw,62px);line-height:1;letter-spacing:-.028em;color:var(--nn-ink);text-wrap:balance;max-width:18ch}
.nn-h3{font-weight:700;font-size:clamp(19px,1.9vw,28px);line-height:1.08;letter-spacing:-.014em;color:var(--nn-ink);text-wrap:balance}
.nn-h3--gap{margin-top:clamp(44px,5.6vw,88px)!important}
.nn-h4{font-weight:500;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--nn-ink-faint);margin-bottom:10px!important}
.nn-line{margin-top:clamp(10px,1.2vw,16px)!important;font-size:clamp(15px,1.2vw,18px);line-height:1.5;color:var(--nn-ink-soft);max-width:60ch}
.nn-line--lead{font-size:clamp(16px,1.3vw,20px)}
.nn-subhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin-top:clamp(44px,5.6vw,88px)}
.nn-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,3vw,64px);align-items:start}
.nn-split--films{margin-top:clamp(16px,2vw,28px)}

/* -------------------------------------------------------------- figures --- */
.nn-fig{margin:0;cursor:zoom-in}
.nn-fig img{width:100%;height:auto;background:var(--nn-cream-2)}
.nn-fig figcaption{display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline;margin-top:10px;font-size:12.5px;line-height:1.45;color:var(--nn-ink-faint)}
.nn-fig figcaption b{font-weight:500;color:var(--nn-ink);letter-spacing:.01em}
.nn-fig figcaption .v{font-weight:500;color:var(--c-ink)}
.nn-night .nn-fig figcaption{color:var(--nn-night-faint)}
.nn-night .nn-fig figcaption b{color:var(--nn-cream)}

/* --------------------------------------------------------------- films --- */
.nn-film{margin:0}
.nn-player{position:relative;background:#000;margin:0;aspect-ratio:16/9}
.nn-player[data-ratio="9x16"]{aspect-ratio:9/16}
.nn-player[data-ratio="4x5"]{aspect-ratio:4/5}
.nn-player[data-ratio="1x1"]{aspect-ratio:1/1}
.nn-player video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
/* bottom right: every delivered poster carries its own wordmark, call to
   action or product line along the bottom left, so the control stays out of
   the artwork's way. The scrim is confined to the control's own corner. */
.nn-play{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-end;padding:clamp(12px,1.8vw,24px);background:transparent;border:0;cursor:pointer;color:#fff;width:100%}
.nn-play span{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;background:var(--c);color:#fff;font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 2px 14px rgba(0,0,0,.28)}
.nn-play:hover span{background:var(--nn-ink)}
.nn-player.is-started .nn-play{display:none}
.nn-filmbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 18px;margin-top:10px;min-height:36px}
.nn-filmbar__t{font-size:13px;line-height:1.45;color:var(--nn-ink-faint)}
.nn-filmbar__t b{font-weight:500;color:var(--nn-ink)}
.nn-night .nn-filmbar__t{color:var(--nn-night-faint)}
.nn-night .nn-filmbar__t b{color:var(--nn-cream)}

/* the format disclosure: one quiet control per film, the four compositions
   and the file link inside it */
.nn-opts{position:relative}
.nn-opts>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 4px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--nn-ink-faint);user-select:none}
.nn-opts>summary::-webkit-details-marker{display:none}
.nn-opts>summary::marker{content:''}
.nn-opts>summary::after{content:'';width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.nn-opts[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.nn-opts>summary:hover{color:var(--nn-ink)}
.nn-night .nn-opts>summary{color:var(--nn-night-faint)}
.nn-night .nn-opts>summary:hover{color:var(--nn-cream)}
.nn-opts__v{font-weight:500;color:var(--nn-ink)}
.nn-night .nn-opts__v{color:var(--nn-cream)}
.nn-opts__body{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:8px 0 4px}
.nn-fmts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.nn-fmts__lab{display:none}
.nn-fmt{display:inline-flex;align-items:center;justify-content:center;min-height:40px;min-width:52px;padding:0 12px;font-size:11.5px;font-weight:500;letter-spacing:.1em;text-decoration:none;color:var(--nn-ink-soft);border:1px solid var(--nn-rule-2);background:transparent}
.nn-fmt:hover{border-color:var(--c-ink);color:var(--c-ink)}
.nn-fmt[aria-current="true"]{background:var(--nn-ink);border-color:var(--nn-ink);color:var(--nn-cream)}
.nn-night .nn-fmt{color:var(--nn-night-soft);border-color:var(--nn-night-rule)}
.nn-night .nn-fmt[aria-current="true"]{background:var(--nn-cream);border-color:var(--nn-cream);color:var(--nn-ink)}
.nn-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;font-size:11.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;color:var(--nn-ink);background:transparent;border:1px solid var(--nn-rule-2);cursor:pointer;font-family:inherit}
.nn-chip:hover{background:var(--nn-ink);border-color:var(--nn-ink);color:var(--nn-cream)}
.nn-night .nn-chip{color:var(--nn-cream);border-color:var(--nn-night-rule)}
.nn-night .nn-chip:hover{background:var(--nn-cream);color:var(--nn-ink)}
.nn-chip--quiet{border-color:transparent;color:var(--nn-ink-faint);padding:0 8px}
.nn-chip--quiet[aria-pressed="true"]{color:var(--nn-ink);border-color:var(--nn-rule-2)}

/* --------------------------------------------------- the disclosures --- */
.nn-more{margin-top:clamp(22px,2.6vw,36px);border-top:1px solid var(--nn-rule)}
.nn-more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:12px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--nn-ink-soft);user-select:none}
.nn-more>summary::-webkit-details-marker{display:none}
.nn-more>summary::marker{content:''}
.nn-more>summary::after{content:'+';font-size:15px;line-height:1;color:var(--nn-ink-faint)}
.nn-more[open]>summary::after{content:'\2013'}
.nn-more>summary:hover{color:var(--nn-ink)}
.nn-more--night{border-top-color:var(--nn-night-rule)}
.nn-more--night>summary{color:var(--nn-night-soft)}
.nn-more--night>summary:hover{color:var(--nn-cream)}
.nn-more__list{list-style:none;padding:4px 0 8px;margin:0;display:grid;gap:8px;max-width:72ch;font-size:13.5px;line-height:1.55;color:var(--nn-ink-soft)}
.nn-more__list b{font-weight:500;color:var(--nn-ink);margin-right:6px}
.nn-more__prose{display:grid;gap:.9em;padding:4px 0 8px;max-width:78ch;font-size:13.5px;line-height:1.6;color:var(--nn-night-soft)}
.nn-script{padding:8px 0 10px;border-left:3px solid var(--c);padding-left:clamp(14px,2vw,26px);max-width:52ch}
.nn-script dl{display:grid;gap:10px;margin:0}
.nn-script dt{font-weight:500;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--nn-night-faint)}
.nn-script dd{margin:0!important;font-size:clamp(16px,1.4vw,21px);line-height:1.28;letter-spacing:-.012em;font-weight:500;color:var(--nn-cream)}
.nn-script dd.a{color:#5FB4E8}

/* ------------------------------------------------------------- emails --- */
.nn-mails{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,48px);margin-top:clamp(24px,3vw,48px)}
.nn-mail{margin:0;display:grid;gap:12px;align-content:start}
.nn-mail__fig{margin:0;display:grid;gap:10px;cursor:zoom-in}
.nn-mail__shot{position:relative;max-height:560px;overflow:hidden;background:var(--nn-paper);border:1px solid var(--nn-rule)}
.nn-mail__shot img{width:100%;height:auto}
.nn-mail__shot::after{content:'';position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(0deg,var(--nn-cream),rgba(243,237,228,0));pointer-events:none}
.nn-paper .nn-mail__shot::after{background:linear-gradient(0deg,var(--nn-paper),rgba(255,255,255,0))}
.nn-night .nn-mail__shot{border-color:var(--nn-night-rule)}
.nn-night .nn-mail__shot::after{background:linear-gradient(0deg,var(--nn-night),rgba(16,16,16,0))}
.nn-mail__meta{display:grid;gap:5px}
.nn-mail__role{font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink)}
.nn-night .nn-mail__role{color:#5FB4E8}
.nn-mail__sub{font-size:15px;line-height:1.4;color:var(--nn-ink);font-weight:500}
.nn-mail__pre{font-size:13px;line-height:1.5;color:var(--nn-ink-faint)}
.nn-night .nn-mail__pre{color:var(--nn-night-faint)}
.nn-mail__acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}

/* ---------------------------------------------------------------- ads --- */
.nn-ads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,44px);margin-top:clamp(22px,2.8vw,44px)}
.nn-pair{display:grid;gap:12px;align-content:start}
.nn-pair__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.nn-pair__h{display:grid;gap:6px}
.nn-pair__h .nn-h4{margin-bottom:0!important}

/* ------------------------------------------------- Full Disclosure pair --- */
.nn-fdpair .nn-mail__shot{max-height:min(74vh,760px)}
.nn-fdpair{align-items:end}

/* ------------------------------------------------------ concept cards --- */
.nn-cards{display:grid;gap:clamp(44px,5.6vw,104px);margin-top:clamp(30px,3.8vw,64px)}
.nn-card{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(20px,2.8vw,56px);align-items:start;padding-top:clamp(22px,2.8vw,40px);border-top:2px solid var(--nn-rule-2)}
.nn-card__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-bottom:14px}
.nn-card__n{font-weight:500;font-size:11px;letter-spacing:.15em;color:var(--c-ink)}
.nn-card__p{font-size:12.5px;letter-spacing:.06em;color:var(--nn-ink-faint)}
.nn-card__main{display:grid;gap:clamp(12px,1.6vw,20px);align-content:start}
/* the film stays with the reader while the A/B material scrolls past it */
@media (min-width:901px){.nn-card__main{position:sticky;top:calc(var(--jw-head-h,64px) + 26px);align-self:start}}
.nn-card__side{display:grid;gap:clamp(18px,2.2vw,30px);align-content:start}
.nn-card__line{font-size:clamp(15px,1.2vw,18px);line-height:1.5;color:var(--nn-ink-soft);max-width:48ch}
.nn-card__line em{font-style:normal;font-weight:500;color:var(--nn-ink)}
.nn-ing{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:13.5px;color:var(--nn-ink)}
.nn-ing b{font-weight:500;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink)}
.nn-card__ab{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.nn-card__mails{display:grid;gap:8px}
.nn-mailtop img{border:1px solid var(--nn-rule);background:var(--nn-paper)}
.nn-mailtop figcaption b{font-weight:500}
.nn-abrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px!important}

/* the phone A/B switch: built by the script, shown only where the pair no
   longer fits side by side */
.nn-abswitch{display:none;gap:6px;align-items:center;margin-top:8px}
.nn-abswitch__k{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--nn-ink-faint);margin-right:6px}
.nn-abswitch button{min-width:44px;min-height:40px;border:1px solid var(--nn-rule-2);background:transparent;color:var(--nn-ink-soft);font:inherit;font-size:12px;font-weight:500;letter-spacing:.1em;cursor:pointer}
.nn-abswitch button[aria-pressed="true"]{background:var(--nn-ink);border-color:var(--nn-ink);color:var(--nn-cream)}

/* ----------------------------------------------------- four-format set --- */
.nn-shapes{display:grid;grid-template-columns:1.6fr .5fr .8fr .9fr;gap:clamp(12px,1.6vw,26px);margin-top:clamp(24px,3vw,48px);align-items:start}
.nn-shapes figure{margin:0;display:grid;gap:8px}
.nn-shape__cap{display:flex;gap:10px;font-size:12.5px;color:var(--nn-ink-faint)}
.nn-shape__cap b{font-weight:500;color:var(--nn-ink)}

/* --------------------------------------------------------- the library --- */
.nn-lib{margin-top:clamp(28px,3.4vw,56px);border-top:1px solid var(--nn-rule)}
.nn-lib>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px clamp(20px,3vw,48px);align-items:center;padding:14px 0}
.nn-lib>summary::-webkit-details-marker{display:none}
.nn-lib>summary::marker{content:''}
.nn-lib .s-t{grid-column:1;font-weight:500;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--nn-ink)}
.nn-lib .s-n{grid-column:1;font-size:13px;line-height:1.5;color:var(--nn-ink-faint);max-width:64ch}
.nn-lib .s-c{grid-column:2;grid-row:1 / span 2;align-self:center;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;color:var(--nn-ink-faint);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.nn-lib>summary:hover .s-c{color:var(--nn-ink)}
.nn-lib .s-c::after{content:'+';font-size:15px;line-height:1}
.nn-lib[open] .s-c::after{content:'\2013'}
.nn-lib .s-c .o{display:none}
.nn-lib[open] .s-c .o{display:inline}
.nn-lib[open] .s-c .c{display:none}
.nn-lib__body{padding-bottom:clamp(20px,2.4vw,36px);overflow-x:auto}
.nn-tab{width:100%;border-collapse:collapse;font-size:13px;min-width:680px}
.nn-tab caption{text-align:left;font-size:13px;color:var(--nn-ink-faint);padding-bottom:14px}
.nn-tab th,.nn-tab td{text-align:left;padding:9px 14px 9px 0;border-bottom:1px solid var(--nn-rule);vertical-align:baseline}
.nn-tab th{font-weight:500;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--nn-ink-faint)}
.nn-tab td b{font-weight:500}
.nn-tab a{color:var(--nn-ink);text-decoration:none;border-bottom:1px solid var(--c)}
.nn-tab a:hover{color:var(--c-ink)}
.nn-tab .num{color:var(--nn-ink-faint);font-variant-numeric:tabular-nums;white-space:nowrap}

/* --------------------------------------------------------------- close --- */
.nn-craft{margin-top:clamp(24px,3vw,48px);max-width:1040px}
.nn-scopeline{margin-top:clamp(24px,3vw,44px)!important;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;font-size:14px;color:var(--nn-night-soft)}
.nn-scopeline b{font-weight:700;font-size:clamp(22px,2.4vw,34px);letter-spacing:-.02em;color:var(--nn-cream);line-height:1}
.nn-scopeline span{color:var(--nn-night-faint)}
/* the universal closing follows a compact case, so it keeps its shape at a
   smaller scale here */
body.nn .closing--exhibit{padding-top:clamp(40px,6vw,88px);padding-bottom:clamp(36px,5vw,72px)}

/* --------------------------------------------------------------- modal --- */
.nn-modal{width:min(1080px,94vw);max-width:none;height:min(90vh,1180px);padding:0;border:0;background:var(--nn-cream);color:var(--nn-ink);overflow:hidden}
.nn-modal::backdrop{background:rgba(16,16,16,.78)}
.nn-modal__in{display:grid;grid-template-rows:auto minmax(0,1fr);height:100%}
.nn-modal__bar{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;padding:12px clamp(14px,2vw,22px);background:var(--nn-ink);color:var(--nn-cream)}
.nn-modal__bar p{font-size:13px;line-height:1.4}
.nn-modal__bar b{font-weight:500}
.nn-modal__bar span{color:var(--nn-night-faint)}
.nn-modal__bar .nn-chip{color:var(--nn-cream);border-color:var(--nn-night-rule)}
.nn-modal__bar .nn-chip:hover{background:var(--nn-cream);color:var(--nn-ink)}
.nn-modal__view{background:#8f8a82;overflow:auto;-webkit-overflow-scrolling:touch}
.nn-modal__view iframe{display:block;width:100%;height:100%;min-height:100%;border:0;background:#fff}

@media print{.nn details{display:block}.nn details>*{display:block}}

/* ---------------------------------------------------------- responsive --- */
@media (max-width:1180px){
  .nn-shapes{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nn-split{grid-template-columns:1fr;gap:22px}
  .nn-mails,.nn-ads{grid-template-columns:1fr;gap:clamp(24px,5vw,40px)}
  .nn-card{grid-template-columns:1fr;gap:24px}
  .nn-fdpair{grid-template-columns:1fr;gap:24px;align-items:start}
  .nn-mail__shot{max-height:min(70vh,640px)}
}
@media (max-width:640px){
  body.nn{--nn-edge:16px}
  .nn-hero{padding-top:22px}
  .nn-hero__title{font-size:clamp(34px,10.4vw,48px)}
  .nn-hero__deck{font-size:16px}
  .nn-shapes{grid-template-columns:1fr;gap:22px}
  /* one strong variant at a time; the switch reveals the other */
  .nn-pair__grid,.nn-card__ab{grid-template-columns:1fr}
  [data-ab] figure[data-ab-hidden]{display:none}
  .nn-abswitch{display:flex}
  .nn-modal{width:100vw;height:100vh;max-height:none}
  .nn-card__head{margin-bottom:10px}
  .nn-scopeline{gap:6px 10px}
}
@media (max-width:360px){
  .nn-hero__title{font-size:32px}
  .nn-h2{font-size:28px}
}