/* ============================================================
   kroma.fit — shared stylesheet

   Design notes
   -----------
   • System serif for headings, system sans for body — no web font
     fetch on those surfaces. Italianno (the calligraphic brand
     wordmark) is self-hosted from italianno-latin.woff2 in this
     repo; no third-party font CDN is contacted at any point on the
     deployed site. Keeps the privacy story honest end-to-end.
   • Warm cream / brown palette matches the app exactly.
   • Subtle textile-weave background motif at section breaks ties
     the visual to the app's content focus.
   • Mobile-first; max-width 720px keeps long-form readable.
   ============================================================ */

/* Italianno is the brand calligraphic wordmark face — used on the
   "kroma" header text and matches the app's bundled Italianno. We
   self-host the woff2 (Latin subset, ~37kB) so no request to
   fonts.googleapis.com or fonts.gstatic.com is made when the site
   loads. font-display:swap renders system-serif until the font is
   ready (typically <100ms on first load, instant on repeat visits
   thanks to the browser cache); avoids a flash of invisible text. */
@font-face {
  font-family: 'Italianno';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('italianno-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg:           #f8f6f1;
  --bg-card:      #fffdf7;
  --bg-soft:      #f1ece1;
  --text:         #221d18;
  --text-soft:    #564a3f;
  --text-mute:    #8a7e72;
  --accent:       #8b5a2b;
  --accent-soft:  #c4956a;
  --accent-deep:  #5e3a18;
  --border:       #e6dfd1;
  --border-soft:  #efe9dc;
  --max-w:        720px;
  --max-w-narrow: 600px;

  --ff-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ff-display: ui-serif, Charter, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --ff-brand:   'Italianno', cursive, Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ────────── layout ────────── */

.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 24px 22px 96px;
}

header.site {
  padding: 18px 0 28px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* Brand wordmark — matches the app's header treatment exactly:
   Italianno calligraphic script, lowercase ("kroma"), warm-brown
   accent. Italianno glyphs are tall, narrow, and visually airy —
   they need real scale to read as elegant rather than spidery, so
   the wordmark size sits ABOVE h1 (2.6rem) on the same page. Fluid
   clamp gives min 2.8rem on tiny screens, max 4rem on wide screens,
   growing with viewport so the brand never looks lost or oversized.
   text-transform on CSS rather than changing the HTML literal so
   SEO / screen readers still see "Kroma" as a proper noun. */
header.site .brand {
  font-family: var(--ff-brand);
  font-size: clamp(2.8rem, 6.5vw, 4rem);
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 0;
  text-transform: lowercase;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

/* Inset K mark next to wordmark. Scales with the wordmark via the
   same clamp — proportions stay constant whether the header is
   320px wide or 720px wide. Border-radius bumped slightly at the
   larger size so the rounded corners read at a glance.

   Optical-centring caveat: Italianno's visible glyph cluster
   (cap-height down through x-height) sits in the UPPER portion
   of the line-box because the deep descenders inflate the box
   downward. align-items:center on the flex parent therefore
   places the icon LOWER than where the eye reads as "the middle
   of kroma". translateY pulls the icon up by roughly half a
   descender's depth so its centre lands on the visual middle of
   the script (between the cap-line and the baseline, not between
   the cap-line and the descender-bottom). */
header.site .brand::before {
  content: "";
  width: clamp(32px, 4vw, 42px);
  height: clamp(32px, 4vw, 42px);
  background: var(--accent) url("favicon.svg") center/contain no-repeat;
  border-radius: 8px;
  display: inline-block;
  flex-shrink: 0;
  transform: translateY(-0.12em);
}

header.site nav {
  display: flex;
  gap: 22px;
  font-size: 0.95rem;
}

header.site nav a {
  color: var(--text-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.15s, border-color 0.15s;
}

header.site nav a:hover,
header.site nav a.active {
  color: var(--accent);
  border-color: var(--accent);
}

footer.site {
  margin-top: 80px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  font-size: 0.84rem;
  color: var(--text-mute);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--ff-body);
}

footer.site a { color: var(--text-soft); text-decoration: none; }
footer.site a:hover { color: var(--accent); }

/* ────────── type ────────── */

h1, h2, h3 {
  font-family: var(--ff-display);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 2em 0 0.5em;
}

h1 {
  font-size: 2.6rem;
  line-height: 1.12;
  margin-top: 0.2em;
  letter-spacing: -0.025em;
}

h2 {
  font-size: 1.6rem;
  margin: 2.2em 0 0.6em;
}

h3 {
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--ff-body);
  letter-spacing: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-size: 0.78rem;
}

p, ul, ol { margin: 0.85em 0; }
ul, ol { padding-left: 1.4em; }
li { margin: 0.35em 0; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--accent-soft);
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.15s;
}
a:hover { text-decoration-color: var(--accent); }

code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}

strong { font-weight: 600; color: var(--text); }
em { font-style: italic; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 48px 0;
}

.muted {
  color: var(--text-mute);
  font-size: 0.88rem;
}

/* ────────── ornament: textile-weave divider ──────────
   Three macro-fabric photos sit between major sections —
   weft (horizontal threads), warp (vertical threads),
   selvedge (the finished edge of woven cloth).  Image is
   the visual; the term sits under it as a small caption.

   Image renders at ~120px on screen (source 300×300 for
   2× retina) so the divider stays a divider, not a hero
   photograph.  Border-radius softens the square crop;
   subtle shadow lifts it off the cream page background. */

.divider {
  margin: 64px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  user-select: none;
}

.divider img {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  /* The Gemini fabric photos are already warm cream + brown,
     so a soft sepia-ish drop-shadow keeps them rooted to the
     page rather than floating on a hard rectangle.  No border
     — the slight irregularity of the natural-fabric edge does
     better visual work than a 1px line would. */
  box-shadow: 0 2px 12px -2px rgba(94, 58, 24, 0.18);
  object-fit: cover;
  display: block;
}

.divider-term {
  color: var(--accent-soft);
  font-size: 0.85rem;
  letter-spacing: 0.45em;
  font-family: var(--ff-display);
  text-transform: lowercase;
  /* Optical centring: the wide tracking creates trailing
     space on the right that visually pulls the word.  A
     half-em right margin counter-shifts it back to centre
     under the image above. */
  margin-right: -0.45em;
}

/* ────────── hero ────────── */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 56px;
  align-items: center;
  padding: 24px 0 32px;
}

.hero-content {
  /* min-width:0 prevents the column from blowing out on long unbroken
     words; without it grid items default to min-content sizing and the
     headline can push the visual column off the right edge. */
  min-width: 0;
}

.hero h1 {
  font-size: 2.8rem;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
  line-height: 1.05;
  /* The grid column constrains the headline now; explicit max-width
     removed so the text fills the column it was given. */
}

.hero .lede {
  font-size: 1.18rem;
  color: var(--text-soft);
  line-height: 1.55;
  margin: 0 0 24px;
  /* Same as h1 — column constraint replaces explicit max-width. */
}

.hero .lede strong { color: var(--text); }

.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-visual img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 320px;
  /* aspect-ratio reserves the slot's height before the image loads so
     the rest of the page doesn't jump when it arrives — keeps CLS at 0. */
  aspect-ratio: 320 / 640;
  /* Soft drop shadow gives the phone mockup depth without a hard border.
     Remove or soften if the AI-generated image bakes its own shadow in. */
  filter: drop-shadow(0 12px 32px rgba(30, 27, 22, 0.18));
}

/* Mobile: stack vertically, image below text. Breakpoint matches the
   layout transition used elsewhere in the file. */
@media (max-width: 720px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 12px 0 20px;
  }
  .hero-visual img {
    max-width: 260px;
  }
}

/* ────────── feature grid ────────── */

.features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 24px 0;
}

.feature {
  padding: 20px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.feature h3 {
  margin: 0 0 8px;
  color: var(--accent);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 500;
}

.feature p {
  margin: 0;
  font-size: 0.94rem;
  color: var(--text-soft);
  line-height: 1.5;
}

/* ────────── pull-quote / opinionated section ────────── */

.opinion {
  margin: 24px 0;
  padding: 28px 28px 24px;
  background: var(--bg-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0;
}

.opinion .claim {
  font-family: var(--ff-display);
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--text);
  margin: 0 0 12px;
  letter-spacing: -0.015em;
}

.opinion p {
  margin: 0.6em 0 0;
  font-size: 0.96rem;
  color: var(--text-soft);
  line-height: 1.6;
}

.opinion p:first-of-type { margin-top: 8px; }

.opinion em { color: var(--accent-deep); font-style: italic; }

/* ────────── responsive ────────── */

@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { padding: 18px 18px 64px; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.35rem; }
  .hero h1 { font-size: 2.2rem; }
  .hero .lede { font-size: 1.05rem; }
  header.site { padding: 14px 0 20px; margin-bottom: 24px; gap: 12px; }
  header.site nav { gap: 16px; font-size: 0.9rem; }
  /* Mobile brand sizing. The desktop clamp would still resolve to its
     2.8rem floor on a 360px viewport, but we want the wordmark to
     scale down a touch further on small screens so the header fits
     comfortably alongside the nav. Icon scales proportionally. The
     translateY optical-centring rule on ::before is inherited from
     the base styles — no need to repeat it here. */
  header.site .brand { font-size: 2.4rem; gap: 10px; }
  header.site .brand::before { width: 30px; height: 30px; border-radius: 7px; }
  .features { grid-template-columns: 1fr; gap: 14px; }
  .opinion { padding: 22px; }
  .opinion .claim { font-size: 1.25rem; }
  hr, .divider { margin: 36px 0; }
}