/* alvekyornpixel.com — Fair Isle: a knitted swatch and its squared-paper chart; one stitch = one 12 px cell */
:root {
  --ink: #2E231D;
  --ink2: #5C4A3D;
  --oat: #EDE4D1;
  --paper: #F7F2E6;
  --grid: #AEB9C0;
  --moorit: #74462A;
  --shaela: #3A2C25;
  --fawn: #C49F78;
  --madder: #9E3328;
  --indigo: #2E3D5E;
  --gold: #CF9E36;
  --white: #F8F3E8;
  --pad: 64px;
  --s: 12px;
  --seam: 1px dashed rgb(116 70 42 / .55);
  --disp: "Young Serif", Georgia, "Times New Roman", serif;
  --text: "Commissioner", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, Menlo, monospace;
}
@media (max-width: 899px) { :root { --pad: 20px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--oat); color: var(--ink); font: 400 17px/1.58 var(--text); overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--moorit); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--moorit); color: var(--paper); padding: 10px 16px; border-radius: 4px; }
.skip:focus { top: 12px; }
.in { position: relative; z-index: 1; width: 100%; max-width: 1368px; margin: 0 auto; padding: 0 var(--pad); }
.mono { font: 500 13px/1.3 var(--mono); color: var(--ink2); }
.small { font-size: 12px; }
.p { font-size: 17px; line-height: 1.58; color: var(--ink2); }
.p--ink { color: var(--ink); }
.p + .p { margin-top: 12px; }
@media (max-width: 899px) { body { font-size: 15px; } .p { font-size: 15px; } }

/* ---------- world pieces ---------- */
/* the chart paper: blue-grey rules every cell, bolder every ten */
.grid { background-color: var(--paper);
  background-image: linear-gradient(rgb(174 185 192 / .7) 1.4px, transparent 1.4px), linear-gradient(90deg, rgb(174 185 192 / .7) 1.4px, transparent 1.4px),
    linear-gradient(rgb(174 185 192 / .45) 1px, transparent 1px), linear-gradient(90deg, rgb(174 185 192 / .45) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 12px 12px, 12px 12px; }
.grid--soft { background-image: linear-gradient(rgb(174 185 192 / .55) 1.4px, transparent 1.4px), linear-gradient(90deg, rgb(174 185 192 / .55) 1.4px, transparent 1.4px),
    linear-gradient(rgb(174 185 192 / .3) 1px, transparent 1px), linear-gradient(90deg, rgb(174 185 192 / .3) 1px, transparent 1px); }
/* knitted bands from the PIL tiles (@2x → shown at half size) */
.knit { display: block; background-repeat: repeat; }
.knit--peerie { background-image: url(../img/tile-peerie.webp); background-size: 72px 60px; }
.knit--zig { background-image: url(../img/tile-zig.webp); background-size: 96px 60px; }
.knit--seed { background-image: url(../img/tile-seed.webp); background-size: 48px 24px; }
.knit--oxo { background-image: url(../img/tile-oxo.webp); background-size: 288px 180px; }
.knit--oxo-soft { background-image: url(../img/tile-oxo-soft.webp); background-size: 288px 180px; }
.band-60 { height: 60px; }
.band-24 { height: 24px; }
.sq { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 1px; background: var(--fawn); }
.sq--madder { background: var(--madder); } .sq--indigo { background: var(--indigo); } .sq--gold { background: var(--gold); }
.sq--moorit { background: var(--moorit); } .sq--shaela { background: var(--shaela); } .sq--fawn { background: var(--fawn); }
.chip { display: inline-flex; align-items: center; gap: 7px; font: 500 14px/1.2 var(--text); color: var(--ink); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 22px; border-radius: 4px; border: 1.5px solid var(--moorit); background: var(--moorit); color: var(--paper); font: 600 16px/1.2 var(--text); text-decoration: none; transition: background .15s, color .15s; }
.btn:hover { background: var(--shaela); border-color: var(--shaela); }
.btn--ghost { background: var(--paper); color: var(--moorit); }
.btn--ghost:hover { background: var(--oat); color: var(--moorit); border-color: var(--moorit); }
.btn--sm { padding: 10px 14px; font-size: 14px; }
.btn--sq { width: 48px; height: 48px; padding: 0; font-size: 18px; }
.btn[disabled] { opacity: .4; cursor: default; }
.mark { width: 33px; height: 22px; }
@media (max-width: 899px) { .btn { padding: 13px 18px; font-size: 15px; } .mark { width: 27px; height: 18px; } }

/* ---------- header: the pinned index strip ---------- */
.top { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: var(--seam); }
.top-in { max-width: 1368px; margin: 0 auto; height: 64px; padding: 0 var(--pad); display: flex; justify-content: space-between; align-items: center; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 400 22px/1.1 var(--disp); color: var(--ink); }
.nav { display: flex; gap: 6px; }
.nav a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 4px; font: 500 15px/1.2 var(--text); text-decoration: none; transition: background .15s; }
.nav a:hover { background: var(--oat); }
.nav a.on { background: var(--moorit); color: var(--paper); font-weight: 600; }
.nav a.on .sq { background: var(--paper); }
@media (max-width: 899px) {
  .top-in { height: auto; padding: 12px var(--pad) 10px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .logo { font-size: 19px; }
  .nav { gap: 4px; margin-left: -8px; }
  .nav a { padding: 7px 8px; font-size: 14px; }
  .nav a .sq { display: none; }
}

/* ---------- hero: the swatch and its chart ---------- */
.hero { display: grid; grid-template-columns: 560fr 808fr; height: 840px; max-width: 1368px; margin: 0 auto; overflow: clip; }
@media (min-width: 1369px) { .hero { max-width: none; grid-template-columns: calc(50% - 124px) calc(50% + 124px); } }
.swatch { position: relative; overflow: hidden; background: var(--shaela); }
.swatch-img { position: absolute; left: 0; top: 0; width: 684px; max-width: none; height: 840px; object-fit: cover; object-position: left top; }
@media (min-width: 1369px) { .swatch-img { left: auto; right: -124px; } }
.seam-shade { position: absolute; right: 0; top: 0; bottom: 0; width: 18px; background: linear-gradient(90deg, rgb(58 44 37 / 0), rgb(58 44 37 / .35)); }
.needle { position: absolute; left: 0; top: -2px; width: 100%; height: 40px; object-fit: cover; object-position: left; }
.yarns { position: absolute; right: -30px; bottom: -20px; width: 260px; }
.chart-side { position: relative; padding: 48px 64px 36px 204px; display: flex; flex-direction: column; justify-content: space-between; }
.cells { position: absolute; left: 0; top: 0; pointer-events: none; }
.cells--m { display: none; }
/* the chart cells fill in, row group by row group, left to right in 12 px steps (6 groups in 1.2 s), once */
.js .cells .row-g { clip-path: inset(0 100% 0 0); animation: fill-row .2s steps(14, end) forwards; animation-delay: calc(var(--k) * .2s); }
@keyframes fill-row { to { clip-path: inset(0 0 0 0); } }
.cs-top { display: grid; gap: 22px; position: relative; }
.h1 { font: 400 80px/.96 var(--disp); letter-spacing: -.019em; max-width: 540px; }
.hero-lead { font-size: 19px; line-height: 1.5; color: var(--ink); max-width: 520px; }
.cs-low { display: grid; gap: 24px; position: relative; }
.key { background: var(--paper); }
.key-h { display: grid; grid-template-columns: 48px 36px 1fr auto; height: 24px; align-items: center; font-size: 12px; }
.key ol li { border-top: 1px solid rgb(174 185 192 / .9); }
.key ol li:last-child { border-bottom: 1px solid rgb(174 185 192 / .9); }
.key a { display: grid; grid-template-columns: 48px 36px 1fr auto; align-items: center; height: 36px; text-decoration: none; transition: background .15s; }
.key a:hover { background: var(--oat); }
.key a:hover .kt { text-decoration: underline; text-underline-offset: 3px; }
.gut { display: grid; place-items: center; height: 100%; background: var(--oat); border-right: 1px solid var(--grid); color: var(--ink); }
.sym { display: grid; place-items: center; }
.sym .sq { width: 22px; height: 22px; }
.kt { font: 600 17px/1.2 var(--text); }
.kg { font-size: 14px; color: var(--ink2); padding-right: 2px; }
.acts { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.acts .btn { height: 48px; }
@media (max-width: 1199px) and (min-width: 900px) { .chart-side { padding-left: 120px; padding-right: 40px; } .h1 { font-size: 64px; } }
@media (max-width: 899px) {
  .hero { display: block; height: auto; }
  .swatch { height: 150px; }
  .swatch-img { width: 100%; height: auto; top: -40px; }
  .yarns { right: auto; left: 236px; bottom: auto; top: 64px; width: 260px; }
  .chart-side { padding: 48px var(--pad) 36px; gap: 16px; }
  .cells--d { display: none; }
  .cells--m { display: block; }
  .cs-top { gap: 16px; }
  .h1 { font-size: 42px; line-height: 1.02; }
  .hero-lead { font-size: 15px; }
  .key-h { grid-template-columns: 48px 36px 1fr; }
  .key-h span:last-child, .kg { display: none; }
  .key a { grid-template-columns: 48px 36px 1fr; }
  .kt { font-size: 15px; }
  .cs-low { gap: 16px; }
  .acts .mono { display: none; }
}

/* ---------- sections ---------- */
.sec { position: relative; padding: 88px 0 96px; overflow: clip; }
.sec--oat { background: var(--oat); }
.sec--paper { background-color: var(--paper); }
.head { display: grid; gap: 16px; max-width: 760px; margin-bottom: 40px; }
.h2 { font: 400 56px/1.04 var(--disp); letter-spacing: -.027em; }
.lead { font-size: 18px; color: var(--ink2); }
.h3 { font: 400 30px/1.15 var(--disp); }
.h3--s { font-size: 22px; }
@media (max-width: 899px) { .sec { padding: 52px 0 60px; } .h2 { font-size: 34px; } .lead { font-size: 15px; } .head { gap: 12px; margin-bottom: 26px; } .h3 { font-size: 24px; } }

/* ---------- plate: the cover on a paper plate with a dashed seam ---------- */
.plate { position: relative; display: flex; flex-direction: column; padding: 10px 10px 14px; background: var(--paper); border: var(--seam); border-radius: 4px; box-shadow: 0 2px 6px rgb(58 44 37 / .07); transition: transform .2s, box-shadow .2s, border-color .2s; height: 100%; }
.pl-cv { position: relative; aspect-ratio: 1; border-radius: 2px; overflow: hidden; }
.pl-cv img { width: 100%; height: 100%; object-fit: cover; }
.pl-grid { position: absolute; inset: 0; pointer-events: none; clip-path: inset(0 0 100% 0);
  background-image: linear-gradient(rgb(174 185 192 / .9) 1.4px, transparent 1.4px), linear-gradient(90deg, rgb(174 185 192 / .9) 1.4px, transparent 1.4px),
    linear-gradient(rgb(174 185 192 / .9) 1px, transparent 1px), linear-gradient(90deg, rgb(174 185 192 / .9) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 12px 12px, 12px 12px; }
.plate .knit--seed { height: 24px; }
.pl-body { display: grid; gap: 6px; padding: 12px 2px 0; justify-items: start; }
.pl-t { font: 400 21px/1.12 var(--disp); }
.pl-t a { text-decoration: none; }
.pl-t a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.pl-line { font-size: 14px; line-height: 1.45; color: var(--ink2); }
/* hover: the plate lifts 4 px with a soft shadow, the dashed seam turns into a solid moorit line,
   the chart grid slides over the cover from the top, row by row (6 steps, 180 ms) */
.plate:hover, .plate:focus-within { transform: translateY(-4px); border: 1.5px solid var(--moorit); box-shadow: 0 10px 22px rgb(58 44 37 / .18); }
.plate:hover .pl-grid, .plate:focus-within .pl-grid { animation: grid-down .18s steps(6, end) forwards; }
@keyframes grid-down { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.plate:focus-within { outline: none; }
.plate--big .pl-t { font-size: 26px; }
.plate--hero { height: auto; width: 440px; flex: none; }
.plate--hero:hover, .plate--hero:focus-within { transform: none; border: var(--seam); box-shadow: 0 2px 6px rgb(58 44 37 / .07); }
.plate--hero .pl-grid { display: none; }

/* ---------- G: plates hung on one strand ---------- */
.sec--g { padding-bottom: 0; }
.shelf { position: relative; padding-bottom: 56px; }
.strand { position: absolute; left: 0; right: 0; top: 10px; height: 2.5px; background: var(--moorit); }
.hangs { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.hang { display: flex; flex-direction: column; align-items: center; }
.marker { width: 12px; height: 12px; margin-top: 4px; border: 3px solid var(--gold); border-radius: 50%; }
.marker::after { content: ""; display: block; width: 2px; height: 8px; margin: 9px auto 0; background: var(--moorit); transform: translateX(-.5px); }
.hang .plate { margin-top: 8px; width: 100%; }
@media (max-width: 1199px) { .hangs { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; } }
@media (max-width: 899px) {
  .shelf { padding-bottom: 40px; }
  .hangs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; row-gap: 24px; }
  .hang:nth-child(n + 3) .marker { visibility: hidden; }
  .pl-line { display: none; }
  .pl-t { font-size: 19px; }
}

/* ---------- U: the controls chart ---------- */
.utable { background: var(--paper); border: var(--seam); border-radius: 4px; }
.urow { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 24px; align-items: center; padding: 20px 24px; }
.urow + .urow { border-top: 1px dashed rgb(116 70 42 / .35); }
.u-lab { display: flex; align-items: center; gap: 14px; }
.rowno { flex: none; font-size: 12px; }
.u-t { font: 400 22px/1.15 var(--disp); text-decoration: none; max-width: 250px; }
.u-t:hover { color: var(--moorit); text-decoration: underline; text-underline-offset: 3px; }
.kcs { display: flex; flex-wrap: wrap; gap: 12px 14px; }
.kc { display: grid; gap: 6px; justify-items: start; }
kbd { padding: 8px 11px; background: var(--white); border: 1px solid rgb(58 44 37 / .7); border-radius: 4px; box-shadow: 0 2px 0 rgb(58 44 37 / .25); font: 500 14px/1.2 var(--mono); color: var(--ink); }
.kc span { font-size: 13px; color: var(--ink2); }
@media (max-width: 899px) { .urow { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px 14px; } .u-t { font-size: 19px; max-width: none; } kbd { font-size: 13px; } }

/* ---------- L: the glossary as a chart key ---------- */
.l-band { position: absolute; right: 0; top: 0; bottom: 0; width: 432px; }
.head--l { max-width: 700px; }
.terms { display: grid; grid-template-columns: repeat(2, 418px); gap: 24px; }
.term { display: flex; gap: 14px; min-height: 128px; padding: 18px; background: var(--paper); border: var(--seam); border-radius: 4px; }
.tsym { flex: none; display: grid; grid-template-columns: repeat(2, 12px); gap: 0; width: 24px; height: 24px; }
.v { width: 12px; height: 12px; background: var(--fawn); clip-path: polygon(0 0, 50% 45%, 100% 0, 100% 50%, 50% 100%, 0 50%); }
.v--madder { background: var(--madder); } .v--indigo { background: var(--indigo); } .v--gold { background: var(--gold); }
.v--moorit { background: var(--moorit); } .v--shaela { background: var(--shaela); } .v--fawn { background: var(--fawn); }
.term dt { font: 400 22px/1.15 var(--disp); margin-bottom: 6px; }
.term dd { font-size: 15px; line-height: 1.5; color: var(--ink2); }
@media (max-width: 1299px) { .l-band { width: 240px; } .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: calc(100% - 240px); } }
@media (max-width: 899px) {
  .sec--l { padding-top: 126px; }
  .l-band { left: 0; right: 0; bottom: auto; width: auto; height: 90px; opacity: .7; }
  .terms { grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: none; }
  .term { min-height: 0; }
}

/* ---------- footer: three ball bands stacked on shaela ---------- */
.footer { position: relative; background: var(--shaela); padding: 72px 0 40px; overflow: clip; }
.foot-band { position: absolute; left: 0; right: 0; top: 0; height: 90px; opacity: .22; }
.stackf { display: grid; }
.fc { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 40px; padding: 26px 30px; border: var(--seam); border-radius: 4px; box-shadow: 0 6px 14px rgb(0 0 0 / .25); }
.fc + .fc { margin-top: -14px; }
.fc--fawn { background: var(--fawn); transform: rotate(.5deg); z-index: 1; }
.fc--oat { background: var(--oat); transform: rotate(-.4deg); z-index: 2; }
.fc--paper { background: var(--paper); z-index: 3; }
.fc--fawn p { font-size: 13px; color: var(--ink); max-width: 620px; }
.fc--fawn .mono { color: var(--ink); }
.f-links { display: flex; flex-wrap: wrap; gap: 8px 26px; font: 500 15px var(--text); }
.f-links a { text-decoration: none; }
.f-links a:hover, .linkish:hover { text-decoration: underline; text-underline-offset: 3px; }
.linkish { background: none; border: 0; padding: 0; font: 500 15px var(--text); color: var(--ink); }
.f-soc { display: flex; gap: 16px; }
.f-about { display: grid; gap: 8px; max-width: 560px; }
.f-about p { font-size: 15px; color: var(--ink2); }
.f-mail { display: grid; gap: 4px; justify-items: end; }
.f-mail .mono { font-size: 12px; }
.f-mail a { font: 600 19px var(--text); color: var(--moorit); text-underline-offset: 3px; }
@media (max-width: 899px) {
  .footer { padding: 48px 0 28px; }
  .fc { flex-direction: column; align-items: flex-start; gap: 16px; padding: 18px 16px; }
  .fc--fawn, .fc--oat { transform: none; }
  .fc + .fc { margin-top: -10px; }
  .f-links { flex-direction: column; gap: 8px; }
  .f-mail { justify-items: start; }
  .f-mail a { font-size: 16px; }
}

/* ---------- inner page heads ---------- */
.phead { position: relative; padding: 36px 0 56px; overflow: clip; }
.phead .in { display: grid; gap: 34px; }
.phead .head { margin: 0; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; color: var(--ink2); }
.crumbs li { display: inline-flex; gap: 8px; }
.crumbs li + li::before { content: "/"; font-family: var(--mono); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--moorit); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); font-weight: 500; }
.h1-page { font: 400 68px/1.04 var(--disp); letter-spacing: -.022em; max-width: 760px; }
.phead--about::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 360px; background: url(../img/tile-oxo.webp) repeat 0 0 / 288px 180px; }
@media (max-width: 1099px) { .phead--about::after { width: 200px; } .phead--about .head { max-width: calc(100% - 220px); } }
@media (max-width: 899px) {
  .phead { padding: 20px 0 32px; }
  .phead .in { gap: 22px; }
  .h1-page { font-size: 40px; }
  .phead--about::after { width: auto; left: 0; height: 56px; top: auto; }
  .phead--about { padding-bottom: 80px; }
  .phead--about .head { max-width: none; }
}

/* ---------- games: carousel ---------- */
.sec--car { padding: 72px 0 88px; }
.car-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 28px; }
.car-ctl { display: flex; gap: 8px; }
.track { display: grid; grid-auto-flow: column; grid-auto-columns: 270px; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; padding: 8px 0 12px; scrollbar-width: none; }
.track::-webkit-scrollbar { display: none; }
.slide { scroll-snap-align: start; }
.progress { display: flex; gap: 6px; margin-top: 16px; }
.pdot { width: 12px; height: 12px; border-radius: 1px; border: 1px solid rgb(116 70 42 / .6); background: var(--paper); }
.pdot.on { background: var(--moorit); }
@media (max-width: 899px) { .sec--car { padding: 40px 0 56px; } .car-bar { flex-direction: column; align-items: flex-start; } .track { grid-auto-columns: min(268px, 82vw); gap: 16px; } }

/* ---------- game page ---------- */
.ghead { padding: 28px 0 64px; }
.ghead .in { display: grid; gap: 30px; }
.gh-split { display: flex; gap: 56px; align-items: flex-start; }
.gh-info { flex: 1; display: grid; gap: 18px; justify-items: start; }
.gh-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.h1-game { font: 400 72px/1 var(--disp); letter-spacing: -.021em; }
.gh-sum { font-size: 19px; line-height: 1.5; color: var(--ink); max-width: 720px; }
.ledger { width: 100%; }
.ledger div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding: 9px 0; border-top: 1px dashed rgb(116 70 42 / .35); }
.ledger div:first-child { border-top: 0; }
.ledger dt { font-size: 13px; line-height: 1.45; }
.ledger dd { font-size: 15px; line-height: 1.45; }
.sec--acc { padding: 88px 0 96px; }
.side-band { position: absolute; right: 0; top: 0; bottom: 0; width: 288px; }
.acol { width: min(920px, 100%); display: grid; gap: 16px; }
@media (max-width: 1299px) { .side-band { width: 120px; } .acol { width: calc(100% - 140px); } }
.acc { background: var(--paper); border: var(--seam); border-radius: 4px; }
.acc[open] { border: 1.5px solid rgb(116 70 42 / .9); }
.acc summary { display: flex; align-items: center; gap: 16px; padding: 20px 24px; cursor: pointer; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc-t { flex: 1; font: 400 28px/1.15 var(--disp); }
.acc summary:hover .acc-t { color: var(--moorit); }
.acc-sq { position: relative; flex: none; width: 32px; height: 32px; border: 1px solid var(--moorit); border-radius: 4px; }
.acc-sq::before, .acc-sq::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; background: var(--moorit); transform: translate(-50%, -50%); }
.acc-sq::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc[open] .acc-sq { background: var(--moorit); }
.acc[open] .acc-sq::before { background: var(--paper); }
.acc[open] .acc-sq::after { display: none; }
.acc-b { display: grid; gap: 16px; padding: 0 24px 26px 92px; }
.acc-b .p + .p { margin-top: 0; }
.sqlist { display: grid; gap: 10px; }
.sqlist li { display: flex; gap: 12px; align-items: flex-start; }
.sqlist .sq { margin-top: 8px; }
.sqlist p { font-size: 16px; color: var(--ink2); }
.sub { font: 400 20px/1.2 var(--disp); }
.qa { display: grid; gap: 4px; }
.qa + .qa { margin-top: 10px; }
.qa h3 { font: 600 16px/1.35 var(--text); }
.qa .p { font-size: 15px; }
.similar { display: grid; gap: 16px; padding-top: 28px; }
.sims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sim { display: flex; align-items: center; gap: 14px; padding: 12px; background: var(--paper); border: var(--seam); border-radius: 4px; text-decoration: none; height: 100%; transition: border-color .15s; }
.sim:hover { border: 1px solid var(--moorit); }
.sim img { width: 72px; height: 72px; border-radius: 2px; flex: none; }
.sim > span { display: grid; gap: 4px; }
.sim b { font: 600 16px/1.25 var(--text); }
.sim span span { font-size: 14px; line-height: 1.4; color: var(--ink2); }
.where { display: grid; gap: 10px; justify-items: start; padding: 22px 24px; background: var(--paper); border: var(--seam); border-radius: 4px; }
.where .p { font-size: 15px; }
.moorit-link { font: 600 15px/1.3 var(--text); color: var(--moorit); text-underline-offset: 3px; }
@media (max-width: 1099px) { .gh-split { flex-direction: column; gap: 22px; } .plate--hero { width: 320px; max-width: 100%; } .h1-game { font-size: 56px; } }
@media (max-width: 899px) {
  .ghead { padding: 18px 0 36px; }
  .ghead .in { gap: 20px; }
  .h1-game { font-size: 40px; }
  .gh-sum { font-size: 16px; }
  .ledger div { grid-template-columns: 96px minmax(0, 1fr); }
  .ledger dd { font-size: 14px; }
  .sec--acc { padding: 52px 0 60px; }
  .side-band { display: none; }
  .acol { width: 100%; gap: 12px; }
  .acc summary { padding: 16px 14px; gap: 12px; }
  .acc-t { font-size: 21px; }
  .acc-b { padding: 0 14px 20px; }
  .sims { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- about: ledger rows ---------- */
.sec--about { padding-top: 56px; }
.lrows { width: min(1000px, calc(100% - 320px)); }
.lrow { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; padding: 34px 0; }
.lrow + .lrow { border-top: 1px dashed rgb(116 70 42 / .4); }
.lrow-t { font: 400 28px/1.15 var(--disp); }
.lrow-b { display: grid; gap: 12px; align-content: start; }
.lrow-b .p + .p { margin-top: 0; }
.sqlist--s p, .sqlist--s span { font-size: 15px; color: var(--ink2); }
.sqlist--s .sq { margin-top: 0; width: 9px; height: 9px; }
.sqlist--s li { align-items: center; }
.crow { display: grid; gap: 8px; padding: 18px 20px; background: var(--paper); border: var(--seam); border-radius: 4px; }
.crow div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 16px; }
.crow dt { font-size: 13px; }
.crow dd { font-size: 15px; overflow-wrap: anywhere; }
.crow a { font-weight: 600; color: var(--moorit); text-underline-offset: 3px; }
@media (max-width: 1099px) { .lrows { width: calc(100% - 140px); } }
@media (max-width: 899px) { .sec--about { padding-top: 24px; } .lrows { width: 100%; } .lrow { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 24px 0; } .lrow-t { font-size: 23px; } .crow div { grid-template-columns: 64px minmax(0, 1fr); } }

/* ---------- legal: one column between chart margins ---------- */
.sec--legal { background-color: var(--paper);
  background-image: linear-gradient(90deg, transparent 0 calc(var(--edge)), var(--paper) calc(var(--edge)) calc(100% - var(--edge)), transparent calc(100% - var(--edge))),
    linear-gradient(rgb(174 185 192 / .7) 1.4px, transparent 1.4px), linear-gradient(90deg, rgb(174 185 192 / .7) 1.4px, transparent 1.4px),
    linear-gradient(rgb(174 185 192 / .45) 1px, transparent 1px), linear-gradient(90deg, rgb(174 185 192 / .45) 1px, transparent 1px);
  background-size: 100% 100%, 120px 120px, 120px 120px, 12px 12px, 12px 12px;
  --edge: max(240px, calc((100% - 1368px) / 2 + 240px)); }
.ltext { max-width: 760px; margin: 0 auto; display: grid; gap: 30px; }
.lsec { display: grid; gap: 10px; }
.h3--legal { font-size: 28px; }
@media (max-width: 1099px) { .sec--legal { --edge: 64px; } }
@media (max-width: 899px) { .sec--legal { --edge: 0px; background-image: none; } .ltext { gap: 24px; } .h3--legal { font-size: 22px; } }

/* ---------- cookie card ---------- */
.cookie { position: fixed; z-index: 90; right: 24px; bottom: 24px; width: min(500px, calc(100% - 32px)); background: var(--paper); border: var(--seam); border-radius: 4px; box-shadow: 0 16px 36px rgb(58 44 37 / .25); overflow: hidden; }
.cookie[hidden] { display: none; }
.ck-band { height: 36px; }
.ck-body { display: grid; gap: 14px; justify-items: start; padding: 22px 28px 28px; }
.ck-title { font: 400 30px/1.1 var(--disp); }
.ck-body > p { font-size: 15px; color: var(--ink); }
.ck-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.ck-manage { display: grid; gap: 10px; justify-items: start; width: 100%; padding: 14px 16px; background: var(--oat); border-radius: 4px; }
.ck-manage[hidden] { display: none; }
.ck-opt { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.ck-opt input { accent-color: var(--moorit); width: 16px; height: 16px; }
.ck-link { font-size: 14px; color: var(--moorit); text-underline-offset: 3px; }
.js .cookie.is-open { animation: ck-in .36s steps(3, end) both; }
@keyframes ck-in { from { transform: translateY(36px); opacity: .3; } }
@media (max-width: 899px) { .cookie { left: 15px; right: 15px; bottom: 15px; width: auto; } .ck-body { padding: 18px 20px 22px; } .ck-title { font-size: 25px; } }

/* ---------- reduced motion: everything static ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .cells .row-g { clip-path: none; }
  .plate:hover, .plate:focus-within { transform: none; }
  .plate:hover .pl-grid, .plate:focus-within .pl-grid { clip-path: none; }
  .track { scroll-behavior: auto; }
}

/* social icons */
.soc{display:flex;gap:8px;align-items:center;margin:0}
.soc-ico{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;color:inherit;opacity:.85;transition:opacity .2s}
.soc-ico:hover,.soc-ico:focus-visible{opacity:1}
.soc-ico svg{width:18px;height:18px;fill:currentColor}