/* Blocks & Burrows public site. Tokens from docs/BRAND.md: the royal-sky ground with its dot pattern, white
   cards with walnut text, Luckiest Guy display type outlined in walnut, Baloo 2 for text. */
@font-face{font-family:"Luckiest Guy";font-weight:400;font-display:swap;src:url(/site/fonts/LuckiestGuy.woff2) format("woff2")}
@font-face{font-family:"Baloo 2";font-weight:400 800;font-display:swap;src:url(/site/fonts/Baloo2.woff2) format("woff2")}

:root{
  --ground-top:#1F7BF2;--ground-mid:#3AAEFF;--ground-bot:#62CCFF;
  --paper:#FFFFFF;--walnut:#3B2416;--bark:#6B4A33;--line:#EADFD6;--wash:#F4F9FF;
  --leaf:#1FB24A;--leaf-deep:#137A31;--honey:#FFB81C;--honey-deep:#C98500;--berry:#F0284F;--sky-deep:#1561C9;
  --display:"Luckiest Guy","Arial Black",Impact,sans-serif;--text:"Baloo 2",system-ui,sans-serif;
  --w:1100px;--pad:clamp(16px,5vw,48px);
  --outline:0 3px 0 var(--walnut),2px 2px 0 var(--walnut),-2px 2px 0 var(--walnut),2px -2px 0 var(--walnut),-2px -2px 0 var(--walnut),0 6px 0 rgba(59,36,22,.35);
}
*{box-sizing:border-box}
html{color:var(--walnut);font:500 18px/1.55 var(--text);-webkit-text-size-adjust:100%;background:var(--ground-top)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;
  background:radial-gradient(rgba(255,255,255,.22) 2px,transparent 2.5px) 0 0/44px 44px,
             linear-gradient(180deg,var(--ground-top),var(--ground-mid) 55%,var(--ground-bot))}
a{color:var(--sky-deep);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.05;margin:0;letter-spacing:.01em}
h1{font-size:clamp(44px,7.5vw,86px)}
h2{font-size:clamp(32px,4.5vw,48px)}
h3{font-size:24px}
p{margin:0 0 1em}
code{font:15px/1 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--wash);padding:2px 6px;border-radius:6px}
.muted{color:var(--bark)}
.small{font-size:16px}
.kicker{font-family:var(--display);font-size:17px;letter-spacing:.08em;text-transform:uppercase;color:var(--honey);text-shadow:0 2px 0 var(--walnut);margin:0 0 14px}
.kicker.ok{color:var(--leaf)}

/* on the blue ground, type is white with a walnut outline */
.hero h1,.hero .lead,.hero .muted,.cta h2,.top .brand span,.nav{color:#fff}
.hero h1,.cta h2{text-shadow:var(--outline)}
.hero .lead,.hero .muted{text-shadow:0 2px 0 rgba(59,36,22,.45)}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;max-width:var(--w);width:100%;margin:0 auto;padding:18px var(--pad)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:44px;height:44px;border-radius:12px;box-shadow:0 0 0 3px var(--paper),0 4px 0 3px var(--walnut)}
.brand span{font:400 24px/1 var(--display);text-shadow:var(--outline)}
.top nav{display:flex;gap:6px;flex-wrap:wrap}
.nav{font:400 17px/1 var(--display);letter-spacing:.04em;text-decoration:none;padding:10px 14px;border-radius:12px;text-shadow:0 2px 0 var(--walnut)}
.nav:hover{background:rgba(255,255,255,.18)}
.nav.here{background:var(--paper);color:var(--walnut);text-shadow:none;box-shadow:0 4px 0 var(--walnut)}

main{flex:1;width:100%;overflow-x:clip}
section{max-width:var(--w);margin:0 auto;padding:36px var(--pad)}
section>.kicker{display:inline-block}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:40px;align-items:center;padding-top:36px}
.hero h1{margin:0 0 20px}
.lead{font-size:clamp(19px,2vw,22px);max-width:32em}
.hero-art{position:relative;min-width:0;height:min(440px,90vw);max-width:460px;justify-self:center;width:100%}
.pet{position:absolute;width:52%;border-radius:28px;overflow:hidden;border:6px solid var(--paper);box-shadow:0 8px 0 var(--walnut),0 24px 40px rgba(20,40,90,.35);background:var(--paper)}
.pet img{width:100%;aspect-ratio:320/384;object-fit:cover}
.pet.p1{left:0;top:18%;transform:rotate(-7deg)}
.pet.p2{left:24%;top:0;z-index:2}
.pet.p3{right:0;top:22%;transform:rotate(6deg)}

/* store buttons */
.stores{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 12px}
.store{display:inline-flex;flex-direction:column;justify-content:center;min-width:184px;min-height:60px;padding:8px 20px;border-radius:16px;background:var(--leaf);color:#fff;line-height:1;text-decoration:none;box-shadow:0 5px 0 var(--leaf-deep),0 5px 0 2px var(--walnut);border:2px solid var(--walnut);transition:transform .16s cubic-bezier(.34,1.56,.64,1)}
.store:hover{transform:translateY(-2px)}
.store:active{transform:translateY(3px);box-shadow:0 2px 0 var(--leaf-deep),0 2px 0 2px var(--walnut)}
.store-k{font:600 13px/1 var(--text);margin-bottom:5px}
.store-n{font:400 23px/1 var(--display);letter-spacing:.02em;text-shadow:0 2px 0 var(--leaf-deep)}
.store.soon{background:var(--paper);color:var(--bark);box-shadow:0 5px 0 var(--line),0 5px 0 2px var(--walnut)}
.store.soon .store-n{text-shadow:none;color:var(--walnut)}
.store.soon:hover{transform:none}

/* white cards on the ground */
.pet-card,.steps li,.mode,.card,.prose{background:var(--paper);border:3px solid var(--walnut);border-radius:24px;box-shadow:0 6px 0 var(--walnut)}

/* pets */
.pet-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.pet-card{overflow:hidden}
.pet-card img{width:100%;aspect-ratio:320/300;object-fit:cover;object-position:center 30%;border-bottom:3px solid var(--walnut)}
.pet-card h3{margin:16px 20px 6px}
.pet-card p{margin:0 20px 20px;color:var(--bark)}

/* how it plays */
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.steps li{counter-increment:s;padding:24px}
.steps li::before{content:counter(s);display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--honey);border:3px solid var(--walnut);font:400 26px/1 var(--display);color:#fff;text-shadow:0 2px 0 var(--honey-deep);margin-bottom:14px}
.steps h3{margin-bottom:8px}
.steps p{margin:0;color:var(--bark)}

/* modes */
.mode-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.mode{padding:22px}
.mode h3{margin-bottom:8px}
.mode p{margin:0;color:var(--bark)}

.cta{text-align:center;padding-top:56px;padding-bottom:72px}
.cta h2{margin-bottom:8px}
.cta .stores{justify-content:center}

/* prose pages */
.prose{max-width:48em;margin:16px auto 64px;padding:clamp(22px,4vw,48px)}
.prose .kicker{text-shadow:none;color:var(--honey-deep)}
.prose h1{font-size:clamp(36px,6vw,60px);margin-bottom:12px}
.prose h2{font-size:30px;margin:36px 0 12px}
.prose h3{font-size:21px;margin:24px 0 6px}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1em}
.prose li{margin:0 0 .5em}
.prose table{border-collapse:collapse;width:100%;font-size:16px;margin:0 0 1.5em;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:2px solid var(--line)}
.prose th{font:400 15px/1.2 var(--display);letter-spacing:.06em;color:var(--bark)}
.prose td:first-child{font-weight:700;white-space:nowrap}

/* support form */
.prose .card{box-shadow:0 4px 0 var(--walnut);background:var(--wash);padding:22px;margin:8px 0 32px}
.card form{display:flex;flex-direction:column;gap:16px}
.card label{display:flex;flex-direction:column;gap:6px;font-weight:700}
.card label em{font-style:normal;font-weight:500;color:var(--bark)}
.card input,.card textarea{font:inherit;font-weight:500;color:var(--walnut);background:var(--paper);border:2px solid var(--walnut);border-radius:12px;padding:12px 14px}
.card input:focus,.card textarea:focus{outline:3px solid var(--ground-mid);outline-offset:1px}
.card textarea{resize:vertical;min-height:140px}
.card button{align-self:flex-start;font:400 20px/1 var(--display);letter-spacing:.03em;color:#fff;text-shadow:0 2px 0 var(--leaf-deep);background:var(--leaf);border:2px solid var(--walnut);border-radius:14px;padding:16px 30px;cursor:pointer;box-shadow:0 5px 0 var(--leaf-deep),0 5px 0 2px var(--walnut);transition:transform .16s cubic-bezier(.34,1.56,.64,1)}
.card button:active{transform:translateY(3px)}
.card .htmx-request button{opacity:.6;pointer-events:none}
.error{color:var(--berry);font-weight:700;margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* footer */
.foot{margin-top:auto;background:var(--walnut);color:#F3E7DC}
.foot-in{max-width:var(--w);margin:0 auto;padding:28px var(--pad)}
.foot-in p{margin:0 0 6px;font-size:15px}
.foot .muted,.foot a{color:#CDB8A6}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:24px}
  .hero-art{height:min(380px,86vw)}
  .steps,.pet-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .steps,.pet-grid,.mode-grid{grid-template-columns:minmax(0,1fr)}
  .hero-art{width:86%;height:min(330px,80vw)}
  .pet-grid{gap:16px}
  .pet-card{display:grid;grid-template-columns:116px minmax(0,1fr);align-items:center}
  .pet-card img{grid-row:span 2;height:100%;aspect-ratio:auto;border-bottom:0;border-right:3px solid var(--walnut)}
  .pet-card h3{margin:14px 16px 4px;align-self:end}
  .pet-card p{margin:0 16px 14px;align-self:start;font-size:16px;line-height:1.4}
  .store-n{font-size:20px}
  .prose thead{display:none}
  .prose tr{display:block;padding:12px 0;border-bottom:2px solid var(--line)}
  .prose td{display:block;border:0;padding:2px 0}
  .prose td:first-child{white-space:normal;font-family:var(--display);font-weight:400;font-size:18px}
  .prose td:last-child{color:var(--bark)}
  .store{flex:1 1 160px;min-width:0}
}
@media (prefers-reduced-motion:reduce){
  .store,.card button{transition:none}
}