/* ============================================================
   INFOCUS INSTITUTE — Design tokens + base + components
   Source of truth: ../../../DESIGN-SYSTEM.md  (palette: brand-style.md)
   This file is the foundation the static build will reuse.
   HTML is OUTPUT — style here, never inline in generated pages.
   ============================================================ */

/* ---- Fonts — three tiers (brand-style.md) -----------------
   Headers   = Hammersmith One  (self-hosted, "Hammer" in the guide)
   Subheads  = Hanken Grotesk   (Google — subtitles, sub-headings, labels)
   Body+logo = Didact Gothic    (Google)
   Hammersmith One is self-hosted from the file Kai supplied so the
   site renders offline; Hanken + Didact load via <link> in the head.
   font-display: swap everywhere (FOIT fix — 2013 archive lesson).
   ---------------------------------------------------------- */
@font-face {
  font-family: "Hammersmith One";
  src: url("../fonts/HammersmithOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
/* Metric-matched fallback: Arial overridden to Hammersmith One's measured metrics
   (ascent 90.1%, descent 35%, ~95% of Arial's width) so the font-swap causes NO layout shift.
   Overrides divided by size-adjust per CSS Fonts L5 (size-adjust scales the override values too). */
@font-face {
  font-family: "Hammersmith One Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 95.05%;
  ascent-override: 94.8%;
  descent-override: 36.82%;
  line-gap-override: 0%;
}

:root {
  /* ---- Colour — Paper tones (always start here) ---- */
  --paper-base:    #F7F3EA;   /* Warm Off-White — the page ground (hybrid: between cream & white) */
  --paper-ivory:   #F0EAD6;   /* Ivory Cream — warmer accent ground */
  --paper-offwhite:#F5F5F5;   /* Off-White — content-dense sections */
  --paper-white:   #FFFFFF;   /* White — cards */

  /* ---- Colour — Accent backgrounds ---- */
  --acc-peach: #FFE1D0;       /* Warm Peach — testimonials, community warmth */
  --acc-sage:  #E8ECE5;       /* Soft Sage — about, contemplative */
  --acc-mint:  #C6D3CB;       /* Cool Mint — desaturated ~50% (was #C0D9C9) — practice / contemplative sections */

  /* ---- Colour — Dark grounds (sparingly) ---- */
  --dark-teal:   #0E9594;     /* Muted Teal */
  --dark-salmon: #FFA07A;     /* Light Salmon */

  /* ---- Brand + ink ---- */
  --vermillion:      #FF2400; /* Infocus Vermillion — brand accent, large fills */
  --vermillion-hover:#D81F00; /* hover / pressed */
  --vermillion-ink:  #C81E00; /* AA-safe link/overline text on light grounds (≥4.5:1) */

  /* CTA button fill — SAMPLED from the Voice of the Blank Page Systeme buttons */
  --cta:       #F95A2C;
  --cta-hover: #E0481D;

  /* Doodle / icon palette — teal · salmon · black (Kai's ink doodles, tinted) */
  --doodle-teal:   #0E9594;
  --doodle-salmon: #FFA07A;
  --doodle-black:  #1E1A16;

  --ink:   #1E1A16;           /* warm near-black — headings, wordmark */
  --text:  #2A2520;           /* body copy */
  --muted: #6B635A;           /* captions, meta (~4.6:1 on ivory) */
  --line:  #E2DAC6;           /* warm hairline on ivory/white */
  --line-strong: #CFC6B0;

  /* ---- Semantic roles (what the build references) ---- */
  --bg:      var(--paper-base);
  --surface: var(--paper-white);
  --accent:  var(--vermillion);
  --link:    var(--vermillion-ink);

  /* Gold — secondary warm accent (from the live infocus.institute brand) */
  --gold:      #FEC169;
  --gold-deep: #E9A33C;       /* stronger gold for fills/marks */
  --gold-ink:  #9A6B0E;       /* AA-safe gold text on light grounds */

  /* Deep tones — complementaries/contrasts to the warm range, used sparingly for depth */
  --sienna:         #9A4B2C;  /* burnt sienna — deep earthy warm */
  --turquoise-deep: #0E5E5A;  /* deep turquoise (deepened teal) */
  --indigo:         #2A3A57;  /* charcoal blue / indigo — cool contrast to cream */

  /* Paper grain — subtle tiling transparent noise, layered over the grounds */
  --paper-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.1'/%3E%3C/svg%3E");

  /* ---- Type families — three tiers ---- */
  --font-display: "Hammersmith One", "Hammersmith One Fallback", system-ui, -apple-system, Arial, sans-serif;  /* headers — metric-matched fallback eliminates the swap jump */
  --font-subhead: "Hanken Grotesk", system-ui, -apple-system, sans-serif;    /* secondary display — subtitles, sub-headings, labels */
  --font-body:    "Didact Gothic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-button:  "Hanken Grotesk", system-ui, sans-serif;  /* buttons — Hanken 600 (consolidated from Montserrat) */
  --font-serif:   "Newsreader", Georgia, "Times New Roman", serif; /* literary voice — pull-quotes, contemplative moments */

  /* ---- Type scale (fluid) ---- */
  --fs-display:  clamp(2.6rem, 6vw, 5rem);
  --fs-h1:       clamp(2rem, 4.4vw, 3.4rem);
  --fs-h2:       clamp(1.55rem, 3vw, 2.3rem);
  --fs-h3:       clamp(1.2rem, 2vw, 1.55rem);
  --fs-subtitle: clamp(1.05rem, 1.6vw, 1.3rem);
  --fs-lead:     clamp(1.15rem, 1.5vw, 1.4rem);
  --fs-body:     1.0625rem;   /* 17px */
  --fs-small:    0.9375rem;   /* 15px */
  --fs-overline: 0.8125rem;   /* 13px, letterspaced caps */

  --lh-tight: 1.05;
  --lh-head:  1.15;
  --lh-body:  1.6;

  /* ---- Spacing scale ---- */
  --space-2xs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  .75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* ---- Layout ---- */
  --page-max: 1080px;
  --reading:  64ch;
  --gutter:   clamp(20px, 5vw, 56px);

  /* ---- Radius — soft/editorial, never SaaS-pill on structure ---- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ---- Elevation — soft, warm, low ---- */
  --shadow-card: 0 1px 2px rgba(30,26,22,.05), 0 10px 30px rgba(30,26,22,.07);
  --shadow-lift: 0 2px 6px rgba(30,26,22,.08), 0 18px 44px rgba(30,26,22,.11);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur:  .28s;
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--bg);
  background-image: var(--paper-noise);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* HEADING SYSTEM (two tiers):
   · h1 / h2 = SECTION TITLES → Hammersmith One, UPPERCASE (loud, intentional)
   · h3       = CONTENT SUB-HEADINGS → Hanken Grotesk, bold, REGULAR case (quiet, readable)
   Card titles (.postcard__title/.shopcard__title/.post-preview__title) override h3 to keep caps. */
h1, h2 {
  font-family: var(--font-display);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: var(--lh-head);
  font-weight: 400;
  margin: 0 0 var(--space-md);
  text-wrap: balance;          /* WORD-WRAP RULE: headings break into even lines, no lone last word */
}
h3 {
  font-family: var(--font-subhead);
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.25;
  font-weight: 600;
  margin: 0 0 var(--space-md);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 var(--space-md); max-width: var(--reading); text-wrap: pretty; }  /* no orphan/widow last words */

a { color: var(--link); text-underline-offset: .15em; }
a:hover { color: var(--vermillion-hover); }

img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 2px solid var(--vermillion);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   TEXT REGISTERS
   ============================================================ */
.display {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: .01em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.subtitle {
  font-family: var(--font-subhead);
  font-size: var(--fs-subtitle);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
}
.overline {
  font-family: var(--font-body);     /* Didact Gothic caps — thin & fine at small scale (not Bebas) */
  text-transform: uppercase;
  font-size: var(--fs-overline);
  letter-spacing: .22em;
  color: var(--vermillion-ink);
  font-weight: 400;
  max-width: none;                   /* don't inherit p's 64ch box — so text-align:center actually centres */
}
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--text); max-width: 38ch; }
.small { font-size: var(--fs-small); color: var(--muted); }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.wrap { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--space-3xl); }
.section--tight { padding-block: var(--space-2xl); }

.bg-ivory    { background: var(--paper-ivory); }
.bg-offwhite { background: var(--paper-offwhite); }
.bg-white    { background: var(--paper-white); }
.bg-peach    { background: var(--acc-peach); }
.bg-sage     { background: var(--acc-sage); }
.bg-mint     { background: var(--acc-mint); }
.bg-teal     { background: var(--dark-teal); color: var(--paper-white); }
/* layer the paper grain over every tinted ground (keeps the colour, adds texture) */
.bg-ivory, .bg-offwhite, .bg-white, .bg-peach, .bg-sage, .bg-mint { background-image: var(--paper-noise); }
.bg-teal h1, .bg-teal h2, .bg-teal h3 { color: var(--paper-white); }

/* ---- Texture overlays — light SUBTLE-DIRT tile only (the seamless keeper); organic-paper DROPPED, intensity radically reduced ---- */
.bg-peach, .bg-sage, .bg-mint, .bg-ivory { position: relative; isolation: isolate; }
.bg-peach > *, .bg-sage > *, .bg-mint > *, .bg-ivory > * { position: relative; z-index: 1; }
.bg-peach::before, .bg-sage::before, .bg-mint::before, .bg-ivory::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: url(../img/textures/png/subtle-dirt-pattern.png) center / 460px repeat;
  mix-blend-mode: multiply; opacity:.13; }
/* cream content sections keep only a whisper of the same tile */
.section:not([class*="bg-"])::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: url(../img/textures/png/subtle-dirt-pattern.png) center / 460px repeat; mix-blend-mode: multiply; opacity:.08; }
.section { position: relative; }
.section:not([class*="bg-"]) > * { position: relative; z-index: 1; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-button); /* Montserrat 600 — weighted; Didact has no bold, Bebas too loud */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;            /* Montserrat runs wide — tighten the tracking */
  font-size: .9rem;
  line-height: 1;
  padding: .85em 1.4em;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }

/* Primary — CTA orange (sampled from VBP buttons), white bold text */
.btn--primary { background: var(--cta); color: #fff; }
.btn--primary:hover { background: var(--cta-hover); color: #fff; }

/* Secondary — outline on paper */
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: var(--paper-ivory); }

/* Ghost — for use on dark grounds */
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn--ghost:hover { background: #fff; color: var(--ink); }

/* Text link button */
.btn--text {
  background: none; border: 0; padding: .4em 0;
  font-family: var(--font-body); text-transform: none; letter-spacing: 0;
  color: var(--vermillion-ink); text-decoration: underline; text-underline-offset: .2em;
}
.btn--text:hover { color: var(--vermillion-hover); }

/* ============================================================
   COMPONENTS
   ============================================================ */

/* ---- Wordmark + positioning lock-up ---- */
.wordmark {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: .08em;
  color: var(--ink);
  text-decoration: none;
  display: inline-block;
}
.positioning { font-size: var(--fs-lead); line-height: 1.5; max-width: 30ch; color: var(--text); }

/* ---- Three-CTA cluster (the hero decision) ---- */
.cta-cluster {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(3, 1fr);
  max-width: 760px;
}
.cta-card {
  display: flex; flex-direction: column; gap: .35em;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cta-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--vermillion); }
.cta-card__verb { font-family: var(--font-subhead); text-transform: uppercase; font-size: 1.3rem; font-weight: 600; letter-spacing: .03em; line-height: 1.1; }
.cta-card__sub  { font-size: var(--fs-small); color: var(--muted); }
.cta-card__go   { margin-top: auto; color: var(--vermillion-ink); font-weight: 700; }

/* ---- Qualifier card ("Is this your space?") ---- */
.qualifier { background: var(--acc-sage); border-radius: var(--radius-lg); padding: var(--space-2xl); }
.qualifier__hook { font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-h2); color: var(--ink); max-width: 18ch; line-height: 1.1; }
.qualifier__list { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: var(--space-sm); }
.qualifier__list li { position: relative; padding-left: 1.6em; max-width: 52ch; }
.qualifier__list li::before { content:""; position:absolute; left:0; top:.4em; width:15px; height:15px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 8 C2.5 4 8 1.6 11.5 4 C16 6 16.6 12.4 12 14.6 C7.4 16.6 3.4 14 4 9.4 Z' fill='%23FF2400'/%3E%3C/svg%3E"); }
.qualifier__list li:nth-child(3n+1)::before{ transform:rotate(9deg); }
.qualifier__list li:nth-child(3n+2)::before{ transform:rotate(-12deg); }
.qualifier__list li:nth-child(3n)::before{ transform:rotate(5deg); }

/* ---- Product card (split hero) ---- */
.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.product__media { background: var(--acc-mint); min-height: 280px; display: grid; place-items: center; color: var(--ink); }
.product__body { padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-sm); align-items: flex-start; }
.product__price { font-family: var(--font-display); font-size: 1.4rem; color: var(--vermillion-ink); }

/* ---- Testimonial — carries a doodle accent (teal/salmon/black ink) ---- */
.testimonial { background: var(--acc-peach); border-radius: var(--radius-lg); padding: var(--space-xl); }
.testimonial__doodle { height: 38px; width: auto; display: block; margin-bottom: var(--space-md); object-fit: contain; object-position: left center; }
/* hand-photo avatar (the infocus.institute treatment — hands, not faces) */
.testimonial__avatar { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; display: block;
  margin: 0 auto var(--space-md); border: 2px solid var(--surface); box-shadow: var(--shadow-card); }
.testimonial blockquote { margin: 0; font-size: var(--fs-lead); line-height: 1.45; color: var(--ink); max-width: 46ch; }
.testimonial cite { display: block; margin-top: var(--space-md); font-style: normal; font-weight: 400; color: var(--muted); font-size: .9rem; }  /* name must NOT be fatter than the quote (Didact has no bold) */

/* ---- Swatch (styleguide only) ---- */
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-md); }
.swatch { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.swatch__chip { height: 84px; }
.swatch__meta { padding: var(--space-sm); font-size: var(--fs-small); }
.swatch__meta b { display: block; color: var(--ink); font-weight: 700; }
.swatch__meta code { color: var(--muted); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .8rem; }

/* ---- Footer strip ---- */
.foot { border-top: 1px solid var(--line); padding-block: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-lg) var(--space-2xl); align-items: baseline; }
.foot a { color: var(--ink); text-decoration: none; }
.foot a:hover { color: var(--vermillion-ink); }
.foot .small { width: 100%; margin-top: var(--space-md); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 760px) {
  .cta-cluster { grid-template-columns: 1fr; }
  .product { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}