/* Pages: lean landing page, one topic per page. Loaded after society-bold.css. */
#website.society-bold .route-off{display:none!important}
#website.society-bold>header nav a[aria-current=page]{font-weight:600}
#website.society-bold>header nav a[aria-current=page]::after{transform:scaleX(1)}

/* ---------- Doors on the landing page ---------- */
#website.society-bold .explore-doors{background:var(--paper)}
.doors-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:30px}
#website.society-bold .doors-head h2{margin:0}
#website.society-bold .doors-head p{margin:0 0 6px;max-width:32ch;color:var(--muted);text-align:right}
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.door{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:400px;padding:clamp(22px,2.4vw,34px);overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.door-how{background:#fbfaf5;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.door-games{background:var(--ink);color:var(--paper)}
.door-protocol{background:var(--lemon);color:var(--ink)}
.door-num{font:500 12px/1 var(--mono);letter-spacing:.1em;opacity:.6}
.door strong{display:block;margin:18px 0 14px;font:900 clamp(38px,3.8vw,60px)/.9 var(--display);letter-spacing:-.02em;text-transform:uppercase}
#website.society-bold .door p{max-width:26ch;margin:0;font-size:15px;line-height:1.5}
.door-go{display:inline-flex;align-items:center;gap:12px;margin-top:auto;font-size:15px;font-weight:700;transition:gap .35s var(--ease)}
.door-games .door-go{color:var(--lemon)}
.door img{position:absolute;z-index:-1;right:-7%;bottom:-9%;width:52%;height:auto;padding:6px 6px 22px;background:#fbfaf5;box-shadow:0 18px 30px -16px #14120f99;transform:rotate(9deg);transition:transform .6s var(--ease)}
.door:hover{transform:translateY(-4px)}
.door:hover .door-go{gap:20px}
.door:hover img{transform:rotate(4deg) translateY(-10px)}
.door:focus-visible{outline:3px solid var(--ink);outline-offset:4px}

/* ---------- Page intro ---------- */
.page-intro{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px 6%;align-items:end;padding:clamp(52px,7vw,110px) var(--gutter) clamp(40px,4.4vw,64px);background:var(--paper);outline:none}
.page-intro::after{content:'';position:absolute;left:0;right:0;bottom:-12px;height:12px;background:var(--lemon);-webkit-mask:var(--dither-fade) repeat-x 0 0/12px 100%;mask:var(--dither-fade) repeat-x 0 0/12px 100%;z-index:2}
.page-eyebrow{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin:0 0 4px;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.wl-intro .page-eyebrow{margin-bottom:18px}
/* The page name as a sticker. */
.page-eyebrow span{display:inline-block;padding:6px 8px 5px;background:var(--ink);color:var(--lemon);font-weight:700;letter-spacing:.08em;transform:rotate(-4deg);box-shadow:2px 2px 0 rgba(21,20,18,.18)}
#website.society-bold .page-intro h1{margin:0;font:900 clamp(58px,8.6vw,136px)/.84 var(--display);letter-spacing:-.03em;text-transform:uppercase;text-wrap:balance}
#website.society-bold .page-lede{margin:0 0 10px;max-width:46ch;font-size:17px;line-height:1.55;color:#302e2b}
/* Beside the heading the text hangs from its first line, so a three-line heading leaves no gap above it. */
@media(min-width:701px){#website.society-bold .page-intro .page-lede{align-self:start;margin-top:clamp(8px,.9vw,14px)}}
/* On wide screens the chapter links sit under that text, level with the heading's last line, so the column has no hole. */
@media(min-width:1000px){
  .page-intro{grid-template-rows:auto auto 1fr}
  #website.society-bold .page-intro h1{grid-column:1;grid-row:2/4}
  #website.society-bold .page-intro .page-lede{grid-column:2;grid-row:2}
  #website.society-bold .page-intro .page-jump{grid-column:2;grid-row:3;align-self:end;margin-top:22px}
}
.page-jump{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.page-jump a{display:inline-flex;align-items:center;min-height:40px;padding:8px 15px;border:1px solid var(--ink);font-size:14px;font-weight:600;transition:background .2s,color .2s}
.page-jump a:hover{background:var(--ink);color:var(--lemon)}
.page-jump a.page-paper{background:var(--ink);color:var(--lemon);gap:6px}
.page-jump a.page-paper:hover{background:var(--lemon);color:var(--ink)}
.page-jump a.page-paper svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4}

/* ---------- Up next: one card at the end of every page ---------- */
/* The next card runs the full width, like the sections above and below it, instead of a box inside a paper band. */
.page-end{padding:0;background:var(--paper)}
.next-card{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;min-height:clamp(270px,23vw,340px);padding:clamp(28px,3.4vw,52px) clamp(200px,36%,520px) clamp(28px,3.4vw,48px) var(--gutter);overflow:hidden}
.next-ink{background:var(--ink);color:var(--paper)}
.next-lemon{background:var(--lemon);color:var(--ink)}
.next-paper{background:#fbfaf5;color:var(--ink);box-shadow:inset 0 1.5px var(--ink),inset 0 -1.5px var(--ink)}
.next-label{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.next-card strong{display:block;margin:16px 0 12px;font:900 clamp(52px,6.4vw,100px)/.86 var(--display);letter-spacing:-.025em;text-transform:uppercase}
#website.society-bold .next-card p{max-width:40ch;margin:0 0 24px;font-size:16px;line-height:1.5}
.next-go{display:inline-flex;align-items:center;gap:12px;margin-top:auto;font-size:15px;font-weight:700;transition:gap .35s var(--ease)}
.next-ink .next-go{color:var(--lemon)}
/* The polaroid sits in the middle of the card and fits inside it; at the old size it hung off the top edge. */
.next-card img{position:absolute;z-index:-1;right:calc(var(--gutter) + clamp(0px,3%,48px));top:50%;width:clamp(150px,19%,250px);height:auto;padding:7px 7px 26px;background:#fbfaf5;box-shadow:0 22px 36px -18px #14120faa;transform:translateY(-50%) rotate(7deg);transition:transform .6s var(--ease)}
.next-card:hover .next-go{gap:20px}
.next-card:hover img{transform:translateY(calc(-50% - 10px)) rotate(3deg)}
.next-card:focus-visible{outline:3px solid currentColor;outline-offset:-8px}
/* What the next page holds, in the free space between the text and the polaroid. Wide screens only. */
.next-inside{position:absolute;top:50%;right:calc(var(--gutter) + clamp(0px,3%,48px) + clamp(150px,19%,250px) + clamp(32px,4vw,64px));width:min(26%,260px);transform:translateY(-50%);display:grid;gap:12px}
.next-inside ol{margin:0;padding:0;list-style:none;border-top:1.5px solid currentColor}
.next-inside li{display:flex;align-items:baseline;gap:12px;padding:7px 0;border-bottom:1px solid color-mix(in srgb,currentColor 22%,transparent);font-size:15px;font-weight:600;line-height:1.25}
.next-inside li span{flex:none;width:2ch;font:500 11px/1 var(--mono);opacity:.6}
.next-ink .next-inside li span{color:var(--lemon);opacity:1}
/* The rest of the list as one quiet line, without a number. */
.next-inside .next-more{display:block;border-bottom:0;padding-top:9px;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.6}
/* While the protocol is shut, its card blurs the chapters that are revealed later. */
.next-inside li b{font-weight:inherit}
.next-inside .is-veiled b{filter:blur(5px);user-select:none}
/* Up to seven chapters fit when the rows sit a little closer. */
.next-inside ol.is-long li{padding:5px 0;font-size:14px}
/* Below 1200px the list would run into the card text. */
@media(max-width:1199px){.next-inside{display:none}}

/* ---------- Protocol: the token ---------- */
#website.society-bold .token-section{background:var(--paper)}
.tk-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:0 6%;align-items:end;margin-bottom:34px}
.tk-head .rd-label{grid-column:1/-1}
#website.society-bold .tk-head h2{margin:0}
#website.society-bold .tk-lede{margin:0 0 6px;max-width:44ch;font-size:16px;line-height:1.55}
.tk-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;border-top:2px solid var(--ink);border-bottom:1px solid var(--line)}
.tk-stats div{padding:18px 18px 20px 0}
.tk-stats div+div{padding-left:18px;border-left:1px solid var(--line)}
.tk-stats dt{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tk-stats dd{margin:12px 0 0;font:900 clamp(26px,2.7vw,42px)/1 var(--display);font-variant-numeric:tabular-nums;text-transform:uppercase}
.tk-uses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.tk-use{display:flex;flex-direction:column;padding:clamp(22px,2.4vw,32px);background:#fbfaf5;box-shadow:inset 0 0 0 1.5px var(--ink)}
.tk-burn{background:var(--ink);color:var(--paper);box-shadow:none}
.tk-use h3{margin:0 0 14px;font:900 30px/1 var(--display);text-transform:uppercase}
.tk-use>ul:first-of-type{margin:0 0 22px;padding:0;list-style:none}
.tk-use>ul:first-of-type li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid #14120f22;font-size:14px}
.tk-burn>ul:first-of-type li{border-color:#f6f5ef26}
.tk-use li b{font:600 15px/1.2 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.tk-burn li b{color:var(--lemon)}
#website.society-bold .tk-where{margin:auto 0 0;font-size:14px;line-height:1.5;color:#cccac7}
.tk-where strong{display:block;margin-bottom:4px;font:900 34px/1 var(--display);text-transform:uppercase;color:var(--lemon)}
.tk-split{display:flex;gap:2px;height:14px;margin-top:auto}
.tk-split i,.tk-legend li::before{background:var(--swatch)}
.tk-split i:nth-child(1),.tk-legend li:nth-child(1){--swatch:var(--ink)}
.tk-split i:nth-child(2),.tk-legend li:nth-child(2){--swatch:#605e5b}
.tk-split i:nth-child(3),.tk-legend li:nth-child(3){--swatch:#a19f9c}
.tk-split i:nth-child(4),.tk-legend li:nth-child(4){--swatch:#cbd75d}
.tk-split i:nth-child(5),.tk-legend li:nth-child(5){--swatch:var(--lemon)}
.tk-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:12px 0 0;padding:0;list-style:none;font:500 11px/1.3 var(--mono);letter-spacing:.03em;color:#3f3d3a}
.tk-legend li{display:flex;align-items:center;gap:6px}
.tk-legend li::before{content:'';width:9px;height:9px;box-shadow:inset 0 0 0 1px #14120f33}
#website.society-bold .tk-note{margin:22px 0 0;max-width:80ch;font-size:13px;line-height:1.55;color:var(--muted)}
.level-rules td small{margin-left:8px;font:500 11px/1 var(--mono);color:#b1afac}

/* ---------- Footer ---------- */
#website .site-footer{position:relative;display:block;margin:0;padding:0;border:0;background:#12100d;color:#f4f2ef}
.site-footer a{color:inherit;text-decoration:none}
.sf-join{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:22px 40px;padding:clamp(30px,3.4vw,46px) var(--gutter);background:var(--lemon);color:var(--ink)}
.sf-join::before{content:'';position:absolute;left:0;right:0;top:0;height:12px;background:var(--lemon);-webkit-mask:var(--dither-fade) repeat-x 0 0/12px 100%;mask:var(--dither-fade) repeat-x 0 0/12px 100%;transform:scaleY(-1)}
.sf-crew{display:flex;padding-left:14px}
.sf-crew img{width:50px;height:50px;margin-left:-14px;border:3px solid var(--lemon);border-radius:50%;object-fit:cover;background:#fbfaf5;transition:transform .35s var(--ease)}
.sf-crew img:hover{transform:translateY(-6px)}
#website .sf-call h2{margin:0;font:900 clamp(34px,3.6vw,56px)/.9 var(--display);letter-spacing:-.02em;text-transform:uppercase;color:var(--ink)}
#website .sf-call p{margin:8px 0 0;font-size:14px}
.sf-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}
.sf-button{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 20px;border:1.5px solid var(--ink);font-size:15px;font-weight:700;white-space:nowrap;transition:background .2s,color .2s,gap .3s var(--ease)}
.sf-button:hover{background:var(--ink);color:var(--lemon)}
.sf-button.sf-primary{background:var(--ink);color:var(--lemon)}
.sf-button.sf-primary:hover{gap:16px;background:#2c2a27}
#website .sf-button svg{width:18px;height:18px}
.sf-main{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr) minmax(0,.95fr);gap:40px clamp(28px,4vw,64px);padding:clamp(48px,5vw,72px) var(--gutter) clamp(40px,4vw,56px)}
.sf-brand img{display:block;width:250px;height:auto}
#website .sf-brand p{margin:18px 0 0;max-width:30ch;font-size:14px;line-height:1.6;color:#b1afac}
.sf-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
#website .site-footer h3,.sf-clock dt{margin:0 0 16px;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#b1afac}
.sf-links ul{margin:0;padding:0;list-style:none}
.sf-links li+li{margin-top:12px}
#website .sf-links a{position:relative;font-size:15px;color:#f4f2ef;transition:color .2s}
.sf-links a:hover{color:var(--lemon)}
.sf-clock{margin:0;padding-left:clamp(20px,2.4vw,32px);border-left:1px solid #34322f}
.sf-clock div+div{margin-top:26px}
.sf-clock dt{display:flex;align-items:center;gap:8px;margin-bottom:10px;color:var(--lemon)}
.sf-clock dt{position:relative}
.sf-clock dt::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--lemon)}
/* The pulse ring scales and fades on its own layer, so the compositor runs it without repainting every frame. */
.sf-clock dt::after{content:'';position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#d8fa2288;pointer-events:none;will-change:transform,opacity;animation:sf-pulse 2.4s ease-out infinite}
.sf-clock dd{margin:0;font-size:14px;line-height:1.5;color:#e5e3e0}
@keyframes sf-pulse{0%{transform:scale(1);opacity:1}70%,100%{transform:scale(3.3);opacity:0}}
.sf-legal{display:flex;align-items:center;justify-content:space-between;gap:12px 32px;padding:20px var(--gutter) 26px;border-top:1px solid #34322f;font-size:12px;color:#979592}
.sf-legal small{font-size:12px;line-height:1.5}
.sf-legal small:nth-child(2){flex:1;max-width:72ch}
#website .sf-legal a{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:#f4f2ef;white-space:nowrap}
#website .sf-legal svg{width:15px;height:15px}
.sf-legal a:hover{color:var(--lemon)}
.site-footer :focus-visible{outline:2px solid var(--lemon);outline-offset:3px}
.sf-join :focus-visible{outline-color:var(--ink)}

/* Spacing that assumed the old single-page order. */
#website.society-bold #reroll-guide{padding-bottom:var(--section-y)}
#website.society-bold .games-crossing.games-posters{padding-top:var(--section-y)}

/* ---------- How it works: level rules ---------- */
.level-rules{margin-top:clamp(40px,4vw,64px);padding-top:clamp(28px,3vw,44px);border-top:1px solid #555350;scroll-margin-top:24px}
.lr-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:18px}
.lr-head h3{margin:0;font:900 clamp(30px,3vw,44px)/.95 var(--display);text-transform:uppercase}
#website.society-bold .lr-head p{margin:0;max-width:44ch;font-size:13px;color:#cccac7;text-align:right}
.level-rules table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.level-rules th,.level-rules td{padding:12px 12px 12px 0;border-bottom:1px solid #44423f;text-align:left;font-size:14px;color:#ebe9e6}
.level-rules thead th{font:500 11px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#b1afac}
.level-rules tbody th{font:900 22px/1 var(--display);color:#f6f5ef}
.level-rules tr.is-current th,.level-rules tr.is-current td{color:var(--lemon)}
.level-rules tr.is-current{box-shadow:inset 3px 0 0 var(--lemon)}
.level-rules tr.is-current th{padding-left:12px}
.lr-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 40px;margin:22px 0 0;padding:0;list-style:none}
.lr-facts li{position:relative;padding-left:16px;font-size:13px;line-height:1.5;color:#dcdad7}
.lr-facts li::before{content:'';position:absolute;left:0;top:.55em;width:6px;height:6px;background:var(--lemon)}

/* ---------- How it works: lifecycle ---------- */
#website.society-bold .lifecycle{background:#e4dccb;color:var(--ink)}
/* The life of a Stray follows the reroll closely, with less colour above and below its content. */
#website.society-bold #lifecycle{padding-top:calc(var(--section-y)*.7);padding-bottom:calc(var(--section-y)*.7)}
#website.society-bold #reroll-guide{padding-bottom:calc(var(--section-y)*.5)}
.lc-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:34px}
#website.society-bold .lc-head h2{margin:0}
#website.society-bold .lc-head p{margin:0 0 6px;max-width:30ch;text-align:right}
.lc-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.lc-steps li{position:relative;padding:22px 18px 6px 0}
.lc-steps li+li{padding-left:18px;border-left:1px solid #14120f33}
.lc-steps li::before{content:'';position:absolute;top:-7px;left:0;width:12px;height:12px;background:var(--ink)}
.lc-steps li+li::before{left:18px}
.lc-steps span{display:block;font:500 11px/1 var(--mono);letter-spacing:.1em;opacity:.6}
.lc-steps b{display:block;margin:10px 0 10px;font:900 clamp(24px,2.1vw,32px)/1 var(--display);text-transform:uppercase}
#website.society-bold .lc-steps p{margin:0;font-size:14px;line-height:1.5}
#website.society-bold .lc-exit{margin:30px 0 0;padding:16px 20px;background:var(--ink);color:var(--paper);font-size:15px}
.lc-exit strong{color:var(--lemon)}

/* ---------- Games: a race day ---------- */
#website.society-bold .race-day{background:var(--ink);color:var(--paper)}
.rd-head{margin-bottom:34px}
.rd-label{margin:0 0 14px;font:500 12px/1 var(--mono)!important;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
#website.society-bold .rd-head h2,#website.society-bold .jo-head h2{margin:0}
.rd-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none;counter-reset:none}
.rd-steps li{position:relative;padding:24px 24px 26px;background:#201e1b;border-top:3px solid var(--lemon)}
.rd-steps li:not(:last-child)::after{content:'';position:absolute;top:50%;right:-13px;width:10px;height:10px;border-top:2px solid var(--lemon);border-right:2px solid var(--lemon);transform:translateY(-50%) rotate(45deg);z-index:1}
.rd-steps span{font:500 11px/1 var(--mono);letter-spacing:.1em;color:var(--lemon)}
.rd-steps b{display:block;margin:12px 0;font:900 clamp(28px,2.6vw,38px)/1 var(--display);text-transform:uppercase}
#website.society-bold .rd-steps p{margin:0;font-size:14px;line-height:1.55;color:#cccac7}
#website.society-bold .rd-note{margin:22px 0 0;font-size:14px;color:#b1afac}

/* ---------- Games: jackpot boost and early entry ---------- */
#website.society-bold .jackpot-odds{background:var(--paper)}
.jo-head{margin-bottom:30px}
.jo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px}
.jo-card{padding:clamp(22px,2.6vw,36px);background:#fbfaf5;box-shadow:inset 0 0 0 1.5px var(--ink)}
.jo-card h3{margin:0 0 20px;font:900 30px/1 var(--display);text-transform:uppercase}
.weight-read{display:flex;align-items:center;gap:16px;margin:4px 0 18px}
.weight-read strong{font:900 clamp(58px,6vw,84px)/.9 var(--display);font-variant-numeric:tabular-nums}
.weight-read span{font:500 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
#website.society-bold .jo-card p{margin:0 0 10px;font-size:14px;line-height:1.55}
.early-bars{display:flex;align-items:flex-end;gap:3px;height:120px;margin-bottom:10px}
.early-bars i{flex:1;height:calc(var(--h)*100%);background:var(--ink)}
.early-bars i:first-child{background:var(--lemon);box-shadow:inset 0 0 0 1.5px var(--ink)}
.early-axis{display:flex;justify-content:space-between;margin-bottom:18px;font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* ---------- WL Checker: one wallet, one answer ---------- */
#website.society-bold .wl-checker{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,5vw,72px);align-items:center;padding:clamp(40px,5vw,72px) var(--gutter) clamp(24px,3vw,40px);background:var(--paper);outline:none}
#website.society-bold .wl-intro h1{margin:6px 0 18px;font:900 clamp(54px,7vw,112px)/.86 var(--display);letter-spacing:-.03em;text-transform:uppercase}
.wl-side{position:relative;isolation:isolate}
/* The Stray stands behind the card with only the foot of its polaroid tucked under the card's top edge. */
/* The crew above the wallet card: a wide print taped up, the card slid over its lower edge. */
.wl-crew{position:relative;z-index:0;margin:0 0 -34px;padding:8px;background:#fbfaf5;box-shadow:0 18px 30px -16px #14120f99;transform:rotate(-1.5deg)}
.wl-crew img{display:block;width:100%;height:auto}
.wl-crew::before,.wl-crew::after{content:'';position:absolute;z-index:1;top:-11px;width:76px;height:22px;background:linear-gradient(180deg,#fffaf0a8,#ece2c2c4 55%,#e2d6b0c4),repeating-linear-gradient(90deg,#0000 0 2px,#0000000d 2px 3px);clip-path:polygon(3% 0,97% 0,100% 14%,96% 28%,100% 42%,96% 57%,100% 71%,96% 86%,99% 100%,2% 100%,0 86%,4% 71%,0 57%,4% 42%,0 28%,4% 14%)}
.wl-crew::before{left:12%;transform:rotate(-7deg)}
.wl-crew::after{right:14%;transform:rotate(6deg)}
.wl-side>.wl-card{z-index:1}

@media(max-width:900px){#website.society-bold .wl-checker{grid-template-columns:minmax(0,1fr)}#website.society-bold .wl-intro h1{font-size:clamp(48px,14vw,72px)}}
.wl-card{position:relative;padding:clamp(22px,3vw,36px);background:#fbfaf5;box-shadow:inset 0 0 0 1.5px var(--ink),6px 6px 0 var(--ink)}
.wl-card label{display:block;margin:0 0 10px;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.og-row{display:flex;gap:8px}
.og-row input{flex:1;min-width:0;min-height:52px;padding:0 14px;border:1.5px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);font:500 15px/1 var(--mono)}
.og-row input:focus-visible{outline:3px solid var(--lemon);outline-offset:0}
#website.society-bold .wl-result{margin:18px 0 12px}
#website.society-bold .wl-result:empty{display:none}
#website.society-bold .wl-result b{display:block;font:900 clamp(26px,3vw,36px)/1.05 var(--display);text-transform:uppercase}
#website.society-bold .wl-result p{margin:6px 0 0;font-size:15px}
#website.society-bold .wl-result.is-gtd,#website.society-bold .wl-result.is-fcfs,#website.society-bold .wl-result.is-frames{position:relative;padding:20px 22px;color:var(--ink);background:var(--lemon);box-shadow:4px 4px 0 var(--ink)}
#website.society-bold .wl-result.is-fcfs{background:#ff8a3d}
/* Frame holders: the free mint, in the site's ink with lemon type. */
#website.society-bold .wl-result.is-frames{background:var(--ink);color:#f6f5ef;box-shadow:4px 4px 0 var(--lemon)}
#website.society-bold .wl-result.is-frames b{color:var(--lemon)}
.is-frames .wl-badge{background:var(--lemon);color:var(--ink)}
#website.society-bold .wl-result.is-no{padding:16px 18px;border:1.5px dashed var(--ink)}
#website.society-bold .wl-result.is-error b{color:#b3261e;font-size:22px}
#website.society-bold .wl-result.is-wait b{font-size:22px}
.wl-badge{position:absolute;top:-14px;right:14px;padding:6px 12px;background:var(--ink);color:var(--lemon);font:400 22px/1 'Permanent Marker',cursive;transform:rotate(4deg)}
.is-fcfs .wl-badge{color:#ff8a3d}
#website.society-bold .wl-note{max-width:46ch;margin:0;font-size:14px;color:var(--muted)}
.wl-checker .sf-button{margin-top:16px}
/* The check button stays beside the field at every width, level with it (the general button rules would push it
   below the field on phones and 16px down on desktop). */
.wl-checker .og-row .sf-button{flex:0 0 auto;margin-top:0;min-height:52px;padding-inline:22px}

/* ---------- The closing band: give a Stray a home, on OpenSea ---------- */
.sf-join.sf-adopt{grid-template-columns:minmax(0,1fr) auto;gap:24px clamp(28px,5vw,72px);padding-top:clamp(36px,4vw,52px);padding-bottom:clamp(36px,4vw,52px);overflow:hidden}
#website .sf-adopt .sf-call h2{font-size:clamp(44px,5vw,84px);line-height:.86;margin-bottom:12px}
#website .sf-adopt .sf-call p:not(.rd-label){max-width:44ch;font-size:15px;line-height:1.5}
.sf-adopt .sf-actions{justify-content:flex-start;margin-top:20px}
#website[data-route="mint"] .sf-adopt .to-checker{display:none}
.sf-button.is-soon{cursor:default}
.sf-button.is-soon:hover{gap:10px;background:var(--ink)}
.ad-board{position:relative;display:flex;justify-content:center;padding:10px 12px 18px}
.ad-board figure{width:clamp(104px,11vw,160px);margin:0 -5px;padding:7px 7px 28px;background:#fbfaf5;box-shadow:0 16px 26px -14px #14120fa6;position:relative}
.ad-board figure:nth-child(1){transform:rotate(-7deg) translateY(10px)}
.ad-board figure:nth-child(2){transform:rotate(3deg);z-index:1}
.ad-board figure:nth-child(3){transform:rotate(9deg) translateY(14px);z-index:2}
.ad-board img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#e6e4dc}
.ad-board figcaption{position:absolute;left:9px;bottom:6px;font:400 clamp(12px,1.2vw,16px)/1 'Permanent Marker',cursive;color:#14120f}
.ad-tag{position:absolute;right:4%;top:-4px;z-index:3;padding:6px 14px 8px;background:var(--ink);color:var(--lemon);font:400 clamp(18px,2vw,26px)/1 'Permanent Marker',cursive;transform:rotate(-6deg);box-shadow:3px 3px 0 #14120f55}
/* Game buttons before the token: a label, not an action. */
#website button.is-soon{cursor:default;opacity:.75}
@media(max-width:800px){
  .sf-join.sf-adopt{grid-template-columns:1fr}
  .sf-adopt .ad-board{order:-1;padding-top:14px}
  .ad-board figure{width:min(30%,130px)}
}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .doors{grid-template-columns:1fr 1fr}
  .door-protocol{grid-column:1/-1;min-height:300px}
  .door-protocol img{width:32%}
  .lc-steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:26px}
  .lc-steps li:nth-child(4){padding-left:0;border-left:0}
  .lc-steps li:nth-child(4)::before{left:0}
  .jo-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .doors-head,.lr-head,.lc-head{display:block}
  #website.society-bold .doors-head p,#website.society-bold .lr-head p,#website.society-bold .lc-head p{margin-top:14px;text-align:left}
  .doors{grid-template-columns:1fr}
  .door,.door-protocol{min-height:300px}
  .door img,.door-protocol img{width:44%}
  .page-intro{grid-template-columns:1fr}
  #website.society-bold .page-intro h1{font-size:clamp(50px,15vw,72px)}
  #website.society-bold .page-lede{font-size:16px}
  .page-jump a{min-height:36px;padding:6px 12px;font-size:13px}
  /* Phones keep the table, one compact row per level, instead of eight tall cards. */
  .level-rules th,.level-rules td{padding:9px 6px 9px 0;font-size:12px;line-height:1.3}
  .level-rules thead th{font-size:9.5px;letter-spacing:.04em}
  .level-rules tbody th{font-size:18px}
  .level-rules tr.is-current th{padding-left:8px}
  .level-rules td small{display:none}
  .lr-facts{grid-template-columns:1fr}
  .lc-steps{grid-template-columns:1fr;border-top:0;border-left:2px solid var(--ink)}
  .lc-steps li,.lc-steps li+li,.lc-steps li:nth-child(4){padding:0 0 22px 22px;border-left:0}
  .lc-steps li::before,.lc-steps li+li::before,.lc-steps li:nth-child(4)::before{top:4px;left:-7px}
  .rd-steps{grid-template-columns:1fr}
  .rd-steps li:not(:last-child)::after{top:auto;bottom:-13px;right:auto;left:28px;transform:rotate(135deg)}
  .next-card{min-height:400px;padding:28px var(--gutter)}
  #website.society-bold .next-card p{max-width:24ch}
  .next-card img{top:auto;bottom:6%;right:-5%;width:44%;transform:rotate(8deg)}
  .next-card:hover img{transform:rotate(5deg) translateY(-6px)}
  .tk-head{display:block}
  #website.society-bold .tk-lede{margin-top:16px}
  .tk-stats{grid-template-columns:1fr 1fr}
  .tk-stats div:nth-child(3){padding-left:0;border-left:0}
  .tk-stats div:nth-child(n+3){border-top:1px solid var(--line)}
  .tk-uses{grid-template-columns:1fr}
}
@media(max-width:1100px){
  .sf-join{grid-template-columns:auto minmax(0,1fr)}
  .sf-actions{grid-column:1/-1;justify-content:flex-start}
  .sf-main{grid-template-columns:1fr 1fr}
  .sf-links{grid-column:1/-1;grid-row:2}
  .sf-clock{grid-column:2;grid-row:1}
}
@media(max-width:1000px){.tk-uses{grid-template-columns:1fr 1fr}.tk-burn{grid-column:1/-1}}
@media(max-width:700px){
  .sf-join{grid-template-columns:1fr}
  .sf-crew img{width:38px;height:38px;margin-left:-12px;border-width:2px}
  .sf-crew{padding-left:12px}
  .sf-button{flex:1 1 100%;justify-content:center}
  .sf-main{grid-template-columns:1fr;gap:34px}
  .sf-links,.sf-clock{grid-column:auto;grid-row:auto}
  .sf-links{grid-template-columns:1fr 1fr;row-gap:30px}
  .sf-clock{padding:26px 0 0;border-left:0;border-top:1px solid #34322f}
  .sf-legal{flex-direction:column;align-items:flex-start}
  .tk-uses{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.door,.door img,.door-go,.next-card,.next-card img,.next-go,.sf-crew img{transition:none}.sf-clock dt::after{animation:none;opacity:0}}
body.paused .sf-clock dt::after{animation:none;opacity:0}

/* Polish: one heading per topic. */
#website.society-bold[data-route=protocol] #fees-guide .fee-heading>h2,#website.society-bold[data-route=protocol] #fees-guide .fee-heading>p{display:none}
#website.society-bold[data-route=protocol] #fees-guide .control-tabs{margin-top:0}
#website.society-bold[data-route=protocol] #fees-guide .fee-heading>.text-link{display:none}
#website.society-bold .control-room .control-panel:focus-visible{outline:1px solid #615f5c;outline-offset:10px}

/* Content is visible immediately: no scroll-driven heading fades anywhere. */
#website.society-bold .home-section h2{animation:none!important;opacity:1;translate:none}

/* Page changes cross-fade (society-pages.js); the terminal switches this off for its own transition. */
::view-transition-group(root){animation-duration:.32s}

/* ---------- Header: the terminal is one of the main calls to action ---------- */
#website>header .terminal-cta{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 20px;border:2px solid var(--ink);background:#ff6b1a;color:var(--ink);font:900 21px/1 var(--display);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;white-space:nowrap;box-shadow:4px 4px 0 var(--ink);transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s}
#website>header .terminal-cta:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:#ff7e36}
#website>header .terminal-cta:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
#website.society-bold>header .terminal-cta svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.8}
#website>header .terminal-cta:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
@media(max-width:800px){#website>header .terminal-cta{min-height:40px;padding:0 14px;font-size:18px;box-shadow:3px 3px 0 var(--ink)}}
@media(prefers-reduced-motion:reduce){#website>header .terminal-cta{transition:none}}
/* The whitepaper as a note taped up left of the Terminal button: "Rulebook" in marker, its plain name under it. The
   menu keeps the middle between the logo and the note. */
#website>header nav{margin-inline:auto}
#website>header .rulebook-cta{position:relative;display:inline-flex;flex-direction:column;justify-content:center;gap:4px;min-height:46px;padding:5px 14px 6px 12px;border:2px solid var(--ink);background:#fffdf4;color:var(--ink);text-decoration:none;white-space:nowrap;transform:rotate(-3deg);box-shadow:3px 3px 0 var(--ink);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
#website>header .rulebook-cta::before{content:'';position:absolute;top:-9px;left:50%;width:48px;height:16px;margin-left:-24px;background:linear-gradient(180deg,#fffaf0a8,#ece2c2c4 55%,#e2d6b0c4),repeating-linear-gradient(90deg,#0000 0 2px,#0000000d 2px 3px);clip-path:polygon(3% 0,97% 0,100% 14%,96% 28%,100% 42%,96% 57%,100% 71%,96% 86%,99% 100%,2% 100%,0 86%,4% 71%,0 57%,4% 42%,0 28%,4% 14%);transform:rotate(-4deg);pointer-events:none}
#website>header .rulebook-cta b{font:400 20px/1 'Permanent Marker',Impact,cursive}
#website>header .rulebook-cta small{font:500 9px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#5f5d59}
#website>header .rulebook-cta:hover{transform:rotate(1deg) translateY(-2px);box-shadow:5px 5px 0 var(--ink)}
#website>header .rulebook-cta:active{transform:rotate(0) translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
#website>header .rulebook-cta:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
@media(max-width:800px){#website>header .rulebook-cta{min-height:40px;margin-left:auto;padding:4px 11px 5px 10px}#website>header .rulebook-cta b{font-size:17px}#website>header .rulebook-cta small{font-size:8px}}
/* 801 to 999 px: logo, note and Terminal no longer fit one row with the menu, so the menu takes a row of its own,
   as on phones. */
@media(min-width:801px) and (max-width:999px){#website>header{flex-wrap:wrap;row-gap:4px}#website>header nav{order:3;width:100%;justify-content:space-between}#website>header .rulebook-cta{margin-left:auto}}
/* Phones below 481 px: the bar holds only the logo and Terminal, so the note becomes the menu's last entry. */
#website>header nav .nav-rulebook{display:none}
@media(max-width:480px){#website>header .rulebook-cta{display:none}#website>header nav .nav-rulebook{display:inline-block;font:400 15px/1 'Permanent Marker',Impact,cursive;transform:rotate(-3deg)}}
@media(prefers-reduced-motion:reduce){#website>header .rulebook-cta{transition:none}}

/* ---------- Footer: X account, legal links, motion switch ---------- */
/* The X accounts as cards: profile picture, name and role, the X mark at the end. */
.sf-accounts{display:grid;gap:10px;max-width:300px;margin-top:22px}
#website .sf-account{display:flex;align-items:center;gap:12px;padding:9px 16px 9px 9px;border:1px solid #34322f;border-radius:14px;background:#1b1916;color:#f4f2ef;transition:border-color .2s,background-color .2s,transform .2s}
#website .sf-account:hover{border-color:var(--lemon);background:#211f1b;transform:translateY(-1px)}
.sf-account img{flex:none;width:42px;height:42px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px #3d3b37}
.sf-account span{display:grid;gap:3px;min-width:0;margin-right:auto}
.sf-account b{font-size:15px;font-weight:700;line-height:1.1}
.sf-account small{font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#9d9b97}
#website .sf-account .sf-x{flex:none;width:15px;height:15px;fill:#cfcdca;stroke:none;transition:fill .2s}
#website .sf-account:hover .sf-x{fill:var(--lemon)}
@media(prefers-reduced-motion:reduce){#website .sf-account,#website .sf-account:hover{transition:none;transform:none}}
/* Official contracts under the X link: one row per contract, a short note until its address is set. */
.sf-verify{margin-top:26px}
#website .sf-verify h3{margin-bottom:10px}
.sf-contracts{display:grid;gap:8px;margin:0}
.sf-contracts div{display:flex;align-items:baseline;gap:12px}
.sf-contracts dt{min-width:64px;font:500 11px/1.4 var(--mono);letter-spacing:.06em;color:#cfcdca}
.sf-contracts dd{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin:0;font-size:13px;color:#b1afac}
#website .sf-contracts a{font:500 13px/1.4 var(--mono);color:#f4f2ef;text-decoration:underline;text-underline-offset:3px}
#website .sf-contracts a:hover{color:var(--lemon)}
.sf-copy{padding:2px 9px;border:1px solid #34322f;border-radius:999px;background:none;color:#cfcdca;font:500 11px/1.4 var(--mono);cursor:pointer}
.sf-copy:hover{border-color:var(--lemon);color:var(--lemon)}
.sf-legal-links{display:flex;gap:16px}
#website .sf-legal-links a{font-size:12px;font-weight:600;color:#cfcdca}
#website .sf-legal-links a:hover{color:var(--lemon)}
.sf-legal-end{display:inline-flex;align-items:center;gap:18px}
@media(max-width:700px){.sf-legal-links{flex-wrap:wrap}}
/* Street grain over the whole website, paper and dark sections alike, like a poster pasted on a wall. */
#website::after{content:'';position:fixed;inset:0;z-index:60;pointer-events:none;background:var(--site-grain,none) 0 0/256px 256px}
#website[hidden]::after{display:none}
/* Six menu items since the Mint page: between the phone layout (800px) and the desktop, keep each item on one line. */
#website>header nav a{white-space:nowrap}
/* Up to 1199 px the bar has the Rulebook note too, so the compact sizes reach that far. */
@media(min-width:801px) and (max-width:1199px){#website>header{gap:16px}#website>header nav{gap:14px!important;font-size:12.5px!important}#website>header .brand img{width:170px;height:44px}}
/* Home: the four steps from mint to winnings (the race-day cards, four across, each with its character). */
.hs-steps{grid-template-columns:repeat(4,minmax(0,1fr))}
#website.society-bold .hs-steps li{display:flex;flex-direction:column;padding-top:0;overflow:hidden}
/* Square like the art itself, so the whole character shows; a wider frame cut off feet, cameras and props. */
.hs-steps img{display:block;width:calc(100% + 48px);max-width:none;height:auto;aspect-ratio:1;object-fit:cover;object-position:50% 10%;margin:0 -24px 18px;border-bottom:3px solid var(--lemon)}
#website.society-bold .hs-steps p{flex:1}
@media(max-width:700px){
  /* Phones: the picture sits beside the text instead of a full-width banner, so four steps fit one screen or two. */
  #website.society-bold .hs-steps li{display:grid;grid-template-columns:88px minmax(0,1fr);column-gap:16px;align-items:start;padding:16px}
  .hs-steps img{grid-row:1/span 4;width:88px;height:88px;aspect-ratio:1;margin:0;border:0;box-shadow:0 0 0 2px var(--lemon)}
  #website.society-bold .hs-steps li>*:not(img){grid-column:2}
  .hs-steps b{margin:6px 0}
  #website.society-bold .hs-steps p{font-size:13px}
  .hs-steps a{margin-top:8px}
}
.hs-steps a{display:inline-flex;align-items:center;gap:6px;margin-top:16px;color:var(--lemon);font-weight:700;font-size:14px}
.hs-steps a svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4}
.hs-steps a:hover{text-decoration:underline}
@media(max-width:1000px){.hs-steps{grid-template-columns:1fr 1fr}.hs-steps li:nth-child(2)::after{display:none}}
@media(max-width:700px){.hs-steps{grid-template-columns:1fr}.hs-steps img{aspect-ratio:16/6}}

/* The edition line under the hero: dark enough to read (WCAG AA, 4.5:1 on paper). */
#website .edition small{color:#5f5d59}
/* Phones go from the hero straight to the collection, which opens with the same "12 species, up to 1,888" line. */
@media(max-width:700px){#website .hero .edition{display:none}}

/* Phones: where the menu overflows the bar, a fade at the right edge says it scrolls, and goes once it has scrolled
   to the end. */
@media(max-width:480px){
  #website.society-bold>header nav{gap:14px!important}
  #website.society-bold>header nav.is-scrollable:not(.is-at-end){-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
}
/* Games: the two posters share one set of rows, so label, title, picture, facts, text, button and the disclosure line
   up across both, also when one of them opens. Stacked on narrow screens. */
@supports (grid-template-rows:subgrid){
  @media(min-width:901px){
    #website.society-bold .games-crossing.games-posters{align-items:stretch}
    #website.society-bold .games-posters>article{display:grid;grid-row:span 8;grid-template-rows:subgrid;row-gap:0;align-content:start}
    #website.society-bold .games-posters>article>*{min-width:0;align-self:start}
    #website.society-bold .games-posters>article>.poster-race{align-self:stretch}
    #website.society-bold .games-posters>article>.primary{justify-self:start}
    #website.society-bold .games-posters article>p:not(.poster-label):not(.poster-note){align-self:end}
  }
}
/* The Daily Jackpot before it opens (SocietyData.jackpotLocked): blurred under "Coming soon". */
#website .is-soon-veiled{position:relative}
#website .is-soon-veiled .veil-blur{filter:blur(7px);opacity:.55;user-select:none;pointer-events:none}
#website .soon-veil{position:absolute;left:0;right:0;top:56%;z-index:3;display:grid;justify-items:center;gap:8px;margin:0;transform:translateY(-50%);pointer-events:none;text-align:center}
#website .soon-veil span{display:inline-flex;align-items:center;gap:10px;padding:13px 20px 12px;background:var(--ink);color:var(--lemon);font:900 clamp(22px,2.2vw,30px)/1 var(--display);text-transform:uppercase;letter-spacing:.02em;box-shadow:4px 4px 0 #14120f33}
#website .soon-veil svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2}
#website .soon-veil small{padding:6px 10px;background:#fbfaf5;color:var(--ink);font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;box-shadow:inset 0 0 0 1.5px var(--ink)}
#website #jackpot-weight .soon-veil{top:62%}
/* Phones (owner 2026-10-13): the hero goes straight to the collection, without the star and its round-up note.
   Hidden, the star's animation pauses on its own. Wider screens keep it. */
@media(max-width:700px){#website .hero .hero-art-column{display:none}}
/* The menu's extra lines (what a page holds, "coming soon") and its Menu button belong to the phone menu only. */
#website>header .nav-toggle,#website>header nav .nav-blurb,#website>header nav .nav-soon{display:none}
/* Above phone width the taped note is the Rulebook link, so the menu row does not repeat it. */
@media(min-width:481px){#website.society-experience>header nav a.nav-rulebook{display:none}}
/* Phones: one Menu button instead of a row that scrolls; it opens the pages as a list, each with a line on what it
   holds. A page that is still shut is greyed out and says "coming soon". */
@media(max-width:480px){
  #website.society-bold>header .nav-toggle{order:3;display:flex;align-items:center;gap:10px;width:100%;min-height:42px;margin:6px 0 2px;padding:0;border:0;border-top:1px solid #14120f1f;background:none;color:var(--ink);font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
  #website.society-bold>header .nav-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
  #website.society-bold>header .nav-toggle .nav-icon-close,#website.society-bold>header.menu-open .nav-toggle .nav-icon-open{display:none}
  #website.society-bold>header.menu-open .nav-toggle .nav-icon-close{display:block}
  #website.society-bold>header nav{position:absolute;top:100%;left:0;right:0;display:none!important;flex-direction:column;gap:0!important;max-height:calc(100dvh - 140px);margin:0;padding:4px 5% 14px;overflow-y:auto;background:var(--paper);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);box-shadow:0 22px 34px #14120f2e;font-size:16px;-webkit-mask-image:none!important;mask-image:none!important}
  #website.society-bold>header.menu-open nav{display:flex!important}
  #website.society-bold>header nav a,#website.society-bold>header nav a.nav-rulebook{display:grid!important;gap:4px;min-height:0;padding:13px 0 13px 14px;border-bottom:1px solid #14120f1a;white-space:normal;font-family:inherit;font-size:17px;font-style:normal;font-weight:600;line-height:1.2;color:var(--ink)!important;transform:none}
  #website.society-bold>header nav a:last-child{border-bottom:0}
  #website.society-bold>header nav a::after{content:none!important}
  #website.society-bold>header nav a[aria-current]{box-shadow:inset 3px 0 var(--ink)}
  #website.society-bold>header nav .nav-blurb{display:block;font-size:13px;font-weight:400;line-height:1.35;color:var(--muted)}
  #website.society-bold>header nav .nav-soon{display:inline;margin-left:8px;font-size:13px;font-style:italic;font-weight:400;color:var(--muted)}
  #website.society-bold>header nav a.is-soon{opacity:.55}
}
/* Small phones: logo and Terminal stay on one row (170 + 25 + 137 px overflowed 324 px at 360). */
@media(max-width:380px){#website.society-bold>header{column-gap:10px!important}#website.society-bold>header .brand img{width:220px;height:auto;filter:none}}
@media(max-width:340px){#website.society-bold>header .brand img{width:150px}#website.society-bold>header .terminal-cta{font-size:16px;padding:0 10px}}

/* Weights the CSS asks for but no file exists for (Plex Mono 700/900, DM Sans 800, Marker 500) used to be faked
   by the browser, smudging the letters. They now map to the nearest real cut. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700 900;font-display:swap;src:url(assets/fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:800 900;font-display:swap;src:url(assets/fonts/dm-sans-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Permanent Marker';font-style:normal;font-weight:500 900;font-display:swap;src:url(assets/fonts/permanent-marker-latin-400-normal.woff2) format('woff2')}
#website select,#website option{font-family:inherit}

/* Tap targets of at least 32px (WCAG 2.5.8 asks 24) without changing how anything looks or where it sits:
   padding widens the hit area, an equal negative margin gives the space back. */
#website .rd-steps.hs-steps>li>a{padding:10px 0;margin:6px 0 -10px}
#website .sf-legal-links>a,#website .sf-legal-end>a{padding:8px 0;margin:-8px 0}
#reroll-guide .roll-reset{padding-block:6px}
.lm-sound::after{content:'';position:absolute;inset:-6px}
/* FAQ: half the section spacing above and below, the list sat in too much air */
#website.society-bold #faq.home-section{padding-top:clamp(28px,3.1vw,48px);padding-bottom:clamp(20px,2.4vw,36px)}

/* Level rules before the protocol is revealed: the numbers blurred under a lock, the heading left readable. */
#website .level-rules.is-veiled{position:relative}
#website .level-rules.is-veiled>.lr-head>p,#website .level-rules.is-veiled>table,#website .level-rules.is-veiled>.lr-facts{filter:blur(7px);opacity:.7;user-select:none;pointer-events:none}
#website .lr-veil{position:absolute;left:0;right:0;top:52%;z-index:2;display:flex;justify-content:center;margin:0;transform:translateY(-50%);pointer-events:none}
#website .lr-veil span{display:inline-flex;align-items:center;gap:10px;padding:13px 20px 12px;background:var(--lemon);color:var(--ink);font:900 clamp(20px,2vw,26px)/1 var(--display);letter-spacing:.04em;text-transform:uppercase;box-shadow:4px 4px 0 var(--ink);transform:rotate(-2deg)}
#website .lr-veil svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2}
/* The crew print's tape: cream masking tape you can just see through, torn at both ends, fibres in the paper, a
   lighter top edge and a crease. One strip each side, set at different angles. */
.wl-crew::before,.wl-crew::after{top:-12px;width:92px;height:26px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 34' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.38'/%3E%3Cstop offset='.18' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.85' stop-color='%23a08a55' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23a08a55' stop-opacity='.28'/%3E%3C/linearGradient%3E%3Cfilter id='n' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1 .35' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .36 0 0 0 0 .24 0 0 0 .5 -.12'/%3E%3C/filter%3E%3CclipPath id='c'%3E%3Cpath d='M2.2 0.0L116.6 0.0L119.5 2.6L117.5 5.2L117.3 7.8L118.9 10.4L118.3 13.0L117.7 15.6L119.0 18.2L119.0 20.8L118.3 23.4L118.8 26.0L118.6 28.6L119.2 31.2L117.4 34.0L1.6 34.0L1.3 31.2L1.2 28.6L0.4 26.0L1.8 23.4L3.0 20.8L0.8 18.2L0.4 15.6L1.9 13.0L1.2 10.4L3.2 7.8L1.2 5.2L1.1 2.6L2.2 0.0Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23c)'%3E%3Crect width='120' height='34' fill='%23eee4c6' fill-opacity='.84'/%3E%3Crect width='120' height='34' filter='url(%23n)'/%3E%3Crect width='120' height='34' fill='url(%23g)'/%3E%3Cpath d='M41 0L47 34' stroke='%23fff' stroke-opacity='.22' stroke-width='2.5'/%3E%3Cpath d='M43.5 0L49.5 34' stroke='%238a7547' stroke-opacity='.12'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat;clip-path:none;opacity:1;filter:drop-shadow(0 1.5px 1.5px #14120f33)}
.wl-crew::before{left:10%;transform:rotate(-6deg)}
.wl-crew::after{right:12%;width:80px;transform:rotate(5deg) scaleX(-1)}
/* The star wordmark (2026-10-15): dark on the paper header, never inverted; a flat logo needs more width than the old one. */
#website>header .brand img{width:230px;height:auto;object-fit:initial;filter:none}
@media(min-width:801px) and (max-width:1199px){#website>header .brand img{width:200px}}
@media(max-width:800px){#website>header .brand img{width:180px}}
@media(max-width:380px){#website.society-bold>header .brand img{width:160px}}
@media(max-width:340px){#website.society-bold>header .brand img{width:140px}}

/* ---- The royalty pot: a card on the Protocol page and a lemon sticker in the header, both live from the chain. */
.pot-card{position:relative;max-width:760px;margin:0 0 34px;padding:22px 24px 20px;background:#fbfaf5;box-shadow:inset 0 0 0 1.5px var(--ink),6px 6px 0 var(--ink)}
#website .pot-card.is-off{display:none}
.pot-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.pot-top a{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.pot-top a svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.pot-live{display:inline-flex;align-items:center;gap:7px;color:var(--muted)}
.pot-live i{width:8px;height:8px;border-radius:50%;background:#1baf7a;box-shadow:0 0 0 0 #1baf7a80;animation:pot-pulse 2s infinite}
@keyframes pot-pulse{70%{box-shadow:0 0 0 7px #1baf7a00}100%{box-shadow:0 0 0 0 #1baf7a00}}
.pot-label{margin:18px 0 2px;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pot-amount{display:inline-block;position:relative;z-index:0;isolation:isolate;font:900 clamp(56px,9vw,92px)/.9 var(--display);letter-spacing:-.01em;color:var(--ink)}
.pot-amount::after{content:'';position:absolute;z-index:-1;left:-6px;right:-10px;bottom:6px;height:38%;background:var(--lemon);transform:rotate(-1.2deg)}
.pot-amount small{font-size:.38em;letter-spacing:.04em}
.pot-sub{max-width:52ch;margin:12px 0 18px;color:var(--muted)}
.pot-bar{display:flex;gap:3px;height:14px;margin-bottom:14px}
.pot-bar i{display:block;border:1.5px solid var(--ink)}
.pot-legend{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pot-legend li{display:grid;grid-template-columns:14px 1fr auto 44px;align-items:center;gap:10px;padding-bottom:8px;border-bottom:1px dashed #14120f30}
.pot-legend li:last-child{border-bottom:0;padding-bottom:0}
.pot-legend i{width:14px;height:14px;border:1.5px solid var(--ink)}
.pot-legend b{display:block;font-weight:700}
.pot-legend small{display:block;font:500 11px/1.4 var(--mono);color:var(--muted)}
.pot-legend em{font:600 14px/1 var(--mono);font-style:normal}
.pot-legend s{text-decoration:none;text-align:right;font:500 12px/1 var(--mono);color:var(--muted)}
#website>header .pot-cta{position:relative;display:inline-flex;flex-direction:column;justify-content:center;gap:3px;min-height:46px;padding:5px 13px 6px;border:2px solid var(--ink);background:var(--lemon);color:var(--ink);text-decoration:none;white-space:nowrap;transform:rotate(2.5deg);box-shadow:3px 3px 0 var(--ink);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
#website>header .pot-cta[hidden]{display:none}
#website>header .pot-cta{margin-left:auto;margin-right:6px}
#website>header .pot-cta:not([hidden])+.rulebook-cta{margin-left:14px}
#website>header .pot-cta::before{content:'';position:absolute;top:-9px;left:50%;width:44px;height:15px;margin-left:-22px;background:linear-gradient(180deg,#fffaf0a8,#ece2c2c4 55%,#e2d6b0c4);transform:rotate(5deg);pointer-events:none}
#website>header .pot-cta:hover{transform:rotate(0) translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
#website>header .pot-cta b{font:900 21px/1 var(--display);letter-spacing:.02em}
#website>header .pot-cta small{font:600 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
@media(max-width:1199px){#website>header .pot-cta small{display:none}}
@media(max-width:800px){#website>header .pot-cta{display:none}}
@media(prefers-reduced-motion:reduce){.pot-live i{animation:none}#website>header .pot-cta{transition:none}}