/* Bold layer. Art leads, color follows the selected original, chapters stack,
   the protocol becomes a dark control room. Loaded last; scoped to .society-bold. */
#website.society-bold{--muted:#4c4a47;--night:#12100d;--night-line:#34322f;--night-text:#f4f2ef;--night-muted:#b1afac}
#website.society-bold .fine-print{font-size:13px}

/* ---------- A. Hero: one motif ---------- */
/* The hero is the canvas' containing block; without this the star is placed relative to the page top. */
#website.society-bold .hero{position:relative;z-index:4}
/* At the top of the page the masthead is transparent, so particles are never hidden behind a paper band. */
#website.society-bold>header:not(.is-stuck){background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
/* The signal canvas spans the hero behind the text, so particles are never cut by a box. */
#website.society-bold .hero .signal-canvas{position:absolute;left:0;right:0;top:-140px;width:100%;height:auto;z-index:0;pointer-events:none;border-radius:0;cursor:auto}
#website.society-bold .hero>.intro{position:relative;z-index:2}#website.society-bold .hero .signal-controls{z-index:2}
#website.society-bold .hero .signal-stage{cursor:crosshair}
#website.society-bold .hero{padding-bottom:clamp(18px,2vw,34px)}
#website.society-bold .species-enlarge{display:none}

/* ---------- B. Collection takes the color of the chosen original ---------- */
#website.society-bold #collection.species-discovery{--stage:#eae8e5;--on:#14120f;position:relative;isolation:isolate;overflow:clip;background:var(--stage);color:var(--on);transition:background-color .8s var(--ease),color .5s}
#website.society-bold #collection.is-dark{--on:#f6f5ef}
.species-backdrop{position:absolute;z-index:-1;left:1.6vw;bottom:clamp(14px,1.4vw,26px);font:900 clamp(170px,31vw,500px)/.8 var(--display);letter-spacing:.01em;text-transform:uppercase;white-space:nowrap;color:color-mix(in srgb,var(--stage) 84%,var(--on));transition:color .8s var(--ease);pointer-events:none;user-select:none}
#website.society-bold #collection :is(.species-counter){border-color:color-mix(in srgb,var(--on) 35%,transparent)}
#website.society-bold #collection :is(.species-identity p,.species-caption){color:color-mix(in srgb,var(--on) 78%,transparent)}
#website.society-bold #collection .species-identity p>b{color:var(--on)}
#website.society-bold #collection .species-identity p>span{border-color:color-mix(in srgb,var(--on) 35%,transparent)}
#website.society-bold #collection .species-contact-sheet button{color:var(--on)}
#website.society-bold #collection .species-contact-sheet button[aria-pressed=true]{background:var(--on);color:var(--stage)}
#website.society-bold #collection .species-contact-sheet button[aria-pressed=true] img{border-color:var(--on)}
#website.society-bold #collection .species-contact-sheet img{box-shadow:0 8px 14px -10px #14120f99}
#website.society-bold #collection .species-actions button{color:var(--on);border-color:color-mix(in srgb,var(--on) 45%,transparent)}
#website.society-bold #collection .species-actions button:hover{background:var(--on);color:var(--stage);border-color:var(--on)}
#website.society-bold #collection .species-stack-note{background:var(--on);color:var(--stage);transition:background-color .8s,color .8s}
#website.society-bold #collection .species-portrait{box-shadow:0 30px 40px -20px #14120f99}
#website.society-bold #collection .species-identity h3{font-size:clamp(72px,9vw,132px)}

/* ---------- C. Chapters: numbered, static ---------- */
#website.society-bold #portfolio-guide{background:var(--paper)}
#website.society-bold .chapter{position:relative;isolation:isolate}
.chapter-mark{position:absolute;top:calc(var(--section-y)*.38);left:var(--gutter);display:flex;gap:14px;margin:0;font:500 12px/1 var(--mono)!important;letter-spacing:.1em;text-transform:uppercase}
.chapter-mark span{opacity:.6}
.chapter-number{position:absolute;z-index:-1;top:calc(var(--section-y)*.2);right:calc(var(--gutter) - .04em);font:900 clamp(150px,19vw,300px)/.8 var(--display);color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,currentColor 16%,transparent);pointer-events:none;user-select:none}

/* ---------- D. Protocol control room ---------- */
#website.society-bold #fees-guide.control-room{grid-template-columns:minmax(0,.85fr) minmax(0,2.15fr);gap:0 6%;align-items:start;background:var(--night);color:var(--night-text)}
.control-room .fee-heading{position:sticky;top:110px}
.control-room .fee-heading h2{color:var(--night-text)}
#website.society-bold .control-room .fee-heading>p{color:var(--night-muted)}
#website.society-bold .control-room .protocol-reading{grid-column:auto;min-width:0}
.control-tabs{display:grid;margin:34px 0 0;border-top:1px solid var(--night-line)}
.control-tabs button{display:flex;align-items:center;gap:14px;min-height:54px;padding:14px 16px;border:0;border-bottom:1px solid var(--night-line);background:transparent;color:var(--night-text);font-size:15px;text-align:left;transition:background .25s,color .25s}
.control-tabs button span{font:500 11px/1 var(--mono);letter-spacing:.08em;opacity:.55}
.control-tabs button svg{margin-left:auto;opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .35s var(--ease)}
.control-tabs button:hover{background:#201e1b}
.control-tabs button[aria-selected=true]{background:var(--lemon);color:#14120f;font-weight:700}
.control-tabs button[aria-selected=true] span{opacity:.8}
.control-tabs button[aria-selected=true] svg{opacity:1;transform:none}
.control-panels{min-height:560px}
.control-panel{outline-offset:8px}
#website.society-bold .control-panel>h3,#website.society-bold .control-room .reserve-guide>h3{font:900 clamp(34px,3.4vw,50px)/.95 var(--display);text-transform:uppercase;letter-spacing:-.015em;margin:0 0 22px;color:var(--night-text)}
#website.society-bold .control-room .reserve-guide{border:0;padding:0}
#website.society-bold .control-room p{color:var(--night-muted)}
#website.society-bold .control-room .fine-print{color:var(--night-muted)}
.control-room .fee-controls label{color:var(--night-muted)}
.control-room .fee-controls input{color:var(--night-text)!important;border-bottom-color:#5f5d5a!important}
.control-room .fee-source>strong{color:var(--lemon)}
.control-room .fee-source b{color:var(--night-text)}
.control-room .fee-bars i:nth-child(1),.control-room .fee-ledger li:nth-child(1) .fee-key{background:var(--lemon)}
.control-room .fee-bars i:nth-child(2),.control-room .fee-ledger li:nth-child(2) .fee-key{background:#9fc23a}
.control-room .fee-bars i:nth-child(3),.control-room .fee-ledger li:nth-child(3) .fee-key{background:#f4f2ef}
.control-room .fee-bars i:nth-child(4),.control-room .fee-ledger li:nth-child(4) .fee-key{background:#797774}
.control-room .fee-bars i:nth-child(5),.control-room .fee-ledger li:nth-child(5) .fee-key{background:#d1cfcc}
.control-room .fee-bars i:nth-child(6),.control-room .fee-ledger li:nth-child(6) .fee-key{background:#484643}
.control-room .fee-ledger li{border-color:var(--night-line)}
.control-room .fee-ledger small{color:var(--night-muted)}
.control-room .guide-table-scroll :is(td,th){border-color:var(--night-line)!important}
#website.society-bold .control-room caption{color:var(--night-muted)}
.control-room .guide-allocations li{border-color:var(--night-line)}
.control-room .reserve-modes{border-color:#44423f}
.control-room .reserve-modes button{color:var(--night-text)}
.control-room .reserve-modes button+button{border-color:#44423f}
.control-room .reserve-modes button:hover{background:#201e1b}
.control-room .reserve-modes [aria-pressed=true]{background:var(--lemon);color:#14120f}
.control-room .reserve-modes [data-reserve-mode="2"][aria-pressed=true]{background:var(--night-text);color:#14120f}
.control-room .reserve-vault{border-color:#5f5d5a}
.control-room .reserve-vault:before,.control-room .reserve-vault:after{background:#5f5d5a}
.control-room .reserve-vault i{color:var(--lemon)}
#website.society-bold .control-room .reserve-vault p{color:var(--night-muted)}
.control-room .reserve-flow[data-mode="2"] .reserve-vault{background:var(--night-text);color:#14120f;border-color:var(--night-text)}
#website.society-bold .control-room .reserve-flow[data-mode="2"] .reserve-vault p{color:#14120f}
.control-room .reserve-explanation{border-color:var(--night-line)}
.control-room .reserve-explanation>strong{color:var(--lemon)}
@media(max-width:900px){
  #website.society-bold #fees-guide.control-room{grid-template-columns:1fr;gap:28px}
  .control-room .fee-heading{position:static}
  .control-tabs{display:flex;overflow-x:auto;scrollbar-width:none;margin-top:24px;border-top:0;border-bottom:1px solid var(--night-line)}
  .control-tabs button{flex:none;border-bottom:0;min-height:48px;font-size:13px;padding:12px 14px;white-space:nowrap}
  .control-tabs button svg{display:none}
  .control-panels{min-height:0}
}

/* ---------- E. Color rhythm ---------- */
#website.society-bold .society-path{background:var(--paper)}

/* ---------- G. Episodes preview ---------- */
.episode-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s;pointer-events:none}
.episode-preview.is-playing{opacity:1}
#website.society-bold .episode-play{z-index:2}


@media(max-width:700px){
  .species-backdrop{display:none}
  .chapter-mark{top:18px;font-size:11px!important}
  .chapter-number{font-size:120px;top:10px}
}
@media(prefers-reduced-motion:reduce){#website.society-bold #collection.species-discovery{transition:none}}
/* Count-up numbers keep their parent's type size. */
#website.society-bold .fee-source>strong>span.count-up,#website.society-bold #portfolio-guide .market-universe>strong>span.count-up{font:inherit;display:inline;max-width:none;margin:0;color:inherit}
/* Games band on phones: lanes and ticket follow their headings instead of covering them. */
@media(max-width:700px){
  #website.society-bold .race-traces{position:relative;right:auto;top:auto;width:100%;margin:4px 0 22px}
  #website.society-bold .race-traces>div{height:40px}
  #website.society-bold .jackpot-print{position:relative;right:auto;top:auto;width:68%;margin:6px 0 26px auto;transform:rotate(4deg)}
}

/* ---------- Control room panels: simple, no horizontal scrolling ---------- */
#website.society-bold .control-room .cr-lede{max-width:62ch;margin:0 0 26px;font-size:15px;line-height:1.6;color:var(--night-muted)}
#website.society-bold .control-room .cr-lede b{color:var(--night-text)}
.cr-key{display:inline-block;flex:none;width:10px;height:10px;margin-right:10px;vertical-align:-1px}
.control-room .fee-bars i:nth-child(4),.control-room .fee-ledger li:nth-child(4) .fee-key{background:#979592}
.control-room .fee-bars i:nth-child(6),.control-room .fee-ledger li:nth-child(6) .fee-key{background:#615f5c}
/* Volume field: currency prefix, no native spinner, brand focus underline instead of a white box. */
.control-room .fee-controls label{position:relative}
.control-room .cr-prefix{position:absolute;left:0;bottom:15px;font-size:15px;color:var(--night-muted)}
#website.society-bold .control-room #guide-volume{padding-left:16px;font-size:18px;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield;transition:border-color .2s,box-shadow .2s}
.control-room #guide-volume::-webkit-inner-spin-button,.control-room #guide-volume::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
#website.society-bold .control-room #guide-volume:hover{border-bottom-color:var(--night-text)!important}
#website.society-bold .control-room #guide-volume:focus,#website.society-bold .control-room #guide-volume:focus-visible{outline:none;border-bottom-color:var(--lemon)!important;box-shadow:0 2px 0 var(--lemon)}
/* Four fee states as a transposed matrix. */
.state-matrix{width:100%;border-collapse:collapse;table-layout:fixed;font-variant-numeric:tabular-nums}
.state-matrix th,.state-matrix td{padding:13px 10px;border-bottom:1px solid var(--night-line);text-align:right;font-size:14px;font-weight:400;color:var(--night-text)}
.state-matrix thead th{padding-top:0;font:500 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--night-muted);vertical-align:bottom}
.state-matrix abbr{text-decoration:none}
.state-matrix th[scope=row]{text-align:left;width:34%;white-space:nowrap}
.state-matrix thead th:first-child{text-align:left}
.state-matrix td b{font-weight:600}
.cr-meter{display:block;height:3px;margin:7px 0 0 auto;width:calc(var(--w)*100%);background:#44423f}
.state-matrix tfoot th,.state-matrix tfoot td{border-bottom:0;font-weight:700;color:var(--night-muted)}
.state-matrix .is-current{background:#201e1b}
.state-matrix thead .is-current{color:var(--lemon)}
.state-matrix td.is-current .cr-meter{background:var(--lemon)}
/* NFT sales: one proportional bar and its legend. */
.split-bar{display:flex;gap:2px;height:52px;margin:0 0 22px}
.split-bar i{position:relative;min-width:6px;display:flex;align-items:flex-end;padding:0 0 7px 8px;color:#14120f;font:600 12px/1 var(--mono);font-style:normal;overflow:hidden}
.split-bar i:nth-child(n+5) span{display:none}
.split-bar i[style*="#615f5c"],.split-bar i[style*="#868481"]{color:#f4f2ef}
.split-list{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:36px}
.split-list li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;row-gap:3px;padding:11px 0;border-bottom:1px solid var(--night-line);font-size:14px;color:var(--night-text)}
.split-list li b{font-weight:600;font-variant-numeric:tabular-nums}
.split-list li small{grid-column:2/-1;font-size:12px;color:var(--night-muted)}
/* Buyback & reserve: three plain steps. */
.reserve-steps{list-style:none;margin:0 0 30px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.reserve-steps li{padding:18px 18px 20px;background:#1b1916;border-top:2px solid var(--lemon)}
.reserve-steps b{display:flex;align-items:baseline;gap:10px;font:900 26px/1 var(--display);text-transform:uppercase;color:var(--night-text)}
.reserve-steps b span{font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--lemon)}
#website.society-bold .control-room .reserve-steps p{margin:12px 0 0;font-size:13px;line-height:1.55}
@media(max-width:700px){
  .state-matrix th,.state-matrix td{padding:11px 4px;font-size:12px}
  .state-matrix thead th{font-size:9px;letter-spacing:.02em}
  .state-matrix th[scope=row]{width:31%;white-space:normal}
  .cr-key{width:8px;height:8px;margin-right:6px}
  .split-bar{height:40px}.split-bar i span{display:none}
  .split-list{grid-template-columns:1fr}
  .reserve-steps{grid-template-columns:1fr}
}

/* ---------- E2. Games: two posters on paper ---------- */
#website.society-bold .games-crossing.games-posters{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:var(--paper);padding-top:var(--section-y);padding-bottom:var(--section-y)}
.games-posters .games-intro{grid-column:1/-1;margin:0 0 10px;font:500 12px/1.6 var(--mono)!important;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.games-posters .games-intro b{color:var(--ink);font-weight:600}
#website.society-bold .games-posters>article{display:flex;flex-direction:column;padding:clamp(26px,3vw,44px);min-height:640px;border:0;overflow:hidden}
#website.society-bold .games-posters .derby-entry{background:var(--ink);color:var(--paper)}
#website.society-bold .games-posters .jackpot-entry{background:var(--lemon);color:var(--ink)}
.games-posters .poster-label{display:flex;gap:14px;margin:0 0 22px;font:500 11px/1 var(--mono)!important;letter-spacing:.1em;text-transform:uppercase}
.games-posters .poster-label span{opacity:.6}
#website.society-bold .games-posters h2{font-size:clamp(56px,6.4vw,104px);line-height:.86;margin:0 0 30px;color:inherit}
#website.society-bold .games-posters article>p:not(.poster-label):not(.poster-note){font-size:20px;line-height:1.35;margin:auto 0 0;font-weight:500}
#website.society-bold .games-posters .poster-note{font-size:13px!important;line-height:1.55;margin:12px 0 24px;opacity:.72;max-width:44ch}
#website.society-bold .games-posters .primary{align-self:flex-start}
#website.society-bold .games-posters .derby-entry .primary{background:var(--lemon);color:var(--ink)}
#website.society-bold .games-posters .derby-entry .primary:hover{background:var(--paper);color:var(--ink)}
#website.society-bold .games-posters .jackpot-entry .primary{background:var(--ink);color:var(--lemon)}
#website.society-bold .games-posters details{margin-top:26px;padding-top:18px;border-top:1px solid currentColor;border-color:color-mix(in srgb,currentColor 25%,transparent)}
#website.society-bold .games-posters .derby-entry summary:hover::after{background-color:var(--lemon);border-color:var(--lemon);color:var(--ink)}
/* Derby race: three real prize places run to a finish line. */
.poster-race{position:relative;display:grid;gap:10px;margin:0 0 30px;padding-right:26px}
.poster-lane{position:relative;height:74px;border-bottom:1px dashed #44423f}
.poster-place{position:absolute;left:0;top:6px;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#b1afac}
.poster-runner{position:absolute;left:0;bottom:6px;width:62px;height:62px;object-fit:cover;border:2px solid var(--paper);transform:translateX(0);transition:transform 1.5s var(--ease);transition-delay:calc(var(--lane)*.12s)}
.poster-share{position:absolute;right:0;bottom:10px;font:900 30px/1 var(--display);color:var(--lemon)}
.poster-finish{position:absolute;top:0;bottom:0;right:0;width:10px;background:repeating-conic-gradient(var(--paper) 0 25%,transparent 0 50%) 0 0/10px 10px}
.games-posters.in-scene .poster-runner{transform:translateX(calc(var(--to) * 340px))}
@supports (width:1cqw){.poster-race{container-type:inline-size}.games-posters.in-scene .poster-runner{transform:translateX(calc((100cqw - 158px) * var(--to)))}}
/* Jackpot ticket: straight, perforated, real boost values. */
.poster-ticket{display:grid;grid-template-columns:1fr auto;margin:0 0 30px;background:var(--paper);color:var(--ink);box-shadow:0 18px 30px -18px #14120f80;-webkit-mask:radial-gradient(circle 9px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 9px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat}
.ticket-main,.ticket-stub{display:grid;gap:10px;padding:22px 24px}
.ticket-stub{border-left:2px dashed #14120f55;text-align:center;align-content:center}
.poster-ticket span{font:500 10px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.poster-ticket strong{font:900 clamp(34px,3.6vw,52px)/.9 var(--display);text-transform:uppercase}
.ticket-stub strong{color:var(--ink)}
.poster-ticket small{font-size:12px;color:var(--muted)}
@media(max-width:900px){
  #website.society-bold .games-crossing.games-posters{grid-template-columns:1fr}
  #website.society-bold .games-posters>article{min-height:0}
  #website.society-bold .games-posters article>p:not(.poster-label):not(.poster-note){margin-top:0}
}
@media(max-width:700px){
  .poster-lane{height:62px}.poster-runner{width:50px;height:50px}.poster-share{font-size:24px}
  .ticket-main,.ticket-stub{padding:18px 16px}
}
@media(prefers-reduced-motion:reduce){.poster-runner{transition:none}}

/* ---------- Portfolio chapter, 701-1100px: one shared grid, tabs sit directly on their panel ---------- */
@media(min-width:701px) and (max-width:1100px){
  #website.society-bold #portfolio-guide{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);grid-template-areas:"head intro" "obj tabs" "obj panel" "pick disc";grid-template-rows:auto auto 1fr auto;column-gap:6%;row-gap:0;align-items:start}
  #website.society-bold #portfolio-guide .anatomy-copy,#website.society-bold #portfolio-guide .anatomy-stage{display:contents}
  #website.society-bold #portfolio-guide .anatomy-copy>h2{grid-area:head;margin:0 0 36px}
  #website.society-bold #portfolio-guide .anatomy-copy>p:not(.anatomy-disclaimer){grid-area:intro;align-self:end;margin:0 0 40px!important}
  #website.society-bold #portfolio-guide .anatomy-tabs{grid-area:tabs;margin:0 0 28px;max-width:none}
  #website.society-bold #portfolio-guide .anatomy-object{grid-area:obj;align-self:start;width:100%}
  #website.society-bold #portfolio-guide .anatomy-panel{grid-area:panel;align-self:start}
  #website.society-bold #portfolio-guide .anatomy-picker{grid-area:pick;margin-top:24px}
  #website.society-bold #portfolio-guide .anatomy-disclaimer{grid-area:disc;margin:24px 0 0!important}
  #website.society-bold #portfolio-guide .marker-note{margin-bottom:22px}
}

/* ---------- Legibility floor: no label below 11px ---------- */
#website.society-bold .species-contact-sheet span{font-size:12px}
#website.society-bold .species-portrait figcaption,#website.society-bold .nft-face-caption{font-size:11px}
#website.society-bold #portfolio-guide .reference-caption>span,#website.society-bold #portfolio-guide .reference-sheet small{font-size:11px}
#website.society-bold #reroll-guide .roll-paper-top>span{font-size:11px}
#website.society-bold .society-cinema .episode-grid article>div>span{font-size:11px}
#website.society-bold .weight-portrait figcaption{font-size:11px}
#website.society-bold .weight-readout span,#website.society-bold .reward-comparison h3 span{font-size:11px}
@media(max-width:700px){#website.society-bold .species-contact-sheet span{font-size:11px}}

/* Phones: the control room column may never grow to the width of its tab strip. */
@media(max-width:900px){
  #website.society-bold #fees-guide.control-room{grid-template-columns:minmax(0,1fr)}
  #website.society-bold .control-room>*{min-width:0}
}
@media(max-width:700px){
  .state-matrix th[scope=row] .cr-key{float:left;margin-top:4px}
}

/* If the brand fonts are unavailable, fall back to a condensed system face and never fake a heavier weight. */
#website.society-bold,#website.society-bold *{font-synthesis:none}

/* ---------- Signal annotation: label, hint and a drawn arrow in the free top-right corner ---------- */
#website.society-bold .hero .signal-stage{height:clamp(340px,34vw,540px)}
#website.society-bold .hero .signal-controls{position:absolute;top:0;right:0;left:auto;width:clamp(168px,33%,260px);padding:0;text-align:left;z-index:3;pointer-events:none}
#website.society-bold .hero .signal-action{pointer-events:auto;display:block;margin:0;padding:0;border:0;background:none;color:var(--ink);font:400 clamp(24px,2.3vw,34px)/1.02 'Permanent Marker',Impact,cursive;letter-spacing:0;text-transform:none;text-align:left;transform:rotate(-5deg);transform-origin:0 50%;cursor:pointer}
#website.society-bold .hero .signal-action::after{display:none}
#website.society-bold .hero .signal-action span{display:inline;transform:none;margin:0;font-size:inherit;background:none}
#website.society-bold .hero .signal-action .signal-verb{box-shadow:inset 0 -.3em 0 var(--lemon);transition:box-shadow .3s var(--ease)}
#website.society-bold .hero .signal-action:hover .signal-verb,#website.society-bold .hero .signal-action[aria-pressed=true] .signal-verb{box-shadow:inset 0 -.62em 0 var(--lemon)}
#website.society-bold .hero .signal-action:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
#website.society-bold .hero .signal-hint{margin:12px 0 0;font:500 11px/1.4 var(--mono)!important;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);transform:rotate(-5deg);transform-origin:0 50%}
.signal-arrow{display:block;width:58%;margin:2px 0 0 -6%;overflow:visible;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(-3deg)}
@media(prefers-reduced-motion:no-preference){
  /* One stroke: the line is drawn at an even pace and the tip follows the moment it ends. pathLength=1 on both
     paths makes each draw over its own full time. */
  body:not(.paused) .signal-arrow path{animation:draw-arrow .65s cubic-bezier(.45,.05,.55,.95) .5s both}
  body:not(.paused) .signal-arrow path+path{animation:draw-arrow .22s cubic-bezier(.2,.6,.4,1) 1.15s both}
  @keyframes draw-arrow{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
}
@media(max-width:700px){
  #website.society-bold .hero .signal-controls{width:46%}
  #website.society-bold .hero .signal-action{font-size:24px}
  #website.society-bold .hero .signal-hint{font-size:10.5px!important;letter-spacing:.04em}
}
#website.society-bold .hero svg.signal-arrow{width:62%;height:auto;margin:6px 0 0 -4%;fill:none;stroke:var(--ink);stroke-width:2.4}
@media(max-width:700px){
  #website.society-bold .hero .signal-controls{position:relative;top:auto;right:auto;width:max-content;max-width:70%;margin:18px 0 -34px auto}
  /* The tip lands on the top of the star, which sits in the middle: 55px into the right-aligned controls is the middle on 320-430px phones. */
  #website.society-bold .hero svg.signal-arrow{width:96px;margin:4px 0 0 38px}
}

/* Disclosure icon on whole pixels so the plus is perfectly symmetric: 28px ring, 12x2 bars. */
#website.society-experience summary::after{width:28px;height:28px;box-sizing:border-box;background:linear-gradient(currentColor 0 0) center/12px 2px no-repeat,linear-gradient(currentColor 0 0) center/2px 12px no-repeat}
/* Reroll and the games posters share the paper ground: one gap between them, not two. */
#website.society-bold #reroll-guide{padding-bottom:calc(var(--section-y)*.6)}
#website.society-bold .games-crossing.games-posters{padding-top:0}

/* Posters size to their own content: opening one disclosure never stretches the other card. */
#website.society-bold .games-crossing.games-posters{align-items:start}
#website.society-bold .games-posters>article{min-height:0}
#website.society-bold .games-posters article>p:not(.poster-label):not(.poster-note){margin:0}
.poster-facts{display:grid;gap:0;margin:0 0 26px;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.poster-facts>div{display:grid;grid-template-columns:minmax(92px,28%) 1fr;gap:16px;padding:11px 0;border-bottom:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.poster-facts dt{font:500 11px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.poster-facts dd{margin:0;font-size:14px;line-height:1.45}
.games-posters .derby-entry .poster-facts dt{color:var(--lemon);opacity:1}
/* Ticket: the entry split as a perforated strip. */
.ticket-split{display:flex;gap:2px;margin-top:6px;height:46px}
.ticket-split i{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-width:0;padding:6px 7px;font-style:normal;background:#14120f;color:var(--paper)}
.ticket-split i[data-i="1"]{background:#44423f}.ticket-split i[data-i="2"]{background:#c96c2c}.ticket-split i[data-i="3"]{background:#979592}
.ticket-split b{font:600 12px/1 var(--mono)}
.ticket-split em{font:500 9.5px/1.1 var(--mono);letter-spacing:.02em;font-style:normal;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ticket-split i[data-i="3"] em{display:none}
@media(max-width:700px){.poster-facts>div{grid-template-columns:1fr;gap:3px}.ticket-split em{display:none}.ticket-split{height:34px}}
.ticket-split i{justify-content:center}
.ticket-legend{list-style:none;display:flex;flex-wrap:wrap;gap:4px 14px;margin:8px 0 0;padding:0;font:500 10.5px/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.ticket-legend li::before{content:'';display:inline-block;width:8px;height:8px;margin-right:6px;vertical-align:0;background:#14120f}
.ticket-legend li[data-i="1"]::before{background:#44423f}.ticket-legend li[data-i="2"]::before{background:#c96c2c}.ticket-legend li[data-i="3"]::before{background:#979592}
@media(max-width:700px){.ticket-split{height:30px}}

/* Four fee states v2: no meters, a wide label column, one lemon highlight for the chosen depth. */
.state-matrix th[scope=row]{width:32%;white-space:normal}
.state-matrix th[scope=row] .sm-label{display:inline}
.state-matrix .sm-trend{display:inline-block;margin-left:8px;font:600 12px/1 var(--mono);color:var(--night-muted)}
.state-matrix td{font-size:15px}
.state-matrix thead th{padding-bottom:12px}
.state-matrix thead button{min-height:32px;padding:6px 0;border:0;border-top:2px solid transparent;background:none;color:var(--night-muted);font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;transition:color .2s,border-color .2s}
.state-matrix thead button:hover{color:var(--night-text);border-top-color:#615f5c}
.state-matrix thead th.is-current button{color:var(--lemon);border-top-color:var(--lemon)}
.state-matrix .is-current{background:none}
.state-matrix td.is-current{color:var(--lemon);font-weight:700}
.state-matrix tfoot td.is-current{color:var(--lemon)}
.cr-meter{display:none}
@media(max-width:700px){.state-matrix th[scope=row]{width:36%}.state-matrix td{font-size:12.5px}.state-matrix .sm-trend{margin-left:4px}.state-matrix thead button{font-size:9.5px}}

/* NFT sales: narrow shares get their label below the bar, staggered on two rows with a tick. */
.split-chart{margin:0 0 22px}
.split-chart .split-bar{margin:0}
.split-bar i.is-small span{display:none}
.split-bar i:nth-child(n+5) span{display:revert}
.split-bar i.is-small span{display:none}
.split-marks{position:relative;height:44px}
.split-marks span{position:absolute;top:6px;transform:translateX(var(--shift,-50%));font:600 12px/1 var(--mono);color:var(--night-text);white-space:nowrap}
.split-marks span::before{content:'';position:absolute;left:calc(-1 * var(--shift,-50%));top:-6px;width:1px;height:4px;background:currentColor;opacity:.6}
.split-marks span.row-b{top:24px}
.split-marks span.row-b::before{top:-24px;height:22px}

/* Reserve modes always fit their column: flexible tracks, scaling type. */
#website.society-bold .control-room .reserve-modes{grid-template-columns:repeat(3,minmax(0,1fr))}
#website.society-bold .control-room .reserve-modes button{grid-template-columns:minmax(0,1fr) auto;min-width:0;padding:18px clamp(12px,1.4vw,22px);gap:10px 10px}
#website.society-bold .control-room .reserve-modes b{font-size:clamp(19px,1.9vw,28px);min-width:0;overflow-wrap:anywhere}
#website.society-bold .control-room .reserve-modes strong{font-size:clamp(20px,2vw,30px)}
#website.society-bold .control-room .reserve-explanation{grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:start}
#website.society-bold .control-room .reserve-explanation>strong{font-size:clamp(22px,2.1vw,29px)}
#website.society-bold .control-room .reserve-guide>.fine-print{margin:24px 0 0;padding-top:18px;border-top:1px solid var(--night-line)}
@media(max-width:700px){#website.society-bold .control-room .reserve-modes button{grid-template-columns:1fr;padding:12px 8px}#website.society-bold .control-room .reserve-modes b{font-size:18px}}
@media(max-width:700px){
  .state-matrix th[scope=row] .cr-key{display:none}
  .state-matrix th[scope=row]{font-size:12.5px;line-height:1.3}
  .state-matrix .sm-trend{white-space:nowrap}
  .split-bar i:not(.is-small) span{display:block;font-size:11px}
  #website.society-bold .control-room .reserve-explanation{grid-template-columns:1fr;gap:10px}
}

/* Pixel seams on the collection edges: pure decoration, colour follows the selected species. */
.pixel-seam{position:relative;z-index:3;height:0;pointer-events:none}
.pixel-seam i{position:absolute;left:0;right:0;display:block;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;-webkit-mask-size:12px 100%;mask-size:12px 100%}
.pixel-seam .seam-in{background:var(--paper)}
.pixel-seam .seam-out{background:var(--seam,#eae8e5);transition:background-color .8s var(--ease)}
.pixel-seam-top .seam-out{bottom:0}.pixel-seam-top .seam-in{top:0}
.pixel-seam-bottom .seam-in{bottom:0}.pixel-seam-bottom .seam-out{top:0}
@media(prefers-reduced-motion:reduce){.pixel-seam .seam-out{transition:none}}

/* Chapters carry no scroll-driven motion. */
#website.society-bold .chapter h2,#website.society-bold .weight-portrait img{animation:none!important;translate:none}
/* Phones: all four control-room tabs stay visible as a 2x2 grid instead of a cut-off scroll strip. */
@media(max-width:700px){
  .control-tabs{display:grid;grid-template-columns:1fr 1fr;gap:1px;overflow:visible;background:var(--night-line);border:1px solid var(--night-line)}
  .control-tabs button{white-space:normal;min-height:52px;padding:10px 12px;gap:10px;line-height:1.2;background:var(--night)}
  .control-tabs button:hover{background:#201e1b}
  .control-tabs button[aria-selected=true]{background:var(--lemon)}
}
/* Phones: the ticket stub tears off below, so the entry split gets the full width. */
@media(max-width:700px){
  .poster-ticket{grid-template-columns:1fr;-webkit-mask:none;mask:none}
  .ticket-stub{position:relative;grid-template-columns:auto 1fr;align-items:center;column-gap:14px;row-gap:4px;text-align:left;border-left:0;border-top:2px dashed #14120f55}
  .ticket-stub span{grid-column:1/-1}
  .ticket-stub::before,.ticket-stub::after{content:'';position:absolute;top:-10px;width:18px;height:18px;border-radius:50%;background:var(--lemon)}
  .ticket-stub::before{left:-9px}.ticket-stub::after{right:-9px}
}
/* The ticket legend is not a fact row: keep each colour key next to its label. */
#website.society-bold .poster-ticket .ticket-legend li{display:block;gap:0;padding:0;font-size:11px}

/* Species heading (owner, 2026-10-16): the edition in big numbers instead of a small note. */
#website .discovery-heading{align-items:end}
#website .discovery-stats{display:flex;margin:0;gap:0}
#website .discovery-stats>div{position:relative;display:flex;flex-direction:column-reverse;gap:clamp(12px,1.2vw,18px);padding:0 clamp(16px,2.2vw,34px);border-left:1.5px solid color-mix(in srgb,var(--on,#14120f) 35%,transparent)}
#website .discovery-stats>div:first-child{border-left:0;padding-left:0}
#website .discovery-stats>div:last-child{padding-right:0}
#website .discovery-stats dd{margin:0;font:900 clamp(46px,5.6vw,92px)/.82 var(--display);letter-spacing:-.01em;color:var(--on,#14120f)}
#website .discovery-stats dt{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--on,#14120f) 78%,transparent)}
#website .discovery-stats .stat-curated dd{align-self:center;padding:.07em .12em .03em;background:var(--lemon,#e8ff5a);color:#14120f;transform:rotate(-2deg);box-shadow:4px 4px 0 #14120f}
#website .stat-curated{padding-right:0}
#website .discovery-stats .stat-curated dt{align-self:center;text-align:center}
/* The 1/1s are not polaroids like the rest: gold foil frames with a light sweep, floating, a black 1/1 tag. */
#website .curated-peek{position:absolute;bottom:4px;left:calc(100% + 22px);width:var(--peek);aspect-ratio:1;padding:5px;background:linear-gradient(135deg,#6b4a0e,#f8e38c 28%,#b5832a 48%,#fff4b8 66%,#8c6416 100%);box-shadow:0 0 0 1.5px #14120f,0 14px 26px -10px #000c,0 0 34px -6px #f8d76a99;transform:rotate(var(--tilt));animation:peek-float 4.4s ease-in-out var(--delay) infinite;overflow:hidden;isolation:isolate}
#website .curated-peek img{display:block;width:100%;height:100%;object-fit:cover;box-shadow:inset 0 0 0 1px #14120f}
#website .curated-peek::after{content:'';position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 42%,#fff8 49%,#fff2 53%,transparent 60%);transform:translateX(-60%);animation:peek-sweep 3.6s ease-in-out var(--delay) infinite;pointer-events:none;mix-blend-mode:screen}
#website .curated-peek b{position:absolute;z-index:1;right:-1px;bottom:-1px;padding:5px 7px 4px;background:#14120f;color:#f8e38c;font:700 12px/1 var(--mono);letter-spacing:.06em}
#website .curated-peek+.curated-peek{left:calc(100% + 22px + var(--peek) * .8);bottom:-14px;z-index:-1}
@keyframes peek-float{50%{transform:rotate(var(--tilt)) translateY(-7px)}}
@keyframes peek-sweep{0%,55%{transform:translateX(-60%)}85%,100%{transform:translateX(60%)}}
@media(prefers-reduced-motion:reduce){#website .curated-peek,#website .curated-peek::after{animation:none}}
#website .discovery-heading{--peek:clamp(112px,9.6vw,172px)}
#website .discovery-heading:has(.curated-peek){padding-right:calc(var(--peek) * 1.95)}
@media(max-width:1100px){
  #website .discovery-heading{display:block;padding-right:0!important}
  #website .discovery-stats{display:inline-flex;margin-top:22px}
}
@media(max-width:700px){
  #website .discovery-stats{margin-top:16px}
  #website .discovery-stats>div{padding:0 14px}
  #website .discovery-stats dd{font-size:clamp(38px,11vw,56px)}
  #website .discovery-stats dt{font-size:10px}
  #website .discovery-heading{position:relative;--peek:92px}
  #website .discovery-heading:has(.curated-peek){margin-bottom:calc(var(--peek) + 44px)}
  #website .discovery-stats>.stat-curated{position:static}
  #website .curated-peek{top:calc(100% + 22px);bottom:auto;left:auto;right:calc(var(--peek) * .82 + 4px)}
  #website .curated-peek+.curated-peek{left:auto;right:4px;top:calc(100% + 30px);bottom:auto}
  #website .curated-peek b{font-size:10px;padding:4px 5px 3px}
}

/* The art can't be dragged out or long-pressed to save (owner, 2026-10-16; see society-pages.js). */
#website img,#website video{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}