/* =============================================================================
   FLUID STARTER STYLESHEET
   A small, reusable system for a site that scales smoothly from phone to desktop
   instead of jumping at breakpoints. Inspired by the way X Theme sites feel.

   THE ONE IDEA
   Every size (type, spacing, gutters) is a clamp() between a phone value and a
   desktop value. Between 390px and 1440px wide it grows in a straight line;
   below 390px it stays at the phone value, above 1440px it stays at the desktop
   value. So the page at 1440px looks exactly like the desktop design, the page
   at 390px looks exactly like the phone design, and everything in between is a
   smooth blend rather than a jump.

   THE FORMULA (to make your own values)
     slope     = (desktopPx - phonePx) / (1440 - 390)
     intercept = phonePx - slope * 390
     value     = clamp(phonePx/16 rem,  intercept/16 rem + slope*100 vw,  desktopPx/16 rem)
   Example: 34px on phones, 56px on desktop
     slope = 22/1050 = 0.020952   intercept = 34 - 8.171 = 25.829px = 1.6143rem
     clamp(2.125rem, 1.6143rem + 2.0952vw, 3.5rem)

   HOW TO USE
   1. Replace the brand tokens (colours and fonts) with the design director's.
   2. Use the --step-* tokens for font sizes and --space-* tokens for padding,
      margins and gaps. Avoid raw px for anything that should scale.
   3. Wrap page content in .container (or give sections padding-inline:var(--gutter)).
   4. Add class="reveal" to blocks that should fade up on scroll, and include the
      small reveal script from the playbook just before </body>.
   ========================================================================== */


/* ---------------------------------------------------------------------------
   1. BRAND TOKENS
   Filled in with the approved Cinnabunmum palette and fonts as a worked example.
   For another brand, replace these with the design director's palette and fonts.
   Contrast notes (from the brand guidelines): Ink on Cream and Cinnamon on Cream
   are fine for any text; Ink on Golden for buttons; Cinnamon on Golden only for
   large or bold text; never Golden or Warm grey for small readable text on Cream.
   --------------------------------------------------------------------------- */
:root {
  --c-brand:   #8B4A24;   /* Cinnamon: logo, headings, text on light grounds */
  --c-accent:  #F4B942;   /* Golden: accents, buttons, stickers */
  --c-ink:     #1C1A17;   /* Ink: body text */
  --c-paper:   #FFF8ED;   /* Cream: page background */
  --c-muted:   #7A6F64;   /* readable small captions on Cream */
  --c-rule:    #B8B1A7;   /* Warm grey: dividers only, never for text */
  --c-panel:   #FBEEDB;   /* website tint: slightly deeper cream panels */
  --c-tint:    #FBE3AE;   /* website tint: soft gold placeholders */
  --c-line:    #E9DFD1;   /* website tint: hairlines */

  --font-display: "Fraunces", Georgia, serif;           /* headings (SemiBold 600) */
  --font-body:    "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------------------------------------------------------------------------
   2. FLUID TOKENS  (390px -> 1440px)
   --------------------------------------------------------------------------- */
:root {
  /* Type scale */
  --step--1: clamp(0.8125rem, 0.7893rem + 0.0952vw, 0.875rem);  /* 13 -> 14px  small print, labels */
  --step-0:  clamp(1rem, 0.9536rem + 0.1905vw, 1.125rem);       /* 16 -> 18px  body */
  --step-1:  clamp(1.125rem, 1.0554rem + 0.2857vw, 1.3125rem);  /* 18 -> 21px  lead paragraph */
  --step-2:  clamp(1.3125rem, 1.1964rem + 0.4762vw, 1.625rem);  /* 21 -> 26px  h3, card titles */
  --step-3:  clamp(1.625rem, 1.3929rem + 0.9524vw, 2.25rem);    /* 26 -> 36px  pull quotes */
  --step-4:  clamp(2.125rem, 1.6143rem + 2.0952vw, 3.5rem);     /* 34 -> 56px  h2 section titles */
  --step-5:  clamp(2.75rem, 1.8214rem + 3.8095vw, 5.25rem);     /* 44 -> 84px  hero subheading */
  --step-6:  clamp(3.75rem, 1.8929rem + 7.619vw, 8.75rem);      /* 60 -> 140px hero headline */

  /* Spacing scale */
  --space-2xs: clamp(0.25rem, 0.2036rem + 0.1905vw, 0.375rem);  /*  4 -> 6px */
  --space-xs:  clamp(0.5rem, 0.4071rem + 0.381vw, 0.75rem);     /*  8 -> 12px */
  --space-s:   clamp(0.75rem, 0.6107rem + 0.5714vw, 1.125rem);  /* 12 -> 18px */
  --space-m:   clamp(1.25rem, 0.9714rem + 1.1429vw, 2rem);      /* 20 -> 32px */
  --space-l:   clamp(2rem, 1.4429rem + 2.2857vw, 3.5rem);       /* 32 -> 56px */
  --space-xl:  clamp(3rem, 2.025rem + 4vw, 5.625rem);           /* 48 -> 90px  section padding */
  --space-2xl: clamp(4rem, 2.7rem + 5.3333vw, 7.5rem);          /* 64 -> 120px big section padding */

  /* Layout */
  --container-max: 1280px;
  /* Side margin: fluid 20 -> 80px, and once the screen is wider than the
     container it grows to keep content centred in a 1280px column. */
  --gutter: max(clamp(1.25rem, -0.1429rem + 5.7143vw, 5rem), calc((100vw - var(--container-max)) / 2));

  --radius: clamp(0.375rem, 0.2821rem + 0.381vw, 0.625rem);     /* 6 -> 10px */

  /* Motion: one easing and one duration everywhere is what makes it feel "of a piece" */
  --ease:     cubic-bezier(.4, 0, .2, 1);    /* standard ease, good for hovers */
  --ease-out: cubic-bezier(.22, 1, .36, 1);  /* soft landing, good for entrances */
  --dur:      .3s;
}


/* ---------------------------------------------------------------------------
   3. BASE
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }
html:focus-within { scroll-behavior: smooth; }   /* smooth anchor jumps only; never hijack the wheel */

body {
  min-height: 100vh;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;               /* safety net only: still fix real overflow at its source */
}

img, picture, video, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display); line-height: 1.1; font-weight: 600; color: var(--c-brand);
  font-variation-settings: "SOFT" 100, "WONK" 1;   /* Fraunces soft, friendly cut (Cinnabunmum) */
}
h1 { font-size: var(--step-6); line-height: 1; }
h2 { font-size: var(--step-4); text-wrap: balance; }
h3 { font-size: var(--step-2); }
p  { max-width: 65ch; text-wrap: pretty; }
.lead { font-size: var(--step-1); }
.small { font-size: var(--step--1); }

/* Long words (URLs, German compounds, big display words) must never push the page wide */
h1, h2, h3, p, li, blockquote { overflow-wrap: break-word; }

a { color: inherit; }

/* Visible keyboard focus everywhere */
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }

.skip-link {
  position: absolute; left: var(--space-s); top: -100px;
  background: var(--c-ink); color: var(--c-paper); padding: var(--space-xs) var(--space-s);
  z-index: 100;
}
.skip-link:focus { top: var(--space-s); }


/* ---------------------------------------------------------------------------
   4. LAYOUT
   --------------------------------------------------------------------------- */

/* Option A: gutter-padded sections (what the reference site uses).
   Full-bleed backgrounds, content kept inside the scaling side margins. */
.section {
  padding: var(--space-xl) var(--gutter);
}
.section--tight { padding-block: var(--space-l); }
.section--big   { padding-block: var(--space-2xl); }

/* Option B: X Theme-style percentage container. Width is a share of the screen,
   capped at a maximum, centred. The side margins therefore scale with the screen. */
.container {
  width: min(88%, var(--container-max));
  margin-inline: auto;
}
.container--narrow { width: min(88%, 760px); }

/* Stack: consistent vertical rhythm between children */
.stack > * + * { margin-top: var(--space-m); }
.stack-s > * + * { margin-top: var(--space-s); }
.stack-l > * + * { margin-top: var(--space-l); }

/* Scaling columns. Use fractions and minmax(0, 1fr), never fixed px widths.
   minmax(0, 1fr) stops long content from forcing a column wider than its share. */
.grid {
  display: grid;
  gap: var(--space-l) var(--space-m);
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
}
.grid--2 { --cols: 2; }
.grid--4 { --cols: 4; }

/* Self-wrapping grid: as many columns as fit, each at least --min wide.
   Good for product cards, menus, galleries. No breakpoints needed. */
.auto-grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 16rem), 100%), 1fr));
}

/* Split: text beside image, proportional rather than fixed */
.split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-l);
  align-items: center;
}

/* Phone layout: one column. Tablets get two columns where it helps. */
@media (max-width: 900px) {
  .grid, .split { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 640px) and (max-width: 900px) {
  .grid--tablet-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ---------------------------------------------------------------------------
   5. HERO AND WIDTH-RELATIVE HEADLINES
   --------------------------------------------------------------------------- */
.hero {
  padding: var(--space-xl) var(--gutter) var(--space-2xl);
  overflow: hidden;            /* decorative shapes may bleed; the page must not */
}

/* "Fit text": size a big word from the space it has, like X Theme's Responsive Text.
   0.12 is a tuning factor; raise or lower it until your longest line just fits at
   every width. min() caps it at the design size on big screens. */
.fit-headline {
  font-size: min(8.75rem, calc((100vw - 2 * var(--gutter)) * .12));
  line-height: .95;
}

/* Hero line stagger: each direct child rises in slightly after the one before.
   Wrapped in no-preference so it never runs for reduced-motion visitors. */
@media (prefers-reduced-motion: no-preference) {
  .hero-stagger > * { animation: rise .9s var(--ease-out) both; }
  .hero-stagger > :nth-child(2) { animation-delay: .08s; }
  .hero-stagger > :nth-child(3) { animation-delay: .16s; }
  .hero-stagger > :nth-child(4) { animation-delay: .24s; }
  .hero-stagger > :nth-child(5) { animation-delay: .32s; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}


/* ---------------------------------------------------------------------------
   6. MEDIA: fixed shapes, no layout jump, no squashing
   --------------------------------------------------------------------------- */
.media {
  aspect-ratio: var(--ratio, 4 / 3);
  overflow: hidden;
  border-radius: var(--radius);
}
.media > img, .media > video {
  width: 100%; height: 100%;
  object-fit: cover;                       /* fill the frame, crop the overflow */
  object-position: var(--focus, 50% 50%);  /* set --focus to keep the bun / face in shot */
}
.media--square { --ratio: 1 / 1; }
.media--wide   { --ratio: 16 / 9; }
.media--tall   { --ratio: 4 / 5; }

/* Full-width photo band with a fluid height */
.photo-band {
  height: clamp(20rem, 12.5rem + 30vw, 45rem);
  overflow: hidden;
}
.photo-band img { width: 100%; height: 100%; object-fit: cover; }

/* Gentle CSS parallax drift, only where the browser supports scroll-driven
   animation (no JavaScript, no scroll listeners). Elsewhere the image just sits still. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .parallax img {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: cover;
    }
  }
}
@keyframes drift {
  from { transform: scale(1.12) translateY(-4%); }
  to   { transform: scale(1.12) translateY(4%); }
}


/* ---------------------------------------------------------------------------
   7. BUTTONS, LINKS, CARDS: one consistent ~0.3s eased hover
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: var(--space-s) var(--space-m);
  min-height: 44px;                                   /* comfortable tap target */
  font: 600 var(--step-0)/1.2 var(--font-body);
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  background: var(--c-accent); color: var(--c-ink);
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.btn:hover  { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.btn:active { transform: none; box-shadow: none; }
.btn--ghost { background: transparent; border-color: currentColor; color: var(--c-brand); }
.btn--ghost:hover { color: var(--c-ink); border-color: var(--c-accent); }

/* Underline that draws in from the left on hover */
.link-draw {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  padding-bottom: 2px;
  transition: background-size .35s var(--ease), color var(--dur) var(--ease);
}
.link-draw:hover, .link-draw[aria-current] { background-size: 100% 1.5px; }

/* Card with a slow image zoom on hover */
.card .media img { transition: transform .8s var(--ease-out); }
.card:hover .media img, .card:focus-within .media img { transform: scale(1.045); }


/* ---------------------------------------------------------------------------
   8. SCROLL REVEAL (pairs with the ~1KB IntersectionObserver script)
   The script only adds .reveal-ready to <html> when it can run, so with no
   JavaScript, or with reduced motion, content is simply visible.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
    transition-delay: var(--delay, 0ms);
  }
  .reveal-ready .reveal.in { opacity: 1; transform: none; }
}


/* ---------------------------------------------------------------------------
   9. REDUCED MOTION: the off switch. Keep this last.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}