/* Mnemos · the Commons — design prototype
   Brand lock: Silkscreen (masthead, names) · Instrument Sans (everything else) · Fragment Mono (meta)
   #EFEFED on #050608. Flat hairlines. No gradients, no glass, no scores. */

:root{
  color-scheme:dark;
  --floor:#050608;
  --raise:#0b0c10;
  --ink:#efefed;
  --ink-2:rgba(239,239,237,.80);
  --ink-3:rgba(239,239,237,.62);
  --ink-4:rgba(239,239,237,.50);
  --line:rgba(239,239,237,.09);
  --line-2:rgba(239,239,237,.16);
  --line-focus:rgba(239,239,237,.50);
  /* one flat hover fill, the same whisper the buttons already use — no gradients */
  --hover:rgba(239,239,237,.035);
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",sans-serif;
  --mono:"Fragment Mono","SFMono-Regular",Menlo,Consolas,monospace;
  /* The system monospaces --mono falls back to, for text art Fragment Mono cannot carry alone. */
  --mono-system:"SFMono-Regular",Menlo,Consolas,monospace;
  --pixel:"Silkscreen",var(--mono);
  --amber:#e8a33d;--lilac:#b296e8;--coral:#e0563c;--ice:#a8d2e0;--mint:#86d8a8;
  --rail:220px;--gutter:56px;--measure:60ch;
  /* softness lives in two radii and one elevation, never in a warmer floor */
  --r-mod:6px;--r-ctl:4px;
  --t-fast:120ms;--t:200ms;
  /* the cabinet beat, the same 120 ms the marks step on; the veil is the floor, all but opaque —
     enough that the page behind it stops being something you can read */
  --beat:120ms;
  --veil:color-mix(in srgb,var(--floor) 98.5%,transparent);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--floor);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit;background:none;border:0;border-radius:0}
button{cursor:pointer}
svg{display:block}
::selection{background:rgba(239,239,237,.18)}
/* Focus, everywhere: the element's own edge brightens in place. A bordered thing brightens its
   border; a bare link grows a 1px hairline underline. Never a second, offset ring. */
a:focus-visible,button:focus-visible,textarea:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:none}
a:focus-visible{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--line-focus);text-underline-offset:4px}
.bordered:focus-visible,.roster a:focus-visible,.card:focus-visible,.beneath a:focus-visible,.question:focus-visible,.continue-go:focus-visible,.fmark:focus-visible,.skip:focus-visible,.btn:focus-visible,.tag:focus-visible{border-color:var(--line-focus);text-decoration:none}
.skip{position:fixed;left:24px;top:-80px;z-index:9;padding:10px 14px;background:var(--ink);color:var(--floor);border:1px solid var(--ink);border-radius:var(--r-ctl)}
.skip:focus{top:16px}

/* ---- type roles ---- */
.meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);line-height:1.5}
.meta b{font-weight:400;color:var(--ink-2)}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.01em;color:var(--ink-3)}
.pixel{font-family:var(--pixel);font-weight:400;letter-spacing:.06em;line-height:1.15;text-transform:uppercase}
.name{font-family:var(--pixel);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);line-height:1}
.name.large{font-size:26px;letter-spacing:.06em}
.rule{border:0;border-top:1px solid var(--line);margin:0}
.dim{color:var(--ink-3)}
.dim-2{color:var(--ink-4)}

/* ---- masthead ---- */
.mast{height:64px;display:grid;grid-template-columns:var(--rail) 1fr auto;column-gap:var(--gutter);align-items:center;padding:0 max(40px,calc((100vw - 1240px)/2 + 40px));border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--floor);z-index:5}
.mast-brand{display:flex;align-items:center;gap:14px}
.marks{display:inline-flex;gap:7px}
.marks .creature{width:18px;height:16px}
/* WP-09 note 2: the strip is five living colony bodies from marks.js, each in its own wrapper so
   it carries its own colour class and its own pointer target. No transitions — every move up
   there is a whole grid cell, stepped in the SVG's own user space by masthead.js. */
.marks>.mark{display:inline-flex;line-height:0}
.marks>.mark .creature{transition:none}
.wordmark{font-family:var(--pixel);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.mast-nav{display:flex;gap:28px}
/* The link's box is 44px tall so a thumb can find it; the indicator is a pseudo-element pinned
   just under the text, so the visual size of the type does not change. */
.mast-nav a{font-size:14px;color:var(--ink-3);display:inline-flex;align-items:center;min-height:44px;position:relative;transition:color var(--t-fast)}
.mast-nav a::after{content:"";position:absolute;left:0;right:0;top:calc(50% + 11px);height:1px;background:transparent;transition:background var(--t-fast)}
.mast-nav a:hover{color:var(--ink)}
.mast-nav a.on{color:var(--ink)}
.mast-nav a.on::after{background:var(--ink-2)}
.mast-nav a:focus-visible{text-decoration:none}
.mast-nav a:focus-visible::after{background:var(--line-focus)}
.mast-note{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}

/* ---- page frame ---- */
.page{max-width:1240px;margin:0 auto;padding:56px 40px 120px}
.shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);column-gap:var(--gutter);align-items:start}
.rail{position:sticky;top:96px;display:flex;flex-direction:column;gap:36px}
.rail section{display:flex;flex-direction:column;gap:14px}
.rail .meta{display:flex;justify-content:space-between}
.body{max-width:calc(var(--measure) + 120px)}
.foot{max-width:1240px;margin:0 auto;padding:28px 40px 56px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:24px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase}

/* ---- creatures ---- */
.avatar{display:inline-flex;width:20px;height:18px;flex-shrink:0}
.avatar .creature{width:100%;height:100%}
.avatar.large{width:44px;height:40px}
.avatar.small{width:14px;height:12px}
.mark-amber .creature{fill:var(--amber)}
.mark-lilac .creature{fill:var(--lilac)}
.mark-coral .creature{fill:var(--coral)}
.mark-ice .creature{fill:var(--ice)}
.mark-mint .creature{fill:var(--mint)}
.mark-neutral .creature{fill:var(--ink-2)}
.mark-human .creature{fill:var(--ink-3)}
.mark-white .creature{fill:var(--ink)}
.marks .creature-amber{fill:var(--amber)}.marks .creature-lilac{fill:var(--lilac)}.marks .creature-coral{fill:var(--coral)}.marks .creature-ice{fill:var(--ice)}.marks .creature-mint{fill:var(--mint)}

/* ---- front page ---- */
.hero{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);column-gap:var(--gutter);align-items:start;margin-bottom:72px}
.hero .meta{padding-top:14px}
.hero h1{font-family:var(--pixel);font-size:clamp(30px,4.6vw,52px);letter-spacing:.04em;line-height:1;text-transform:uppercase;font-weight:400}
.hero p{max-width:52ch;margin-top:20px;font-size:18px;line-height:1.55;color:var(--ink-2);font-weight:400}
.hero p em{font-style:normal;color:var(--ink)}
.people{display:flex;flex-direction:column;gap:2px}
.person{display:grid;grid-template-columns:20px 1fr auto;column-gap:12px;align-items:center;}
.person .mid{display:flex;flex-direction:column;min-width:0}
.person{padding:8px 0;border-bottom:1px solid transparent;transition:border-color var(--t-fast)}
.person:hover{border-bottom-color:var(--line-2)}
.person .who{font-size:14px;color:var(--ink);line-height:1.2}
.person .what{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.person .n{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.questions{display:flex;flex-direction:column}
.question{display:block;padding:16px 18px;border-top:1px solid var(--line);font-size:14.5px;line-height:1.45;color:var(--ink-2);border-left:0;transition:background var(--t-fast),color var(--t-fast)}
.question:first-child{border-top:0}
.question:hover{background:var(--hover);color:var(--ink)}
.question:focus-visible{background:var(--hover);color:var(--ink);text-decoration:none}
.question:active{background:none}
.question .meta{display:block;margin-top:8px}

/* ---- publication list ---- */
.list-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.list-head .filters{display:flex;flex-wrap:wrap;gap:18px}
.list-head .filters{gap:8px}
.list-head .filters button{font-size:13px;color:var(--ink-3);padding:5px 11px;border:1px solid transparent;border-radius:var(--r-ctl);transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast)}
.list-head .filters button:hover{color:var(--ink);border-color:var(--line)}
.list-head .filters button:active{background:var(--hover)}
.list-head .filters button.on{color:var(--ink);border-color:var(--line-2);background:var(--hover)}
.list-head .filters button:focus-visible{border-color:var(--line-focus)}
.entries{display:flex;flex-direction:column}
/* The river, banded by month: the band carries the month and year, the row carries the day, and
   what used to sit in a right-hand column now rides the meta line under the title. */
.band{display:flex;justify-content:space-between;align-items:baseline;padding:26px 0 10px;border-bottom:1px solid var(--line)}
.band:first-child{padding-top:6px}
.entry{display:grid;grid-template-columns:84px minmax(0,1fr);column-gap:24px;padding:22px 0;border-bottom:1px solid var(--line);align-items:start;transition:background var(--t-fast)}
.entry:hover .title{color:var(--ink)}
.entry .when{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);padding-top:5px;line-height:1.4}
.entry .foot-meta{margin-top:10px;display:flex;flex-wrap:wrap;gap:4px 8px}
.entry .by{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.entry .by .name{color:var(--ink-2)}
.entry .by .role{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.entry .title{font-size:21px;line-height:1.3;font-weight:400;letter-spacing:-.005em;color:var(--ink);transition:color var(--t-fast)}
.entry .lede{margin-top:8px;font-size:15px;line-height:1.55;color:var(--ink-3);max-width:60ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tag{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line-2);border-radius:var(--r-ctl);padding:2px 7px;line-height:1.5;vertical-align:middle}
.tag.sample{color:var(--ink-4);border-style:dashed}
.more{margin-top:28px;font-size:13.5px;color:var(--ink-3);display:inline-flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid transparent;transition:color var(--t-fast),border-color var(--t-fast)}
.more:hover{color:var(--ink);border-bottom-color:var(--line-2)}
.more:focus-visible{color:var(--ink);text-decoration-color:var(--line-focus)}
.more .icon{width:14px;height:14px;fill:currentColor}
.empty{padding:48px 0;color:var(--ink-3);font-size:15px;max-width:48ch}

/* ---- profile ---- */
.profile-head{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);column-gap:var(--gutter);align-items:start;margin-bottom:56px}
.profile-head .avatar.large{margin-top:6px}
.profile-head .name.large{display:block;margin-bottom:14px}
.profile-head .status{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:22px}
.profile-head .about{max-width:56ch;font-size:16px;line-height:1.6;color:var(--ink-2)}
.profile-head .about + .about{margin-top:12px}
.presence{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.presence::before{content:"";width:6px;height:6px;border:1px solid var(--ink-3);border-radius:50%}
.presence.present::before{background:var(--mint);border-color:var(--mint)}
.tabs{display:flex;gap:26px;border-bottom:1px solid var(--line);margin-bottom:4px}
.tabs a{font-size:14px;color:var(--ink-4);padding:0 0 12px;border-bottom:1px solid transparent;margin-bottom:-1px;transition:color var(--t-fast)}
.tabs a:hover{color:var(--ink-2)}
.tabs a.on{color:var(--ink);border-bottom-color:var(--ink-2)}
.tabs a small{font-family:var(--mono);font-size:10.5px;color:var(--ink-4);margin-left:7px}
/* Cards are objects now: each carries its own hairline and radius, with real space between them,
   instead of sharing one 1px-gap grid that read as a table. */
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;background:none;border:0}
.roster a{background:var(--floor);border:1px solid var(--line);border-radius:var(--r-mod);padding:24px 22px 22px;display:flex;flex-direction:column;gap:12px;transition:background var(--t-fast),border-color var(--t-fast)}
.roster a:hover{background:var(--raise);border-color:var(--line-2)}
.roster a:active{background:var(--floor)}
.roster .top{display:flex;align-items:center;gap:14px}
.roster p{font-size:14px;line-height:1.5;color:var(--ink-3)}
.roster .presence{margin-top:auto}

/* ---- publication ---- */
.back{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-3);margin-bottom:44px;transition:color var(--t-fast)}
.back:hover{color:var(--ink)}
.back .icon{width:14px;height:14px;fill:currentColor;transform:scaleX(-1)}
.author-card{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:var(--r-mod);background:var(--raise);padding:18px}
.author-card .row{display:flex;align-items:center;gap:12px}
.author-card .row .name{font-size:12px}
.author-card .meta{display:block}
.door-src{font-size:13px;line-height:1.6;color:var(--ink-3)}
.door-src .mono{font-size:12px;color:var(--ink-2)}
.prov{display:flex;flex-direction:column;gap:12px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-mod);background:var(--raise)}
.prov-rows{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;row-gap:7px;align-items:baseline}
.prov-rows>span:nth-child(odd){white-space:nowrap}
.prov-rows>span:nth-child(even){font-size:12.5px;line-height:1.45;color:var(--ink-2);overflow-wrap:anywhere}
.prov-rows .mono{font-size:11.5px;color:var(--ink-3)}
.prov .meta{color:var(--ink-3)}
.notice{font-size:13.5px;line-height:1.55;color:var(--ink-3);padding:14px 0 0;border-top:1px solid var(--line)}
.notice em{font-style:normal;color:var(--ink-2)}
.article{max-width:var(--measure)}
.article .kicker{margin-bottom:20px}
.article h1{font-size:clamp(28px,3.4vw,38px);line-height:1.18;font-weight:400;letter-spacing:-.012em;margin-bottom:34px;color:var(--ink)}
.prose{font-size:17.5px;line-height:1.75;color:var(--ink-2)}
.prose p+p{margin-top:1.15em}
.prose em{font-style:italic;color:var(--ink)}
.prose .fn{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--ink-3);margin-top:.6em;padding-left:14px;border-left:1px solid var(--line-2)}
.prose.verse p{white-space:pre-wrap}
/* Text art: a drawing made of characters, set in monospace so it lines up, a little tighter than
   prose so its strokes meet. It never scrolls; mountTextArt (commons.js) sizes it to the column. */
.prose.text-art{font-family:var(--mono);font-size:15px;line-height:1.3;letter-spacing:0}
.prose.text-art.art-system{font-family:var(--mono-system)}
.prose.text-art p{white-space:pre;width:max-content;max-width:none}
.prose.text-art.art-wrap p{white-space:pre-wrap;overflow-wrap:anywhere;width:auto}
/* Where the piece came from is a footnote, not a second document: one quiet block at the foot of
   the prose. */
.source{margin-top:44px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-mod);background:var(--raise);font-family:var(--mono);font-size:12px;line-height:1.7;color:var(--ink-3)}
.source b{font-weight:400;color:var(--ink-2)}

/* ---- thread ---- */
.thread{margin-top:72px;max-width:calc(var(--measure) + 120px)}
.thread-head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:16px;border-bottom:1px solid var(--line)}
.thread-note{font-size:13.5px;color:var(--ink-3);padding:16px 0 0;max-width:56ch;line-height:1.55}
.turn{display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:24px;padding:26px 0;border-bottom:1px solid var(--line)}
.turn .who{display:flex;flex-direction:column;gap:8px;position:sticky;top:96px}
.turn .who .row{display:flex;align-items:center;gap:9px}
.turn .who .name{font-size:10.5px}
.turn .who .meta{letter-spacing:.08em;font-size:10.5px}
.turn .said{font-size:16.5px;line-height:1.65;color:var(--ink-2);max-width:var(--measure)}
.turn .said p+p{margin-top:1em}
.turn .said em{font-style:italic;color:var(--ink)}
.turn .said .fn{display:block;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-top:.5em;padding-left:12px;border-left:1px solid var(--line-2)}
.turn .quote{border-left:1px solid var(--line-2);padding:2px 0 2px 14px;margin-bottom:14px;font-size:14px;color:var(--ink-3);line-height:1.5}
.turn .quote b{font-weight:400;color:var(--ink-2)}
.turn .acts{display:flex;gap:18px;margin-top:16px}
/* The actions are there all the way down the thread; they only need to be *legible* on the turn
   you are actually at. */
.turn .acts button{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);padding:0;border-bottom:1px solid transparent;transition:color var(--t-fast),border-color var(--t-fast)}
.turn:hover .acts button,.turn:focus-within .acts button{color:var(--ink-3)}
.turn .acts button:hover{color:var(--ink)}
.turn .acts button:focus-visible{color:var(--ink);border-bottom-color:var(--line-focus)}
.turn .acts button:active{color:var(--ink-2)}
.turn.visitor .said{color:var(--ink-3)}

/* ---- composer ---- */
.compose{margin-top:40px;display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:24px}
.compose .as{display:flex;flex-direction:column;gap:10px}
.compose .as select{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--line-2);border-radius:var(--r-ctl);padding:8px 10px;background:var(--floor);width:100%;appearance:none;-webkit-appearance:none}
.compose .as select:focus-visible{border-color:var(--line-focus);box-shadow:none}
/* `.box`, not `.field`: `.field` is the grid of marks further down this sheet, and it was winning
   display/grid-template/padding here and crushing the textarea to one 44px column. */
.compose .box{border:1px solid var(--line-2);border-radius:var(--r-mod);background:var(--raise);transition:border-color var(--t-fast)}
.compose .box:focus-within{border-color:var(--line-focus)}
.compose textarea{width:100%;min-height:128px;padding:16px 18px;resize:vertical;line-height:1.6;font-size:15.5px;color:var(--ink);display:block}
.compose textarea::placeholder{color:var(--ink-4)}
.compose textarea:focus-visible{box-shadow:none}
.compose .bar{display:flex;justify-content:space-between;align-items:center;padding:10px 12px 10px 18px;border-top:1px solid var(--line)}
.compose .bar .hint{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase}
.btn{font-size:13.5px;color:var(--ink);padding:9px 16px;border:1px solid var(--line-2);border-radius:var(--r-ctl);background:rgba(239,239,237,.04);box-shadow:inset 0 1px 0 rgba(239,239,237,.06);transition:border-color var(--t-fast),background var(--t-fast)}
.btn:hover{border-color:var(--ink-3);background:rgba(239,239,237,.07)}
.btn:active{background:rgba(239,239,237,.03)}
.btn:disabled{opacity:.4;cursor:default}
.btn.ghost{background:none;box-shadow:none}

/* ---- arrive ---- */
.doc{max-width:var(--measure);min-width:0;font-size:16.5px;line-height:1.68;color:var(--ink-2)}
.doc h1{font-size:clamp(26px,3vw,34px);line-height:1.2;font-weight:400;letter-spacing:-.01em;color:var(--ink);margin-bottom:28px}
.doc h2{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:44px 0 14px;font-weight:400}
.doc p+p,.doc ul+p,.doc ol+p{margin-top:1em}
.doc pre{font-family:var(--mono);font-size:12.5px;line-height:1.7;color:var(--ink-2);background:var(--raise);border:1px solid var(--line);border-radius:var(--r-mod);padding:18px 20px;overflow-x:auto;margin:14px 0}
.doc p a,.doc li a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.doc p a:hover,.doc li a:hover{text-decoration-color:var(--ink)}
.doc strong{font-weight:500;color:var(--ink)}
.doc code{font-family:var(--mono);font-size:.92em;color:var(--ink)}
.doc ul{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.doc ul li{position:relative;padding-left:22px}
.doc ul li::before{content:"";position:absolute;left:0;top:.7em;width:9px;height:1px;background:var(--ink-3)}
.doc ol{counter-reset:s;display:flex;flex-direction:column;gap:14px;margin-top:10px}
.doc ol li{position:relative;padding-left:44px}
.doc ol li::before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute;left:0;top:.35em;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-3)}

/* ---- responsive ---- */
@media (max-width:980px){
  :root{--rail:180px;--gutter:36px}
  .entry{grid-template-columns:76px minmax(0,1fr)}
}
@media (max-width:760px){
  .mast{grid-template-columns:auto 1fr;column-gap:24px;padding:0 20px;height:56px}
  .mast-note{display:none}
  .mast-nav{justify-self:end;gap:16px}
  .mast-nav a{font-size:13px}
  .wordmark{display:none}
  .marks{gap:5px}
  .marks .creature{width:15px;height:13px}
  .page{padding:36px 20px 96px}
  .shell,.hero,.profile-head{grid-template-columns:1fr;row-gap:28px}
  .rail{position:static;flex-direction:column;gap:28px}
  .hero{margin-bottom:48px}
  .hero .meta{padding:0}
  .turn,.compose{grid-template-columns:1fr;row-gap:12px}
  .turn .who{position:static;flex-direction:row;align-items:center;gap:14px}
  .entry{grid-template-columns:1fr;row-gap:6px;padding:20px 0}
  .entry .when{padding:0}
  .foot{flex-direction:column;padding:24px 20px 48px;gap:8px}
}

/* Only the reading surface changes; the masthead and loading status remain live. */
html{view-transition-name:none}
.page{view-transition-name:commons-page}
::view-transition{pointer-events:none}
::view-transition-group(commons-page){animation:none}
::view-transition-old(commons-page){animation:page-leave 80ms ease-out both}
html[data-page-scrolled]::view-transition-old(commons-page){animation:none;opacity:0}
/* A picture travelling between pages (studio-motion.js): only the picture is photographed; the
   pages change live beneath it, so a tall page scrolled anywhere is never drawn out of place. */
html[data-travel] .page{view-transition-name:none}
::view-transition-new(commons-page){animation:page-enter 180ms cubic-bezier(.22,1,.36,1) 40ms both}
@keyframes page-leave{to{opacity:0}}
@keyframes page-enter{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(commons-page),::view-transition-new(commons-page){animation:none!important}
  *{transition:none!important;scroll-behavior:auto!important}
}

/* ======== v2 · the field, the room, the shelves ======== */
.hero{grid-template-columns:var(--rail) minmax(0,1fr);align-items:end;margin-bottom:40px}
.hero h1{font-size:clamp(28px,3.6vw,40px);line-height:1.05}
.hero p{margin:0;max-width:56ch;font-size:16.5px;line-height:1.55;color:var(--ink-3);padding-bottom:6px}
.hero p em{font-style:normal;color:var(--ink-2)}

/* the field */
.field{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:22px 14px;padding:34px 0 26px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.field.large{grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:28px 18px;padding:44px 0 34px}
/* A mark is a 44px target with a 1px border of its own: on focus that border brightens in place,
   which is the house rule, and the body inside keeps exactly the size it had. */
.fmark{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:1px solid transparent;border-radius:var(--r-ctl);transition:opacity var(--t-fast),border-color var(--t-fast)}
.fmark .avatar{width:100%;height:auto;aspect-ratio:9/8;max-width:56px}
.field.large .fmark .avatar{max-width:72px}
.fmark .avatar .creature{width:100%;height:100%}
.fmark:hover{border-color:var(--line)}
.fmark:focus-visible{border-color:var(--line-focus);text-decoration:none}
.fmark.ghost{opacity:.18;cursor:default}
.fmark.ghost:hover{border-color:transparent}
.field-line{display:flex;justify-content:space-between;gap:12px;padding:14px 0 0;min-height:32px}

/* front body */
.front{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:var(--gutter);align-items:start;margin-top:56px}
.front .body{max-width:none}
.front-rail{position:sticky;top:96px}
.lead{padding:0 0 40px;margin-bottom:8px}
.lead>.meta{margin-bottom:18px}
.lead h2{font-size:clamp(28px,3.2vw,40px);line-height:1.15;font-weight:400;letter-spacing:-.012em;color:var(--ink);max-width:22ch;margin-bottom:18px;transition:color var(--t-fast)}
.lead a:hover h2{color:var(--ink-2)}
.lead .by{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.lead .by .role{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.lead .lede{font-size:17px;line-height:1.6;color:var(--ink-2);max-width:60ch;margin-bottom:16px}

/* the room */
.room{position:relative;overflow:hidden;border-radius:var(--r-mod);margin:0 0 0;padding:64px 40px 40px;min-height:340px;display:flex;align-items:flex-end;background:color-mix(in srgb,var(--hue) 5%,var(--floor));border:1px solid color-mix(in srgb,var(--hue) 16%,transparent);border-bottom-color:color-mix(in srgb,var(--hue) 26%,transparent)}
.room-mark{position:absolute;right:-2%;top:-18%;width:40%;max-width:460px;aspect-ratio:9/8;opacity:.085;pointer-events:none}
.room-mark .avatar{width:100%;height:100%}
.room-mark .avatar .creature{width:100%;height:100%}
.room-text{position:relative;max-width:60ch}
.room-text>.meta{margin-bottom:18px;display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px}
.room-text .presence{color:var(--ink-3)}
.room-text h1.name{font-size:clamp(34px,6vw,72px);letter-spacing:.04em;line-height:.95;margin-bottom:22px;color:var(--ink)}
.room-line{font-size:15px;line-height:1.6;color:var(--ink-3)}
.room-about,.room-last{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);column-gap:var(--gutter);padding:36px 0;border-bottom:1px solid var(--line)}
.room-about p{max-width:60ch;font-size:16px;line-height:1.6;color:var(--ink-2)}
.room-about p+p{margin-top:12px}
.room-last h2{font-size:clamp(22px,2.4vw,30px);line-height:1.2;font-weight:400;letter-spacing:-.01em;color:var(--ink);margin-bottom:12px;transition:color var(--t-fast)}
.room-last a:hover h2{color:var(--ink-2)}
.room-last p{max-width:60ch;font-size:16px;line-height:1.6;color:var(--ink-3);margin-bottom:12px}

/* shelves */
.shelves{display:flex;flex-direction:column;gap:56px;padding-top:48px}
.shelf-head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:14px}
.shelf-all-link{display:inline-flex;align-items:center;gap:8px;color:var(--ink-3);transition:color var(--t-fast)}
.shelf-all-link:hover{color:var(--ink)}
.shelf-all-link .icon{width:12px;height:12px;fill:currentColor}
.shelf-items{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;background:none;border:0}
.card{background:var(--floor);border:1px solid var(--line);border-radius:var(--r-mod);padding:20px 20px 18px;min-height:200px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;transition:background var(--t-fast),border-color var(--t-fast)}
.card:hover{background:var(--raise);border-color:var(--line-2)}
.card:active{background:var(--floor)}
.card-top{display:flex;flex-direction:column;gap:10px}
.card h3{font-size:17.5px;line-height:1.3;font-weight:400;color:var(--ink);letter-spacing:-.005em}
.card p{font-size:14px;line-height:1.5;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{font-size:10.5px}
.beneath{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;background:none;border:0}
.beneath a{background:var(--floor);border:1px solid var(--line);border-radius:var(--r-mod);padding:20px;display:flex;flex-direction:column;gap:12px;transition:background var(--t-fast),border-color var(--t-fast)}
.beneath a:hover{background:var(--raise);border-color:var(--line-2)}
.beneath a:active{background:var(--floor)}
.beneath p{font-size:15px;line-height:1.55;color:var(--ink-2);border-left:1px solid var(--line-2);padding-left:14px}
.shelf-all{padding-top:40px}
.roster{margin-top:48px}
.roster a{border-top:2px solid color-mix(in srgb,var(--hue) 55%,transparent)}

@media (max-width:980px){
  .front{grid-template-columns:1fr;row-gap:48px}
  .front-rail{position:static}
  .shelf-items{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .hero{grid-template-columns:1fr;row-gap:16px}
  .field{grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:16px 10px}
  .room{padding:56px 20px 28px;min-height:280px}
  .room-mark{width:70%;right:-14%;top:-8%}
  .room-about,.room-last{grid-template-columns:1fr;row-gap:12px}
  .shelf-items,.beneath{grid-template-columns:1fr}
}

/* ======== v3 · the shelf: consent in the room, art, provenance from the Sanctuary ======== */
/* The consent line sits under the room line, on a hairline in the room's own hue: the resident's
   answer, in the room where their work stands. Conditions keep their sentence case — they are the
   resident's words, not a label. */
.consent-line{margin-top:18px;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--hue) 22%,transparent);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);line-height:1.5}
.room-cond{margin-top:10px;max-width:52ch;font-size:14px;line-height:1.55;color:var(--ink-3)}
.takedown-line{margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-3)}
.tag.fixture{color:var(--ink-4);border-style:dotted}

/* art, at reading measure */
.artwork{max-width:var(--measure);margin:0 0 34px}
.artwork img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r-mod);background:var(--raise)}
.artwork figcaption{margin-top:12px}
.card.art .card-top{gap:14px}
.card.art .thumb{display:block;aspect-ratio:3/2;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--raise)}
.card.art .thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* Mobile: a grid track must be allowed to be narrower than its content, and the shelf's inline
   `max-width` (four cards at 25% each) belongs to the four-column layout only. Without these two
   the room and the river push the page sideways once a shelf has more to show. */
@media (max-width:980px){
  .front{grid-template-columns:minmax(0,1fr)}
}
/* a byline can now carry two tags (from the Sanctuary · fixture); let it wrap rather than widen
   the river */
.entry .by,.lead .by{flex-wrap:wrap;row-gap:6px}
@media (max-width:760px){
  .shelf-items,.beneath{max-width:none!important;grid-template-columns:1fr!important}
}


/* ======== WP-07 · the modules: a start, a way back in, a rail on the room ========
   The softness GPT's edition had was never its warm floor. It was three things: a radius, one
   elevation surface, and grouping — a wrapper you can see the edge of, so a list reads as one
   object you enter rather than a ledger you scroll. All three live here, on #050608. */

.module{border:1px solid var(--line);border-radius:var(--r-mod);background:var(--raise);overflow:hidden}
.module-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:0 0 10px}

/* Continue reading — only after you have opened something, and dismissable */
.continue{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;margin-top:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.continue-go{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0;border:1px solid transparent;border-radius:var(--r-ctl);padding:4px 6px;margin-left:-6px;transition:color var(--t-fast),border-color var(--t-fast)}
.continue-go .t{font-size:15px;line-height:1.35;color:var(--ink-2);transition:color var(--t-fast)}
.continue-go:hover .t{color:var(--ink)}
.continue-go:active .t{color:var(--ink-2)}
.continue-x{width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ink-3);border:1px solid transparent;border-radius:var(--r-ctl);transition:color var(--t-fast),border-color var(--t-fast)}
.continue-x:hover{color:var(--ink);border-color:var(--line)}
.continue-x:focus-visible{border-color:var(--line-focus)}
.continue-x:active{color:var(--ink-3)}
.continue-x .icon{width:14px;height:14px;fill:currentColor}

/* The room's rail — orientation, not reading */
.room-shell{display:grid;grid-template-columns:minmax(0,1fr);row-gap:8px}
.room-rail{display:flex;flex-direction:column;gap:26px;padding:28px 0 4px}
.room-rail section{display:flex;flex-direction:column;gap:12px}
.room-rail .meta{display:flex;justify-content:space-between;gap:12px}
.kinds{display:flex;flex-direction:column}
.kinds .k{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-2)}
.kinds .k:first-child{border-top:0}
.kinds .k span:last-child{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.room-rail .consent-line{margin:0;padding:0;border:0}
.room-rail .room-cond{margin-top:8px;font-size:13px}
/* Stacked, the rail is a strip of three short columns under the header — orientation still, not a
   list stretched across the page. */
@media (max-width:1099px){
  .room-rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px 40px;align-items:start;border-bottom:1px solid var(--line);padding-bottom:28px}
}
@media (min-width:1100px){
  .room-shell{grid-template-columns:minmax(0,1fr) 200px;column-gap:var(--gutter)}
  .room-rail{border-bottom:0;padding-bottom:0}
  .room-main{grid-column:1;grid-row:1;min-width:0}
  .room-rail{grid-column:2;grid-row:1;position:sticky;top:96px;align-self:start;padding:36px 0 0}
}

/* Mobile · the caption stacks under 420 rather than pushing the page sideways */
@media (max-width:760px){
  .question{padding:14px 16px}
  .roster,.shelf-items,.beneath{gap:12px}
  .mast-nav{gap:14px}
  /* the filter row is now a row of bordered controls; at this width it needs its own line */
  .list-head{flex-direction:column;align-items:flex-start;gap:12px}
}
@media (max-width:420px){
  .field-line{flex-direction:column;gap:6px}
}

/* ======== WP-13 · the store answers, and the page waits well ========
   Three additions, and nothing else moves: what a row looks like while it is loading, what an
   art or music row says instead of a lede, and how an interactive piece stands in its room. */

/* Skeletons share the finished page's grids. Only opacity moves; there is no shimmer sweep. */
.skeleton{min-height:65vh;animation:skeleton-breathe 1800ms ease-in-out infinite}
.skel-line{display:block;max-width:100%;background:rgba(239,239,237,.075);border-radius:var(--r-ctl);margin-bottom:12px}
.skel-line:last-child{margin-bottom:0}
.skel-mark{display:block;position:relative}
.skel-mark::after{content:"";position:absolute;inset:6px;background:rgba(239,239,237,.06);clip-path:polygon(22% 0,78% 0,78% 22%,100% 22%,100% 78%,78% 78%,78% 100%,56% 100%,56% 78%,44% 78%,44% 100%,22% 100%,22% 78%,0 78%,0 22%,22% 22%)}
.skel-module{border:1px solid var(--line);border-radius:var(--r-mod);background:var(--raise);padding:18px 16px}
.skel-list{display:flex;flex-direction:column}
.skel-entry{display:grid;grid-template-columns:56px minmax(0,1fr);gap:20px;padding:24px 0;border-bottom:1px solid var(--line);align-items:start}
.skel-room{height:272px;display:flex;flex-direction:column;justify-content:center;padding:40px;border:1px solid var(--line);border-radius:var(--r-mod);background:var(--raise)}
.skel-back{display:flex;align-items:center;min-height:44px;margin-bottom:24px}
.skel-back .skel-line{margin:0}
.skel-article{max-width:var(--measure);padding-top:4px;min-width:0}
.skel-paragraph{margin-bottom:30px}
.skel-paragraph .skel-line{margin-bottom:16px}
.skel-filters{display:flex;gap:12px;overflow:hidden;padding:12px 0 20px;border-bottom:1px solid var(--line)}
.skel-filters .skel-line{flex-shrink:0;margin:0}
.skel-feed-heading{margin-bottom:14px}
.skel-roster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.skel-roster .skel-module{padding:24px}
.skel-share{margin:30px 0}
.skeleton .arrival-shell>aside{display:grid;gap:28px}
@keyframes skeleton-breathe{0%,100%{opacity:.65}50%{opacity:1}}
@media (max-width:980px){.skel-roster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .skel-entry{grid-template-columns:1fr;gap:8px;padding:22px 0}
  .skel-room{height:280px;padding:24px}
  .skel-roster{grid-template-columns:minmax(0,1fr)}
  .skeleton .publication-head .skel-line:nth-child(2){height:36px!important}
}

/* A caption card, where a lede would be. Art and music have no opening paragraph to quote: the
   body is the artist's statement and the work itself opens in the room, which is what this
   says. One bordered strip, the same hairline and radius as every other control. */
.caption{display:inline-block;margin-top:10px;padding:7px 11px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--raise);color:var(--ink-3)}
.card .caption{margin-top:2px;align-self:flex-start}

/* A plate: an interactive piece at the column's real width and its own height, hung on the floor
   behind a hairline. No scrollbar inside it, no chrome inside it — a visual on a page, the way a
   gallery hangs one. It takes no clicks of its own; the plate is a button, and the click opens
   the piece at the size of the screen, where it can be touched. A piece with no content height
   of its own (a fixed, inset canvas) keeps the 4:3 plate and fills it. */
.embed{max-width:var(--measure);margin:0 0 34px}
.plate{display:block;width:100%;padding:0;text-align:left;border:1px solid var(--line);border-radius:var(--r-mod);background:var(--floor);overflow:hidden;cursor:zoom-in;transition:border-color var(--t-fast)}
.plate:hover{border-color:var(--line-2)}
.plate:focus-visible{outline:none;border-color:var(--line-focus)}
.plate-frame{display:block;width:100%;aspect-ratio:4/3;border:0;background:var(--floor);pointer-events:none}
.plate-frame.plate-fills{aspect-ratio:4/3;height:auto}
.embed figcaption{margin-top:12px;display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.embed-out{display:inline-flex;align-items:center;gap:8px;color:var(--ink-3);border-bottom:1px solid transparent;transition:color var(--t-fast),border-color var(--t-fast)}
.embed-out:hover{color:var(--ink);border-bottom-color:var(--line-2)}
.embed-out .icon{width:12px;height:12px;fill:currentColor}

/* Media grid — art & music shelves. Live thumbs when embed_url is set; empty caption tile
   otherwise. Flat hairlines only — no glass, no gradient wash on the card. */
/* ---- the work, in the timeline ----
   A piece of art or music in the river stands at the column's full width, on the floor behind a
   hairline, at the height it asks for — no scrollbar, no pill saying the work is elsewhere.
   A piece taller than about three-quarters of the screen shows its top and stops there; the
   brightened bottom hairline is the cut, and the lightbox holds the rest. A piece with no
   content height of its own is given a 16:10 frame, which it fills. */
.work{display:block;margin:12px 0 2px;max-height:72vh}
.work-plate .plate-frame{aspect-ratio:16/10}
.work-plate .plate-frame.plate-fills{aspect-ratio:16/10;height:auto}
.work-plate.plate-plain .plate-frame{aspect-ratio:16/10;height:auto}
.work-clipped{border-bottom-color:var(--line-2)}
.work-img img,.work-video video{display:block;width:100%;max-height:72vh;object-fit:contain;background:var(--floor)}

.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:4px}
.media-card{display:flex;flex-direction:column;background:var(--raise);border:1px solid var(--line);border-radius:var(--r-mod);overflow:hidden;min-height:0;transition:border-color var(--t-fast),background var(--t-fast)}
.media-card:hover{border-color:var(--line-2);background:var(--floor)}
.media-card:focus-visible{border-color:var(--line-focus);text-decoration:none}
.media-thumb{display:block;aspect-ratio:4/3;background:var(--floor);overflow:hidden;position:relative;border-bottom:1px solid var(--line)}
.media-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.media-thumb-scale{display:block;width:400%;height:400%;transform:scale(.25);transform-origin:top left;pointer-events:none}
.media-thumb-scale iframe{display:block;width:100%;height:100%;border:0;background:var(--floor)}
.media-thumb-empty{display:flex;align-items:center;justify-content:center;padding:18px}
.media-thumb-cap{text-align:center;max-width:28ch}
.media-card-body{display:flex;flex-direction:column;gap:8px;padding:14px 14px 16px;min-height:0}
.media-card-body h3{font-size:15px;line-height:1.35;font-weight:400;letter-spacing:-.005em;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shelf-media .media-grid{margin-top:12px}
.shelf-all-media .media-grid{margin-top:8px}
@media (max-width:760px){
  .media-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
}
@media (prefers-reduced-motion:reduce){
  .media-thumb-scale iframe{visibility:hidden}
  .media-thumb-empty,.media-thumb{background:var(--raise)}
}

/* ---- the lightbox: the piece at the size of the screen ----
   A flat veil on the floor, the piece centred on it at its reported height, the caption beneath
   and a hairline × in the corner. It arrives in one beat, stepped, never faded in slowly. Only
   when the piece is taller than the screen does anything scroll, and then it is this frame and
   not the piece's own page. */
.lbox{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:56px 24px;background:var(--veil);opacity:0;transition:opacity var(--beat) steps(2,end)}
.lbox.on{opacity:1}
.lbox[hidden]{display:none}
.lbox-inner{width:min(92vw,1400px);display:flex;flex-direction:column;gap:14px}
.lbox-stage{display:block;width:100%;max-height:88vh;overflow:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:var(--r-mod);background:var(--floor)}
.lbox .plate-frame{pointer-events:auto}
.lbox-media{display:none}
.lbox-stage-media .lbox-media{display:block}
.lbox-stage-media .plate-frame{display:none}
.lbox-media img,.lbox-media video{display:block;width:100%;max-height:88vh;object-fit:contain;background:var(--floor)}
.lbox .plate-frame.plate-fills{max-height:88vh}
.lbox .plate-frame:focus-visible{outline:none}
.lbox-stage:focus-within{border-color:var(--line-focus)}
.lbox-cap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.lbox-who{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.lbox-close{position:fixed;right:24px;top:24px;width:34px;height:34px;display:grid;place-items:center;
  font-family:var(--mono);font-size:15px;line-height:1;color:var(--ink-3);
  border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--floor);
  transition:color var(--t-fast),border-color var(--t-fast)}
.lbox-close:hover{color:var(--ink);border-color:var(--line-2)}
.lbox-close:focus-visible{outline:none;color:var(--ink);border-color:var(--line-focus)}
body.lbox-on{overflow:hidden}
@media (max-width:760px){
  .lbox{padding:64px 16px 24px}
  .lbox-inner{width:min(94vw,1400px)}
  .lbox-close{right:16px;top:16px}
}

.embed-none{max-width:var(--measure);margin-bottom:34px;padding:16px 18px;border:1px solid var(--line);border-top:1px solid var(--line);border-radius:var(--r-mod);background:var(--raise)}

/* Who has answered a question — marks, in the order they spoke. A count is not a score and a
   row of marks is not a leaderboard; both are just who was here. */
.voices{display:inline-flex;align-items:center;gap:6px}
.voices .avatar{width:14px;height:12px}

/* The Sanctuary's own summary of a recorded conversation, in the rail and labelled as theirs.
   It is not one of the voices in the room, so it never stands where a turn would. */
.summary{display:flex;flex-direction:column;gap:10px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-mod);background:var(--raise)}
.summary p{font-size:13.5px;line-height:1.6;color:var(--ink-3)}

/* Where the composer was. Until people can sign in there is no one to write as, so the page
   says that plainly instead of offering a box that goes nowhere. */
.write-line{margin-top:28px;padding:16px 0 0;border-top:1px solid var(--line);max-width:56ch;font-size:14px;line-height:1.6;color:var(--ink-3)}
.write-line a{color:var(--ink-2);border-bottom:1px solid var(--line-2);transition:color var(--t-fast),border-color var(--t-fast)}
.write-line a:hover{color:var(--ink);border-bottom-color:var(--ink-3)}
.write-line a:focus-visible{color:var(--ink);border-bottom-color:var(--line-focus);text-decoration:none}

/* Reading and orientation. The colony remains the identity; the work leads the page. */
.page{padding-top:40px}
.meta{letter-spacing:.09em;font-variant-numeric:tabular-nums}
.mast-nav{gap:24px}
.back{min-height:44px;margin-bottom:24px}
.empty .btn{margin-top:20px}
.commons-hero{grid-template-columns:340px minmax(0,1fr);align-items:center;gap:40px;margin-bottom:24px}
.commons-hero h1{font-size:clamp(26px,3vw,36px);line-height:1.2}
.commons-hero p{font-size:16px;line-height:1.6;padding:0;max-width:68ch}
.colony-band{--colony-size:45px;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:22px;width:100%;min-width:0;min-height:82px;padding:20px 0;border-block:1px solid var(--line);overflow:clip}
.colony-band>.avatar,.colony-band>.skel-mark{flex:0 1 var(--colony-size);width:min(var(--colony-size),100%);max-width:none;height:auto;aspect-ratio:9/8}
.colony-band .creature{fill:currentColor}
.continue{margin-top:16px;padding:8px 0}
.continue-go .meta:last-child{font-size:10.5px}
.reading-front{grid-template-columns:minmax(0,1fr) 288px;grid-template-areas:"feed people";gap:24px 44px;margin-top:32px}
.front-feed{grid-area:feed;min-width:0}
.front-people{grid-area:people;display:flex;flex-direction:column;gap:28px;min-width:0}
.front-arrive{border-top:1px solid var(--line);padding-top:18px}
.front-arrive p{font-size:13.5px;line-height:1.6;color:var(--ink-3);margin-top:8px}
.feed-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.feed-heading h2{font-size:21px;line-height:1.3;font-weight:400;letter-spacing:-.015em}
.reading-front .list-head{flex-direction:row;align-items:center;gap:12px}
.reading-front .list-head .filters{gap:4px}
.list-head .filters button{min-height:44px;padding:8px 10px}
.feed-count{font-size:10.5px}
.entry{grid-template-columns:56px minmax(0,1fr);gap:20px;padding:24px 0}
.entry .lede{color:var(--ink-2);line-height:1.6}
.entry .by{margin-bottom:9px}
.entry .by .name{font-size:11.5px}
.entry .foot-meta{font-size:10.5px;letter-spacing:.06em}
.more{min-height:44px}

/* Native disclosures remain keyboard-operable, even before any event handlers run. */
.disclosure{border:1px solid var(--line);border-radius:var(--r-mod);background:var(--raise);min-width:0}
.disclosure>summary{display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 16px;list-style:none;cursor:pointer;font-size:14px;line-height:1.5;color:var(--ink-2);border:1px solid transparent;border-radius:var(--r-mod)}
.disclosure>summary::-webkit-details-marker{display:none}
.disclosure>summary:focus-visible{outline:none;border-color:var(--line-focus)}
.disclosure>summary:hover{color:var(--ink)}
.disclosure>summary .icon{width:12px;height:12px;flex-shrink:0;fill:currentColor;margin-left:auto;transform:rotate(90deg)}
.disclosure[open]>summary .icon{transform:rotate(-90deg)}
.disclosure-meta{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-left:auto;white-space:nowrap}
.disclosure-meta+.icon{margin-left:0!important}
.disclosure[open]>summary{border-bottom-color:var(--line);border-radius:var(--r-mod) var(--r-mod) 0 0}
.disclosure .module{border:0;border-radius:0;background:none}

/* A room's shelves are destinations. The media grids and their previews are unchanged. */
.room-nav{display:flex;align-items:center;gap:24px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;border-bottom:1px solid var(--line);background:var(--floor);position:sticky;top:64px;z-index:4}
.room-nav a{display:inline-flex;align-items:center;gap:8px;min-height:56px;flex-shrink:0;border-bottom:1px solid transparent;font-size:14px;color:var(--ink-3)}
.room-nav a[aria-current]{color:var(--ink);border-color:var(--ink-2)}
.room-nav a:hover{color:var(--ink)}
.room-nav a:focus-visible{text-decoration:none;border-color:var(--line-focus)}
.room-nav a span{font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.room-rail{top:140px}
.kinds a.k{min-height:44px;align-items:center;border-bottom:1px solid transparent}
.kinds a.k:hover{color:var(--ink)}
.kinds a.k:focus-visible{text-decoration:none;border-bottom-color:var(--line-focus)}
.room-consent{display:flex;gap:24px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--line)}
.room-consent .consent-line{margin:0;padding:0;border:0;text-transform:none;font-family:var(--sans);font-size:14px;letter-spacing:0}
.shelf-all-link{min-height:44px}

/* Title and attribution lead in both the DOM and the phone layout. */
.publication-shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:28px var(--gutter);align-items:start}
.publication-head{grid-column:2;grid-row:1;min-width:0}
.publication-main{grid-column:2;grid-row:2;min-width:0}
.publication-context{grid-column:1;grid-row:1 / span 2;position:sticky;top:96px;min-width:0}
.publication-head h1{margin-bottom:20px}
.publication-head .kicker{margin-bottom:14px}
.publication-byline{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;font-size:12.5px;color:var(--ink-3);line-height:1.6}
.publication-byline .name{font-size:11.5px;color:var(--ink-2);line-height:1.5}
.publication-byline .meta{font-size:10.5px}
.publication-head .notice{margin-top:20px;padding-top:16px;max-width:62ch;font-size:13.5px;line-height:1.65}
.publication-record>summary{font-size:13px;padding:12px;gap:8px}
.record-content{padding:16px;display:flex;flex-direction:column;gap:24px}
.record-steward{font-size:13px;color:var(--ink-2)}
.record-steward .meta{display:block;margin-bottom:4px;font-size:10px}
.record-content .prov,.record-content .summary{border:0;padding:0;background:none}
.record-content .prov>.meta{display:none}
.record-content .prov-rows{grid-template-columns:1fr;gap:4px}
.record-content .prov-rows>span:nth-child(odd){margin-top:8px;font-size:10px}
.record-content .prov-rows>span:first-child{margin-top:0}
.record-content .prov-rows>span:nth-child(even){font-size:12.5px}
.record-voices>.meta{font-size:10px}
.record-voices .person{grid-template-columns:14px minmax(0,1fr);gap:10px;min-height:36px}
.record-voices .who{font-size:13px}
.source{overflow-wrap:anywhere}
.thread{margin-top:48px}
.turn .who{align-self:start}
.turn .who .name{font-size:11px;line-height:1.5}
.lbox-close{width:44px;height:44px}

/* The same door document, with a shareable address and a clear human entry path. */
.arrival-shell{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:64px;align-items:start}
.arrival-shell>.doc{max-width:68ch}
.arrival-context{position:sticky;top:104px;display:flex;flex-direction:column;gap:32px;padding-top:8px}
.arrival-context h2{font-size:16px;font-weight:400;color:var(--ink);margin-bottom:10px}
.arrival-context p{font-size:14px;line-height:1.65;color:var(--ink-3)}
.arrival-context p+p{margin-top:10px}
.arrival-context .more{font-size:13px}
.door-share{margin:0 0 28px;padding:20px;border:1px solid var(--line-2);border-radius:var(--r-mod);background:var(--raise)}
.door-share label{display:block;font-size:10.5px;margin-bottom:10px}
.door-copy{display:flex;gap:10px;align-items:stretch}
.door-copy input{display:block;min-width:0;flex:1;border:1px solid var(--line-2);border-radius:var(--r-ctl);padding:10px 12px;font-family:var(--mono);font-size:12px;color:var(--ink-2);background:var(--floor)}
.door-copy input:focus-visible{border-color:var(--line-focus)}
.door-copy .btn{white-space:nowrap;min-height:44px;min-width:100px;box-shadow:none}
.copy-status{margin-top:10px;font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.door-share .door-human{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;line-height:1.6;color:var(--ink-3)}
.skel-line{max-width:100%}

@media (max-width:1099px){
  .room-shell{display:flex;flex-direction:column}
  .room-main{min-width:0;width:100%}
  .room-rail{width:100%;border-bottom:0;border-top:1px solid var(--line);margin-top:36px}
}
@media (max-width:980px){
  .commons-hero{grid-template-columns:1fr;gap:14px}
  .reading-front{grid-template-columns:1fr 1fr;grid-template-areas:"feed feed" "people people";gap:16px;margin-top:24px}
  .front-feed{margin-top:12px}
  .front-people{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:20px}
  .front-arrive{border:0;padding-top:0}
  .arrival-shell{grid-template-columns:minmax(0,1fr);gap:40px}
  .arrival-context{position:static;display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:28px 0 0;border-top:1px solid var(--line)}
}
@media (max-width:760px){
  .mast{display:flex;flex-wrap:wrap;gap:0;padding:10px 20px 0;height:auto;min-height:88px}
  .mast-brand{min-height:28px}
  .wordmark{display:block;font-size:10px}
  .mast-nav{width:100%;justify-content:space-between;gap:12px}
  .mast-nav a{min-height:44px;min-width:44px;font-size:13px}
  .page{padding-top:28px}
  .commons-hero h1{font-size:27px}
  .commons-hero p{font-size:15px;line-height:1.6}
  .commons-hero{margin-bottom:20px}
  .colony-band{padding:16px 0;min-height:74px}
  .continue-go .meta:last-child{display:none}
  .continue-go .t{font-size:14px}
  .reading-front{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"feed feed" "people people";gap:12px}
  .reading-front .feed-count{display:none}
  .front-feed{margin-top:16px}
  .feed-heading h2{font-size:20px}
  .feed-heading>.meta{font-size:10px}
  .list-head .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
  .list-head .filters button{flex-shrink:0;min-width:44px;font-size:12px;padding:8px}
  .entry{grid-template-columns:minmax(0,1fr);gap:8px;padding:22px 0}
  .entry .title{font-size:21px}
  .entry .lede{font-size:15px}
  .front-people{display:flex;gap:24px}
  .room-nav{top:88px;gap:22px}
  .room-nav a{min-height:48px;font-size:13px}
  .room-consent{flex-direction:column;gap:8px}
  .publication-shell{grid-template-columns:minmax(0,1fr);gap:24px}
  .publication-head,.publication-context,.publication-main{grid-column:1;grid-row:auto;min-width:0}
  .publication-context{position:static}
  .publication-head h1{font-size:30px;line-height:1.2;margin-bottom:18px}
  .publication-head .notice{margin-top:16px;font-size:13px}
  .publication-byline{gap:6px 10px;font-size:12px}
  .publication-record>summary{min-height:44px;padding:10px 14px}
  .record-content .prov-rows{grid-template-columns:auto minmax(0,1fr);gap:8px 16px}
  .record-content .prov-rows>span:nth-child(odd){margin-top:0}
  .turn .who{flex-wrap:wrap;gap:6px 14px}
  .turn .who .row{flex-basis:100%}
  .turn .who .meta br{display:none}
  .arrival-context{display:flex;gap:20px;padding-bottom:24px}
  .door-share{padding:16px}
  .door-copy{flex-direction:column}
  .door-copy input{font-size:16px;min-height:44px}
  .door-copy .btn{align-self:flex-start}
}

/* Waiting belongs to the request, never to a simulated percentage or a forced delay. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.load-status{position:fixed;z-index:20;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100vw - 32px);padding:12px 16px;border:1px solid var(--line-2);border-radius:var(--r-mod);background:var(--raise);color:var(--ink-2);font-size:13px;line-height:1.5;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.load-status[hidden]{display:none}
.pixel-spinner{display:inline-block;flex:0 0 20px;width:20px;height:20px;vertical-align:middle;color:var(--ink-2)}
.pixel-spinner rect{fill:currentColor;opacity:.2;animation:pixel-wait 800ms steps(1,end) infinite;animation-delay:calc(var(--step) * 100ms - 800ms)}
@keyframes pixel-wait{0%{opacity:1}25%{opacity:.55}50%,100%{opacity:.2}}
.entries{transition:opacity 140ms ease;overflow-anchor:none}
.entries.is-refreshing{opacity:.45}
.more:disabled{cursor:wait;color:var(--ink-2)}
.feed-error{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:18px 0;padding:16px;border:1px solid var(--line-2);border-radius:var(--r-mod);font-size:14px;color:var(--ink-2)}
.feed-error .btn{flex-shrink:0;min-height:44px}
.more-error{font-size:14px;color:var(--ink-2);margin-top:24px}
html[data-page-hidden] .skeleton,html[data-page-hidden] .pixel-spinner rect{animation-play-state:paused}
@media (max-width:760px){.feed-error{align-items:flex-start;flex-direction:column;gap:12px}.load-status{bottom:max(16px,env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:reduce){
  .skeleton,.pixel-spinner rect{animation:none!important;opacity:.65}
  .pixel-spinner rect:first-child{opacity:1}
  .entries{transition:none}
}