/* ===========================================================
   FRAUSTO'S MEXICAN FOOD, brand.css
   Client token VALUES (the ag-* primitives bind to the token NAMES, so the
   names are never renamed) plus the Pass 1 spatial frame for THIS copy.
   Loads LAST so :root wins by cascade; every ag/ primitive is an unmodified
   drop-in generated by scaffold-sync from ag-components (header v2.7,
   cursor v2.1, curtain v2.5, scrollbar v2.1, motion v2.5, footer v1.6).
   Palette: BRANDKIT.md, locked at the Direction gate 2026-09-11:
   black #000000, white #FFFFFF, tan #C9BCAC (measured off the logo).
   Type: PAIR-02 Playfair Display 600 + Inter 400/600 (locked 2026-09-11).
   NET-NEW reason (FIND gate): a client's palette, type and the composition
   of its specific copy are per-client by definition; no primitive exists.
   Pass 1 (Spatial Framing): sections in copy order, height strategy per
   section, containers and gutters.
   SCENARIO B (amended Phase A): Pass 0 grammar tokens applied (radius 0/7/14,
   reading column 1176, two shadows); the fold is styled per family in
   Pass 1.5 variants, and the picked family lands here at Pass 2.
   =========================================================== */

:root {
  /* ---- Brand palette (BRANDKIT, locked) ---- */
  --ink: #000000;
  --paper: #FFFFFF;
  --tan: #C9BCAC;
  --tan-deep: #8F8270;            /* tan darkened for text on paper, meets AA on white */
  --tan-rgb: 201 188 172;
  --ink-rgb: 0 0 0;
  --paper-rgb: 255 255 255;
  --ember: #7A2E12;               /* the fourth hue, ruled 2026-09-11: disc surfaces on the two dark bands only */
  --ember-rgb: 122 46 18;
  --accent: var(--tan);
  --brand: var(--tan);
  --brand-primary: var(--tan);
  --brand-700: var(--tan-deep);
  --brand-rgb: var(--tan-rgb);
  --c-white: #FFFFFF;
  /* tokens the primitives read (ghost-token gate): the drawer sheen and info fallback read by ag-header, the button beam's second stop read by ag-button */
  --glass-06: rgb(var(--paper-rgb) / 0.06);
  --glass-50: rgb(var(--paper-rgb) / 0.5);
  --aurora-sky: rgb(var(--tan-rgb) / 0.1);
  --neutral-400: #A8A8A8;
  --ink-2: #111111;
  --ink-3: #1A1A1A;
  --paper-2: #F6F4F1;
  --paper-3: #EFEBE6;
  --text-soft-on-paper: #4A4A4A;

  /* ---- Text ---- */
  --text-primary: var(--ink);
  --text-secondary: var(--text-soft-on-paper);
  --on-ink: var(--paper);
  --on-ink-soft: rgba(255, 255, 255, 0.72);

  /* ---- Surfaces the primitives read ---- */
  --header-bg: rgba(255, 255, 255, 0.86);
  --header-border: rgba(0, 0, 0, 0.08);
  --bg-footer: var(--ink);
  --text-on-footer: var(--paper);
  --text-muted-on-footer: var(--tan);
  --link-on-footer: var(--paper);
  --scrim-45: rgba(0, 0, 0, 0.45);
  --drawer-backdrop: rgba(0, 0, 0, 0.55);

  /* ---- Type (PAIR-02) ---- */
  --font-heading: 'Rye', Georgia, serif;
  --font-display: var(--font-heading);
  --font-body: 'Libre Franklin', system-ui, sans-serif;
  --fw-hero: 600;
  --fw-h2: 600;
  --fw-h3: 600;

  /* ---- Layout ---- */
  --logo-size: 48px;               /* AG-HEADER-STANDARD: 48px logo */
  --max-w: 1400px;
  --measure: 65ch;
  --content-w: 1176px;             /* the reading column (approved 1176), not the 1400 bleed */
  --radius-md: 14px;               /* DESIGN-GRAMMAR radius set: 0 / 7 / 14 */
  --sh-sm: 0 3px 9px rgb(var(--ink-rgb) / 0.12);
  --sh-md: 0 7px 21px rgb(var(--ink-rgb) / 0.18);

  /* ---- Bridge tokens the library doc blocks read (ag-sections / ag-bento / ag-theme) ---- */
  --color-accent: var(--tan);
  --color-accent-2: var(--tan-deep);
  --blue-primary: var(--tan);          /* the doc's fallback name; nothing on this page is blue */
  --accent-rgb: 201, 188, 172;         /* comma form, ag-theme.css consumes rgba(var(--accent-rgb), a) */
  --space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
  --radius-lg: 14px;
  --bento-card-bg: var(--ink);
  --bento-card-border: rgb(var(--tan-rgb) / 0.35);
  --bento-card-bg-light: var(--paper);
  --bento-card-border-light: rgb(var(--ink-rgb) / 0.08);
}

/* Theme sections: ag-theme.css ships a navy-tinted default palette; the brand values win here (brand.css loads last) */
.theme-section--dark {
  --bg-primary: var(--ink); --bg-secondary: var(--ink-2); --bg-tertiary: var(--ink-3); --surface: var(--ink-2); --surface-hover: var(--ink-3);
  --text-primary: var(--paper); --text-secondary: var(--on-ink-soft); --text-muted: var(--tan);
  --border: rgb(var(--tan-rgb) / 0.25); --border-light: var(--glass-08);
}
.theme-section--light {
  --bg-primary: var(--paper); --bg-secondary: var(--paper-2); --bg-tertiary: var(--paper-3); --surface: var(--paper); --surface-hover: var(--paper-2);
  --text-primary: var(--ink); --text-secondary: var(--text-soft-on-paper); --text-muted: var(--tan-deep);
  --border: rgb(var(--ink-rgb) / 0.1); --border-light: rgb(var(--ink-rgb) / 0.06);
}

/* ---------- Pass 1 frame: bands, containers, gutters ---------- */
html { background-color: var(--ink); overflow-x: hidden; }
body { background-color: var(--paper); color: var(--ink); font-family: var(--font-body); overflow-wrap: break-word; }

.band { padding-block: var(--space-section); padding-inline: var(--section-padding-inline); }
.band--ink { background: var(--ink); color: var(--on-ink); }
.band--paper { background: var(--paper); color: var(--ink); }
.container { width: min(100%, var(--content-w)); margin-inline: auto; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); align-items: center; }
.split > * { min-width: 0; }
.split img { width: 100%; height: auto; display: block; }
.stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); }
.stack > p, .stack > h2, .stack > h3 { max-width: var(--measure); }
.band--ink .stack > p { color: var(--on-ink-soft); }

/* Hero: HERO-05 image background on the AG-HERO-STANDARD v1.2 structure. HER-16: full-width inner, no max-width
   cap, flush bottom-left at 901px and up, left inset = the safe edge. HER-15: title + supporting copy + CTA only.
   HER-16m: at 350 to 900 centered, mid-view, stepped up, runway word hidden (HER-25m). */
.hero { position: relative; min-height: 100dvh; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  padding: calc(var(--header-h) + var(--space-lg)) var(--section-padding-inline) clamp(6rem, 4rem + 5vw, 8rem) max(var(--safe-edge), var(--section-padding-inline));
  color: var(--on-ink); isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; margin: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.15) 0%, rgb(var(--ink-rgb) / 0.35) 45%, rgb(var(--ink-rgb) / 0.82) 100%); }
.hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); width: 100%; }
.hero__title { font-family: var(--font-display); font-size: var(--text-hero); font-weight: var(--fw-hero); line-height: 1.05; max-width: 16ch; text-wrap: balance; margin: 0; }
.hero__sub { font-size: var(--text-lg); max-width: 46ch; margin: 0; color: var(--on-ink-soft); }
.hero__sub p { margin: 0; }
/* Runway scroll indicator: AG-HERO-STANDARD Section 4, lifted whole. 14/21/28px chevrons, 2100ms loop, 0/700/1400ms offsets. */
.hero__scroll { position: absolute; left: 50%; bottom: clamp(1.5rem, 1rem + 2vw, 2.75rem); translate: -50% 0; display: grid; justify-items: center; gap: 9px;
  min-width: 49px; min-height: 49px; text-decoration: none; color: var(--on-ink-soft); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.hero__scroll-label { font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; }
.hero__runway { display: grid; justify-items: center; }
.hero__runway svg { display: block; opacity: 0.35; animation: runway 2100ms ease-in-out infinite; }
.hero__runway svg + svg { margin-top: -3px; }
.hero__runway svg:nth-child(1) { animation-delay: 0ms; }
.hero__runway svg:nth-child(2) { animation-delay: 700ms; }
.hero__runway svg:nth-child(3) { animation-delay: 1400ms; }
@keyframes runway { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.hero__scroll:focus-visible { outline: 2px solid var(--tan); outline-offset: 4px; border-radius: var(--radius-md); }

/* Height strategy per section (Pass 1): hero 100dvh; every other band content-height with the section padding token */
.h2 { font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--fw-h2); line-height: 1.12; margin: 0 0 var(--space-md); text-wrap: balance; }
.h3 { font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--fw-h3); line-height: 1.2; margin: 0 0 var(--space-md); text-wrap: balance; }
.copy p { margin: 0 0 0.35em; text-wrap: pretty; }
.copy p:last-child { margin-bottom: 0; }

.gap-top-lg { margin-top: var(--space-lg); }
.gap-top-section { margin-top: var(--space-section); }

/* Contact: formless direct contact (AG Contact Standard), values reversed in source and revealed on click */
.contact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); }
.contact-list li { max-width: var(--measure); }
.reveal-value { unicode-bidi: bidi-override; direction: rtl; display: inline-block; }
.reveal-value.is-revealed { direction: ltr; unicode-bidi: normal; }
.reveal-btn { width: fit-content; min-height: 49px; min-width: 49px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* Buttons: the ag-button primitive paints white on the brand color; on tan that fails AA, so the label is ink */
.ag-button--primary { color: var(--ink); }
.ag-button--secondary { color: var(--ink); }
.ag-proc-number { color: var(--ink); }

/* Why Frausto's: the bento image card paints its photo as a background per the container contract */
.why-card--plate { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; }
.bento-card--solid .bento-card-description { color: var(--on-ink); }
.bento-card--image .bento-card-description { color: var(--on-ink); }
.bento-card-description { font-size: var(--text-lg); max-width: 40ch; text-wrap: pretty; margin: 0; }

/* Logo images in the header, drawer, curtain and footer */
.brand-mark { display: block; height: var(--logo-size); width: auto; }
.brand-mark--footer { height: 96px; }
.curtain-mark { width: min(40vw, 220px); height: auto; display: block; margin-inline: auto; }

/* BENTO-10: the small cards hold one quarter of the row at desktop, so their copy is set at the base size with a measure the card can hold;
   INTERIOR orphans are a sizing defect (LEARNING-LOG orphan law), fixed by sizing the container to the content, never by gluing */
.bento-10 .bento-card:nth-child(1) .bento-card-description, .bento-10 .bento-card:nth-child(4) .bento-card-description { font-size: var(--text-base); }

/* Cascade: DESKTOP-FIRST. Tablet 900-1200: BENTO-10 drops to two columns (the quarter cards cannot hold a sentence there);
   Mobile <=900 stacks and centers (Mobile Standard 6C) */
@media (max-width: 1200px) {
  .bento-10 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .bento-10 .bento-card:nth-child(2), .bento-10 .bento-card:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  /* Mobile zone: one column; every BENTO-10 span reset (the doc block has no breakpoint of its own) */
  .bento-10 { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .bento-10 .bento-card:nth-child(2), .bento-10 .bento-card:nth-child(3) { grid-column: auto; }
  .bento-card-description { max-width: 100%; }
  .band, .hero { text-align: center; }
  .stack, .hero__content, .contact-list { align-items: center; }
  /* HER-16m: centered, in the middle of the space between the header and the runway lane, stepped up */
  .hero { align-items: center; justify-content: center; padding-inline: var(--section-padding-inline); padding-bottom: clamp(7rem, 5rem + 5vw, 9rem); }
  .hero__title { max-width: 100%; font-size: clamp(2.5rem, 1.9rem + 2.6vw, 3.938rem); }
  .hero__sub { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); max-width: 100%; }
  .hero__title, .hero__sub { margin-inline: auto; }
  /* HER-25m: the runway's word is hidden on phones; the chevrons stay, the aria-label keeps the name */
  .hero__scroll-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scrim { transition: none; }
  .hero__runway svg { animation: none; opacity: 0.6; }
}

/* ===========================================================
   SCENARIO B, DIRECTION PICKED (Pass 1.5, three rounds, 2026-09-11): families 1 + 5 blended,
   clean fold, ember surfaces on the photo-free bands. Folded in from
   extras/reports/direction-2026-09-11/round3/b-surfaces-ember/{family,surfaces}.css verbatim.
   =========================================================== */
/* Round 3 base: families 1 + 5 blended, and the hero and section 2 are CLEAN. No overlay, no wash, no glow
   over the photograph or over the first section (Quinten, 2026-09-11: "i hate that overlay effects on the
   hero and second section"). The abstract backgrounds live only on sections that carry no photograph. */
.hero__title { font-size: clamp(3rem, 1.4rem + 5.4vw, 6.5rem); max-width: 100%; line-height: 0.98; letter-spacing: -0.015em; text-wrap: balance; }
.hero__content { width: 100%; }
.hero__sub { font-size: var(--text-lg); max-width: 44ch; color: rgb(var(--paper-rgb) / 0.8); }
.hero__sub p + p { display: none; }
.hero__scrim { background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.3) 0%, rgb(var(--ink-rgb) / 0.5) 50%, rgb(var(--ink-rgb) / 0.9) 100%); }
#come-home { background: var(--ink); color: var(--paper); }
#come-home.theme-section--light { --bg-primary: var(--ink); --text-primary: var(--paper); --text-secondary: var(--on-ink-soft); }
#come-home .h2 { color: var(--paper); font-size: var(--text-h1); }
#come-home .h2::before { content: ""; display: block; width: 42px; height: 2px; background: var(--tan); margin: 0 0 var(--space-md); }
#come-home .copy p { color: var(--on-ink-soft); font-size: var(--text-lg); line-height: 1.6; }
#come-home figure { margin: 0; border: 1px solid rgb(var(--tan-rgb) / 0.35); padding: 7px; border-radius: 0; }
#come-home figure img { display: block; aspect-ratio: 3 / 2; object-fit: cover; }
/* the rest of the page, so the surfaces below are judged on a finished-looking body */
.band--paper .h2::before { content: ""; display: block; width: 42px; height: 2px; background: var(--tan); margin: 0 0 var(--space-md); }
.h2 { font-size: var(--text-h1); }
.copy p { font-size: var(--text-lg); line-height: 1.6; color: var(--text-secondary); }
.band--ink .copy p { color: var(--on-ink-soft); }
.split figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; }
.split figure img { aspect-ratio: 3 / 2; object-fit: cover; }
.bento-10 { --bento-gap: var(--space-lg); --bento-card-padding: var(--space-lg); --bento-card-radius: var(--radius-lg); grid-template-columns: 1.4fr 1fr 1fr 1.4fr; }
.bento-card--solid .bento-card-description { font-family: var(--font-display); font-size: var(--text-h3); line-height: 1.25; color: var(--paper); }
.bento-10 .bento-card:nth-child(1) .bento-card-description, .bento-10 .bento-card:nth-child(4) .bento-card-description { font-family: var(--font-body); font-size: var(--text-lg); line-height: 1.5; color: var(--on-ink-soft); }
.why-card--plate { min-height: 360px; }
.ag-cta-title { font-size: var(--text-h1); font-weight: var(--fw-h2); color: var(--paper); }
.ag-cta-subtitle { color: var(--on-ink-soft); }
.ag-cta { position: relative; isolation: isolate; overflow: hidden; }
.ag-cta-container { position: relative; z-index: 1; }
#about { position: relative; isolation: isolate; overflow: hidden; }
#about .container { position: relative; z-index: 1; max-width: 62ch; margin-inline: 0; }
.ag-proc-desc { font-size: var(--text-lg); color: var(--text-secondary); max-width: 28ch; margin-inline: auto; }
.ag-section-heading.h3 { text-align: center; font-size: var(--text-h2); }
@media (max-width: 1200px) { .bento-10 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento-10 .bento-card:nth-child(2), .bento-10 .bento-card:nth-child(3) { grid-column: 1 / -1; } }
@media (max-width: 900px) {
  .hero__title { font-size: clamp(2.75rem, 2rem + 4vw, 4.5rem); }
  .hero__sub p + p { display: block; }
  #come-home .h2::before, .band--paper .h2::before { margin-inline: auto; }
  .bento-10 { grid-template-columns: minmax(0, 1fr); } .bento-10 .bento-card:nth-child(2), .bento-10 .bento-card:nth-child(3) { grid-column: auto; }
  .why-card--plate .bento-card-description { font-family: var(--font-body); font-size: var(--text-lg); }
  #about .container { margin-inline: auto; }
}

.story__peak { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); padding-block: var(--space-lg); border-block: 1px solid rgb(var(--tan-rgb) / 0.3); margin-block: var(--space-md); max-width: var(--measure); }
.story__peak p { font-family: var(--font-display); font-size: var(--text-h2); line-height: 1.2; color: var(--tan); text-wrap: balance; margin: 0; }
@media (max-width: 900px) { .story__peak { align-items: center; } }

/* B, SURFACES in ember (the fourth hue, --ember, ruled in 2026-09-11). Same crisp discs, warm. */
.ag-cta--gradient { background:
  radial-gradient(circle at 12% 130%, rgb(var(--ember-rgb) / 0.85) 0 34%, transparent 34.4%),
  radial-gradient(circle at 92% -30%, rgb(var(--ember-rgb) / 0.45) 0 30%, transparent 30.4%),
  radial-gradient(circle at 92% -30%, rgb(var(--tan-rgb) / 0.08) 0 40%, transparent 40.4%),
  var(--ink); }
#about { background:
  radial-gradient(circle at 108% 92%, rgb(var(--ember-rgb) / 0.7) 0 24%, transparent 24.4%),
  radial-gradient(circle at 108% 92%, rgb(var(--ember-rgb) / 0.28) 0 36%, transparent 36.4%),
  linear-gradient(160deg, var(--ink) 55%, rgb(var(--ember-rgb) / 0.22) 100%),
  var(--ink); }
#why, #products, #birria { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"); background-size: 256px 256px; }