/* Garage Door S'mores: one stylesheet for every page.
   Two layers. First the S'mores brand layer: the color tokens and fonts below (the badge is in assets/brand/, the drawings in assets/).
   Then the theme, ported with its class names kept (CLAUDE.md says from where), so a later change to that theme
   ports over rule for rule: each of its colors is a token here. Last, the S'mores additions, marked as such.
   Change a color in the tokens and it changes everywhere. */
/* ---- brand layer: S'mores tokens ---- */
:root{
  /* the four brand colors (exact values from the plan) */
  --graham:#B07A47;          /* graham cracker brown */
  --chocolate:#4A2C20;       /* header bars, hero, footer, headings */
  --marshmallow:#FFF8EE;     /* page background, cards */
  --toast:#E2823A;           /* toasted-orange accent: buttons, dots, rules */
  /* shades made from them, for text that has to stay readable (4.5:1 or better) */
  --graham-dark:#7E5530;     /* links and small labels on light colors */
  --ink:#24140D;             /* body text; text on toast and on graham */
  --text:#5A3B2C;            /* paragraph text */
  --text-soft:#654636;
  --cream:#F6E8D6;           /* tinted bands */
  --line:#E8D3BC;            /* card borders */
  --toast-pale:#F9DCC4;
  --toast-dark:#9C4F17;      /* toast-colored text on light colors */
  --toast-light:#F2A866;     /* toast-colored text on chocolate */
  --on-toast:var(--ink);     /* text on a toast background */
  --on-dark:#F6E2CB;         /* text on chocolate */
  --on-dark-soft:#DDBF9E;
  --paper:#FDF0D8;           /* the cream paper the character plates sit on (canon/STYLEGUIDE.md) */
}
@font-face{font-family:Gold;font-weight:700;font-display:swap;src:url(/fonts/Gold-Bold.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:400;font-display:swap;src:url(/fonts/Barlow-400.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:600;font-display:swap;src:url(/fonts/Barlow-600.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:700;font-display:swap;src:url(/fonts/Barlow-700.woff2) format("woff2")}
@font-face{font-family:Barlow-fallback;font-weight:400;font-display:swap;src:local(Arial),local(ArialMT);size-adjust:96.22%;ascent-override:103.93%;descent-override:20.79%;line-gap-override:0%}
@font-face{font-family:Barlow-fallback;font-weight:600;font-display:swap;src:local(Arial Bold),local(Arial-BoldMT);size-adjust:91.53%;ascent-override:109.25%;descent-override:21.85%;line-gap-override:0%}
@font-face{font-family:Barlow-fallback;font-weight:700;font-display:swap;src:local(Arial Bold),local(Arial-BoldMT);size-adjust:89.59%;ascent-override:111.62%;descent-override:22.32%;line-gap-override:0%}
@font-face{font-family:Gold-fallback;font-weight:700;font-display:swap;src:local(Arial Bold),local(Arial-BoldMT);size-adjust:115.77%;ascent-override:82.58%;descent-override:21.08%;line-gap-override:0%}
/* ---- theme: ported, class names kept ---- */
[id]{scroll-margin-top:190px}
body{margin:0;background:var(--marshmallow);color:var(--ink);font-family:Barlow,Barlow-fallback,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--graham-dark);text-decoration:none}a:hover{color:var(--chocolate);text-decoration:underline}
*{box-sizing:border-box}
.wrap{max-width:1240px;margin:0 auto}
.topbar{background:var(--chocolate);color:var(--marshmallow);font-size:14px;font-weight:600}
.topbar .in{max-width:1280px;margin:0 auto;padding:9px 24px;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between}
.topbar a{color:var(--marshmallow)}
.topbar .tlinks{display:flex;gap:22px;align-items:center}
.topbar .tcall{display:flex;gap:10px;align-items:center}
@media (max-width:899px){details.menu .panel{max-height:calc(100vh - 160px);max-height:calc(100dvh - 160px);overflow-y:auto}}
.dot{width:8px;height:8px;border-radius:50%;background:var(--toast);box-shadow:0 0 0 4px rgba(226,130,58,.25);display:inline-block}
.site-header{position:sticky;top:0;z-index:30}
header.bar{position:relative;background:var(--marshmallow);box-shadow:0 1px 0 rgba(74,44,32,.08),0 8px 24px -16px rgba(74,44,32,.3)}
header.bar .in{max-width:1280px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:20px}
.logo{display:block;flex:none;position:relative;z-index:50;height:76px;width:124px}
.logo img{position:absolute;left:0;top:-14px;width:124px;height:124px;display:block;filter:drop-shadow(0 8px 14px rgba(74,44,32,.3))}
nav.main{display:flex;gap:4px;flex:1;font-weight:600;font-size:15.5px;white-space:nowrap}
nav.main .item{position:relative}
nav.main .item>a{display:flex;align-items:center;gap:5px;padding:10px 8px;border-radius:10px;color:var(--chocolate)}
nav.main .item>a span{font-size:10px;color:var(--graham-dark)}
nav.main .item:hover>a,nav.main .item:focus-within>a,nav.main .item.on>a{background:var(--cream);text-decoration:none}
nav.main .drop{display:none;position:absolute;left:0;top:100%;z-index:40;padding-top:8px}
nav.main .item:hover .drop,nav.main .item:focus-within .drop{display:block}
nav.main .drop div{min-width:240px;background:var(--marshmallow);border-radius:16px;padding:10px;box-shadow:0 24px 50px -18px rgba(74,44,32,.45);border:1px solid var(--line);display:flex;flex-direction:column}
nav.main .drop a{padding:10px 12px;border-radius:10px;color:var(--chocolate);font-weight:600;font-size:15px}
nav.main .drop a:hover{background:var(--cream);text-decoration:none}
details.menu{display:none;flex:1}
details.menu summary{display:inline-flex;align-items:center;gap:10px;font:700 15px Barlow,Barlow-fallback,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--chocolate);background:var(--cream);border-radius:999px;padding:12px 18px;cursor:pointer;list-style:none}
details.menu summary::-webkit-details-marker{display:none}
details.menu:not([open]) .panel{display:none}
details.menu .panel{position:absolute;left:0;right:0;top:100%;z-index:40;background:var(--marshmallow);box-shadow:0 30px 50px -20px rgba(74,44,32,.45);border-top:1px solid var(--line);padding:28px 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px}
details.menu .panel div{display:flex;flex-direction:column;gap:4px}
details.menu .panel .head{font-family:Gold,Gold-fallback;font-weight:700;font-size:16px;color:var(--chocolate);padding:6px 0;border-bottom:3px solid var(--toast);margin-bottom:4px}
details.menu .panel a{font-weight:600;font-size:15px;color:var(--text);padding:5px 0}
.hcta{display:flex;gap:12px;align-items:center;flex:none}
.btn{display:inline-block;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;text-decoration:none;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn-cyan{background:var(--toast);color:var(--on-toast);font-size:15px;padding:13px 22px;border:2px solid var(--marshmallow);box-shadow:0 0 0 2px var(--toast)}
.btn-cyan:hover{background:var(--chocolate);color:var(--marshmallow);box-shadow:0 0 0 2px var(--chocolate)}
.btn-white{background:var(--marshmallow);color:var(--chocolate);font-size:16px;padding:16px 28px}
.btn-white:hover{background:var(--toast-pale);color:var(--chocolate)}
/* Three menu items fit beside the full name and Say hello down to ~820px (measured); the theme's 1359px suited a long menu */
@media (max-width:899px){nav.main{display:none}details.menu{display:block}}
@media (max-width:1023px){.topbar .in{padding:9px 16px;column-gap:16px}.topbar .tlinks{gap:14px}}
@media (max-width:639px){header.bar .in{gap:10px;padding:10px 16px}details.menu summary{padding:10px 14px;font-size:14px}.btn-cyan{padding:10px 14px;font-size:13px}}
@media (max-width:479px){.topbar{font-size:13px}.topbar .in{padding:9px 16px}.topbar .tlinks{gap:14px}.topbar a,details.menu summary{white-space:nowrap}header.bar .in{gap:8px;padding:10px 12px}details.menu summary{gap:6px;padding:11px;font-size:13px;letter-spacing:.03em}.btn-cyan{padding:11px;font-size:12px}}
@media (max-width:359px){header.bar .in{padding:10px}.logo{width:100px;height:66px}.logo img{width:100px;height:100px;top:-12px}}
.hero{position:relative;background:var(--chocolate);color:var(--marshmallow);overflow:hidden}
.hero .arc{position:absolute;left:-120px;top:-40px;width:760px;opacity:.4;pointer-events:none}
.hero .in{position:relative;max-width:1280px;margin:0 auto;padding:60px 24px 84px;display:flex;flex-direction:column;gap:20px}
.crumbs{display:flex;gap:8px;font-size:14px;font-weight:600;color:var(--on-dark-soft);flex-wrap:wrap}.crumbs a{color:var(--on-dark-soft)}.crumbs b{color:var(--marshmallow);font-weight:600}
.hero h1{margin:0;max-width:820px;font-family:Gold,Gold-fallback;font-weight:700;font-size:clamp(38px,5vw,64px);line-height:1.02;text-wrap:balance;overflow-wrap:anywhere}
@media (max-width:639px){.hero h1{font-size:clamp(28px,9vw,38px)}}
.hero p{margin:0;max-width:680px;font-size:19px;line-height:1.55;color:var(--on-dark);text-wrap:pretty}
.hero p a{color:var(--marshmallow);text-decoration:underline;text-underline-offset:3px}.hero p a:hover{color:var(--toast-light)}
.badges{display:flex;flex-wrap:wrap;gap:10px}
.badges span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:8px 16px;font-size:14.5px;font-weight:600}
.ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn-book{background:var(--toast);color:var(--on-toast);font-size:16px;padding:16px 28px;border:3px solid var(--chocolate);box-shadow:0 0 0 3px var(--toast)}
.btn-book:hover{background:var(--marshmallow);color:var(--chocolate);box-shadow:0 0 0 3px var(--marshmallow)}
section.band{padding:72px 24px}
section.tint{background:var(--cream)}
.eyebrow{font-weight:700;font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:var(--graham-dark)}
h2{margin:6px 0 14px;font-family:Gold,Gold-fallback;font-weight:700;font-size:clamp(28px,3.2vw,42px);line-height:1.1;color:var(--chocolate)}
h3{margin:0;font-family:Gold,Gold-fallback;font-weight:700;font-size:18px;color:var(--chocolate)}
.lead{margin:0 0 14px;font-size:19px;line-height:1.55;color:var(--ink);font-weight:600;max-width:820px}
.copy{margin:0 0 14px;font-size:17px;line-height:1.6;color:var(--text);max-width:820px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px;margin-top:22px}
.card{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border-radius:18px;background:var(--marshmallow);border:1px solid var(--line);color:var(--text);font-size:15.5px;line-height:1.5}
a.card:hover{background:var(--chocolate);color:var(--marshmallow);text-decoration:none}a.card:hover h3{color:var(--marshmallow)}a.card:hover .eyebrow{color:var(--graham)}
.places{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;margin-top:22px}
.place{border-radius:20px;padding:22px 24px;background:var(--cream);border:1px solid var(--line);display:flex;flex-direction:column;gap:6px;font-size:16px;line-height:1.5;color:var(--text)}
.place .big{font-family:Gold,Gold-fallback;font-weight:700;font-size:22px;color:var(--chocolate)}
.faq{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq details{border-radius:18px;background:var(--marshmallow);border:1px solid var(--line);overflow:hidden}
.faq details[open]{background:var(--cream)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;padding:20px 24px;font:700 18px Barlow,Barlow-fallback,sans-serif;color:var(--chocolate);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:32px;height:32px;border-radius:50%;background:var(--toast);color:var(--on-toast);display:grid;place-items:center;font-size:20px;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin:0;padding:0 24px 22px;font-size:16.5px;line-height:1.6;color:var(--text)}
.cta{position:relative;background:var(--toast);overflow:hidden}
.cta .arc{position:absolute;right:-160px;top:-60px;width:820px;opacity:.35;pointer-events:none}
.cta .in{position:relative;max-width:1280px;margin:0 auto;padding:64px 24px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:40px;align-items:end}
.cta .who{display:flex;gap:8px;align-items:flex-end}
.cta .who>img,.cast{width:min(40%,250px);display:block;flex:none;margin-bottom:-4px}
.cta .who div{display:flex;flex-direction:column;gap:16px;padding-bottom:64px;color:var(--on-toast)}
.cta h2{margin:0;color:var(--on-toast);font-size:clamp(30px,3.6vw,48px);line-height:1.05;text-wrap:balance}
.cta .who p{margin:0;font-size:21px;font-weight:600}
.cta .box{background:var(--marshmallow);border-radius:24px 24px 0 0;padding:32px 32px 38px;box-shadow:0 -10px 40px -20px rgba(74,44,32,.5);display:flex;flex-direction:column;gap:12px}
.cta .box p{margin:0;font-size:17px;line-height:1.55;color:var(--text-soft)}
.cta .box .eyebrow{font-size:14px;letter-spacing:.2em}
.cta .box .go{margin-top:6px;text-align:center;background:var(--toast);color:var(--on-toast);font-weight:700;font-size:17px;letter-spacing:.08em;text-transform:uppercase;padding:16px;border-radius:999px;border:3px solid var(--marshmallow);box-shadow:0 0 0 3px var(--toast)}
.cta .box .go:hover{background:var(--chocolate);color:var(--marshmallow);box-shadow:0 0 0 3px var(--chocolate);text-decoration:none}
footer.site{position:relative;background:var(--chocolate);color:var(--marshmallow);overflow:hidden}
footer.site .arc{position:absolute;left:-200px;bottom:-120px;width:900px;opacity:.25;pointer-events:none}
footer.site .cols{position:relative;max-width:1280px;margin:0 auto;padding:64px 24px 32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px}
footer.site .col{display:flex;flex-direction:column;gap:12px}
footer.site h3{margin:0 0 4px;font-family:Gold,Gold-fallback;font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--toast-light)}
footer.site h3.gap{margin-top:18px}
footer.site .col a{color:var(--marshmallow);font-size:16px}
footer.site .mid{align-items:center;text-align:center;gap:18px;grid-column:span 2}
footer.site .mid img{width:170px;height:auto;display:block}
footer.site .mid p{margin:0;max-width:440px;font-size:16px;line-height:1.55;color:var(--on-dark)}
footer.site .mid .row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
footer.site .mid .sched{background:var(--toast);color:var(--on-toast);font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;padding:13px 26px;border-radius:999px;border:2px solid var(--chocolate);box-shadow:0 0 0 2px var(--toast)}
footer.site .mid .ph{background:var(--marshmallow);color:var(--chocolate);font-weight:700;font-size:15px;letter-spacing:.06em;padding:13px 26px;border-radius:999px;border:2px solid var(--chocolate);box-shadow:0 0 0 2px var(--marshmallow)}
footer.site .room{display:flex;flex-direction:column;gap:4px}
footer.site .room b{font-family:Gold,Gold-fallback;font-weight:700;font-size:16px;text-transform:uppercase}
footer.site .room span,footer.site .hours{font-size:15.5px;line-height:1.5;color:var(--on-dark)}
footer.site .legal{position:relative;border-top:1px solid rgba(255,255,255,.12);max-width:1280px;margin:0 auto;padding:20px 24px;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:14px;color:var(--on-dark-soft)}
footer.site .legal a{color:var(--on-dark-soft)}
@media (max-width:820px){footer.site .mid{grid-column:auto}}
section.band.flush{padding-top:0}
h2.faq-head{text-align:center}
h3.chips-head{margin-top:18px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.chips a,.chips span{border-radius:999px;padding:8px 16px;font-size:15px;font-weight:600;background:var(--marshmallow);border:1px solid var(--line);color:var(--chocolate)}
.chips a{background:var(--chocolate);color:var(--marshmallow);border-color:var(--chocolate)}
.chips a:hover{background:var(--toast);color:var(--on-toast);text-decoration:none}
.copy a:not(.btn),.lead a,.faq p a,.place a,.wrap>ul a,.wrap>ol a{color:var(--graham-dark);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}.copy a:not(.btn):hover,.lead a:hover,.faq p a:hover,.place a:hover,.wrap>ul a:hover,.wrap>ol a:hover{color:var(--chocolate)}
main :has(~ :target){overflow-anchor:none}
main :has(~ * :target){overflow-anchor:none}
nav.main .item[data-shut] .drop{display:none!important}
@media (prefers-reduced-motion:no-preference){html:not([data-jump]) .logo img{transition:top .2s,width .2s,height .2s}}
html[data-scrolled] .logo img{top:-10px;width:96px;height:96px}
@media (max-width:359px){html[data-scrolled] .logo img{width:86px;height:86px}}
@media (max-width:479px){html[data-scrolled] .site-header{top:-112px}
html[data-scrolled] header.bar .in{height:96px;padding-top:24px;padding-bottom:0}
html[data-scrolled] .logo{width:64px;height:64px}html[data-scrolled] .logo img{top:0;width:64px;height:64px}
}
@media (max-width:359px){html[data-scrolled] .site-header{top:-102px}html[data-scrolled] header.bar .in{height:86px;padding-top:14px}
html[data-scrolled] .logo{width:56px;height:56px}html[data-scrolled] .logo img{width:56px;height:56px}}
@media (max-width:639px){.topbar .in{padding-top:0;padding-bottom:0;row-gap:0}
.topbar .tlinks a{display:inline-flex;align-items:center;min-height:44px;position:relative;z-index:51}
details.menu summary{min-height:44px}.hcta .btn-cyan{display:inline-flex;align-items:center;min-height:44px}
details.menu .panel{max-height:calc(100vh - 190px);max-height:calc(100dvh - 190px)}html .hero.paired .in{padding-top:48px}html .hero.paired .words{gap:14px}
[id]{scroll-margin-top:220px}}
@media (max-width:479px) and (scripting:enabled){[id]{scroll-margin-top:92px}section.band:not(.flush)[id]{scroll-margin-top:20px}}
/* body-copy bands (from the inner pages' page styles) */
.band .wrap>h3{margin:22px 0 8px;font-size:20px}
.band ul,.band ol{margin:0 0 16px;padding-left:24px;font-size:17px;line-height:1.6;color:var(--text);max-width:820px}
.band li{margin-bottom:8px}.band li strong{color:var(--chocolate)}
/* hero with a picture on the right (service and About pages) */
.ghero{--gl:max(24px,calc(50% - 616px))}
.ghero .gphoto{position:absolute;top:0;right:0;width:calc(100% - var(--gl) - 360px);height:100%;object-fit:cover;display:block}
.ghero .gfade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--chocolate) calc(var(--gl) + 624px),rgba(74,44,32,0) calc(var(--gl) + 784px))}
.ghero .in>*{max-width:600px}
.ghero h1{font-size:clamp(34px,4.2vw,56px)}
/* a drawing made on chocolate needs no side fade once the words clear it (1200px and up); below that the fade keeps the words off the drawing */
@media (max-width:1023px){.ghero{--ph:clamp(170px,34vw,280px)}.ghero .gphoto{width:100%;height:var(--ph)}
.ghero .gfade{background:linear-gradient(180deg,rgba(74,44,32,0) calc(var(--ph) - 90px),var(--chocolate) var(--ph))}
.ghero .arc{display:none}.ghero .in{padding-top:calc(var(--ph) + 14px)}}
@media (max-width:639px){.ghero{--ph:120px}.ghero h1{font-size:32px}.ghero .gfade{background:linear-gradient(180deg,rgba(74,44,32,0) calc(var(--ph) - 44px),var(--chocolate) var(--ph))}
.ghero .in{padding-top:calc(var(--ph) + 8px);gap:10px}.ghero h1+p{font-size:16px;line-height:1.5}}
/* hero with a second column (home: buddy + words; Contact: words + form) */
.hero.paired .in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px 48px;align-items:center}
.hero.paired .words{display:flex;flex-direction:column;gap:20px;min-width:0}
.hero.paired.flip .in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.hero .script{font-family:Gold,Gold-fallback;font-weight:700;font-size:22px;color:var(--toast-light);transform:rotate(-3deg);transform-origin:left}
/* Seth 11-04: the home h2 sits directly below the h1 in the same display font and cream, about 78% of the h1's size */
.hero h2.subhead{margin:0;max-width:820px;font-family:Gold,Gold-fallback;font-weight:700;font-size:clamp(30px,3.9vw,50px);line-height:1.02;text-wrap:balance;color:var(--toast-light)}
@media (max-width:639px){.hero h2.subhead{font-size:clamp(22px,7vw,30px)}}
.hero .buddy{margin:0;display:grid;place-items:center}
.hero .buddy img{width:min(100%,380px);height:auto;display:block}
@media (max-width:1023px){.hero.paired .in,.hero.paired.flip .in{grid-template-columns:minmax(0,1fr)}.hero .buddy img{width:min(60vw,260px)}}
/* home: the "how can we help" card that sits over the hero's edge */
.help{position:relative;z-index:2;max-width:1120px;margin:-48px auto 0;background:var(--marshmallow);border-radius:24px;box-shadow:0 24px 60px -24px rgba(74,44,32,.45);padding:26px 28px;display:flex;flex-direction:column;gap:18px}
.help h2{margin:0;font-size:clamp(22px,2.4vw,28px)}
.help .picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}
.help .picks a{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--chocolate);color:var(--marshmallow);font-weight:700;font-size:16px;padding:16px 18px;border-radius:14px}
.help .picks a::after{content:"\2192";color:var(--toast-light)}
.help .picks a:hover{background:var(--toast);color:var(--on-toast);text-decoration:none}.help .picks a:hover::after{color:var(--on-toast)}
@media (max-width:639px){.help{margin:-32px 16px 0;padding:20px}}
.trust{max-width:1120px;margin:0 auto;padding:28px 24px 8px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.trust span{display:inline-flex;align-items:center;gap:8px;background:var(--marshmallow);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-weight:600;font-size:15px;color:var(--chocolate)}
.trust span::before{content:"\2713";display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--toast);color:var(--on-toast);font-size:12px}
.num{font-family:Gold,Gold-fallback;font-size:44px;color:var(--toast-dark);line-height:1}
/* ---- S'mores additions ---- */
/* contact form: it sends nothing */
.form{background:var(--marshmallow);color:var(--ink);border-radius:24px;padding:26px 28px;display:flex;flex-direction:column;gap:12px;box-shadow:0 24px 60px -24px rgba(0,0,0,.5)}
.form h2{margin:0;font-size:26px}
.form label{font-weight:700;font-size:15px;color:var(--chocolate)}
.form input,.form textarea{width:100%;font:500 16px Barlow,Barlow-fallback,sans-serif;color:var(--ink);padding:12px;border-radius:12px;border:1px solid var(--line);background:#fff}
.form textarea{min-height:110px;resize:vertical}
.form select{width:100%;font:500 16px Barlow,Barlow-fallback,sans-serif;color:var(--ink);padding:12px;border-radius:12px;border:1px solid var(--line);background:#fff}
.form .check{display:flex;gap:10px;align-items:flex-start}
.form .check input{width:auto;margin-top:3px}
.form .check label{font-weight:600}
.form p{margin:0}
.form button{align-self:flex-start;font:700 15px Barlow,Barlow-fallback,sans-serif;letter-spacing:.06em;text-transform:uppercase;background:var(--toast);color:var(--on-toast);border:3px solid var(--marshmallow);box-shadow:0 0 0 3px var(--toast);border-radius:999px;padding:14px 24px;cursor:pointer}
.form button:hover{background:var(--chocolate);color:var(--marshmallow);box-shadow:0 0 0 3px var(--chocolate)}
.form .sent{margin:0;font-weight:700;color:var(--graham-dark);min-height:1.4em}
/* the ribbon across the top of every page; it sits above the header, so it never covers any words */
.ribbon{background:var(--toast);color:var(--on-toast);text-align:center;font:700 12px/1 Barlow,Barlow-fallback,sans-serif;letter-spacing:.06em;padding:6px 12px}
.drawing{margin:22px 0 0}.drawing img{display:block;width:100%;max-width:880px;height:auto;border-radius:18px}
/* a team favorite's note, in its person's words */
.note{margin:0;max-width:820px;border-left:4px solid var(--toast);padding:4px 0 4px 22px}
.note .by{margin:0;font-weight:700;letter-spacing:.04em;color:var(--graham-dark)}
/* the cast and who-it's-for pages (#4) */
.profile{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:36px;align-items:center}
.portrait{margin:0}.portrait img,.card .thumb{display:block;width:100%;height:auto;border-radius:18px;border:1px solid var(--line);background:var(--marshmallow)}
.card .thumb{border-radius:12px;margin-bottom:6px}.profile .note{margin-bottom:22px}
.chips + h2{margin-top:30px}
@media (max-width:639px){.profile{grid-template-columns:1fr;gap:22px}.portrait{max-width:300px}}
/* a recipe's optional video */
.clip{display:block;width:100%;max-width:880px;border-radius:18px;background:var(--chocolate)}
.voice{display:block;width:100%;max-width:620px;margin:6px 0 10px}
.card .listen{margin-top:4px;font-weight:700;font-size:14px;color:var(--graham-dark)}a.card:hover .listen{color:var(--graham)}
/* brand: the flat badge beside the site name set in type, in place of the theme's hanging logo */
.logo{display:flex;align-items:center;gap:12px;width:auto;height:auto;color:var(--chocolate)}
.logo:hover{color:var(--chocolate);text-decoration:none}
.logo img{position:static;width:80px;height:80px;filter:drop-shadow(0 4px 8px rgba(74,44,32,.25))}
.logo .name{font-family:Gold,Gold-fallback;font-weight:700;font-size:26px;line-height:1;white-space:nowrap}
html[data-scrolled] .logo img{top:auto;width:56px;height:56px}
@media (max-width:639px){.logo{gap:8px}.logo img{width:56px;height:56px}.logo .name{font-size:17px;line-height:1.05;white-space:normal;max-width:6.2em}}
@media (max-width:479px){html[data-scrolled] .logo{width:auto;height:auto}html[data-scrolled] .logo img{width:44px;height:44px}
html[data-scrolled] header.bar .in{height:auto;padding-top:10px;padding-bottom:10px}
html[data-scrolled] .site-header{top:-44px}}
@media (max-width:359px){.logo{width:auto;height:auto}.logo img{width:44px;height:44px}.logo .name{font-size:15px}
html[data-scrolled] .logo{width:auto;height:auto}html[data-scrolled] .logo img{width:40px;height:40px}
html[data-scrolled] .site-header{top:-44px}html[data-scrolled] header.bar .in{height:auto;padding-top:10px}}
/* the home badge's moving parts (templates/badge-fx.html), laid over the badge: the painted flames lick (.lick, a
   cut-out under an SVG filter that badge.js steps), the glow and embers flicker, and the spring
   twirls on hover or tap and turns from the top of the page until the badge leaves the screen (--spin, 0 to 1;
   --bb, the badge's bottom on the page, is set by badge.js). Measured on the 800px badge, in its units */
@property --spin{syntax:"<number>";inherits:true;initial-value:0}
.hero .buddy>*{grid-area:1/1}
.fx{position:relative;width:min(100%,380px);aspect-ratio:1;pointer-events:none}
@media (max-width:1023px){.fx{width:min(60vw,260px)}}
.fx svg{position:absolute;inset:0;width:100%;height:100%}
.fire{mix-blend-mode:screen;opacity:.75;animation:fl 2.3s ease-in-out infinite alternate}
.fx .lick{transform-origin:58.4% 62.5%;animation:lk 1.7s ease-in-out infinite alternate}
.glow{transform-box:fill-box;transform-origin:50% 50%;animation:fg 1.9s ease-in-out infinite alternate}
.fire circle{opacity:0;animation:fe 3.1s ease-out infinite}
.fire .e2{animation-duration:3.7s;animation-delay:-1.3s}
.fire .e3{animation-duration:2.9s;animation-delay:-2.1s}
.fire .e4{animation-duration:4.3s;animation-delay:-.7s}
@keyframes fl{to{filter:brightness(1.18)}}
@keyframes lk{50%{transform:scale(1.01,1.035);filter:brightness(1.1)}to{transform:scale(.995,.985);filter:brightness(.96)}}
@keyframes fg{from{opacity:.65;transform:scale(.95)}to{opacity:1;transform:scale(1.04)}}
@keyframes fe{15%{opacity:1}to{opacity:0;transform:translate(14px,-130px)}}
.coil{mix-blend-mode:overlay}
.cs{transform:translateX(calc(var(--spin) * 126px))}
.fx .m{position:absolute;left:53.58%;top:18.41%;width:26.76%;--s:sin(var(--spin) * 37.7);transform-origin:50% 47%;
 transform:rotate(-28deg) scaleY(calc(1 + .07 * var(--s) * var(--s))) rotate(28deg) rotate(calc(var(--s) * 1.5deg))}
.fx .m img{display:block;width:100%;height:auto;transform-origin:50% 47%}
.twirl .ct{animation:twirl 1.4s ease-in-out}
.twirl .m img{animation:mt .7s ease-in-out 2}
@keyframes twirl{to{transform:translateX(84px)}}
@keyframes mt{25%{transform:rotate(-28deg) scaleY(1.07) rotate(28deg) rotate(1.5deg);filter:brightness(1.08)}
 75%{transform:rotate(-28deg) scaleY(1.07) rotate(28deg) rotate(-1.5deg)}}
@keyframes sp{to{--spin:1}}
@supports (animation-timeline:scroll()){.fx{animation:sp linear both;animation-timeline:scroll(root);animation-range:0px var(--bb,75vh)}}
@media (prefers-reduced-motion:reduce){.fx{display:none}}
/* end of the badge's moving parts */
/* the About hero's painted night scene (templates/about-hero.html): the still and the flames share one 16:9 frame,
   cropped like a cover picture around the pit (--px, --py); the flames lick under badge.js's one loop, the glow pulses
   and the embers rise, only while the scene is on screen (.lick.on). Reduced motion: the still and the plain flames */
.ah{container-type:size;overflow:hidden}
.ah .af{position:absolute;width:max(100cqw,177.78cqh);aspect-ratio:16/9;left:calc((100cqw - max(100cqw,177.78cqh)) * var(--px));top:calc((100cqh - max(56.25cqw,100cqh)) * var(--py))}
.ah img,.ah svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ah .gl{transform-box:fill-box;transform-origin:50% 50%;mix-blend-mode:screen;animation:ag 3.4s ease-in-out infinite alternate}
.ah .em circle{opacity:0;animation:ae 4.2s ease-out infinite}
.ah .em circle:nth-child(2){animation-duration:4.9s;animation-delay:-1.7s}
.ah .em circle:nth-child(3){animation-duration:3.8s;animation-delay:-2.6s}
.ah .em circle:nth-child(4){animation-duration:5.3s;animation-delay:-.9s}
.ah .em circle:nth-child(5){animation-duration:4.5s;animation-delay:-3.4s}
.ah .lick:not(.on) *{animation-play-state:paused}
@keyframes ag{from{opacity:.6;transform:scale(.95)}to{opacity:1;transform:scale(1.05)}}
@keyframes ae{15%{opacity:1}to{opacity:0;transform:translate(14px,-200px)}}
@media (prefers-reduced-motion:reduce){.ah .em{display:none}.ah .gl{animation:none}.ah image{filter:none}}
/* its layout (.ahero, which build.py adds): the scene to the right of the words, its fade kept off the characters;
   below 1200px the whole scene, full width under the words */
.ahero .gphoto{left:calc(var(--gl) + 600px);width:auto}
.ahero .gfade{background:linear-gradient(90deg,var(--chocolate) calc(var(--gl) + 600px),rgba(74,44,32,0) calc(var(--gl) + 656px))}
@media (max-width:1199px){.ahero{display:flex;flex-direction:column}.ahero .gphoto{position:relative;order:1;left:0;width:100%;height:auto;aspect-ratio:16/9}
.ahero .gfade,.ahero .arc{display:none}.ahero .in{width:100%;padding:36px 24px 32px}}
/* end of the About hero */
/* the cast member in the "Hungry for more?" section (templates/cast-<slug>.html, which build.py puts there from a page's
   cast): the figure bobs, its free arm waves from the shoulder, and its lids blink when cast.js adds .blink. It moves
   only while cast.js marks it .live (on screen); reduced motion keeps it still. The shoulder and eyes are measured on
   the cut-out (scripts/cast_cutout.py) */
.cast{position:relative;aspect-ratio:286/320;margin:0 clamp(16px,3.2vw,40px) 8px 0}
.cast::after{content:"";position:absolute;left:24%;right:22%;bottom:-3%;height:6%;border-radius:50%;background:rgba(74,44,32,.3);animation:cs 2.6s ease-in-out infinite paused}
.cast .fig{position:absolute;inset:0;transform-origin:50% 100%;animation:cb 2.6s ease-in-out infinite paused}
.cast img,.cast svg{position:absolute;inset:0;width:100%;height:auto}
.cast .arm{transform-origin:86.3% 52%;animation:cw 6.5s ease-in-out infinite paused}
.cast .lid{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0)}
.cast.live::after,.cast.live .fig,.cast.live .arm{animation-play-state:running}
.cast.blink .lid{animation:ck .14s ease-in-out}
@keyframes cb{0%,100%{transform:scale(1.02,.98)}50%{transform:translateY(-4%) scale(.985,1.015)}}
@keyframes cs{50%{transform:scaleX(.82);opacity:.6}}
@keyframes cw{0%,55%,92%,100%{transform:none}63%,73%{transform:rotate(-118deg)}68%,78%{transform:rotate(-98deg)}84%{transform:rotate(-112deg)}}
@keyframes ck{50%{transform:none}}
@media (prefers-reduced-motion:reduce){.cast::after,.cast *{animation:none!important}}
/* end of the cast member */
/* the style guide (/style-guide/, built from canon/ by scripts/style_guide.py) */
.guide-hero .eyebrow{color:var(--toast-light)}
.guide-hero .src a,.guide-hero .src{color:var(--on-dark-soft);font-size:15px}
.toc{display:flex;flex-wrap:wrap;gap:8px}
.toc a{border-radius:999px;padding:8px 14px;font-weight:600;font-size:14.5px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:var(--marshmallow)}
.toc a:hover{background:var(--toast);color:var(--on-toast);text-decoration:none}
@media (max-width:639px){.toc{gap:6px}.toc a{padding:6px 10px;font-size:13px}}
.src{margin:0 0 18px;font-size:14px;color:var(--text-soft)}
.src a{color:var(--graham-dark);text-decoration:underline;text-underline-offset:3px}
.guide h3{margin:26px 0 10px;font-size:22px}
.guide h4{margin:20px 0 8px;font-family:Gold,Gold-fallback;font-size:17px;color:var(--chocolate)}
.guide h5{margin:16px 0 6px;font-size:15px;color:var(--chocolate);text-transform:uppercase;letter-spacing:.06em}
.guide code,.guide-hero code{font-size:.88em;background:var(--cream);border-radius:6px;padding:1px 5px;color:var(--ink);overflow-wrap:break-word}
.guide pre{margin:0 0 16px;max-width:880px;background:var(--chocolate);color:var(--on-dark);border-radius:14px;padding:16px 18px;overflow-x:auto;font-size:14px;line-height:1.5;white-space:pre-wrap}
.guide pre code{background:none;color:inherit;padding:0}
.tablewrap{max-width:100%;overflow-x:auto;margin:0 0 18px}
.guide table{border-collapse:collapse;min-width:min(100%,640px);font-size:15.5px;line-height:1.5;color:var(--text);background:var(--marshmallow);border-radius:14px;overflow:hidden}
.guide th,.guide td{text-align:left;vertical-align:top;padding:10px 14px;border-bottom:1px solid var(--line)}
.guide th{background:var(--chocolate);color:var(--marshmallow);font-weight:700}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:8px 0 22px}
.swatch{display:flex;flex-direction:column;gap:3px;font-size:14px;line-height:1.35;color:var(--text)}
.swatch .chip{display:block;height:64px;border-radius:12px;border:1px solid var(--line)}
.swatch b{color:var(--chocolate)}
.swatches.small .chip{height:40px}
.scale{margin:12px 0 0;max-width:620px}
.scale svg{width:100%;height:auto;display:block}
.scale line{stroke:var(--graham);stroke-width:2}
.scale text{font:600 13px Barlow,Barlow-fallback,sans-serif;fill:var(--chocolate);text-anchor:middle}
.scale .c{fill:var(--chocolate)}.scale .s{fill:var(--text-soft)}.scale .m{fill:var(--graham)}.scale .f{fill:var(--toast)}
.scale figcaption{font-size:14px;color:var(--text-soft)}
.dodont{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;align-items:start}
.onmodel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.onmodel h3{grid-column:1/-1;margin-top:0}
@media (max-width:899px){.dodont{grid-template-columns:minmax(0,1fr)}}
.card-plate{margin:0;background:var(--paper);border-radius:18px;padding:10px;box-shadow:0 10px 24px -18px rgba(74,44,32,.5)}
.card-plate img{display:block;width:100%;height:auto;border-radius:10px}
.card-plate figcaption{font-size:14px;line-height:1.4;color:var(--text);padding:8px 4px 2px}
.card-plate figcaption span{display:block;font-weight:700;color:var(--graham-dark)}
.plates{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:14px;margin:8px 0 18px}
@media (max-width:599px){.plates{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.dossier{border-top:3px solid var(--toast);padding-top:18px;margin-top:34px}
.dossier>h3,.dossier .who-is h3{margin-top:0;font-size:28px}
.who-is{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:719px){.who-is{grid-template-columns:minmax(0,1fr)}.who-is .card-plate{max-width:280px}}
.thumbs{display:flex;flex-wrap:wrap;gap:12px;margin:6px 0 10px}
.thumbs figure{margin:0;width:120px;background:var(--paper);border-radius:12px;padding:6px;text-align:center;font-size:13.5px;font-weight:600;color:var(--chocolate)}
.thumbs img{display:block;width:100%;height:auto;border-radius:8px;margin-bottom:4px}
.todo{font-size:15px;color:var(--text-soft)}
.voice{margin:18px 0 0;background:var(--cream);border-radius:18px;padding:16px 20px;max-width:820px}
.voice h4{margin-top:0}.voice .line{margin:0 0 10px;font-size:18px;font-weight:600;color:var(--ink)}
.voice audio{width:100%;max-width:420px;display:block}
.voice .settings{margin:10px 0 0;font-size:14px;color:var(--text-soft)}
.badges-two{display:flex;flex-wrap:wrap;gap:20px;margin:6px 0 18px}
.badges-two figure{margin:0;text-align:center;font-weight:700;color:var(--chocolate)}
.badges-two img{display:block;width:min(240px,40vw);height:auto}
.specimen{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:baseline;color:var(--chocolate)}
.specimen .gold{font:700 34px Gold,Gold-fallback}.specimen .barlow{font:400 20px Barlow,Barlow-fallback,sans-serif}
.specimen .b6{font-weight:600}.specimen .b7{font-weight:700}
.back{margin:24px 0 0;font-size:14.5px;font-weight:600}.back a{color:var(--graham-dark);text-decoration:underline;text-underline-offset:3px}
.blocks .copy{margin:12px 0 6px}
.guide-foot{padding-top:24px;padding-bottom:24px}.guide-foot .src{margin:0;text-align:center}
/* the world map (/map/, garage-door-smores#36; build.py writes it, map.js opens its card): a painted map with the pins
   on it, and the list of every recipe beside it (below it under 900px). Reduced motion keeps the pins still */
.maplink{margin:0 0 22px}
.mapwrap{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:32px;align-items:start}
@media (max-width:899px){.mapwrap{grid-template-columns:minmax(0,1fr)}}
.mapfig{position:relative;min-width:0}
.map-surprise{margin:0 0 14px;cursor:pointer;font-family:inherit}.map-surprise[hidden]{display:none}
.worldmap{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 18px 40px -26px rgba(74,44,32,.6)}
.worldmap .sea{fill:var(--cream)}
.worldmap .grat{fill:none;stroke:var(--line);stroke-width:.08;stroke-dasharray:.2 .4}
.worldmap .land{fill:var(--toast-pale);stroke:var(--graham);stroke-width:.11;stroke-linejoin:round}
.worldmap .hit{fill:transparent}
.worldmap .ring{fill:none;stroke:var(--toast);stroke-width:3;opacity:0}
.worldmap .pin{cursor:pointer;outline:none}
.worldmap .bob{transform:scale(var(--pin,1));transform-origin:0 0}
.worldmap .pin:hover .ring,.worldmap .pin:focus-visible .ring,.worldmap .pin.on .ring{opacity:1}
.worldmap .pin:focus-visible .ring{stroke:var(--chocolate);stroke-width:3.5}
.worldmap .pin.on .bob{animation:mapbob .6s ease-out}
@keyframes mapbob{40%{transform:scale(var(--pin,1)) translateY(-8px)}}
@media (max-width:699px){.worldmap{--pin:1.7}}
.mapcard{position:absolute;z-index:5;width:250px;background:var(--marshmallow);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;box-shadow:0 24px 50px -18px rgba(74,44,32,.55)}
.mapcard[hidden]{display:none}
.mapcard img{display:block;width:100%;height:150px;object-fit:cover;background:var(--cream)}
.mapcard>div{padding:12px 16px 16px;display:flex;flex-direction:column;gap:4px}
.mapcard .eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--toast-dark)}
.mapcard h3{margin:0 0 4px;font-family:Gold,Gold-fallback,serif;color:var(--chocolate);font-size:20px}
.mapcard a{font-weight:700}
.mapcard a[hidden]{display:none}
.mapcard a:focus-visible,.maplist a:focus-visible{outline:3px solid var(--toast);outline-offset:2px;border-radius:4px}
@media (max-width:699px){.mapcard{position:static;width:auto;margin-top:14px;display:flex}.mapcard img{width:120px;height:auto;min-height:110px}}
.maplist h2{margin-top:0;font-size:clamp(24px,2.4vw,30px)}
.mapgroup{margin:0 0 18px;display:flex;flex-direction:column;gap:4px}
.mapgroup h3{margin:0 0 2px;font-size:15px;color:var(--chocolate)}
.mapgroup .placelink{font-size:14px;color:var(--toast-dark)}
@media (prefers-reduced-motion:reduce){.worldmap .pin.on .bob{animation:none}}
/* end of the world map */