/* tyrekvolkanyxx.com — Fante asafo flags: cotton figures cut with scissors and hem-stitched on a cotton field,
   sawtooth borders, hard coastal sun (every cloth layer drops a crisp 6/6 shadow, no blur, radius 0).
   Tokens and geometry come from refs/figma/lib.js + pages.js (desktop frame 1368, mobile 360). */

:root {
  --ink: #1B1712; --ink2: #4A3F33; --cotton: #F6EEDC; --white: #FFFDF7;
  --saffron: #F2B705; --verm: #C42A1A; --cobalt: #1F3FA8; --emerald: #0B6E3B;
  --disp: 'Lilita One', 'Arial Black', system-ui, sans-serif;
  --text: 'Wix Madefor Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pad: 72px;
  --sun: 6px 6px 0 rgba(27, 23, 18, .9);          /* lib.js sun(): 6/6, 0 blur */
  --sun-hi: 10px 10px 0 rgba(27, 23, 18, .9);     /* Tile hover: 10/10, 0 blur */
  --sun-s: 3.6px 3.6px 0 rgba(27, 23, 18, .9);
  --st-dark: rgba(74, 63, 51, .8);                /* hem thread on light cloth */
  --st-light: rgba(255, 253, 247, .8);            /* hem thread on dark cloth */
  /* sawtooth masks: one tooth per tile, `round` fits a whole number of teeth into the strip */
  --tri-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0H16L8 10Z'/%3E%3C/svg%3E");
  --tri-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0V16L10 8Z'/%3E%3C/svg%3E");
}
@media (max-width: 767px) { :root { --pad: 20px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body { margin: 0; background: var(--cotton); color: var(--ink); font: 400 16px/1.55 var(--text); overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px dashed var(--ink); outline-offset: 3px; }
.s-cobalt :focus-visible, .s-emerald :focus-visible, .footer :focus-visible { outline-color: var(--white); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--white); padding: 10px 14px; font-weight: 700; }
.skip:focus { top: 12px; }

/* ---------- cloth pieces ---------- */
.cut { position: absolute; z-index: 0; pointer-events: none; height: auto; filter: drop-shadow(6px 6px 0 rgba(27, 23, 18, .35)); }
.fig, .mark .cut, .mk { position: static; filter: none; flex: none; }
.mk { width: 16px; height: 16px; }
.saw { display: block; position: relative; height: var(--d, 14px); background: var(--b, var(--white)); }
.saw::before { content: ''; position: absolute; inset: 0; background: var(--a, var(--verm));
  -webkit-mask: var(--tri-down) 0 0 / calc(var(--d, 14px) * 1.6) 100% round; mask: var(--tri-down) 0 0 / calc(var(--d, 14px) * 1.6) 100% round; }

.patch { position: relative; display: block; background: var(--pb, var(--cotton)); padding: 6px; box-shadow: var(--sun); }
.patch > .st { display: block; border: 1.4px dashed var(--th, var(--st-dark)); }
.chip { display: inline-block; padding: 5px 10px; font: 600 13px/1.25 var(--text); border: 1px dashed rgba(74, 63, 51, .7); background: var(--white); color: var(--ink); }
.chip--k { background: var(--ink); color: var(--white); border-color: rgba(255, 253, 247, .7); }
.chip--s { background: var(--saffron); }
.btn { display: inline-flex; padding: 6px; background: var(--bb, var(--verm)); color: var(--bf, var(--white)); box-shadow: 4.2px 4.2px 0 rgba(27, 23, 18, .9);
  font: 700 17px/1.2 var(--text); text-decoration: none; border: 0; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.btn .st { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border: 1.4px dashed var(--st-light); }
.btn .mk--b { width: 16px; height: 16px; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6.2px 6.2px 0 rgba(27, 23, 18, .9); }
.b-cobalt { --bb: var(--cobalt); }
.b-ink { --bb: var(--ink); }
.linkish { background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; font: inherit; }

/* ---------- type ---------- */
.h1, .h1p, .h1g, .h2, .h3 { font-family: var(--disp); }
.h2 { font-size: 56px; line-height: 1; letter-spacing: -.01em; max-width: 760px; }
.h3 { font-size: 36px; line-height: 1; }
.lead { font-size: 19px; line-height: 1.55; color: var(--ink2); max-width: 620px; }
.lead--ink { color: var(--ink); }
.p { font-size: 18px; line-height: 1.6; color: var(--ink2); }
.p a, .a a { color: inherit; font-weight: 600; }

/* ---------- header: cloth tabs hanging from the top edge ---------- */
.top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 0 var(--pad); background: var(--cotton); position: relative; z-index: 3; }
.logo { display: flex; align-items: center; gap: 10px; padding: 22px 0; text-decoration: none; font: 26px/1 var(--disp); }
.mark { display: grid; place-items: center; width: 40px; height: 40px; background: var(--saffron); box-shadow: 3px 3px 0 rgba(27, 23, 18, .9); overflow: hidden; flex: none; }
.mark .cut { width: 34px; height: 34px; }
.tabs ul { display: flex; gap: 10px; }
.tab { display: block; padding: 24px 18px 14px; font-weight: 500; font-size: 16px; text-decoration: none; border-bottom: 1.3px dashed rgba(74, 63, 51, .45); transition: background .2s; }
.tab:hover { background: rgba(242, 183, 5, .25); }
.tab.is-on { background: var(--saffron); font-weight: 700; border: 1.3px dashed rgba(27, 23, 18, .7); border-top: 0; box-shadow: var(--sun-s); }

/* ---------- sections ---------- */
.sec { position: relative; padding: 96px var(--pad); overflow: clip; }
.sec > :not(.cut) { position: relative; z-index: 1; }
.s-saffron { background: var(--saffron); }
.s-cobalt { background: var(--cobalt); color: var(--white); }
.s-emerald { background: var(--emerald); color: var(--white); }
.saw--cobalt { --a: var(--cobalt); --b: var(--cotton); --d: 22px; }
.saw--saffron { --a: var(--saffron); --b: var(--cotton); --d: 22px; }
.saw--emerald { --a: var(--emerald); --b: var(--cotton); --d: 22px; }

/* ---------- hero: frame-break split (desktop stage keeps the 1368 × 820 frame coordinates) ---------- */
.hero { container-type: inline-size; position: relative; background: var(--cotton); overflow: clip; }
.hst { position: relative; }
/* note (motion): parallax-depth — each appliqué layer shifts up by its own depth while the hero scrolls away */
.h-flag { --d: 4; } .h-sun { --d: 8; } .htag { --d: 6; } .h-leo { --d: 12; }
.h-flag, .h-sun, .htag, .h-leo { transform: translate3d(0, calc(var(--p, 0) * var(--d) * -1px), 0); will-change: transform; }
.h-sun { width: 400px; }
.h-leo { position: absolute; z-index: 2; height: auto; filter: drop-shadow(6px 6px 0 rgba(27, 23, 18, .45)); }
.h-text { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 26px; }
.h1 { font-size: 96px; line-height: .94; letter-spacing: -.015em; }
.htag { position: relative; z-index: 3; }
.htag .patch { --pb: var(--saffron); --th: rgba(27, 23, 18, .8); box-shadow: var(--sun-s); padding: 6px 6px 0; }
.htag .st { padding: 18px 20px 14px; }
.htag-h { font: 24px/1.1 var(--disp); margin-bottom: 8px; }
.htag ul { display: grid; gap: 8px; }
.htag a { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; text-decoration: none; }
.htag a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.htag .fig { width: 26px; height: 26px; }
.saw--tag { --a: var(--verm); --b: var(--saffron); --d: 10px; }

@media (min-width: 1200px) {
  .hst { --u: min(100cqw / 1368, 1.2px); height: calc(820 * var(--u)); }
  .h-flag { position: absolute; left: 0; top: 0; width: calc(600 * var(--u)); height: calc(100% + 12px); z-index: 1; }
  .h-photo { width: 100%; height: 100%; object-fit: cover; }
  .saw--seam { position: absolute; left: 100%; top: 0; height: 100%; width: calc(26 * var(--u)); --a: var(--verm); --b: var(--white);
    --d: calc(26 * var(--u)); }
  .saw--seam::before { -webkit-mask: var(--tri-right) 0 0 / 100% calc(var(--d) * 1.6) round; mask: var(--tri-right) 0 0 / 100% calc(var(--d) * 1.6) round; }
  .h-sun { right: calc(-222 * var(--u)); top: calc(-190 * var(--u)); width: calc(400 * var(--u)); }
  .h-text { position: absolute; left: calc(690 * var(--u)); top: calc(96 * var(--u)); width: calc(600 * var(--u)); gap: calc(26 * var(--u)); }
  .h1 { font-size: calc(96 * var(--u)); }
  .h-text .lead { font-size: max(16px, calc(19 * var(--u))); max-width: max(400px, calc(440 * var(--u))); }
  .htag { position: absolute; right: calc(48 * var(--u)); top: calc(450 * var(--u)); width: 290px; }
  .h-leo { left: calc(300 * var(--u)); top: calc(560 * var(--u)); width: calc(620 * var(--u)); }
}
@media (max-width: 1199px) {
  .hst { --bh: clamp(220px, 46vw, 420px); --lw: clamp(280px, 50vw, 460px); display: grid; grid-template-columns: minmax(0, 1fr); }
  .h-flag { position: relative; height: var(--bh); grid-column: 1 / -1; }
  .h-photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
  .saw--seam { --a: var(--verm); --b: var(--white); --d: 16px; }
  .h-flag { height: calc(var(--bh) + 16px); display: flex; flex-direction: column; }
  .h-flag .h-photo { flex: 1; min-height: 0; }
  .h-sun { display: none; }
  .h-leo { right: 10px; top: calc(var(--bh) + 40px - var(--lw) * .4516); width: var(--lw); }
  .h-text { padding: 44px var(--pad) 0; gap: 18px; }
  .h1 { font-size: clamp(46px, 8vw, 80px); line-height: .96; letter-spacing: -.01em; }
  .h-text .lead { font-size: 16px; }
  .htag { padding: 26px var(--pad) 48px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .hst { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 32px; }
  .h-text { padding-bottom: 56px; padding-right: 0; }
  .htag { padding: 64px var(--pad) 48px 0; align-self: start; }
  .h-text .lead { font-size: 18px; }
}

/* ---------- framed-plate card ---------- */
.c-cotton { --cloth: var(--cotton); --fg: var(--ink); --hem: var(--verm); }
.c-saffron { --cloth: var(--saffron); --fg: var(--ink); --hem: var(--verm); }
.c-cobalt { --cloth: var(--cobalt); --fg: var(--white); --hem: var(--white); }
.c-verm { --cloth: var(--verm); --fg: var(--white); --hem: var(--white); }
.c-emerald { --cloth: var(--emerald); --fg: var(--white); --hem: var(--white); }
.c-ink { --cloth: var(--ink); --fg: var(--white); --hem: var(--white); }
.card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 10px 10px 0; background: var(--cloth); color: var(--fg);
  box-shadow: var(--sun); transform: rotate(var(--r, 0deg)); transition: transform .25s cubic-bezier(.3, .7, .3, 1), box-shadow .25s cubic-bezier(.3, .7, .3, 1); }
.cd-f { background: var(--white); padding: 4px; border: 1.2px dashed rgba(27, 23, 18, .5); }
.cv { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.cd-t { display: flex; flex-direction: column; gap: 6px; padding: 0 4px 4px; }
.cd-h { display: flex; align-items: center; gap: 8px; font: 22px/1.05 var(--disp); }
.cd-h .fig { width: 24px; height: 24px; }
.cd-a { color: inherit; text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.cd-a::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.cd-m { display: flex; flex-wrap: wrap; gap: 6px; }
.cd-p { font-size: 15px; line-height: 1.45; opacity: .92; }
.cd-r { display: flex; align-items: center; gap: 8px; padding-top: 4px; font-weight: 700; font-size: 14px; }
.cd-r span { text-decoration: underline; text-underline-offset: 3px; }
.cd-r .mk { width: 13px; height: 13px; }
.saw--card { --a: var(--hem); --b: var(--cloth); --d: 12px; margin-top: auto; }
/* Tile hover: the patch lifts and straightens (0°), shadow 6/6 → 10/10 without blur, title underlined;
   focus — the same plus a dashed outline */
.card:hover, .card:focus-within { transform: translate(-4px, -4px) rotate(0deg); box-shadow: var(--sun-hi); }
.card:hover .cd-a, .card:focus-within .cd-a { text-decoration-line: underline; }
.card:has(.cd-a:focus-visible) { outline: 2px dashed var(--ink); outline-offset: 5px; }
.card .cd-a:focus-visible { outline: none; }
li:has(> .card:hover), li:has(> .card:focus-within) { z-index: 3; }

/* ---------- G: fan-stack ---------- */
.gsec .h2 { margin-bottom: 24px; }
.fan { position: relative; margin-top: 40px; }
.fan > li { position: relative; }
.m-gbird { left: -90px; top: 360px; width: 360px; transform: rotate(-8deg); transform-origin: 0 0; }
.m-gwave { right: -92px; bottom: -74px; width: 600px; }
@media (min-width: 1200px) {
  .fan { display: flex; align-items: flex-start; padding: 0 2px 110px; }
  .fan > li { flex: none; width: calc(212 / 1224 * 100%); margin-top: var(--y); }
  .fan > li + li { margin-left: calc(-10 / 1224 * 100%); }
  .fan > li:nth-child(1) { --r: 3deg; --y: 44px; } .fan > li:nth-child(2) { --r: 1.8deg; --y: 20px; }
  .fan > li:nth-child(3) { --r: .6deg; --y: 6px; } .fan > li:nth-child(4) { --r: -.6deg; --y: 6px; }
  .fan > li:nth-child(5) { --r: -1.8deg; --y: 20px; } .fan > li:nth-child(6) { --r: -3deg; --y: 44px; }
}
@media (max-width: 1199px) {
  .fan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; padding-bottom: 24px; }
  .fan > li:nth-child(odd) .card { --r: 1.5deg; } .fan > li:nth-child(even) .card { --r: -1.5deg; }
}
@media (max-width: 767px) {
  .fan { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; margin-top: 8px; }
  .fan .cd-p { display: none; }
  .fan .cd-h { font-size: 18px; }
  .fan .cd-h .fig { width: 18px; height: 18px; }
  .fan .chip { font-size: 12px; }
  .m-gbird { left: -70px; top: 520px; width: 200px; }
  .m-gwave { right: -60px; bottom: -40px; width: 300px; }
}

/* ---------- P: game in focus ---------- */
.psec { display: flex; gap: 72px; align-items: flex-start; }
.m-psun { right: -232px; top: -200px; width: 520px; opacity: .95; }
.p-pic { position: relative; flex: none; width: 464px; padding: 0 24px 24px 0; }
.lay { position: absolute; width: 440px; height: 440px; }
.lay--1 { left: 24px; top: 24px; background: var(--cobalt); }
.lay--2 { left: 12px; top: 12px; background: var(--emerald); }
.p-plate { position: relative; background: var(--saffron); padding: 16px; box-shadow: var(--sun); }
.p-text { display: flex; flex-direction: column; gap: 20px; max-width: 600px; padding-top: 24px; }
.p-text .p { font-size: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 1023px) {
  .psec { flex-direction: column; gap: 32px; }
  .p-pic { width: min(100%, 324px); padding: 0 24px 24px 0; }
  .lay { width: calc(100% - 24px); height: auto; aspect-ratio: 1; }
  .m-psun { right: -120px; top: -120px; width: 280px; }
}

/* ---------- E: how a browser game opens ---------- */
.esec .h2 { margin-bottom: 40px; max-width: 700px; }
.m-epalm { right: -192px; top: 120px; width: 520px; opacity: .9; }
.e-row { display: flex; }
.e-it { width: 380px; padding: 8px 32px; display: flex; flex-direction: column; gap: 12px; }
.e-it:first-child { padding-left: 0; }
.e-it:not(:last-child) { border-right: 1.5px dashed rgba(242, 183, 5, .8); }
.e-h { display: flex; align-items: center; gap: 10px; font: 26px/1.1 var(--disp); color: var(--saffron); }
.mk--e { width: 20px; height: 20px; }
.e-it .p { font-size: 17px; color: var(--white); }
@media (max-width: 1023px) {
  .e-row { flex-direction: column; gap: 18px; }
  .e-it { width: auto; padding: 0 0 18px; }
  .e-it:not(:last-child) { border-right: 0; border-bottom: 1.5px dashed rgba(242, 183, 5, .8); }
  .e-h { font-size: 22px; }
  .e-it .p { font-size: 15px; }
  .m-epalm { right: -200px; top: 40px; width: 260px; }
}

/* ---------- N: updates on Poki ---------- */
.n-in { display: flex; gap: 80px; padding: 80px var(--pad) 96px; }
.n-in .h2 { width: 380px; flex: none; }
.m-nbird { left: 40px; top: 300px; width: 300px; transform: rotate(6deg); transform-origin: 0 0; }
.n-list { width: 760px; max-width: 100%; }
.n-list li { display: flex; align-items: center; gap: 24px; padding: 16px 0; border-bottom: 1.4px dashed rgba(74, 63, 51, .5); }
.n-d { font: 22px/1.1 var(--disp); color: var(--verm); width: 190px; flex: none; }
.n-t { font-size: 17px; font-weight: 500; }
@media (max-width: 1023px) {
  .n-in { flex-direction: column; gap: 24px; padding: 44px var(--pad) 56px; }
  .n-in .h2 { width: auto; }
  .n-list li { flex-direction: column; align-items: flex-start; gap: 4px; }
  .n-d { font-size: 18px; width: auto; }
  .n-t { font-size: 15px; }
  .m-nbird { left: auto; right: -40px; top: -30px; width: 180px; }
}

/* ---------- F: two-column Q&A ---------- */
.fsec .h2 { margin-bottom: 40px; max-width: 800px; }
.m-fsun { right: -112px; top: -150px; width: 380px; }
.qa { display: flex; gap: 48px; padding: 20px 0; border-top: 1.4px dashed rgba(255, 253, 247, .55); }
.q { font: 24px/1.15 var(--disp); }
.qa .q { width: 440px; flex: none; }
.a { font-size: 17px; line-height: 1.6; max-width: 660px; }
@media (max-width: 1023px) {
  .qa { flex-direction: column; gap: 8px; }
  .qa .q { width: auto; font-size: 20px; }
  .a { font-size: 15px; }
  .m-fsun { right: -90px; top: -120px; width: 220px; }
}

/* ---------- inner page head ---------- */
.phead { position: relative; overflow: clip; display: flex; flex-direction: column; gap: 20px; padding: 40px var(--pad) 64px; }
.phead > :not(.cut):not(.ph-flag) { position: relative; z-index: 1; }
.phead.s-emerald, .phead.s-cobalt { color: var(--white); }
.phead .lead { color: inherit; max-width: 640px; }
.m-ph { right: -100px; top: -120px; width: 440px; }
.ph-flag { position: absolute; right: 300px; top: 150px; width: 200px; height: 250px; object-fit: cover; transform: rotate(-3deg); transform-origin: 0 0; box-shadow: var(--sun); z-index: 1; }
.h1p { font-size: 80px; line-height: .96; letter-spacing: -.01em; max-width: 760px; }
.saw--ph { margin-bottom: 0; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.crumbs li { display: flex; align-items: center; gap: 8px; }
.crumbs .mk { width: 10px; height: 10px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { font-weight: 600; }
@media (max-width: 1023px) { .ph-flag { display: none; } }
@media (max-width: 767px) {
  .phead { gap: 14px; padding: 24px var(--pad) 40px; }
  .h1p { font-size: 42px; }
  .m-ph { right: -70px; top: -60px; width: 220px; }
  .saw--ph { --d: 14px; }
}

/* ---------- Games: filters + plate cards ---------- */
.cat { padding: 40px var(--pad) 104px; }
.m-cpalm { left: -160px; top: 520px; width: 560px; opacity: .9; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 32px; }
.f-l { font-size: 14px; font-weight: 700; }
.fbtn { cursor: pointer; }
.fbtn[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: rgba(255, 253, 247, .7); }
.fbtn:hover:not([aria-pressed="true"]) { background: var(--saffron); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 384px)); gap: 44px 36px; }
.tiles .cd-h { font-size: 22px; }
@media (max-width: 1199px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .cat { padding: 24px var(--pad) 64px; }
  .tiles { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .m-cpalm { left: auto; right: -120px; top: 1400px; width: 280px; }
}

/* ---------- Guide ---------- */
.fband { position: relative; overflow: clip; padding: 32px var(--pad) 72px; display: flex; flex-direction: column; gap: 20px; }
.fband > :not(.cut) { position: relative; z-index: 1; }
.m-fbsun { right: -160px; top: -170px; width: 460px; }
.fcard > .st { display: flex; gap: 48px; padding: 32px; }
.fc-pic { flex: none; width: 428px; padding: 14px; background: var(--cloth); box-shadow: var(--sun); transform: rotate(1.5deg); align-self: flex-start; }
.fc-info { display: flex; flex-direction: column; gap: 16px; min-width: 0; flex: 1; max-width: 700px; }
.h1g { font-size: 72px; line-height: .96; letter-spacing: -.01em; }
.fc-info .lead { font-size: 18px; max-width: none; }
.meta { font-size: 14px; font-weight: 500; color: var(--ink2); }
.facts > div { display: flex; gap: 16px; padding: 8px 0; border-bottom: 1.3px dashed rgba(74, 63, 51, .5); }
.facts dt { width: 130px; flex: none; font-weight: 700; font-size: 14px; color: var(--verm); }
.facts dd { font-size: 15px; }
.gbody { padding: 72px var(--pad) 96px; }
.m-gpalm { right: -162px; top: 120px; width: 520px; opacity: .9; }
.m-gbird2 { right: 8px; top: 1500px; width: 300px; transform: rotate(8deg); }
.col { display: flex; flex-direction: column; gap: 56px; max-width: 800px; }
.blk { display: flex; flex-direction: column; gap: 16px; }
.keys-p { --pb: var(--white); }
.keys { padding: 8px 16px; }
.kr { display: flex; align-items: center; gap: 16px; padding: 10px 0; }
.kr + .kr { border-top: 1.2px dashed rgba(74, 63, 51, .4); }
.kr dt { width: 220px; flex: none; }
kbd { display: block; background: var(--ink); color: var(--white); padding: 5px 10px; font: 700 14px/1.3 var(--text); }
.kr dd { font-size: 15px; }
.ml { display: flex; flex-direction: column; gap: 14px; }
.ml li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 1.6; color: var(--ink2); }
.ml .mk { margin-top: .45em; }
.lim > .st { padding: 18px 20px; }
.ml--s { gap: 10px; }
.ml--s li { font-size: 15px; line-height: 1.55; color: var(--ink); gap: 10px; }
.ml--s .mk { width: 14px; height: 14px; }
.gqa { display: flex; flex-direction: column; gap: 6px; padding-bottom: 14px; border-bottom: 1.3px dashed rgba(74, 63, 51, .45); }
.gqas { display: flex; flex-direction: column; gap: 16px; }
.gqa .q { font: 700 17px/1.4 var(--text); }
.gqa .p { font-size: 15px; }
.sims { display: flex; flex-wrap: wrap; gap: 16px; }
.sim { --pb: var(--cloth); color: var(--fg); width: 380px; max-width: 100%; padding: 6px; text-decoration: none; box-shadow: var(--sun-s); transition: transform .25s, box-shadow .25s; }
.sim > .st { display: flex; align-items: center; gap: 12px; padding: 10px; border-color: var(--th, currentColor); }
.sim.c-cotton, .sim.c-saffron { --th: var(--st-dark); }
.sim.c-cobalt, .sim.c-verm, .sim.c-emerald, .sim.c-ink { --th: var(--st-light); }
.sim-cv { width: 76px; height: 76px; flex: none; }
.sim-t { display: flex; flex-direction: column; gap: 4px; }
.sim-h { font: 20px/1.1 var(--disp); }
.sim-p { font-size: 13px; line-height: 1.4; }
.sim:hover, .sim:focus-visible { transform: translate(-4px, -4px); box-shadow: var(--sun-hi); }
.sim:hover .sim-h, .sim:focus-visible .sim-h { text-decoration: underline; }
.where .p { font-size: 16px; }
.poki { font-weight: 600; font-size: 16px; color: var(--cobalt); text-underline-offset: 3px; }
@media (max-width: 1023px) {
  .fcard > .st { flex-direction: column; gap: 20px; padding: 16px 14px; }
  .fc-pic { width: min(100%, 298px); transform: none; }
  .h1g { font-size: 40px; }
  .fc-info .lead { font-size: 16px; }
  .facts dt { width: 96px; }
  .facts dd { font-size: 14px; }
}
@media (max-width: 767px) {
  .fband { padding: 20px var(--pad) 40px; }
  .m-fbsun { right: -100px; top: -80px; width: 220px; }
  .gbody { padding: 40px var(--pad) 56px; }
  .m-gpalm { right: -110px; top: -40px; width: 200px; }
  .m-gbird2 { right: -70px; top: 2400px; width: 160px; }
  .col { gap: 36px; }
  .h3 { font-size: 26px; }
  .p { font-size: 16px; }
  .ml li { font-size: 15px; }
  .kr dt { width: 120px; }
  .keys { padding: 8px 12px; }
  .sim { width: 100%; }
}

/* ---------- About ---------- */
.abody { display: flex; gap: 72px; align-items: flex-start; padding: 72px var(--pad) 96px; }
.m-awave { right: -32px; bottom: -140px; width: 520px; }
.col--ab { max-width: 720px; gap: 44px; flex: 1; }
.kpatch { --pb: var(--saffron); width: 420px; flex: none; transform: rotate(-1.2deg); }
.kpatch > .st { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-color: rgba(74, 63, 51, .8); }
.k-h { font: 32px/1.05 var(--disp); }
.kpatch .p { font-size: 15px; color: var(--ink); }
.ml--k { gap: 10px; }
.ml--k li { font-size: 15px; font-weight: 500; color: var(--ink); align-items: center; line-height: 1.4; }
.ml--k .mk { width: 13px; height: 13px; margin: 0; }
.kdl { border-top: 1.5px dashed rgba(27, 23, 18, .6); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.kdl div { display: flex; gap: 12px; }
.kdl dt { width: 80px; flex: none; font-weight: 700; font-size: 14px; }
.kdl dd { font-size: 15px; overflow-wrap: anywhere; }
@media (max-width: 1023px) {
  .abody { flex-direction: column; gap: 36px; padding: 40px var(--pad) 56px; }
  .kpatch { width: 100%; max-width: 480px; transform: none; }
  .m-awave { right: -40px; bottom: -80px; width: 300px; }
}

/* ---------- Legal ---------- */
.legal { padding: 64px var(--pad) 96px; }
.m-lpalm { right: -172px; top: 200px; width: 480px; opacity: .9; }
.col--l { max-width: 780px; gap: 36px; }
.lsum { --pb: var(--saffron); }
.lsum > .st { padding: 18px 20px; font-size: 18px; font-weight: 500; line-height: 1.55; }
.legal .p { font-size: 17px; line-height: 1.65; }
.legal .blk + .blk { margin-top: 4px; }
@media (max-width: 767px) {
  .legal { padding: 36px var(--pad) 56px; }
  .m-lpalm { right: -100px; top: 40px; width: 220px; }
  .legal .p { font-size: 15px; }
  .lsum > .st { font-size: 16px; }
}

/* ---------- footer: a stack of cloth plates on black cloth ---------- */
.footer { background: var(--ink); color: var(--ink); overflow: clip; }
.saw--foot { --a: var(--cotton); --b: var(--ink); --d: 22px; }
.f-body { display: flex; align-items: flex-start; padding: 64px var(--pad) 56px; }
.f-p { width: 404px; flex: none; }
.f-p > .st { display: flex; flex-direction: column; gap: 10px; padding: 22px; }
.f-p1 { --pb: var(--cotton); transform: rotate(1.5deg); z-index: 1; }
.f-p2 { --pb: var(--saffron); transform: rotate(-1deg); margin-left: -14px; z-index: 2; }
.f-p3 { --pb: var(--cobalt); --th: var(--st-light); color: var(--white); transform: rotate(.8deg); margin-left: -14px; z-index: 3; }
.f-brand { font: 30px/1.1 var(--disp); }
.f-line { font-size: 15px; color: var(--ink2); }
.f-mail { font-weight: 700; font-size: 15px; color: var(--verm); text-underline-offset: 3px; overflow-wrap: anywhere; }
.f-cols { flex-direction: row !important; gap: 28px !important; }
.f-cols ul { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.f-site li { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.f-site .mk { width: 11px; height: 11px; }
.f-site a { text-decoration: none; }
.f-site a:hover { text-decoration: underline; }
.f-legal a, .f-legal .linkish { text-underline-offset: 3px; }
.f-soc { display: flex; flex-wrap: wrap; gap: 8px; }
.f-dis { font-size: 14px; }
.f-c { font-size: 14px; opacity: .85; }
@media (max-width: 1279px) {
  .f-body { flex-wrap: wrap; gap: 18px; }
  .f-p { width: calc(50% - 9px); margin-left: 0; }
}
@media (max-width: 767px) {
  .saw--foot { --d: 14px; }
  .f-body { flex-direction: column; gap: 18px; padding: 36px var(--pad) 32px; }
  .f-p { width: 100%; transform: none; }
  .f-p > .st { padding: 20px 18px; }
}

/* ---------- cookie banner (frames Cookie / Cookie mobile) ---------- */
.cookie { position: fixed; left: 24px; bottom: 24px; z-index: 60; width: min(500px, calc(100% - 48px)); background: var(--cotton); box-shadow: var(--sun); }
.saw--ck { --a: var(--verm); --b: var(--cotton); --d: 14px; }
.ck-in { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px 24px; max-height: calc(100vh - 80px); overflow: auto; }
.ck-h { display: flex; align-items: center; gap: 12px; font: 26px/1.1 var(--disp); }
.mark--ck { width: 34px; height: 34px; }
.mark--ck .cut { width: 28px; height: 28px; }
.ck-p { font-size: 15px; line-height: 1.55; color: var(--ink2); }
.ck-acts { display: flex; flex-wrap: wrap; gap: 12px; padding: 4px 6px 4px 0; }
.ck-acts .btn .st, .ck-manage .btn .st { padding: 12px 18px; }
.ck-link { font-weight: 600; font-size: 14px; text-underline-offset: 3px; align-self: flex-start; }
.ck-manage { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: var(--white); border: 1.4px dashed var(--st-dark); }
.ck-opt { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.ck-opt input { width: 18px; height: 18px; accent-color: var(--verm); }
.ck-manage .btn { align-self: flex-start; font-size: 15px; }
@media (max-width: 400px) {
  .ck-acts { flex-direction: column; }
  .ck-acts .btn { width: 100%; }
  .ck-acts .btn .st { width: 100%; justify-content: center; }
}
@media (max-width: 767px) {
  .cookie { left: 0; right: 0; bottom: 0; width: 100%; box-shadow: 0 -4px 0 rgba(27, 23, 18, .25); }
  .ck-in { padding: 18px 20px 20px; }
  .ck-h { font-size: 22px; }
}

/* ---------- mobile type ---------- */
@media (max-width: 767px) {
  .top { flex-direction: column; gap: 0; padding: 0 14px; }
  .logo { padding: 14px 0 8px; font-size: 18px; }
  .mark { width: 30px; height: 30px; box-shadow: 2px 2px 0 rgba(27, 23, 18, .9); }
  .mark .cut { width: 26px; height: 26px; }
  .tabs ul { gap: 4px; }
  .tab { padding: 10px 12px 8px; font-size: 13px; }
  .sec { padding: 56px var(--pad); }
  .h2 { font-size: 32px; }
  .lead { font-size: 16px; }
  .btn { font-size: 15px; }
  .btn .st { padding: 10px 14px; }
  .patch { padding: 5px; }
  .gsec .h2 { margin-bottom: 18px; }
  .esec .h2, .fsec .h2 { margin-bottom: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .h-flag, .h-sun, .htag, .h-leo { transform: none; }
}

/* Соцмережі у футері: лише іконки */
.social-row { display: flex; align-items: center; gap: 10px; }
.social-link { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: inherit; text-decoration: none; }
.social-link svg { display: block; width: 100%; height: 100%; }
.social-link:hover, .social-link:focus-visible { opacity: 0.7; }

.f-addr { margin: 8px 0 0; font-size: 14px; }