:root{color-scheme:light;background:#edd4a9;color:#503016;font-family:Georgia,serif}*{box-sizing:border-box}body{margin:0;overflow:hidden}main,#hero-art{width:100%;height:100svh}#hero-art{position:relative;background-size:cover;background-position:center}.drawing-canvas,.fallback-art{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}[hidden]{display:none!important}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}#skip-intro{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));z-index:10;border:1px solid #67431f66;background:#f4e5cbe8;color:#503016;font:18px/1.3 Georgia,serif;min-height:52px;padding:14px 22px;cursor:pointer}button:focus-visible{outline:2px solid #503016;outline-offset:4px}

#hero-art{background-image:url("assets/paper.webp?v=fixed1")}.preparing .fallback-art{visibility:hidden}
/* Aircraft can traverse the viewport's side margins as well as the artwork. */
.flight-canvas{object-fit:fill;pointer-events:none}

.desktop-extension{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.desktop-panorama .desktop-extension{display:block}
#hero-art:not(.desktop-panorama) .drawing-source,#hero-art:not(.desktop-panorama) .smoke-canvas,.desktop-panorama .drawing-canvas:not(.flight-canvas),.desktop-panorama .fallback-art{left:var(--scene-left);top:var(--scene-top);width:var(--scene-width);height:var(--scene-height);right:auto;bottom:auto}

.bridge-canvas{display:none}
.desktop-panorama .drawing-source{visibility:hidden}
.desktop-panorama .bridge-canvas{display:block!important;left:var(--bridge-left)!important;width:var(--bridge-width)!important}

.cloud-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* Preserve the skyline; crossfade the shared lower terrain on both layers. */
.desktop-panorama .bridge-canvas{mask-image:linear-gradient(to bottom,#000 36.23%,transparent 52.34%),linear-gradient(to right,transparent 4.15%,#000 17.97%,#000 82.03%,transparent 84.33%);-webkit-mask-image:linear-gradient(to bottom,#000 36.23%,transparent 52.34%),linear-gradient(to right,transparent 4.15%,#000 17.97%,#000 82.03%,transparent 84.33%)}

/* Cover-scaled desktop composition is clipped at the viewport edges. */
#hero-art{overflow:hidden}

/* Center and animate the arrow and phrase as a single decorative group. */
#arrow-panel{
  /* Source subtitle ends at y532; the bridge deck begins at y629. */
  position:absolute;top:calc(var(--scene-top) + var(--scene-height) * 580.5 / 1242);left:50%;transform:translate(-50%,-50%);z-index:10;
  /* Cap the cue against the rendered subtitle, not just the empty gap. */
  --cue-artwork-limit:calc(var(--scene-height) * 44 / 1242);
  font-size:min(22px,calc(100vw / 24),var(--cue-artwork-limit));
  --cue-bob-distance:calc(1em * 1.5 / 22);
  display:flex;align-items:center;gap:calc(1em * 12 / 22);width:max-content;
  color:#503016;pointer-events:none;
  animation:arrow-appear .35s ease-out both,arrow-bob 2.2s ease-in-out .35s infinite;
}
.continue-label{font:1em/1.3 Georgia,serif;white-space:nowrap}
#hero-art:not(.desktop-panorama) #arrow-panel{
  font-size:min(16px,calc(100vw / 20),var(--cue-artwork-limit));
  gap:.5em;--cue-bob-distance:calc(1em * 1.5 / 16);
}
#hero-art:not(.desktop-panorama) .continue-label{line-height:1.2}
#hero-art:not(.desktop-panorama) .down-arrow{width:1.5em;height:1.25em}
.down-arrow{
  display:block;width:calc(1em * 30 / 22);height:calc(1em * 28 / 22);background:#503016;
  -webkit-mask:url("assets/down-arrow.png") center/100% auto no-repeat;
  mask:url("assets/down-arrow.png") center/100% auto no-repeat;
}
#skip-intro:hover{background:#f4e5cb;border-color:#67431f}
@keyframes arrow-appear{from{opacity:0}to{opacity:1}}
@keyframes arrow-bob{0%,100%{transform:translate(-50%,calc(-50% - var(--cue-bob-distance)))}50%{transform:translate(-50%,calc(-50% + var(--cue-bob-distance)))}}
@media(max-width:650px){
  #skip-intro{right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){#arrow-panel{animation:none}}

/* Preserve original title framing above supporting copy and the bottom divider. */
main{position:relative;background:#171717;isolation:isolate}
#hero-art{z-index:1}
#digital-destination{--bottom-section-height:clamp(48px,10svh,96px);position:absolute;inset:0;overflow:hidden;background:#171717;color:#e6e2dc;z-index:0}
#digital-destination img,.ascii-shimmer{position:absolute;display:block;max-width:none;pointer-events:none}
#digital-destination img{width:100%;height:100%;object-fit:contain}
.destination-settle img,.destination-settle .ascii-shimmer{transition:left 480ms cubic-bezier(.22,1,.36,1),top 480ms cubic-bezier(.22,1,.36,1),width 480ms cubic-bezier(.22,1,.36,1),height 480ms cubic-bezier(.22,1,.36,1)}
.destination-settle .destination-mission{transition:top 480ms cubic-bezier(.22,1,.36,1),font-size 480ms cubic-bezier(.22,1,.36,1)}
#digital-destination.destination-failed{display:grid;place-items:center;font:clamp(18px,3vw,40px)/1.3 Georgia,serif;text-align:center;padding:24px}
#paper-crumble{position:fixed;inset:0;width:100%;height:100svh;z-index:2;pointer-events:none}

#hero-art:focus-visible{outline:2px solid #67431f;outline-offset:-6px}

.destination-placeholder{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:24px;text-align:center;font:clamp(18px,3vw,40px)/1.3 Georgia,serif}

.destination-bottom{position:absolute;inset:auto 0 0;height:var(--bottom-section-height);pointer-events:none}
#digital-destination .destination-placeholder{bottom:var(--bottom-section-height)}

.destination-mission{position:absolute;top:calc(var(--subtitle-bottom) + clamp(20px,calc(36px * var(--destination-zoom)),36px));left:50%;transform:translateX(-50%);width:calc(100% - 40px);margin:0;text-align:center;color:#e6e2dc;font:500 clamp(12px,calc(22px * var(--destination-zoom)),20px)/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.015em}
.destination-mission span{white-space:nowrap}

/* Destination navigation shares its frame with the page, never the paper intro. */
:root{--rail-w:0px;--rail-ease:cubic-bezier(.22,1,.36,1);--nav-ink:#e6e2dc;--nav-gold:#d4a93a}
html.rail-ready{--rail-w:64px;background:#171717;color-scheme:dark}
html.rail-ready.rail-open{--rail-w:280px}
main{width:calc(100% - var(--rail-w));margin-left:var(--rail-w);transition:width 240ms var(--rail-ease),margin-left 240ms var(--rail-ease)}
.session-destination #hero-art,.session-destination #skip-intro{visibility:hidden}
.session-destination body{background:#171717}
.site-rail{position:fixed;z-index:20;inset:0 auto 0 0;width:var(--rail-w);overflow:hidden;background:#171717;border-right:1px solid #e6e2dc38;color:var(--nav-ink);visibility:hidden;opacity:0;transition:width 240ms var(--rail-ease),opacity 400ms ease;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.rail-ready .site-rail{visibility:visible;opacity:1}
.rail-mark,.rail-toggle{position:absolute;top:max(20px,env(safe-area-inset-top));left:10px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:none;border:0;color:var(--nav-ink);cursor:pointer}
.rail-mark img,.rail-toggle img{display:block;object-fit:contain;font:10px/1.1 sans-serif}
.rail-toggle{display:none}
/* Wordmark shows only while the rail is expanded, sitting on the mark's centre line. */
.rail-wordmark{position:absolute;top:max(20px,env(safe-area-inset-top));left:64px;height:44px;display:flex;align-items:center;white-space:nowrap;font-size:20px;font-weight:600;line-height:1;letter-spacing:-.01em;color:var(--nav-ink);visibility:hidden;opacity:0;transform:translateX(-8px);transition:opacity 100ms ease,transform 160ms ease,visibility 0s 160ms;pointer-events:none}
.rail-open .rail-wordmark{visibility:visible;opacity:1;transform:none;transition-delay:100ms,100ms,0s}
/* Sidebar hint: a small panel glyph under the mark tells first-time visitors the strip expands. */
.rail-hint{position:absolute;top:calc(max(20px,env(safe-area-inset-top)) + 52px);left:0;width:64px;display:flex;justify-content:center;color:var(--nav-ink);opacity:.5;transition:opacity 160ms ease,visibility 0s;pointer-events:none}
.rail-hint svg{display:block}
.site-rail:hover .rail-hint{opacity:.9}
.rail-open .rail-hint{visibility:hidden;opacity:0;transition:opacity 100ms ease,visibility 0s 100ms}
.rail-items{list-style:none;margin:0;padding:104px 24px 24px;width:280px;max-width:100vw;visibility:hidden;opacity:0;transform:translateX(-8px);transition:opacity 100ms ease,transform 160ms ease,visibility 0s 160ms}
.rail-open .rail-items{visibility:visible;opacity:1;transform:none;transition-delay:100ms,100ms,0s}
.rail-items li+li{margin-top:14px}
.rail-items a{display:inline-flex;align-items:baseline;min-height:36px;max-width:100%;color:inherit;text-decoration:none;text-underline-offset:5px;text-decoration-thickness:1px;font-size:22px;font-weight:500;line-height:1.3;letter-spacing:-.015em}
.rail-items a[aria-current="page"]{color:rgb(230 226 220 / 45%);cursor:default}
.rail-items a.rail-product{text-decoration-line:underline}
.rail-items a:not([aria-current]):hover,.rail-items a:focus-visible{color:var(--nav-gold);text-decoration-line:underline}
html[data-current="home"] .rail-mark{cursor:default}
.site-rail :focus-visible,.about-copy a:focus-visible{outline:2px solid var(--nav-gold);outline-offset:5px}
.rail-divider{height:1px;background:#e6e2dc38;margin:20px 0!important}
.rail-ext{flex:none;display:inline-block;margin-left:5px;align-self:flex-start;vertical-align:super;margin-top:2px}
.rail-scrim{position:fixed;z-index:19;inset:0;background:rgb(23 23 23 / 40%)}
.rail-immediate main,.rail-immediate .site-rail{transition:none}
html:is([data-current="about"],[data-current="newsagent"]){background:#171717;color-scheme:dark}
html:is([data-current="about"],[data-current="newsagent"]) body{overflow-y:auto;background:#171717;color:var(--nav-ink)}
html:is([data-current="about"],[data-current="newsagent"]) main{display:flex;flex-direction:column;height:auto;min-height:100svh}
.about-copy{width:min(688px,100%);margin:0 auto;padding:18vh 24px 64px;font:400 19px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.about-copy h1{margin:0 0 28px;font:400 28px/1.2 "Courier New",monospace;letter-spacing:.08em;text-transform:uppercase}
.about-copy p{margin:0 0 1.2em}
.about-copy p:last-child{margin-bottom:0}
.about-copy a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}
.about-copy a:hover{color:var(--nav-gold)}
.ext-tail{white-space:nowrap}
.ascii-trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.about-bottom{flex:none;position:relative;margin-top:auto;min-height:clamp(48px,10svh,96px)}
/* Footer gears (DEC-0079): the binary gear train fills the band under the hairline. */
.footer-gears{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
/* Tap lens (DEC-0080): a window onto the binary field under the page, above the title and trail, below the gear band (which stacks at 4) and the rail. */
.tap-lens{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;z-index:2}
.destination-bottom,.about-bottom{z-index:4}
/* Below the two-column width the plate sits under the signup, so nothing above
   it can move: no space is reserved there, and the pending frame stays out. */
@media(max-width:1023.98px){
  .newsagent-digest[data-state="pending"]{display:none}
}
@media(max-width:650px),(hover:none),(pointer:coarse){
  html.rail-ready,html.rail-ready.rail-open{--rail-w:0px}
  main{margin-left:0;width:100%;transition:none}
  .site-rail{inset:max(12px,env(safe-area-inset-top)) auto auto max(12px,env(safe-area-inset-left));width:44px;height:72px;border:0;transition:width 240ms var(--rail-ease),height 240ms var(--rail-ease),opacity 400ms ease}
  .rail-open .site-rail{inset:0 auto 0 0;width:min(280px,100vw);height:100svh;border-right:1px solid #e6e2dc38;overflow-y:auto}
  .rail-mark{display:none}
  .rail-toggle{display:flex;top:0;left:0;height:72px;align-items:flex-start;padding-top:6px}
  .rail-open .rail-toggle{height:44px;align-items:center;padding-top:0}
  .rail-hint{top:44px;left:0;width:44px}
  .rail-open .rail-hint{top:calc(max(12px,env(safe-area-inset-top)) + 44px)}
  .rail-open .rail-toggle{top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left))}
  .rail-wordmark{top:max(12px,env(safe-area-inset-top));left:calc(max(12px,env(safe-area-inset-left)) + 54px);font-size:22px}
  .rail-items{padding-top:96px}
  .rail-items a{font-size:26px;min-height:44px}
  .about-copy{padding-top:96px}
  .about-copy h1{font-size:24px}
}
@media(prefers-reduced-motion:reduce){
  main,.site-rail,.rail-items,.rail-wordmark,.rail-hint{transition:none!important}
}

/* NewsAgent keeps the same reading column as About, with one compact signup. */
.newsagent-signup{margin-top:32px}
.newsagent-signup label{display:block;margin-bottom:8px;font-size:16px}
.signup-fields{display:flex;flex-wrap:wrap;gap:12px}
.signup-fields input{flex:1 1 240px;min-width:0;min-height:48px;padding:12px 14px;border:1px solid #e6e2dc66;border-radius:3px;background:#202020;color:var(--nav-ink);font:inherit;font-size:16px}
.signup-fields input::placeholder{color:#aaa7a2}
.signup-fields button{flex:0 0 auto;min-height:48px;padding:12px 18px;border:1px solid var(--nav-ink);border-radius:3px;background:var(--nav-ink);color:#171717;font:600 16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer}
.signup-fields button:hover:not(:disabled){background:var(--nav-gold);border-color:var(--nav-gold)}
.signup-fields :focus-visible{outline:2px solid var(--nav-gold);outline-offset:4px}
.signup-fields :disabled{opacity:.65;cursor:not-allowed}
.newsagent-signup .signup-status{margin:12px 0 0;color:#bdb9b3;font-size:15px;line-height:1.5}

.signup-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
#newsagent-unsubscribe h2{font-size:24px;font-weight:500;line-height:1.3}
#newsagent-unsubscribe .signup-fields{margin-top:20px}

/* NewsAgent digest plate (plan 2026-09-17-newsagent-digest-preview, DEC-0082).
   The frame and the scroll region are the site's hand; everything inside is the
   briefing's own document, transposed. Tokens map one-for-one from
   src/news_agent/mailer/render.py -- _INK, _SECONDARY, _DIVIDER, _SURFACE,
   _SOURCE_CLR, _LINK and the five CATEGORY_ACCENT_COLORS -- lifted where a
   charcoal ground needs it. Do not restyle these into the page's own type
   scale: the plate is showing the email, not restating it. */
.newsagent-copy{--digest-bd:#a8a39c;--digest-via:#8e8a84;--digest-surface:#1c1c1c;--digest-divider:#e6e2dc26;--digest-accent:#8e8a84;--digest-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.newsagent-copy [data-category="business_tech"]{--digest-accent:#5b9bf0}
.newsagent-copy [data-category="domestic"]{--digest-accent:#e5706b}
.newsagent-copy [data-category="global"]{--digest-accent:#6fbf73}
.newsagent-copy [data-category="culture"]{--digest-accent:#f0a34b}
.newsagent-copy [data-category="finance"]{--digest-accent:#b980d8}
.newsagent-digest{margin-top:40px;min-width:0;border:1px solid #e6e2dc2e;border-radius:6px;background:var(--digest-surface);overflow:hidden}
.digest-body{height:clamp(360px,80svh,900px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.digest-body:focus-visible{outline:2px solid var(--nav-gold);outline-offset:-2px}
.digest-head{padding:28px 28px 20px;border-bottom:1px solid var(--digest-divider)}
.digest-title{margin:0;font:700 22px/1.25 var(--digest-font);letter-spacing:-.3px;color:var(--nav-ink)}
.digest-date{margin:4px 0 0;font:500 13px/1.4 var(--digest-font);color:var(--digest-bd)}
.digest-index{padding:18px 28px 20px;border-bottom:1px solid var(--digest-divider);background:#ffffff05}
.digest-index-h{margin:0 0 12px;font:700 11px/1 var(--digest-font);letter-spacing:1.4px;text-transform:uppercase;color:var(--digest-via)}
.digest-idx{display:grid;grid-template-columns:140px minmax(0,1fr);gap:10px 12px;align-items:baseline;text-decoration:none}
.digest-idx+.digest-idx{margin-top:2px}
.digest-idx-cat{padding:4px 0 4px 8px;border-left:3px solid var(--digest-accent);font:700 11.5px/1.35 var(--digest-font);letter-spacing:.9px;text-transform:uppercase;color:var(--digest-bd)}
.digest-idx-hl{padding:4px 0;font:700 14px/1.4 var(--digest-font);color:var(--nav-ink)}
.digest-idx:hover .digest-idx-hl,.digest-idx:focus-visible .digest-idx-hl{color:var(--nav-gold)}
.digest-sec{padding:0 28px}
.digest-sec-h{display:flex;align-items:center;gap:10px;margin:0;padding:28px 0 14px;border-bottom:1px solid var(--digest-accent);font:700 12.5px/1.2 var(--digest-font);letter-spacing:1.2px;text-transform:uppercase;color:var(--nav-ink)}
.digest-bar{flex:none;width:4px;height:20px;border-radius:2px;background:var(--digest-accent)}
.digest-story{padding:22px 0;border-bottom:1px solid var(--digest-divider)}
.digest-sec .digest-story:last-child{border-bottom:0}
.digest-hl{margin:0 0 14px;font:700 19px/1.3 var(--digest-font);color:var(--nav-ink)}
.digest-bd{margin:0;font:400 14px/1.6 var(--digest-font);color:var(--digest-bd)}
.digest-via{margin:8px 0 0;font:500 12.5px/1.4 var(--digest-font);color:var(--digest-via)}
.digest-via a{color:var(--nav-gold);text-decoration:none}
.digest-via a:hover{text-decoration:underline;text-underline-offset:3px}
.digest-foot{padding:16px 28px 20px;border-top:1px solid var(--digest-divider)}
.digest-foot p{margin:0;font:400 11.5px/1.5 var(--digest-font);color:var(--digest-via)}
/* Two columns from first paint. has-digest ships in the markup, so the copy is
   set in its final column before any edition arrives and does not reflow when
   one does; the script drops the class only if there is no edition to draw.
   Until then the plate is an empty frame at the height it will have. */
@media(min-width:1024px){
  .newsagent-digest[data-state="pending"] .digest-body{min-height:clamp(360px,80svh,900px)}
  .about-copy.newsagent-copy.has-digest{width:min(1160px,100%);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,4vw,64px);align-items:start}
  .newsagent-copy.has-digest>.newsagent-col{grid-column:1;min-width:0}
  .newsagent-copy.has-digest>.newsagent-digest{grid-column:2;margin-top:6px}
}
/* Phones and touch: the plate stops being a window and runs full-length in the
   page, so a thumb never has to find the right surface to drag. Same trigger
   the rest of the site uses for its touch layout. */
@media(max-width:650px),(hover:none),(pointer:coarse){
  .digest-body{height:auto;overflow:visible;overscroll-behavior:auto}
}
@media(max-width:620px){
  .digest-head,.digest-index,.digest-sec,.digest-foot{padding-left:18px;padding-right:18px}
  .digest-idx{grid-template-columns:minmax(0,1fr);gap:2px}
  .digest-idx-hl{padding-top:0}
}
/* Rail: products that have not shipped. Not links -- a sidebar entry that goes
   nowhere is worse than one that plainly is not ready -- so they stay out of
   the Tab order and the rail's href list. Name dimmed to the same value an
   already-current page uses, with a small marker under it. */
.rail-soon{display:flex;flex-direction:column;gap:1px;min-height:36px;color:rgb(230 226 220 / 38%);cursor:default}
.rail-soon-name{font-size:22px;font-weight:500;line-height:1.3;letter-spacing:-.015em}
.rail-soon-note{font-size:11px;font-weight:500;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:rgb(230 226 220 / 30%)}
/* Rail: a group label. Only the Killed group carries one -- the live products
   and the unshipped ones are told apart by the dimming and the markers. */
.rail-heading{margin-bottom:-4px;font-size:11px;font-weight:600;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:rgb(230 226 220 / 38%)}