/* Cobble Gobble — website styles.
   Warm cartography: stone paper, gold-painted streets, the app's own day/night palette.
   Self-contained by design — no third-party fonts, scripts, or requests (the whole
   brand is "Data Not Collected"; the site proves it). Palette mirrors Theme.swift. */

/* ---------- Self-hosted fonts (OFL, in assets/fonts/) ---------- */
@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:italic; font-weight:400; font-display:swap;
  src:url("fonts/fraunces-italic-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:"Fraunces"; font-style:normal; font-weight:900; font-display:swap;
  src:url("fonts/fraunces-900.woff2") format("woff2"); }
@font-face { font-family:"Hanken"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/hanken-400.woff2") format("woff2"); }
@font-face { font-family:"Hanken"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fonts/hanken-500.woff2") format("woff2"); }
@font-face { font-family:"Hanken"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/hanken-700.woff2") format("woff2"); }

/* ---------- Palette (light = day walk on stone paper) ---------- */
:root{
  --paper:#F2EAD9; --paper-2:#EADFC9; --card:#FBF5E9;
  --ink:#2A211A; --ink-soft:#5C5142;
  --line:rgba(42,33,26,.14); --line-strong:rgba(42,33,26,.30);
  --gold:#F5940D; --gold-bright:#FFB81A; --gold-deep:#835400;
  --stone:#8C8070; --stone-dark:#4A4642;
  --paint:#F5940D; --map-line:rgba(74,70,66,.30);
  --on-gold:#2A160A; --focus:#835400;
  --shadow:rgba(58,38,16,.18);
  --grain:.035;
  --wash-top:#F6EFDF; --wash-bot:#EADFC9;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#1E1913; --paper-2:#241D15; --card:#2A2219;
    --ink:#F5EEDD; --ink-soft:#C6B99F;
    --line:rgba(245,238,221,.14); --line-strong:rgba(245,238,221,.28);
    --gold:#FBAE3C; --gold-bright:#FFC65A; --gold-deep:#FFD988;
    --stone:#9A8E7C; --stone-dark:#C7BDAE;
    --paint:#FBAE3C; --map-line:rgba(199,189,174,.22);
    --on-gold:#221A12; --focus:#FFC65A;
    --shadow:rgba(0,0,0,.45); --grain:.05;
    --wash-top:#241D15; --wash-bot:#161109;
  }
}
:root[data-theme="dark"]{
  --paper:#1E1913; --paper-2:#241D15; --card:#2A2219;
  --ink:#F5EEDD; --ink-soft:#C6B99F;
  --line:rgba(245,238,221,.14); --line-strong:rgba(245,238,221,.28);
  --gold:#FBAE3C; --gold-bright:#FFC65A; --gold-deep:#FFD988;
  --stone:#9A8E7C; --stone-dark:#C7BDAE;
  --paint:#FBAE3C; --map-line:rgba(199,189,174,.22);
  --on-gold:#221A12; --focus:#FFC65A;
  --shadow:rgba(0,0,0,.45); --grain:.05;
  --wash-top:#241D15; --wash-bot:#161109;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Hanken","Segoe UI",system-ui,sans-serif;
  font-size:clamp(17px,1.05rem + .15vw,19px); line-height:1.65;
  font-weight:400; letter-spacing:.002em;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
/* Atmosphere on a fixed layer (avoids background-attachment:fixed repaint cost).
   A viewport-locked stone wash + faint inlined grain — no network request. */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg,var(--wash-top),var(--paper) 30%,var(--paper) 70%,var(--wash-bot)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-size:cover,140px 140px;
  background-blend-mode:soft-light;
  opacity:1;
}
img,svg{max-width:100%}
a{color:inherit}

/* ---------- Type ---------- */
h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif; font-weight:600; line-height:1.08;
  letter-spacing:-.01em; margin:0 0 .4em; color:var(--ink);
  font-optical-sizing:auto;}
h1{font-size:clamp(2.6rem,6vw,4.6rem); font-weight:900; letter-spacing:-.025em;}
h2{font-size:clamp(1.9rem,3.4vw,2.9rem);}
h3{font-size:clamp(1.25rem,1.8vw,1.55rem);}
p{margin:0 0 1.1em; max-width:64ch}
.lede{font-size:clamp(1.15rem,1.4vw,1.4rem); color:var(--ink-soft); max-width:60ch}
strong{font-weight:700; color:var(--ink)}
em{font-style:italic}
.serif-i{font-family:"Fraunces",serif; font-style:italic; font-weight:400}
small{font-size:.86rem}

/* ---------- Layout ---------- */
.wrap{max-width:1120px; margin-inline:auto; padding-inline:clamp(20px,5vw,48px)}
.narrow{max-width:760px}
section{padding-block:clamp(56px,8vw,104px)}
.band{background:var(--paper-2); border-block:1px solid var(--line)}
.eyebrow{font-family:"Hanken"; font-weight:700; text-transform:uppercase;
  letter-spacing:.16em; font-size:.76rem; color:var(--gold-deep); margin:0 0 .9em}
.rule{height:3px; width:64px; border:0; border-radius:3px; margin:0 0 1.6em;
  background:linear-gradient(90deg,var(--gold-bright),var(--gold));}

/* ---------- Skip link + focus ---------- */
.skip{position:fixed; left:16px; top:-60px; z-index:200; background:var(--gold);
  color:var(--on-gold); font-weight:700; padding:.6em 1em; border-radius:10px;
  transition:top .18s ease}
.skip:focus{top:16px}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:4px}

/* ---------- Header ---------- */
.site-head{position:sticky; top:0; z-index:100; backdrop-filter:saturate(1.1) blur(8px);
  background:color-mix(in srgb,var(--paper) 86%,transparent); border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex; align-items:center; gap:1.2rem; padding-block:.7rem}
.brand{display:flex; align-items:center; gap:.55rem; text-decoration:none; font-family:"Fraunces",serif;
  font-weight:900; font-size:1.28rem; letter-spacing:-.02em; color:var(--ink); margin-right:auto}
.brand img{width:32px; height:32px}
.nav{display:flex; gap:.3rem; align-items:center; flex-wrap:wrap}
.nav a{text-decoration:none; font-weight:500; font-size:.96rem; color:var(--ink-soft);
  padding:.4em .7em; border-radius:9px}
.nav a:hover{color:var(--ink); background:var(--line)}
.nav a[aria-current="page"]{color:var(--ink); background:var(--line)}
.theme-btn{border:1px solid var(--line-strong); background:transparent; color:var(--ink-soft);
  width:38px; height:38px; border-radius:10px; cursor:pointer; font-size:1.05rem; line-height:1}
.theme-btn:hover{color:var(--ink); border-color:var(--gold)}
@media (max-width:720px){
  .site-head .wrap{flex-wrap:wrap; gap:.4rem .8rem; padding-block:.55rem}
  .brand{font-size:1.12rem; margin-right:auto}
  .nav{order:3; flex-basis:100%; flex-wrap:nowrap; overflow-x:auto; gap:.1rem;
    padding-bottom:.1rem; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent)}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap; padding:.35em .55em; font-size:.92rem}
  .nav .hide-sm{display:none}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:.5em; text-decoration:none; cursor:pointer;
  font-family:"Hanken"; font-weight:700; font-size:1rem; padding:.8em 1.35em; border-radius:14px;
  border:1px solid transparent; transition:transform .12s ease, box-shadow .2s ease, background .2s ease}
.btn-gold{background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:var(--on-gold);
  box-shadow:0 6px 18px -8px var(--gold); }
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 12px 26px -10px var(--gold)}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--line-strong)}
.btn-outline:hover{border-color:var(--gold); color:var(--ink); transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){ .btn:hover{transform:none} }
.btn-row{display:flex; gap:.8rem; flex-wrap:wrap; align-items:center}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; padding-block:clamp(40px,6vw,84px)}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,56px); align-items:center}
@media (max-width:860px){ .hero .wrap{grid-template-columns:1fr; text-align:left} }
.hero h1{margin-bottom:.2em}
.hero .tagline{font-family:"Fraunces",serif; font-style:italic; font-weight:400;
  font-size:clamp(1.3rem,2.2vw,1.7rem); color:var(--gold-deep); margin:.1em 0 .7em}
.hero .mascot-line{display:flex; align-items:center; gap:1rem; margin:.4rem 0 1.4rem}
.hero .mascot-line img{width:76px; height:76px; flex:none}
.hero-cta small{display:block; color:var(--ink-soft); margin-top:.8rem; font-size:.9rem}
.hero-art{position:relative}

/* real-app screenshot in the hero */
.shot{position:relative; margin:0; max-width:312px; margin-inline:auto}
.shot img{display:block; width:100%; height:auto; border-radius:30px;
  border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
  box-shadow:0 36px 74px -30px var(--shadow), 0 4px 14px -8px var(--shadow)}
.shot .cap{margin:.9rem 0 0; text-align:center; font-size:.86rem; color:var(--ink-soft)}
@media (max-width:860px){ .shot{max-width:284px} }

/* ---------- Cards & grids ---------- */
.grid{display:grid; gap:clamp(16px,2vw,24px)}
.g-2{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){ .g-3{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .g-2,.g-3{grid-template-columns:1fr} }
.card{background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:clamp(20px,2.4vw,30px); box-shadow:0 14px 30px -24px var(--shadow)}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}

/* how-it-plays steps */
.steps{counter-reset:step; display:grid; gap:1.1rem}
.step{display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start}
.step .n{counter-increment:step; font-family:"Fraunces",serif; font-weight:900; font-size:1.5rem;
  color:var(--gold-deep); width:2.4rem; height:2.4rem; display:grid; place-items:center;
  border:2px solid var(--gold); border-radius:50%; flex:none}
.step .n::before{content:counter(step)}
.step h3{margin:.1em 0 .2em}

/* feature (wedge) split */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center}
@media (max-width:820px){ .split{grid-template-columns:1fr} }
.badge-list{list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.7rem}
.badge-list li{display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:start}
.badge-list .tick{color:var(--gold); font-weight:800; margin-top:.05em}

/* cities */
.cities{display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(12px,1.6vw,20px)}
@media (max-width:820px){ .cities{grid-template-columns:repeat(3,1fr)} }
@media (max-width:520px){ .cities{grid-template-columns:repeat(2,1fr)} }
.city{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px 14px;
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:.5rem}
.city .glyph{width:52px; height:52px; color:var(--gold); display:grid; place-items:center}
.city .glyph svg{width:100%; height:100%}
.city .name{font-family:"Fraunces",serif; font-weight:600; font-size:1.05rem}
.city .free{font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  color:var(--on-gold); background:var(--gold-bright); padding:.2em .6em; border-radius:999px}
.city .meta{font-size:.82rem; color:var(--ink-soft)}

/* trust strip */
.trust{display:flex; flex-wrap:wrap; gap:1.4rem 2.2rem; justify-content:center; align-items:center}
.trust .item{display:flex; align-items:center; gap:.5rem; font-weight:600; color:var(--ink)}
.trust .item .k{color:var(--gold); font-size:1.2rem}

/* ---------- Newsletter ---------- */
.signup{background:linear-gradient(135deg,var(--stone-dark),#33302B); color:#F5EEDD; border-radius:24px;
  padding:clamp(28px,4vw,52px); box-shadow:0 30px 60px -34px #000; position:relative; overflow:hidden}
:root[data-theme="dark"] .signup, @media (prefers-color-scheme:dark){}
.signup h2,.signup p{color:#F5EEDD}
.signup .eyebrow{color:var(--gold-bright)}
.signup form{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.2rem; max-width:520px}
.signup input[type=email]{flex:1 1 240px; min-width:0; font:inherit; padding:.85em 1em; border-radius:12px;
  border:1px solid rgba(245,238,221,.28); background:rgba(0,0,0,.22); color:#F5EEDD}
.signup input::placeholder{color:rgba(245,238,221,.72)}
.signup input:focus-visible{outline:3px solid var(--gold-bright); outline-offset:2px}
.signup .fineprint{font-size:.82rem; color:rgba(245,238,221,.7); margin:.9rem 0 0; max-width:52ch}
.signup .fineprint a{color:var(--gold-bright)}

/* ---------- Prose (privacy/support/accessibility long pages) ---------- */
.prose h2{margin-top:2em} .prose h3{margin-top:1.6em}
.prose ul{padding-left:1.2em} .prose li{margin:.3em 0}
.prose a{color:var(--gold-deep); text-underline-offset:3px; text-decoration-thickness:1.5px}
:root[data-theme="dark"] .prose a{color:var(--gold-bright)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .prose a{color:var(--gold-bright)} }
.prose .card{margin:1.2em 0}
.lang-switch{display:inline-flex; gap:.4rem; border:1px solid var(--line-strong); border-radius:12px; padding:.25rem; margin-bottom:1.4rem}
.lang-switch a{text-decoration:none; padding:.35em .9em; border-radius:9px; font-weight:600; color:var(--ink-soft)}
.lang-switch a[aria-current="true"]{background:var(--gold); color:var(--on-gold)}
.meta-line{color:var(--ink-soft); font-size:.9rem}
.updated{font-size:.85rem; color:var(--ink-soft)}

/* press assets */
.asset-row{display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:center;
  padding:1rem 0; border-bottom:1px solid var(--line)}
.asset-row:last-child{border-bottom:0}
.asset-row .thumb{width:64px; height:64px; border-radius:12px; background:var(--paper-2);
  display:grid; place-items:center; color:var(--gold); border:1px solid var(--line)}
.asset-row .thumb svg,.asset-row .thumb img{width:70%; height:70%}
dl.facts{display:grid; grid-template-columns:max-content 1fr; gap:.4rem 1.4rem; margin:0}
dl.facts dt{font-weight:700; color:var(--ink-soft)}
dl.facts dd{margin:0}

/* ---------- Footer ---------- */
.site-foot{border-top:1px solid var(--line); background:var(--paper-2); margin-top:auto}
.site-foot .wrap{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; padding-block:clamp(40px,6vw,64px)}
@media (max-width:720px){ .site-foot .wrap{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .site-foot .wrap{grid-template-columns:1fr} }
.site-foot h2{font-family:"Hanken"; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  font-size:.74rem; color:var(--ink-soft); margin:0 0 .8em; line-height:1.2}
.site-foot a{color:var(--ink-soft); text-decoration:none; display:block; padding:.2em 0}
.site-foot a:hover{color:var(--gold-deep)}
.foot-brand{display:flex; align-items:center; gap:.6rem; font-family:"Fraunces",serif; font-weight:900; font-size:1.2rem; color:var(--ink); margin-bottom:.7em}
.foot-brand img{width:34px;height:34px}
.colophon{grid-column:1/-1; border-top:1px solid var(--line); margin-top:1rem; padding-top:1.2rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; color:var(--ink-soft); font-size:.85rem}
.colophon a{display:inline}

/* page footer sticky bottom */
body{min-height:100vh; display:flex; flex-direction:column}
main{flex:1}

/* ---------- Scroll reveal (progressive, reduced-motion safe) ---------- */
.reveal{opacity:1; transform:none}
.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.6,.2,1)}
.js .reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .js .reveal{opacity:1 !important; transform:none !important; transition:none} }

/* utility */
.center{text-align:center} .mt0{margin-top:0} .mb0{margin-bottom:0}
.stack>*+*{margin-top:1rem}
.pill{display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.04em; padding:.25em .7em;
  border-radius:999px; background:var(--line); color:var(--ink)}