/* Next Great American Base · brand guidelines. Created 2026-11-09 (PT) · Updated 2026-11-10 · Version 3.
   Tokens, base type, the button, the header and the footer come from chrome.css, shared with the site.
   The page is set at the site's scale: full-width sections on the twelve-column grid, the film's frames at size. */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: calc(var(--bar) + 8px); }
strong { font-weight: 600; color: var(--nose); }
h1, h2, h3 { color: var(--nose); }
figure { margin: 0; }
.doc a:not(.btn), .foot a { text-underline-offset: 4px; }

/* cover: the live mark fills the first screen; the title sits across the bottom */
.cover { position: relative; height: 100svh; min-height: 640px; overflow: hidden; background: var(--bg); }
#markgl { position: absolute; left: 0; top: var(--bar); width: 100%; height: calc(66% - var(--bar)); display: block; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.cover-copy { position: absolute; left: var(--m); right: var(--m); bottom: 32px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; pointer-events: none; }
.cover-copy > * { pointer-events: auto; }
.cover h1 { grid-column: 1 / 9; font-weight: 500; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(44px, 8.2vw, 148px); line-height: .86; }
.cover-side { grid-column: 9 / 13; display: grid; gap: 20px; justify-items: start; }
.cover-lede { font-size: var(--t-lead); line-height: 1.35; color: var(--nose); }
.cover-meta { font-size: var(--t-small); color: var(--muted); }
.cover-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.replay { font: inherit; font-size: var(--t-small); color: var(--nose); background: none; border: 0; padding: 8px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.replay:hover { color: var(--hot); }

/* sections */
.sec { padding: 170px var(--m) 0; }
/* a section's parts rise as it arrives; until then they simply stand where they are, so nothing is ever left hidden */
.js .sec.in > * { animation: rise 1.1s var(--arrive) both; }
.js .sec.in > *:nth-child(2) { animation-delay: .08s; } .js .sec.in > *:nth-child(3) { animation-delay: .16s; } .js .sec.in > *:nth-child(n+4) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }
.g, .head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.head { row-gap: 28px; margin-bottom: 64px; }
.head h2, .head h3 { grid-column: 1 / -1; }
.head .lead { grid-column: 1 / 9; }
.head.sub { margin: 120px 0 40px; }
.lead { font-size: var(--t-lead); line-height: 1.4; color: var(--ink); }
.sec > h3 { margin: 72px 0 20px; }

/* the name */
.fit { font-stretch: 125%; font-weight: 500; text-transform: uppercase; letter-spacing: .01em; line-height: .86; white-space: nowrap; color: var(--nose); font-size: 5.9vw; margin: 0 0 64px; }
.g-a { grid-column: 1 / 6; display: grid; gap: 18px; align-content: start; font-size: var(--t-lead); line-height: 1.4; }
.rules { grid-column: 7 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.rules > div { background: var(--panel); padding: 28px; }
.rules h3 { font-stretch: 100%; font-size: var(--t-small); font-weight: 600; margin-bottom: 18px; }
.rule-yes h3 { color: #a9dcb4; } .rule-no h3 { color: #f0a796; }
.rules ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.rules li { font-stretch: 112%; font-size: 20px; line-height: 1.25; color: var(--nose); }
.rule-no li { color: var(--muted); text-decoration: line-through; text-decoration-color: #f0a796; text-decoration-thickness: 1px; }
.rules small { display: block; font-stretch: 100%; font-size: var(--t-small); line-height: 1.4; color: var(--dim); text-decoration: none; margin-top: 4px; }
.rule-no small { display: inline-block; }

/* the mark */
.plate { background: var(--panel); margin: 0 calc(-1 * var(--m)); padding: 72px var(--m); align-items: center; }
.anatomy { grid-column: 1 / 9; padding: 0 7%; }
.anatomy svg { width: 100%; height: auto; overflow: visible; }
.anatomy .callouts path { fill: none; stroke: var(--accent); stroke-width: .6; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--arrive); }
.anatomy .callouts text { fill: var(--nose); font-family: 'Archivo', sans-serif; font-size: 8px; opacity: 0; transition: opacity .8s .6s; }
.sec.in .anatomy .callouts path { stroke-dashoffset: 0; }
.sec.in .anatomy .callouts text { opacity: 1; }
.anatomy .callouts path:nth-of-type(2) { transition-delay: .25s; } .anatomy .callouts path:nth-of-type(3) { transition-delay: .5s; }
.anatomy .callouts path:nth-of-type(4) { transition-delay: .75s; } .anatomy .callouts path:nth-of-type(5) { transition-delay: 1s; }
.defs { grid-column: 9 / 13; margin: 0; display: grid; gap: 4px; align-content: center; }
.defs dt { font-stretch: 125%; font-size: 20px; color: var(--nose); }
.defs dd { margin: 0 0 18px; color: var(--ink); }

/* lockups */
.tiles { display: grid; gap: 56px; }
.kind { display: grid; grid-template-columns: minmax(0, 3fr) repeat(4, minmax(0, 2.25fr)); gap: var(--gap); align-items: start; }
.kind h3 { font-size: var(--t-h3); }
.tile { display: flex; flex-direction: column; }
.tile .art { aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 12%; transition: transform .6s var(--arrive); }
.kind.icon .art { padding: 24%; }
.tile:hover .art { transform: translateY(-4px); }
.tile .art img { max-height: 100%; width: auto; max-width: 100%; }
.tile.dark .art { background: var(--panel); } .tile.light .art, .tile.mono-navy .art { background: var(--paper); } .tile.mono-white .art { background: var(--surface); }
.tile .meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0 0; font-size: var(--t-small); color: var(--muted); }
.tile .meta a { color: var(--hot); white-space: nowrap; }

/* clear space */
.clear { grid-column: 1 / 9; }
.clear-box { padding: 9%; background: var(--panel); }
.clear-box img { width: 100%; background: var(--bg); outline: clamp(24px, 4.4vw, 68px) solid rgba(224, 173, 76, .16); }
.clear figcaption, .motion-demo figcaption, .gallery figcaption, .line-pic figcaption { font-size: var(--t-small); color: var(--muted); padding-top: 12px; }
.mins { grid-column: 9 / 13; display: grid; gap: 18px; align-content: start; }
.mins h3 { font-stretch: 100%; font-size: var(--t-small); font-weight: 600; }
.min { display: grid; gap: 14px; }
.min-art { background: var(--panel); min-height: 96px; display: grid; place-items: center; padding: 20px; }
.min-art img { max-width: none; }
.min p { color: var(--ink); font-size: var(--t-small); line-height: 1.5; } .min b { display: block; color: var(--nose); font-weight: 600; }

/* misuse */
.misuse { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); row-gap: 40px; }
.mis .art { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden; background: var(--panel); }
.mis .art img { width: 100%; }
.mis .art::after { content: ''; position: absolute; right: 18px; top: 18px; width: 26px; height: 26px; background: linear-gradient(45deg, transparent 46%, #f0a796 46%, #f0a796 54%, transparent 54%), linear-gradient(-45deg, transparent 46%, #f0a796 46%, #f0a796 54%, transparent 54%); } /* taste-skill-ignore: the cross that marks a wrong example */
.mis p { padding-top: 14px; color: var(--ink); }

/* colour: each set runs the width of the page */
.swatches { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0 calc(-1 * var(--m)); }
.sw { font: inherit; text-align: left; color: inherit; background: var(--bg); border: 0; padding: 0; cursor: pointer; display: grid; }
.sw .chip { height: clamp(180px, 32svh, 340px); transition: transform .6s var(--arrive); transform-origin: 50% 100%; }
.sw:hover .chip, .sw:focus-visible .chip { transform: scaleY(1.06); }
.sw .lbl { padding: 14px var(--m) 0; font-size: var(--t-small); line-height: 1.5; }
.sw .lbl b { display: block; font-weight: 600; font-size: var(--t-body); color: var(--nose); }
.sw .lbl span { color: var(--muted); font-variant-numeric: tabular-nums; }
.sw.copied .lbl span::after { content: ' · copied'; color: var(--hot); }

/* type */
.specimens { display: grid; gap: 72px; }
.spec { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 14px; align-items: baseline; }
.spec-show { grid-column: 1 / -1; color: var(--nose); line-height: 1.02; overflow-wrap: anywhere; }
.spec-show.wide { font-stretch: 125%; text-transform: uppercase; }
.spec-show.med { font-weight: 500; letter-spacing: .26em; font-size: min(3.4vw, 62px); white-space: nowrap; }
.spec-show.light { font-weight: 300; letter-spacing: .5em; font-size: min(2.25vw, 40px); white-space: nowrap; color: var(--hot); }
.spec-show.body { font-size: clamp(22px, 2.3vw, 38px); line-height: 1.35; font-weight: 300; max-width: 30ch; }
.spec-name { grid-column: 1 / 7; font-size: var(--t-body); color: var(--nose); }
.spec-name small { display: block; font-size: var(--t-small); color: var(--muted); }
.spec-note { grid-column: 8 / 13; color: var(--ink); }
.spec.live { background: var(--panel); margin: 0 calc(-1 * var(--m)); padding: 56px var(--m); }
.axis { font-size: clamp(34px, 7.4vw, 132px); font-stretch: 125%; font-weight: 500; outline: none; line-height: 1; min-height: 1em; }
.spec.live label { grid-column: span 3; display: grid; gap: 8px; font-size: var(--t-small); color: var(--muted); }
.spec.live .spec-name { grid-column: 1 / 7; }
.spec.live input { accent-color: var(--accent); width: 100%; }

/* taglines: the primary line on the film's last frame */
.primary-line { position: relative; height: 100svh; min-height: 560px; margin: 0 calc(-1 * var(--m)); overflow: hidden; }
.primary-line video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.primary-line figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 200px var(--m) 44px; display: grid; gap: 18px; background: linear-gradient(to bottom, transparent, rgba(7, 10, 16, .86) 70%); } /* taste-skill-ignore: scrim under words on a film frame */
.primary-line h2 { font-size: var(--t-h3); }
.tl { font-stretch: 125%; font-weight: 300; text-transform: uppercase; letter-spacing: .2em; font-size: clamp(22px, 3.7vw, 68px); color: var(--hot); line-height: 1.12; }
.primary-line figcaption p:last-child { font-size: var(--t-lead); color: var(--nose); max-width: 44ch; }
.lines { grid-column: 1 / 7; list-style: none; margin: 0; padding: 0; display: grid; align-content: start; }
.lines li { display: grid; gap: 4px; padding: 14px 0; cursor: default; outline-offset: 6px; }
.lines li span { font-stretch: 125%; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; font-size: clamp(17px, 1.55vw, 24px); line-height: 1.2; color: var(--muted); transition: color .25s; }
.lines li em { font-style: normal; color: var(--dim); transition: color .25s; }
.lines li:hover span, .lines li:focus span, .lines li.on span { color: var(--nose); }
.lines li.on em { color: var(--ink); }
.line-pic { grid-column: 7 / 13; position: sticky; top: calc(var(--bar) + 24px); align-self: start; }
.line-pic img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.line-pic img + img { position: absolute; left: 0; top: 0; opacity: 0; transform: scale(1.05); }
.line-pic img + img.up { opacity: 1; transform: none; transition: opacity .5s ease, transform 1.2s var(--arrive); }
.line-pic img:not([src]) { visibility: hidden; }
.line-pic { overflow: hidden; }
.alts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.alts li { background: var(--panel); padding: 28px; font-stretch: 125%; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.2; color: var(--nose); }

/* voice: each rule on the frame that keeps it */
.voice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin: 0 calc(-1 * var(--m)); }
.voice figure { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.voice img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--arrive); }
.voice figure:hover img { transform: scale(1.04); }
.voice figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 120px 32px 28px; display: grid; gap: 10px; background: linear-gradient(to bottom, transparent, rgba(7, 10, 16, .9) 72%); } /* taste-skill-ignore: scrim under words on a film frame */
.voice p { color: var(--nose); max-width: 46ch; }

/* imagery */
.gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--gap); }
.gallery figure { overflow: hidden; }
.gallery .w8 { grid-column: span 8; } .gallery .w4 { grid-column: span 4; } .gallery .w12 { grid-column: 1 / -1; }
.gallery img { width: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.gallery .w8 + .w4 img { aspect-ratio: 4 / 5.14; }
.gallery .w12 img { aspect-ratio: 21 / 9; }

/* motion */
.motion-demo { grid-column: 1 / 9; }
.motion-demo video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.defs.stack { align-content: start; }

/* the kit */
.kit { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; background: var(--surface); margin: 0 calc(-1 * var(--m)); padding: 110px var(--m); }
.kit-art { grid-column: 1 / 8; display: grid; place-items: center; }
.kit-art img { width: min(640px, 86%); }
.kit-copy { grid-column: 8 / 13; display: grid; gap: 24px; justify-items: start; }
#kit { padding-bottom: 0; }

@media (max-width: 900px) {
  .cover-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; bottom: 24px; }
  .cover h1, .cover-side { grid-column: 1; }
  .cover h1 { font-size: 11.8vw; }
  #markgl { height: calc(52% - var(--bar)); }
  .anatomy { padding: 0 12%; }
  .sec { padding-top: 110px; }
  .head { margin-bottom: 36px; } .head.sub { margin: 72px 0 28px; }
  .head h2, .head h3, .head .lead, .g-a, .rules, .anatomy, .defs, .clear, .mins, .lines, .line-pic, .motion-demo, .kit-art, .kit-copy, .spec-name, .spec-note, .spec.live .spec-name { grid-column: 1 / -1; }
  .fit { white-space: normal; margin-bottom: 36px; } .fit span { display: block; white-space: nowrap; }
  .g { row-gap: 32px; }
  .rules { grid-template-columns: 1fr; gap: 12px; } .rules > div { padding: 22px; }
  .plate { padding: 40px var(--m); }
  .anatomy .callouts text { font-size: 11px; }
  .kind { grid-template-columns: 1fr 1fr; gap: 20px 12px; } .kind h3 { grid-column: 1 / -1; }
  .spec-show.light { font-size: 13px; white-space: normal; line-height: 1.5; }
  .tile .meta { flex-direction: column; gap: 2px; }
  .misuse { grid-template-columns: 1fr 1fr; gap: 28px 12px; } .mis .art { aspect-ratio: 1; } .mis p { font-size: var(--t-small); }
  .swatches { grid-auto-flow: row; grid-template-columns: 1fr 1fr; row-gap: 20px; }
  .sw .chip { height: 120px; }
  .specimens { gap: 48px; }
  .spec.live label { grid-column: 1 / -1; } .spec.live { padding: 36px var(--m); }
  .primary-line { height: 84svh; } .tl { letter-spacing: .2em; }
  .line-pic { position: sticky; top: var(--bar); z-index: 2; order: -1; margin: 0 calc(-1 * var(--m)); background: var(--bg); }
  .line-pic figcaption { padding: 10px var(--m); }
  .alts { grid-template-columns: 1fr; gap: 12px; }
  .voice { grid-template-columns: 1fr; gap: 12px; } .voice figure { aspect-ratio: 4 / 5; } .voice figcaption { padding: 100px var(--m) 22px; }
  .gallery { gap: 28px 12px; } .gallery .w8, .gallery .w4 { grid-column: 1 / -1; } .gallery .w8 + .w4 img { aspect-ratio: 16 / 10; } .gallery .w12 img { aspect-ratio: 16 / 10; }
  .kit { padding: 72px var(--m); row-gap: 40px; }
}
@media (prefers-reduced-motion: reduce) { .js .sec.in > * { animation: none; } html { scroll-behavior: auto; } .line-pic img + img.up, .voice img, .sw .chip { transition: none; } }

/* ── Version 4 (2026-11-10): one geometry, shared with the site ── */
.doc .sec { position: relative; }
.doc .sec::before { content: ''; position: absolute; left: var(--m); right: var(--m); top: 72px; height: 19px; background: var(--ridge); pointer-events: none; clip-path: polygon(0 18px, calc(24% - 14px) 18px, 24% 0, 100% 0, 100% 1px, calc(24% + .6px) 1px, calc(24% - 13.4px) 19px, 0 19px); } /* taste-skill-ignore: section break drawn at the mark's angle */
#taglines.sec::before, #kit.sec::before { display: none; }
.cover-copy { padding-top: 22px; }
.cover-copy::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px; border: solid var(--ridge); border-width: 1px 1px 0; pointer-events: none; } /* taste-skill-ignore: the bracket over the title */
.replay { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; background: var(--surface); font-weight: 600; text-decoration: none; --cut: 10px; --cuty: 13px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cuty), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cuty))); transition: background-color .25s; }
.replay:hover { background: #1b2c4c; color: var(--nose); }
.rules > div, .alts li, .min-art, .clear-box, .mis .art, .tile .art, .sw .chip, .line-pic img, .motion-demo video, .voice figure, .gallery figure img { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cuty), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cuty))); }
.rules > div, .alts li { --cut: 18px; --cuty: 23px; }
.rules h3, .mins h3 { font-stretch: 125%; }
/* panels that ran edge to edge now stand in the margins, cut */
.plate { margin: 0; padding: 72px 40px; --cut: 28px; --cuty: 36px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cuty), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cuty))); }
.spec.live { margin: 0; padding: 48px 40px; --cut: 28px; --cuty: 36px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cuty), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cuty))); }
.kit { margin: 0; padding: 96px 48px; --cut: 28px; --cuty: 36px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cuty), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cuty))); }
#kit { padding-bottom: 150px; }
.swatches { margin: 0; gap: 4px; }
.sw .lbl { padding: 14px 0 0 14px; border-left: 1px solid var(--ridge); margin-top: 12px; }
.sw .chip { --cut: 18px; --cuty: 23px; }
.tile .meta a { display: inline-block; padding: 10px 0; }
.lines li { position: relative; padding-left: 22px; }
.lines li::before { content: ''; position: absolute; left: 0; top: 26px; width: 8px; height: 2px; background: var(--ridge); transition: width .3s var(--arrive), background-color .3s; }
.lines li.on::before { width: 14px; background: var(--accent); }
/* marks sit on their box's centre: brand.js measures each file's drawn area and moves it there */
.tile .art img, .min-art img, .mis .art img, .kit-art img, .clear-field img { will-change: translate; }
.mis .art .mis-fx { display: grid; place-items: center; width: 38%; }
.mis .art .mis-fx img { width: 100%; }
.clear-field { display: block; background: var(--bg); outline: clamp(24px, 4.4vw, 68px) solid rgba(224, 173, 76, .16); }
.clear-box .clear-field img { width: 100%; background: none; outline: 0; }
@media (max-width: 900px) {
  .doc .sec::before { top: 44px; }
  #markgl { height: calc(42% - var(--bar)); } .cover-actions { gap: 12px; }
  .plate { padding: 40px 20px; --cut: 16px; --cuty: 20.5px; } .spec.live { padding: 32px 20px; --cut: 16px; --cuty: 20.5px; } .kit { padding: 56px 20px; --cut: 16px; --cuty: 20.5px; }
  .mis .art .mis-fx { width: 56%; }
  #kit { padding-bottom: 96px; }
}