/* 888 Story — the Atlas, v3.0 (beta)
 *
 * Everything here is scoped under #atlasRoot. That is not tidiness for its own sake:
 * the Atlas ships for 30 days beside the v2 columns, and at the end of it one of the
 * two layouts is deleted. Scoping means deleting this file and atlas.js removes the
 * Atlas completely, with nothing left behind in styles.css to find later.
 *
 * The design record is design/mockup-atlas-v3.html, which carries the reasoning for
 * the choices — why reading mode replaces the map rather than shrinking it, why the
 * spare width is a rail rather than margin, why phones get a different view.
 */

#atlasRoot{
  --a-bg0:#1b1915; --a-bg1:#121110; --a-bg2:#0d0c0b;
  --a-surface:#171512; --a-surface2:#1d1a16; --a-node-bg:#1a1713;
  --a-line:#262119; --a-line2:#322d26;
  --a-ink:#f4eee3; --a-ink2:#c8bfae; --a-muted:#8a8172; --a-muted2:#6d6557; --a-faint:#5b5449;
  --a-accent:#d8a24a; --a-accent-hi:#f0c47c; --a-on-accent:#17150f;
  --a-accent-soft:rgba(216,162,74,.12); --a-accent-faint:rgba(216,162,74,.05);
  --a-web:#332e26; --a-thread:#4a4335; --a-ring:#241f19;

  position:fixed; inset:0; z-index:60; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 40%, var(--a-bg0) 0%, var(--a-bg1) 62%, var(--a-bg2) 100%);
  color:var(--a-ink);
  font-family:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
}
#atlasRoot *{box-sizing:border-box}
#atlasRoot button{cursor:pointer; color:inherit; font-family:inherit}
#atlasRoot ::-webkit-scrollbar{width:9px;height:9px}
#atlasRoot ::-webkit-scrollbar-thumb{background:#3a352d;border-radius:9px}
#atlasRoot ::-webkit-scrollbar-track{background:transparent}

/* While the Atlas is up, the v2 page underneath is not merely covered — it is taken
   out of the flow, so its scroll position and its keyboard focus cannot leak through. */
body.atlas-on > header.topbar,
body.atlas-on > main.container,
body.atlas-on > footer{display:none !important}
body.atlas-on{overflow:hidden}

@keyframes aBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes aPanel{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes aSheet{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes aRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes aFade{from{opacity:0}to{opacity:1}}
@keyframes aDash{to{stroke-dashoffset:-24}}
@keyframes aFlash{0%,100%{background:transparent}22%{background:var(--a-accent-faint)}}

/* ---------------- top bar ---------------- */
#atlasRoot .a-bar{
  position:relative; z-index:6; display:flex; align-items:baseline; justify-content:space-between;
  gap:20px; padding:22px 30px 0; height:74px;
}
#atlasRoot .a-brand{display:flex; align-items:baseline; gap:13px}
#atlasRoot .a-name{font-size:22px; font-weight:500; letter-spacing:.01em}
#atlasRoot .a-mode{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--a-muted);
}
#atlasRoot .a-acts{display:flex; align-items:center; gap:9px}
#atlasRoot .a-pill{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; padding:9px 14px; border-radius:999px;
  border:1px solid var(--a-line2); background:transparent; color:var(--a-muted); transition:all .2s;
}
/* Nine controls in this row now. A flex row asked for more than it has will fold a
   two-word pill onto two lines and stand 90px tall inside a 74px bar rather than admit
   it has run out of room — which is how "Try the Atlas ✦" once ended up three lines deep
   in the classic bar. It never wraps; when the room goes, the words come off instead. */
#atlasRoot .a-pill{white-space:nowrap}
#atlasRoot .a-pill:hover{border-color:#57503f; color:var(--a-ink2)}
#atlasRoot .a-pill.on{background:var(--a-accent-soft); color:var(--a-accent); border-color:var(--a-accent)}
/* A control with nothing to act on. Still pressable — pressing it explains why — but it
   should not look like the live ones. */
#atlasRoot .a-pill.a-quiet{opacity:.45}
#atlasRoot .a-pill.solid{
  background:var(--a-accent); color:var(--a-on-accent); border-color:var(--a-accent); padding:9px 16px;
}
#atlasRoot .a-pill.solid:hover{background:var(--a-accent-hi); border-color:var(--a-accent-hi)}

/* The same move the classic bar already makes at 1080px: below this the words come off
   and the marks carry the meaning. Every full name stays in `title` and `aria-label`, so
   nothing is lost to a screen reader or to a hover. "— HENRY LAM" goes too — it is the
   one thing in the bar that is also written in the middle of the map. */
@media (max-width:1100px){
  #atlasRoot .a-mode{display:none}
  #atlasRoot .a-pill .a-pw{display:none}
}

/* ---------------- the map ---------------- */
#atlasRoot .a-field{
  position:relative; width:100%; height:calc(100% - 74px);
  display:flex; align-items:center; justify-content:center;
}
#atlasRoot .a-stage{
  position:relative; flex:none; width:1180px; height:880px;
  transition:transform .6s cubic-bezier(.22,.9,.24,1); transform-origin:center center;
}
#atlasRoot .a-web{position:absolute; inset:0; z-index:1; overflow:visible}
#atlasRoot .a-web line,#atlasRoot .a-web path,#atlasRoot .a-web ellipse{transition:all .35s}

#atlasRoot .a-centre{
  position:absolute; left:50%; top:50%; z-index:4;
  transform:translate(-50%,calc(-50% - 22px));
}
/* The layout, and the thing the hover scales. Separate from .a-centre because that one
   is holding the translate that positions it, and separate from .a-avatar because that
   one is holding the breathing animation — a CSS animation on `transform` wins over any
   hover rule reaching for the same property, so the scale needs an element to itself.
   Exactly why .a-node-in exists. */
#atlasRoot .a-centre-in{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
#atlasRoot .a-avatar{
  width:132px; height:132px; border-radius:50%; overflow:hidden;
  background:linear-gradient(160deg, var(--a-surface2), var(--a-surface));
  background-size:cover; background-position:center;
  border:1px solid var(--a-line2); display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 10px var(--a-accent-faint), 0 0 60px var(--a-accent-soft);
  animation:aBreathe 7s ease-in-out infinite;
}
#atlasRoot .a-avatar span{font-family:Georgia,'Times New Roman',serif; font-size:30px; color:var(--a-ink)}

/* Hovering the middle of the map lifts it forward. Desktop alone, and deliberately so:
   `hover:hover` and `pointer:fine` keep it away from anything driven by a finger, where
   a hover state has no way to end and simply sticks on after a tap. The width floor takes
   out tablets, which report a fine pointer when a trackpad or a pencil is attached.
   Nothing here is clickable — this is emphasis, not a control. */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  #atlasRoot .a-centre:hover .a-centre-in{transform:scale(1.11)}
  #atlasRoot .a-centre:hover .a-avatar{
    border-color:var(--a-accent);
    box-shadow:0 0 0 16px var(--a-accent-faint), 0 0 90px var(--a-accent-soft);
  }
  #atlasRoot .a-centre:hover .a-who{color:var(--a-accent); letter-spacing:.26em}
}
/* The glow and the name follow the scale rather than snapping. The transition sits out
   here, not inside the media query, so leaving the portrait eases back just as it eased
   in — a transition declared only on :hover animates one way and jumps the other. */
#atlasRoot .a-avatar{transition:border-color .4s ease, box-shadow .4s ease}
#atlasRoot .a-who{transition:color .4s ease, letter-spacing .4s ease}
#atlasRoot .a-who{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--a-muted);
}

#atlasRoot .a-node{
  position:absolute; z-index:3; transform:translate(-50%,-50%);
  background:none; border:0; padding:0; transition:opacity .35s ease;
}
#atlasRoot .a-node-in{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
#atlasRoot .a-dot{
  position:relative; width:58px; height:58px; border-radius:50%;
  background:var(--a-node-bg); border:1px solid var(--a-line2);
  display:flex; align-items:center; justify-content:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px;
  color:var(--a-muted2); transition:all .35s;
}
#atlasRoot .a-label{display:block; text-align:center; width:172px}
/* The topic names are the point of the map, and against real photographs the v3.12
   settings read as a caption rather than as the thing you came to click. Bigger, at full
   ink rather than the muted tone, and carrying a proper halo — the stage is scaled to fit
   the window, so 17px was landing at about 13px on a laptop. */
#atlasRoot .a-title{
  display:block; font-family:Georgia,'Times New Roman',serif; font-size:20px; line-height:1.22;
  letter-spacing:.005em; color:var(--a-ink); text-wrap:balance; transition:color .3s;
  /* Insurance the wireframe never needed, because its tiles were flat grey. A real
     photograph can be bright exactly where a topic name lands, and the vignette cannot
     be turned up far enough to fix that without putting the drift out altogether. */
  text-shadow:var(--a-label-shadow, 0 1px 10px rgba(0,0,0,.75));
}
/* The count under the name was at the same weight as the name's own shadow and got lost
   against a lit photograph. */
#atlasRoot .a-who,#atlasRoot .a-glyph{text-shadow:var(--a-label-shadow, 0 1px 10px rgba(0,0,0,.75))}
#atlasRoot .a-glyph{
  display:block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9px;
  letter-spacing:.16em; color:var(--a-muted2); margin-top:4px; transition:color .3s;
}
#atlasRoot .a-node.dim{opacity:.28}
#atlasRoot .a-node.big{z-index:5}
#atlasRoot .a-node.big .a-node-in{transform:scale(1.09)}
#atlasRoot .a-node.big .a-dot{width:70px; height:70px}
#atlasRoot .a-node.big .a-title{color:var(--a-ink)}

#atlasRoot .a-sat{
  position:absolute; z-index:6; transform:translate(-50%,-50%);
  width:28px; height:28px; border-radius:50%; overflow:hidden; padding:0;
  background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), opacity .35s, border-color .3s, box-shadow .3s;
}
#atlasRoot .a-sat span{font-family:Georgia,serif; font-size:14px; line-height:1}
#atlasRoot .a-tip{
  position:absolute; z-index:7; transform:translate(-50%,0);
  padding:6px 11px; border-radius:999px; border:1px solid var(--a-line2);
  background:var(--a-surface); white-space:nowrap; pointer-events:none;
  box-shadow:0 8px 22px rgba(0,0,0,.45); max-width:320px; overflow:hidden; text-overflow:ellipsis;
}
#atlasRoot .a-tip b{font-family:Georgia,serif; font-size:13px; font-weight:400; color:var(--a-ink)}
#atlasRoot .a-tip i{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:8px; letter-spacing:.16em;
  font-style:normal; text-transform:uppercase; color:var(--a-accent); margin-left:8px;
}
#atlasRoot .a-foot{
  position:fixed; left:30px; bottom:20px; z-index:6;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--a-faint); pointer-events:none;
}
#atlasRoot .a-empty{
  position:absolute; left:50%; top:62%; transform:translateX(-50%);
  text-align:center; max-width:420px; color:var(--a-muted);
  font-family:Georgia,serif; font-size:15px; line-height:1.6;
}

/* ---------------- reading mode ---------------- */
#atlasRoot .a-read{position:fixed; left:0; right:0; top:74px; bottom:0; z-index:20; display:flex}
#atlasRoot .a-tree{
  flex:0 0 clamp(200px,15%,290px); background:var(--a-bg2);
  border-right:1px solid var(--a-line); overflow-y:auto; padding:14px 0 30px;
  animation:aFade .35s ease both;
}
#atlasRoot .a-tree-head{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--a-muted2); padding:4px 14px 12px;
}
#atlasRoot .tw{
  display:flex; align-items:center; gap:6px; width:100%;
  padding:6px 12px 6px 8px; border:0; background:transparent; text-align:left; transition:background .15s;
}
#atlasRoot .tw:hover{background:var(--a-surface)}
#atlasRoot .tw.on{background:var(--a-accent-faint)}
#atlasRoot .tw-chev{
  flex:none; width:14px; text-align:center; font-size:9px; color:var(--a-muted2); transition:transform .2s;
}
#atlasRoot .tw-chev.open{transform:rotate(90deg)}
#atlasRoot .tw-mark{flex:none; width:11px; height:11px; border-radius:2px; display:block}
#atlasRoot .tw-name{
  flex:1; min-width:0; font-size:13.5px; color:var(--a-ink2); line-height:1.32;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
#atlasRoot .tw.on .tw-name{color:var(--a-ink)}
#atlasRoot .tw-count{
  flex:none; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9.5px; color:var(--a-muted2);
}
#atlasRoot .tw-kids{margin:1px 0 3px 22px; border-left:1px solid var(--a-line); padding-left:2px}
#atlasRoot .tl{
  display:flex; align-items:flex-start; gap:7px; width:100%; padding:5px 10px;
  border:0; background:transparent; text-align:left; font-size:12.5px; color:var(--a-muted);
  transition:all .15s;
}
#atlasRoot .tl:hover{background:var(--a-surface); color:var(--a-ink2)}
#atlasRoot .tl.on{color:var(--a-accent)}
#atlasRoot .tl-t{
  flex:1; min-width:0; line-height:1.32;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
#atlasRoot .tl-dot{flex:none; font-size:8px; opacity:.65; margin-top:3px}
#atlasRoot .tl-star{flex:none; font-size:9px; color:var(--a-accent); margin-top:2px}

#atlasRoot .a-panel{
  flex:1; min-width:0; display:flex; flex-direction:row;
  background:var(--a-surface); border-left:1px solid var(--a-line);
  animation:aPanel .45s cubic-bezier(.22,.9,.24,1) both;
}
#atlasRoot .a-main{flex:1; min-width:0; display:flex; flex-direction:column}
#atlasRoot .a-head{position:relative; padding:28px 36px 20px; border-bottom:1px solid var(--a-line)}
/* The close button belongs to the panel, not to the column of text inside it — at 4K
   it was otherwise stranded a long way from the corner anyone reaches for. */
#atlasRoot .a-close{position:absolute; top:26px; right:26px; z-index:3}
#atlasRoot .a-col{max-width:780px; margin:0 auto}
#atlasRoot .a-body{flex:1; overflow-y:auto; padding:4px 36px 56px}
#atlasRoot .a-body > *{max-width:780px; margin-left:auto; margin-right:auto}
#atlasRoot .a-top{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-right:46px}
#atlasRoot .a-kicker{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9.5px;
  letter-spacing:.2em; text-transform:uppercase;
}
#atlasRoot .a-h2{
  font-family:Georgia,'Times New Roman',serif; font-weight:400; font-size:33px; line-height:1.12;
  margin:9px 0 0; letter-spacing:-.01em; color:var(--a-ink);
}
#atlasRoot .a-icon{
  flex:none; width:32px; height:32px; border-radius:50%; border:1px solid var(--a-line2);
  background:transparent; color:var(--a-muted); font-size:15px; line-height:1; transition:all .2s;
}
#atlasRoot .a-icon:hover{border-color:var(--a-muted); color:var(--a-ink)}
#atlasRoot .a-blurb{
  font-family:Georgia,serif; font-size:15.5px; line-height:1.62; color:var(--a-ink2);
  margin:13px 0 0; max-width:46ch;
}
#atlasRoot .a-meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:20px; margin-top:16px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--a-muted2);
}

#atlasRoot .a-post{padding:24px 0; border-bottom:1px solid var(--a-line); animation:aRise .5s ease both}
#atlasRoot .a-post.target{animation:aRise .5s ease both, aFlash 1.4s ease}
#atlasRoot .a-pmeta{
  display:flex; align-items:center; gap:10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--a-muted2);
}
#atlasRoot .a-pdot{width:3px; height:3px; border-radius:50%; background:var(--a-line2)}
#atlasRoot .a-ptext{
  font-family:Georgia,serif; font-size:17px; line-height:1.62; color:var(--a-ink2);
  margin:10px 0 0; white-space:pre-wrap;
}
#atlasRoot .a-photos{display:grid; gap:6px; margin-top:15px}
/* contain, never cover. Most of Henry's posts are text graphics, and cropping one to
   fill the box cuts words off the edges — HANDOVER.md §6 records this being learned
   once already, on the v2 tiles, which is why styles.css says object-fit:contain. The
   Atlas had it as cover and would have relearned it the same way. */
#atlasRoot .a-photo{
  position:relative; border-radius:3px; border:1px solid var(--a-line2);
  background-size:contain; background-repeat:no-repeat; background-position:center;
  background-color:var(--a-surface2);
  aspect-ratio:4/3; display:flex; align-items:flex-end; padding:9px; cursor:zoom-in; transition:all .2s;
}
#atlasRoot .a-photo:hover{border-color:var(--a-accent)}
#atlasRoot .a-photo .pin{position:absolute; right:6px; top:6px; font-size:10px; color:var(--a-accent)}
#atlasRoot .a-thread{
  display:flex; align-items:baseline; gap:9px; margin-top:13px; padding:9px 12px;
  border-radius:4px; border:1px solid var(--a-line2); background:transparent;
  width:100%; text-align:left; transition:all .2s;
}
#atlasRoot .a-thread:hover{border-color:var(--a-accent); background:var(--a-accent-faint)}
#atlasRoot .a-arrow{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; flex:none;
}
#atlasRoot .a-note{font-family:Georgia,serif; font-size:14.5px; line-height:1.45; color:var(--a-ink2)}
#atlasRoot .a-acts-row{display:flex; align-items:center; gap:8px; margin-top:15px; flex-wrap:wrap}
#atlasRoot .a-mini{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; padding:7px 12px; border-radius:999px; border:1px solid var(--a-line2);
  background:transparent; color:var(--a-muted); transition:all .2s;
}
#atlasRoot .a-mini:hover{border-color:var(--a-muted); color:var(--a-ink2)}
#atlasRoot .a-mini.on{border-color:var(--a-accent); background:var(--a-accent-soft); color:var(--a-accent)}
#atlasRoot .a-more{
  display:block; width:100%; margin:22px auto 0; padding:12px; border-radius:4px;
  border:1px dashed var(--a-line2); background:transparent; color:var(--a-ink2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px;
  letter-spacing:.18em; text-transform:uppercase;
}
#atlasRoot .a-more:hover{border-color:var(--a-accent); color:var(--a-accent)}

/* ---------------- the rail ---------------- */
#atlasRoot .a-rail{
  flex:0 0 clamp(230px,21%,300px); min-width:0; border-left:1px solid var(--a-line);
  background:var(--a-bg2); overflow-y:auto; padding:26px 20px 40px;
}
#atlasRoot .a-rail section{margin-bottom:26px}
#atlasRoot .a-small{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--a-muted2); margin:0 0 12px;
}
#atlasRoot .a-fact{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:7px}
#atlasRoot .a-fact dt{font-size:12.5px; color:var(--a-muted)}
#atlasRoot .a-fact dd{
  margin:0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; color:var(--a-ink2);
}
#atlasRoot .a-link{
  display:block; width:100%; text-align:left; border:0; background:transparent;
  padding:9px 10px; border-radius:4px; margin:0 -10px 2px; transition:background .15s;
}
#atlasRoot .a-link:hover{background:var(--a-surface)}
#atlasRoot .a-link b{
  display:flex; align-items:center; gap:6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9px; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase;
}
#atlasRoot .a-link b em{width:7px; height:7px; border-radius:2px; display:block; flex:none}
#atlasRoot .a-link span{
  display:block; margin-top:4px; font-family:Georgia,serif; font-size:13.5px;
  line-height:1.42; color:var(--a-ink2);
}
#atlasRoot .a-pin{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:0;
  background:transparent; padding:7px 10px; border-radius:4px; margin:0 -10px 2px; transition:background .15s;
}
#atlasRoot .a-pin:hover{background:var(--a-surface)}
#atlasRoot .a-pin i{
  flex:none; width:34px; height:34px; border-radius:3px; display:block;
  border:1px solid var(--a-line2); background-size:cover; background-position:center;
  background-color:var(--a-surface2);
}
#atlasRoot .a-pin span{
  flex:1; min-width:0; font-size:12.5px; line-height:1.3; color:var(--a-ink2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
#atlasRoot .a-none{font-family:Georgia,serif; font-size:13px; font-style:italic; color:var(--a-muted2)}

/* ---------------- lightbox ---------------- */
#atlasRoot .a-viewer{
  position:fixed; inset:0; z-index:40; background:rgba(8,7,6,.94);
  display:flex; align-items:center; justify-content:center; padding:34px; animation:aFade .3s ease both;
}
#atlasRoot .a-vframe{position:relative; width:min(1100px,100%); height:100%; display:flex; flex-direction:column}
#atlasRoot .a-vimg{
  flex:1; min-height:0; border-radius:5px; border:1px solid var(--a-line2);
  background-size:contain; background-position:center; background-repeat:no-repeat;
}
#atlasRoot .a-vbar{display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:14px 2px 0}
/* The whole caption, not the opening words. It was clipped at 90 characters, which cut
   Henry's own descriptions off mid-sentence in the one place a reader has stopped to
   look properly. Long ones scroll rather than push the picture off the screen. */
#atlasRoot .a-vcap{flex:1; min-width:0; max-height:22vh; overflow-y:auto}
#atlasRoot .a-vcap .a-note{margin:0; white-space:pre-wrap}
#atlasRoot .a-vbar .a-mini{white-space:nowrap}


/* ---------------- the drift ----------------
   Three bands of the site's own photographs, tilted and rolling behind everything.

   The rules that matter here are performance ones. One moving element per band — a
   strip of images, not an animated node per image — and `transform` only: animating
   `left`, `width` or `background-position` on sixty pictures relayouts the page every
   frame and takes the map down with it. `will-change` goes on the three strips and
   nowhere else, because it costs a compositor layer each time it is used. */
#atlasRoot .a-drift{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  opacity:0; transition:opacity .8s ease;
}
/* Nothing waits for the photographs: the map is drawn dark and they fade into it. */
#atlasRoot .a-drift.ready{opacity:var(--a-drift-op)}
/* While a topic is being considered, the weather settles to a little over a quarter of
   whatever Henry has set — not to a fixed value, or turning the drift down would stop
   changing anything at the point it mattered most. */
#atlasRoot .a-drift.ready.hushed{opacity:calc(var(--a-drift-op) * .28)}

/* Inset far enough on all four sides that no rotated corner can ever appear inside the
   viewport. −16%/−10% is the least that clears it at −8°. */
#atlasRoot .a-drift-rot{
  position:absolute; left:-16%; right:-16%; top:-10%; bottom:-10%;
  transform:rotate(-8deg);
  display:flex; flex-direction:column; justify-content:center; gap:16px;
}
/* 112px is the wireframe's number, drawn against a 388px-tall card. Held literally on a
   real screen the three bands cover a third of a laptop window and a fifth of a big one,
   and the drift stops being weather and starts being a stripe. They grow with the
   window instead, to about 57% of its height — the proportion the wireframe has. */
#atlasRoot .a-band{position:relative; height:clamp(104px, 17.5vh, 200px); overflow:hidden}
#atlasRoot .a-strip{
  --a-run-gap:14px;
  display:flex; gap:var(--a-run-gap); height:100%; width:max-content;
  will-change:transform;
  animation:aDrift var(--a-band-dur) linear infinite;
}
/* Reverse rather than a second keyframe: an infinite loop played backwards is just as
   seamless, because 0% and 100% are the same picture in the same place. */
#atlasRoot .a-strip[data-reverse="1"]{animation-direction:reverse}
#atlasRoot .a-run{display:flex; gap:var(--a-run-gap); height:100%; flex:none}
#atlasRoot .a-drift img{
  height:100%; width:auto; max-width:none; display:block; object-fit:cover;
  user-select:none; -webkit-user-drag:none;
}
/* Not −50%. The strip is run + gap + run, so half of it lands half a gap short and the
   loop stutters once every pass. Half a gap back, and it does not. */
@keyframes aDrift{to{transform:translateX(calc(-50% - var(--a-run-gap) / 2))}}

#atlasRoot .a-drift-vig{position:absolute; inset:0}

/* Steeper on a phone, and the scrim runs top to bottom instead of out from the middle:
   the content is a column there, not a ring, so it needs its dark at both ends. */
#atlasRoot .a-drift.phone .a-drift-rot{
  left:-40%; right:-40%; top:-8%; bottom:-8%; transform:rotate(-16deg); gap:12px;
}
#atlasRoot .a-drift.phone .a-band{height:clamp(96px, 13vh, 150px)}

/* Nobody is looking: the tab is hidden, a photograph is open, or the composer is up. */
#atlasRoot.a-still .a-strip{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){
  #atlasRoot .a-strip{animation:none}
}

/* ---------------- the hover card ---------------- */
#atlasRoot .a-node.hush{opacity:.42}
#atlasRoot .a-sat.hush{opacity:.4}
#atlasRoot .a-centre{transition:opacity .4s ease}
#atlasRoot .a-centre.hush{opacity:.45}
#atlasRoot .a-glance{
  position:absolute; z-index:8; width:300px; padding:14px 15px 13px;
  display:flex; flex-direction:column; gap:9px;
  border-radius:5px; border:1px solid var(--a-accent);
  background:var(--a-surface); box-shadow:0 18px 46px rgba(0,0,0,.55);
  pointer-events:none; animation:aFade .18s ease both;
}
#atlasRoot .a-glance-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
#atlasRoot .a-glance-name{
  font-family:Georgia,'Times New Roman',serif; font-size:18px; line-height:1.2;
}
#atlasRoot .a-glance-n{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px;
  letter-spacing:.14em; color:var(--a-muted); flex:none;
}
#atlasRoot .a-glance-strip{display:flex; gap:5px}
#atlasRoot .a-glance-strip i{
  flex:1; height:44px; display:block; border-radius:2px;
  background-color:var(--a-surface2); background-size:cover; background-position:center;
}
#atlasRoot .a-glance-line{
  font-family:Georgia,'Times New Roman',serif; font-size:12.5px; line-height:1.45;
  color:var(--a-muted); text-wrap:pretty;
}
#atlasRoot .a-glance-line b{font-weight:400; color:var(--a-ink2)}
#atlasRoot .a-glance-go{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9px;
  letter-spacing:.18em; text-transform:uppercase;
}

/* ---------------- the drift settings, owner only ---------------- */
#atlasRoot .a-slide{display:flex; align-items:center; gap:14px; margin-top:10px}
#atlasRoot .a-slide input[type=range]{
  flex:1; min-width:0; height:3px; appearance:none; -webkit-appearance:none;
  background:var(--a-line2); border-radius:999px; cursor:pointer;
}
#atlasRoot .a-slide input[type=range]::-webkit-slider-thumb{
  appearance:none; -webkit-appearance:none; width:17px; height:17px; border-radius:50%;
  background:var(--a-accent); border:0; cursor:pointer;
}
#atlasRoot .a-slide input[type=range]::-moz-range-thumb{
  width:17px; height:17px; border-radius:50%; background:var(--a-accent); border:0; cursor:pointer;
}
#atlasRoot .a-slide-n{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;
  color:var(--a-ink2); width:44px; text-align:right; flex:none;
}
#atlasRoot .a-orders{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
/* The sentence under a control that says what it is for. Set as prose rather than as
   another all-caps monospace label, because it is meant to be read once, not scanned. */
#atlasRoot .a-note-s{
  margin:8px 0 0; font-family:Georgia,'Times New Roman',serif; font-size:12.5px;
  line-height:1.5; color:var(--a-muted);
}
#atlasRoot .a-picks{display:flex; align-items:center; gap:6px; margin-top:12px}
#atlasRoot .a-picks-n{
  margin-left:auto; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--a-muted2);
}
#atlasRoot .a-warn{
  margin:10px 0 0; padding:9px 11px; border-radius:4px;
  border:1px solid var(--a-line2); background:var(--a-accent-faint);
  font-family:Georgia,serif; font-size:12.5px; line-height:1.45; color:var(--a-ink2);
}
#atlasRoot .a-shots{
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:12px;
}
#atlasRoot .a-shot{
  position:relative; aspect-ratio:1/1; border-radius:3px; padding:0; overflow:hidden;
  border:1px solid var(--a-line2); background-color:var(--a-surface2);
  background-size:cover; background-position:center;
  opacity:.34; transition:opacity .2s, border-color .2s;
}
#atlasRoot .a-shot.on{opacity:1; border-color:var(--a-accent)}
#atlasRoot .a-shot-tick{
  position:absolute; right:4px; bottom:3px;
  font-size:12px; line-height:1; color:var(--a-accent);
  text-shadow:0 1px 4px rgba(0,0,0,.8);
}

/* ---------------- links inside a post ---------------- */
/* Bare URLs in a post body, and the Open Graph card the server fetched for a shared
   link. Both used to be dead on the map: the URL was printed as text and the card was
   dropped entirely, so a post whose whole point was the link read as a dead end. */
/* `.a-url`, not `.a-link`: the rail's thread buttons already hold that name further down
   this file and they are full-width blocks, so borrowing it put every URL in a post on a
   line of its own. */
#atlasRoot .a-url{
  color:var(--a-accent); text-decoration:none;
  border-bottom:1px solid var(--a-accent-soft);
  transition:border-color .2s, color .2s; overflow-wrap:anywhere;
}
#atlasRoot .a-url:hover{color:var(--a-accent-hi); border-bottom-color:var(--a-accent-hi)}
#atlasRoot .a-plink{
  display:flex; align-items:center; gap:12px; margin-top:14px; padding:10px 12px;
  border:1px solid var(--a-line2); border-radius:5px; background:var(--a-surface);
  text-decoration:none; transition:border-color .2s, background .2s;
}
#atlasRoot .a-plink:hover{border-color:var(--a-accent); background:var(--a-accent-faint)}
#atlasRoot .a-plink-img{
  width:52px; height:40px; flex:none; border-radius:3px; display:block;
  background-color:var(--a-surface2); background-size:cover; background-position:center;
}
#atlasRoot .a-plink-txt{min-width:0; display:flex; flex-direction:column; gap:3px}
#atlasRoot .a-plink-t{
  font-family:Georgia,'Times New Roman',serif; font-size:14px; line-height:1.35;
  color:var(--a-ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#atlasRoot .a-plink-d{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--a-accent);
}

/* ---------------- theme studio ---------------- */
#atlasRoot .a-themes{
  position:fixed; right:0; top:0; height:100%; width:min(420px,92vw);
  background:var(--a-surface); border-left:1px solid var(--a-line); z-index:30;
  display:flex; flex-direction:column; animation:aPanel .4s cubic-bezier(.22,.9,.24,1) both;
}
#atlasRoot .a-themes-head{
  padding:26px 28px 18px; border-bottom:1px solid var(--a-line);
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
}
#atlasRoot .a-themes-body{flex:1; overflow-y:auto; padding:22px 28px 50px}
#atlasRoot .a-drop{
  display:block; padding:22px 16px; border-radius:5px; border:1px dashed var(--a-line2);
  text-align:center; transition:all .2s; cursor:pointer;
}
#atlasRoot .a-drop.over{border-color:var(--a-accent); background:var(--a-accent-faint)}
#atlasRoot .a-swatches{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px}
#atlasRoot .a-swatch{
  width:38px; height:38px; border-radius:4px; border:1px solid rgba(0,0,0,.4);
  font-family:ui-monospace,monospace; font-size:7px;
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:3px;
}
#atlasRoot .a-card{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:12px 14px;
  border-radius:5px; border:1px solid var(--a-line2); background:transparent; margin-bottom:8px; transition:all .2s;
}
#atlasRoot .a-card:hover{border-color:var(--a-muted)}
#atlasRoot .a-card.on{border-color:var(--a-accent); background:var(--a-accent-faint)}
#atlasRoot .a-dots{display:flex; gap:3px; flex:none}
#atlasRoot .a-dots i{width:13px; height:13px; border-radius:3px; display:block}

#atlasRoot .a-toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:70;
  padding:11px 20px; border-radius:999px; border:1px solid var(--a-line2);
  background:var(--a-surface); box-shadow:0 12px 34px rgba(0,0,0,.5);
  font-family:ui-monospace,monospace; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--a-ink2); animation:aRise .3s ease both;
}

/* The owner-only nudge at the end of the 30 days. Nobody else ever sees it. */
#atlasRoot .a-beta{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:65;
  max-width:min(560px,92vw); padding:14px 18px; border-radius:6px;
  border:1px solid var(--a-accent); background:var(--a-surface);
  box-shadow:0 14px 40px rgba(0,0,0,.55); display:flex; align-items:center; gap:14px;
}
#atlasRoot .a-beta p{margin:0; font-family:Georgia,serif; font-size:14px; line-height:1.5; color:var(--a-ink2)}

#atlasRoot .a-hide{display:none !important}

/* ================= PHONE =================
   Not the map shrunk. At 375px the 1180px stage scales to about 30%, putting the topic
   labels at roughly 5px. The arrangement survives, the drawing does not: the ellipse
   stands upright to use the tall screen, the circles carry only their count, and the
   names live in a rail underneath where there is room to read them. */
@media (max-width:760px){
  #atlasRoot .a-desktop{display:none !important}
  #atlasRoot .a-bar{padding:16px 16px 0; gap:10px; height:62px}
  #atlasRoot .a-name{font-size:19px}
  #atlasRoot .a-mode{display:none}
  #atlasRoot .a-pill{padding:8px 11px; font-size:9.5px; letter-spacing:.1em}
  #atlasRoot .a-acts{gap:6px}
  #atlasRoot .a-foot{display:none}
  #atlasRoot .a-field{height:calc(100% - 62px); align-items:flex-start}

  #atlasRoot .p-map{position:relative; width:100%; height:100%; overflow:hidden}
  #atlasRoot .p-web{position:absolute; inset:0; z-index:1; overflow:visible}
  #atlasRoot .p-centre{
    position:absolute; z-index:4; transform:translate(-50%,-50%);
    display:flex; flex-direction:column; align-items:center; gap:9px; pointer-events:none;
  }
  #atlasRoot .p-avatar{
    width:86px; height:86px; border-radius:50%;
    background:linear-gradient(160deg,var(--a-surface2),var(--a-surface));
    background-size:cover; background-position:center;
    border:1px solid var(--a-line2); display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 0 8px var(--a-accent-faint), 0 0 44px var(--a-accent-soft);
    animation:aBreathe 7s ease-in-out infinite;
  }
  #atlasRoot .p-avatar span{font-family:Georgia,serif; font-size:23px; color:var(--a-ink)}
  #atlasRoot .p-who{
    font-family:ui-monospace,monospace; font-size:8.5px; letter-spacing:.2em;
    text-transform:uppercase; color:var(--a-muted);
  }
  #atlasRoot .p-node{
    position:absolute; z-index:3; transform:translate(-50%,-50%);
    width:52px; height:52px; border-radius:50%; padding:0;
    background:var(--a-node-bg); border:1px solid var(--a-line2);
    display:flex; align-items:center; justify-content:center;
  }
  #atlasRoot .p-node b{font-family:ui-monospace,monospace; font-size:15px; font-weight:400}
  #atlasRoot .p-rail{
    position:absolute; left:0; right:0; bottom:0; z-index:5; display:flex; gap:8px;
    overflow-x:auto; padding:14px 16px 18px;
    background:linear-gradient(180deg,transparent,var(--a-bg1) 42%); scrollbar-width:none;
  }
  #atlasRoot .p-rail::-webkit-scrollbar{display:none}
  #atlasRoot .p-chip{
    flex:none; display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px;
    border:1px solid var(--a-line2); background:var(--a-surface);
  }
  #atlasRoot .p-chip em{width:8px; height:8px; border-radius:50%; flex:none; display:block}
  #atlasRoot .p-chip span{font-family:Georgia,serif; font-size:14.5px; color:var(--a-ink2); white-space:nowrap}
  #atlasRoot .p-chip small{font-family:ui-monospace,monospace; font-size:9px; color:var(--a-muted2)}

  /* Phones get no tree — there is no room for an index beside the thing it indexes —
     and no rail. The panel is a full-screen sheet over the map. */
  #atlasRoot .a-read{top:0}
  #atlasRoot .a-tree,#atlasRoot .a-rail{display:none}
  #atlasRoot .a-panel{border-left:0; animation:aSheet .4s cubic-bezier(.22,.9,.24,1) both}
  #atlasRoot .a-head{padding:20px 20px 16px}
  #atlasRoot .a-h2{font-size:27px}
  #atlasRoot .a-body{padding:4px 20px 44px}
  #atlasRoot .a-ptext{font-size:16.5px}
  #atlasRoot .a-photos{grid-template-columns:repeat(2,1fr) !important}
  #atlasRoot .a-photos[data-many="1"]{grid-template-columns:repeat(3,1fr) !important}
  /* Side by side the topic name took a third of the row and squeezed the note into a
     four-word ribbon. */
  #atlasRoot .a-thread{flex-direction:column; gap:5px}
  #atlasRoot .a-viewer{padding:14px}
  #atlasRoot .a-vbar{flex-direction:column; align-items:flex-start; gap:12px}
  #atlasRoot .a-beta{flex-direction:column; align-items:flex-start}
}
@media (max-width:1100px){ #atlasRoot .a-rail{display:none} }

/* ================= THE COMPOSER CONTROLS =================
   The one place the beta reaches outside #atlasRoot. Threads and pins are written on a
   post, so they belong in the composer where the post is written — Henry's call, made
   knowing the cost: it couples the beta to app.js and index.html, so removing the Atlas
   means removing three marked blocks rather than two files.

   The styles live here rather than in styles.css so that at least they still leave with
   the rest of the beta. Prefixed .pc-thread so they are obviously not v2's. */
.pc-threads .pc-thread-pick{
  width:100%; margin-top:8px; padding:9px 11px; border-radius:8px;
  border:1px solid var(--border); background:var(--surface-2); color:var(--text);
  font-family:inherit; font-size:14px;
}
.pc-thread-row{
  display:flex; align-items:center; gap:8px; margin-top:8px; padding:8px 10px;
  border:1px solid var(--border); border-radius:8px; background:var(--surface-2);
}
.pc-thread-to{
  flex:none; display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  color:var(--topic-hue, var(--text-2)); white-space:nowrap;
}
.pc-thread-to em{width:8px; height:8px; border-radius:2px; display:block; background:currentColor}
.pc-thread-note{
  flex:1; min-width:0; padding:6px 8px; border-radius:6px;
  border:1px solid transparent; background:transparent; color:var(--text);
  font-family:inherit; font-size:14px;
}
.pc-thread-note:focus{border-color:var(--border); background:var(--surface)}
.pc-thread-x{
  flex:none; width:26px; height:26px; border-radius:50%; border:1px solid var(--border);
  background:transparent; color:var(--text-2); font-size:14px; line-height:1; cursor:pointer;
}
.pc-thread-x:hover{border-color:var(--danger, #e0685f); color:var(--danger, #e0685f)}