/* Curiosta Makers — shared stylesheet (assets/style.css). Curiosta brand tokens; do not rename. */
@font-face{font-family:'Fraunces';font-style:italic;font-weight:500;font-display:swap;src:url(fonts/fraunces-500i.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/fraunces-400.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/fraunces-600.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-600.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-700.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrainsmono-500.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/jetbrainsmono-700.woff2) format('woff2')}

:root{
  --ink:#0b1f2e;--ink-2:#2d4354;--muted:#5d7180;
  --sea-900:#041726;--sea-800:#06243a;--sea-700:#0a3554;--sea-500:#0f6e8c;
  --teal:#11b5a4;--teal-soft:#d8f3ef;--coral:#ff6b4a;--coral-soft:#ffe7e0;
  --sand:#f7f4ee;--card:#ffffff;--line:#e4e0d6;--ok:#14866d;--bad:#c2412d;
  --radius:16px;--nav-h:60px;
  --shadow:0 1px 2px rgba(11,31,46,.06),0 8px 24px rgba(11,31,46,.07);
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* site-only (prefixed) */
  --mk-warn-bg:#fff4d6;--mk-warn-ink:#5a3d00;--mk-footer-ink:#b9c9d4;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--nav-h) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sand);color:var(--ink);font:400 17px/1.62 var(--sans);overflow-wrap:break-word}
@media (max-width:640px){body{font-size:16px}}
img,svg{max-width:100%;height:auto}
a{color:var(--sea-500);text-underline-offset:3px}
a:hover{color:var(--sea-700)}
:focus-visible{outline:3px solid var(--coral);outline-offset:2px;border-radius:4px}
.topbar :focus-visible,.hero :focus-visible,.site-footer :focus-visible{outline-color:var(--teal)}
.skip{position:absolute;left:-999px;top:8px;background:var(--coral);color:var(--sea-900);padding:10px 16px;border-radius:999px;font-weight:700;z-index:100}
.skip:focus{left:8px}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.narrow{max-width:780px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,5vw,4rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.7rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.65rem)}
h4{font:700 1.1rem/1.3 var(--sans);margin:0 0 .4em}
em{font-family:var(--serif);font-style:italic;font-weight:500}
p{margin:0 0 1em}
.eyebrow{font:500 .78rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sea-500);margin:0 0 .8em}
.hero .eyebrow,.page-hero .eyebrow,.block.dark .eyebrow{color:var(--teal)}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* nav */
.topbar{position:sticky;top:0;z-index:50;background:rgba(4,23,38,.94);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--sea-700)}
.topbar .wrap{display:flex;align-items:center;gap:20px;min-height:var(--nav-h)}
.brand{display:flex;align-items:baseline;gap:8px;text-decoration:none;color:#fff;white-space:nowrap}
.brand b{font:600 1.35rem/1 var(--serif)}
.brand span{font:500 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.brand:hover{color:#fff}
.nav{display:flex;gap:4px;margin:0 0 0 auto;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav::-webkit-scrollbar{display:none}
.nav a{display:block;padding:8px 14px;border-radius:999px;color:#d6e3ec;text-decoration:none;font:600 .95rem/1.2 var(--sans);white-space:nowrap}
.nav a:hover{background:var(--sea-700);color:#fff}
.nav a[aria-current="page"]{background:var(--teal-soft);color:var(--sea-900)}
@media (max-width:760px){
  .topbar .wrap{flex-direction:column;align-items:stretch;gap:2px;padding-top:6px;padding-bottom:6px}
  .brand{padding:2px 4px}
  .topbar{position:static}
  .nav{margin:0;padding-bottom:2px;flex-wrap:wrap;overflow:visible}
  .nav a{padding:8px 12px}
  :root{--nav-h:12px}
}

/* hero + bands */
.hero{background:radial-gradient(900px 400px at 85% -10%,rgba(17,181,164,.28),transparent 60%),radial-gradient(700px 360px at 0% 110%,rgba(255,107,74,.16),transparent 60%),var(--sea-900);color:#fff;padding:72px 0 56px}
.hero h1{color:#fff;max-width:900px}
.hero .lead{font-size:1.2rem;color:#d6e3ec;max-width:720px}
.hero.compact{padding:48px 0 36px}
.hero.compact h1{font-size:clamp(2rem,4.2vw,3.3rem)}
.hero a:not(.btn){color:#9fe6dd}
.crumbs{font:500 .85rem/1.4 var(--mono);margin:0 0 18px;color:#b9c9d4}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px}
.crumbs li+li::before{content:"/";color:#9fb4c2;margin-right:8px}
.crumbs a{color:#9fe6dd}
.crumbs [aria-current]{color:#b9ccd8}
h3 .count{font:500 .85rem/1 var(--mono);color:var(--ink-2)}
.topic-nav{columns:2 280px;column-gap:32px}
section.block{padding:84px 0}
@media (max-width:640px){section.block{padding:56px 0}.hero{padding:48px 0 40px}}
.block.alt{background:var(--card)}
.block.dark{background:var(--sea-900);color:#fff}
.block.dark h2,.block.dark h3{color:#fff}
.block.dark a:not(.btn){color:#9fe6dd}
.section-head{max-width:760px;margin-bottom:28px}

/* buttons */
.btn{display:inline-block;padding:13px 24px;border-radius:999px;font:700 1rem/1.2 var(--sans);text-decoration:none;border:2px solid transparent;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--coral);color:var(--sea-900)}
.btn-primary:hover{background:#ff8266;color:var(--sea-900)}
.btn-ghost{border-color:var(--sea-500);color:var(--sea-500);background:transparent}
.btn-ghost:hover{background:var(--teal-soft);color:var(--sea-900)}
.hero .btn-ghost,.block.dark .btn-ghost{border-color:#9fe6dd;color:#fff}
.hero .btn-ghost:hover,.block.dark .btn-ghost:hover{background:var(--sea-700);color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}

/* cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid,.grid.two{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card h3{margin-bottom:.4em}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{color:var(--sea-500);text-decoration:underline}
.card .grow{flex:1}
.card .more{margin-top:14px;font-weight:700}
.price{font:700 1.5rem/1.1 var(--serif);color:var(--ink)}
.price small{display:block;font:400 .82rem/1.4 var(--sans);color:var(--ink-2);margin-top:4px}
.callout{background:var(--card);border:1px solid var(--line);border-left:6px solid var(--sea-500);border-radius:var(--radius);padding:20px 24px;margin:0 0 20px}
.callout.warn{background:var(--mk-warn-bg);border-color:#e9cf8a;border-left-color:#b27a00;color:var(--mk-warn-ink)}
.callout.safety{background:var(--coral-soft);border-color:#f3c3b6;border-left-color:var(--bad)}
.callout h2,.callout h3{font-size:1.3rem;margin-bottom:.3em}
.callout p:last-child,.callout ul:last-child{margin-bottom:0}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.chip{display:inline-block;font:500 .75rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:7px 10px;border-radius:999px;background:var(--teal-soft);color:var(--sea-900);border:1px solid #b4e3dc}
.chip.beginner{background:var(--teal-soft)}
.chip.intermediate{background:#e2ecf5;border-color:#bfd2e3}
.chip.advanced{background:var(--coral-soft);border-color:#f3c3b6}
.chip.topic{background:var(--sand);border-color:var(--line);text-transform:none;letter-spacing:0;font-family:var(--sans);font-weight:500;font-size:.8rem;color:var(--ink-2)}
.hero .chip{border-color:transparent}
.flag{display:inline-block;font:500 .72rem/1.2 var(--mono);padding:4px 8px;border-radius:6px;background:var(--mk-warn-bg);color:var(--mk-warn-ink);border:1px solid #e9cf8a;white-space:nowrap}
.flag.na{background:var(--coral-soft);color:#7a2616;border-color:#f3c3b6}

/* tables */
.tbl-wrap{margin:0 0 24px}
table.tbl{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:.95rem}
.tbl caption{text-align:left;font:700 1.1rem/1.3 var(--sans);padding:0 0 10px}
.tbl th,.tbl td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.tbl thead th{background:var(--sea-800);color:#fff;font:600 .8rem/1.3 var(--sans);letter-spacing:.04em}
.tbl tbody tr:last-child td,.tbl tbody tr:last-child th{border-bottom:0}
.tbl tbody th{font-weight:600}
.tbl .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl tfoot td,.tbl tfoot th{background:var(--teal-soft);font-weight:700;border-top:2px solid var(--sea-500)}
.tbl .small{font-size:.85rem;color:var(--ink-2);display:block;margin-top:2px}
.tbl code{font:500 .8rem var(--mono);color:var(--ink-2)}
@media (max-width:820px){
  .tbl,.tbl tbody,.tbl tfoot,.tbl tr,.tbl td,.tbl tbody th{display:block}
  .tbl{background:transparent;border:0}
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl tr{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin:0 0 12px;padding:8px 4px}
  .tbl td,.tbl tbody th{border:0;padding:6px 12px;text-align:left!important;white-space:normal!important}
  .tbl td[data-label]::before{content:attr(data-label);display:block;font:500 .7rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--sea-500)}
  .tbl tfoot tr{background:var(--teal-soft)}
  .tbl tfoot td,.tbl tfoot th{background:transparent;border:0}
}
dl.facts{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0}
dl.facts dt{font:500 .78rem/1.8 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--sea-500)}
dl.facts dd{margin:0}
@media (max-width:640px){dl.facts{grid-template-columns:1fr}}
ul.clean{padding-left:1.2em;margin:0 0 1em}
ul.clean li{margin-bottom:.4em}
.pager{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:32px}

/* footer */
.site-footer{background:var(--sea-900);color:var(--mk-footer-ink);padding:44px 0 36px;font-size:.95rem}
.site-footer a:not(.btn){color:#9fe6dd}
.site-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}
@media (max-width:760px){.site-footer .cols{grid-template-columns:1fr}}
.site-footer h2{font:500 .78rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin:0 0 10px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:6px}
.site-footer .fine{margin-top:26px;padding-top:18px;border-top:1px solid var(--sea-700);font-size:.85rem;color:#c1d2dd}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{.topbar,.site-footer,.skip{display:none}body{background:#fff}}