/* esriniskerrogue.com — a snooker table under its canopy lamp: baize, mahogany cushion rails with pearl spots, phenolic balls, a scoreboard with brass pointers */
:root {
  --ink: #F2ECDD; --ink2: #1B1410; --muted: #C9D6C2;
  --baize-lit: #3C8A4C; --baize: #2C6B3B; --baize-deep: #1A4527; --baize-dark: #0F2A18;
  --wood: #4A1F14; --wood-lit: #6E301D; --wood-dark: #2A110A;
  --brass: #C8A253; --brass-lit: #E9D193; --brass-dark: #8C6A2C;
  --pearl: #EDE6D3; --red: #B5161E; --sheet: #F4EFE2; --rule: #D8CDB4;
  --pad: 72px; --w: 1368px; --r: 12px;
  --display: "DM Serif Display", "Georgia", serif;
  --body: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* one lamp: the pool is 70 % of the surface wide, centred 35 % from the top */
  --cloth: radial-gradient(70% 70% at 50% 35%, var(--baize-lit) 0%, var(--baize) 55%, var(--baize-dark) 100%);
  --woodg: radial-gradient(80% 80% at 30% 40%, var(--wood-lit) 0%, var(--wood) 55%, var(--wood-dark) 100%);
  --brassg: linear-gradient(90deg, var(--brass-dark), var(--brass) 25%, var(--brass-lit) 50%, var(--brass) 75%, var(--brass-dark));
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--baize-dark); color: var(--ink); font: 400 17px/1.6 var(--body); font-variant-numeric: tabular-nums; overflow-x: hidden; }
body.is-legal { background: var(--sheet); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
kbd { font: inherit; }
:focus-visible { outline: 2px solid var(--brass-lit); 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: 300; padding: 10px 16px; background: var(--ink); color: var(--ink2); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.in { position: relative; width: 100%; max-width: var(--w); margin: 0 auto; padding: 0 var(--pad); }

/* ---------- materials ---------- */
.cloth { background: var(--cloth); }
.wood { background: var(--woodg); }
.rframe { display: block; padding: 12px; border-radius: var(--r); background: radial-gradient(90% 90% at 50% 20%, var(--wood-lit), var(--wood) 55%, var(--wood-dark)); box-shadow: 0 14px 28px rgba(0, 0, 0, .45); }
.inlay { display: block; overflow: hidden; border-radius: 4px; outline: 1px solid var(--brass); }
.rail { display: flex; align-items: center; justify-content: space-between; height: 28px; padding: 0 64px; background: linear-gradient(180deg, var(--wood-lit), var(--wood) 60%, var(--wood-dark)); border-bottom: 1px solid var(--brass); }
.rail--top { border-bottom: 0; border-top: 1px solid var(--brass); }
.spot { width: 9px; height: 9px; flex: none; background: var(--pearl); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.plate { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 4px; background: var(--brassg); color: var(--ink2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); font: 600 12px/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.screw { width: 7px; height: 7px; flex: none; border-radius: 50%; background: linear-gradient(transparent 44%, var(--wood-dark) 44% 57%, transparent 57%), var(--brass-dark); }
.ar { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pc { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--brass-lit); stroke-width: 1.4; stroke-linecap: round; }
/* pill — the rounded nose of the cushion rubber */
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border: 1px solid transparent; border-radius: 999px; background: var(--ink); color: var(--ink2); box-shadow: 0 6px 14px rgba(0, 0, 0, .35); font: 600 16px/1.2 var(--body); text-decoration: none; cursor: pointer; transition: transform .15s ease-out, box-shadow .15s ease-out, background-color .15s; }
.pill:hover { transform: translateY(-2px); box-shadow: 0 9px 18px rgba(0, 0, 0, .4); }
.pill--ghost { background: transparent; border-color: var(--ink); color: var(--ink); box-shadow: none; }
.pill--ghost:hover { background: rgba(242, 236, 221, .1); box-shadow: none; }
.pill--cloth { background: var(--baize-deep); border-color: var(--brass); color: var(--ink); }
.pill--lg { padding: 18px 32px; font-size: 18px; }
.pill--sm { padding: 10px 18px; font-size: 14px; }
.pill:disabled { opacity: .4; cursor: default; transform: none; }
.linkish { background: none; border: 0; padding: 0; cursor: pointer; }
.chip { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1.3 var(--body); letter-spacing: .1em; text-transform: uppercase; }
.chip i { width: 10px; height: 10px; flex: none; border-radius: 50%; background: radial-gradient(circle at 34% 32%, #fff 0 1.3px, var(--ink) 1.6px); }
.chips { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ulink { font-weight: 600; color: var(--brass-lit); text-underline-offset: 3px; }
/* photo-cutout ball: the lamp is overhead, contact shadow straight below */
.ball { position: absolute; z-index: 2; pointer-events: none; }
.ball::before { content: ""; position: absolute; left: 15%; top: 86%; width: 70%; height: 16%; border-radius: 50%; background: rgba(0, 0, 0, .35); filter: blur(10px); }
.ball img { position: relative; width: 100%; }

/* ---------- header: tabs hang from the top rail ---------- */
.top { position: relative; z-index: 20; background: radial-gradient(100% 100% at 50% 0, var(--wood-lit), var(--wood) 55%, var(--wood-dark)); border-bottom: 1px solid var(--brass); }
.top-in { display: flex; align-items: flex-end; justify-content: space-between; padding-top: 18px; }
.logo { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 16px; font: 400 26px/1 var(--display); letter-spacing: -.02em; text-decoration: none; }
.lg-b { width: 26px; height: 26px; }
.tabs { display: flex; gap: 6px; }
.tabs a { display: block; margin-bottom: -1px; padding: 12px 22px 14px; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; color: var(--pearl); font-size: 15px; font-weight: 500; text-decoration: none; }
.tabs a:hover { color: var(--brass-lit); }
.tabs a[aria-current] { background: var(--baize-deep); border-color: var(--brass); color: var(--ink); font-weight: 600; }
.top--legal .tabs a[aria-current] { background: var(--wood-lit); }

/* ---------- hero: diptych — photo | cushion | scoreboard on the cloth ---------- */
.hero { position: relative; display: grid; grid-template-columns: 760px 30px 1fr; min-height: 983px; }
.h-photo { position: relative; overflow: hidden; background: var(--baize); }
.h-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15, 42, 24, .5), rgba(15, 42, 24, 0) 45%, rgba(15, 42, 24, .15)); }
.cushion { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 70px 0; background: linear-gradient(90deg, var(--wood-dark), var(--wood-lit) 45%, var(--wood)); }
.cushion .spot { width: 10px; height: 10px; }
.rail--hero { display: none; }
.h-board { display: flex; flex-direction: column; gap: 22px; padding: 56px 64px 64px 48px; background: radial-gradient(55% 55% at 40% 12%, var(--baize-lit), var(--baize) 55%, var(--baize-dark)); }
.h1 { max-width: 480px; font: 400 68px/.94 var(--display); letter-spacing: -.03em; }
.sf { max-width: 480px; font-size: 17px; color: var(--muted); }
.board { position: relative; z-index: 3; width: 744px; margin-left: -278px; margin-top: 8px; box-shadow: 0 24px 40px rgba(0, 0, 0, .55); }
.sb-in { padding: 6px 22px 10px; background: radial-gradient(100% 100% at 30% 10%, var(--wood-lit), var(--wood) 55%, var(--wood-dark)); }
.sb-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 4px; font: 500 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--brass-lit); }
.sb li { border-bottom: 1px solid var(--brass-dark); }
.sb a { display: flex; align-items: center; gap: 18px; padding: 9px 0; text-decoration: none; }
.sb-n { width: 22px; flex: none; font-size: 15px; font-weight: 600; color: var(--brass-lit); }
.sb-t { flex: 1; display: grid; gap: 2px; }
.sb-t b { font: 400 23px/1.1 var(--display); }
.sb-t small { font-size: 13px; color: var(--muted); }
.sb .ar { width: 18px; height: 18px; color: var(--brass-lit); }
.track { position: relative; width: 128px; height: 18px; flex: none; border-bottom: 1px solid var(--brass-dark); }
.track i { position: absolute; bottom: 0; width: 1px; height: 6px; margin-left: -.5px; background: var(--brass-dark); }
.track i.maj { height: 10px; }
/* the brass pointer: settles one by one on load (120 ms step); on hover it slides along smoothly */
.ptr { position: absolute; top: 0; left: calc(var(--p) * (100% - 12px)); width: 12px; height: 16px; background: var(--brass-lit); clip-path: polygon(0 0, 100% 0, 100% 56%, 50% 100%, 0 56%); transition: left .18s ease-out; }
.js [data-board] .ptr { left: 0; }
.js [data-board].go .ptr { left: calc(var(--p) * (100% - 12px)); transition: left .3s steps(4, end) calc(var(--k) * 120ms); }
.js [data-board].go.done .ptr { transition: left .18s ease-out; }
.sb a:hover .ptr, .sb a:focus-visible .ptr { left: calc(100% - 12px); }
.sb a:hover .sb-t b { color: var(--brass-lit); }
.h-act { margin-top: 4px; }

/* ---------- sections ---------- */
.sec { position: relative; overflow: hidden; padding: 112px 0; }
.wood.sec { padding: 104px 0; }
.head { display: grid; gap: 16px; }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.sec > .in > .head { margin-bottom: 48px; }
.h2 { max-width: 720px; font: 400 56px/1.02 var(--display); letter-spacing: -.015em; }
.lead { max-width: 640px; font-size: 18px; color: var(--muted); }
.h3 { font: 400 30px/1.1 var(--display); }
.p { font-size: 18px; color: var(--muted); }
.p + .p { margin-top: 14px; }

/* G — cover tiles; plate and one line slide up from the rail on hover */
.cloth--g { background: radial-gradient(75% 75% at 50% 45%, var(--baize-lit), var(--baize) 55%, var(--baize-dark)); }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 40px; }
.tile { position: relative; display: block; overflow: hidden; border-radius: var(--r); box-shadow: 0 10px 18px rgba(0, 0, 0, .45), 0 2px 3px rgba(0, 0, 0, .25); transition: transform .2s steps(3, end), box-shadow .2s steps(3, end); }
.tile img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.t-cap { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 8px; justify-items: start; padding: 14px 16px; background: linear-gradient(rgba(42, 17, 10, 0), rgba(42, 17, 10, .92) 35%, rgba(42, 17, 10, .96)); transform: translateY(100%); transition: transform .2s steps(3, end); }
.t-l { font-size: 13px; line-height: 1.3; }
.tile:hover, .tile:focus-visible { transform: translateY(-6px); box-shadow: 0 6px 10px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .3); }
.tile:hover .t-cap, .tile:focus-visible .t-cap { transform: none; }
.g-link-m { display: none; }
.ball--g { right: 50px; bottom: -36px; width: 200px; }

/* P — focus */
.focus { display: flex; align-items: center; gap: 72px; }
.framed { display: flex; flex-direction: column; align-items: center; gap: 14px; flex: none; }
.framed .inlay img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.focus .framed { width: 444px; }
.f-t { flex: 1; display: grid; gap: 22px; justify-items: start; }
.facts { width: 100%; }
.facts div { display: flex; gap: 24px; padding: 11px 0; border-bottom: 1px solid var(--brass-dark); }
.facts dt { width: 150px; flex: none; padding-top: 2px; font: 500 12px/1.4 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--brass-lit); }
.facts dd { font-size: 15px; line-height: 1.4; }

/* D — three pockets */
.pockets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: start; }
.pocket { overflow: hidden; padding-bottom: 28px; border: 1px solid rgba(200, 162, 83, .5); border-radius: var(--r); background: rgba(26, 69, 39, .55); }
.mouth { display: flex; justify-content: center; align-items: center; height: 46px; background: linear-gradient(var(--wood-lit), var(--wood)); }
.mouth::after { content: ""; width: 74px; height: 30px; border-radius: 999px; background: linear-gradient(#000, var(--wood-dark)); box-shadow: inset 0 4px 6px rgba(0, 0, 0, .8); }
.pk-b { display: grid; gap: 14px; padding: 18px 24px 0; }
.pk-b > p { font-size: 15px; color: var(--muted); }
.pk-b li { border-top: 1px solid var(--brass-dark); }
.pk-b li a { display: flex; align-items: center; gap: 14px; padding: 8px 0; text-decoration: none; }
.pk-b li img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; }
.pk-b li span { flex: 1; font-size: 16px; font-weight: 600; }
.pk-b li a:hover span { color: var(--brass-lit); }
.ball--d { right: 70px; top: 70px; width: 180px; }

/* A — statement */
.a-in { display: grid; gap: 32px; justify-items: start; }
.brule { width: 120px; height: 2px; background: var(--brass); }
.a-st { max-width: 860px; font: 400 46px/1.16 var(--display); letter-spacing: -.01em; }

/* ---------- catalogue: the cue rack ---------- */
.cloth--cat { background: radial-gradient(80% 80% at 50% 30%, var(--baize-lit), var(--baize) 55%, var(--baize-dark)); }
.h1-page { font: 400 74px/1 var(--display); letter-spacing: -.02em; }
.arrows { display: flex; gap: 12px; }
.rack { --inset: max(var(--pad), calc((100vw - var(--w)) / 2 + var(--pad))); display: flex; gap: 32px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--inset); margin: 0 calc(-1 * var(--inset)); padding: 4px var(--inset) 24px; scrollbar-width: none; }
.rack::-webkit-scrollbar { display: none; }
.card { flex: none; width: 340px; display: grid; gap: 14px; align-content: start; scroll-snap-align: start; }
.card > a { text-decoration: none; }
.card .framed { width: 100%; }
.card > a:hover .rframe { box-shadow: 0 20px 34px rgba(0, 0, 0, .5); }
.c-l { font-size: 15px; color: var(--muted); }
.c-c { font-size: 13px; color: var(--muted); }
.dots { display: flex; gap: 10px; margin-top: 32px; }
.dots i { width: 10px; height: 10px; border: 1px solid var(--brass); border-radius: 999px; background: var(--baize-deep); transition: width .2s steps(2, end); }
.dots i.on { width: 28px; background: var(--brass-lit); }

/* ---------- game page ---------- */
.cloth--gt { padding: 64px 0 80px; background: radial-gradient(75% 75% at 32% 35%, var(--baize-lit), var(--baize) 55%, var(--baize-dark)); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 48px; font-size: 13px; color: var(--brass-lit); }
.crumbs li + li::before { content: "/"; margin-right: 6px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.gcard .gc-in { display: flex; gap: 48px; padding: 36px; background: radial-gradient(90% 90% at 25% 30%, var(--baize-lit), var(--baize) 55%, var(--baize-dark)); }
.gc-cv { width: 400px; height: 400px; flex: none; border-radius: var(--r); object-fit: cover; box-shadow: 0 16px 28px rgba(0, 0, 0, .5); }
.gc-t { flex: 1; display: grid; gap: 18px; align-content: start; }
.h1-g { font: 400 72px/.96 var(--display); letter-spacing: -.02em; }
.gc-t .lead { font-size: 19px; max-width: 560px; }
.meta { font-size: 13px; color: var(--brass-lit); }
.ball--gt { right: max(var(--pad), calc((100vw - var(--w)) / 2 + var(--pad))); top: 40px; width: 150px; }
.gbody { padding: 80px 0; }
.gcol { max-width: 860px; display: grid; gap: 64px; }
.gsec { display: grid; gap: 18px; }
.gsec .h3, .poki .h3 { font-size: 39px; }
.gsec > .p + .p { margin-top: 0; }
.keys { display: flex; flex-wrap: wrap; gap: 12px; }
.keys li { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border: 1px solid var(--brass-dark); border-radius: 999px; background: var(--wood-dark); font-size: 14px; }
.keys kbd { padding: 4px 10px; border-radius: 999px; background: var(--ink); color: var(--ink2); font-size: 13px; font-weight: 600; white-space: nowrap; }
.tips { display: grid; gap: 14px; }
.tips li { display: flex; gap: 14px; font-size: 18px; }
.weigh { display: grid; gap: 12px; }
.weigh li { display: flex; align-items: baseline; gap: 14px; font-size: 16px; }
.sims { display: flex; flex-wrap: wrap; gap: 20px; }
.sim { display: flex; align-items: center; gap: 12px; width: 270px; text-decoration: none; }
.sim img { width: 72px; height: 72px; flex: none; border-radius: 8px; object-fit: cover; }
.sim span { display: grid; gap: 2px; }
.sim b { font-size: 15px; font-weight: 600; }
.sim small { font-size: 13px; color: var(--muted); }
.sim:hover b { color: var(--brass-lit); }
.poki { display: grid; gap: 14px; justify-items: start; padding: 24px; border: 1px solid rgba(200, 162, 83, .6); border-radius: var(--r); background: rgba(42, 17, 10, .6); }
.poki .h3 { font-size: 30px; }
.poki .p { font-size: 15px; }
.fqs { display: grid; }
.fq { border-bottom: 1px solid var(--brass-dark); }
.fq summary { display: flex; align-items: center; gap: 14px; padding: 16px 0; cursor: pointer; list-style: none; font-size: 17px; font-weight: 600; }
.fq summary::-webkit-details-marker { display: none; }
.fq summary span { flex: 1; }
.fq summary .pc { transition: transform .15s ease-out; }
.fq[open] summary .pc { transform: rotate(45deg); }
.fq p { padding: 0 0 16px; font-size: 16px; color: var(--muted); }

/* about */
.cloth--ab { padding: 96px 0; background: radial-gradient(75% 75% at 50% 40%, var(--baize-lit), var(--baize) 55%, var(--baize-dark)); }
.cloth--ab .lead { margin-top: 16px; max-width: 640px; }
.ball--ab { right: max(var(--pad), calc((100vw - var(--w)) / 2 + var(--pad))); top: 60px; width: 200px; }
.abody { padding: 80px 0; }
.abody .in { display: grid; gap: 56px; }
.arow { display: flex; gap: 56px; padding-bottom: 40px; border-bottom: 1px solid var(--brass-dark); }
.arow .h3 { width: 340px; flex: none; }
.arow > div { max-width: 700px; }
.ct-in { display: grid; gap: 16px; padding: 36px; background: var(--cloth); }
.ct-in .h3 { font-size: 36px; }
.ct-in .p { max-width: 760px; }
.reasons { display: grid; gap: 10px; }
.reasons li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.reasons .pc { width: 18px; height: 18px; }
.krows { display: grid; gap: 10px; }
.krows div { display: flex; gap: 20px; }
.krows dt { width: 110px; flex: none; padding-top: 3px; font: 500 12px/1.4 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--brass-lit); }
.krows dd { font-size: 16px; overflow-wrap: anywhere; }
.krows a { text-decoration: none; }

/* legal: the scoresheet */
.ltop { padding: 72px 0; }
.ltop .crumbs ol { margin-bottom: 24px; }
.upd { margin-top: 16px; font-size: 14px; color: var(--brass-lit); }
.sheet { padding: 72px 0; background: var(--sheet); color: var(--ink2); }
.scol { max-width: 760px; margin: 0 auto; }
.lsum { font: 400 26px/1.3 var(--display); }
.lsec { display: grid; gap: 10px; padding: 28px 0; border-bottom: 1px solid var(--rule); }
.lsec h2 { display: flex; align-items: center; gap: 14px; font-size: 20px; font-weight: 600; }
.lsec h2 i { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--red); }
.lsec .p { font-size: 16px; color: rgba(27, 20, 16, .85); }
.lsec a, .lsum a { color: var(--wood); font-weight: 600; }
.p a, .ct-in a { color: var(--brass-lit); }

/* ---------- footer: split contact ---------- */
.footer { padding: 72px 0 56px; background: radial-gradient(100% 100% at 25% 10%, var(--wood-lit), var(--wood) 55%, var(--wood-dark)); }
.f-in { display: flex; gap: 64px; }
.f-l { width: 560px; flex: none; display: grid; gap: 18px; justify-items: start; align-content: start; }
.f-brand { font: 400 40px/1 var(--display); }
.f-line { max-width: 480px; font-size: 15px; color: var(--muted); }
.f-mail { font: 400 30px/1.1 var(--display); color: var(--brass-lit); text-decoration: none; overflow-wrap: anywhere; }
.f-mail:hover { text-decoration: underline; }
.f-addr { font-size: 13px; color: var(--muted); }
.f-r { flex: 1; display: grid; gap: 28px; align-content: start; }
.f-cols { display: flex; flex-wrap: wrap; gap: 24px 64px; }
.f-h { margin-bottom: 12px; font: 500 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--brass-lit); }
.f-cols ul { display: grid; gap: 12px; }
.f-cols li, .f-cols a, .f-cols .linkish { font-size: 15px; text-decoration: none; }
.f-cols a:hover, .f-cols .linkish:hover { color: var(--brass-lit); }
.f-fine { max-width: 560px; font-size: 13px; color: var(--muted); }

/* ---------- cookie ---------- */
.cookie { position: fixed; z-index: 90; right: 24px; bottom: 24px; width: min(500px, calc(100% - 32px)); padding: 8px; box-shadow: 0 24px 40px rgba(0, 0, 0, .5); }
.cookie[hidden] { display: none; }
.cookie.is-open { animation: ck-in .3s ease-out; }
@keyframes ck-in { from { opacity: 0; transform: translateY(14px); } }
.ck-in { display: grid; gap: 14px; justify-items: start; padding: 20px 18px; background: radial-gradient(90% 90% at 40% 20%, var(--baize-lit), var(--baize) 55%, var(--baize-dark)); }
.cookie p { font-size: 15px; color: var(--muted); }
.ck-link { font-size: 14px; color: var(--brass-lit); text-underline-offset: 3px; }
.ck-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.ck-acts .pill { padding: 12px 22px; }
.ck-manage { display: grid; gap: 10px; justify-items: start; width: 100%; padding: 12px; border: 1px solid rgba(200, 162, 83, .5); border-radius: 8px; font-size: 14px; }
.ck-manage[hidden] { display: none; }
.ck-opt { display: flex; align-items: center; gap: 10px; }
.ck-opt input { width: 18px; height: 18px; accent-color: var(--brass); }

/* ---------- responsive ---------- */
@media (max-width: 1240px) {
  .hero { grid-template-columns: 52fr 30px 48fr; }
  .board { width: calc(100% + 200px); margin-left: -200px; }
  .h1 { font-size: 58px; }
  .f-l { width: 420px; }
  .focus { gap: 48px; }
  .focus .framed { width: 380px; }
  .gc-cv { width: 320px; height: 320px; }
  .h1-g { font-size: 60px; }
}
@media (max-width: 1100px) {
  .tiles, .pockets { gap: 24px; }
  .pockets { grid-template-columns: 1fr 1fr; }
  .focus { flex-direction: column; align-items: flex-start; }
  .f-in { flex-direction: column; }
  .arow { gap: 32px; }
  .arow .h3 { width: 260px; }
}
@media (max-width: 899px) {
  :root { --pad: 16px; }
  body { font-size: 16px; }
  .top-in { padding-top: 12px; }
  .logo { padding-bottom: 12px; gap: 6px; font-size: 17px; }
  .lg-b { width: 14px; height: 14px; }
  .tabs { gap: 2px; }
  .tabs a { padding: 8px 7px 9px; font-size: 13px; }
  .rail { height: 18px; padding: 0 24px; }
  .spot { width: 7px; height: 7px; }

  .hero { display: block; min-height: 0; }
  .h-photo { height: 190px; }
  .h-photo::after { background: linear-gradient(180deg, rgba(15, 42, 24, .5), rgba(15, 42, 24, 0) 45%, rgba(15, 42, 24, .15)); }
  .cushion { display: none; }
  .rail--hero { display: flex; }
  .h-board { gap: 16px; padding: 26px var(--pad) 36px; }
  .h1 { font-size: 40px; line-height: .98; }
  .sf { font-size: 15px; }
  .board { width: 100%; margin: 0; padding: 8px; }
  .sb-in { padding: 4px 12px 6px; }
  .sb-top { padding: 8px 0 4px; }
  .sb a { gap: 10px; padding: 8px 0; }
  .sb-n { width: 16px; font-size: 13px; }
  .sb-t b { font-size: 20px; }
  .sb-t small { display: none; }
  .track { width: 74px; }
  .sb .ar { width: 14px; height: 14px; }

  .sec, .wood.sec { padding: 64px 0; }
  .head-row { flex-direction: column; align-items: flex-start; margin-bottom: 32px; }
  .sec > .in > .head { margin-bottom: 32px; }
  .h2 { font-size: 34px; }
  .lead, .p { font-size: 16px; }
  .h3 { font-size: 23px; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 14px 12px; }
  .t-cap { display: none; }
  .h-link { display: none; }
  .g-link-m { display: block; margin-top: 32px; }
  .ball--g { display: none; }
  .focus { gap: 28px; }
  .focus .framed { width: 100%; }
  .rframe { padding: 8px; }
  .facts div { flex-direction: column; gap: 2px; padding: 9px 0; }
  .facts dt { width: auto; }
  .facts dd { font-size: 14px; }
  .pockets { grid-template-columns: 1fr; gap: 20px; }
  .mouth { height: 36px; }
  .mouth::after { width: 60px; height: 24px; }
  .pocket { padding-bottom: 20px; }
  .pk-b { padding: 16px 18px 0; }
  .ball--d { right: 16px; top: 40px; width: 96px; }
  .cloth .in > .head .h2 { max-width: calc(100% - 100px); }
  .a-in { gap: 24px; }
  .brule { width: 80px; }
  .a-st { font-size: 28px; }
  .pill--lg { padding: 15px 24px; font-size: 16px; }

  .h1-page { font-size: 40px; }
  .arrows .pill { padding: 12px 18px; font-size: 14px; }
  .rack { gap: 16px; }
  .card { width: 250px; }
  .dots { margin-top: 20px; }

  .cloth--gt { padding: 36px 0 48px; }
  .crumbs ol { margin-bottom: 24px; }
  .gcard .gc-in { flex-direction: column; gap: 24px; padding: 18px 16px; }
  .gc-cv { width: 100%; height: auto; aspect-ratio: 1; }
  .h1-g { font-size: 42px; }
  .gc-t .lead { font-size: 16px; }
  .ball--gt { display: none; }
  .gbody { padding: 44px 0; }
  .gcol { gap: 40px; }
  .gsec .h3 { font-size: 26px; }
  .tips li { font-size: 16px; }
  .poki .h3 { font-size: 23px; }

  .cloth--ab { padding: 52px 0; }
  .ball--ab { display: none; }
  .abody { padding: 44px 0; }
  .abody .in { gap: 36px; }
  .arow { flex-direction: column; gap: 12px; padding-bottom: 28px; }
  .arow .h3 { width: auto; }
  .ct-in { padding: 20px 18px; }
  .ct-in .h3 { font-size: 28px; }
  .krows div { flex-direction: column; gap: 2px; }

  .ltop { padding: 44px 0; }
  .sheet { padding: 40px 0; }
  .lsum { font-size: 21px; }
  .lsec { padding: 22px 0; }
  .lsec h2 { font-size: 18px; }

  .footer { padding: 44px 0 40px; }
  .f-in { gap: 36px; }
  .f-l { width: auto; }
  .f-brand { font-size: 30px; }
  .f-mail { font-size: 24px; }
  .f-cols { gap: 24px 28px; }
  .cookie { right: 16px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js [data-board] .ptr { left: calc(var(--p) * (100% - 12px)); }
  .tile:hover, .tile:focus-visible, .pill:hover { transform: none; }
}
.sheet .p a, .sheet .lsum a { color: var(--wood); }

/* social icons */
.soc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.soc-i { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: inherit; opacity: .85; transition: opacity .2s, transform .2s; }
.soc-i:hover, .soc-i:focus-visible { opacity: 1; transform: translateY(-1px); }
.soc-i svg { display: block; }