/* AP's Roadmap Atlas - landing page (paper desk). Fonts come from fonts.css in the same assets folder. */
:root{
  --paper:#f8f7f3; --paper-2:#efede6; --ink:#121212; --ink-2:#3b3a37; --muted:#6a665e; --line:#d9d5cb; --accent:#9e1a1f;
  --serif:"Atlas Caslon",Georgia,serif; --sans:"Atlas Franklin","Helvetica Neue",Arial,sans-serif; --black:"Atlas Blackletter",serif;
  /* Emil: strong custom curves; built-ins are too weak */
  --ease-out:cubic-bezier(0.23,1,0.32,1); --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
::selection{background:var(--ink);color:var(--paper)}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.page-wrap{max-width:1240px;margin:0 auto;padding:0 32px}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0 18px}
.wordmark{font-family:var(--black);font-size:24px;line-height:1}
.wordmark.small{font-size:18px;margin-right:8px}
.top nav{display:flex;gap:28px;font-family:var(--sans);font-size:14px;font-weight:600}
.top nav a{position:relative;padding:4px 0}
.top nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform 220ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .top nav a:hover::after{transform:scaleX(1);transform-origin:left} }

/* masthead: the one authored first-load moment */
.mast{text-align:center;padding:28px 0 8px}
.mast-name{margin:0;font-family:var(--black);font-weight:400;font-size:clamp(54px,10.4vw,148px);line-height:1;letter-spacing:0}
.mast-rule{height:5px;border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);margin:18px 0 12px}
.mast-strap{margin:0;font-style:italic;font-size:17px;color:var(--ink-2)}
html.js .mast-name{animation:ink 1100ms var(--ease-in-out) 80ms both}
html.js .mast-rule{transform-origin:center;animation:rule 700ms var(--ease-out) 650ms both}
html.js .mast-strap{animation:fade 500ms ease 900ms both}
@keyframes ink{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes rule{from{transform:scaleX(0.2);opacity:0}to{transform:scaleX(1);opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;padding:56px 0 72px}
.hero-date{margin:0 0 10px;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--accent)}
.hero h2{margin:0;font-size:clamp(40px,5vw,64px);line-height:1.02;font-weight:700;letter-spacing:-0.01em}
.hero-window{margin:12px 0 26px;font-family:var(--sans);font-size:15px;color:var(--muted)}
.hero-lead{margin:0 0 16px;font-size:clamp(22px,2.1vw,27px);line-height:1.25;font-weight:700}
.hero-lead a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size 260ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .hero-lead a:hover{background-size:100% 1px} }
.hero-intro{margin:0 0 30px;color:var(--ink-2);max-width:46ch}
html.js .stag{animation:rise 420ms var(--ease-out) both;animation-delay:calc(1050ms + var(--i) * 55ms)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;font-family:var(--sans);font-size:15px;font-weight:600;
  border:1.5px solid var(--ink);transition:transform 160ms var(--ease-out),background-color 200ms ease,color 200ms ease}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-line{background:transparent}
@media (hover:hover) and (pointer:fine){ .btn-line:hover{background:var(--ink);color:var(--paper)} .btn-ink:hover{background:#2b2b2b} }
.btn:active{transform:scale(0.97)}

/* the sheet stack: fans on hover, like a short pile of editions on a desk */
.stack{position:relative;display:block;aspect-ratio:1.18/1;max-width:640px;width:100%;justify-self:end;transition:transform 160ms var(--ease-out)}
.stack:active{transform:scale(0.985)}
.sheet{position:absolute;inset:0;background:#fffefb;border:1px solid var(--line);border-radius:2px;
  transition:transform 260ms var(--ease-out)}
.sheet::after{content:"";position:absolute;inset:0;box-shadow:0 18px 40px -18px rgba(20,18,12,.35),0 2px 6px rgba(20,18,12,.08);opacity:.55;transition:opacity 260ms ease;pointer-events:none}
.s3{transform:rotate(-3deg) translate(-10px,6px);background:var(--paper-2)}
.s2{transform:rotate(1.8deg) translate(8px,4px);background:#f6f4ee}
.s1{overflow:hidden}
html.js .s1{animation:settle 520ms var(--ease-out) 1150ms backwards}
html.js .s2{animation:settle2 520ms var(--ease-out) 1200ms backwards}
html.js .s3{animation:settle3 520ms var(--ease-out) 1250ms backwards}
@keyframes settle{from{opacity:0;transform:translateY(14px) scale(0.98)}to{opacity:1;transform:none}}
@keyframes settle2{from{opacity:0;transform:rotate(0) translate(0,14px)}to{opacity:1;transform:rotate(1.8deg) translate(8px,4px)}}
@keyframes settle3{from{opacity:0;transform:rotate(0) translate(0,14px)}to{opacity:1;transform:rotate(-3deg) translate(-10px,6px)}}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .stack:hover .s1{transform:translateY(-6px)}
  .stack:hover .s1::after{opacity:1}
  .stack:hover .s2{transform:rotate(4deg) translate(26px,2px)}
  .stack:hover .s3{transform:rotate(-6deg) translate(-30px,8px)}
  .stack:hover .fold{transform:scale(1.45)}
}
.fold{position:absolute;right:0;bottom:0;width:48px;height:48px;transform-origin:100% 100%;transition:transform 240ms var(--ease-out);
  background:linear-gradient(135deg,#e6e1d4 0 50%,var(--paper) 50% 100%);box-shadow:-3px -3px 8px -4px rgba(0,0,0,.25)}

/* the miniature front page (real headlines from Edition No. 1) */
.mini{position:absolute;inset:0;padding:4.2% 4.6%;font-size:clamp(7px,0.8vw,11.5px);line-height:1.3;color:#1a1a1a}
.m-folio,.m-bar{display:flex;justify-content:space-between;font-family:var(--sans);font-size:.82em;text-transform:uppercase;letter-spacing:.04em}
.m-folio{border-bottom:1.5px solid #1a1a1a;padding-bottom:.5em}
.m-mast{margin:.25em 0 .1em;text-align:center;font-family:var(--black);font-size:4.6em;line-height:1.1}
.m-bar{border-top:3px double #1a1a1a;border-bottom:1px solid #1a1a1a;padding:.35em 0;margin-bottom:.9em}
.m-cols{display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:1.2em}
.m-cols>div+div{border-left:1px solid #cfcabd;padding-left:1.2em}
.m-k{margin:0;font-family:var(--sans);font-weight:600;font-size:.78em;text-transform:uppercase;letter-spacing:.04em;color:var(--accent)}
.m-h{margin:.15em 0 .9em;font-weight:700;font-size:1.3em;line-height:1.12}
.m-lead{text-align:center}
.m-lh{margin:.2em 0 .4em;font-weight:700;font-size:2.6em;line-height:1.03}
.m-deck{margin:0;font-family:var(--sans);font-weight:600;font-size:1em}
.m-strip{position:absolute;left:4.6%;right:4.6%;bottom:4%;display:grid;grid-template-columns:repeat(4,1fr);gap:1em;border-top:1.5px solid #1a1a1a;padding-top:.6em;font-size:.95em}
.m-strip p{margin:0}

/* blocks */
.block{padding:72px 0;border-top:1px solid var(--line)}
.block-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:baseline;margin-bottom:32px}
.block-head h2{margin:0;font-size:clamp(28px,3vw,38px);line-height:1.1}
.block-head p{margin:0;color:var(--muted);max-width:56ch}

html.js [data-reveal]{opacity:0;transform:translateY(10px)}
html.js [data-reveal].is-in{opacity:1;transform:none;transition:opacity 420ms ease,transform 420ms var(--ease-out);transition-delay:calc(var(--i,0) * 50ms)}

.index{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--ink)}
.index li{border-bottom:1px solid var(--line)}
.index li:nth-child(3n+2),.index li:nth-child(3n+3){border-left:1px solid var(--line)}
.idx{display:flex;flex-direction:column;gap:6px;height:100%;padding:22px 22px 20px;transition:background-color 200ms ease}
.idx-name{font-size:27px;font-weight:700;line-height:1.1}
.idx-sub{color:var(--ink-2);font-size:15px;line-height:1.4}
.idx-pg{margin-top:auto;padding-top:10px;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--accent)}
.idx-pg i,.ar-go{display:inline-block;font-style:normal;transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .idx:hover{background:var(--paper-2)} .idx:hover .idx-pg i{transform:translateX(4px)} }
.idx:active{background:var(--paper-2)}

.stories{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.stories li{padding:22px 0;border-bottom:1px solid var(--line)}
.kick{margin:0 0 6px;font-family:var(--sans);font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.stories h3{margin:0 0 8px;font-size:23px;line-height:1.2}
.stories h3 a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size 240ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .stories h3 a:hover{background-size:100% 1px} }
.meta{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:var(--sans);font-size:13.5px;color:var(--muted)}
.meta .pg{margin-left:auto}
.chip{display:inline-block;padding:2px 7px;background:var(--ink);color:var(--paper);font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.briefs{list-style:none;margin:28px 0 0;padding:16px 0 0;border-top:2px solid var(--ink);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 40px;font-size:16px}
.briefs b{font-family:var(--sans);font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);margin-right:6px}
.briefs a{display:block;padding:6px 0;transition:color 200ms ease}
@media (hover:hover) and (pointer:fine){ .briefs a:hover{color:var(--accent)} }

.archive{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.archive a{display:grid;grid-template-columns:120px minmax(0,4fr) minmax(0,7fr) 40px;gap:32px;align-items:baseline;padding:26px 8px;border-bottom:1px solid var(--line);transition:background-color 200ms ease}
.ar-no{font-family:var(--black);font-size:34px;line-height:1}
.ar-date{font-family:var(--sans);font-weight:600;font-size:15px}
.ar-date small{display:block;font-weight:400;color:var(--muted);font-size:13.5px;margin-top:4px}
.ar-lead{font-size:22px;font-weight:700;line-height:1.25}
.ar-go{font-size:22px;justify-self:end}
@media (hover:hover) and (pointer:fine){ .archive a:hover{background:var(--paper-2)} .archive a:hover .ar-go{transform:translateX(5px)} }

/* footer */
.foot{padding:56px 0 64px;border-top:2px solid var(--ink)}
.foot-links{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.foot-card{display:flex;flex-direction:column;gap:6px;padding:28px 30px;border:1.5px solid var(--ink);transition:transform 160ms var(--ease-out),background-color 200ms ease}
.foot-card.dark{background:var(--ink);color:var(--paper)}
.fc-t{font-size:30px;font-weight:700;line-height:1.1}
.fc-s{font-family:var(--sans);font-size:15px;opacity:.8}
.foot-card:active{transform:scale(0.98)}
@media (hover:hover) and (pointer:fine){ .foot-card:not(.dark):hover{background:var(--paper-2)} .foot-card.dark:hover{background:#2a2a2a} }
.foot-note{margin:28px 0 0;font-family:var(--sans);font-size:14px;color:var(--muted);display:flex;align-items:baseline;flex-wrap:wrap;gap:6px}

/* phone */
@media (max-width:900px){
  .page-wrap{padding:0 20px}
  .top{flex-wrap:wrap}
  .top nav{gap:18px;flex-wrap:wrap}
  .hero{grid-template-columns:1fr;gap:40px;padding:40px 0 56px}
  .stack{justify-self:stretch;aspect-ratio:1.05/1}
  .mini{font-size:clamp(5.5px,1.55vw,9px)}
  .block{padding:56px 0}
  .block-head{grid-template-columns:1fr;gap:10px}
  .index{grid-template-columns:1fr}
  .index li:nth-child(n){border-left:0}
  .stories{grid-template-columns:1fr}
  .briefs{grid-template-columns:1fr}
  .archive a{grid-template-columns:72px minmax(0,1fr) 24px;gap:16px}
  .ar-lead{grid-column:2/3}
  .ar-go{grid-row:1;grid-column:3}
  .foot-links{grid-template-columns:1fr}
}
@media (max-width:520px){ .top nav a:nth-child(2){display:none} }

/* reduced motion: fewer and gentler, not zero. Keep opacity, drop movement. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .mast-name{animation:fade 300ms ease both}
  html.js .mast-rule{animation:fade 300ms ease both}
  html.js .stag{animation:fade 300ms ease both}
  html.js .s1,html.js .s2,html.js .s3{animation:fade 300ms ease both}
  html.js [data-reveal]{transform:none}
  .sheet,.stack,.btn,.foot-card,.fold,.idx-pg i,.ar-go{transition-property:opacity,background-color,color}
}

body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
img{-webkit-user-drag:none}
.page-wrap{transition:filter .2s ease}
html.is-blurred .page-wrap{filter:blur(14px)}
.fig.is-missing{display:none}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media print{ body{display:none!important} html{background:#fff} }

/* draft notice */
.draft-bar{margin:0;padding:10px 0;border-bottom:2px solid var(--ink);font-family:var(--sans);font-size:14px;text-align:center}
.draft-bar strong{display:inline-block;margin-right:8px;padding:2px 8px;background:var(--accent);color:#fff;text-transform:uppercase;letter-spacing:.06em;font-size:12.5px}
[data-i="0"]{--i:0}[data-i="1"]{--i:1}[data-i="2"]{--i:2}[data-i="3"]{--i:3}[data-i="4"]{--i:4}[data-i="5"]{--i:5}[data-i="6"]{--i:6}[data-i="7"]{--i:7}[data-i="8"]{--i:8}[data-i="9"]{--i:9}[data-i="10"]{--i:10}[data-i="11"]{--i:11}[data-i="12"]{--i:12}[data-i="13"]{--i:13}[data-i="14"]{--i:14}[data-i="15"]{--i:15}[data-i="16"]{--i:16}[data-i="17"]{--i:17}[data-i="18"]{--i:18}[data-i="19"]{--i:19}[data-i="20"]{--i:20}[data-i="21"]{--i:21}[data-i="22"]{--i:22}[data-i="23"]{--i:23}