/* MineChef — typography: faces, scale, every font-related declaration. Owned by the "typography" piece.
   Four voices, one job each — MineChef Logo: the logotype only (Skranji Bold subset to the glyphs of "MineChef",
   renamed as the OFL asks of modified versions, 4.4 KB) · Boogaloo: section/card titles, a condensed hand-lettered
   sign-painter's cut · Fredoka: the UI voice, ONE label style (Bold caps, 0.14em tracking) for nav, ribbon, sign,
   ruler, pills, buttons · Nunito: body, tagline, hints, footer. Self-hosted (OFL), no external requests.
   The logotype lockup's look lives here; hero.css only stacks the pieces. Kept lean: this file is render-blocking. */

@font-face { font-family: "MineChef Logo"; src: url("../assets/fonts/MineChefLogo-subset.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Boogaloo"; src: url("../assets/fonts/Boogaloo-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("../assets/fonts/Fredoka-latin.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../assets/fonts/Nunito-latin.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../assets/fonts/Nunito-italic-latin.woff2") format("woff2"); font-weight: 200 1000; font-style: italic; font-display: swap; }

:root {
  --font-logo: "MineChef Logo", "Boogaloo", "Fredoka", system-ui, sans-serif;
  --font-heading: "Boogaloo", "Fredoka", "Nunito", system-ui, sans-serif;
  --font-ui: "Fredoka", "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-ui); /* legacy alias read by hero.css for the nav */
  --step--1: clamp(0.85rem, 0.82rem + 0.2vw, 0.95rem);
  --step-0: clamp(1rem, 0.96rem + 0.3vw, 1.125rem);
  --step-1: clamp(1.15rem, 1.05rem + 0.6vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3: clamp(2.4rem, 1.7rem + 2.4vw, 3.5rem);
  --step-4: clamp(3.4rem, 2.4rem + 7.4vw, 8.75rem); /* the logotype: 140px on a 1440 fold, so the lockup owns the sky */
  /* the one label style */
  --label-size: 0.78rem; --label-track: 0.14em; --label-weight: 700;
  /* the dark plum every outline and extrusion on the page is drawn in */
  --wm-ink: #3A2238; --wm-side: #5C3550; --wm-side-lit: #7A4A6A; --wm-deep: #24121F;
  /* logotype ornaments (inline SVG): ore-vein tile, flanking ore clusters, toque, ribbon ornament */
  --wm-vein: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'><g fill='none' stroke-linecap='round' stroke-width='3.2'><path d='M-10 28C22 20 36 42 64 34S112 18 142 32s30 10 38 6' stroke='%234FD1C5' opacity='.7'/><path d='M-10 98c36-8 54 12 88 4s48-16 92-2' stroke='%23F97AA6' opacity='.62'/><path d='M-10 150c40-10 70 6 106-4s44-12 74 0' stroke='%23B48EFF' opacity='.58'/><path d='M-10 62c50-2 70 14 110 4s50-10 70-2' stroke='%23fff' opacity='.7' stroke-width='2.2'/><path d='M-10 122c40 6 80-6 120 4s40 4 60-4' stroke='%23fff' opacity='.45' stroke-width='2.2'/></g><g stroke='%233A2238' stroke-width='1.8' stroke-linejoin='round'><path d='M28 70l7-9 7 9-7 9z' fill='%234FD1C5'/><path d='M118 20l6-8 6 8-6 8z' fill='%23F97AA6'/><path d='M84 132l7-9 7 9-7 9z' fill='%23B48EFF'/><path d='M142 82l6-8 6 8-6 8z' fill='%23FFC857'/></g><g fill='%23fff' opacity='.9'><circle cx='32' cy='66' r='1.5'/><circle cx='121' cy='17' r='1.3'/><circle cx='88' cy='128' r='1.5'/><circle cx='145' cy='79' r='1.3'/></g></svg>");
  --wm-gems: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'><g stroke='%233A2238' stroke-width='6' stroke-linejoin='round' paint-order='stroke'><path d='M12 34l9-14 8 15-4 23H15z' fill='%23F97AA6'/><path d='M60 34l-9-14-8 15 4 23h10z' fill='%23FFC857'/><path d='M36 4l12 20-4 36H27l-3-36z' fill='%234FD1C5'/><path d='M8 56h56l-5 11H13z' fill='%235C3550'/></g><path d='M36 4l-6 20v36h-3l-3-36zM21 20l-3 15-2 23h-1zM51 20l3 15 2 23h1z' fill='%23fff' opacity='.5'/><path d='M12 56h48' stroke='%237B4A66' stroke-width='2.5'/><path d='M6 8l2 4.5 4.5 2-4.5 2L6 21l-2-4.5-4.5-2 4.5-2zM64 2l1.6 3.8 3.9 1.7-3.9 1.5L64 13l-1.6-4-3.9-1.5 3.9-1.7z' fill='%23FFF6E0'/></svg>");
  --wm-toque: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 56'><g stroke='%233A2238' stroke-width='7' stroke-linejoin='round' paint-order='stroke' fill='%23FFF9EE'><rect x='13' y='31' width='38' height='16' rx='5' fill='%23F4E3C4'/><circle cx='17' cy='23' r='12'/><circle cx='47' cy='23' r='12'/><circle cx='32' cy='16' r='14'/><rect x='13' y='24' width='38' height='12' stroke='none'/></g><path d='M17 35h30' stroke='%23FFF9EE' stroke-width='3'/><path d='M14 32.5h36' stroke='%233A2238' stroke-width='3' stroke-linecap='round'/><path d='M23 37v6M32 37v6M41 37v6' stroke='%23D9BC92' stroke-width='3' stroke-linecap='round'/><circle cx='24' cy='10' r='3' fill='%23fff' opacity='.9'/></svg>");
  --wm-orn: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20'><path d='M2 10h18M40 10h18' stroke='%23FFD37A' stroke-width='2.4' stroke-linecap='round' opacity='.85'/><path d='M30 2l7 8-7 8-7-8z' fill='%234FD1C5' stroke='%2324121F' stroke-width='2' stroke-linejoin='round'/><path d='M30 2l-2.5 8 2.5 8-3.5-8z' fill='%23fff' opacity='.5'/></svg>");
}

/* Very large screens (2K/4K/ultrawide): the picture is full-bleed and keeps growing with the viewport, but the
   clamp ceilings freeze the type, so above ~2000px the lockup and the pitch end up marooned in a huge frame.
   Here the scale keeps tracking the viewport (still capped, and the wordmark is still capped by fold height
   further down), so the words hold their share of the composition. */
@media (min-width: 2000px) {
  :root {
    --step-0: clamp(1.125rem, 0.55rem + 0.42vw, 1.5rem);
    --step-1: clamp(1.4rem, 0.7rem + 0.55vw, 1.95rem);
    --step-2: clamp(2rem, 0.9rem + 0.85vw, 2.8rem);
    --step-3: clamp(3.5rem, 1.5rem + 1.55vw, 4.75rem);
    --step-4: clamp(8.75rem, 2.2rem + 5.2vw, 13rem);
    --label-size: 0.95rem;
  }
}

body { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.55; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 400; line-height: 1.02; text-wrap: balance; }

/* ---- the one label style: nav · ribbon · scroll cue · ruler (extra specificity: layout files load later) ---- */
.eyebrow, .cue, .topbar .topbar__nav a, .ruler__mark {
  font-family: var(--font-ui); font-weight: var(--label-weight); font-size: var(--label-size);
  letter-spacing: var(--label-track); text-transform: uppercase; line-height: 1.25;
}
.topbar .topbar__nav a { text-shadow: 0 1px 0 rgba(58, 34, 56, 0.85); }
.ruler__mark { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: none; }

/* ---- top bar: the nav labels only (the picture carries the brand) ---- */

/* ---- the wordmark: a logotype built from live text. Solid cream fill (paints instantly, plain-text LCP candidate),
   plum outline outside the letters (paint-order), a lit top edge and a chiselled extrusion stepping down-right in
   text-shadow. ::before repeats each word over itself with the ORE MATERIAL clipped to the glyphs (gloss band, gold
   face, ore veins + gem chips). h1 tilts one way, "Chef" the other: a hand-placed baseline. Ore clusters ride the
   h1 background; .accent::after wears the toque. ---- */
.logo .wordmark {
  --wm-pad-x: 1.12em; --wm-pad-top: 0.32em;
  position: relative;
  font-family: var(--font-logo); font-weight: 400; font-size: var(--step-4); line-height: 1; letter-spacing: -0.016em;
  white-space: nowrap;
  padding: var(--wm-pad-top) var(--wm-pad-x) 0.18em;
  color: #FFF4D6;
  rotate: -1.6deg;
  -webkit-text-stroke: 0.06em var(--wm-ink);
  paint-order: stroke fill;
  text-shadow:
    0 -0.042em 0 rgba(255, 233, 184, 0.9),
    0.012em 0.036em 0 var(--wm-ink),
    0.024em 0.072em 0 var(--wm-side-lit),
    0.036em 0.108em 0 var(--wm-side),
    0.048em 0.144em 0 #48293F,
    0.06em 0.176em 0 var(--wm-deep),
    0.08em 0.26em 0.42em rgba(30, 15, 30, 0.5);
  background: var(--wm-gems) left 0.02em bottom 0.12em / 0.86em 0.86em no-repeat, var(--wm-gems) right 0.02em bottom 0.12em / 0.86em 0.86em no-repeat;
}
.logo .wordmark .accent {
  position: relative; display: inline-block; color: inherit;
  margin-left: 0.01em; /* hand-kern the eC join */
  rotate: 3.4deg; transform-origin: 18% 96%; translate: 0 -0.015em;
}
/* the ore material, one overlay per word so glyph positions match exactly */
.logo .wordmark::before, .logo .wordmark .accent::before {
  position: absolute; inset: 0; padding: inherit; text-align: left; pointer-events: none;
  color: transparent; -webkit-text-stroke: 0; text-shadow: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0, rgba(255, 255, 255, 0.58) 9%, rgba(255, 255, 255, 0) 21%),
    var(--wm-vein) 0.1em 0.06em / 1.5em 1.5em repeat,
    linear-gradient(180deg, #FFFBE8 0%, #FFF1C6 34%, #FFDA86 54%, #FFBD4A 100%);
  -webkit-background-clip: text; background-clip: text;
}
.logo .wordmark::before { content: "Mine"; }
.logo .wordmark .accent::before {
  content: "Chef";
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0, rgba(255, 255, 255, 0.58) 9%, rgba(255, 255, 255, 0) 21%),
    var(--wm-vein) 0.55em 0.3em / 1.5em 1.5em repeat,
    linear-gradient(180deg, #FFFAE4 0%, #FFEDBD 34%, #FFD27A 54%, #FFB447 100%);
  -webkit-background-clip: text; background-clip: text;
}
/* the toque, tipped onto the C */
.logo .wordmark .accent::after {
  content: ""; position: absolute; left: -0.05em; top: -0.3em; width: 0.64em; height: 0.56em; pointer-events: none;
  transform: rotate(-14deg);
  background: var(--wm-toque) center / contain no-repeat;
  filter: drop-shadow(0 0.04em 0 var(--wm-deep));
}

/* ---- the ribbon slung under the mark: a swallow-tailed banner with gem ornaments ---- */
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.9em;
  font-size: var(--label-size); letter-spacing: 0.16em; color: #FFD37A;
  padding: 0.66em 2.3em 0.6em;
  background: linear-gradient(180deg, #4E2E4A, #33203A);
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.85em) 50%, 100% 100%, 0 100%, 0.85em 50%);
  box-shadow: inset 0 1px 0 rgba(255, 249, 238, 0.14);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.hero__eyebrow::before, .hero__eyebrow::after { content: ""; flex: 0 0 auto; width: 3em; height: 1em; background: var(--wm-orn) center / contain no-repeat; }

/* ---- tagline: bold enough to hold over clouds and sky, a soft dark halo instead of a plate ---- */
.hero__content .tagline {
  font-family: var(--font-body); font-weight: 800; font-size: clamp(1.18rem, 1.06rem + 0.7vw, 1.6rem); line-height: 1.32;
  letter-spacing: 0.002em; color: #FFF9EE;
  text-shadow: 0 1px 0 rgba(58, 34, 56, 0.9), 0 2px 10px rgba(58, 34, 56, 0.6), 0 0 26px rgba(46, 26, 52, 0.55);
}

/* ---- underground: headings in the sign-painter's cut, lit from above; an ore-vein underline under the title ---- */
.section-head .eyebrow::before { content: ""; display: inline-block; width: 1.7em; height: 0.28em; margin-right: 0.8em; border-radius: 1em; vertical-align: 0.22em; background: currentColor; }
.section-head h2 {
  font-family: var(--font-heading); font-size: clamp(2.7rem, 1.9rem + 3vw, 4.4rem); font-weight: 400; line-height: 0.96; letter-spacing: 0.004em;
  text-shadow: 0 -0.02em 0 rgba(255, 246, 229, 0.16), 0 0.05em 0 var(--wm-deep);
}
.section-head h2::after { content: ""; display: block; width: 2.2em; height: 0.12em; margin-top: 0.34em; border-radius: 1em; background: linear-gradient(90deg, var(--gem-amber), var(--ember)); box-shadow: 0 0.06em 0 var(--wm-deep); }
.section-head p { font-size: var(--step-1); }
.feature h3 { font-family: var(--font-heading); font-size: clamp(1.7rem, 1.45rem + 1.1vw, 2.35rem); font-weight: 400; letter-spacing: 0.006em; line-height: 1; color: #FFF1CC; text-shadow: 0 2px 0 var(--wm-deep); }
.bedrock h2 { font-family: var(--font-heading); font-size: clamp(2.1rem, 1.6rem + 2vw, 3.3rem); font-weight: 400; letter-spacing: 0.004em; line-height: 0.98; text-shadow: 0 -0.02em 0 rgba(255, 246, 229, 0.16), 0 0.05em 0 var(--wm-deep); }
.footer { font-size: var(--step--1); }

/* ---- shorter desktop windows: cap the mark by height so the mine sign still fits under the ribbon ---- */
@media (max-height: 840px) and (min-width: 641px) { .logo .wordmark { font-size: min(var(--step-4), 15.5vh); } }

/* ---- small screens: the mark fills the width on one line; the ribbon narrows under it (no ornament rules) ---- */
@media (max-width: 640px) {
  .logo .wordmark { --wm-pad-x: 0.72em; --wm-pad-top: 0.34em; font-size: clamp(2.5rem, 15.4vw, 4rem); background-size: 0.68em 0.68em; background-position: left 0 bottom 0.12em, right 0 bottom 0.12em; }
  .hero__eyebrow { font-size: 0.68rem; letter-spacing: 0.14em; padding: 0.62em 1.7em 0.56em; gap: 0; }
  .hero__eyebrow::before, .hero__eyebrow::after { display: none; }
  .hero__content .tagline { font-size: 1.12rem; line-height: 1.34; }
  .cue { font-size: 0.72rem; }
}

/* (kept last so it wins on order over the base rules above) */
@media (min-width: 2000px) {
  .hero__content .tagline { font-size: clamp(1.6rem, 0.7rem + 0.72vw, 2.15rem); }
}