/* MSP Margin — the printed annual, set on a ledger margin.
   One family (Literata), graphite + light grey fields, safety orange for actions. */

@font-face{font-family:"Literata";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/literata-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Literata";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/literata-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Literata";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/literata-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Literata";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/literata-latin-600-normal.woff2) format("woff2")}

:root{
  --bg:#18191b; --surface:#222427; --ink:#eff0f1; --muted:#a9abb0;
  --accent:#ff4a1f; --accent-ink:#18191b;
  --field:#eff0f1; --field-ink:#18191b; --field-muted:#4a4c51; --field-2:#e2e4e6;
  --m:48px;                       /* page margin */
  --axis:42vw;                    /* the margin line: everything hangs from it */
  --step-small:clamp(.8125rem,.79rem + .1vw,.875rem);
  --step-body:clamp(1.125rem,1.05rem + .3vw,1.3125rem);
  --step-lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --step-head:clamp(2rem,1.3rem + 3.2vw,4rem);
  --step-display:clamp(3.5rem,6.6vw,6.5rem);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --font:"Literata",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--step-body);line-height:1.6;font-optical-sizing:auto;font-variant-numeric:tabular-nums;border-top:8px solid var(--accent)}
h1,h2,h3,p,figure,ol,ul{margin:0}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-999px;top:12px;background:var(--accent);color:var(--accent-ink);padding:10px 14px;z-index:20}
.skip:focus{left:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;background:var(--accent);color:var(--accent-ink);font:600 var(--step-small)/1 var(--font);font-size:1rem;text-decoration:none;border:0;border-radius:0;cursor:pointer;transition:transform .2s var(--ease-out),background-color .2s}
.btn:hover{background:#ff6a45}
.btn:active{transform:translateY(1px) scale(.98)}
.tlink{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;transition:color .2s,text-decoration-thickness .2s}
.tlink:hover{color:var(--accent);text-decoration-thickness:3px}

/* Top row */
.top{display:grid;grid-template-columns:calc(42vw - var(--m)) 1fr auto;align-items:center;gap:16px;padding:36px var(--m) 0}
.wordmark{display:inline-flex;align-items:stretch;gap:.34em;font-weight:500;font-size:1.375rem;letter-spacing:-.025em;line-height:1;text-decoration:none;color:var(--ink)}
.wordmark::before{content:"";width:.14em;background:var(--accent)}
.wordmark span{padding:.08em 0 .12em}
.nav{display:flex;flex-wrap:wrap;gap:6px 26px;font-size:1rem}
.nav a{text-decoration:none;color:var(--ink);transition:color .2s}
.nav a:hover,.nav a[aria-current]{color:var(--accent)}
.menu{display:none}

/* Hero: a void, then the statement on the axis */
.hero{height:max(calc(100svh - 8px),660px);display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.hero-art{display:grid;grid-template-columns:var(--axis) 1fr;grid-template-rows:minmax(0,1fr);margin:28px 0 56px;min-height:0;overflow:hidden}
.hero-art img{width:100%;height:100%;object-fit:cover;min-height:0}
@media (prefers-reduced-motion:no-preference){.js .hero-art img{animation:settle 1600ms var(--ease-out) both}.js .hero-art img + img{animation-delay:120ms}}
.hero-foot{display:grid;grid-template-columns:calc(var(--axis) - var(--m)) 1fr;column-gap:0;align-items:end;padding:0 var(--m) 72px}
.hero-side{display:flex;flex-direction:column;gap:22px;max-width:32ch;padding-right:32px;color:var(--muted);font-size:1.125rem;line-height:1.5}
.hero h1{font-weight:500;font-size:var(--step-display);line-height:.95;letter-spacing:-.04em}
.lines .line{display:block;overflow:hidden;padding-bottom:.24em;margin-bottom:-.24em}
.lines [data-line]{display:block}
@media (prefers-reduced-motion:no-preference){
  .js .lines [data-line]{transform:translateY(105%);animation:line-up 900ms var(--ease-out) forwards;animation-delay:calc(var(--i) * 110ms + 150ms)}
  .js .hero-side{opacity:0;animation:fade-up 700ms var(--ease-out) 520ms forwards}
}
@keyframes line-up{to{transform:none}}
@keyframes fade-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Reveal once on scroll */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--ease-out),transform 900ms var(--ease-out);transition-delay:calc(var(--d,0) * 80ms)}
  .js [data-reveal].is-in{opacity:1;transform:none}
}

/* Fields */
.field{background:var(--field);color:var(--field-ink)}
.field .muted{color:var(--field-muted)}
.muted{color:var(--muted)}
.section{padding:140px var(--m) 120px}

/* Intro: title, note, facts */
.intro-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end}
.intro-top h2{grid-column:1/7;font-weight:400;font-size:var(--step-head);line-height:1.02;letter-spacing:-.03em}
.intro-top p{grid-column:10/13;font-size:1rem;line-height:1.55}
.facts{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px 32px;margin-top:120px}
.fact{display:flex;flex-direction:column;gap:8px;text-decoration:none;max-width:19ch}
.fact b{font-weight:400;font-size:clamp(1.75rem,3vw,2.75rem);line-height:1.05;letter-spacing:-.025em;transition:color .2s}
.fact span{font-size:1rem;line-height:1.45}
.fact:hover b{color:#c2300c}

/* Latest: tabs and banded list */
.latest-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px}
.latest-head h2{font-weight:500;font-size:var(--step-head);line-height:1.02;letter-spacing:-.03em}
.latest-head h2 .soft{display:block;color:var(--muted)}
.latest-body{display:grid;grid-template-columns:170px minmax(0,1fr);gap:40px;margin-top:56px}
.tabs{display:flex;flex-direction:column;gap:6px;align-self:start}
.tab{display:flex;flex-direction:column;justify-content:center;min-height:64px;padding:0 16px;background:var(--surface);color:var(--ink);border:0;text-align:left;font:500 1rem/1.2 var(--font);cursor:pointer;transition:background-color .2s,color .2s,transform .2s var(--ease-out)}
.tab small{font-size:var(--step-small);color:var(--muted);font-weight:400;margin-top:3px}
.tab:hover{background:#2c2f33}
.tab:active{transform:scale(.98)}
.tab[aria-selected="true"]{background:var(--accent);color:var(--accent-ink)}
.tab[aria-selected="true"] small{color:var(--accent-ink)}
.bands{display:flex;flex-direction:column;gap:4px;list-style:none;padding:0}
.band a{display:grid;grid-template-columns:110px minmax(0,1fr) 170px;gap:8px 24px;align-items:center;min-height:84px;padding:16px 22px;background:var(--surface);text-decoration:none;color:var(--ink);transition:background-color .2s,transform .3s var(--ease-out)}
.band:nth-child(even) a{background:#1d1f21}
.band a:hover{background:#2c2f33;transform:translateX(6px)}
.band .when{font-size:1.125rem;color:var(--muted)}
.band .what{display:flex;flex-direction:column;gap:2px;min-width:0}
.band .what b{font-weight:500;font-size:1.125rem;line-height:1.3}
.band .what span{font-size:1rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.band .where{font-size:1rem;color:var(--muted);text-align:right}
.band[hidden]{display:none}

/* Showcase: billed vs kept */
.compare{overflow:clip}
.compare-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.compare-top h2{grid-column:1/6;font-weight:500;font-size:clamp(1.75rem,2.4vw,2.25rem);line-height:1.1;letter-spacing:-.02em}
.compare-top p{grid-column:7/13;font-size:1.0625rem;line-height:1.6;max-width:60ch}
.specimens{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:12vh}
.specimen{grid-column:span 6;display:flex;flex-direction:column;gap:18px;min-width:0}
.specimen figcaption{font-size:var(--step-lead);line-height:1.3}
.specimen .num{font-weight:500;font-size:clamp(4.5rem,11.5vw,12rem);line-height:.8;padding-bottom:.14em;letter-spacing:-.05em;white-space:nowrap}
.specimen .num sup{font-size:.35em;vertical-align:.95em;letter-spacing:0;margin-right:.04em}
.specimen.kept .num{color:#c2300c}

/* News table pushed right */
.news-head h2{font-weight:500;font-size:var(--step-head);line-height:.98;letter-spacing:-.03em;max-width:18ch}
.news-head h2 .indent{display:block;padding-left:3vw}
.news-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:96px;align-items:end}
.news-photo{grid-column:1/5;overflow:hidden;aspect-ratio:4/5}
.news-photo img{width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:no-preference){.news-photo img{animation:drift 26s ease-in-out infinite alternate}}
@keyframes drift{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.12) translate(-2%,-3%)}}
.news-label{display:none}
.news-rows{grid-column:7/13;list-style:none;padding:0;display:flex;flex-direction:column;gap:30px;align-self:start}
.news-rows a{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:20px;text-decoration:none;font-size:var(--step-lead);line-height:1.4;transition:color .2s}
.news-rows a:hover{color:var(--accent)}
.news-rows .d,.news-rows .s{color:var(--muted);font-size:1rem;padding-top:.35em}
.news-rows .s{text-align:right}
.news-more{margin-top:44px;font-size:1rem}

/* CTA: photographs, then a field */
.strip{display:grid;grid-template-columns:repeat(3,1fr)}
.strip img{width:100%;height:40svh;min-height:260px;object-fit:cover}
.cta-band{padding:80px var(--m) 96px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.cta-band > div{grid-column:1/13;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:24px;align-items:end}
.cta-band .say{grid-column:1/9}
.cta-band .small{grid-column:9/13}
.cta-band .say{font-size:clamp(1.5rem,2.6vw,2.375rem);line-height:1.3;letter-spacing:-.015em;max-width:30ch}
.cta-band .say a{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:4px;text-underline-offset:6px;transition:color .2s}
.cta-band .say a:hover{color:#c2300c}
.cta-band .small{font-size:1rem;line-height:1.5}

/* Footer: contact as the headline */
.foot{background:var(--accent);color:var(--accent-ink);padding:72px var(--m) 36px;display:flex;flex-direction:column;gap:96px}
.foot a{color:var(--accent-ink);text-decoration:none}
.foot-grid{display:grid;grid-template-columns:calc(var(--axis) - var(--m)) repeat(2,minmax(0,1fr)) auto;column-gap:32px;row-gap:40px;align-items:start}
.foot-brand{display:flex;flex-direction:column;gap:20px;padding-right:32px}
.foot-brand .wordmark{font-size:1.75rem;align-self:start}
.foot-brand .wordmark::before{background:var(--accent-ink)}
.foot-brand p{font-size:1.0625rem;line-height:1.55;max-width:34ch}
.foot-col{display:flex;flex-direction:column;gap:10px;font-size:1.0625rem}
.foot-col h2{font-size:1.0625rem;font-weight:600;margin-bottom:6px}
.foot-col a{align-self:start;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:5px;transition:text-decoration-color .25s}
.foot-col a:hover{text-decoration-color:var(--accent-ink)}
.foot .up{font-size:1.0625rem;text-decoration:underline;text-underline-offset:5px}
.foot-mail{display:flex;flex-direction:column;gap:18px}
.foot-mail p{font-size:var(--step-lead)}
.mail{display:block;font-weight:500;font-size:clamp(2.5rem,5.4vw,6.25rem);line-height:1.04;letter-spacing:-.04em;white-space:nowrap;transition:opacity .2s}
.mail span{display:inline}
.mail:hover{opacity:.8}
.foot-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;font-size:1rem}

/* Mosaic: photographs and flat tiles, butted together */
.mosaic{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,34vh);min-height:520px}
.mosaic figure{overflow:hidden}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.mosaic figure:hover img{transform:scale(1.04)}
.m-a{grid-column:1/3;grid-row:1/3}
.m-b{grid-column:3/5;grid-row:1}
.m-orange{grid-column:5;grid-row:1;background:var(--accent)}
.m-d{grid-column:6;grid-row:1/3}
.m-light{grid-column:3;grid-row:2;background:var(--field)}
.m-f{grid-column:4/6;grid-row:2}
@media (prefers-reduced-motion:no-preference){
  .js .mosaic > *{clip-path:inset(0 0 100% 0);transition:clip-path 1100ms var(--ease-out)}
  .js .mosaic.is-in > *{clip-path:inset(0 0 0 0)}
  .js .mosaic.is-in > :nth-child(2){transition-delay:90ms}.js .mosaic.is-in > :nth-child(3){transition-delay:180ms}
  .js .mosaic.is-in > :nth-child(4){transition-delay:270ms}.js .mosaic.is-in > :nth-child(5){transition-delay:360ms}
  .js .mosaic.is-in > :nth-child(6){transition-delay:450ms}
}

/* Section and article masthead */
.masthead{position:relative}
.masthead-img{height:45svh;min-height:280px;overflow:hidden}
.masthead-img img{width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:no-preference){.js .masthead-img img{animation:settle 1400ms var(--ease-out) both}}
@keyframes settle{from{transform:scale(1.08)}to{transform:none}}
.pagehead{display:grid;grid-template-columns:calc(var(--axis) - var(--m)) minmax(0,1fr);padding:72px var(--m) 96px;align-items:end}
.pagehead .side{display:flex;flex-direction:column;gap:6px;padding-right:32px;font-size:var(--step-small);color:var(--muted);line-height:1.5}
.pagehead h1{font-weight:500;font-size:clamp(3rem,7.4vw,7rem);line-height:.95;letter-spacing:-.04em}
.pagehead .standfirst{margin-top:26px;font-size:var(--step-lead);line-height:1.45;max-width:36ch;color:var(--ink)}

/* Section listing */
.listing{padding:96px var(--m) 140px}
.entry{display:grid;grid-template-columns:calc(var(--axis) - var(--m)) minmax(0,1fr);padding:30px 0;text-decoration:none;color:var(--field-ink)}
.entry + .entry{margin-top:6px}
.entry .meta{font-size:var(--step-small);color:var(--field-muted);padding-top:.5em;padding-right:32px}
.entry .body{display:flex;flex-direction:column;gap:10px;max-width:46ch}
.entry h2{font-weight:500;font-size:clamp(1.5rem,2.3vw,2.125rem);line-height:1.12;letter-spacing:-.02em;transition:color .2s}
.entry p{font-size:1.0625rem;line-height:1.55;color:var(--field-muted)}
.entry:hover h2{color:#c2300c}
.entry .go{font-size:1rem;color:var(--field-ink);text-decoration:underline;text-underline-offset:5px}
.empty{padding-left:calc(var(--axis) - var(--m));font-size:var(--step-lead)}

/* Article */
.article-head h1{font-size:clamp(2.25rem,4.4vw,4.25rem);line-height:1;max-width:20ch}
.article{display:grid;grid-template-columns:calc(var(--axis) - var(--m)) minmax(0,1fr);padding:96px var(--m) 120px}
.article .aside{display:flex;flex-direction:column;gap:6px;padding-right:32px;font-size:var(--step-small);color:var(--field-muted);line-height:1.5;position:sticky;top:32px;align-self:start}
.article .aside b{font-weight:600;color:var(--field-ink)}
.prose{max-width:64ch;font-size:var(--step-body);line-height:1.65;color:var(--field-ink)}
.prose > * + *{margin-top:1.05em}
.prose h2{font-weight:600;font-size:var(--step-lead);line-height:1.25;letter-spacing:-.01em;margin-top:2.2em}
.prose a{color:#c2300c;text-decoration:underline;text-underline-offset:4px}
.prose a:hover{text-decoration-thickness:3px}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:.45em}
.prose strong{font-weight:600}
.prose table{width:100%;border-collapse:collapse;font-size:1rem;line-height:1.4;margin-top:1.6em}
.prose th{text-align:left;font-weight:600;padding:10px 12px;border-bottom:2px solid var(--field-ink)}
.prose td{padding:10px 12px;border-bottom:1px solid #c9cbcf;vertical-align:top}
.prose td:last-child,.prose th:last-child{text-align:right}
.table-wrap{overflow-x:auto}
.prose blockquote{padding-left:1em;font-style:italic;color:var(--field-muted)}
.credit{margin-top:3em;font-size:var(--step-small);color:var(--field-muted)}

.related{padding:120px var(--m) 140px}
.related > h2{font-weight:500;font-size:var(--step-head);line-height:1.02;letter-spacing:-.03em;padding-left:calc(var(--axis) - var(--m));margin-bottom:40px}
.related .entry{color:var(--ink)}
.related .entry .meta,.related .entry p{color:var(--muted)}
.related .entry:hover h2{color:var(--accent)}

/* Plain pages */
.plain .prose{max-width:62ch}
.plain .prose h2:first-child{margin-top:0}

/* Phone */
@media (max-width:820px){
  :root{--m:20px;--axis:0px}
  .top{grid-template-columns:1fr auto;padding-top:24px}
  .top .nav{display:none}
  .menu{display:block;position:relative}
  .menu summary{list-style:none;cursor:pointer;font-size:1rem;min-height:44px;display:flex;align-items:center;text-decoration:underline;text-underline-offset:5px}
  .menu summary::-webkit-details-marker{display:none}
  .menu nav{position:absolute;right:0;top:48px;z-index:10;background:var(--surface);display:flex;flex-direction:column;gap:2px;min-width:220px;padding:8px}
  .menu nav a{padding:12px 14px;text-decoration:none;color:var(--ink)}
  .top .btn{display:none}
  .hero-foot{grid-template-columns:1fr;padding-bottom:28px}
  .hero-side{order:2;margin-top:22px;font-size:1.0625rem}
  .hero h1{font-size:10.6vw}
  .hero{height:auto;grid-template-rows:auto auto auto}
  .hero-art{grid-template-columns:2fr 3fr;margin:20px 0 40px;height:34svh}
  .hero-foot{padding-bottom:56px}
  .section{padding:96px var(--m) 88px}
  .intro-top{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
  .intro-top h2{font-size:min(11vw,3.25rem)}
  .facts{display:grid;grid-template-columns:1fr 1fr;row-gap:32px;margin-top:64px}
  .fact b{font-size:1.625rem}
  .latest-head .btn{width:100%}
  .latest-body{grid-template-columns:1fr;gap:20px}
  .tabs{flex-direction:row;flex-wrap:wrap}
  .tab{flex:1 1 30%;min-height:56px;padding:0 12px}
  .band a{grid-template-columns:1fr;gap:6px;padding:16px}
  .band .where{text-align:left}
  .compare{padding-bottom:0}
  .compare-top{display:flex;flex-direction:column;gap:16px}
  .specimens{display:flex;flex-direction:column;gap:0;margin:48px calc(-1 * var(--m)) 0}
  .specimen{padding:28px var(--m) 32px;overflow:hidden}
  .specimen .num{font-size:21vw}
  .specimen.kept{background:var(--bg);color:var(--ink)}
  .specimen.kept .num{color:var(--accent)}
  .news-head h2 .indent{padding-left:0}
  .news-grid{display:flex;flex-direction:column;margin-top:48px;gap:40px}
  .news-label{display:none}
  .news-rows a{grid-template-columns:1fr auto;font-size:1.125rem;gap:4px 12px}
  .news-rows .t{grid-column:1/3}
  .news-photo{order:2;width:60%;align-self:flex-end}
  .strip{grid-template-columns:1fr 1fr}
  .strip img{height:auto;aspect-ratio:4/3;min-height:0}
  .strip img:first-child{grid-column:1/3}
  .cta-band{display:block;padding:56px var(--m)}
  .cta-band > div{display:flex;flex-direction:column;align-items:flex-start}
  .mail{font-size:10.6vw;white-space:normal}
  .mail span{display:block}
  .foot{gap:64px;padding-top:48px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/3;padding-right:0}
  .foot .up{grid-column:1/3}
  .foot-meta{flex-direction:column}
  .mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,26vh);min-height:0}
  .m-a{grid-column:1;grid-row:1/3}.m-b{grid-column:2;grid-row:1}.m-orange{grid-column:2;grid-row:2}
  .m-d{grid-column:2;grid-row:3/5}.m-light{display:none}.m-f{grid-column:1;grid-row:3/5}
  .pagehead,.entry,.article{grid-template-columns:1fr}
  .pagehead{padding:48px var(--m) 64px}
  .pagehead .side,.article .aside{order:-1;padding:0 0 18px;position:static}
  .pagehead h1{font-size:min(15vw,4.5rem)}
  .article-head h1{font-size:min(9.6vw,3rem)}
  .entry .meta{padding:0 0 8px}
  .listing,.article{padding:64px var(--m) 96px}
  .related{padding:88px var(--m) 96px}
  .related > h2{padding-left:0}
  .empty{padding-left:0}
}

/* Inner pages: a narrower margin column so long reading sits closer to centre */
.inner{--axis:30vw}
.plainpage .pagehead h1{font-size:clamp(2.5rem,5vw,4.75rem);line-height:1;max-width:18ch}
.pagehead{padding-top:64px;padding-bottom:80px}
.inner .pagehead h1{text-wrap:balance}
.inner .standfirst{max-width:44ch}
.inner .entry .body{max-width:60ch}
.inner .entry{padding:34px 0}
.inner .listing .entry + .entry{border-top:0}
@media (max-width:820px){.inner{--axis:0px}}