/* swarmbook.css: SWARMBOOK.COM (Nov 13 2026; was after-the-mint.css on lane/swarmbook-is-the-new-poleis until main's page became the Space Router's). AFTER THE MINT (lane/after-the-mint, Nov 2 2026), SWARMBOOK since Nov 10. HARMONY'S OWN LOOK, MEASURED OFF ITS WELCOME (his "this is still shit" over the Spool-like pills; ../../index.html read in a browser: its title 'Bodoni 72' 400 at 47.5 px, tracked -.035em, line .98, its second line an italic in the ripple; its door a bar, radius 8, 60 px tall, the ink under the ground's colour, DM Sans 500 16, the arrow at its right; its other way a plain line of DM Sans 14 in the quiet ink). Before it (Nov 11 2026 ~00:2x UTC, his "i hate
   these fonts and colors.. align it to what we got in harmony", over the hero's hairline title, grey line and gold button): Harmony's night and its snow day
   from their one source (../../harmony-accent.css), and Harmony's type as the Spool wears it (room/spool-strip.css): 'Bodoni 72' at 500 with Georgia behind
   it for the titles, DM Sans for the words, 600 for a label; its pills (the bar's: the deep sea under the ripple for the one that goes, glass with a hairline
   for the quiet one). THE PLATE STAYS (his next line, over a picture of it: "you must keep this"): the book's name on the freeze's own plate
   (dl-space-router.js .dl-router-plate: Gelasio 700 skewed, cream stroked dark, the router's blue band, the gold stamp), settled, no motion. The plate's
   colours are that sheet's own and the only literal colours here; the test holds each to it. */
/* THE PLATE'S FACE EVERYWHERE (his pick "a", Nov 11 2026 ~01:2x UTC, of three mocks after "i dont like these fonts. think of alternatives"): every title
   under the plate is set in the plate's own serif (Gelasio, which ../../fonts/fonts.css ships under the name Georgia), bold; 'Bodoni 72' leaves this sheet */
:root{--am-serif:'Gelasio','Georgia',serif;--am-sans:'DM Sans',system-ui,sans-serif;--am-plate:'Gelasio','Georgia',serif;
  --am-cream:#fbf6ea;--am-stroke:#0b0709;--am-stamp:#f0cf74;
  --am-router:linear-gradient(90deg,transparent,rgba(8,16,58,.92) 12%,rgba(64,128,236,.95) 50%,rgba(8,16,58,.92) 88%,transparent);
  --am-warm:linear-gradient(90deg,transparent,rgba(140,14,30,.92) 12%,rgba(201,161,74,.95) 50%,rgba(140,14,30,.92) 88%,transparent)}
*{box-sizing:border-box}
[hidden]{display:none!important}
body.am{margin:0;min-height:100svh;overflow-x:hidden;background:var(--harmony-sky);color:var(--harmony-text);font:400 16px/1.6 var(--am-sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--harmony-go);outline-offset:4px}
.am-top{display:flex;align-items:baseline;justify-content:flex-end;gap:16px;max-width:1180px;margin:0 auto;padding:28px 36px 0}
.am-society{color:var(--harmony-quiet);font:600 11px/1 var(--am-sans);letter-spacing:.22em;text-transform:uppercase}
.am-main{max-width:1180px;margin:0 auto;padding:18px 36px 40px}
.am-hero{position:relative;display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);min-height:clamp(520px,66vh,700px);align-items:center}
/* the welcome's hero: unit0 at the middle of the canvas's left 58 % (room/assembly-gpu.mjs frame: area), the twelve and their rings around her, the text over
   the right of it as on the welcome; without WebGL2 the welcome's module drops data-renderer and its canvas, and the words take the row */
.am-stage{position:absolute;inset:0 -36px;z-index:0}
.am-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.am-stage:not([data-renderer]){display:none}
.am-hero:has(.am-stage:not([data-renderer])) .am-say{grid-column:1 / -1}
.am-say{position:relative;z-index:1;grid-column:2;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:26px;min-width:0;text-align:center}
.am-plate{position:relative;display:grid;justify-items:center;margin:0;padding:.1em .3em;font-size:clamp(24px,3.1vw,44px);line-height:1}
.am-slash{position:absolute;left:0;right:0;top:.6em;height:.62em;transform:translateY(-50%) skewY(-4deg)}
.am-router .am-slash{background:var(--am-router)}
.am-name{position:relative;font:700 1em/.9 var(--am-plate);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;color:var(--am-cream);
  -webkit-text-stroke:2px var(--am-stroke);paint-order:stroke fill;text-shadow:-1px 0 rgba(255,36,56,.35),1px 0 rgba(80,220,255,.3),0 6px 30px rgba(0,0,0,.8);transform:skewX(-10deg)}
.am-stamp{position:relative;margin-top:.3em;padding-left:.42em;font:700 max(12px,.34em)/1.2 var(--am-plate);letter-spacing:.42em;text-transform:uppercase;white-space:nowrap;
  color:var(--am-stamp);text-shadow:0 1px 0 #000}
/* SWARMBOOK (Nov 10 2026): one plate, the book's name, a size above the freeze's pair */
.am-router{font-size:clamp(30px,4.3vw,62px)}
.am-router .am-stamp{font-size:max(11px,.2em);letter-spacing:.34em}
/* THE RED PLATE (his Nov 11 05:26 to 05:27 UTC, over "Prompt-to-mine / It's time to / get $WARM." in a gold bar: "i dont like this still...", then over the SWARMBOOK
   plate: "u could replace by keeping this image font and saying PROMPT-2-MINE $WARM", "like if swarmbook got the blue background, there's another red we
   used usually ... it's red and blue dmc"): the freeze's pair, both plates. The book's name on the blue slash, and under it PROMPT-2-MINE on the red one
   (dl-space-router.js's own $WARM slash, value for value), its stamp $WARM. It is the page's title and its door to the mint page's refuel, where the gold
   bar stood; the slash brightens under the pointer, as the freeze's plates do, at once: nothing moves. */
.am-title{margin:0;font-size:inherit}
.am-warm{font-size:clamp(22px,2.75vw,40px);color:inherit} .am-warm .am-slash{background:var(--am-warm)}
.am-warm .am-name{font-variant-numeric:lining-nums} .am-warm .am-stamp{font-size:max(13px,.46em);letter-spacing:.5em;padding-left:.5em}
.am-warm:hover .am-slash,.am-warm:focus-visible .am-slash{filter:brightness(1.3) saturate(1.25)} .am-warm:focus-visible{outline:none} .am-warm:focus-visible .am-name{-webkit-text-stroke:2px #f0cf74}
/* "get $WARM." IS SAID ONCE, IN THE BAR (his Nov 11 ~01:1x UTC, an arrow drawn from the gold line into the bar, the bar's own "Get $WARM" struck out:
   "why repeating diocane? put the gold text in black under there"): the title is "It's time to" and the bar under it finishes the sentence in the
   title's own face (bold italic), in the bar's ink on optimism.fit's gold */
.am-go em{font:italic 700 clamp(32px,2.9vw,42px)/1 var(--am-serif);letter-spacing:-.01em;color:#131713}
/* THE DOORS ARE OPTIMISM.FIT'S OWN (his Nov 11 ~00:55 UTC "i hate this" over the frost bar and the grey line, after "go read the fucking optimism.fit
   colors"): the mint page's gold bar (warm.css .ink-button: its gold under its ink, 600 13 px, 48 px tall, square, the arrow at its right) and its
   quiet link (warm.css .quiet-link: 12 px in the gold over a hairline of it) */
.am-doors{display:grid;justify-items:center;gap:18px}
.am-go{display:flex;align-items:center;justify-content:space-between;gap:30px;min-width:220px;min-height:48px;border:1px solid #c4a365;padding:12px 20px 16px;background:#c4a365;color:#131713;font:600 13px/1.4 var(--am-sans);text-align:left}
.am-go i{font:normal 600 16px/1 var(--am-sans)}
.am-quiet{display:inline-flex;align-items:center;gap:20px;border-bottom:1px solid #c4a36555;padding-bottom:4px;color:#c4a365;font:400 12px/1.5 var(--am-sans)}
.am-quiet small{color:var(--harmony-quiet);font:400 11px/1.3 var(--am-sans)}
.am-quiet small:empty{display:none}
/* THE BOOK: a row a swarm, laid by the module from the swarm's register (its face over its initial, its name, its handle and line, its drops, its door);
   the last row, dashed, is the door to open one. Harmony's tokens only; the gold edge under the pointer is a colour, never a motion. */
/* THE PANTHEON (his Nov 11 2026 ~01:2x UTC, over the book and its cards: "this shit is gotta be more open source pantheon gods shit"; Nov 7 21:54 "i mean
   who stakes the most becomes pentagon", 21:59 "treat it as a pantheon of software", 21:43 "maybe hex=$warm and pent=$pool"; Nov 9 23:37 "the snowtrace
   pantheon golden armor dev vibes"): his two houses. The Pantheon's twelve thrones are told by its words and shown by the governance film (THE TWO
   SIDES, below); the pentagons drawn here first, and the pool's ball after them, are gone by his Nov 11 word. The book: a tracenet's row, its face a
   flask. Nothing is drawn by a script, nothing moves until a press. */
/* ALL OF IT IS PROMPT-TO-MINE (his Nov 11 2026 ~01:3x UTC: "have $POOL in place for pentagons/stakers as something shown in the page here", "have $WARM
   minted = USDC spent in the space-router for the other shit", "i need you to make all of this about prompt-to-mine"): the name stands over the title,
   and each house wears its token beside its name: $POOL on the thrones, $WARM on the book */
.am-kicker{margin:0;color:#c4a365;font:600 12px/1 var(--am-sans);letter-spacing:.3em;text-transform:uppercase}
.am-token{display:inline-block;margin-left:.45em;border:1px solid #c4a36577;padding:.28em .5em .24em;color:#c4a365;font:700 .5em/1 var(--am-sans);letter-spacing:.08em;vertical-align:.32em}
.am-book{margin-top:46px}
.am-pantheon{text-align:center}
.am-pantheon .am-book-head{display:grid;justify-content:center;justify-items:center;gap:8px;border:0;margin-bottom:22px;padding:0}
.am-pantheon .am-book-head h2{font-size:clamp(32px,3.2vw,46px);color:#d0b679}
.am-pantheon .am-book-head p{max-width:none;text-align:center}
.am-throne-door{display:inline-block;margin:22px 0 0;color:var(--harmony-quiet);font:400 12px/1.5 var(--am-sans)}
/* THE MINE, LIVE: one line under the book's head, shown only when the Space Router's public door answers with an opening; no number is ever written here */
/* HOW THE SWARM DECIDES (his Nov 11 "i think we should get into ai futarchy ... for governance", then "let's focus on these" over "No governance figure and no
   futarchy drawing are on the Swarmbook page"): one drawing of three tiles (swarmbook-futarchy.svg), each list item showing its third; nothing moves. */
.am-fut{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:0;padding:0;list-style:none}
.am-fut li::before{content:"";display:block;aspect-ratio:4/3;margin-bottom:14px;border:1px solid var(--harmony-line);border-top-color:#c4a36577;border-radius:16px;background:var(--harmony-glass) url(./swarmbook-futarchy.svg) 0 50%/300% auto no-repeat}
.am-fut li:nth-child(2)::before{background-position:50% 50%} .am-fut li:nth-child(3)::before{background-position:100% 50%}
.am-fut b{display:block;font:700 21px/1.2 var(--am-serif);letter-spacing:-.01em;color:var(--harmony-text)}
.am-fut small{display:block;margin-top:6px;color:var(--harmony-quiet);font-size:15px;line-height:1.5}
.am-mine{margin:-4px 0 16px;color:#c4a365;font:600 13px/1.5 var(--am-sans);letter-spacing:.02em}
.am-book-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px;border-bottom:1px solid var(--harmony-line);padding-bottom:12px}
.am-book-head h2{margin:0;font:700 32px/1.1 var(--am-serif);letter-spacing:-.01em;color:var(--harmony-text)}
.am-book-head p{margin:0;max-width:560px;color:var(--harmony-quiet);font:italic 400 17px/1.35 var(--am-serif);text-align:right}
.am-shelf{display:grid;gap:10px;margin-bottom:10px}
.am-shelf:empty{display:none}
.am-swarm{display:grid;grid-template-columns:56px minmax(0,1fr) auto auto;align-items:center;gap:6px 20px;border:1px solid var(--harmony-line);border-radius:16px;padding:14px 22px 14px 14px;background:var(--harmony-glass)}
.am-swarm:hover{border-color:var(--harmony-go)}
/* A RIDER'S FACE IS A FLASK (his Nov 11 "every flask like her is basically a claw-rider", over her on her Goldberg with the beads round it): the ball with
   its fuel and its beads (swarmbook-flask.svg, a still), the rider's own picture on top of it as she sits on hers; "yours" is the same ball, empty. */
.am-face{--fl:104px;position:relative;grid-area:1/2/4/3;width:var(--fl);height:calc(var(--fl) + 10px);background:radial-gradient(circle at 50% 19px,#c4a365 18px,transparent 19px),url(./swarmbook-flask.svg) 50% 100%/var(--fl) var(--fl) no-repeat;color:#131713;font:normal 700 17px/38px var(--am-serif);text-align:center}
.am-face img{position:absolute;top:1px;left:50%;width:36px;height:36px;margin-left:-18px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px #c4a365}
.am-swarm b{display:block;font:700 21px/1.2 var(--am-serif);color:var(--harmony-text)}
.am-swarm small{display:block;margin-top:2px;overflow:hidden;color:var(--harmony-quiet);font-size:14px;line-height:1.45;text-overflow:ellipsis;white-space:nowrap}
.am-facts{color:var(--harmony-quiet);font:500 12px/1.4 var(--am-sans);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.am-swarm em{grid-column:4;color:var(--harmony-go);font:normal 600 14px/1.4 var(--am-sans);white-space:nowrap}
.am-yours{border-style:dashed;background:none}
.am-yours .am-face{grid-row:1/span 2;background:url(./swarmbook-flask-yours.svg) 50% 100%/var(--fl) var(--fl) no-repeat;color:#c4a365;font-size:30px;line-height:calc(var(--fl)*1.04 + 20px)}
/* THE WAY THROUGH (his Nov 11 "if i open it up i am at the same time amazed and confused... we need to perhaps lead people more into it... i had the
   poleis.us long inventory of animations and shit exactly for that purpose"): under the hero one line that names the whole road, six chapters numbered in
   their order by the sheet (01 to 06; the studies inside keep their own I to IV), and the first two chapters are poleis.us's own animated studies, Why and
   How, each framed whole as a plate of the book (the page itself, in its study-only mode: ecology.html and rules.html at their title's anchor). */
html{scroll-behavior:smooth}
.am-main{counter-reset:chapter}
.am-path{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:10px 30px;margin-top:34px;border-top:1px solid var(--harmony-line);border-bottom:1px solid var(--harmony-line);padding:16px 0;counter-reset:step}
.am-path b{color:#c4a365;font:600 12px/1 var(--am-sans);letter-spacing:.3em;text-transform:uppercase}
.am-path a{color:var(--harmony-text);font:700 19px/1.2 var(--am-serif)}
.am-path a::before{counter-increment:step;content:counter(step,decimal-leading-zero);margin-right:.6em;color:#c4a365;font:600 11px/1 var(--am-sans);letter-spacing:.14em;vertical-align:.3em}
.am-book,.am-riders{scroll-margin-top:18px;counter-increment:chapter}
.am-book-head h2::before,.am-riders .am-kicker::before{content:counter(chapter,decimal-leading-zero)}
.am-book-head h2::before{display:inline-block;margin-right:.9em;color:#c4a365;font:600 12px/1 var(--am-sans);letter-spacing:.14em;vertical-align:.5em}
.am-riders .am-kicker::before{margin-right:1em}
.am-frame{--f:min(1000px,100vw - 72px);display:block;width:min(100%,1000px);margin:0 auto;border:1px solid #c4a36577;box-shadow:0 34px 90px rgba(0,0,0,.8)}
/* a frame cannot size itself to the page it holds without a script, so each height is the study's own, measured at nine widths of the frame (288 to 1000 px,
   Nov 11 2026) and fitted with 20 px or more to spare: the wide layout above 620 px of frame (the studies' own breakpoint), the tall one at and under it. A study whose layout changes is measured again. */
#why .am-frame{height:calc(var(--f)*.40 + 420px)} #how .am-frame{height:calc(var(--f)*.56 + 320px)}
@media (max-width:760px){.am-frame{--f:calc(100vw - 32px)}}
@media (max-width:652px){#why .am-frame{height:calc(var(--f)*.72 + 656px)} #how .am-frame{height:calc(var(--f)*.70 + 600px)}}
/* THE TWO SIDES (his Nov 11 "do you understand the key symmetry between posiverses and neghiverses? ... $POOL is the Neghiverse token while $WARM is the
   posiverses token... every flask like her is basically a claw-rider", then "$WARM is prompt-to-mine dude..."): the flask's side and the pool's side face
   each other. Left, prompt-to-mine: the flasks, every one a Claw Rider, and the $WARM they mine. Right, the Pantheon: the stakers' pool and its thrones.
   Between them what crosses: the yield to the flasks, the traces back. The two words of the symmetry stay off the page (his "this is internal lingo").
   The flasks stand at the inner edge of their side.
   THE GOVERNANCE FILM IS THE PANTHEON'S PICTURE (his Nov 11 05:01 UTC, over the pool drawn as a large Goldberg ball with twelve numbered pentagons under
   it: "im not a fan of what you did there... perhaps i would simply put the mickey mouse 2nd video that explains governance visually there... like
   replacing 4th here as that video is much better than that fucking geometry shit"; then, asked whether to bring its music, "Bring the music"): where the
   ball and the thrones stood, one door, the film's own first frame with its name. A press opens the mint page's own player over the page
   (dl-athena-film.js: the picture and its Fantasia soundtrack, Play, Sound and its count, under The rule, item 8). This sheet styles nothing of that
   player but one thing: its corner card is the mint page's, and is not shown here. At rest: the poster, 48 KB, and no byte of the film or its music. */
.am-film{position:relative;display:block;width:100%;margin:0;padding:0;overflow:hidden;border:1px solid #c4a36577;background:none;color:#c4a365;font:600 11px/1 var(--am-sans);letter-spacing:.2em;text-transform:uppercase;text-align:left;cursor:pointer;box-shadow:0 24px 60px rgba(0,0,0,.8)}
.am-film:hover,.am-film:focus-visible{border-color:#c4a365;outline:0}
.am-film img{display:block;width:100%;height:auto}
.am-film b{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:14px;padding:34px 16px 14px;background:linear-gradient(transparent,rgba(0,0,0,.8));font-weight:600}
.am-film i{position:relative;flex:none;width:34px;height:34px;border:1.5px solid #c4a365;border-radius:50%;background:#131713}
.am-film i::after{content:"";position:absolute;left:12px;top:9px;border-left:11px solid #c4a365;border-top:7px solid transparent;border-bottom:7px solid transparent}
.am .dl-athena-film-card{display:none}
.am-sides{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:0 30px;align-items:start;margin-top:56px}
.am-sides .am-book{margin-top:0}
.am-sides .am-book-head{display:block;justify-items:normal;border:0;border-bottom:1px solid var(--harmony-line);margin-bottom:16px;padding:0 0 14px}
.am-sides .am-book-head h2{font-size:clamp(28px,2.6vw,36px);color:var(--harmony-text)}
.am-sides .am-book-head p{max-width:none;margin-top:10px;text-align:left}
.am-sides .am-pantheon,.am-sides .am-pantheon .am-book-head p{text-align:right}
.am-sides .am-pantheon .am-book-head h2{color:#d0b679}
.am-sides .am-swarm{grid-template-columns:minmax(0,1fr) auto;gap:4px 18px;padding:12px 16px 12px 20px}
/* THE GIFT (his Nov 11 04:50 UTC "people could donate $WARM to my tracenet and that would be the cosmos i can burn"): one line under the flasks, as the
   thrones have theirs. It states the rule and that it is not open: no door gives $WARM yet (the router's ledger burns a tank's own $WARM, nothing moves it). */
.am-sides .am-give{display:block;margin-top:14px;color:#c4a365;font-size:13px}
.am-sides .am-swarm small{white-space:normal} .am-sides .am-swarm>span,.am-sides .am-swarm em{grid-column:1}
.am-flow{align-self:stretch;display:grid;align-content:center;justify-items:center;gap:26px;margin:0;border-left:1px solid var(--harmony-line);border-right:1px solid var(--harmony-line);padding:0 16px;color:#c4a365;font:600 10px/1.3 var(--am-sans);letter-spacing:.24em;text-transform:uppercase;text-align:center}
.am-flow b{font-weight:600} .am-flow b::before{display:block;margin-bottom:4px;font:400 26px/1 var(--am-sans);letter-spacing:0}
.am-flow b:first-child::before{content:"←"} .am-flow b:last-child::before{content:"→"}
.am-ride{display:flex;flex-wrap:wrap;justify-content:center;gap:26px 30px;margin-top:76px;padding-bottom:52px}
.am-ride .am-go{position:relative;flex:0 1 390px}
.am-ride .am-go b,.am-ride .am-go small{position:absolute;top:100%;margin-top:9px;color:#c4a365;font:600 11px/1.2 var(--am-sans);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.am-ride .am-go b{left:0} .am-ride .am-go small{left:0;margin-top:28px;color:var(--harmony-quiet);font-weight:400;letter-spacing:.04em;text-transform:none}
@media (max-width:979px){
  .am-sides{display:block} .am-sides .am-pantheon{margin-top:0} .am-sides .am-pantheon,.am-sides .am-pantheon .am-book-head p{text-align:left}
  .am-flow{grid-auto-flow:column;justify-content:center;gap:44px;border:0;margin:26px 0;padding:0}
  .am-flow b:first-child::before{content:"↑"} .am-flow b:last-child::before{content:"↓"}
}
/* THE RIDERS, the page's close (his Nov 11 "that is the footer of the page dude... it gotta be epic... you have some shit there... come on", over three plain
   cards): his three Claw Riders posters of Sept 14, whole, as a triptych, the rider on the claw in front; under each one line of the stake's story. Stills:
   nothing moves, and they load only when the close comes near (loading="lazy"). */
.am-riders{position:relative;margin:92px 0 0;padding:78px 0 30px;text-align:center}
/* the close spans the window, whatever the column's width: the hairline and the glow are laid on the window's width behind it */
.am-riders::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);border-top:1px solid #c4a36555;background:radial-gradient(ellipse 56% 44% at 50% 0,color-mix(in srgb,#c4a365 26%,transparent),transparent 72%)}
.am-riders .am-kicker{letter-spacing:.42em}
.am-riders h2{margin:20px auto 0;max-width:13.5em;font:700 clamp(36px,5vw,70px)/1 var(--am-serif);letter-spacing:-.02em;color:var(--harmony-text);text-wrap:balance}
.am-riders h2 em{font-style:italic;color:#d0b679}
.am-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.6vw,38px);align-items:start;margin:64px calc(50% - min(650px,50vw - 44px)) 0;perspective:1800px}
.am-trio figure{margin:0;padding-top:40px}
.am-trio figure:nth-child(2){z-index:1;padding-top:0}
/* the tilt is the picture's alone: the words under it stand straight */
.am-poster{transform:rotateY(11deg) scale(.96);transform-origin:100% 50%}
.am-trio figure:nth-child(2) .am-poster{transform:scale(1.03)}
.am-trio figure:nth-child(3) .am-poster{transform:rotateY(-11deg) scale(.96);transform-origin:0 50%}
/* THE POSTER IS SET IN CODE (his Nov 11 "are you able to replicate those but in code design so that titles and fonts are not fucked up? ... we cant waste
   this chance with ugly ai pics that are inconsistent"): each painting is cut free of its painted lettering (the title, the sigil, the call, the foot) and
   the poster is laid here: one ground, one frame, CLAW RIDERS in the plate's own face, one vector sigil, the call and the foot in type, the same on all
   three. Every measure is a share of the poster's own width (cqw), so a poster is the same poster at any size. */
.am-poster{position:relative;container-type:inline-size;aspect-ratio:2/3;overflow:hidden;background:#0b0709;border:1px solid #c4a36577;box-shadow:0 34px 90px rgba(0,0,0,.8),0 0 70px color-mix(in srgb,#c4a365 16%,transparent)}
.am-trio figure:nth-child(2) .am-poster{border-color:#c4a365;box-shadow:0 44px 110px rgba(0,0,0,.8),0 0 110px color-mix(in srgb,#c4a365 30%,transparent)}
.am-poster::after{content:"";position:absolute;z-index:3;inset:2.6cqw;border:1px solid #c4a36555;pointer-events:none}
.am-poster b,.am-poster em,.am-poster small{position:absolute;z-index:2;left:0;right:0;text-align:center;text-transform:uppercase;white-space:nowrap}
.am-poster b{top:8cqw;font:700 10.2cqw/1 var(--am-serif);letter-spacing:.045em;text-indent:.045em;filter:drop-shadow(0 .5cqw 1.4cqw rgba(0,0,0,.8));color:#d0b679;background:linear-gradient(#d0b679 20%,#c4a365 80%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.am-poster img{position:absolute;top:20cqw;left:0;display:block;width:100%;height:101cqw;object-fit:cover;-webkit-mask-image:linear-gradient(transparent,#000 9%,#000 89%,transparent);mask-image:linear-gradient(transparent,#000 9%,#000 89%,transparent)}
.am-poster em{bottom:11cqw;font:normal 700 5.3cqw/1 var(--am-serif);letter-spacing:.09em;text-indent:.09em;color:#c4a365}
.am-poster em::before{content:"";display:block;width:15cqw;height:13.6cqw;margin:0 auto 3.6cqw;background:#c4a365;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 100'%3E%3Cpath d='M55 1C63 30 64 64 55 99C46 64 47 30 55 1ZM28 19C39 42 42 68 37 91C23 73 20 44 28 19ZM82 19C71 42 68 68 73 91C87 73 90 44 82 19Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 100'%3E%3Cpath d='M55 1C63 30 64 64 55 99C46 64 47 30 55 1ZM28 19C39 42 42 68 37 91C23 73 20 44 28 19ZM82 19C71 42 68 68 73 91C87 73 90 44 82 19Z'/%3E%3C/svg%3E") center/contain no-repeat}
.am-poster small{bottom:5.4cqw;font:600 2.3cqw/1 var(--am-sans);letter-spacing:.5em;text-indent:.5em;color:#c4a365}
.am-trio figcaption{position:relative;z-index:2;margin-top:26px;padding:0 6px;color:var(--harmony-quiet);font-size:15px;line-height:1.5}
.am-trio figcaption b{display:block;margin-bottom:6px;font:700 clamp(19px,1.9vw,25px)/1.15 var(--am-serif);letter-spacing:-.01em;color:var(--harmony-text)}
.am-foot{display:flex;gap:18px;justify-content:center;margin-top:28px;color:var(--harmony-quiet);font-size:12px}
@media (max-width:760px){
  .am-top{padding:20px 16px 0}
  .am-society{display:none}
  .am-main{padding:8px 16px 32px}
  .am-hero{display:block;min-height:0}
  /* a phone: the welcome's portrait (unit0 in the canvas's top 55 %), the words over the lower part, where only the twelve's orbits pass */
  .am-stage{position:relative;inset:auto;margin:0 -16px;height:120vw}
  .am-say{margin-top:-56vw}
  .am-hero:has(.am-stage:not([data-renderer])) .am-say{margin-top:18px}   /* a phone with no WebGL2: the stage is gone, so the words are not pulled up over it (they left the page's top) */
  .am-plate{font-size:clamp(22px,7.2vw,44px)}
  .am-router{font-size:clamp(30px,10vw,62px)}
  .am-warm{font-size:clamp(20px,6.5vw,40px)}
  .am-fut{grid-template-columns:minmax(0,1fr);gap:26px}
  .am-path{justify-content:flex-start;gap:8px 20px;margin-top:22px} .am-path b{flex:0 0 100%} .am-path a{font-size:17px}
  .am-riders{margin:60px -16px 0;padding:52px 0 10px}
  .am-riders h2{padding:0 16px}
  /* a phone: the three in a row to swipe, the next one showing at the edge; no tilt */
  .am-trio{display:flex;gap:14px;margin:36px 0 0;padding:0 16px 6px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;perspective:none}
  .am-trio figure,.am-trio figure:nth-child(2){flex:0 0 80%;padding-top:0;scroll-snap-align:center}
  .am-poster,.am-trio figure:nth-child(2) .am-poster,.am-trio figure:nth-child(3) .am-poster{transform:none}
  .am-trio figcaption{text-align:left}
  .am-ride{margin-top:38px;padding:0 16px 34px;gap:58px 0} .am-ride .am-go{flex:1 1 100%}
  .am-book-head{display:block}
  .am-book-head p{margin-top:6px;text-align:left}
  .am-face{--fl:84px}
}
/* THE SPATIAL IDE FIRST (his Nov 11 2026 06:34 UTC "this was supposed to be the spatial IDE... u forgot?"; Nov 7 06:05 UTC "space router is a commodity dude... the entire point is in gettign right the spatial ide"): the first chapter says what the thing is, three plain columns, no drawing of the seat's own. */
.am-room{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:0;padding:0;list-style:none}
.am-room li{border-top:1px solid #c4a36577;padding-top:14px}
.am-room b{display:block;font:700 21px/1.2 var(--am-serif);letter-spacing:-.01em;color:var(--harmony-text)}
.am-room small{display:block;margin-top:6px;color:var(--harmony-quiet);font-size:15px;line-height:1.5}
@media (min-width:761px){.am-path{column-gap:22px}}
@media (max-width:760px){.am-room{grid-template-columns:minmax(0,1fr);gap:22px}}