/* =====================================================================
   ATLAS :: pages.css
   Interior pages only. The home page carries the Earth-to-Moon flight;
   these pages get a quieter device of their own so they feel alive
   without repeating it: a gold orbital arc in the right margin that
   traces with scroll position, plus section rules that draw in once.
   Everything here degrades to a readable static page with JS off.
   ===================================================================== */

/* --- page shell ---------------------------------------------------- */
body.page{ background:var(--ink); }

body.page .site-head{
  position:relative; z-index:6;
  padding-top:clamp(20px,2.6vw,34px);
  padding-bottom:clamp(14px,1.8vw,22px);
}

/* --- starfield: pure CSS, no image, no request ---------------------- */
.stars{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(214,168,92,.20) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 9%,  rgba(255,255,255,.13) 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 62%, rgba(255,255,255,.10) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 47%, rgba(214,168,92,.15) 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 83%, rgba(255,255,255,.09) 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 91%, rgba(214,168,92,.12) 50%, transparent 51%),
    radial-gradient(1px 1px at 67% 31%, rgba(255,255,255,.11) 50%, transparent 51%);
}

/* --- the arc: reading progress, drawn as an orbit ------------------- */
.arc{
  position:fixed; z-index:5; pointer-events:none;
  top:50%; right:clamp(-64px,-2vw,-18px); transform:translateY(-50%);
  width:clamp(180px,17vw,300px); height:clamp(360px,34vw,600px);
}
.arc svg{ width:100%; height:100%; overflow:visible; display:block }
.arc .track{ fill:none; stroke:rgba(214,168,92,.14); stroke-width:1 }
.arc .live{
  fill:none; stroke:var(--gold); stroke-width:1.4; stroke-linecap:round;
  /* dash offset is driven from pages.js */
}
.arc .pip{ fill:var(--gold-hi) }
@media (max-width:900px){ .arc{ display:none } }

/* --- interior masthead --------------------------------------------- */
.page-head{
  position:relative; z-index:3;
  padding-top:clamp(46px,8vw,104px);
  padding-bottom:clamp(30px,4.4vw,56px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.page-head h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(34px,6.1vw,74px); line-height:1.02;
  letter-spacing:-.012em; color:var(--text-hi); margin:.30em 0 0;
  max-width:16ch;
}
.page-head .stand{
  margin-top:clamp(18px,2.2vw,28px); max-width:60ch;
  font-size:clamp(16px,1.24vw,18px); line-height:1.62; color:var(--text);
}

/* --- body flow ------------------------------------------------------ */
.page-body{ position:relative; z-index:3; padding-bottom:clamp(40px,6vw,88px) }
.page-body section{
  padding-top:clamp(38px,5.4vw,72px);
  max-width:74ch;
}
.page-body h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(23px,2.7vw,36px); line-height:1.16;
  color:var(--text-hi); margin:.34em 0 0; letter-spacing:-.006em;
}
.page-body h3{
  font-size:clamp(16px,1.35vw,19px); font-weight:500;
  color:var(--text-hi); margin:2.1em 0 .5em; line-height:1.3;
}
.page-body p{
  margin:1.05em 0 0; font-size:clamp(16px,1.16vw,16.8px);
  line-height:1.72; color:var(--text); max-width:34em; /* V6: about 70 characters in Archivo; 68ch measured 86 to 93 */
}
.page-body p.first{ margin-top:1.3em }
.page-body strong{ color:var(--text-hi); font-weight:500 }

/* --- rule that draws itself in once -------------------------------- */
/* The element that gets OBSERVED must never be the element that gets
   hidden. Two ways of hiding it were tried and both broke the observer
   for the same underlying reason: transform:scaleX(0) collapses the box
   to zero area, and clip-path:inset(0 100% 0 0) clips the intersection
   rectangle to zero width. In both cases intersectionRatio stays 0, no
   threshold is ever crossed, and the reveal silently never runs.
   So .rule keeps its full 1290x1 box and stays unclipped, and the inner
   <i> is the thing that animates. .rule is what pages.js observes.
   The hidden state is scoped to .js so that with scripting off the line
   is simply drawn, rather than hidden by CSS with nothing left to show it. */
.rule{ height:1px; overflow:hidden; margin-top:clamp(34px,5vw,64px) }
.rule i{
  display:block; height:1px; background:rgba(255,255,255,.10);
  transform-origin:left center;
  transition:transform 1.05s cubic-bezier(.2,.7,.2,1);
}
.js .rule i{ transform:scaleX(0) }
.js .rule.in i{ transform:scaleX(1) }
@media (prefers-reduced-motion:reduce){
  .js .rule i{ transition:none; transform:scaleX(1) }
}

/* --- typographic list: hanging gold tick, never a decorated bullet -- */
.page-body ul{ list-style:none; padding:0; margin:1.25em 0 0 }
.page-body ul li{
  position:relative; padding-left:26px; margin:0 0 .95em;
  font-size:clamp(16px,1.16vw,16.8px); line-height:1.7;
  color:var(--text); max-width:34em;
}
.page-body ul li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:13px; height:1px; background:var(--gold);
}

/* --- data table: hairlines only, mono heads ------------------------- */
.tbl{ width:100%; border-collapse:collapse; margin:1.6em 0 0; max-width:74ch }
.tbl th{
  font-family:var(--body); font-size:13px; font-weight:500;
  letter-spacing:.02em; color:var(--muted);
  text-align:left; padding:0 18px 10px 0; vertical-align:bottom;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.tbl td{
  padding:13px 18px 13px 0; vertical-align:top;
  border-bottom:1px solid rgba(255,255,255,.07);
  font-size:clamp(13.4px,1.03vw,15px); line-height:1.58; color:var(--text);
}
.tbl td:last-child,.tbl th:last-child{ padding-right:0 }
.tbl .k{ color:var(--text-hi) }
.tbl .g{ font-family:var(--mono); color:var(--gold-hi); white-space:nowrap }

/* --- pull statement: thin gold left rule, never a tinted box -------- */
.pull{
  border-left:2px solid var(--gold); padding-left:clamp(18px,2vw,30px);
  margin:1.9em 0 0; max-width:34em;
}
.pull p{ margin-top:0; color:var(--text-hi); font-size:clamp(15.5px,1.32vw,19px); line-height:1.6 }

/* --- question and answer blocks ------------------------------------- */
.qa{ margin-top:1.7em; max-width:70ch }
.qa h3{
  margin:1.9em 0 0; font-family:var(--display); font-weight:400;
  font-size:clamp(18px,1.8vw,24px); line-height:1.28; color:var(--text-hi);
}
.qa h3:first-child{ margin-top:0 }
.qa p{ margin-top:.62em }

/* --- next-step strip ------------------------------------------------ */
.onward{
  margin-top:clamp(44px,6vw,86px); padding-top:clamp(24px,3vw,36px);
  border-top:1px solid rgba(255,255,255,.10);
  display:flex; flex-wrap:wrap; gap:14px 28px; align-items:baseline;
}
.onward .lbl{ margin:0 }
.onward a{
  color:var(--gold-hi); font-size:clamp(16px,1.16vw,16.8px);
  border-bottom:1px solid rgba(214,168,92,.34); padding-bottom:1px;
}
.onward a:hover{ border-bottom-color:var(--gold-hi) }

/* --- findings index entries ----------------------------------------- */
.entry{ display:block; padding:clamp(22px,2.8vw,32px) 0; border-bottom:1px solid rgba(255,255,255,.08) }
.entry:first-of-type{ border-top:1px solid rgba(255,255,255,.18) }
.entry h2.etitle{ margin:.42em 0 0; font-family:var(--display); font-weight:400;
  font-size:clamp(20px,2.2vw,29px); line-height:1.2; color:var(--text-hi) }
a.entry:hover h2.etitle{ color:var(--gold-hi) }
.entry p{ margin-top:.62em; max-width:34em } /* V6: 66ch ran to about 90 characters */
.entry .st{ font-family:var(--body); font-size:13px; font-weight:500; letter-spacing:.02em;
  color:var(--muted) }
.entry .st.brief{ color:#7A818D }

/* =====================================================================
   ATLAS :: paper theme  (body.light)
   Used on the Findings index and on each write-up, because those pages
   are long-form reading and a dark ground is harder to read at length.
   The switch is functional: it tells you what kind of page you are on
   before you read a word.

   Still ONE accent. The gold is darkened from #D6A85C to #8F6420 on
   paper, because the screen gold lands at 1.93:1 against the paper and
   fails contrast outright. #8F6420 measures 4.63:1.

   The footer stays a dark band. That keeps the footer mark, which is a
   dark-ground asset, working without a second variant of it.
   ===================================================================== */

/* V6 tell pass: the reading sheet is a neutral paper, not the warm cream that
   now reads as the default AI-site background. Same luminance band, so the
   measured contrast pairs below still hold. */
body.light{ background:var(--paper) }

/* Ratios below are against --paper (#F1F1EE), the V6 off-white. They were
   written against the old warm #F0EEE9 and were quietly stale for a release:
   the numbers still passed, so nothing caught it. Recomputed, not guessed.
   --mute-t was #6B7280, which measures 4.27:1 and fails AA for the 10 and
   11px labels that use it. #5F6670 measures 5.12:1. */
:root{ --ink-t:#14171C; --body-t:#3A4048; --mute-t:#5F6670;
       --gold-p:#8F6420; --rule-p:rgba(20,23,28,.13) }

/* the starfield belongs to night; on paper it reads as dust */
body.light .stars{ display:none }

body.light .arc .track{ stroke:rgba(143,100,32,.20) }
body.light .arc .live { stroke:var(--gold-p) }
body.light .arc .pip  { fill:var(--gold-p) }

body.light .site-head nav a{ color:var(--body-t) }
body.light .site-head nav a:hover,
body.light .site-head nav a.here{ color:var(--gold-p) }

/* Scoped away from the footer. The footer keeps its dark band on paper
   pages, so a dark label colour there is dark-on-dark: it measured 3.35:1.
   Footer labels keep the dark-theme value, which is 7.46:1 on that band. */
body.light .lbl{ color:var(--mute-t) }
body.light footer .lbl{ color:var(--muted) }

body.light .page-head{ border-bottom-color:var(--rule-p) }
body.light .page-head h1{ color:var(--ink-t) }
body.light .page-head .stand{ color:var(--body-t) }

body.light .page-body h2,
body.light .entry h2.etitle,
body.light .page-body h3,
body.light .page-body strong{ color:var(--ink-t) }
body.light .page-body p,
body.light .page-body ul li{ color:var(--body-t) }
body.light .page-body ul li::before{ background:var(--gold-p) }

body.light .rule i{ background:var(--rule-p) }
body.light .pull{ border-left-color:var(--gold-p) }
body.light .pull p{ color:var(--ink-t) }

body.light .tbl th{ color:var(--mute-t); border-bottom-color:rgba(20,23,28,.30) }
body.light .tbl td{ color:var(--body-t); border-bottom-color:var(--rule-p) }
body.light .tbl .k{ color:var(--ink-t) }
body.light .tbl .g{ color:var(--gold-p) }

body.light .entry{ border-bottom-color:var(--rule-p) }
body.light .entry:first-of-type{ border-top-color:rgba(20,23,28,.30) }
body.light .entry h3{ color:var(--ink-t) }
body.light a.entry:hover h3{ color:var(--gold-p) }
body.light .entry .st{ color:var(--mute-t) }
body.light .entry .st.brief{ color:#646A73 }   /* 4.70:1 on paper */

body.light .onward{ border-top-color:var(--rule-p) }
body.light .onward a{ color:var(--gold-p); border-bottom-color:rgba(143,100,32,.38) }
body.light .onward a:hover{ border-bottom-color:var(--gold-p) }

/* footer keeps the night, so the dark-ground mark still works */
body.light footer.edge{
  background:var(--ink); margin-top:clamp(50px,7vw,96px);
  padding-top:clamp(40px,5vw,72px); padding-bottom:clamp(30px,4vw,54px);
}

/* ---------------- Atlas Ascent product page (/ascent/) ----------------
   Two phones: the left is Atlas linework on the site's own charcoal, the right
   reproduces the app's real interface in the app's real palette, which is warm
   paper and fir green rather than this site's charcoal. Showing the app in the
   site's colours would have been tidier and would have shown something that
   does not exist.

   Every selector here is scoped under .page-body on purpose. `.page-body p`
   carries a colour and beats a bare class, so the first version of this card
   rendered its own text in the page's muted grey on cream and looked broken. */
.page-body .asc-shot{ margin-top:clamp(26px,3vw,42px); display:grid;
  gap:clamp(18px,2.2vw,30px); grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch; max-width:min(680px,var(--col)) }
.page-body .asc-phone{ margin:0; border-radius:26px; padding:10px; background:#15181E;
  border:1px solid rgba(214,168,92,.26); box-shadow:0 18px 44px rgba(0,0,0,.42);
  display:flex }
.page-body .asc-screen,
.page-body .asc-app{ border-radius:18px; padding:16px; flex:1;
  display:flex; flex-direction:column; min-height:364px }

/* left: what the camera is pointed at */
.page-body .asc-screen{ background:#0E1116; position:relative; overflow:hidden }
.page-body .asc-cap{ font-family:var(--body); font-size:11.5px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); margin:0 }
.page-body .asc-stage{ position:relative; flex:1; margin:12px 0 }
.page-body .asc-rig{ position:absolute; inset:0; width:100%; height:100%;
  color:rgba(214,168,92,.8) }
/* the brackets frame the ARTWORK. Insetting them on the screen instead put a
   corner through the caption and through the readout. */
.page-body .asc-frame{ position:absolute; inset:0; pointer-events:none }
.page-body .asc-frame span{ position:absolute; width:16px; height:16px;
  border:2px solid var(--gold-hi); opacity:.9 }
.page-body .asc-frame span:nth-child(1){ top:0; left:0; border-right:0; border-bottom:0 }
.page-body .asc-frame span:nth-child(2){ top:0; right:0; border-left:0; border-bottom:0 }
.page-body .asc-frame span:nth-child(3){ bottom:0; left:0; border-right:0; border-top:0 }
.page-body .asc-frame span:nth-child(4){ bottom:0; right:0; border-left:0; border-top:0 }
.page-body .asc-read{ margin:0; font-family:var(--mono); font-size:11px; line-height:1.55;
  color:var(--text) }

/* right: the app's own palette, taken out of the app's own stylesheet */
.page-body .asc-app{ background:#EFE8D8 }
.page-body .asc-app-top{ font-family:var(--body); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:#5C6258; margin:0 }
.page-body .asc-ex{ font-family:var(--display); font-weight:400; font-size:20px;
  line-height:1.18; color:#2E4A3E; margin:12px 0 5px }
.page-body .asc-set{ font-family:var(--mono); font-size:12px; color:#5C6258; margin:0 }
.page-body .asc-q{ font-family:var(--body); font-size:14.5px; font-weight:500;
  color:#1B211D; margin:22px 0 10px }
.page-body .asc-rate{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px }
.page-body .asc-b{ font-family:var(--body); font-size:12.5px; font-weight:500;
  text-align:center; padding:11px 2px; border-radius:11px; color:#FBF8F0 }
.page-body .asc-b--easy{ background:#3F7D9E }
.page-body .asc-b--med{ background:#3E8E5A }
.page-body .asc-b--hard{ background:#C4703A }
.page-body .asc-note{ font-family:var(--mono); font-size:11.5px; color:#8A6A24; margin:13px 0 0 }
.page-body .asc-rest{ margin-top:auto; padding-top:14px; display:flex;
  justify-content:space-between; align-items:baseline; border-top:1px solid #DDD4BF }
.page-body .asc-rest-l{ font-family:var(--body); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:#5C6258 }
.page-body .asc-rest-t{ font-family:var(--mono); font-size:18px; color:#2E4A3E }

.page-body .asc-legend{ margin-top:16px; font-size:14px; color:var(--muted); max-width:52ch }

@media (max-width:620px){
  .page-body .asc-shot{ grid-template-columns:minmax(0,1fr); gap:16px;
    max-width:min(340px,100%) }
  .page-body .asc-screen,.page-body .asc-app{ min-height:0 }
  .page-body .asc-stage{ height:240px; flex:none }
}