@font-face{font-family:"Schibsted Grotesk";src:url("../fonts/schibsted-grotesk.woff2") format("woff2");font-style:normal;font-weight:400 700;font-display:swap}
@font-face{font-family:"Vollkorn";src:url("../fonts/vollkorn-regular.woff2") format("woff2");font-style:normal;font-weight:400 500;font-display:swap}
@font-face{font-family:"Vollkorn";src:url("../fonts/vollkorn-italic.woff2") format("woff2");font-style:italic;font-weight:400;font-display:swap}

:root{
  --pink:#eb0668;
  --graphite:#222725;
  --grey:#565655;
  --blue-hour:#223a5e;
  --frost:#f4f6f8;
  --sea-glass:#9fb8c4;
  --window-light:#f2b24c;
  --pink-ink:#b8004b;
  --page:1200px;
  --gutter:clamp(22px,5vw,76px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--frost)}
body{margin:0;background:var(--frost);color:var(--graphite);font-family:"Vollkorn",Georgia,serif;font-size:18px;line-height:1.65;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--pink);color:white}
.skip-link{position:fixed;z-index:100;top:10px;left:10px;padding:10px 14px;background:var(--frost);color:var(--graphite);font-family:"Schibsted Grotesk",sans-serif;transform:translateY(-150%)}
.skip-link:focus{transform:translateY(0)}

.site-header{position:absolute;z-index:10;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:20px var(--gutter);font-family:"Schibsted Grotesk",Arial,sans-serif;color:var(--frost)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:13px;letter-spacing:.025em}
.brand picture{display:block;width:42px}
.brand img{width:42px;height:32px;object-fit:contain;filter:brightness(0) invert(1)}
.header-start{font-size:13px;text-underline-offset:6px;text-decoration-color:rgba(244,246,248,.48)}
.header-start:hover,.header-start:focus-visible{text-decoration-color:var(--pink)}

.cover{position:relative;min-height:100svh;display:flex;align-items:center;color:var(--frost);isolation:isolate;background:var(--blue-hour)}
.cover-image,.cover-scrim{position:absolute;inset:0;z-index:-2}
.cover-image img{width:100%;height:100%;object-fit:cover;object-position:center}
.cover-scrim{z-index:-1;background:linear-gradient(90deg,rgba(20,33,54,.84) 0%,rgba(25,41,67,.53) 42%,rgba(34,58,94,.10) 76%),linear-gradient(0deg,rgba(20,33,54,.62),transparent 48%)}
.cover-copy{width:min(790px,82vw);margin-left:var(--gutter);padding:124px 0 110px}
.cover-mark{display:block;width:72px;margin:0 0 18px}
.cover-mark img{width:72px;height:54px;object-fit:contain;filter:brightness(0) invert(1)}
.eyebrow{margin:0 0 16px;font-family:"Schibsted Grotesk",Arial,sans-serif;font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
h1,h2{font-family:"Schibsted Grotesk",Arial,sans-serif;letter-spacing:-.045em;line-height:1.04}
h1{max-width:800px;margin:0;font-size:clamp(54px,7.4vw,106px);font-weight:600}
.cover-subtitle{max-width:650px;margin:26px 0 0;font-size:clamp(20px,2.3vw,31px);line-height:1.38}
.scroll-cue{position:absolute;left:var(--gutter);bottom:24px;display:flex;align-items:center;gap:12px;font-family:"Schibsted Grotesk",Arial,sans-serif;font-size:13px;text-decoration:none}
.scroll-cue span:last-child{color:var(--window-light);font-size:18px}

.chapter{position:relative;padding:clamp(100px,12vw,170px) var(--gutter)}
.chapter-inner{width:min(var(--page),100%);margin:0 auto}
.chapter-heading{position:relative;margin-bottom:42px}
.chapter-number{position:absolute;z-index:0;left:-.06em;top:-.76em;font-family:"Schibsted Grotesk",Arial,sans-serif;font-size:clamp(104px,13vw,188px);font-weight:700;line-height:1;color:rgba(235,6,104,.12);letter-spacing:-.07em;pointer-events:none}
h2{position:relative;z-index:1;max-width:900px;margin:0;font-size:clamp(38px,5.3vw,68px);font-weight:600}
.chapter-lead{max-width:780px;margin:0 0 clamp(54px,7vw,88px);font-size:clamp(20px,2.1vw,25px);line-height:1.55}
.prose-grid{display:grid;grid-template-columns:minmax(240px,.75fr) minmax(430px,1.25fr);gap:46px 90px}
.prose-grid .chapter-heading{align-self:start}
.prose{max-width:680px}
.prose p{margin:0 0 1.5em}
blockquote{position:relative;margin:58px 0 64px;padding:0 48px;font-family:"Schibsted Grotesk",Arial,sans-serif;font-size:clamp(32px,4vw,52px);font-weight:500;line-height:1.16;letter-spacing:-.035em}
blockquote::before,blockquote::after{content:"";position:absolute;top:50%;width:28px;height:2px;background:var(--pink)}
blockquote::before{left:0}
blockquote::after{right:0}
.story-plate{grid-column:1/-1}

.plate{margin:0;background:var(--frost)}
.plate picture{display:block;padding:14px;border:1px solid var(--pink);background:var(--frost);box-shadow:0 20px 50px rgba(34,39,37,.10)}
.plate picture img{width:100%;height:auto}
.plate figcaption,.browser-plate figcaption{margin:14px 14px 0;color:var(--grey);font-family:"Vollkorn",Georgia,serif;font-size:14px;font-style:italic;line-height:1.45}
.plate-wide{width:100%}
.plate-mark{width:min(590px,100%);margin:84px auto 0}
.plate-mark picture img{aspect-ratio:1;object-fit:contain}
.comparison-plate{margin-top:72px}
.comparison-plate>figcaption{margin-left:14px}
.comparison-images{display:grid;grid-template-columns:.9fr 1.45fr;align-items:stretch;gap:1px;padding:14px;border:1px solid var(--pink);background:var(--pink);box-shadow:0 20px 50px rgba(34,39,37,.10)}
.comparison-images>div{position:relative;min-height:330px;display:flex;align-items:center;justify-content:center;padding:72px 38px 42px;background:white}
.comparison-images picture{padding:0;border:0;box-shadow:none;background:transparent}
.comparison-images img{max-height:250px;object-fit:contain}
.plate-label{position:absolute;top:20px;left:24px;color:var(--grey);font-family:"Schibsted Grotesk",Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}

.palette-chapter{background:rgba(159,184,196,.16)}
.swatch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 18px}
.swatch{min-width:0}
.swatch-color{height:clamp(160px,20vw,250px);border:1px solid rgba(34,39,37,.12)}
.swatch-color.pink{background:#eb0668}.swatch-color.graphite{background:#222725}.swatch-color.grey{background:#565655}.swatch-color.blue-hour{background:#223a5e}.swatch-color.frost{background:#f4f6f8}.swatch-color.sea-glass{background:#9fb8c4}.swatch-color.window-light{background:#f2b24c}
.swatch-meta{position:relative;padding:14px 0 0;font-family:"Schibsted Grotesk",Arial,sans-serif;font-size:14px;line-height:1.35}
.swatch-meta strong{display:block;font-weight:600}
.swatch-meta code{font:inherit;color:var(--grey)}
.swatch-meta span{position:absolute;top:14px;right:0;color:var(--pink-ink);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.palette-note{max-width:700px;margin:60px 0 0;font-style:italic}

.type-specimens{display:grid;gap:24px}
.type-plate{position:relative;padding:64px clamp(28px,5vw,70px) 54px;border:1px solid var(--pink);background:var(--frost);box-shadow:0 20px 50px rgba(34,39,37,.08);overflow-wrap:anywhere}
.type-plate>span{position:absolute;top:18px;left:clamp(28px,5vw,70px);color:var(--grey);font-family:"Schibsted Grotesk",Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase}
.specimen-display{font-family:"Schibsted Grotesk",Arial,sans-serif;font-size:clamp(34px,5vw,62px);font-weight:600;line-height:1.12;letter-spacing:-.045em}
.specimen-serif{font-family:"Vollkorn",Georgia,serif;font-size:clamp(32px,4.8vw,58px);line-height:1.18}
.specimen-ui{font-family:"Schibsted Grotesk",Arial,sans-serif;font-size:clamp(18px,3vw,34px);font-weight:600;letter-spacing:.12em}

.voice-chapter{background:linear-gradient(90deg,rgba(159,184,196,.13),transparent 68%)}
.voice-pairs{display:grid;gap:0;border-top:1px solid rgba(34,39,37,.18)}
.voice-pair{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;padding:44px 0;border-bottom:1px solid rgba(34,39,37,.18)}
.voice-pair s{align-self:center;color:rgba(34,39,37,.40);font-family:"Schibsted Grotesk",Arial,sans-serif;font-size:17px;line-height:1.5;text-decoration-thickness:1px}
.voice-pair p{margin:0;font-size:clamp(22px,2.5vw,30px);line-height:1.42}
.street-plate{margin-top:70px}

.web-chapter{background:rgba(159,184,196,.10)}
.browser-plate{margin:74px 0 0;padding:0 0 14px;border:1px solid var(--pink);background:var(--frost);box-shadow:0 26px 70px rgba(34,39,37,.14)}
.browser-bar{height:44px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#e7ebee;border-bottom:1px solid #d2d8dc}
.browser-bar>span{width:10px;height:10px;border-radius:50%;background:#b8c1c6}
.browser-bar>span:first-child{background:var(--pink)}
.browser-bar>div{width:min(430px,55%);margin:0 auto;padding:4px 18px;border-radius:14px;background:var(--frost);color:var(--grey);font-family:"Schibsted Grotesk",Arial,sans-serif;font-size:11px;text-align:center}
.browser-plate picture,.browser-plate img{display:block;width:100%}

.artifact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:74px 42px;align-items:start}
.artifact-grid .plate picture img{aspect-ratio:4/3;object-fit:cover}
.artifact-grid .plate:nth-child(2) picture img,.artifact-grid .plate:nth-child(5) picture img,.artifact-grid .plate:nth-child(7) picture img,.artifact-grid .plate:nth-child(8) picture img,.artifact-grid .plate:nth-child(9) picture img{aspect-ratio:1;object-fit:cover}
.artifact-wide{grid-column:1/-1}
.artifact-wide picture img{aspect-ratio:16/10}

.chapter-divider{height:18px;padding:0 var(--gutter)}
.chapter-divider svg{display:block;width:min(var(--page),100%);height:18px;margin:0 auto;overflow:visible}
.chapter-divider path{fill:none;stroke:var(--pink);stroke-width:1.5;vector-effect:non-scaling-stroke}

.closing{position:relative;min-height:78svh;display:flex;align-items:center;padding:clamp(110px,14vw,190px) var(--gutter);overflow:hidden;background:var(--blue-hour);color:var(--frost)}
.closing-inner{position:relative;width:min(870px,100%);margin:0 auto;text-align:center}
.closing .chapter-number{left:50%;top:-.7em;transform:translateX(-50%);color:rgba(235,6,104,.20)}
.closing h2{margin:0 auto 34px}
.closing p{max-width:720px;margin:0 auto;font-size:clamp(20px,2.1vw,25px)}
.closing .credit{margin-top:72px;font-family:"Schibsted Grotesk",Arial,sans-serif;font-size:13px;letter-spacing:.08em}
.closing-mark{display:block;width:70px;margin:38px auto 0}
.closing-mark img{width:70px;height:50px;object-fit:contain;filter:brightness(0) invert(1)}

.reveal{opacity:0;transform:translateY(16px);transition:opacity 250ms ease,transform 250ms ease}
.reveal.is-visible{opacity:1;transform:none}

@media (max-width:860px){
  .prose-grid{grid-template-columns:1fr;gap:0}
  .prose{max-width:680px}
  .comparison-images{grid-template-columns:1fr}
  .comparison-images>div{min-height:260px}
  .swatch-grid{grid-template-columns:repeat(2,1fr)}
  .voice-pair{grid-template-columns:1fr;gap:18px}
}

@media (max-width:620px){
  body{font-size:17px}
  .site-header{padding-top:14px}
  .brand span{max-width:172px;line-height:1.25}
  .header-start{display:none}
  .cover-copy{width:auto;margin-right:var(--gutter);padding-top:120px}
  .cover-image img{object-position:61% center}
  .cover-subtitle{font-size:20px}
  .chapter{padding-top:112px;padding-bottom:112px}
  .chapter-heading{margin-bottom:34px}
  .chapter-number{top:-.72em}
  blockquote{padding:0 30px;margin:44px 0;font-size:31px}
  blockquote::before,blockquote::after{width:19px}
  .plate picture{padding:8px}
  .plate figcaption,.browser-plate figcaption{margin-left:8px;margin-right:8px}
  .comparison-images{padding:8px}
  .comparison-images>div{min-height:220px;padding:66px 22px 28px}
  .swatch-grid{gap:28px 12px}
  .swatch-color{height:145px}
  .swatch-meta span{position:static;display:block;margin-top:5px}
  .type-plate{padding-top:58px}
  .specimen-ui{letter-spacing:.08em}
  .artifact-grid{grid-template-columns:1fr;gap:56px}
  .artifact-wide{grid-column:auto}
  .browser-bar>div{margin-right:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}