/* Mamaku Street Food — site-specific styles. Loaded after base.css. */

/* Fonts declared here (latin only), both preloaded in <head>, display optional: no reflow, no CLS */
@font-face{font-family:"Josefin Sans";font-style:normal;font-weight:600 700;font-display:optional;src:url(https://fonts.gstatic.com/s/josefinsans/v34/Qw3aZQNVED7rKGKxtqIqX5EUDXx4.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 600;font-display:optional;src:url(https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4S9DQ.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

h1,h2,h3,h4{font-weight:700;letter-spacing:-.01em}
h2{font-size:clamp(1.8rem,1.4rem + 2vw,2.8rem)}
.btn{font-weight:600}

/* Header: the name in type (no logo file loads on the current site) */
.brand{gap:.45em;font-weight:700;font-size:1.3rem;letter-spacing:.005em}
.brand small{font-family:var(--font-body);font-weight:500;font-size:.8rem;color:var(--ink-3)}
.nav a{font-weight:500}
.nav a.btn{padding:.65em 1.1em}

/* Hero: leaf-green field, type only */
.hero.leaf{background:var(--leaf);color:var(--leaf-ink);padding-block:clamp(3rem,8vw,6.5rem) clamp(3rem,7vw,5.5rem)}
.hero.leaf h1{font-size:clamp(2.6rem,1.6rem + 4.4vw,5.4rem);line-height:1;max-width:24ch;margin-bottom:var(--s-5)}
.hero.leaf h1 span{display:block}
.hero.leaf .lede{color:color-mix(in srgb,var(--leaf-ink) 86%,transparent);max-width:46ch}
.hero.leaf .actions{margin-top:var(--s-6);gap:var(--s-3)}
.hero.leaf .btn-primary{box-shadow:none}
.btn-line{background:transparent;color:var(--leaf-ink);border-color:color-mix(in srgb,var(--leaf-ink) 55%,transparent)}
.btn-line:hover{border-color:var(--leaf-ink)}
.hero.leaf .when{margin-top:var(--s-6);padding-top:var(--s-4);border-top:2px solid var(--accent);max-width:46ch;font-size:var(--fs-sm);color:color-mix(in srgb,var(--leaf-ink) 86%,transparent)}
.hero.leaf .when strong{color:var(--leaf-ink);font-weight:600}

/* Story */
.story{display:grid;gap:var(--s-7);grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.story{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}}
.story figure{margin:0}
.story figure img{width:100%;height:auto;aspect-ratio:809/430;object-fit:cover;border-radius:var(--radius)}
.story figcaption{margin-top:var(--s-2);font-size:var(--fs-xs);color:var(--ink-3)}
.story .sbs{margin:var(--s-7) 0 0;padding-left:var(--s-5);border-left:3px solid var(--brand)}
.sbs blockquote{margin:0}
.sbs .pullquote{max-width:30ch}
.sbs figcaption{margin-top:var(--s-3);font-size:var(--fs-sm);color:var(--ink-2)}

/* The family table: who in the family loves what (their words from the current site) */
.family{background:var(--sage)}
.family-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.family-list li{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-2) var(--s-6);padding:var(--s-5) 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 25%,transparent)}
@media(min-width:760px){.family-list li{grid-template-columns:minmax(0,15rem) minmax(0,1fr);align-items:baseline}}
.family-list h3{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem);margin:0}
.family-list p{margin:0;font-size:var(--fs-lg);max-width:52ch}
.family-list p span{display:block;font-size:var(--fs-sm);color:var(--ink-2);margin-top:.35em}
.family .note{margin-top:var(--s-6);font-size:var(--fs-sm);color:var(--ink-2)}

/* Ways to eat with us */
.ways{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ways li{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3);padding:var(--s-5) 0;border-bottom:1px solid var(--line)}
@media(min-width:760px){.ways li{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s-6)}}
.ways h3{font-size:var(--fs-xl);margin:0 0 var(--s-2)}
.ways p{margin:0;color:var(--ink-2)}
.ways .btn{justify-self:start}
.small-print{margin-top:var(--s-5);font-size:var(--fs-sm);color:var(--ink-2)}

/* Visit */
.visit{display:grid;gap:var(--s-7);grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.visit{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}}
.visit address{font-style:normal;font-size:var(--fs-lg);line-height:1.5;margin-bottom:var(--s-4)}
.visit .contact-info{margin-top:var(--s-5)}
.map{aspect-ratio:auto;height:clamp(280px,40vw,420px);width:100%}

/* Footer */
.site-footer{background:#1e211c}
.footer-grid p{max-width:36ch}

@media(max-width:480px){
  .hero.leaf .actions .btn{width:100%}
  .ways .btn{width:100%}
}