/* vanekhelskhusk.com — Ferry-Morse / Burpee seed packets in a hardware-store rack (USA 1940s–60s): litho paper envelopes,
   gummed kraft flaps, clear acetate pockets; shop-window daylight from the upper left.
   paper-cutout-layers (one paper shadow for every layer) · big-type-as-image (Coustard Black, cropped by an edge).
   Desktop = Figma 1368, below 1024 = Figma 360. */
:root {
  --ink: #1F2A20; --ink2: #454E43; --paper: #F7F5EE; --board: #ECE6D6; --board2: #E2DAC6;
  --kraft: #D6B98A; --kraft2: #C4A06C; --kraftInk: #5A4326;
  --yellow: #F2C230; --yellow2: #E2A91B; --red: #C2352A; --green: #22522A; --green2: #2C6233; --blue: #2A5C9A;
  --disp: 'Coustard', Georgia, serif; --text: 'Hind', system-ui, sans-serif;
  --pad: 16px; --side: max(var(--pad), calc((100% - 688px) / 2));
  --u: min(1px, calc(100vw / 1368));
  --m: min(1.5px, calc((100vw - 2 * var(--pad)) / 328));
  --paper1: 1px 2px 2px rgba(31, 42, 32, .14), 2px 8px 18px -2px rgba(31, 42, 32, .10);
  --paper14: 1px 2px 2px rgba(31, 42, 32, .196), 2px 11.2px 25.2px -2px rgba(31, 42, 32, .14);
  --paper2: 1px 2px 2px rgba(31, 42, 32, .28), 2px 16px 36px -2px rgba(31, 42, 32, .20);
  --paper22: 1px 2px 2px rgba(31, 42, 32, .308), 2px 17.6px 39.6px -2px rgba(31, 42, 32, .22);
}
@media (min-width: 600px) { :root { --pad: 32px; } }
@media (min-width: 1024px) { :root { --pad: 40px; --side: max(40px, calc((100% - 1288px) / 2)); } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
body.bd { background: var(--board); }
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: 900; }
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; }
hr { border: 0; height: 1px; margin: 0; background: rgba(31, 42, 32, .4); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.y :focus-visible { outline-color: var(--yellow); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--yellow); color: var(--ink); padding: 8px 14px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- genome: button, chip, lot, links, big type ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 18px; background: var(--ink); color: var(--paper); font: 600 15px/1.55 var(--text); text-decoration: none; transition: background-color .16s; }
.btn:hover { background: #34433a; }
.btn.ln { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn.ln:hover { background: rgba(31, 42, 32, .08); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 3px 7px; background: var(--paper); border: 1px solid rgba(31, 42, 32, .6); border-radius: 2px;
  font: 700 12px/1.55 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.chip i { width: 6px; height: 6px; border-radius: 50%; border: 1px solid rgba(31, 42, 32, .6); flex: none; }
.chip.yl { background: var(--yellow); }
.lot { font: 600 13px/1.55 var(--text); letter-spacing: .04em; text-transform: uppercase; color: var(--ink2); white-space: nowrap; }
.kr { color: var(--kraftInk); } .ky { color: var(--yellow); } .kk { color: var(--ink); } .kred { color: var(--red); }
.ul { font: 600 14px/1.55 var(--text); text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
.bt { position: absolute; left: var(--xm); top: var(--ym); font: 900 calc(var(--fsm) * 1px)/.82 var(--disp); letter-spacing: -.03em; white-space: nowrap; pointer-events: none; user-select: none; }
@media (min-width: 1024px) {
  .btn { padding: 15px 24px; font-size: 16px; }
  .bt { left: var(--x); top: var(--y); font-size: calc(var(--fs) * 1px); }
}

/* ---------- packet (paper-cutout-layers) ---------- */
.pk { --k: 1px; --bt: 12px; --tt: 15px; --tl: 12px; --in: max(6px, 5cqw); --tp: 8px calc(var(--in) + 2px) 10px; --tg: 2px; --foot: 12px;
  position: relative; display: block; padding-top: calc(10 * var(--k)); container-type: inline-size; color: var(--ink); text-decoration: none; }
.pk-back { position: absolute; left: 0; top: 0; width: 100%; height: calc(30 * var(--k)); background: var(--kraft2); border-radius: 4px; }
.pk-flap { position: absolute; left: 0; top: 0; width: 100%; height: calc(26.6cqw + 4px); opacity: .9; }
.pk-f { position: relative; display: block; background: var(--paper); border-radius: 4px; overflow: hidden; box-shadow: var(--paper1); transition: box-shadow .16s; }
.pk-b { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 24cqw; padding: 0 calc(var(--in) + 2px);
  font: 600 var(--bt)/1.55 var(--text); letter-spacing: .04em; text-transform: uppercase; color: var(--paper); white-space: nowrap; }
.pk-g { font-weight: 700; letter-spacing: .08em; overflow: hidden; text-overflow: ellipsis; }
.ink-red .pk-b { background: var(--red); } .ink-green .pk-b { background: var(--green); } .ink-blue .pk-b { background: var(--blue); }
.ink-yellow .pk-b { background: var(--yellow); color: var(--ink); }
.pk-c { display: block; padding: var(--in) var(--in) 0; }
.pk-c img { width: 100%; aspect-ratio: 1; border-radius: 2px; }
.pk-t { display: flex; flex-direction: column; gap: var(--tg); padding: var(--tp); }
.pk-t > :first-child { font: 900 var(--tt)/1.08 var(--disp); }
.pk-t p { font-size: var(--tl); line-height: 1.4; color: var(--ink2); }
.pk-nt { padding: 0; height: var(--foot); }

/* ---------- header ---------- */
.hd { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 64px; padding: 0 var(--side); background: var(--paper); border-bottom: 1px solid rgba(31, 42, 32, .25); }
.hn { display: contents; }
.hl { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 2px; }
.hr { grid-column: 3; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.hd .logo { grid-column: 2; grid-row: 1; }
.ni { padding: 5px 6px; font: 500 14px/1.55 var(--text); color: var(--ink); text-decoration: none; }
.ni[aria-current] { background: var(--yellow); font-weight: 700; }
.ni:hover { text-decoration: underline; text-underline-offset: 3px; }
.nh, .hm { display: none; }
.hm { font-size: 14px; color: var(--ink2); text-decoration: none; }
.hm:hover { text-decoration: underline; }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.mk { position: relative; width: 22px; height: 30px; background: var(--yellow); border-radius: 3px; box-shadow: var(--paper1); overflow: hidden; flex: none; font: 900 17px/1.05 var(--disp); }
.mk i { position: absolute; left: 0; top: 0; width: 100%; height: 7px; background: var(--red); }
.mk { padding: 8px 0 0 5px; }
.lt { font: 900 16px/1.05 var(--disp); letter-spacing: -.01em; white-space: nowrap; }
@media (max-width: 339px) { .lt { font-size: 14px; } .hd { padding-inline: 10px; } .logo { gap: 6px; } }
@media (min-width: 1024px) {
  .hd { height: 88px; }
  .hl { gap: 18px; }
  .ni { padding: 6px 10px; font-size: 16px; }
  .nh, .hm { display: inline; }
  .nh { display: block; }
  .logo { gap: 12px; }
  .mk { width: 30px; height: 40px; padding: 11px 0 0 7px; font-size: 24px; }
  .mk i { height: 9px; }
  .lt { font-size: 26px; }
}

/* ---------- hero: the rack ---------- */
.hero { --k: var(--m); position: relative; overflow: hidden; padding-bottom: calc(32 * var(--k));
  background: radial-gradient(75% 75% at 8% 2%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)), var(--board); }
.rk { position: relative; width: calc(328 * var(--k)); margin: 0 auto; padding-top: calc(34 * var(--k)); }
.crown { position: absolute; left: calc(74 * var(--k)); top: calc(12 * var(--k)); width: calc(180 * var(--k)); height: calc(34 * var(--k)); padding-top: calc(4 * var(--k));
  background: var(--yellow); border-radius: 4px; box-shadow: var(--paper1); text-align: center; font: 700 calc(12 * var(--k))/1.55 var(--text); letter-spacing: .1em; text-transform: uppercase; }
.hcard { position: relative; min-height: calc(330 * var(--k)); padding: calc(30 * var(--k)) calc(22 * var(--k)) calc(24 * var(--k));
  background: url(/assets/img/grain14.png) 0 0 / 256px 256px, var(--yellow); background-blend-mode: overlay; border-radius: 4px; box-shadow: var(--paper1); }
.hcard::before, .hcard::after { content: ''; position: absolute; pointer-events: none; }
.hcard::before { left: calc(12 * var(--k)); top: calc(11 * var(--k)); right: calc(8 * var(--k)); bottom: calc(9 * var(--k)); border: 1px solid rgba(194, 53, 42, .45); }
.hcard::after { inset: calc(10 * var(--k)); border: 1px solid rgba(31, 42, 32, .55); }
.hcard h1 { position: relative; font-size: calc(40 * var(--k)); line-height: .96; letter-spacing: -.025em; }
.hside { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: calc(14 * var(--k)); margin-top: calc(14 * var(--k)); }
.hside p { font-size: calc(14 * var(--k)); line-height: 1.5; }
.hside .btn { padding: calc(13 * var(--k)) calc(18 * var(--k)); font-size: calc(15 * var(--k)); }
.pline { display: none; }
.rackwrap { position: relative; height: calc(530 * var(--k)); margin-top: calc(20 * var(--k)); }
.rbar, .rail { position: absolute; left: calc(50% - 50vw); width: 100vw; background: var(--ink); }
.rbar { height: calc(4 * var(--k)); opacity: .75; }
.r1 { top: calc(10 * var(--k)); } .r2 { top: calc(260 * var(--k)); }
.rail, .rchips { display: none; }
.slot { position: absolute; left: calc((var(--xm) - 16) * var(--k)); top: calc(var(--ym) * var(--k)); width: calc(100 * var(--k)); height: calc(var(--hm) * var(--k)); display: flex; flex-direction: column; }
.pocket { position: relative; z-index: 1; flex: 1; margin: calc(-22 * var(--k)) calc(-4 * var(--k)) 0; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 2px; box-shadow: 3px 4px 6px -2px rgba(31, 42, 32, .08); pointer-events: none; overflow: hidden; }
.pocket::before { content: ''; position: absolute; left: calc(6 * var(--k)); top: 0; width: 12%; height: min(100%, calc(60 * var(--k))); background: linear-gradient(90deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); }
.pocket::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: rgba(255, 255, 255, .9); }
.pk-r { --k: inherit; --bt: calc(12 * var(--k)); --tt: calc(12 * var(--k)); --in: 6cqw; --tp: calc(8 * var(--k)) calc(8 * var(--k)) calc(32 * var(--k)); transition: transform .16s; }
.pk-r .pk-g { display: none; }
.pk-r:hover, .pk-r:focus-visible { transform: translateY(-8px); }
.pk-r:hover .pk-f, .pk-r:focus-visible .pk-f, .card:hover .pk-f, .card:focus-visible .pk-f { box-shadow: var(--paper22); }
.pback { position: relative; display: flex; flex-direction: column; gap: 7px; padding: calc(18 * var(--k)) calc(16 * var(--k)); background: var(--kraft); border-radius: 4px; box-shadow: var(--paper1); }
.pback::before { content: ''; position: absolute; inset: calc(8 * var(--k)); border: 1px solid rgba(90, 67, 38, .6); pointer-events: none; }
.pback h2 { font-size: calc(24 * var(--k)); line-height: 1.05; }
.rb-h { font: 700 calc(13 * var(--k))/1.55 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--kraftInk); }
.pback ul { display: flex; flex-direction: column; gap: 7px; }
.pback li { display: flex; flex-direction: column; gap: 1px; padding-top: 7px; border-top: 1px solid rgba(90, 67, 38, .5); }
.rb-g { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.rb-g b { font: 700 calc(15 * var(--k))/1.55 var(--text); }
.rb-g span { font: 500 calc(13 * var(--k))/1.55 var(--text); color: var(--kraftInk); white-space: nowrap; }
.rb-c { font-size: calc(13 * var(--k)); line-height: 1.35; }
@media (min-width: 1024px) {
  .hero { --k: var(--u); height: calc(850 * var(--u)); padding: 0; }
  .rk { position: absolute; left: max(0px, calc(50% - 684 * var(--u))); top: 0; width: min(100%, calc(1368 * var(--u))); /* --u counts the scrollbar */ height: 100%; padding: 0; margin: 0; }
  .crown { left: calc(554 * var(--k)); top: calc(18 * var(--k)); width: calc(260 * var(--k)); height: calc(40 * var(--k)); font-size: calc(13 * var(--k)); }
  .hcard { position: absolute; left: calc(40 * var(--k)); top: calc(44 * var(--k)); width: calc(1288 * var(--k)); height: calc(290 * var(--k)); min-height: 0; padding: 0; }
  .hcard h1 { position: absolute; left: calc(44 * var(--k)); top: calc(34 * var(--k)); width: calc(760 * var(--k)); font-size: calc(76 * var(--k)); }
  .hside { position: absolute; left: calc(880 * var(--k)); top: calc(34 * var(--k)); width: calc(360 * var(--k)); margin: 0; gap: calc(22 * var(--k)); }
  .hside p { font-size: calc(17 * var(--k)); }
  .hside .btn { padding: calc(15 * var(--k)) calc(24 * var(--k)); font-size: calc(16 * var(--k)); }
  .pline { position: absolute; left: calc(880 * var(--k)); top: calc(242 * var(--k)); display: flex; align-items: center; gap: calc(18 * var(--k));
    font: 700 calc(13 * var(--k))/1.55 var(--text); letter-spacing: .08em; text-transform: uppercase; }
  .pline i { width: calc(5 * var(--k)); height: calc(5 * var(--k)); border-radius: 50%; background: var(--ink); }
  .rackwrap { position: absolute; inset: 0; height: auto; margin: 0; }
  .rbar { height: calc(6 * var(--k)); }
  .r1 { top: calc(370 * var(--k)); } .r2 { display: none; }
  .rail { display: block; top: calc(716 * var(--k)); bottom: 0; }
  .slot { left: calc(var(--x) * var(--k)); top: calc(var(--y) * var(--k)); width: calc(160 * var(--k)); height: calc(var(--h) * var(--k)); }
  .pocket { margin: calc(-26 * var(--k)) calc(-5 * var(--k)) 0; }
  .pk-r { --bt: calc(12 * var(--k)); --tt: calc(15 * var(--k)); --in: 5cqw; --tp: calc(8 * var(--k)) calc(10 * var(--k)) calc(40 * var(--k)); }
  .pk-r .pk-g { display: block; }
  .rchips { display: block; }
  .rchip { position: absolute; left: calc(var(--x) * var(--k)); top: calc(736 * var(--k)); }
  .rchip .chip { gap: calc(6 * var(--k)); padding: calc(4 * var(--k)) calc(9 * var(--k)) calc(3 * var(--k)) calc(7 * var(--k)); font-size: calc(12 * var(--k)); }
  .rchip .chip i { width: calc(6 * var(--k)); height: calc(6 * var(--k)); }
  .pback { position: absolute; left: calc(1084 * var(--k)); top: calc(380 * var(--k)); width: calc(244 * var(--k)); padding: calc(26 * var(--k)) calc(22 * var(--k)); gap: calc(7 * var(--k)); }
  .pback h2 { font-size: calc(28 * var(--k)); }
  .pback ul { gap: calc(7 * var(--k)); }
  .pback li { padding-top: calc(7 * var(--k)); }
}

/* ---------- sections ---------- */
.sec { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 24px; padding: 56px var(--side); }
.sec > :not(.bt) { position: relative; }
.sec h2 { font-size: 32px; line-height: 1; letter-spacing: -.015em; }
.gh { display: flex; flex-direction: column; gap: 16px; }
.gh p, .el { color: var(--ink2); line-height: 1.6; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
.card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; color: var(--ink); text-decoration: none; transition: transform .16s; }
.card .pk { width: 100%; }
.pk-gc { --bt: 12px; --tt: 15px; --tl: 12px; --tp: 8px calc(var(--in) + 2px) 10px; --tg: 2px; }
.cfacts { font-size: 13px; line-height: 1.4; color: var(--ink2); }
.card .cl { font: 600 14px/1.55 var(--text); text-decoration: underline; text-underline-offset: 3px; }
.card:hover, .card:focus-visible { transform: translateY(-8px); }
@media (min-width: 1024px) {
  .sec { gap: 40px; padding: 96px var(--side); }
  .sec h2 { font-size: 56px; }
  .gh { flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .gh h2 { max-width: 640px; }
  .gh p { font-size: 18px; max-width: 460px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 44px; }
  .card { gap: 14px; }
  .pk-gc { --bt: 15px; --tt: 26px; --tl: 16px; --tp: 14px calc(var(--in) + 2px) 18px; --tg: 6px; }
  .cfacts { font-size: 15px; }
  .card .cl { font-size: 16px; }
}

/* E: the envelope back */
.e { background: var(--board); }
.env { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 92px 20px 36px; background: var(--kraft); border-radius: 4px; box-shadow: var(--paper1); overflow: hidden; }
.env > :not(svg) { position: relative; }
.envflap { position: absolute; left: 0; top: 0; width: 100%; height: 68px; filter: drop-shadow(0 3px 3px rgba(31, 42, 32, .12)); }
.seams { position: absolute; left: 0; bottom: 0; width: 100%; height: 70px; }
.el { color: var(--ink); }
.steps { display: flex; flex-direction: column; gap: 18px; }
.steps li { display: flex; flex-direction: column; gap: 10px; }
.steps li + li { padding-top: 14px; border-top: 1px solid rgba(90, 67, 38, .6); }
.steps h3 { font: 900 22px/1.05 var(--disp); }
.steps p { font-size: 15px; line-height: 1.55; }
@media (min-width: 1024px) {
  .env { gap: 36px; padding: 150px 56px 64px; }
  .env h2 { max-width: 820px; }
  .el { font-size: 18px; max-width: 640px; }
  .envflap { height: 124px; }
  .seams { height: 110px; }
  .steps { flex-direction: row; gap: 0; }
  .steps li { flex: 1; padding: 4px 28px; }
  .steps li:first-child { padding-left: 0; }
  .steps li + li { padding-top: 4px; border-top: 0; border-left: 1px solid rgba(90, 67, 38, .6); }
  .steps h3 { font-size: 28px; }
  .steps p { font-size: 17px; }
}

/* Y: covers on a ground of giant names */
.y { background: var(--green); color: var(--paper); }
.bt-y { color: var(--green2); }
.ylead { color: rgba(247, 245, 238, .9); line-height: 1.6; }
.ygrid { display: grid; gap: 36px; }
.yc { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; text-decoration: none; color: var(--paper); }
.yf { display: block; padding: 8px; background: var(--paper); border-radius: 4px; box-shadow: var(--paper14); transition: transform .16s, box-shadow .16s; }
.yf img { width: 240px; height: 240px; border-radius: 2px; }
.yt { display: flex; flex-direction: column; gap: 8px; }
.yt b { font: 900 24px/1.05 var(--disp); }
.ycl { font: 600 15px/1.45 var(--text); color: var(--yellow); }
.yw { font-size: 15px; line-height: 1.5; }
.yc:hover .yf, .yc:focus-visible .yf { transform: translateY(-8px); box-shadow: var(--paper22); }
.yc:hover b { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
@media (min-width: 1024px) {
  .y h2 { max-width: 720px; }
  .ylead { font-size: 18px; max-width: 560px; }
  .ygrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 40px; }
  .yc { flex-direction: row; align-items: center; gap: 28px; }
  .yf img { width: clamp(180px, 19vw, 260px); height: auto; aspect-ratio: 1; }
  .yt { width: 336px; flex: 0 1 336px; }
}
@media (min-width: 1200px) {
  .yf img { width: 260px; }
  .yt b { font-size: 30px; }
  .ycl { font-size: 17px; }
  .yw { font-size: 16px; }
}

/* F: two-column questions */
.qas { border-top: 1px solid rgba(31, 42, 32, .6); }
.qa { display: flex; flex-direction: column; gap: 8px; padding: 18px 0; border-bottom: 1px solid rgba(31, 42, 32, .6); }
.qa h3 { font: 900 19px/1.15 var(--disp); }
.qa p { font-size: 15px; line-height: 1.6; color: var(--ink2); }
.qa a, .rp a:not(.ul), .lcol a, .as a { text-underline-offset: 3px; }
@media (min-width: 1024px) {
  .f h2 { max-width: 760px; }
  .qa { flex-direction: row; gap: 48px; padding: 26px 0; }
  .qa h3 { flex: 0 0 440px; font-size: 24px; }
  .qa p { font-size: 17px; max-width: 640px; }
}

/* ---------- footer ---------- */
.ft { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 28px; padding: 40px var(--side) 24px; background: var(--yellow); }
.ft > :not(.bt) { position: relative; }
.bt-ft { color: var(--yellow2); }
.fc { display: flex; flex-direction: column; gap: 24px; }
.f1 { display: flex; flex-direction: column; gap: 14px; }
.f1 p { font-size: 15px; line-height: 1.5; max-width: 328px; }
.fcol { display: flex; flex-direction: column; gap: 10px; }
.fh { font: 700 13px/1.55 var(--text); letter-spacing: .08em; text-transform: uppercase; }
.fcol ul { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.55; }
.fcol a, .fck { text-decoration: none; text-align: left; }
.fcol a:hover, .fck:hover { text-decoration: underline; text-underline-offset: 3px; }
.ft hr { background: rgba(31, 42, 32, .5); }
.fb { display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.55; }
.fb p:last-child { max-width: 328px; }
@media (min-width: 1024px) {
  .ft { gap: 40px; padding: 64px var(--side) 32px; }
  .fc { flex-direction: row; gap: 56px; }
  .f1 { width: 420px; flex: 0 1 420px; }
  .f1 p { max-width: 380px; }
  .ft .mk { width: 30px; height: 40px; padding: 11px 0 0 7px; font-size: 24px; }
  .fcol { width: 200px; flex: 0 1 200px; }
  .fb { flex-direction: row; justify-content: space-between; }
  .fb p:last-child { max-width: 640px; text-align: right; }
}
@media (max-width: 1023px) { .ft .logo { gap: 8px; } }

/* ---------- inner heads ---------- */
.top { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 16px; padding: 20px var(--side) 40px; background: var(--board); }
.top > :not(.bt) { position: relative; }
.bt-top, .bt-sp { color: var(--board2); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; line-height: 1.55; }
.crumbs li { display: flex; align-items: center; gap: 8px; color: var(--ink2); }
.crumbs li + li::before { content: '›'; color: var(--ink2); }
.crumbs a { color: var(--ink2); text-underline-offset: 3px; }
.crumbs [aria-current] { font-weight: 600; color: var(--ink); }
.top h1 { font-size: min(38px, 9.6vw); /* 360: "Vanekhelskhusk" stays whole (Figma breaks it mid-word) */ line-height: 1; letter-spacing: -.02em; overflow-wrap: break-word; }
.top .lead { line-height: 1.6; }
@media (min-width: 1024px) {
  .top { gap: 26px; padding: 36px var(--side) 72px; }
  .top h1 { font-size: 76px; max-width: 900px; }
  .top .lead { font-size: 18px; max-width: 720px; }
}

/* ---------- catalog ---------- */
.cat { padding: 32px var(--side) 48px; }
.catd { display: none; }
@media (min-width: 1024px) {
  .cat { padding: 64px var(--side) 96px; }
  .catm { display: none; }
  .catd { display: flex; align-items: flex-start; gap: 64px; }
  .crows { flex: 1; max-width: 760px; border-top: 1px solid rgba(31, 42, 32, .5); }
  .crows li { border-bottom: 1px solid rgba(31, 42, 32, .5); }
  .crow { display: flex; align-items: center; gap: 24px; padding: 24px 20px; color: var(--ink); text-decoration: none; transition: background-color .16s; }
  .crow.on { background: var(--yellow); }
  .ct { flex: 1; display: flex; flex-direction: column; gap: 6px; }
  .ct h2 { font-size: 40px; line-height: 1; letter-spacing: 0; }
  .co { color: var(--ink2); }
  .cm { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; color: var(--ink2); }
  .ca { font: 600 16px/1.55 var(--text); white-space: nowrap; }
  .ca1 { display: none; text-decoration: underline; text-underline-offset: 3px; }
  .crow.on .ca1 { display: inline; } .crow.on .ca2 { display: none; }
  .pv { width: 440px; flex: 0 1 440px; display: flex; flex-direction: column; gap: 16px; }
  .pv > p { font-size: 13px; color: var(--ink2); }
  .pk-p { --bt: 15px; --foot: 16px; }
  .pk-p .pk-f { box-shadow: var(--paper2); }
}

/* ---------- guide: the two-page spread ---------- */
.gtop { padding: 16px var(--side) 0; }
.spw { position: relative; overflow: hidden; padding: 16px var(--side) 48px; }
.spread { position: relative; display: flex; flex-direction: column; background: var(--paper); border-radius: 4px; box-shadow: 1px 2px 2px rgba(31, 42, 32, .168), 2px 9.6px 21.6px -2px rgba(31, 42, 32, .12); overflow: hidden; }
.lp { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 24px 16px; background: var(--kraft); }
.pk-l { --bt: 15px; --foot: 12px; width: min(260px, 100%); }
.pk-l .pk-f { box-shadow: 1px 2px 2px rgba(31, 42, 32, .21), 2px 12px 27px -2px rgba(31, 42, 32, .15); }
.facts { width: 100%; }
.facts h2 { font-size: 22px; line-height: 1.05; }
.facts dl > div { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(90, 67, 38, .6); }
.facts dt { flex: 0 0 110px; font: 700 14px/1.55 var(--text); color: var(--kraftInk); }
.facts dd { flex: 1; font-size: 15px; line-height: 1.55; }
.gut { display: none; }
.rp { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 24px 16px 32px; }
.rh { display: flex; align-items: center; gap: 10px; }
.rp h1 { font-size: min(38px, 11.4vw); line-height: 1; letter-spacing: -.02em; overflow-wrap: break-word; }
.rp .sum { font-size: 17px; line-height: 1.55; }
.rp .meta { font-size: 14px; color: var(--ink2); }
.rp > h2 { font-size: 24px; line-height: 1.05; }
.rp > p:not(.sum):not(.meta):not(.rh), .tips p, .weigh p { line-height: 1.6; color: var(--ink2); }
.keys > div { display: flex; align-items: center; gap: 16px; padding: 8px 0; border-bottom: 1px solid rgba(31, 42, 32, .2); }
.keys dt { flex: 0 0 120px; }
.keys dd { flex: 1; }
.tips, .weigh { display: flex; flex-direction: column; gap: 16px; }
.tips li { display: flex; gap: 14px; }
.tips .lot { padding-top: 1px; }
.weigh li { display: flex; gap: 12px; }
.weigh i { width: 8px; height: 8px; margin-top: 7px; background: var(--red); flex: none; }
.rp .q { font: 700 16px/1.55 var(--text); }
.where { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 14px; background: var(--board); border: 1px solid rgba(31, 42, 32, .3); }
.where .wt { font: 900 22px/1.05 var(--disp); }
.where p:not(.wt) { font-size: 15px; line-height: 1.5; color: var(--ink2); }
.where .ul { font-size: 15px; }
.sim { display: flex; flex-direction: column; gap: 20px; }
.sim li { flex: 1; }
.sim a { display: flex; gap: 12px; text-decoration: none; }
.sim img { width: 88px; height: 88px; border-radius: 2px; flex: none; transition: transform .16s; }
.sim a > span { display: flex; flex-direction: column; gap: 4px; }
.sim b { font: 900 18px/1.05 var(--disp); }
.sim a > span > span { font-size: 14px; line-height: 1.45; color: var(--ink2); }
.sim a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.sim a:hover img { transform: translateY(-4px); }
@media (min-width: 1024px) {
  .gtop { padding: 28px var(--side) 0; }
  .spw { padding: 24px var(--side) 96px; }
  .spread { flex-direction: row; }
  .lp { width: clamp(400px, 39.5vw, 540px); flex: none; gap: 28px; padding: 48px 50px; }
  .pk-l { width: min(420px, 100%); }
  .facts h2 { font-size: 26px; }
  .facts dt { flex-basis: 150px; }
  .gut { display: block; width: 22px; flex: none; background: linear-gradient(90deg, rgba(31, 42, 32, .12), rgba(31, 42, 32, 0) 50%, rgba(31, 42, 32, .06)); }
  .rp { gap: 22px; padding: 56px 64px 64px 40px; }
  .rp h1 { font-size: 68px; }
  .rp .sum { font-size: 20px; }
  .rp > h2 { font-size: 30px; }
  .rp > p:not(.sum):not(.meta):not(.rh), .tips p, .weigh p { font-size: 18px; }
  .keys dt { flex-basis: 190px; }
  .tips, .weigh { gap: 22px; }
  .tips .lot { padding-top: 3px; }
  .weigh i { margin-top: 9px; }
  .rp .q { font-size: 18px; }
  .where { padding: 22px 24px; }
  .sim { flex-direction: row; }
}

/* ---------- about ---------- */
.agrid { display: grid; gap: 28px; }
.as { display: flex; flex-direction: column; gap: 12px; }
.as hr { background: rgba(31, 42, 32, .6); }
.as h2 { font-size: 24px; line-height: 1.05; letter-spacing: 0; }
.as p { line-height: 1.6; color: var(--ink2); }
.kc { background: var(--board); }
.kenv { gap: 16px; padding: 64px 18px 28px; max-width: 820px; }
.kenv .envflap { height: 48px; }
.kenv h2 { font-size: 24px; letter-spacing: 0; }
.rs, .kenv dl { display: flex; flex-direction: column; gap: 16px; }
.rs li { display: flex; align-items: center; gap: 10px; }
.rs i { width: 8px; height: 8px; background: var(--red); flex: none; }
.kenv dl > div { display: flex; gap: 16px; padding: 10px 0; border-top: 1px solid rgba(90, 67, 38, .6); }
.kenv dt { flex: 0 0 110px; font: 700 14px/1.6 var(--text); color: var(--kraftInk); }
.kenv dd { flex: 1; font-weight: 600; overflow-wrap: anywhere; }
@media (min-width: 1024px) {
  .agrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 56px; }
  .as h2 { font-size: 30px; }
  .as p { font-size: 18px; }
  .kenv { padding: 110px 48px 44px; }
  .kenv .envflap { height: 84px; }
  .kenv h2 { font-size: 34px; }
  .kenv > p { font-size: 18px; }
}

/* ---------- legal ---------- */
.lg { flex-direction: column; gap: 20px; padding: 28px var(--side) 48px; }
.lside { display: flex; flex-direction: column; gap: 8px; padding: 20px 18px; background: var(--kraft); border-radius: 4px; box-shadow: var(--paper1); font-size: 14px; }
.lu { font-weight: 700; }
.lc { font-size: 13px; color: var(--kraftInk); }
.lside a { overflow-wrap: anywhere; }
.lcol { display: flex; flex-direction: column; gap: 16px; }
.lcol .sum { font-size: 17px; line-height: 1.55; }
.lcol h2 { font-size: 21px; line-height: 1.05; letter-spacing: 0; }
.lcol p:not(.sum) { line-height: 1.6; color: var(--ink2); }
@media (min-width: 1024px) {
  .lg { flex-direction: row; align-items: flex-start; gap: 72px; padding: 64px var(--side) 96px; }
  .lside { width: 300px; flex: none; }
  .lcol { max-width: 820px; }
  .lcol .sum { font-size: 20px; }
  .lcol h2 { font-size: 26px; }
  .lcol p:not(.sum) { font-size: 18px; }
}

/* ---------- cookie: an envelope ---------- */
.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 { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 64px 18px 20px; background: var(--kraft); border-radius: 4px; box-shadow: var(--paper1), 0 14px 30px rgba(31, 42, 32, .22); overflow: hidden; }
.ck > :not(svg) { position: relative; }
.ck .envflap { height: 50px; }
.ck h2 { font-size: 22px; line-height: 1.05; }
.ck p { font-size: 15px; line-height: 1.5; }
.ck-acts { display: flex; align-items: flex-start; gap: 10px; }
.ck-acts .btn { flex: 1; }
.ck-manage { display: flex; flex-direction: column; align-items: flex-start; 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(--ink); }
.ck .ul { align-self: flex-start; }
@media (max-width: 359px) { .ck-acts { flex-direction: column; } }
@media (min-width: 420px) {
  .ck { padding: 92px 32px 28px; }
  .ck .envflap { height: 74px; }
  .ck h2 { font-size: 28px; }
}
@media (min-width: 1024px) {
  .cookie { left: auto; right: 24px; bottom: 24px; width: 500px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Figma note: no lift, only the shadow */
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .pk-r:hover, .pk-r:focus-visible, .card:hover, .card:focus-visible, .yc:hover .yf, .yc:focus-visible .yf { transform: none; }
}
html { scroll-behavior: smooth; }

/* ---------- social: two stamped ink chips ---------- */
.fcol .sx { flex-direction: row; gap: 10px; padding-top: 2px; }
.sx a { display: grid; place-items: center; width: 38px; height: 38px; background: var(--ink); color: var(--yellow); box-shadow: var(--paper1); transition: background-color .16s; }
.sx a:hover { background: #34433a; text-decoration: none; }
.sx svg { width: 17px; height: 17px; }