/* AI Trimind News — the newsstand. Every rule is scoped: atn-bar / atn-foot on the pipeline's pages,
   body.atn on the site's own pages. Nothing here may reach into an issue page's body. */

atn-bar, atn-foot, body.atn {
  --atn-ink: #15130f; --atn-paper: #f4f1ea; --atn-card: #fffdf8; --atn-accent: #d4291f;
  --atn-muted: #6b6357; --atn-rule: #d8d2c4; --atn-desk: #e6e0d2; --atn-ease: cubic-bezier(.2,.75,.2,1);
}

/* ---- bar and footer around a pipeline page ---- */
atn-bar, atn-foot { display: block; color: var(--atn-ink); font: 700 12px/1.3 Arial, "Helvetica Neue", sans-serif; letter-spacing: 1.4px; text-transform: uppercase; }
atn-bar .atn-in, atn-foot .atn-in { max-width: 900px; margin: 0 auto; padding: 0 22px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; }
atn-bar { border-bottom: 1px solid var(--atn-ink); padding: 12px 0 10px; }
atn-bar .atn-brand { font: 900 15px/1 "Arial Black", Arial, sans-serif; letter-spacing: -.3px; color: var(--atn-ink); text-decoration: none; }
atn-bar .atn-brand b, atn-foot .atn-brand b { color: var(--atn-accent); font-weight: 900; }
atn-bar .atn-nav, atn-foot .atn-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
atn-bar a, atn-foot a { color: var(--atn-muted); text-decoration: none; }
atn-bar a:hover, atn-foot a:hover, atn-bar a[aria-current], atn-foot a:focus-visible, atn-bar a:focus-visible { color: var(--atn-ink); text-decoration: underline; text-decoration-color: var(--atn-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
atn-bar .atn-where { width: 100%; color: var(--atn-muted); letter-spacing: 1.6px; }
atn-foot { border-top: 3px solid var(--atn-ink); padding: 18px 0 28px; margin-top: 8px; }
atn-foot .atn-turn { width: 100%; display: flex; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--atn-rule); margin-bottom: 4px; }
atn-foot .atn-turn a { color: var(--atn-ink); font: 900 13px/1.3 "Arial Black", Arial, sans-serif; letter-spacing: .4px; }
atn-foot .atn-turn .atn-next { text-align: right; margin-left: auto; }
atn-bar :focus-visible, atn-foot :focus-visible { outline: 3px solid var(--atn-accent); outline-offset: 3px; }

/* ---- the site's own pages ---- */
html:has(body.atn) { background: var(--atn-desk, #e6e0d2); }
body.atn { margin: 0; min-height: 100vh; background: var(--atn-desk); color: var(--atn-ink); font: 17px/1.5 Georgia, "Times New Roman", serif; -webkit-font-smoothing: antialiased; }
/* the reset carries no specificity, so print.css (shared with the texture renderer) wins over it */
:where(body.atn *, body.atn *::before, body.atn *::after) { box-sizing: border-box; margin: 0; padding: 0; }
:where(body.atn a) { color: inherit; }
body.atn :focus-visible { outline: 3px solid var(--atn-accent); outline-offset: 3px; }
body.atn .skip { position: absolute; left: -9999px; }
body.atn .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.atn .skip:focus { left: 16px; top: 12px; background: var(--atn-paper); padding: 8px 12px; z-index: 10; }

body.atn .bar { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; max-width: 1240px; margin: 0 auto; padding: 18px 24px 12px; border-bottom: 3px solid var(--atn-ink); }
body.atn .brand { font: 900 20px/1 "Arial Black", Arial, sans-serif; text-transform: uppercase; letter-spacing: -.5px; text-decoration: none; }
body.atn .brand b { color: var(--atn-accent); font-weight: 900; }
body.atn .nav { display: flex; flex-wrap: wrap; gap: 8px 20px; font: 700 12px/1 Arial, sans-serif; letter-spacing: 1.6px; text-transform: uppercase; }
body.atn .nav a { text-decoration: none; color: var(--atn-muted); }
body.atn .nav a:hover, body.atn .nav a[aria-current] { color: var(--atn-ink); text-decoration: underline; text-decoration-color: var(--atn-accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
body.atn .foot { max-width: 1240px; margin: 0 auto; padding: 18px 24px 40px; border-top: 3px solid var(--atn-ink); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; font: 700 12px/1.3 Arial, sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: var(--atn-muted); }
body.atn .foot a { color: var(--atn-muted); text-decoration: none; }
body.atn .foot a:hover { color: var(--atn-ink); text-decoration: underline; }
body.atn .foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }

body.atn .page { max-width: 1240px; margin: 0 auto; padding: 32px 24px 72px; }
body.atn .page-head { border-bottom: 2px solid var(--atn-ink); padding-bottom: 10px; margin-bottom: 8px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; }
body.atn .page-head h1 { font: 900 clamp(28px, 4vw, 44px)/1 "Arial Black", Arial, sans-serif; text-transform: uppercase; letter-spacing: -1px; }
body.atn .page-head p { font: 700 12px/1.3 Arial, sans-serif; letter-spacing: 1.6px; text-transform: uppercase; color: var(--atn-muted); }
body.atn .month { margin-top: 26px; }
body.atn .month h2, body.atn .month h3 { font: 700 11px/1 Arial, sans-serif; letter-spacing: 2.4px; text-transform: uppercase; color: var(--atn-muted); margin-bottom: 12px; }


/* the rack */
body.atn .rack { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
body.atn .rack a { display: flex; flex-direction: column; background: var(--atn-paper); text-decoration: none; box-shadow: 0 1px 0 var(--atn-rule), 0 10px 24px -14px rgba(21,19,15,.4); transition: transform .25s var(--atn-ease), box-shadow .25s var(--atn-ease); }
body.atn .rack a:hover, body.atn .rack a:focus-visible { transform: translateY(-4px); box-shadow: 0 1px 0 var(--atn-rule), 0 18px 30px -16px rgba(21,19,15,.5); }
body.atn .rack img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--atn-ink); }
body.atn .rack .r-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 6px; }
body.atn .rack .r-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
body.atn .rack .r-no { font: 900 22px/1 "Arial Black", Arial, sans-serif; letter-spacing: -.5px; }
body.atn .rack .r-date { font: 700 11px/1.3 Arial, sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: var(--atn-muted); text-align: right; }
body.atn .rack .r-sum { font-size: 15px; line-height: 1.45; }

/* the daily list */
body.atn .days { list-style: none; border-top: 1px solid var(--atn-rule); }
body.atn .days li { border-bottom: 1px solid var(--atn-rule); }
body.atn .days a { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 20px; padding: 12px 4px; text-decoration: none; }
body.atn .days a:hover { background: var(--atn-paper); }
body.atn .days .d-date { font: 900 14px/1.3 "Arial Black", Arial, sans-serif; }
body.atn .days .d-date small { display: block; font: 700 11px/1.3 Arial, sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: var(--atn-muted); margin-top: 3px; }
body.atn .days .d-lead { font-size: 15px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* prose pages */
body.atn .prose { max-width: 680px; margin: 0 auto; padding: 36px 24px 72px; }
body.atn .prose h1 { font: 900 clamp(28px, 4vw, 40px)/1.05 "Arial Black", Arial, sans-serif; text-transform: uppercase; letter-spacing: -.8px; margin-bottom: 18px; }
body.atn .prose h2 { font: 900 15px/1.2 "Arial Black", Arial, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--atn-accent); margin: 28px 0 10px; }
body.atn .prose p { margin-bottom: 14px; }
body.atn .prose .date { font: 700 12px/1.3 Arial, sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: var(--atn-muted); }
body.atn .prose button { font: 900 13px/1 "Arial Black", Arial, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; background: var(--atn-ink); color: var(--atn-paper); border: 0; padding: 12px 18px; cursor: pointer; }
body.atn .prose button:disabled { opacity: .5; cursor: default; }
body.atn .prose .cta { display: inline-block; margin: 4px 0 14px; padding: 12px 18px; background: var(--atn-accent); color: var(--atn-paper); text-decoration: none; font: 900 13px/1 "Arial Black", Arial, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; }

@media (max-width: 520px) {
  body.atn .bar, body.atn .foot { padding-left: 16px; padding-right: 16px; }
  body.atn .nav { gap: 8px 14px; }
  body.atn .page { padding: 18px 16px 60px; }
  body.atn .prose { padding: 26px 16px 60px; }
  body.atn .days a { grid-template-columns: 1fr; }
  atn-bar .atn-in, atn-foot .atn-in { padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  body.atn .rack a { transition: none; }
}

/* ---- the newsstand: the front page ---- */
body.atn.stand-page { background: #1b1e25; color: #f1e6d2; }
html.gl body.atn.stand-page { overflow: hidden; height: 100svh; }
:is(body.stand-page, body.paper-page) .bar { position: fixed; top: 0; left: 0; right: 0; max-width: none; z-index: 6; border-bottom: 1px solid rgba(241, 230, 210, .28);
  background: linear-gradient(rgba(16, 18, 26, .55), rgba(16, 18, 26, 0)); padding: 16px 28px 14px; }
:is(body.stand-page, body.paper-page) .brand { color: #f4ead6; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
:is(body.stand-page, body.paper-page) .brand b { color: #ff5a43; }
:is(body.stand-page, body.paper-page) .nav a { color: rgba(244, 234, 214, .78); text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
:is(body.stand-page, body.paper-page) .nav a:hover, :is(body.stand-page, body.paper-page) .nav a[aria-current] { color: #fff3dc; text-decoration-color: #ff5a43; }

.stage { position: fixed; inset: 0; overflow: hidden; background: #1b1e25; }
.stage .plate img, .stage .plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.stage .stand-gl { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; opacity: 0; transition: opacity .8s ease; }
.stage.ready .stand-gl { opacity: 1; }
.stage .film { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
/* the vignette is the street's; it lifts while a paper opens, so the paper is already as the page will be */
.stage .film::before { content: ""; position: absolute; inset: 0; transition: opacity 1.6s ease;
  background: radial-gradient(ellipse 78% 70% at 50% 48%, rgba(0, 0, 0, 0) 52%, rgba(14, 16, 24, .5) 100%); }
html.reading .stage .film::before { opacity: 0; }
.stage .film::after { content: ""; position: absolute; inset: -60px; background: url(/art/grain.svg) 0 0 / 256px; opacity: .2; mix-blend-mode: overlay; animation: atn-grain 0.6s steps(3) infinite; }
/* the same grain on the page in the reader, laid on the sheet itself (the article, not its full-width box): over
   the reader's empty margins it would
   blend with nothing and stand there as a grey veil that comes and goes with the page */
.reader-sheet > .print::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: url(/art/grain.svg) 0 0 / 256px; opacity: .2; mix-blend-mode: overlay; }
@keyframes atn-grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-37px, 21px); } 66% { transform: translate(24px, -42px); } 100% { transform: translate(0, 0); } }

.stand-ui { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 14px; }
html:not(.gl) .stand-ui, html:not(.gl) .stand-hint { display: none; }
.month-plate { min-width: 210px; text-align: center; padding: 10px 22px 9px; background: #e8dcc0; color: #1d1a15; border: 2px solid #b3261b; outline: 3px solid #e8dcc0; border-radius: 6px;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .75), inset 0 0 18px rgba(120, 80, 30, .25); font-family: Arial, sans-serif; }
.month-plate .m-name { display: block; font: 900 22px/1 "Arial Black", Arial, sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.month-plate .m-year, .month-plate .m-count { font: 700 11px/1.6 Arial, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #6b5a44; }
.month-plate .m-year::after { content: " · "; }
.turn { width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(244, 234, 214, .85); background: rgba(25, 15, 8, .55); color: #f4ead6; cursor: pointer;
  font: 900 20px/1 Arial, sans-serif; backdrop-filter: blur(3px); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .8); transition: transform .2s ease, background .2s ease; }
.turn:hover { background: rgba(179, 38, 27, .85); transform: scale(1.06); }
.turn:disabled { opacity: .28; cursor: default; transform: none; background: rgba(25, 15, 8, .4); }
.turn:focus-visible, .stage :focus-visible, .reader :focus-visible { outline: 3px solid #ff5a43; outline-offset: 3px; }
.stand-hint { position: absolute; left: 0; right: 0; bottom: 96px; z-index: 4; text-align: center; font: 700 11px/1 Arial, sans-serif; letter-spacing: 2.4px; text-transform: uppercase;
  color: rgba(244, 234, 214, .7); text-shadow: 0 1px 6px rgba(0, 0, 0, .8); pointer-events: none; transition: opacity .4s; }
.stage.holding .stand-ui, .stage.holding .stand-hint { opacity: 0; pointer-events: none; }
.paper-tip { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; margin: 18px 0 0 16px; padding: 6px 10px; background: #e8dcc0; color: #1d1a15;
  font: 900 12px/1 "Arial Black", Arial, sans-serif; letter-spacing: .4px; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .7); white-space: nowrap; }

.hero-ui { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 4; width: min(620px, calc(100% - 32px)); text-align: center; }
.hero-title { font: 900 16px/1.2 "Arial Black", Arial, sans-serif; letter-spacing: .6px; text-transform: uppercase; color: #f4ead6; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.hero-sum { margin-top: 6px; font: 16px/1.45 Georgia, serif; color: rgba(244, 234, 214, .86); text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.hero-acts { display: flex; justify-content: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.hero-acts button, .reader-close { cursor: pointer; padding: 13px 20px; font: 900 13px/1 "Arial Black", Arial, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; border: 0; }
.hero-open { background: #d4291f; color: #f4f1ea; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .8); }
.hero-back { background: rgba(244, 234, 214, .14); color: #f4ead6; border: 1px solid rgba(244, 234, 214, .5) !important; backdrop-filter: blur(3px); }

/* the page is laid out unseen while the paper unfolds or turns over it, and shows once the paper lies exactly on
   it. Only the page fades: the reader itself, its scrollbar and its button stay put the whole time the paper is
   open, so nothing at the edges of the window comes and goes with each hand-over. */
.reader { position: fixed; inset: 0; z-index: 20; overflow-y: auto; scrollbar-gutter: stable; overscroll-behavior: contain; padding: 70px 20px 60px;
  scrollbar-width: thin; scrollbar-color: rgba(244, 234, 214, .3) transparent; }
.reader-sheet { position: relative; opacity: 0; transition: opacity .3s ease; }
.reader.shown .reader-sheet { opacity: 1; }
.reader.instant .reader-sheet { transition: none; }
/* until the paper has become the page, the page underneath cannot be scrolled away from under it */
.reader:not(.shown) { pointer-events: none; }
/* on a phone the front page itself turns over its spine (stand.js) */
.reader-sheet .leaf { position: absolute; left: 0; top: 0; width: 100%; backface-visibility: hidden; box-shadow: 30px 0 60px -30px rgba(0, 0, 0, .8); }
.reader-close { position: fixed; top: 16px; right: 20px; z-index: 21; background: #e8dcc0; color: #1d1a15; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .8); }
.reader-sheet .print.web { width: 1100px; }

/* an issue at its own address: the inside pages of the paper, on the same street at dusk, out of focus */
body.atn.paper-page { background: #1b1e25; color: #f1e6d2; }
body.paper-page::before { content: ""; position: fixed; inset: -40px; z-index: -1; background: url(/art/street-wide.webp) 50% 50% / cover; filter: blur(14px) brightness(.34) saturate(.85); }
@media (max-aspect-ratio: 4/5) { body.paper-page::before { background-image: url(/art/street-tall.webp); } }
.desk { padding: 70px 20px 40px; }
.desk-turn { display: flex; justify-content: space-between; gap: 12px; max-width: 1100px; margin: 22px auto 0; font: 700 12px/1 Arial, sans-serif; letter-spacing: 1.6px; text-transform: uppercase; }
.desk-turn a { color: #f4ead6; text-decoration: none; padding: 12px 16px; border: 1px solid rgba(244, 234, 214, .4); }
.desk-turn a:hover { border-color: #ff5a43; color: #fff3dc; }
body.paper-page .foot { border-top: 1px solid rgba(241, 230, 210, .28); color: rgba(244, 234, 214, .7); }
body.paper-page .foot a { color: rgba(244, 234, 214, .7); }
body.paper-page .foot a:hover { color: #fff3dc; }

/* the index: the whole page without WebGL, the keyboard's way in with it */
.index { position: relative; z-index: 3; max-width: 760px; margin: 0 auto; padding: 96px 24px 60px; }
.index-title { font: 900 clamp(30px, 6vw, 54px)/1 "Arial Black", Arial, sans-serif; text-transform: uppercase; letter-spacing: -1px; color: #f4ead6; text-shadow: 0 2px 16px rgba(0, 0, 0, .7); }
.index-title b { color: #ff5a43; font-weight: 900; }
.index-title span { display: block; margin-top: 10px; font: 700 12px/1.3 Arial, sans-serif; letter-spacing: 2.4px; color: rgba(244, 234, 214, .8); }
.index section { margin-top: 28px; background: rgba(24, 15, 8, .72); padding: 14px 18px; backdrop-filter: blur(4px); }
.index h2 { font: 700 11px/1 Arial, sans-serif; letter-spacing: 2.4px; text-transform: uppercase; color: rgba(244, 234, 214, .7); margin-bottom: 8px; }
.index ul { list-style: none; }
.index a { display: flex; gap: 14px; align-items: baseline; padding: 8px 0; border-top: 1px solid rgba(244, 234, 214, .14); text-decoration: none; color: #f4ead6; }
.index a b { font: 900 15px/1 "Arial Black", Arial, sans-serif; min-width: 70px; }
.index a span { font: 700 11px/1 Arial, sans-serif; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(244, 234, 214, .7); }
.index a:hover b { color: #ff5a43; }
html:not(.gl) .stage { position: relative; min-height: 100svh; }
html:not(.gl) .stage .plate { position: fixed; }
html.gl .index { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip: rect(0 0 0 0); }
html.gl .index:focus-within { clip: auto; width: auto; height: auto; overflow: visible; left: 16px; top: 70px; max-width: 320px; padding: 0; z-index: 7; }
html.gl .index:focus-within .index-title, html.gl .index:focus-within section:not(:focus-within) { display: none; }

@media (max-width: 760px) {
  :is(body.stand-page, body.paper-page) .bar { padding: 12px 16px 10px; }
  .desk { padding: 64px 10px 30px; }
  .stand-ui { bottom: 22px; gap: 10px; }
  .month-plate { min-width: 170px; padding: 8px 14px 7px; }
  .month-plate .m-name { font-size: 18px; }
  .turn { width: 46px; height: 46px; }
  .stand-hint { bottom: 82px; font-size: 10px; letter-spacing: 1.8px; }
  .reader { padding: 64px 10px 40px; }
  .reader-sheet .print.web { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .stage .film::after { animation: none; }
  .stage .film::before { transition: none; }
  .stage .stand-gl { transition: none; }
  .reader-sheet { transition: none; }
  .turn { transition: none; }
}

/* the street: the loop is the source of a WebGL texture, drawn with the stand; the element itself stays invisible */
.stage .plate-loop { position: absolute; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
.sound { position: absolute; top: 66px; right: 24px; z-index: 5; cursor: pointer; padding: 9px 14px; border: 1px solid rgba(244, 234, 214, .55); background: rgba(25, 18, 12, .45);
  color: #f4ead6; font: 700 11px/1 Arial, sans-serif; letter-spacing: 1.8px; text-transform: uppercase; backdrop-filter: blur(3px); }
.sound[aria-pressed="true"] { background: rgba(179, 38, 27, .8); border-color: rgba(255, 220, 200, .7); }
html:not(.gl) .sound { display: none; }
@media (max-width: 760px) { .sound { top: 58px; right: 14px; } }