/* ---- MaMills game page -------------------------------------------------
   The sheet for mamills/index.html, and nothing else loads it. It lived in an
   inline <style> in the draft under workspace/private/per_mamills/, which the site's
   CSP (style-src 'self', no 'unsafe-inline') drops on the floor: the page
   rendered unstyled in a browser while looking finished over file://. Moving
   it to a file is what makes the page shippable.
   Paths here are relative to assets/, which is where this file sits.
   The name carries a version (mamills.css until 2026-09-19): the asset cache
   is a day, so a page that needs new rules would otherwise arrive with
   yesterday's sheet. That is how the screenshot labels stayed misaligned on
   the developer's screen after they were fixed. Bump the number, and the
   <link> in mamills/index.html, whenever markup and CSS must change together. */
/* ---------- fonts (self-hosted, zero external requests) ---------- */
@font-face{font-family:'Inter';font-weight:100 900;font-display:swap;src:url('fonts/Inter-var.woff2') format('woff2');}
@font-face{font-family:'Libre Baskerville';font-weight:400;font-display:swap;src:url('fonts/LibreBaskerville-400.woff2') format('woff2');}
@font-face{font-family:'Libre Baskerville';font-weight:700;font-display:swap;src:url('fonts/LibreBaskerville-700.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-weight:500;font-display:swap;unicode-range:U+004D,U+0061,U+0069,U+006C,U+0073;src:url('fonts/Fraunces-500.woff2') format('woff2');}

/* ---------- tokens (scripts/settings.gd is the truth) ---------- */
:root{
  --paper:        #F0EBDB;
  --paper-light:  #F7F2E0;
  --paper-hi:     #FCEBBD;
  --ink:          #1A1A1F;
  --ink-faint:    #6B6861;
  --mustard:      #F7D44D;
  --mustard-deep: #E8BD33;
  --red:          #C8463B;
  --blue:         #4A7CB5;
  --green:        #5CB06E;
  /* piece fills only */
  --violet:       #8C68D6;  --leaf:      #65B860;
  --cb-blue:      #0072B2;  --cb-orange: #E69F00;
  --gold:         #D4AF37;  --silver:    #ABAEB4;

  --serif: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter:  clamp(1rem, 4vw, 2rem);
  --section: clamp(3.5rem, 9vw, 6.5rem);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{overflow-x:clip;-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--paper);color:var(--ink);font:400 clamp(1rem, .95rem + .25vw, 1.0625rem)/1.55 var(--sans);}
img,svg,video{max-width:100%;}
img{height:auto;}
p{margin:0 0 1rem;}
main p{max-width:60ch;}
.wrap{width:min(100% - 2*var(--gutter), 1040px);margin-inline:auto;}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--mustard);text-decoration-thickness:2px;text-underline-offset:3px;}
a:hover{text-decoration-color:var(--mustard-deep);}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;}
p a:focus-visible,.link:focus-visible,.links a:focus-visible{border-radius:4px;}
.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;}
.defs{position:absolute;width:0;height:0;overflow:hidden;}

/* ---------- type ---------- */
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:700;}
h1{font:500 clamp(3.5rem, 2rem + 7vw, 6.5rem)/0.9 'Fraunces', var(--serif);letter-spacing:-.01em;color:var(--ink);white-space:nowrap;}
h2{font-size:clamp(1.625rem, 1.25rem + 1.6vw, 2.375rem);line-height:1.15;letter-spacing:-.005em;margin:0 0 1rem;}
h3{font-size:clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);line-height:1.25;}
.pitch{font:400 clamp(1.125rem, 1rem + .6vw, 1.5rem)/1.4 var(--serif);max-width:32ch;margin:1.25rem auto 1.75rem;}
/* The plain line under the pitch (2026-09-14): what the game is and where it
   runs, in words a search can match - "3D", "board game", the four platforms -
   which the page otherwise only said in its metadata. */
.platforms{font-size:.9375rem;line-height:1.5;color:var(--ink-faint);max-width:44ch;margin:-1rem auto 1.5rem;}
.eyebrow{display:flex;align-items:center;gap:.5rem;margin:0 0 .6rem;font:700 .75rem/1 var(--sans);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-faint);}
.eyebrow .mark{width:15px;height:21px;flex:none;}
.caption,.sig,.contact,.copyright{font:400 .8125rem/1.4 var(--sans);color:var(--ink-faint);}

/* ---------- skip link ---------- */
.skip{position:absolute;left:50%;top:.5rem;z-index:10;transform:translate(-50%,-200%);padding:.6rem 1rem;border:2px solid var(--ink);border-radius:999px;background:var(--paper-light);box-shadow:3px 3px 0 var(--ink);font:700 .9375rem/1 var(--sans);color:var(--ink);text-decoration:underline;text-decoration-color:var(--mustard);text-decoration-thickness:2px;text-underline-offset:3px;}
.skip:focus{transform:translate(-50%,0);}

/* ---------- CTA: the composite pill ---------- */
/* silhouette = the in-game composite pill (ui_theme.gd make_button_with_glyph): mirrored-asymmetric
   corners, top-left + bottom-right soft (0.34 x height, 19px at 56px), top-right + bottom-left sharp (3px);
   the glyph cell repeats the same corners so its 2px ink seam arcs at the bottom.
   Shadow and press motion are the page's own hard-offset design, kept as is. */
.cta{--cta-soft:19px;--cta-sharp:3px;
     /* padding:0 and font:inherit date from the day this was a <button>
        (2026-09-11 to 2026-09-12): a button carries a user-agent padding of
        1px 6px, and that inset left a band of paper between the mustard cell
        and the ink border. Harmless on the link, and kept so the two stay
        the same if it ever changes back. */
     padding:0;font:inherit;
     display:inline-flex;align-items:stretch;min-height:56px;border:2px solid var(--ink);
     border-radius:var(--cta-soft) var(--cta-sharp) var(--cta-soft) var(--cta-sharp);
     background:var(--paper-light);color:var(--ink);text-decoration:none;overflow:hidden;
     box-shadow:3px 3px 0 var(--ink);transition:transform .12s ease, box-shadow .12s ease, background-color .12s;}
/* No radius of its own: .cta is overflow:hidden, so the tab is clipped to the
   button's corners already. Rounding it a second time - by two pixels less -
   left a sliver of paper between the mustard and the ink border down the left
   side, which is what made the cell look unfilled. */
.cta__tab{display:grid;place-items:center;width:56px;flex:none;background:var(--mustard);
     border-right:2px solid var(--ink);border-radius:0;}
/* The Steam mark sits in a filled ink disc, the mark itself knocked out in the
   tab's own mustard. Drawn straight onto the <svg> - background and radius on
   it, content-box padding for the ring - so it needs no extra element. */
.cta__tab svg{width:24px;height:24px;display:block;box-sizing:content-box;padding:3px;
  border-radius:50%;background:var(--ink);color:var(--mustard);}
.cta:hover .cta__tab svg{color:var(--mustard-deep);}
/* Everywhere else the mark is ink, as it was when the symbol carried the fill. */
.chip--steam svg, .card svg use[href="#steam"]{color:var(--ink);}
.cta__body{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:.55rem 1.4rem .55rem 1rem;}
.cta__body b{font:700 1.0625rem/1.1 var(--sans);white-space:nowrap;}
.cta__body small{font:500 .75rem/1.2 var(--sans);color:var(--ink-faint);}
/* The "Coming Soon" stamp that hung off both Wishlist buttons from 2026-09-11
   to 2026-09-12, and the disabled state under it, are gone: the store opened.
   DESIGN.md keeps the record. */
.cta:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink);background:var(--paper-hi);}
.cta:hover .cta__tab{background:var(--mustard-deep);}
.cta:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.cta:focus-visible{outline:3px solid var(--blue);outline-offset:3px;}

/* ---------- card ---------- */
.card{background:var(--paper-light);border:2px solid var(--ink);border-radius:14px;
      box-shadow:4px 4px 0 var(--ink);padding:clamp(1rem, 2.2vw, 1.5rem);position:relative;}
.card h3{margin:.9rem 0 .35rem;}
.card p{margin:0;color:var(--ink);}
.card .ill{height:clamp(170px, 18vw, 220px);}
.card .ill svg{width:100%;height:100%;display:block;}
.card--palette{padding:1rem;text-align:center;}
.card--palette svg{width:100%;max-width:140px;height:auto;margin-inline:auto;display:block;}
.card--palette h3{font-size:1rem;margin:.5rem 0 .2rem;}
.card--palette p{font-size:.8125rem;color:var(--ink-faint);}

/* ---------- stamp (used exactly three times) ---------- */
.stamp{position:absolute;display:inline-block;padding:.42em .7em;border:2.5px solid currentColor;border-radius:6px;
       box-shadow:inset 0 0 0 2px var(--paper), inset 0 0 0 3.5px currentColor;
       color:#9E2D24;/* 4.7:1 on paper at the stamp's .85 opacity (WCAG 1.4.3); the game red #C8463B only reached 3.3:1 */background:transparent;font:800 .6875rem/1 var(--sans);
       letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;text-align:center;
       transform:rotate(var(--rot,-8deg));opacity:.85;mix-blend-mode:multiply;pointer-events:none;}
.stamp small{display:block;font-size:.5625rem;letter-spacing:.1em;margin-top:.3em;}

/* ---------- hero ---------- */
.hero{padding-top:clamp(1.25rem, 4vw, 2.5rem);}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr);text-align:center;}
.presenter{display:flex;align-items:center;justify-content:center;gap:.6rem;margin:0 0 1.25rem;font:700 .8125rem/1 var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint);}
.presenter b{font-weight:800;color:var(--ink);}
.presenter img{width:22px;height:21px;display:block;}
.presenter .flip{transform:scaleX(-1);}
.cta-row{display:flex;flex-direction:column;align-items:center;gap:1rem;}
/* Steam Next Fest, October 19 to 26, 2026 (added 2026-09-19): the one Next
   Fest line on this page, in the sign-off, in the developer's words. Take it
   down after the fest; tools/check.sh reminds from October 27. */
.fest-line{font-weight:600;}

.board-wrap{position:relative;isolation:isolate;width:min(100%, 420px);margin:2rem auto 0;}
.board-wrap::before{content:"";position:absolute;left:50%;top:50%;width:min(112%, 100% + 2*var(--gutter) - 4px);aspect-ratio:1.18;transform:translate(-50%,-50%);border-radius:50%;background:var(--paper-hi);z-index:-1;}
.board{display:block;width:100%;height:auto;max-width:520px;}
.board .drop{transform-box:fill-box;animation:drop .7s cubic-bezier(.3,0,.2,1) .35s both;}
.board .flash{opacity:0;animation:flash .5s ease 1.05s both;}
/* the spotlight: once the winning cylinder lands, everything that did not win steps back and the four get their white rim (same as in the game) */
.board .lose{animation:dim .45s ease 1.9s both;}
@keyframes dim{to{opacity:.45}}
.stamp--hero{left:2%;bottom:6%;animation:thump .25s ease-out 1.15s both;}
@keyframes drop{0%{transform:translateY(-70px);opacity:0} 15%{opacity:1} 80%{transform:translateY(3px)} 100%{transform:translateY(0)}}
@keyframes flash{from{opacity:0} to{opacity:1}}
@keyframes thump{from{transform:rotate(var(--rot)) scale(1.25);opacity:0} to{transform:rotate(var(--rot)) scale(1);opacity:.85}}

/* ---------- sections ---------- */
section{padding-top:var(--section);}
.grid-3{display:grid;grid-template-columns:1fr;gap:1.25rem;}
.grid-4{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;}

/* screenshots */
/* phones: the four screenshots stack full-width so nothing hides off-screen; from 640px a 2x2 grid */
.shots{display:grid;grid-template-columns:1fr;gap:1.25rem;}
.shots figure{margin:0;min-width:0;}
.shots .frame{border:2px solid var(--ink);border-radius:10px;box-shadow:4px 4px 0 var(--ink);background:var(--paper);padding:0;}
.shots img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px;}
.shots figcaption{margin-top:.6rem;}

/* the four accessibility features that matter most: highlighted tiles on the paper-hi ground */
.keys{display:grid;grid-template-columns:1fr;gap:.9rem;list-style:none;margin:1.75rem 0 2rem;padding:0;}
.key{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:.85rem;row-gap:.2rem;align-items:start;
     padding:.95rem 1rem 1rem;border:2px solid var(--ink);border-radius:12px;background:var(--paper-hi);box-shadow:3px 3px 0 var(--ink);}
.key__icon{grid-row:1 / span 2;width:44px;height:44px;display:block;}
.key b{font:700 1.0625rem/1.2 var(--serif);color:var(--ink);}
.key span{font-size:.875rem;line-height:1.45;color:var(--ink);}
/* palettes + facts */
.card--palette .stamp{top:-.55rem;right:-.6rem;}
.access{display:grid;grid-template-columns:1fr;gap:1.25rem 2rem;margin:2rem 0 0;}
.access__group h3{margin:0 0 .5rem;font:700 1.0625rem/1.2 var(--serif);}
.access__group ul{list-style:none;margin:0;padding:0;}
/* list marks: a mini cylinder per line — the page's own #cyl symbol (to the game's proportions) in the group's piece colour */
.access__group li{position:relative;padding-left:1.75rem;margin:0 0 .55rem;font-size:.9375rem;line-height:1.45;}
.li-mark{position:absolute;left:0;top:-.08em;width:17px;height:24px;display:block;}
/* 02: the four modes are cards like the how-it-plays steps */
.modes{display:grid;grid-template-columns:1fr;gap:1rem;}
.mode{padding:1.1rem 1.15rem 1.25rem;display:flex;flex-direction:column;}
/* the mode picture: a framed little stage on the warm paper so the platform reads at a glance */
.mode > .mode__pic{display:block;width:100%;max-width:200px;height:auto;aspect-ratio:160/96;margin:0 0 .8rem;padding:.35rem .4rem 0;background:var(--paper-hi);border:1.5px solid var(--ink);border-radius:10px;}
.mode .plat{margin:0 0 .35rem;}
.chip--plat{display:inline-flex;align-items:center;gap:.35em;padding:.22rem .6rem;border:1.5px solid var(--ink);border-radius:999px;background:var(--mustard);font:800 .6875rem/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);}
.chip--plat svg{width:15px;height:15px;display:block;}
.mode .tag{margin:0 0 .3rem;font:800 .6875rem/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);}
.mode h3{margin:0 0 .55rem;font-size:1.125rem;}
.mode li{font-size:.9rem;}
.mode li:last-child{margin-bottom:0;}
/* 03: a chip names each screenshot; captions lead with a bold beat */
.shots figure{position:relative;}
/* the screenshot labels sit in the still's empty bottom-left corner (the board is centred, the HUD hugs the top corners),
   on mustard with the page's hard offset shadow so they read at a glance. Each chip lives inside its .frame and is
   measured from the picture's own bottom edge. Until 2026-09-19 it sat in the figure and was lifted by a guess at
   one caption line (bottom: .75rem + 2.4em), so a caption that wrapped to two lines (Halloween, Hint on) pushed its
   chip higher up the picture than the others. */
.shots .frame{position:relative;}
.shots .chip{position:absolute;left:1rem;bottom:.75rem;z-index:1;background:var(--mustard);color:var(--ink);border:2px solid var(--ink);border-radius:8px;
     padding:.38rem .8rem;font:800 .8125rem/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;box-shadow:3px 3px 0 var(--ink);}
.shots figcaption b{color:var(--ink);font-weight:700;}
/* 04: the feature groups sit on one outlined sheet under the palette cards */
.sheet{background:var(--paper-light);border:2px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);padding:1.15rem 1.3rem 1.25rem;margin-top:1.25rem;}
.sheet__eyebrow{margin:0 0 .9rem;font:800 .6875rem/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);}
.sheet .access{margin:0;gap:1.1rem 0;}
.sheet .access__note{border-top:1.5px solid rgba(26,26,31,.14);padding-top:.9rem;margin-top:1.1rem;max-width:none;}
.access__note{margin:1.25rem 0 0;max-width:62ch;font-size:.9375rem;line-height:1.5;color:var(--ink-faint);}

/* stats */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem 1rem;margin:0;padding-block:.5rem;}
/* column-reverse packs content at the BOTTOM of a stretched grid cell, so a one-line label pushed its
   number lower than its neighbours; flex-end is the top here and keeps every number and rule on one line */
.stat{display:flex;flex-direction:column-reverse;justify-content:flex-end;margin:0;}
.stat dd{margin:0;font:700 clamp(2rem, 1.5rem + 2vw, 3rem)/1 var(--serif);font-variant-numeric:tabular-nums;}
.stat dd::after{content:"";display:block;width:2.5rem;height:4px;margin:.55rem 0 .6rem;background:var(--rule,var(--ink));}
.stat dt{font:500 .875rem/1.3 var(--sans);color:var(--ink-faint);}

/* dedication */
#mami .wrap{max-width:52ch;text-align:center;padding-inline:var(--gutter);}
.empty-board{display:block;width:clamp(150px, 22vw, 210px);height:auto;margin:0 auto 1.5rem;}
.ded-title{font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2rem);margin:0 0 .6rem;}
.dedication{font:400 clamp(1.0625rem, 1rem + .4vw, 1.25rem)/1.6 var(--serif);max-width:52ch;margin:0 auto .75rem;}
.dedication .heart{width:1.05em;height:1em;vertical-align:-.12em;margin-left:.1em;}
.sig{margin:0;}

/* ---------- footer ---------- */
footer{padding-top:var(--section);padding-bottom:2rem;}
.signoff{position:relative;display:grid;grid-template-columns:1fr;gap:1.25rem;justify-items:center;text-align:center;}
.signoff .crest{width:96px;height:auto;display:block;}
.signoff .eyebrow{justify-content:center;}
.signoff h2{margin-bottom:.75rem;}
.signoff p{max-width:60ch;}
/* 2.5rem, not 1.25: set on 2026-09-11 to give the "Coming Soon" stamp its own
   row above the button. The stamp went on 2026-09-12; the air stays, since
   the mail line and the button read better apart. */
.signoff .contact{margin:0 0 2.5rem;}
/* inline mail link: padding grows the tap target to the WCAG 2.5.8 24px minimum without moving the line */
.signoff .contact a{padding:.3rem 0;}
.signoff .cta-row{align-items:center;}
.stamp--filed{top:-.5rem;right:0;}
.foot{margin-top:2.5rem;padding-top:1rem;border-top:1px solid rgba(26,26,31,.18);border-top-color:color-mix(in srgb, var(--ink) 18%, transparent);
      display:flex;flex-direction:column-reverse;align-items:center;gap:.75rem 1.5rem;}
.links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 .5rem;margin:0;padding:0;list-style:none;}
.links a{display:inline-block;padding:.5rem .25rem;font:400 .8125rem/1.4 var(--sans);color:var(--ink);text-decoration:none;}
.links a:hover{text-decoration:underline;text-decoration-color:var(--mustard-deep);text-decoration-thickness:2px;text-underline-offset:3px;}
.copyright{margin:0;padding:.5rem 0;}

/* ---------- trailer dialog (optional, the only JS) ---------- */
dialog{border:2px solid var(--ink);border-radius:14px;background:var(--paper-light);color:var(--ink);padding:0;
       width:min(92vw, 960px, calc((100vh - 8rem) * 16 / 9));width:min(92vw, 960px, calc((100dvh - 8rem) * 16 / 9));
       max-height:calc(100vh - 2rem);max-height:calc(100dvh - 2rem);box-shadow:6px 6px 0 var(--ink);}
dialog::backdrop{background:rgba(26,26,31,.6);}
.dialog__inner{padding:1rem;}
dialog video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:8px;background:var(--ink);}
.dialog__bar{display:flex;justify-content:flex-end;margin-top:.75rem;}
.dialog__note{margin:.6rem 0 0;font-size:.8125rem;color:var(--ink-faint);}
/* The trailer's text alternative (1.2.3). Closed by default so the video keeps
   the dialog; open, it scrolls inside a fixed height so the Close button stays
   on screen, and the scroller takes focus so the keyboard can scroll it. */
.dialog__desc{margin:.6rem 0 0;font-size:.875rem;}
.dialog__desc summary{cursor:pointer;font-weight:700;width:max-content;padding:.25rem 0;}
.dialog__desctext{max-height:min(14rem, 30vh);overflow:auto;margin-top:.4rem;padding:.25rem .5rem .25rem 0;}
.dialog__desctext p{margin:0 0 .5rem;line-height:1.45;}
.contact a,.dedication a{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;}
/* Windows High Contrast / forced colours: keep the piece colours on the drawn marks and cylinders,
   let everything else take the system palette (borders and outlines survive on their own) */
@media (forced-colors: active){
  .li-mark,.key__icon,.cta__tab,.chip,.stamp{forced-color-adjust:none;}
  .cta,.card,.sheet,.shots .frame,.btn,dialog{box-shadow:none;}
}
/* The way back to the studio page. This page is reached from the hero of the
   landing page, so a reader arriving here from a search result has nowhere to
   go without it. Its own row above the presenter line: centred with the rest
   of the hero on a phone, left-aligned with the text column above 900px. */
.backrow{display:flex;justify-content:center;margin:0 0 1.1rem;}
.btn--back{padding:.5rem 1.1rem;font-size:.875rem;}
.btn{display:inline-block;min-height:44px;padding:.6rem 1.2rem;border:2px solid var(--ink);border-radius:999px;background:var(--paper-light);color:var(--ink);box-shadow:3px 3px 0 var(--ink);font:700 .9375rem/1 var(--sans);cursor:pointer;}
.btn:hover{background:var(--paper-hi);}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}

/* ---------- breakpoints: sm = 640, md = 900 ---------- */
@media (max-width:300px){
  h1{font-size:3rem;}
}
@media (min-width:640px){
  .grid-3{grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,1.75rem);}
  .shots{grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.5vw,1.75rem);}
  .access{grid-template-columns:repeat(3,1fr);}
  .keys{grid-template-columns:repeat(2,1fr);}
  .modes{grid-template-columns:repeat(2,1fr);}
  .stats{grid-template-columns:repeat(3,1fr);}
  .signoff{grid-template-columns:auto 1fr;gap:2rem;align-items:start;justify-items:start;text-align:left;}
  .signoff .crest{width:128px;}
  .signoff .eyebrow{justify-content:flex-start;}
  .signoff .cta-row{align-items:flex-start;}
  .foot{flex-direction:row;justify-content:space-between;flex-wrap:wrap;}
  .links{justify-content:flex-end;}
  .copyright{padding:0;}
}
@media (min-width:900px){
  .modes{grid-template-columns:repeat(4,1fr);}
  .sheet .access{gap:0 2rem;}
  .sheet .access__group + .access__group{border-left:1.5px solid rgba(26,26,31,.14);padding-left:2rem;}
  .hero .wrap{grid-template-columns:minmax(0,11fr) minmax(0,9fr);gap:clamp(2rem,5vw,4rem);align-items:center;text-align:left;}
  .backrow{justify-content:flex-start;}
  .presenter{justify-content:flex-start;}
  .pitch{margin-inline:0;}
  .platforms{margin-inline:0;}
  .cta-row{align-items:flex-start;}
  .board-wrap{width:100%;margin:0;}
  .grid-4{grid-template-columns:repeat(4,1fr);}
  .keys{grid-template-columns:repeat(4,1fr);}
  .stats{grid-template-columns:repeat(6,1fr);}
}

/* ---------- piece colours: exact cap / edge / shade from the game's UiTheme.THEME_PALETTES ----------
   One class per colour, each carrying all four values. The draft wrote --c in a
   style="" attribute on all 64 cylinders and keyed the other three off it with
   a use[style*="#C8463B"] selector; a style attribute is inline style, which
   this site's CSP drops, so the colour has to come from the sheet. */
.c-red{--c:#C8463B;--cap:#E27265;--edge:#5A1812;--shade:#9E2914;}
.c-blue{--c:#4A7CB5;--cap:#7BA2D0;--edge:#152848;--shade:#1A4D75;}
.c-violet{--c:#8C68D6;--cap:#A893E0;--edge:#3A1E78;--shade:#5C298C;}
.c-leaf{--c:#65B860;--cap:#8FCF8B;--edge:#1F5A1C;--shade:#386B3D;}
.c-cb-blue{--c:#0072B2;--cap:#3499D4;--edge:#003D63;--shade:#004C78;}
.c-cb-orange{--c:#E69F00;--cap:#F2BD3D;--edge:#7A5400;--shade:#9A6900;}
.c-gold{--c:#D4AF37;--cap:#E8C765;--edge:#7A5C1B;--shade:#9A791B;}
.c-mustard{--c:#F7D44D;}
.c-silver{--c:#ABAEB4;--cap:#D8D8DC;--edge:#5C5C66;--shade:#6B7079;}

/* ---------- motion off ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation:none !important;transition:none !important;}
  .board .drop, .stamp{opacity:.85;transform:rotate(var(--rot,0deg));}
  .board .drop{opacity:1;transform:none;}
  .board .flash{opacity:1;}
  .board .lose{opacity:.45;}
}
@media print{
  .stamp,.cta,.skip,dialog{display:none !important;}
}

/* ---- the values that used to ride in a style="" attribute ---------------
   `style-src 'self'` carries no 'unsafe-inline', so a style attribute is
   dropped by the browser exactly like an inline <style> block is: the board
   arrived with no piece colours at all. Each attribute wrote one custom
   property from a closed set, so each set is a class here instead. The piece
   classes above carry all four values at once, which is what the attribute
   selector behind them was doing by hand. */
.mk-red{--mark:var(--red);}          .mk-blue{--mark:var(--blue);}
.mk-violet{--mark:var(--violet);}    .mk-leaf{--mark:var(--leaf);}
.mk-gold{--mark:var(--gold);}        .mk-cb-blue{--mark:var(--cb-blue);}
.mk-cb-orange{--mark:var(--cb-orange);}
.rl-red{--rule:var(--red);}          .rl-blue{--rule:var(--blue);}
.rl-violet{--rule:var(--violet);}    .rl-leaf{--rule:var(--leaf);}
.rl-gold{--rule:var(--gold);}        .rl-cb-orange{--rule:var(--cb-orange);}
/* The three stamps, each pressed on at its own angle. */
.rot-back{--rot:-12deg;}  .rot-fwd{--rot:8deg;}  .rot-tilt{--rot:-6deg;}