/* ============================================================
   loreshgames.com — shared stylesheet
   Structure: tokens · base · header · buttons · sections ·
              components · forms · footer · motion · responsive
   Colour rule: Olga Loresh brand (white/black/#103D21/#B18B14)
   frames the site. Game red/green appear ONLY inside game blocks.
   ============================================================ */

/* FONTS:BEGIN */
/* Self-hosted fonts — generated by tools/fetch-fonts.py, do not edit by hand.
   Prata and Golos Text, SIL Open Font License. Latin and Cyrillic subsets only,
   which is all the site needs for EN, UA and RU. */
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/golos-text-400-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/golos-text-400-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/golos-text-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/golos-text-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/golos-text-500-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/golos-text-500-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/golos-text-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/golos-text-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/golos-text-600-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/golos-text-600-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/golos-text-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/golos-text-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Prata';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/prata-400-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Prata';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/prata-400-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Prata';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/prata-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* FONTS:END */

:root{
  /* ---- Olga Loresh brand ---- */
  --white:#FFFFFF;
  --black:#000000;
  --green-deep:#103D21;
  --gold:#B18B14;
  /* ---- derived neutrals ---- */
  --ink:#0A2214;            /* page ground */
  --ink-soft:#0E2E1B;
  --gold-soft:#D4AC44;
  --cream:#F4F1EA;
  --muted:#8FA396;
  --line:rgba(244,241,234,.15);
  --line-soft:rgba(244,241,234,.08);
  /* ---- game colours: game contexts only ---- */
  --game-red:#8E1520;
  --game-red-deep:#4E0A12;
  --game-green:#0E4A33;
  --game-green-deep:#07281C;
  /* ---- type ---- */
  --display:"Prata",Georgia,"Times New Roman",serif;
  --body:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{background:var(--ink);color:var(--cream);font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.14;letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,6vw,4.4rem)}
h2{font-size:clamp(1.9rem,4vw,3rem)}
h3{font-size:clamp(1.15rem,2vw,1.5rem)}
p{color:rgba(244,241,234,.82)}
strong{font-weight:600;color:var(--cream)}
em{font-style:italic}

.eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:500;
  margin-bottom:22px;display:block}
.lede{font-size:clamp(1.05rem,1.6vw,1.2rem);max-width:56ch;color:rgba(244,241,234,.76)}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#1A1305;padding:12px 20px;z-index:200}
.skip:focus{left:0}
.todo{color:#E0A63F;font-style:italic}    /* content still owed by Olga — must be empty before launch */

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(10,34,20,.86);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px}
/* Logo. The brand file is white + gold on transparent, so it only ever sits on a
   dark ground. Header uses the O·L monogram, footer the full mark with the name. */
.mark{display:flex;align-items:center;gap:12px;text-decoration:none}
.mark img{height:34px;width:auto}
.mark-t{font-family:var(--display);font-size:1.05rem;letter-spacing:.06em;white-space:nowrap}
.mark-t i{font-style:normal;color:var(--gold)}
.foot-logo{height:110px;width:auto;margin-bottom:20px}
nav{display:flex;gap:26px;align-items:center}
nav a{font-size:.82rem;letter-spacing:.05em;text-decoration:none;color:rgba(244,241,234,.72);transition:color .2s}
nav a:hover,nav a[aria-current="page"]{color:var(--gold-soft)}
.head-right{display:flex;align-items:center;gap:14px}
.langs{display:flex;gap:2px;font-size:.74rem;letter-spacing:.1em}
.langs a{padding:5px 8px;text-decoration:none;color:rgba(244,241,234,.45);transition:.2s}
.langs a.on{color:var(--ink);background:var(--gold);border-radius:2px}
.langs a:hover{color:var(--gold-soft)}
.langs a.on:hover{color:var(--ink)}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:2px;color:var(--cream);
  font-size:1.2rem;line-height:1;cursor:pointer;padding:8px 12px}

/* ---------- buttons ---------- */
.btn{display:inline-block;padding:15px 30px;border-radius:2px;font-size:.8rem;letter-spacing:.13em;
  text-transform:uppercase;font-weight:500;text-decoration:none;cursor:pointer;border:1px solid transparent;
  background:transparent;   /* <button> would otherwise inherit the UA button face */
  transition:background .22s,border-color .22s,color .22s;font-family:var(--body)}
.btn-solid{background:var(--gold);color:#1A1305}
.btn-solid:hover{background:var(--gold-soft)}
.btn-ghost{border-color:var(--line);color:var(--cream)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-soft)}
.link{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);text-decoration:none;
  border-bottom:1px solid rgba(177,139,20,.35);padding-bottom:3px;display:inline-block}
.link:hover{color:var(--gold-soft);border-color:var(--gold-soft)}

/* ---------- sections ---------- */
section{padding:110px 0}
.sec-brand{background:var(--green-deep)}
.sec-soft{background:var(--ink-soft)}
.sec-dark{background:var(--ink)}
.sec-game{background:linear-gradient(180deg,var(--game-red-deep),var(--ink))}
.sec-money{background:linear-gradient(180deg,var(--game-green-deep),var(--ink))}
.head{max-width:66ch;margin-bottom:58px}
.head p{margin-top:20px}
.head.center{margin-left:auto;margin-right:auto;text-align:center}

/* ---------- hero ---------- */
.hero{padding:170px 0 110px;position:relative;overflow:hidden;
  background:radial-gradient(880px 520px at 80% 14%,rgba(142,21,32,.34),transparent 68%),
             radial-gradient(760px 500px at 4% 90%,rgba(16,61,33,.85),transparent 68%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.hero h1 em{font-style:normal;color:var(--gold-soft)}
.hero .lede{margin:30px 0 38px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.cta-note{font-size:.83rem;color:var(--muted);margin-top:20px}
.hero-sub{padding:150px 0 70px;background:linear-gradient(180deg,rgba(16,61,33,.9),var(--ink))}

/* ---------- card draw (GAME colours) ---------- */
.deck{display:flex;flex-direction:column;align-items:center;gap:22px}
.card{position:relative;width:100%;max-width:370px;aspect-ratio:5/7;border:1px solid rgba(177,139,20,.4);
  border-radius:5px;background:linear-gradient(158deg,var(--game-red),var(--game-red-deep));padding:36px 32px;
  display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 26px 60px rgba(0,0,0,.55);
  transform:rotate(-2deg);transition:transform .45s cubic-bezier(.2,.8,.3,1)}
.card.money{background:linear-gradient(158deg,var(--game-green),var(--game-green-deep))}
.card.flip{transform:rotate(-2deg) rotateY(90deg)}
.card-suit{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.card-q{font-family:var(--display);font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.36}
.card-no{font-size:.66rem;letter-spacing:.18em;color:rgba(244,241,234,.45)}
.draw{background:none;border:0;color:var(--gold);cursor:pointer;font-family:var(--body);font-size:.76rem;
  letter-spacing:.18em;text-transform:uppercase;padding:8px 4px;border-bottom:1px solid rgba(177,139,20,.4);
  transition:.2s}
.draw:hover{color:var(--gold-soft);border-color:var(--gold-soft)}

/* ---------- audience strip ---------- */
.who{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.who.five{grid-template-columns:repeat(5,1fr)}
.who div{background:var(--ink-soft);padding:30px 26px}
.who h3{font-family:var(--body);font-size:.97rem;font-weight:600;letter-spacing:0;margin-bottom:9px}
.who p{font-size:.89rem}

/* ---------- board ---------- */
.field-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.field-frame{border:1px solid rgba(177,139,20,.35);padding:10px;background:rgba(0,0,0,.25);
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.field-cap{font-size:.78rem;color:var(--muted);margin-top:14px;letter-spacing:.04em}
.sectors{width:100%;border-collapse:collapse;margin-top:8px}
.sectors th{font-family:var(--body);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;text-align:left;
  padding:0 0 14px;font-weight:500}
.sectors th.m{color:#5FBF8F}
.sectors th.s{color:#E0737F}
.sectors td{padding:13px 18px 13px 0;border-top:1px solid var(--line);font-size:.95rem}

/* ---------- generic data table ---------- */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;min-width:520px}
.tbl th{font-family:var(--body);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;text-align:left;
  padding:0 16px 14px 0;font-weight:500;color:var(--gold)}
.tbl td{padding:13px 16px 13px 0;border-top:1px solid var(--line);font-size:.93rem;vertical-align:top}
.tbl td:first-child{color:var(--cream)}
.tbl .num{font-variant-numeric:tabular-nums;color:rgba(244,241,234,.72)}

/* ---------- decks grid ---------- */
.decks{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.decks>div{background:var(--ink-soft);padding:26px 24px}
.decks h3{font-family:var(--body);font-size:.97rem;font-weight:600;letter-spacing:0;margin-bottom:8px}
.decks p{font-size:.87rem}
.decks .st{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;display:block;margin-bottom:12px}
.decks .st.pub{color:var(--gold)}
.decks .st.shut{color:var(--muted)}

/* ---------- closing call to action ---------- */
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:56px 0;
  display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.band h2{max-width:20ch}

/* ---------- numbered steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.steps>div{background:var(--green-deep);padding:34px 28px}
.steps.on-dark>div{background:var(--ink-soft)}
.steps h3{font-size:1rem;font-family:var(--body);font-weight:600;letter-spacing:0;margin-bottom:10px}
.steps p{font-size:.91rem}
.steps .n{font-size:.68rem;letter-spacing:.2em;color:var(--gold);display:block;margin-bottom:14px}

/* ---------- game cards ---------- */
.games{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.game{border:1px solid var(--line);border-radius:4px;padding:40px 34px;transition:border-color .25s,transform .25s}
.game.red{background:rgba(142,21,32,.22)}
.game.green{background:rgba(14,74,51,.3)}
.game:hover{border-color:rgba(177,139,20,.55);transform:translateY(-3px)}
.game .tag{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:block;
  margin-bottom:18px}
.game h3{margin-bottom:14px}
.game p{font-size:.95rem;margin-bottom:22px}
.specs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.specs span{font-size:.72rem;padding:6px 12px;border:1px solid var(--line);border-radius:2px;
  color:rgba(244,241,234,.66)}

/* ---------- numbers row ---------- */
.math{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:42px 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.math .v{font-family:var(--display);font-size:clamp(1.7rem,3.3vw,2.4rem);color:var(--gold-soft);display:block;
  line-height:1.1}
.math .l{font-size:.79rem;color:rgba(244,241,234,.62);margin-top:10px;display:block}

/* ---------- what's in the box ---------- */
.kit{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px}
.kit li{list-style:none;padding:15px 0 15px 26px;border-bottom:1px solid var(--line-soft);position:relative;
  font-size:.95rem}
.kit li:before{content:"";position:absolute;left:0;top:26px;width:12px;height:1px;background:var(--gold)}
.kit li b{font-weight:600}
.kit li span{color:var(--muted);font-size:.86rem;display:block}

/* ---------- calculator ---------- */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);background:rgba(0,0,0,.2)}
.calc-in{padding:40px 36px;border-right:1px solid var(--line)}
.calc-out{padding:40px 36px;background:rgba(14,74,51,.22)}
.calc-row{margin-bottom:22px}
.calc-row:last-child{margin-bottom:0}
.calc output{display:block;font-family:var(--display);font-size:clamp(1.8rem,3.4vw,2.6rem);color:var(--gold-soft);
  line-height:1.1}
.calc .cap{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;
  margin-bottom:8px}
.calc .fine{font-size:.83rem;color:var(--muted);margin-top:24px}

/* ---------- tiers ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tier{border:1px solid var(--line);border-radius:4px;padding:36px 28px;background:rgba(244,241,234,.03);
  display:flex;flex-direction:column}
.tier.pick{border-color:var(--gold);background:rgba(177,139,20,.08)}
.tier .badge{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);display:block;
  margin-bottom:16px}
.tier .price{font-family:var(--display);font-size:2.3rem;margin:12px 0 6px;display:block}
.tier .price-note{font-size:.8rem;color:var(--muted);margin-bottom:24px;display:block}
.tier ul{list-style:none;margin-bottom:30px}
.tier li{padding:11px 0 11px 24px;position:relative;font-size:.93rem;border-bottom:1px solid var(--line-soft)}
.tier li:before{content:"";position:absolute;left:0;top:20px;width:11px;height:1px;background:var(--gold)}
.tier .btn{margin-top:auto;text-align:center}

/* ---------- author ---------- */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center}
.portrait{aspect-ratio:4/5;border:1px solid var(--line);border-radius:4px;
  background:linear-gradient(150deg,rgba(16,61,33,.7),rgba(142,21,32,.3));display:flex;align-items:center;
  justify-content:center;text-align:center;color:var(--muted);font-size:.76rem;letter-spacing:.12em;
  text-transform:uppercase;padding:20px}
.about p{margin-top:20px}
.sig{font-family:var(--display);font-size:1.3rem;color:var(--gold-soft);margin-top:32px}

/* ---------- quotes ---------- */
.case{border:1px solid var(--line);border-left:2px solid var(--gold);padding:38px 40px;
  max-width:76ch;margin-bottom:48px;background:rgba(0,0,0,.18)}
.case p{font-size:1.03rem}
.case p+p{margin-top:16px}
.case-by{font-size:.78rem;color:var(--muted);letter-spacing:.06em;margin-top:22px;display:block}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.quote{border-left:2px solid var(--gold);padding:6px 0 6px 24px}
.quote p{font-family:var(--display);font-size:1.05rem;line-height:1.5;color:rgba(244,241,234,.9)}
.quote .who-line{font-size:.77rem;color:var(--muted);margin-top:16px;letter-spacing:.06em;display:block}

/* ---------- faq ---------- */
.faq{max-width:820px}
.q{border-bottom:1px solid var(--line)}
.q button{width:100%;background:none;border:0;color:var(--cream);cursor:pointer;font-family:var(--body);
  font-size:1.02rem;text-align:left;padding:25px 44px 25px 0;position:relative;line-height:1.4}
.q button:after{content:"+";position:absolute;right:6px;top:23px;color:var(--gold);font-size:1.3rem;
  transition:transform .25s}
.q button[aria-expanded="true"]:after{transform:rotate(45deg)}
.q .a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.q .a p{padding:0 40px 26px 0;font-size:.95rem}
.q .a p+p{padding-top:0;margin-top:-8px}

/* ---------- legal documents ---------- */
.doc{max-width:76ch}
.doc h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin:56px 0 18px}
.doc h2:first-child{margin-top:0}
.doc h3{font-family:var(--body);font-size:1rem;font-weight:600;letter-spacing:0;margin:32px 0 10px}
.doc p{margin-bottom:16px}
.doc ul,.doc ol{margin:0 0 16px 20px}
.doc li{margin-bottom:9px;font-size:.97rem;color:rgba(244,241,234,.82)}
.doc dl{margin-bottom:16px}
.doc dt{font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:18px}
.doc dd{margin:4px 0 0}
.doc a{color:var(--gold-soft)}
.doc .updated{font-size:.83rem;color:var(--muted)}
.draft{border:1px solid rgba(224,166,63,.5);background:rgba(224,166,63,.07);padding:22px 24px;
  margin-bottom:44px;font-size:.92rem;color:#E8C88A}
.draft b{color:#F0D9A8}

/* ---------- cookie banner (built by main.js) ---------- */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:150;background:rgba(7,26,15,.97);
  border-top:1px solid var(--line);padding:20px 0}
.cookie .wrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:space-between}
.cookie p{font-size:.88rem;max-width:62ch;margin:0}
.cookie a{color:var(--gold-soft)}
.cookie .btns{display:flex;gap:10px;flex-wrap:wrap}
.cookie .btn{padding:12px 22px;font-size:.72rem}
@media(max-width:560px){.cookie .btns{width:100%}.cookie .btn{flex:1}}

/* ---------- forms ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:900px}
.form-grid .full{grid-column:1/-1}
label{display:block;font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin-bottom:9px}
input,select,textarea{width:100%;background:rgba(244,241,234,.05);border:1px solid var(--line);border-radius:2px;
  padding:14px 16px;color:var(--cream);font-family:var(--body);font-size:.97rem}
input:focus,select:focus,textarea:focus{border-color:var(--gold);outline:none}
textarea{min-height:120px;resize:vertical}
select option{background:var(--ink);color:var(--cream)}
.consent{display:flex;gap:12px;align-items:flex-start;margin:8px 0 4px}
.consent input{width:16px;height:16px;flex-shrink:0;margin-top:3px}
.consent span{font-size:.83rem;color:var(--muted);line-height:1.5}
.consent a{color:var(--gold)}
.note{font-size:.83rem;color:var(--muted);margin-top:18px;max-width:60ch}

/* ---------- footer ---------- */
footer{background:var(--black);border-top:1px solid var(--line);padding:58px 0 38px}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:42px}
.foot h4{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;
  font-weight:500}
.foot a{display:block;font-size:.89rem;color:rgba(244,241,234,.66);text-decoration:none;margin-bottom:11px}
.foot a:hover{color:var(--gold-soft)}
.legal{border-top:1px solid var(--line);padding-top:26px;font-size:.79rem;color:var(--muted);display:flex;
  justify-content:space-between;gap:20px;flex-wrap:wrap}
.legal a{color:var(--muted)}

/* ---------- motion ---------- */
.rev{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.rev.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rev{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .who,.who.five{grid-template-columns:repeat(2,1fr)}
  .who.five>:last-child{grid-column:1/-1}   /* five items in two columns: fill the last row */
  .decks{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:960px){
  .hero-grid,.about,.field-grid,.calc{grid-template-columns:1fr}
  .calc-in{border-right:0;border-bottom:1px solid var(--line)}
  .steps,.math{grid-template-columns:repeat(2,1fr)}
  .quotes,.foot,.games,.tiers,.kit{grid-template-columns:1fr}
  nav{display:none}
  .burger{display:block}
  nav.open{display:flex;flex-direction:column;align-items:flex-start;position:absolute;top:70px;left:0;right:0;
    background:var(--ink-soft);padding:24px 28px;gap:18px;border-bottom:1px solid var(--line)}
}
@media(max-width:560px){
  section{padding:72px 0}
  .hero{padding:130px 0 78px}
  .hero-sub{padding:120px 0 56px}
  .who,.who.five,.steps,.math,.form-grid,.decks{grid-template-columns:1fr}
  .wrap{padding:0 20px}
  .calc-in,.calc-out{padding:30px 24px}
  .btn{width:100%;text-align:center}
  .cta-row{flex-direction:column;align-items:stretch}
}