/* abq.guru customer template system, global layer.
   Fixed for every generated site: roles, scale, spacing, radius, image ratios.
   Each category sets only: --font-display, --font-text, --bg, --ink, --accent, --radius, hero recipe. */
:root{
  --muted: color-mix(in srgb, var(--ink) 72%, var(--bg));
  --surface: color-mix(in srgb, var(--ink) 4%, var(--bg));
  --border: color-mix(in srgb, var(--ink) 12%, transparent);
  --on-accent:#fff;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--s12:48px;--s16:64px;--s24:96px;
  --section: clamp(64px, 8.9vw, 128px);
  --fs-hero: clamp(2.5rem, 1.2rem + 4.6vw, 4.5rem);
  --fs-h2: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  --fs-h3: 1.25rem;
  --fs-lead: 1.1875rem;
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-eyebrow: .8125rem;
  --ease:cubic-bezier(.215,.61,.355,1);
  --dur:200ms;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font-text),system-ui,sans-serif;font-size:var(--fs-body);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2{font-family:var(--font-display),Georgia,serif;font-weight:var(--display-weight,500);line-height:1.05;letter-spacing:-.015em}
h1{font-size:var(--fs-hero)}
h2{font-size:var(--fs-h2);letter-spacing:-.01em}
h3{font-size:var(--fs-h3);font-weight:500;line-height:1.25;letter-spacing:-.01em}
p{max-width:38em}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,2.78vw,40px)}
.eyebrow{font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.lead{font-size:var(--fs-lead);line-height:1.4;color:var(--muted)}
.muted{color:var(--muted)}
.rule{border:0;border-top:1px solid var(--border)}
.btn{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s6);border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:500;font-size:var(--fs-small);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.btn:hover{background:var(--ink)}
.btn-line{display:inline-flex;align-items:center;gap:var(--s3);min-height:44px;border-top:1px solid var(--ink);padding:var(--s3) 0;font-weight:500;font-size:var(--fs-small);min-width:200px;justify-content:space-between}
.btn-line::after{content:"→"}
header.site{height:60px;display:flex;align-items:center;border-bottom:1px solid var(--border)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;width:100%}
header.site .brand{font-family:var(--font-display),serif;font-weight:var(--display-weight,500);font-size:1.25rem;letter-spacing:-.01em}
header.site nav{display:flex;gap:var(--s6);font-size:var(--fs-small);font-weight:500}
header.site nav a{color:var(--muted)}
header.site nav a:hover{color:var(--ink)}
header.site .tel{color:var(--ink)}
section{padding:var(--section) 0}
.grid{display:grid;gap:var(--s6)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface);border-radius:var(--radius);padding:var(--s6)}
.card h3{margin-bottom:var(--s2)}
.card p{font-size:var(--fs-small);color:var(--muted)}
.frame{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--surface)}
.frame.r32{aspect-ratio:3/2}.frame.r45{aspect-ratio:4/5}.frame.r169{aspect-ratio:16/9}.frame.r11{aspect-ratio:1/1}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame .ph{position:absolute;inset:0;background:var(--ph,linear-gradient(135deg,color-mix(in srgb,var(--accent) 55%,var(--bg)),color-mix(in srgb,var(--accent) 20%,var(--surface)) 60%,var(--surface)))}
.frame .ph::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='128' height='128'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .18 0'/></filter><rect width='128' height='128' filter='url(%23n)'/></svg>");opacity:.35;mix-blend-mode:multiply}
.hours{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s6);font-size:var(--fs-small)}
.hours dt{color:var(--muted)}
.menu{display:grid;gap:var(--s4)}
.menu .row{display:flex;justify-content:space-between;gap:var(--s4);padding-bottom:var(--s4);border-bottom:1px solid var(--border)}
.menu .row span:last-child{font-variant-numeric:tabular-nums}
.menu .row small{display:block;color:var(--muted);font-size:var(--fs-small)}
footer.site{padding:var(--s16) 0;border-top:1px solid var(--border);font-size:var(--fs-small);color:var(--muted)}
footer.site .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s4)}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}header.site nav a:not(.tel){display:none}}