/* =====================================================================
   ATLAS :: atlasdigital.design
   Core stylesheet, shared by every page.
   Generated from src/ by build.py. Do not edit the deploy copy.
   ===================================================================== */
:root{
  --col:min(53vw,700px);
  --ink:#0B0D11; --panel:#0E1013; --lift:#12151B;
  --text-hi:#F0EEE9;   /* brightest ink ON the dark ground. NOT a background. */
  --paper:#F1F1EE;     /* the light-theme page colour, used by body.light in pages.css */ --text:#BCC4D0; --muted:#98A1AF;
  --gold:#D6A85C; --gold-hi:#EFD6A6;
  --display:"Libre Caslon Display",Georgia,serif;
  --body:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --t:96;
}
*{box-sizing:border-box}
section,footer{position:relative;z-index:3}
body{margin:0;background:var(--ink);color:var(--text-hi);font-family:var(--body);font-weight:300;
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
p{margin:0}
/* V6 tell pass: labels speak in the body face, sentence case, no wide tracking.
   Monospace is kept for one deliberate use only, the mission caption (.lbl.mission). */
.lbl{font-family:var(--body);font-size:13px;font-weight:500;letter-spacing:.02em;
  color:var(--muted);margin:0}
.lbl.mission{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.gold{color:var(--gold-hi)}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:1px solid var(--gold);outline-offset:5px}
.edge{padding-left:clamp(24px,5.2vw,92px);padding-right:clamp(24px,5.2vw,92px)}
/* sections set padding-top/bottom only; horizontal spacing belongs to .edge */

/* ---------------- header: sits on the hero, no band ---------------- */
header{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;align-items:flex-start;
  justify-content:space-between;gap:24px;padding-top:22px}
/* Height tuned for the 831x550 mark. The previous value was set against a
   659x300 crop at 2.2:1; the same height on a 1.51:1 image reads much
   larger and crowded the nav. */
header .lockup{height:clamp(78px,7.2vw,116px);width:auto;display:block}
header nav{display:flex;gap:32px;padding-top:10px}
header nav a{font-family:var(--body);font-size:14px;font-weight:400;letter-spacing:.01em;color:#A6AFBD}
header nav a:hover{color:var(--text-hi)}

/* ---------------- hero: type over a globe that leaves the frame ---------------- */
/* The hero used to be anchored at the bottom by the Artemis caption. That came
   out, and a shorter headline left a dead stretch under the buttons, so the
   minimum height comes down with it. */
.hero{position:relative;min-height:min(720px,92vh);display:flex;align-items:center;
  padding-top:168px;padding-bottom:64px;overflow:hidden}
/* Off screen until it takes focus, then it lands in the top left as a real
   control. Not display:none, which would take it out of the tab order and make
   it decoration. */
.skip{position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--gold);color:#14110B;font-family:var(--body);font-size:15px;
  font-weight:500;padding:12px 18px;border-radius:0 0 4px 0;text-decoration:none}
.skip:focus{left:0}

.scrim{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,var(--ink) 0 34%,rgba(11,13,17,.94) 46%,rgba(11,13,17,.58) 58%,transparent 72%)}
/* The globe's SIZE is a choice. Its POSITION is derived, and must stay derived.

   flight.js ignites the trajectory at CAL=[0.212,0.284] of this box, which is
   northern California on the art. Every keyframe after ignition is a fraction of
   the VIEWPORT, traced off Atlas's cursor against where California sat when the
   globe was 64vw. Shrinking it to 46vw in V5.2 moved California 165px right and
   57px down, the spline had to bow left to catch up, and the Earth leg went out
   of shape. V5.3 "fixed" that by moving ignition off the planet, which was the
   wrong half of the problem to move.

   These two expressions pin California to its traced screen point (0.6054W,
   0.2374H) at ANY globe size. Derivation, with gw the globe width:
     left = W - right - gw,  and California.x = left + 0.212*gw
       => right = 0.3946*W - 0.788*gw
     centre.y = top (the element is translated -50%),  California.y = top - 0.216*gw
       => top  = 0.2374*H + 0.216*gw
   Measured against the pre-resize build across seven widths from 1024 to 2560:
   minX within 1px, zero curvature reversals, max turn per step 3.5 to 4.7 degrees.

   Resize --gw freely. California will not move. Never hand-set top or right. */
.globe{position:fixed;
  --gw:clamp(460px,46vw,860px);
  width:var(--gw);aspect-ratio:1;
  right:calc(39.46vw - 0.788 * var(--gw));
  top:calc(23.74% + 0.216 * var(--gw));
  transform:translate3d(0,-50%,0);z-index:0;pointer-events:none;
  opacity:var(--gop,1)}
.globe img{position:absolute;inset:0;width:100%;height:100%;display:block}
.globe .halo{position:absolute;inset:-10%;border-radius:50%;
  background:radial-gradient(circle,rgba(214,168,92,.11) 0 40%,transparent 66%)}
.l-real{-webkit-mask-image:linear-gradient(96deg,transparent calc(var(--t)*1% - 9%),#000 calc(var(--t)*1% + 9%));
        mask-image:linear-gradient(96deg,transparent calc(var(--t)*1% - 9%),#000 calc(var(--t)*1% + 9%))}
.l-band{mix-blend-mode:screen;opacity:1;
  -webkit-mask-image:linear-gradient(96deg,transparent calc(var(--t)*1% - 13%),#000 calc(var(--t)*1% - 2%),#000 calc(var(--t)*1% + 2%),transparent calc(var(--t)*1% + 13%));
          mask-image:linear-gradient(96deg,transparent calc(var(--t)*1% - 13%),#000 calc(var(--t)*1% - 2%),#000 calc(var(--t)*1% + 2%),transparent calc(var(--t)*1% + 13%))}
.seam{position:absolute;inset:0;border-radius:50%;mix-blend-mode:screen;
  background:linear-gradient(96deg,transparent calc(var(--t)*1% - 11%),rgba(168,198,220,.30) calc(var(--t)*1% - 1%),rgba(236,242,247,.42) calc(var(--t)*1%),rgba(168,198,220,.28) calc(var(--t)*1% + 1%),transparent calc(var(--t)*1% + 11%));
  -webkit-mask-image:radial-gradient(circle,#000 0 47.4%,transparent 48.4%);
          mask-image:radial-gradient(circle,#000 0 47.4%,transparent 48.4%)}
.globe img,.globe .seam{opacity:0;transition:opacity 1.2s cubic-bezier(.22,.61,.36,1)}
body.lit .l-sculpt{opacity:1;transition-delay:.3s}
body.lit .l-real{opacity:1;transition-delay:.46s}
body.lit .l-band{opacity:1}
body.lit .seam{opacity:1;transition-delay:.5s}

.hero-copy{position:relative;z-index:3;max-width:var(--col)}
/* The eyebrow was the shared 13px .lbl sitting 20px clear of an 80px display
   line, so it read as both undersized and detached. Scale it with the headline
   and tighten the gap to an optical one. */
.hero-copy .lbl{ font-size:clamp(14px,1.18vw,17px); letter-spacing:.04em }
.hero-copy h1{ margin-top:10px }
.hero-copy .offer{margin-top:22px;max-width:min(50ch,var(--col));color:var(--text);font-size:16.5px}
.hero-copy .price{margin-top:20px;font-family:var(--body);font-size:14px;letter-spacing:.01em;
  color:var(--gold-hi)}
.cta{margin-top:28px;display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.btn{font-family:var(--body);font-size:15px;font-weight:500;letter-spacing:.01em;
  padding:14px 22px;background:var(--gold);color:#14171C;font-weight:500;transition:background .2s}
.btn:hover{background:var(--gold-hi)}
.btn.ghost{background:transparent;color:var(--gold-hi);box-shadow:inset 0 0 0 1px #7E6537}
.btn.ghost:hover{color:var(--text-hi);box-shadow:inset 0 0 0 1px var(--text-hi)}
/* the numbers, straight under the offer */
.nums{padding-top:clamp(40px,4.4vw,66px);padding-bottom:clamp(52px,5.4vw,84px);position:relative;z-index:3;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,36px);
  /* .edge padding is inside the box, so capping at --col alone squeezed the three
     columns to 148px on a 1920 screen. Add the gutters back to the cap. */
  max-width:calc(var(--col) + clamp(24px,5.2vw,92px)*2)}
/* V6: the three findings read as a ruled ledger of sentences, each figure set in
   the display face inside its own line, instead of a big-number-over-caption row. */
.nums{display:block}
.nums .row{display:block;padding:18px 0;border-top:1px solid rgba(214,168,92,.22);
  font-family:var(--display);font-size:clamp(19px,1.7vw,24px);line-height:1.38;color:var(--text-hi);max-width:var(--col)}
.nums .row:last-child{border-bottom:1px solid rgba(214,168,92,.22)}
.nums .n{color:var(--gold-hi);white-space:nowrap}
/* software */
.soft{padding-top:clamp(66px,7.4vw,110px);padding-bottom:clamp(66px,7.4vw,110px);position:relative}
.soft h2{font-family:var(--display);font-weight:400;margin:22px 0 0;
  font-size:clamp(22px,2.3vw,32px);line-height:1.14;letter-spacing:-.014em;max-width:26ch}
.soft .intro{margin-top:22px;max-width:min(52ch,var(--col));color:var(--text)}
.soft .grid{margin-top:clamp(40px,4.4vw,66px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(30px,3.2vw,54px);
  max-width:min(96ch,var(--col))}
.soft .item{display:grid;gap:10px;align-content:start}
.soft .k{font-family:var(--body);font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--muted)}
.soft .item h3{font-family:var(--display);font-weight:400;color:var(--text-hi);margin:0;
  font-size:clamp(19px,2vw,25px);line-height:1.24}
.soft .item p{font-size:15.5px;max-width:46ch;color:var(--text)}
/* Sized for the hero headline, which is the only h1 that uses this rule (the
   interior pages override it in .page-head h1). It was clamp(40,5.6vw,82) when
   the headline was eight words. The headline is sixteen now and at 82px it ran
   four lines and swallowed the screen. Dropping it alone inverted the hierarchy:
   every h2 was still 48 to 62px, so the page headline became the smallest
   heading on the page. The h2 scale below came down with it. */
h1{font-family:var(--display);font-weight:400;margin:20px 0 0;
  font-size:clamp(27px,3.0vw,42px);line-height:1.12;letter-spacing:-.014em}
.hero-foot{position:absolute;left:0;right:0;bottom:30px;z-index:3;
  display:flex;justify-content:flex-end;gap:clamp(28px,5vw,80px);align-items:flex-end;flex-wrap:wrap}
.hero-foot p{max-width:none;white-space:nowrap;color:var(--text);font-size:16px}

/* the Artemis trajectory: one path down the whole document */
/* z-index 2: above the globe (0) and the scrim (1), BELOW the copy (3). The traced
   flight crosses the text column, which the old 78%-and-right path never did, so the
   line has to pass behind the type or it cuts paragraphs in half. Sections carry no
   background, so only the glyphs themselves occlude it. */
.route{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.route svg{position:absolute;inset:0;width:100%;height:100%}
.route path{fill:none;stroke:var(--gold);stroke-linecap:round}
.route #rflown{stroke:url(#tg);stroke-width:2;opacity:1;stroke-dasharray:14 16}  /* tapers along its length */
/* height:auto is load-bearing. Both ship imgs carry width="48" height="65" attributes
   for CLS. Setting only a CSS width leaves the height ATTRIBUTE in force, so the art
   rendered 21x65 instead of 21x28: the ship stretched into a gold spike, which is what
   the trail off the mark actually was. Never set one axis on these without the other. */
.rocket{position:absolute;left:0;top:0;opacity:var(--rop,1);width:clamp(14.3px,1.43vw,24.4px);height:auto;
  transform-origin:47.22% 59.44%;will-change:transform;filter:drop-shadow(0 0 9px rgba(214,168,92,.26))}

/* ---------------- big statement ---------------- */
.statement{padding-top:clamp(66px,7.4vw,108px);padding-bottom:clamp(66px,7.4vw,108px);position:relative}
.statement h2{font-family:var(--display);font-weight:400;margin:26px 0 0;
  font-size:clamp(23px,2.5vw,35px);line-height:1.14;letter-spacing:-.014em;max-width:var(--col)}
.statement .after{margin-top:32px;max-width:min(52ch,var(--col));color:var(--text);font-size:16.5px}

/* ---------------- disciplines as a type field ---------------- */
.disc{padding-top:clamp(74px,9vw,124px);padding-bottom:clamp(74px,9vw,124px);position:relative}
.disc .field{font-family:var(--display);font-size:clamp(24px,3.4vw,46px);line-height:1.3;
  letter-spacing:-.012em;max-width:var(--col);margin-top:28px}
/* Unlit words were #3E444F, which measures 1.99:1 on the ground and is
   unreadable. Large text needs 3:1; #5C626D measures 3.17:1. The lit word
   still jumps to full paper, so the effect survives. */
.disc .field span{color:#5C626D;transition:color .45s}
.disc .field span.on{color:var(--text-hi)}
/* Specificity: `.disc .field span` (0,2,1) outranks `.disc .dot` (0,2,0),
   so the separators had been rendering in the dim word colour rather than
   gold since the rule was written. Matched on both classes to win, and the
   dots are aria-hidden in flight.js because they carry no meaning. */
.disc .field span.dot{color:var(--gold);padding:0 .28em;font-size:.5em;vertical-align:.28em}
.disc .note{margin-top:38px;max-width:min(46ch,var(--col));color:var(--text)}

/* ---------------- evidence plates ---------------- */
.plate{position:relative;padding-top:clamp(54px,6vw,88px);padding-bottom:clamp(54px,6vw,88px)}
.plate .fig{font-family:var(--display);font-weight:400;color:var(--gold);
  font-size:clamp(38px,6.2vw,98px);line-height:1.04;letter-spacing:-.03em;min-width:0;
  font-variant-numeric:tabular-nums}
.plate .fig small{display:block;font-family:var(--body);font-size:max(13px,.17em);font-weight:500;letter-spacing:.02em;color:var(--muted);
  margin-top:1em}
.plate h3{font-family:var(--display);font-weight:400;margin:0 0 18px;
  font-size:clamp(23px,2.8vw,38px);line-height:1.12;letter-spacing:-.012em;max-width:var(--col)}
.plate .txt{max-width:min(52ch,var(--col));color:var(--text);font-size:16.5px;display:flex;flex-direction:column;gap:15px}
.plate .row{display:block;max-width:var(--col)}
@media (max-width:860px){.plate .fig{margin-bottom:18px}}
.plate .fig{margin-bottom:26px}


/* ---------------- engagements ---------------- */
.eng{padding-top:clamp(74px,8.4vw,120px);padding-bottom:clamp(74px,8.4vw,120px);position:relative}
.eng h2{font-family:var(--display);font-weight:400;margin:24px 0 0;
  font-size:clamp(22px,2.4vw,33px);line-height:1.14;letter-spacing:-.014em;max-width:var(--col)}
.eng .list{margin-top:clamp(42px,4.6vw,68px);display:flex;flex-direction:column;
  gap:clamp(36px,3.8vw,58px);max-width:var(--col)}
.eng .item{display:grid;grid-template-columns:1fr;gap:10px}
.eng .name{font-family:var(--display);font-size:clamp(21px,2.4vw,30px);line-height:1.2;margin:0}
.eng .name a{color:var(--gold-hi)}
.eng .name a:hover{color:var(--text-hi)}
.eng .meta{font-family:var(--body);font-size:13px;font-weight:500;letter-spacing:.02em;
  color:var(--muted);margin:0}
.eng .item p.d{color:var(--text);font-size:16.5px;max-width:52ch;margin:0}
.eng .state{font-family:var(--body);font-size:14px;letter-spacing:.01em;color:var(--gold);margin:0}

/* ---------------- diagnostics ----------------
   Five anonymised catalogues from the market screen. Numbered by a counter so
   the markup carries no ordinal to fall out of sync with. */
.diag{padding-top:clamp(70px,8vw,116px);padding-bottom:clamp(70px,8vw,116px);position:relative;
  counter-reset:case}
.diag h2{font-family:var(--display);font-weight:400;margin:24px 0 0;
  font-size:clamp(22px,2.4vw,33px);line-height:1.14;letter-spacing:-.014em;max-width:min(30ch,var(--col))}
.diag .sub{margin-top:26px;max-width:min(54ch,var(--col));color:var(--text);font-size:16.5px}
.diag .cases{margin-top:clamp(42px,4.6vw,70px);max-width:var(--col);
  display:grid;gap:clamp(26px,2.8vw,40px)}
.diag .case{counter-increment:case;display:grid;gap:9px;
  padding-top:clamp(22px,2.4vw,32px);border-top:1px solid rgba(214,168,92,.18)}
.diag .case:first-child{padding-top:0;border-top:0}
.diag .who{font-family:var(--body);font-size:13px;font-weight:500;letter-spacing:.02em;
  color:var(--gold);margin:0}
.diag .who::before{content:counter(case,decimal-leading-zero);font-family:var(--display);
  font-size:1.5em;letter-spacing:0;margin-right:12px;vertical-align:-.06em;color:var(--gold)}
.diag .d{color:var(--text);font-size:16.5px;max-width:min(58ch,var(--col));margin:0}
.diag .close{margin-top:clamp(36px,3.8vw,56px);max-width:min(52ch,var(--col));
  color:var(--text);font-size:16.5px}
@media (max-width:620px){ .diag .who::before{display:block;margin:0 0 4px} }

/* ---------------- findings ---------------- */
.find{padding-top:clamp(74px,8.4vw,120px);padding-bottom:clamp(74px,8.4vw,120px);position:relative}
.find h2{font-family:var(--display);font-weight:400;margin:24px 0 0;
  font-size:clamp(22px,2.4vw,33px);line-height:1.14;letter-spacing:-.014em;max-width:var(--col)}
.find .sub{margin-top:26px;max-width:min(52ch,var(--col));color:var(--text);font-size:16.5px}
.find .index{margin-top:clamp(44px,4.8vw,72px);max-width:var(--col);
  display:flex;flex-direction:column;gap:clamp(30px,3.2vw,46px)}
.find details{margin:0}
.find summary{list-style:none;cursor:pointer;display:block}
.find summary::-webkit-details-marker{display:none}
.find .when{font-family:var(--body);font-size:13px;font-weight:500;letter-spacing:.02em;
  color:var(--muted);margin:0 0 9px}
.find .ttl{font-family:var(--display);font-size:clamp(20px,2.3vw,29px);line-height:1.22;
  margin:0;color:var(--text-hi);transition:color .25s}
.find summary:hover .ttl,.find details[open] .ttl{color:var(--gold-hi)}
.find .dek{color:var(--text);font-size:16px;margin:10px 0 0;max-width:52ch}
.find .more{font-family:var(--body);font-size:14px;font-weight:500;letter-spacing:.01em;
  color:var(--gold);margin:14px 0 0}
.find details[open] .more{opacity:0}
.find .body{max-width:min(58ch,var(--col));color:var(--text);font-size:16.5px;
  display:flex;flex-direction:column;gap:16px;margin-top:22px}
.find .body .pull{font-family:var(--display);font-size:clamp(19px,2vw,25px);line-height:1.34;
  color:var(--text-hi);margin:8px 0}
.find .soon .ttl{color:#5d6470}
.find .soon summary{cursor:default}

/* ---------------- retractions ---------------- */
.retr{position:relative;padding-top:clamp(78px,9.4vw,138px);padding-bottom:clamp(78px,9.4vw,138px);overflow:hidden}
.retr .inner{position:relative;z-index:2}
.retr h2{font-family:var(--display);font-weight:400;margin:24px 0 40px;
  font-size:clamp(22px,2.4vw,33px);line-height:1.14;letter-spacing:-.014em;max-width:var(--col)}
.retr .items{display:grid;gap:clamp(28px,3vw,44px);grid-template-columns:repeat(auto-fit,minmax(238px,1fr));max-width:min(56vw,760px)}
.retr .items div{padding-top:2px}
.retr .items .who{font-family:var(--body);font-size:13px;font-weight:500;letter-spacing:.02em;
  color:var(--gold);margin-bottom:14px}
.retr .items p{color:var(--text);font-size:15.5px}

/* ---------------- contact: the trajectory lands ---------------- */
.contact{position:relative;padding-top:clamp(86px,10vw,150px);padding-bottom:clamp(70px,8vw,120px);overflow:hidden}
.contact h2{font-family:var(--display);font-weight:400;margin:26px 0 40px;
  font-size:clamp(23px,2.5vw,35px);line-height:1.14;letter-spacing:-.014em;max-width:var(--col)}
.contact .mail{font-family:var(--display);font-size:clamp(22px,3.2vw,40px);color:var(--gold-hi);
  padding-bottom:6px;display:inline-block;
  background:linear-gradient(var(--gold),var(--gold)) 0 100%/0 1px no-repeat;transition:background-size .5s}
.contact .mail:hover{background-size:100% 1px}
/* the Moon: same treatment as the Earth, swiped the other way */
/* Was 29vw pinned to the right edge, which left it a small ring in the corner while the
   ship approached, so the approach had nothing to relate to. Half again as big and pulled
   off the edge. Its left limb still clears the copy column (--col caps at 53vw) at every
   width this runs at. */
/* The Moon sits LOW, not centred, and that is load bearing rather than taste. Atlas's traced
   Earth leg ends heading down and very slightly LEFT; the orbit runs right. With the Moon
   centred the approach had to cross over from one to the other, which is a curvature sign
   change: the line straightened, bent the wrong way, then tightened into the orbit. Measured
   at nine window sizes, dropping the centre to 64% removes that reverse bend completely at
   every size from 900 to 1600, and at 1920 makes it 1.4x gentler. Moving the Moon INWARD from
   the right edge does the same thing, but there is no room: at 1180 the copy column clears the
   disc by only 77px and the shift needed is 80px.
   The min() keeps the disc off the bottom edge on short windows (1366x768 would clip by 6px
   at a flat 64%); it pins the centre so the limb stays 10px inside instead. */
.moon{position:fixed;top:min(64%,calc(100% - clamp(120px,14.5vw,230px) - 10px));right:clamp(-20px,2.2vw,48px);
  /* Was 43vw/680px. Scaled with the globe so the pair keeps its relative
     weight. The clamp inside top: is exactly half the width below and has
     to be changed with it, or the disc stops sitting 10px off the bottom. */
  width:clamp(240px,29vw,460px);aspect-ratio:1;z-index:0;pointer-events:none;
  transform:translate3d(0,-50%,0);opacity:var(--mop,0)}
.moon img{position:absolute;inset:0;width:100%;height:100%;display:block}
.moon .glow{position:absolute;inset:-18%;border-radius:50%;
  background:radial-gradient(circle,rgba(198,212,234,.13) 0 40%,transparent 66%)}
.m-real{-webkit-mask-image:linear-gradient(96deg,#000 calc(var(--m)*1% - 9%),transparent calc(var(--m)*1% + 9%));
        mask-image:linear-gradient(96deg,#000 calc(var(--m)*1% - 9%),transparent calc(var(--m)*1% + 9%))}
.mseam{position:absolute;inset:0;border-radius:50%;mix-blend-mode:screen;
  background:linear-gradient(96deg,transparent calc(var(--m)*1% - 10%),rgba(206,220,240,.26) calc(var(--m)*1%),transparent calc(var(--m)*1% + 10%));
  -webkit-mask-image:radial-gradient(circle,#000 0 47.4%,transparent 48.4%);
          mask-image:radial-gradient(circle,#000 0 47.4%,transparent 48.4%)}
@media (max-width:860px){.moon{width:150px;right:-30px}}
footer{padding-top:clamp(92px,10vw,158px);padding-bottom:clamp(52px,5vw,74px)}
.foot-top{max-width:min(61vw,900px)}   /* the Moon owns the right edge; stay clear of it */
/* The footer markup was rewritten to .foot-top / .foot-cols / .foot-list and
   the stylesheet was never updated with it: .foot-cols and .foot-list had no
   rules at all, and .foot-nav still carried a flex row meant for an older
   structure, so six links laid out sideways with a 78px gap and the three
   groups stacked with no space between them. Nothing errored. The CSS and the
   markup simply drifted apart. */
.foot-top{ margin-bottom:clamp(44px,5vw,76px) }
.foot-line{
  margin:clamp(20px,2.2vw,30px) 0 0; color:var(--text);
  font-size:clamp(15.5px,1.2vw,17px); line-height:1.6; max-width:46ch;
}
.foot-cols{
  display:grid; gap:clamp(34px,3.4vw,56px);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.foot-cols .lbl{ display:block; margin-bottom:16px }
.foot-nav{ display:flex; flex-direction:column; gap:0 }
.foot-list{
  margin:0; color:var(--text); font-size:15px; line-height:1.95; max-width:34ch;
}
.foot-list a{ color:var(--gold-hi) }
.foot-list a:hover{ color:var(--text-hi) }
.foot-nav a,.foot-nav span.li{display:block;color:var(--text);font-size:15px;line-height:2.05}
.foot-nav a:hover{color:var(--gold-hi)}
.foot-nav a.mail{color:var(--gold-hi);font-family:var(--display);font-size:19px;line-height:1.5}
.foot-legal{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:clamp(64px,7vw,104px)}

/* Below about 1024 the copy column and the enlarged Moon start to meet, measured by real
   glyph extents rather than block boxes. Pull the Moon down and back toward the edge there. */
@media (max-width:1024px){
  .moon{width:30vw;right:-12px}
}
@media (min-width:861px){
  .eng .item{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:860px){
  header .lockup{height:92px}
  /* The nav was display:none here with nothing in its place, so at 860px and
     below no page could reach another without scrolling to the footer: 14,000px
     on the home page. Every link resolved and audit.py passed, which is why it
     stood. The links now sit in a row under the mark and wrap when they must.
     No menu button and no script, so there is nothing to fail closed. */
  header{flex-direction:column;align-items:flex-start;gap:2px}
  header nav{display:flex;flex-wrap:wrap;gap:0 14px;padding-top:4px}   /* 14px: all five fit one row at 390 */
  header nav a{padding:9px 0}
  /* On the home page the header is absolute over the hero. With a second row
     in it the height is no longer fixed, so it joins the flow and the hero
     stacks: mark, links, copy. This also clears the mark from the hero label,
     which it had been touching. */
  .hero{flex-direction:column;align-items:stretch;min-height:auto;padding-top:22px;padding-bottom:56px}
  .hero > header{position:relative;padding:0 0 18px}
  /* The globe is position:fixed on desktop. On mobile it has to be absolute, because
     body carries overflow-x:clip to stop the deliberate right-edge bleed producing
     horizontal scroll, and a clip container does not capture a fixed descendant.
     But it was absolute against BODY with bottom:-4%, and body is the whole
     document, so the globe sat 11,300px down at the very bottom of the page. The
     mobile hero had no artwork in it at all and nobody noticed, because an
     off-screen element raises nothing. Anchored to the top of the document now,
     which is the hero, in viewport units so it does not move when the page
     lengthens.
     opacity was .5!important, which also overrode the scroll-driven --gop that
     flight.js writes, so the crossfade was dead on mobile even where it was
     visible. Scaled instead of overridden. */
  /* Fixed, like the Moon already is on this breakpoint (.moon is fixed with a
     30px bleed and has never produced horizontal scroll, because a fixed box does
     not extend the document's scrollable overflow). Absolute made the globe scroll
     away within half a screen, so it appeared and was gone; fixed holds it in the
     viewport the way the Moon holds, and flight.js fades it out on its own clock. */
  .globe{position:fixed;top:62vh;bottom:auto;right:-22%;
    transform:translate3d(0,-50%,0);width:108%;
    opacity:var(--gop,1)}
  /* The mobile scrim was solid ink to 46% and .88 at 68%, which is most of the
     band the globe actually occupies (its disc runs 38vh to about 88vh). The
     artwork was being painted over by the veil meant to protect the copy. The
     copy lives in the top third, so the solid stays there and the rest opens up. */
  .scrim{background:linear-gradient(180deg,var(--ink) 0 30%,rgba(11,13,17,.80) 48%,rgba(11,13,17,.50) 72%,rgba(11,13,17,.66) 100%)}
  .route{display:none}
  :root{--col:100%}
  .hero-copy{max-width:100%}
  .hero-foot{position:static;margin-top:26px}
  .plate .row,.plate.flip .row{grid-template-columns:1fr;gap:26px}
  .nums{grid-template-columns:1fr;gap:30px}
  .nums .d{max-width:44ch}
}
@media (prefers-reduced-motion:reduce){
  .globe img,.globe .seam,.disc .field span{transition:none}
}

/* =====================================================================
   ATLAS :: responsive corrections, 2026-09-30
   Both of these were invisible until the viewport meta tag was added.
   Without it every phone laid the page out at desktop width and scaled
   the result down, so nothing could overflow and nothing looked wrong.
   Found by measuring scrollWidth against clientWidth at 390px.
   ===================================================================== */

/* The footer mark had no rule at all: it was sized inline in the old
   single-file build, and lost that when the footer became a partial.
   It was rendering at its intrinsic width and pushing the page 300px
   wide on a phone. */
.footmark{
  display:block; width:clamp(196px,21vw,288px); height:auto; max-width:100%;
  opacity:.92;
}

/* .hero-foot p is white-space:nowrap so the Artemis label sits on one
   line, which is right on a wide screen and impossible on a narrow one.
   Below the breakpoint it is allowed to wrap. */
@media (max-width:980px){
  .foot-cols{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:620px){
  .foot-cols{ grid-template-columns:minmax(0,1fr); gap:clamp(30px,7vw,40px) }
  .foot-list,.foot-line{ max-width:100% }
}
@media (max-width:760px){
  .hero-foot p{ white-space:normal }
}

/* Belt and braces: no descendant may exceed the viewport. This is a
   guard, not a layout rule. If it ever becomes load-bearing, something
   above it is wrong and should be fixed there instead. */
img,svg,video,canvas{ max-width:100% }

/* The globe and its halo bleed past the right edge on purpose below 860px:
   `right:-26%; width:126%` is the composition, not an accident. That bleed
   was invisible until the viewport meta tag existed, because every phone
   was laying the page out at desktop width and scaling the result down.
   Now it produces 151px of horizontal scroll on a 390px screen.

   Clipped with overflow-x:clip rather than hidden. `hidden` on the root
   turns it into a scroll container, which breaks position:fixed and
   position:sticky descendants, and the globe, moon and trajectory are all
   fixed. `clip` clips without creating one. */
html,body{ overflow-x:clip }
body{ position:relative }

/* Both elements, deliberately. Overflow set on `html` alone PROPAGATES to
   the viewport, and html is then treated as `visible`, so it never clips
   anything. Setting it on body as well gives body a real clip. Verified by
   scrolling the page sideways in a headless browser and reading scrollX,
   not by reading scrollWidth, which `clip` does not change and which
   therefore reports overflow that no longer exists.

   body also needs position:relative, and that is the part that took three
   attempts. Below 860px the globe becomes position:absolute, and an
   absolutely positioned element is only clipped by an ancestor that is
   actually its containing block. With no positioned ancestor the globe
   resolved against the initial containing block, so body clipped its own
   content (body.scrollWidth was already 390) while the globe sailed past
   it. Making body positioned makes body the containing block, and the
   clip then applies to it.

   Anything that stays position:fixed cannot be clipped by an ancestor at
   all, because its containing block is the viewport. If a fixed element
   ever overflows, give it its own full-viewport wrapper, the way .route
   already has one. */

/* =====================================================================
   ATLAS :: 2026-10-04, the review pass
   Sections added or reshaped when the home page was reweighted toward
   what the client gained and the work behind it.
   ===================================================================== */

/* The band carries its own label now that the line introducing it is gone. */
.nums .lbl{margin-bottom:16px}

/* The work: seven blocks, one column, ruled like the market screen was. */
.work{padding-top:clamp(40px,5vw,76px);padding-bottom:clamp(66px,7.4vw,108px);position:relative}
.work h2{font-family:var(--display);font-weight:400;margin:24px 0 0;
  font-size:clamp(22px,2.4vw,33px);line-height:1.14;letter-spacing:-.014em;max-width:var(--col)}
.work .blocks{margin-top:clamp(38px,4.2vw,62px);max-width:var(--col);display:grid;gap:clamp(24px,2.6vw,36px)}
.work .block{display:grid;gap:10px;padding-top:clamp(22px,2.4vw,32px);border-top:1px solid rgba(214,168,92,.18)}
.work .block:first-child{padding-top:0;border-top:0}
.work h3{font-family:var(--display);font-weight:400;margin:0;color:var(--gold-hi);
  font-size:clamp(19px,1.9vw,24px);line-height:1.24}
.work .block p{color:var(--text);font-size:16.5px;max-width:min(58ch,var(--col));margin:0}

/* The software plate's heading was an h3 set larger than every h2 on the page
   (38px against 35 at 1440). It is an h2 now, on the same scale as the rest. */
.plate .lbl{margin-bottom:26px}
.plate h2{font-family:var(--display);font-weight:400;margin:0 0 18px;
  font-size:clamp(23px,2.5vw,35px);line-height:1.14;letter-spacing:-.014em;max-width:var(--col)}
.plate .txt a{color:var(--gold-hi)}

/* One finding, linked to its own address, and a way to the rest. */
.find a.entry{display:block}
.find a.entry:hover .ttl{color:var(--gold-hi)}
.find .all{margin:0}
.find .all a{font-family:var(--body);font-size:14px;font-weight:500;letter-spacing:.01em;color:var(--gold)}
.find .all a:hover{color:var(--gold-hi)}

/* Corrections: two on the page, the rest one link away. */
.retr .rest{margin-top:clamp(28px,3vw,44px);color:var(--text);font-size:15.5px}
.retr .rest a{color:var(--gold-hi)}
.retr .rest a:hover{color:var(--text-hi)}