/* uldragundegrim.com — Toruń gingerbread moulds: carved pear-wood boards, baked dough, piped white icing.
   outline-engraving (one 3 px icing bead, dashed 10/8 frames) · grain-noise (kit grain, OVERLAY .18 / .12) · frame-break (the
   baked figure lifted out of its cavity crosses the hero edge into G). Desktop = Figma 1368, below 1024 = Figma 360. */
:root {
  --wood: #2A1910; --wood2: #3A2417; --carve: #170D07; --dough: #965024; --honey: #C98143; --crumb: #8A4A20;
  --icing: #FBF4E8; --flour: #F3E7D3; --paper: #FAF3E6; --ink: #2A1910; --inkSoft: #5E3E2A;
  --disp: 'Leckerli One', 'Brush Script MT', cursive; --text: 'Signika', 'Trebuchet MS', system-ui, sans-serif;
  --pad: 16px; --side: max(var(--pad), calc((100% - 688px) / 2));
  --u: min(1px, calc(100vw / 1368));
  --g18: url(/assets/img/grain18.png) 0 0 / 256px 256px; --g12: url(/assets/img/grain12.png) 0 0 / 256px 256px;
  --pressed: inset 2px 3px 6px rgba(0, 0, 0, .4), inset -1px -1px 2px rgba(255, 217, 168, .18);
  /* dashed beads: stroke 4 clipped by the box = a 2 px inside stroke, as Figma counts it in the layout */
  --dash-crumb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='24' fill='none' stroke='%238A4A20' stroke-width='4' stroke-dasharray='10 8'/%3E%3C/svg%3E");
  --dash-ice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='18' fill='none' stroke='%23FBF4E8' stroke-width='4' stroke-dasharray='10 8'/%3E%3C/svg%3E");
  --dash-ice20: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='20' fill='none' stroke='%23FBF4E8' stroke-width='4' stroke-dasharray='10 8'/%3E%3C/svg%3E");
  --dash-cover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='18' fill='none' stroke='%23FBF4E8' stroke-width='4' stroke-dasharray='6 6'/%3E%3C/svg%3E");
  --chev-ice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M2 2L8 7L2 12' fill='none' stroke='%23FBF4E8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (min-width: 600px) { :root { --pad: 32px; } }
@media (min-width: 1024px) { :root { --pad: 72px; --side: max(72px, calc((100% - 1224px) / 2)); } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--flour); color: var(--ink); font: 400 16px/1.6 var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
h1, h2, h3, p, ul, ol, dl, dd, dt { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2 { font-family: var(--disp); font-weight: 400; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--crumb); outline-offset: 3px; }
.hd :focus-visible, .hero :focus-visible, .top :focus-visible, .ft :focus-visible, .where :focus-visible, .cookie :focus-visible, .p :focus-visible { outline-color: var(--icing); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--icing); color: var(--ink); padding: 8px 14px; font-weight: 600; text-decoration: none; border-radius: 12px; }
.skip:focus { top: 12px; }
.cv-ch { width: 10px; height: 14px; flex: none; }

/* ---------- grounds, motifs ---------- */
.gr { background-blend-mode: overlay; }
.hd, .hero, .top, .ft { background: var(--g18), var(--wood); background-blend-mode: overlay; }
.sec { position: relative; overflow: hidden; background: var(--g12), var(--flour); background-blend-mode: overlay; padding: 56px var(--side); display: flex; flex-direction: column; gap: 28px; }
.sec > :not(.mot), .top > :not(.mot) { position: relative; }
.mot { position: absolute; pointer-events: none; max-width: none; }
.lobes { left: var(--xm); top: calc(var(--ym) * 1px); width: calc(var(--dm) * 3.2px); }
.wave { left: var(--xm); top: var(--ym); right: 0; height: var(--whm); background: var(--wim) 0 0 / auto 100% repeat-x; }
@media (min-width: 1024px) {
  .lobes { left: var(--x); top: calc(var(--y) * 1px); width: calc(var(--d) * 3.2px); }
  .wave { left: var(--x); top: var(--y); height: var(--wh); background-image: var(--wi); }
}

/* ---------- chips, links, stamp, cover frame ---------- */
.chip { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1.55 var(--text); color: var(--inkSoft); }
.chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--crumb); flex: none; }
.chip.ink { color: var(--ink); }
.chip.ink::before, .chip.ic::before { background: var(--icing); }
.chip.ic { color: var(--icing); }
.chip.hn::before { background: var(--honey); }
.cl { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1.55 var(--text); color: var(--crumb); text-decoration: none; }
.cl .cv-ch { transition: transform .2s; }
a.cl:hover span { text-decoration: underline; text-underline-offset: 3px; }
a.cl:hover .cv-ch { transform: translateX(3px); }
.stamp { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 20px; border-radius: 24px; background: var(--g18), var(--dough); background-blend-mode: overlay;
  color: var(--icing); font: 600 15px/1.55 var(--text); text-decoration: none; box-shadow: var(--pressed); transition: box-shadow .2s; }
.stamp.wd { background: var(--wood); }
.stamp:hover { box-shadow: inset 3px 4px 9px rgba(0, 0, 0, .5), inset -1px -1px 2px rgba(255, 217, 168, .22); }
.stamp:hover .cv-ch { transform: translateX(2px); }
.stamp .cv-ch { transition: transform .2s; }
.cf { --cs: 88px; display: block; flex: none; padding: 6px; border-radius: 24px; background: var(--g18), var(--dough); background-blend-mode: overlay; box-shadow: 0 6px 14px rgba(42, 25, 16, .25); transition: transform .25s, box-shadow .25s; }
.cf-in { display: block; padding: 6px; border-radius: 18px; background: var(--dash-cover); }
.cf img { width: var(--cs); height: var(--cs); border-radius: 14px; }
@media (min-width: 1024px) {
  .chip { font-size: 14px; }
  .cl { font-size: 16px; }
  .stamp { padding: 16px 26px; font-size: 17px; }
  .cf { padding: 10px; }
  .cf-in { padding: 8px; }
}

/* ---------- header ---------- */
.hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px var(--side); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--icing); min-width: 0; }
.logo img { width: 23px; }
.logo span { font: 400 17px/1.05 var(--disp); white-space: nowrap; }
.hd ul { display: flex; gap: 10px; }
.hd nav a { display: flex; align-items: center; gap: 6px; font: 600 13px/1.55 var(--text); color: var(--icing); opacity: .82; text-decoration: none; }
.hd nav a[aria-current] { opacity: 1; }
.hd nav a[aria-current]::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--honey); }
.hd nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 339px) { .hd { padding-inline: 12px; } .hd ul { gap: 8px; } .logo span { font-size: 15px; } .logo { gap: 6px; } }
@media (min-width: 1024px) {
  .hd { padding: 26px var(--side); }
  .logo img { width: 39px; }
  .logo span { font-size: 28px; }
  .hd ul { gap: 36px; }
  .hd nav a { font-size: 16px; }
}

/* ---------- hero (frame-break) ---------- */
.hero { position: relative; z-index: 3; overflow-x: clip; display: flex; flex-direction: column; gap: 28px; padding: 24px var(--side) 40px; }
.hclip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero .board { order: 2; width: 236px; margin: 0 0 10px 24px; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .5)); transform: translateY(calc(var(--pb, 0) * 1px)); }
.ht { order: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.ht h1 { font-size: min(46px, 12.8vw); line-height: 1; letter-spacing: -.01em; color: var(--icing); }
.sf { font-size: 16px; line-height: 1.6; color: rgba(251, 244, 232, .88); }
.lc { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; width: 100%; }
.lcl { display: flex; align-items: center; gap: 10px; font: 600 13px/1.55 var(--text); color: var(--icing); opacity: .9; }
.lcl i { width: 8px; height: 8px; border-radius: 50%; background: var(--honey); }
.kat { position: relative; width: 304px; max-width: 100%; }
.cake { width: 100%; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .45)); }
.kat li { position: absolute; width: 20.4%; transform: translate(-50%, -50%); text-align: center; }
.kat a { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--icing); text-decoration: none; border-radius: 10px; }
.kat b { font: 700 12px/1.18 var(--text); }
.kat a span { font-size: 12px; line-height: 1.3; }
.kat a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.fig { position: absolute; z-index: 4; left: min(calc(var(--side) + 94px), calc(100% - 226px)); /* 360: x 110 = board + 70, kept on the board when wider */ bottom: -60px; width: 216px; transform-origin: 0 0;
  transform: translateY(calc(var(--pf, 0) * 1px)) rotate(7deg); filter: drop-shadow(10px 24px 30px rgba(0, 0, 0, .35)) drop-shadow(4px 8px 8px rgba(0, 0, 0, .25)); pointer-events: none; }
@media (min-width: 1024px) {
  .hero { display: block; height: calc(830 * var(--u)); padding: 0; }
  .hero .board { position: absolute; margin: 0; left: calc(50% - 600 * var(--u)); top: calc(84 * var(--u)); width: calc(520 * var(--u)); }
  .ht { position: absolute; left: calc(50% - 20 * var(--u)); top: calc(44 * var(--u)); width: calc(632 * var(--u)); gap: calc(28 * var(--u)); }
  .ht h1 { width: calc(660 * var(--u)); max-width: none; font-size: calc(84 * var(--u)); } /* Figma box is 700 (to x 1364); 660 keeps the same break, no h-scroll */
  .sf { width: calc(520 * var(--u)); font-size: max(15px, calc(20 * var(--u))); }
  .lc { gap: calc(14 * var(--u)); padding: calc(6 * var(--u)) 0 0 calc(64 * var(--u)); }
  .lcl { font-size: max(13px, calc(15 * var(--u))); }
  .kat { width: calc(473 * var(--u)); }
  .kat li { width: 24.524%; }
  .kat b { font-size: max(11px, calc(15 * var(--u))); }
  .kat a span { font-size: max(10px, calc(12 * var(--u))); }
  .fig { left: calc(50% - 450 * var(--u)); top: calc(334 * var(--u)); bottom: auto; width: calc(498 * var(--u)); transform: translateY(calc(var(--pf, 0) * 1px)) rotate(9deg); }
  .hero .lobes { left: calc(50% + 76 * var(--u)); top: calc(520 * var(--u)); bottom: auto; width: calc(1664 * var(--u)); }
}

/* ---------- G: rows cut from one board ---------- */
.g { padding-top: 96px; gap: 16px; z-index: 1; }
.g-hd { padding-bottom: 8px; }
.g-hd > div { display: flex; flex-direction: column; gap: 10px; }
.g h2, .p h2 { font-size: 34px; line-height: 1.08; color: var(--ink); }
.g-hd p { color: var(--inkSoft); line-height: 1.6; }
.rows { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(138, 74, 32, .4); text-decoration: none; color: var(--ink); border-radius: 0;
  transition: background-color .25s, padding .25s, box-shadow .25s, border-radius .25s, color .25s; }
.rt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rt h3 { font: 700 18px/1.25 var(--text); }
.chips { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.chips .dk { display: none; }
.rt .ol { font-size: 14px; line-height: 1.5; color: var(--inkSoft); }
.rm { font-size: 14px; }
.rl { display: none; }
.row:hover, .row:focus-visible { background: var(--g18), var(--dough); background-blend-mode: overlay; border-radius: 24px; padding-left: 12px; padding-right: 12px; border-bottom-color: transparent;
  box-shadow: inset 0 0 0 3px var(--icing), 0 14px 28px rgba(42, 25, 16, .35); color: var(--icing); outline: none; }
.row:hover .chip, .row:hover .ol, .row:hover .cl, .row:focus-visible .chip, .row:focus-visible .ol, .row:focus-visible .cl { color: var(--icing); }
.row:hover .chip::before, .row:focus-visible .chip::before { background: var(--icing); }
.row:hover .cf, .row:focus-visible .cf { transform: translateY(-6px); box-shadow: 0 14px 24px rgba(42, 25, 16, .45); }
.row:hover .cv-ch, .row:focus-visible .cv-ch { transform: translateX(3px); }
@media (min-width: 1024px) {
  .g { padding: 64px var(--side) 96px; gap: 22px; }
  .g-hd { padding: 0 0 18px calc(600 * var(--u)); }
  .g-hd p { font-size: 18px; max-width: 560px; }
  .g h2 { font-size: 56px; }
  .rows { gap: 22px; }
  .row { gap: 32px; padding: 22px 8px 22px 0; }
  .row .cf { --cs: 168px; }
  .rt { gap: 10px; }
  .rt h3 { font: 400 34px/1.1 var(--disp); }
  .chips { gap: 6px 22px; }
  .chips .dk { display: inline-flex; }
  .rt .ol { font-size: 17px; }
  .rm { display: none; }
  .rl { display: flex; justify-content: flex-end; width: clamp(200px, 23.4vw, 320px); flex: none; font-size: 17px; text-align: right; }
  .row:hover, .row:focus-visible { padding-left: 18px; padding-right: 18px; }
}

/* ---------- P: one game in focus ---------- */
.p { background: var(--g18), var(--honey); background-blend-mode: overlay; }
.carved { align-self: flex-start; padding: 16px; border-radius: 32px; background: var(--g18), var(--wood); background-blend-mode: overlay;
  box-shadow: inset 6px 8px 16px rgba(0, 0, 0, .6), 0 14px 30px rgba(90, 46, 16, .35); max-width: 100%; }
.carved .cf { --cs: min(256px, calc(100vw - 2 * var(--pad) - 56px)); }
.pt { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.p h2 { font-size: 32px; }
.pt > p { color: var(--ink); line-height: 1.6; }
.pts { display: flex; flex-direction: column; gap: 10px; padding: 6px 0 10px; }
.pts li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.55; color: var(--ink); }
.pts .cv-ch { color: var(--icing); }
@media (min-width: 1024px) {
  .p { flex-direction: row; align-items: center; gap: 72px; padding: 96px var(--side); }
  .carved { align-self: center; padding: 34px; }
  .carved .cf { --cs: clamp(300px, 27.8vw, 380px); }
  .pt { flex: 1; gap: 20px; }
  .p h2 { font-size: 52px; }
  .pt > p { font-size: 18px; }
  .pts li { font-size: 17px; }
}

/* ---------- footer: three baked plaques ---------- */
.ft { position: relative; overflow: hidden; padding: 48px var(--side) 40px; color: var(--icing); }
.plaques { position: relative; display: flex; flex-direction: column; gap: 12px; }
.plq { padding: 22px 20px; border-radius: 24px; background: var(--g18), var(--dough); background-blend-mode: overlay; box-shadow: 0 10px 24px rgba(0, 0, 0, .4); }
.pi { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 18px; background: var(--dash-ice); }
.flogo { display: flex; align-items: center; gap: 10px; color: var(--icing); text-decoration: none; }
.flogo img { width: 35px; }
.flogo span { font: 400 24px/1.05 var(--disp); }
.pi p { font-size: 15px; line-height: 1.5; }
.pi .sm { font-size: 13px; }
nav.pi { flex-direction: row; gap: 36px; }
nav.pi ul { display: flex; flex-direction: column; gap: 10px; }
nav.pi .cl { color: var(--icing); font-size: 15px; }
.lg a, .fck { font-size: 15px; line-height: 1.55; color: var(--icing); text-decoration: underline; text-underline-offset: 3px; text-align: left; }
.lg a:hover, .fck:hover { text-decoration-thickness: 2px; }
.pi .w { font: 600 14px/1.55 var(--text); }
.fm { font: 700 16px/1.55 var(--text); color: var(--icing); text-underline-offset: 3px; overflow-wrap: anywhere; }
.so { display: flex; flex-wrap: wrap; gap: 14px 16px; }
.so .chip { font-size: 13px; }
.pi .sm:last-child { font-size: 13px; }
@media (min-width: 1024px) {
  .ft { padding: 88px var(--side) 64px; }
  .plaques { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 20px; padding-bottom: 11px; } /* Figma hugs the rotated bounds: 276 → 287 */
  .so { row-gap: 6px; }
  .plq { padding: 32px; }
  .p1 { width: 420px; transform: rotate(1.5deg); }
  .p2 { width: 350px; transform: rotate(-1deg); }
  .p3 { width: 390px; transform: rotate(1deg); }
  .pi { padding: 24px; }
  .flogo span { font-size: 30px; }
  .fm { font-size: 18px; }
}

/* ---------- inner heads ---------- */
.top { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 18px; padding: 20px var(--side) 36px; color: var(--icing); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; line-height: 1.55; }
.crumbs li { display: flex; align-items: center; gap: 10px; }
.crumbs li + li::before { content: ''; width: 7px; height: 10px; background: var(--chev-ice) center / contain no-repeat; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { font-weight: 600; }
.top h1 { font-size: min(42px, 12.4vw); line-height: 1.04; color: var(--icing); overflow-wrap: break-word; }
.top .lead { font-size: 16px; line-height: 1.6; color: rgba(251, 244, 232, .88); }
.top.ab .lead { color: rgba(251, 244, 232, .9); }
.top.lgh { gap: 16px; padding-bottom: 32px; }
.top.lgh h1 { font-size: 40px; }
.gtop { padding: 18px var(--side) 32px; }
.gtr { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.gtr .cf { --cs: min(292px, calc(100vw - 2 * var(--pad) - 36px)); }
.gtt { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.gtt h1 { font-size: min(38px, 11.6vw); }
.gtt .lead { color: rgba(251, 244, 232, .9); }
.meta { font-size: 14px; line-height: 1.55; color: rgba(251, 244, 232, .8); }
@media (min-width: 1024px) {
  .top { padding: 40px var(--side) 64px; }
  .crumbs ol { font-size: 14px; }
  .top h1 { font-size: 80px; }
  .top.ab h1 { max-width: 760px; }
  .top .lead { font-size: 18px; max-width: 640px; }
  .top.ab .lead { max-width: 680px; }
  .top.lgh { padding: 40px var(--side) 56px; }
  .top.lgh h1 { font-size: 72px; }
  .gtop { gap: 28px; padding: 36px var(--side) 56px; }
  .gtr { flex-direction: row; align-items: center; gap: 56px; }
  .gtr .cf { --cs: clamp(300px, 29.2vw, 400px); }
  .gtt { flex: 1; gap: 18px; }
  .gtt h1 { font-size: 72px; }
  .gtt .lead { font-size: 19px; max-width: none; }
}

/* ---------- plates ---------- */
.plate { background: var(--dash-crumb), var(--paper); border-radius: 24px; }

/* ---------- guide + about body ---------- */
.gb { gap: 32px; }
.main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.main > h2 { font-size: 28px; line-height: 1.12; }
.main > p { line-height: 1.6; }
.keys { padding: 8px 16px; }
.keys > div { display: flex; gap: 16px; padding: 12px 0; }
.keys > div + div { border-top: 1px solid rgba(138, 74, 32, .22); }
.keys dt { flex: 0 0 min(130px, 40%); font: 600 14px/1.55 var(--text); }
.keys dd { flex: 1; font-size: 14px; line-height: 1.55; color: var(--inkSoft); }
.tips, .weigh { display: flex; flex-direction: column; gap: 18px; }
.tips li, .weigh li { display: flex; align-items: flex-start; gap: 14px; line-height: 1.6; }
.tips .cv-ch { margin-top: 6px; color: var(--crumb); }
.weigh li { gap: 12px; }
.weigh i { width: 8px; height: 8px; margin-top: 9px; border-radius: 50%; background: var(--crumb); flex: none; }
.fq { display: flex; flex-direction: column; gap: 6px; padding: 20px 18px; }
.fq h3 { font: 700 17px/1.55 var(--text); }
.fq p { font-size: 15px; line-height: 1.6; color: var(--inkSoft); }
.side { display: flex; flex-direction: column; gap: 24px; }
.side h2 { font-size: 28px; line-height: 1.12; }
.fp { display: flex; flex-direction: column; gap: 12px; padding: 20px 18px; }
.fp dl { display: flex; flex-direction: column; gap: 12px; }
.fp dl > div { display: flex; flex-direction: column; gap: 2px; }
.fp dt { display: flex; line-height: 1; }
.fp .chip { color: var(--crumb); font-size: 13px; }
.fp dd { font-size: 15px; line-height: 1.45; }
.simp { display: flex; flex-direction: column; gap: 14px; padding: 20px 18px; }
.simp ul { display: flex; flex-direction: column; gap: 14px; }
.simp a { display: flex; align-items: center; gap: 14px; text-decoration: none; border-radius: 14px; }
.simp img { width: 72px; height: 72px; border-radius: 14px; flex: none; transition: transform .2s; }
.simp a > span { display: flex; flex-direction: column; gap: 4px; }
.simp b { font-size: 15px; line-height: 1.55; }
.simp a > span > span { font-size: 14px; line-height: 1.4; color: var(--inkSoft); }
.simp a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.simp a:hover img { transform: translateY(-3px); }
.where { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px; border-radius: 24px; background: var(--g18), var(--wood); background-blend-mode: overlay; color: var(--icing); }
.where .wt { font: 700 18px/1.55 var(--text); }
.where p { font-size: 15px; line-height: 1.5; }
.where p:not(.wt) { color: rgba(251, 244, 232, .9); }
.where a { font: 600 15px/1.55 var(--text); color: var(--honey); text-underline-offset: 3px; }
.where a:hover { text-decoration-thickness: 2px; }
.top.ab + .gb .main { gap: 16px; }
.kc { display: flex; flex-direction: column; gap: 14px; padding: 22px 18px; }
.kc h2 { font-size: 30px; line-height: 1.12; }
.kc > p { line-height: 1.6; color: var(--inkSoft); }
.rs { display: flex; flex-direction: column; gap: 14px; }
.kc .chip { font-size: 13px; }
.kc .chip::before { background: var(--crumb); }
.kc dl { display: flex; flex-direction: column; gap: 14px; }
.kc dl > div { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; }
.kc dt { font: 600 13px/1.55 var(--text); color: var(--crumb); }
.kc dd { line-height: 1.55; overflow-wrap: anywhere; }
.kc dd.em { font-weight: 700; }
.kc dd a { text-underline-offset: 3px; }
@media (min-width: 1024px) {
  .gb { flex-direction: row; align-items: flex-start; gap: 64px; padding: 96px var(--side); }
  .main { flex: 1; max-width: 760px; gap: 26px; }
  .main > h2 { font-size: 36px; }
  .main > p, .tips li, .weigh li { font-size: 18px; }
  .keys { padding: 12px 24px; }
  .keys dt { flex: 0 0 240px; font-size: 16px; }
  .keys dd { font-size: 16px; }
  .tips, .weigh { gap: 26px; }
  .tips .cv-ch { margin-top: 8px; }
  .fq { padding: 20px 24px; }
  .fq h3 { font-size: 18px; }
  .fq p { font-size: 16px; }
  .side { width: clamp(300px, 29.2vw, 400px); flex: none; }
  .fp, .simp { padding: 26px; }
  .where { padding: 24px; }
  .top.ab + .gb .main { gap: 22px; }
  .kc { width: clamp(300px, 29.2vw, 400px); flex: none; padding: 30px 28px; }
  .kc .chip { font-size: 14px; }
}

/* ---------- catalog spreads ---------- */
.sp { gap: 24px; }
.spread { display: flex; flex-direction: column; background: var(--paper); border-radius: 24px; box-shadow: 0 12px 30px rgba(42, 25, 16, .18); }
.pgf { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px 18px; }
.pgf .cf { --cs: min(258px, calc(100vw - 2 * var(--pad) - 70px)); }
.pgf.k2 { background: linear-gradient(to right, var(--crumb) 10px, transparent 10px) 0 0 / 18px 2px repeat-x; }
.pgf h2 { font-size: 30px; line-height: 1.08; }
.ff { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.ff > div { display: flex; gap: 12px; }
.ff dt { flex: 0 0 90px; font: 600 14px/1.55 var(--text); color: var(--crumb); }
.ff dd { flex: 1; font-size: 14px; line-height: 1.45; color: var(--inkSoft); }
.pgf .ol { font-size: 15px; line-height: 1.6; }
@media (min-width: 1024px) {
  .sp { gap: 48px; padding: 96px var(--side); }
  .spread { flex-direction: row; }
  .pgf { padding: 40px 44px; }
  .pgf .cf { --cs: clamp(240px, 22vw, 300px); }
  .pgf.k2 { background: linear-gradient(to bottom, var(--crumb) 10px, transparent 10px) 0 0 / 2px 18px repeat-y; }
  .pgf h2 { font-size: 40px; }
  .pgf .ol { font-size: 17px; }
}

/* ---------- legal ---------- */
.lgb { padding: 36px var(--side) 56px; }
.doc { display: flex; flex-direction: column; gap: 14px; padding: 24px 18px; }
.doc .sum { font-size: 16px; line-height: 1.6; }
.doc h2 { font: 700 18px/1.3 var(--text); }
.doc p:not(.sum) { font-size: 15px; line-height: 1.6; color: var(--inkSoft); }
.doc a { text-underline-offset: 3px; }
@media (min-width: 1024px) {
  .lgb { padding: 64px var(--side) 96px; }
  .doc { max-width: 860px; gap: 20px; padding: 46px 54px; }
  .doc .sum { font-size: 19px; }
  .doc h2 { font-size: 22px; }
  .doc p:not(.sum) { font-size: 17px; }
}

/* ---------- cookie ---------- */
.cookie { position: fixed; z-index: 60; left: 15px; right: 15px; bottom: 15px; max-width: 500px; margin-left: auto; }
.cookie[hidden], .ck-manage[hidden] { display: none; }
.ck { padding: 10px; border-radius: 28px; background: var(--g18), var(--dough); background-blend-mode: overlay; box-shadow: 0 14px 30px rgba(0, 0, 0, .35); color: var(--icing); }
.ck-in { display: flex; flex-direction: column; gap: 12px; padding: 20px 18px; border-radius: 20px; background: var(--dash-ice20); }
.ck-h { display: flex; align-items: center; gap: 10px; }
.ck-h img { width: 30px; flex: none; }
.ck h2 { font: 700 17px/1.3 var(--text); }
.ck p { font-size: 14px; line-height: 1.5; }
.ck-acts { display: flex; flex-direction: column; gap: 10px; }
.ck .stamp { width: 100%; }
.ck-manage { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.ck-manage label { display: flex; align-items: center; gap: 8px; }
.ck-manage input { width: 18px; height: 18px; accent-color: var(--wood); }
.ck .ln { font: 600 14px/1.55 var(--text); color: var(--icing); text-underline-offset: 3px; align-self: flex-start; }
@media (min-width: 420px) {
  .ck { padding: 12px; }
  .ck-in { padding: 28px; }
  .ck h2 { font-size: 20px; }
  .ck p { font-size: 15px; }
  .ck-acts { flex-direction: row; }
  .ck-acts .stamp { flex: 1; }
}
@media (min-width: 1024px) {
  .cookie { left: auto; right: 24px; bottom: 24px; width: 500px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .hero { --pb: 0 !important; --pf: 0 !important; }
}
html { scroll-behavior: smooth; }
#games { scroll-margin-top: 0; }

/* ---------- social: two icing-piped tiles ---------- */
.so.sx { gap: 10px; }
.sx a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: var(--icing); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='14' fill='none' stroke='%23FBF4E8' stroke-width='4' stroke-dasharray='10 8'/%3E%3C/svg%3E") no-repeat; transition: background-color .2s; }
.sx a:hover { background-color: var(--crumb); }
.sx svg { width: 19px; height: 19px; }