/* ============================================================
   inference.kg — “mountain editorial” design system (v2, 2026-06)
   Shared core for: / , /ru/ , /kg/ , /academy/* pages.
   Page-specific component styles live inline on each page.
   Fonts are self-hosted — no external requests.
   ============================================================ */

@font-face{font-family:"Barlow Condensed";src:url("/assets/fonts/BarlowCondensed-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/Inter-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/Inter-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/Inter-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/assets/fonts/JetBrainsMono-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
/* Oswald (variable, OFL) — condensed display WITH Cyrillic, used by RU/KY pages
   because Barlow Condensed has no Cyrillic and the fallback (Impact) rendered
   Russian headlines too bold, too wide, and mixed-font next to Latin words. */
@font-face{font-family:"Oswald";src:url("/assets/fonts/Oswald-Variable.ttf") format("truetype");font-weight:200 700;font-style:normal;font-display:swap}

:root{
  --paper:#f4f1ea;        /* warm bone canvas */
  --paper-2:#fbf9f4;      /* raised card */
  --ink:#161512;
  --muted:#6e6a5e;
  --line:#dcd6c6;         /* hairline */
  --line-2:#c9c2af;
  --cobalt:#2342e0;       /* agentic engineering / brand accent */
  --cobalt-deep:#1b35b8;
  --verm:#e74310;         /* ai creator */
  --verm-deep:#c63607;
  --hl:#ffe800;           /* heritage highlighter yellow */
  --mint:#d1ffca;         /* heritage mint — live/play actions */
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --cond:"Barlow Condensed",Impact,sans-serif;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--hl);color:var(--ink)}
a{color:inherit;text-decoration:none}
img,svg,video{display:block}
.wrap{max-width:1280px;margin:0 auto;padding:0 28px}
@media(max-width:640px){.wrap{padding:0 18px}}

/* ——— type helpers ——— */
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.mono.s{font-size:11px}
.cond{font-family:var(--cond);text-transform:uppercase;line-height:.92;letter-spacing:-.005em}

/* ——— ticker ——— */
.ticker{display:block;background:var(--hl);border-bottom:1px solid rgba(22,21,18,.25);overflow:hidden;white-space:nowrap}
.ticker .belt{display:inline-flex;animation:belt 26s linear infinite;will-change:transform}
.ticker span{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:9px 0;color:var(--ink)}
.ticker b{font-weight:500;padding:0 .45em;color:var(--ink)}
@keyframes belt{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker .belt{animation:none}}

/* ——— nav ——— */
header.nav{position:sticky;top:0;z-index:60;background:rgba(244,241,234,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .row{display:flex;align-items:center;gap:24px;height:62px}
.brand{font-weight:600;font-size:18px;letter-spacing:-.02em;display:flex;align-items:baseline;gap:2px}
.brand i{font-style:normal;color:var(--cobalt)}
.brand .tld{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.06em}
.brand .ac{color:var(--cobalt);margin-left:5px}
.crumb{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-2);border-radius:3px;padding:3px 6px}
.crumb:hover{border-color:var(--ink);color:var(--ink)}
.nav .links{display:flex;gap:20px;margin-left:8px;align-items:center}
.nav .links a{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:6px 0;border-bottom:2px solid transparent}
.nav .links a:hover{color:var(--ink);border-color:var(--hl)}
.nav .links a.navlink-acad{background:var(--cobalt);color:#fff;border:0;border-radius:4px;padding:8px 13px}
.nav .links a.navlink-acad:hover{background:var(--cobalt-deep);color:#fff}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:14px}
.lang{display:flex;border:1px solid var(--line-2);border-radius:4px;overflow:hidden}
.lang a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;padding:5px 9px;color:var(--muted)}
.lang a:hover{color:var(--ink)}
.lang a.on{background:var(--ink);color:var(--paper)}
@media(max-width:900px){.nav .links a:not(.navlink-acad){display:none}}

/* ——— buttons ——— */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:15px 24px;border-radius:4px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;cursor:pointer}
.btn:hover{background:var(--cobalt);border-color:var(--cobalt);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn.sm{padding:9px 14px;font-size:11px}
.btn .ar{transition:transform .18s ease}
.btn:hover .ar{transform:translateX(4px)}
/* emphasized academy CTA */
.btn.acad{background:var(--cobalt);border-color:var(--cobalt);color:#fff;padding:17px 28px;font-size:13px;box-shadow:0 10px 26px -14px rgba(35,66,224,.65)}
.btn.acad:hover{background:var(--cobalt-deep);border-color:var(--cobalt-deep);transform:translateY(-3px);box-shadow:0 16px 30px -14px rgba(35,66,224,.75)}

/* ——— hero ——— */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero .inner{padding-top:84px}
.hero .meta{display:flex;gap:26px;color:var(--muted);margin-bottom:34px;flex-wrap:wrap}
.hero .meta em{font-style:normal;color:var(--ink)}
h1.mega{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:clamp(58px,9.6vw,152px);line-height:.9;letter-spacing:-.012em;margin:0 0 30px}
h1.mega .row2{display:block}
h1.mega mark{background:linear-gradient(180deg,transparent 9%,var(--hl) 9%,var(--hl) 90%,transparent 90%);color:var(--ink);padding:0 .02em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero .sub{max-width:680px;font-size:19px;line-height:1.65;color:#3c3a33;margin:0 0 38px}
.hero .sub strong{font-weight:600;color:var(--ink)}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:64px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.stats .cell{padding:22px 22px 26px;border-left:1px solid var(--line)}
.stats .cell:first-child{border-left:0;padding-left:0}
.stats .num{font-family:var(--cond);font-size:clamp(34px,4vw,54px);font-weight:700;line-height:1}
.stats .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:8px}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}.stats .cell:nth-child(3){border-left:0;padding-left:0}.stats .cell{border-top:1px solid var(--line);margin-top:-1px}}
.ridge{position:absolute;inset:auto 0 0 0;pointer-events:none;opacity:.5}

/* ——— sections ——— */
section.block{padding:96px 0 110px;border-bottom:1px solid var(--line)}
.shead{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.shead .idx{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--ink);border:1px solid var(--line-2);border-radius:3px;padding:4px 8px;background:var(--paper-2)}
.shead .name{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.shead .rule{flex:1;height:1px;background:var(--line)}
.shead .jump{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt)}
.shead .jump:hover{border-bottom:1px solid var(--cobalt)}
h2.sec{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:clamp(42px,6vw,86px);line-height:.94;letter-spacing:-.01em;margin:6px 0 22px}
.lede{max-width:660px;font-size:18px;line-height:1.65;color:#3c3a33;margin:0 0 52px}
.lede strong{color:var(--ink);font-weight:600}

/* ——— FAQ (academy + courses) ——— */
.faq{border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:18px;padding:22px 6px;font-family:var(--cond);text-transform:uppercase;font-weight:700;font-size:clamp(20px,2.4vw,30px);line-height:1.05}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted);min-width:34px}
.faq summary .pm{margin-left:auto;font-family:var(--mono);font-size:18px;color:var(--muted);transition:transform .2s}
.faq details[open] .pm{transform:rotate(45deg);color:var(--cobalt)}
.faq .a{padding:0 6px 26px 52px;max-width:680px;color:#3c3a33;line-height:1.65;font-size:15.5px}
.faq summary:hover{background:var(--paper-2)}

/* ——— ink band + footer ——— */
.band{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.band .inner{padding-top:100px;padding-bottom:90px;position:relative}
.band h2{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:clamp(46px,7vw,108px);line-height:.92;letter-spacing:-.01em;margin:0 0 28px}
.band h2 .alt{color:transparent;-webkit-text-stroke:1.4px rgba(244,241,234,.85)}
.band p{max-width:560px;color:#b8b3a4;font-size:17px;line-height:1.65;margin:0 0 36px}
.band .btn{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.band .btn:hover{background:var(--hl);border-color:var(--hl);transform:translateY(-2px)}
.band .btn.ghost{background:transparent;color:var(--paper);border-color:#55524a}
.band .btn.ghost:hover{border-color:var(--paper)}
.band .mono.note{display:block;margin-top:22px;color:#7b776b}
footer{background:var(--ink);color:#b8b3a4;border-top:1px solid #2c2a25}
footer .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding:54px 0 24px}
@media(max-width:860px){footer .grid{grid-template-columns:1fr 1fr}}
footer .word{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:clamp(44px,5vw,72px);line-height:.9;color:transparent;-webkit-text-stroke:1.2px #55524a}
footer h4{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#7b776b;margin:4px 0 14px;font-weight:400}
footer a{display:block;padding:4px 0;color:#cfcaba;font-size:14.5px}
footer a:hover{color:var(--paper)}
footer .base{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;border-top:1px solid #2c2a25;padding:20px 0 34px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#7b776b}
footer .base a{display:inline;padding:0;color:#cfcaba}
footer .base a:hover{color:var(--paper)}

/* ——— homepage experiments table (shared by /, /ru/, /kg/) ——— */
.xp{border-top:1px solid var(--line-2)}
.xp a.row{display:grid;grid-template-columns:330px 48px 1fr 1.2fr 236px 34px;align-items:center;gap:14px;padding:16px 10px;border-bottom:1px solid var(--line);transition:background .15s ease,color .15s ease}
.xp .th{position:relative;aspect-ratio:16/10;border-radius:6px;overflow:hidden;border:1px solid var(--line-2);background:#0e0d0b}
.xp .th img,.xp .th video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.xp .th video{opacity:0;transition:opacity .25s ease}
.xp a.row:hover .th video{opacity:1}
.xp a.row:hover .th{border-color:#55524a}
.xp .no{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--muted)}
.xp .nm{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:clamp(24px,2.6vw,36px);line-height:1}
.xp .ds{color:var(--muted);font-size:14.5px;line-height:1.5}
.xp .tg{display:flex;gap:8px;justify-content:flex-end;flex-wrap:nowrap}
.xp .pill{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line-2);border-radius:6px;padding:9px 13px;color:var(--muted);white-space:nowrap;align-self:center}
.xp .pill.act{background:var(--mint);border-color:rgba(22,21,18,.35);color:#161512;font-weight:500;box-shadow:0 6px 14px -8px rgba(22,21,18,.4)}
.xp a.row:hover{background:var(--ink)}
.xp a.row:hover .nm,.xp a.row:hover .arr{color:var(--paper)}
.xp a.row:hover .ds,.xp a.row:hover .no{color:#b8b3a4}
.xp a.row:hover .pill{border-color:#55524a;color:#b8b3a4}
.xp a.row:hover .pill.act{background:var(--hl);color:#161512;border-color:transparent;transform:scale(1.05)}
.xp .arr{font-size:20px;text-align:right;color:var(--muted)}
@media(max-width:1180px){.xp a.row{grid-template-columns:330px 48px 1fr 236px 34px}.xp .ds{display:none}}
@media(max-width:900px){.xp a.row{grid-template-columns:200px 1fr 34px}.xp .tg,.xp .no{display:none}.xp .nm{font-size:22px}}

/* ——— theme toggle button ——— */
.tbtn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-2);border-radius:4px;background:transparent;color:var(--muted);font-size:16px;line-height:1;cursor:pointer;padding:0}
.tbtn:hover{border-color:var(--ink);color:var(--ink)}

/* ——— newsletter (placeholder element, band context) ——— */
.band .nl{margin-top:38px;display:flex;flex-direction:column;gap:10px;max-width:480px}
.nl .nl-lab{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#7b776b}
.nl .nl-form{display:flex;gap:10px}
.nl .nl-form input{flex:1;min-width:0;background:transparent;border:1px solid #55524a;border-radius:4px;padding:13px 14px;color:#f4f1ea;font:14.5px var(--sans)}
.nl .nl-form input::placeholder{color:#7b776b}
.nl .nl-form input:focus{outline:none;border-color:#f4f1ea}
.nl .nl-note{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#7b776b}

/* ——— RU/KY display typography ———
   Oswald 600 instead of (missing-Cyrillic) Barlow + smaller clamps:
   Cyrillic condensed runs wider and darker, so headings are scaled down. */
html[lang="ru"],html[lang="ky"]{--cond:"Oswald","Barlow Condensed",Impact,sans-serif}
html[lang="ru"] :is(h1.mega,h2.sec,.cover h1,.band h2,.mtrack .plate h3,.track h3,.act h3,.pr h3,.sh h3,.day h3,.wcol h3,.acard h3,.inc h3,.pf h3,.cur .wt,.faq summary,.xp .nm,footer .word),
html[lang="ky"] :is(h1.mega,h2.sec,.cover h1,.band h2,.mtrack .plate h3,.track h3,.act h3,.pr h3,.sh h3,.day h3,.wcol h3,.acard h3,.inc h3,.pf h3,.cur .wt,.faq summary,.xp .nm,footer .word){font-weight:600;letter-spacing:.005em}
html[lang="ru"] h1.mega,html[lang="ky"] h1.mega{font-size:clamp(42px,7vw,104px);line-height:.94}
html[lang="ru"] h2.sec,html[lang="ky"] h2.sec{font-size:clamp(32px,4.4vw,60px);line-height:.98}
html[lang="ru"] .cover h1,html[lang="ky"] .cover h1{font-size:clamp(44px,7.2vw,108px);line-height:.92}
html[lang="ru"] .band h2,html[lang="ky"] .band h2{font-size:clamp(34px,5vw,76px)}
html[lang="ru"] .mtrack .plate h3,html[lang="ky"] .mtrack .plate h3{font-size:clamp(36px,3.8vw,56px)}
html[lang="ru"] .track h3,html[lang="ky"] .track h3{font-size:clamp(28px,3vw,42px)}
html[lang="ru"] .xp .nm,html[lang="ky"] .xp .nm{font-size:clamp(22px,2.3vw,32px)}
html[lang="ru"] .band h2 .alt,html[lang="ky"] .band h2 .alt{-webkit-text-stroke:1.1px rgba(244,241,234,.85)}

/* ——— dark mode ——— */
html[data-theme="dark"]{
  --paper:#131210;--paper-2:#1c1a15;
  --ink:#ece7da;--muted:#a09a8a;
  --line:#2c2922;--line-2:#3b372d;
  --cobalt:#5571ff;--cobalt-deep:#3d57e8;
  --mint:#9ee492;
}
html[data-theme="dark"] body{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] header.nav{background:rgba(19,18,16,.86)}
html[data-theme="dark"] .ticker span,html[data-theme="dark"] .ticker b{color:#161512}
html[data-theme="dark"] :is(.hero .sub,.lede,.track p,.act p,.pr p,.sh p,.day p,.mtrack .info>p,.shiplist li,.wcol li,.acard li,.inc li,.faq .a,.cur .mbody li,.flyline){color:#c9c3b3}
html[data-theme="dark"] :is(.hero .sub strong,.lede strong,.flyline b){color:var(--ink)}
html[data-theme="dark"] .band,html[data-theme="dark"] footer{background:#0c0b09}
html[data-theme="dark"] .band .btn{background:var(--ink);border-color:var(--ink);color:#161512}
html[data-theme="dark"] .band .btn:hover{background:var(--hl);border-color:var(--hl);color:#161512}
html[data-theme="dark"] .band .btn.ghost{background:transparent;color:var(--ink);border-color:#3b372d}
html[data-theme="dark"] .btn{color:#131210}
html[data-theme="dark"] .btn:hover{color:#fff}
html[data-theme="dark"] .btn.ghost{color:var(--ink)}
html[data-theme="dark"] .btn.acad{color:#fff}
html[data-theme="dark"] .nav .links a.navlink-acad{color:#fff}
html[data-theme="dark"] .lang a.on{background:var(--ink);color:#131210}
html[data-theme="dark"] .xp a.row:hover{background:#000}
html[data-theme="dark"] .xp a.row:hover .nm,html[data-theme="dark"] .xp a.row:hover .arr{color:#ece7da}
html[data-theme="dark"] .stamp{background:var(--paper-2)}
html[data-theme="dark"] .stamp.hl{background:var(--hl);color:#161512}
html[data-theme="dark"] .badge.now,html[data-theme="dark"] .badge.goal{color:#161512}
html[data-theme="dark"] .shipbox{background:var(--paper-2)}
html[data-theme="dark"] .ridge path:first-child{stroke:#3b372d}
html[data-theme="dark"] .ridge path:last-child{stroke:#2c2922}
html[data-theme="dark"] h1.mega mark{color:#161512}
html[data-theme="dark"] ::selection{background:var(--hl);color:#161512}

/* ——— reveal + a11y ——— */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:3px}

/* ============================================================
   RESPONSIVE LAYER (2026-06-13) — mobile / tablet / laptop / desktop.
   Desktop (>900px) is unchanged. Below that the nav becomes a
   wrapping mobile menu and global guards prevent horizontal scroll.
   ============================================================ */

/* hard guard: nothing may cause horizontal scroll */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video{max-width:100%}

/* ——— TABLET + MOBILE nav (≤900px): wrap into a usable menu ———
   The desktop rule hides section links ≤900; here we bring them back
   on their own wrapped row so navigation stays usable, and let the
   bar grow taller instead of overflowing. */
@media(max-width:900px){
  .nav .row{height:auto;min-height:60px;flex-wrap:wrap;gap:10px 16px;padding:9px 0}
  .nav .brand{margin-right:auto}
  .nav .right{margin-left:0;gap:12px;flex-wrap:wrap}
  .nav .links{order:5;flex-basis:100%;width:100%;margin:0;gap:8px 18px;flex-wrap:wrap;
    border-top:1px solid var(--line);padding-top:9px}
  .nav .links a:not(.navlink-acad){display:inline-block}  /* unhide section links */
  .crumb{order:4}
  .lang a{padding:7px 11px}            /* easier tap targets */
  .tbtn{width:38px;height:38px}
}

/* ——— SMALL MOBILE (≤600px): tighten the bar, stack the right cluster ——— */
@media(max-width:600px){
  .nav .row{gap:8px 12px}
  .nav .right{flex-basis:100%;width:100%;justify-content:flex-start;order:4}
  .nav .links{order:5}
  .btn.sm{padding:9px 13px}
}

/* ——— ticker: smaller on phones, still clipped ——— */
@media(max-width:600px){
  .ticker span{font-size:11px;padding:8px 0}
}

/* ——— hero / headline scaling so long words never overflow ——— */
@media(max-width:600px){
  .hero .inner{padding-top:48px}
  .hero .meta{gap:8px 18px;margin-bottom:24px;font-size:11px}
  h1.mega{font-size:clamp(40px,12.5vw,60px);overflow-wrap:break-word;hyphens:auto}
  .hero .sub{font-size:17px}
  .hero .cta{margin-bottom:44px}
  .stats .num{font-size:clamp(26px,7vw,40px);overflow-wrap:break-word}
  section.block{padding:56px 0 64px}
  h2.sec{overflow-wrap:break-word}
  .lede{font-size:16.5px}
}

/* big CTA buttons go full-width on phones for easy tapping */
@media(max-width:480px){
  .hero .cta,.band .cta,.cta{flex-direction:column;align-items:stretch}
  .hero .cta .btn,.band .cta .btn,.cta .btn{justify-content:center;width:100%}
  .btn{padding:16px 22px}        /* ≥48px tall tap target */
}

/* ——— ink band + footer ——— */
@media(max-width:600px){
  .band .inner{padding-top:64px;padding-bottom:56px}
  footer .grid{grid-template-columns:1fr 1fr;gap:24px;padding:40px 0 18px}
  footer .base{flex-direction:column;gap:8px;align-items:flex-start}
}
@media(max-width:380px){
  footer .grid{grid-template-columns:1fr}
}

/* ——— newsletter: stack input + button on phones ——— */
@media(max-width:480px){
  .nl .nl-form{flex-direction:column;align-items:stretch}
  .nl .nl-form .btn{width:100%;justify-content:center}
}

/* ——— experiments index table: smaller thumb so it fits 320px ——— */
@media(max-width:600px){
  .xp a.row{grid-template-columns:92px 1fr 26px;gap:12px;padding:12px 4px}
  .xp .nm{font-size:20px;overflow-wrap:break-word}
}

/* ——— wrap padding a touch tighter on the smallest screens ——— */
@media(max-width:380px){.wrap{padding:0 14px}}