/*
  Circleback — one-page consulting site (style.css)

  What this file is:
    The single stylesheet for the site. It implements the visual/UX
    system from the settled design spec (the contract):
      - 4-color system, 95% neutral (paper white ground, near-black body,
        one warm mid-gray for secondary, ONE deep-pine accent reserved
        strictly for the beat-2 specialty block + the CTA)
      - Fraunces (display/headings) + Inter (body/UI), with a robust
        system-font fallback stack so the page still looks right if the
        web fonts fail to load (offline / blocked)
      - the 8px spacing scale (8/16/24/40/64/96) used consistently
      - the 680-720px centered reading measure, mobile-first
      - the ND/ADHD rule set: no motion by default, >=44px tap targets,
        no meaning by color alone, nav never changes, etc.

  The responsive approach (the spec's hard requirement):
    The base styles ARE the mobile layout (the wireframe is the mobile
    layout). No max-width media query gates any content — desktop only
    adds breathing room on the canvas. The single column stays single
    column; nothing re-orders, hides, or jumps between breakpoints. The
    only breakpoint switch is the nav (inline bar >=640px, hamburger
    below) and a little more canvas padding on large screens.
    overflow-x: hidden on the body is the guard against any accidental
    horizontal scroll.
*/

/* ------------------------------------------------------------------ *
   1. Tokens — the spec's exact values, named so the page has one
      source of truth (and a future dark-mode fork is a token swap,
      not a rewrite).
   ------------------------------------------------------------------ */
:root {
  /* Color — 95% neutral (spec §4.1). */
  --bg: #FAFAF7;           /* warm paper white, not #FFFFFF */
  --ink: #1A1A18;          /* body text; 16.7:1 on the ground */
  --ink-soft: #6B6B66;     /* secondary: eyebrows, rules, footer; 5.1:1 */
  --accent: #2F5D50;       /* deep pine — specialty block + CTA ONLY */

  /* The spacing scale (spec §4.3): 8px base, only these gaps allowed. */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;

  /* Type scale (spec §4.2): clamp(mobile, fluid, desktop). */
  --fs-h1: clamp(30px, 26px + 1.5vw, 40px);   /* role line */
  --fs-eyebrow: 13px;                           /* fixed — small, caps */
  --fs-h2: clamp(22px, 19px + 0.6vw, 26px);    /* section statement */
  --fs-h3: clamp(17px, 16px + 0.3vw, 18px);    /* block headings */
  --fs-body: clamp(16.5px, 16px + 0.25vw, 17px);
  --fs-small: 14px;                             /* footer, quiet notes; never below 14px */

  /* Layout. */
  --measure: 700px;   /* reading width: 680-720px, centered */
  --nav-height: 64px; /* pinned nav bar height (also the scroll-margin) */

  /* Focus: thick, high-contrast, non-ambiguous (spec rule). */
  --focus: 2px solid #1A1A18;
}

/* ------------------------------------------------------------------ *
   2. Base / reset (deliberately small — plain CSS, no framework)
   ------------------------------------------------------------------ */
* { box-sizing: border-box; }

html {
  /* Smooth scroll is OFF by default (spec: jarring for some ND users;
     a nav click jumps instantly). */
  scroll-behavior: auto;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  /* Robust fallback stack: if the Google Fonts load fails (offline or
     blocked), the page still reads as a well-set document — serif
     display, sans body — not as unstyled text. */
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.55;
  /* Guard against any accidental horizontal scroll (spec: none at
     360px/768px/1280px). */
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

img, svg, video { max-width: 100%; }

/* Focus states: 2px+ high-contrast on every interactive element.
   Never outline:none. */
a:focus-visible,
button:focus-visible {
  outline: var(--focus);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ *
   3. The left-edge scroll progress rule (the one permitted motion)
   ------------------------------------------------------------------ *
   A thin track at the left edge; the fill's height is set by the
   inline script as the user scrolls (0-100%). It is pure
   orientation, aria-hidden, pointer-transparent. Under
   prefers-reduced-motion the fill is hidden entirely. */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: #E6E5DE;  /* a hair off the ground — quiet, no contrast claims */
  z-index: 50;
  pointer-events: none;
}
.progress__fill {
  width: 100%;
  height: 0%;
  background: var(--ink-soft); /* the rule is orientation, not CTA: NOT the accent */
}

@media (prefers-reduced-motion: reduce) {
  .progress__fill { display: none; }
}

/* ------------------------------------------------------------------ *
   4. Pinned nav — same at every scroll position, never changes
   ------------------------------------------------------------------ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background: var(--bg);
  border-bottom: 1px solid #E0DFD7;  /* a quiet rule, from the neutral family */
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0 var(--space-2);
}

.nav__wordmark {
  /* Wordmark in the display face — the one place the serif appears in
     the nav. Plain, small, calm (per the wireframe). */
  font-family: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--ink);
  text-decoration: none;
  min-height: 44px;      /* tap-target rule */
  display: inline-flex;
  align-items: center;
}

/* Inline nav list (>=640px): the five flat items, no dropdowns. */
.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-2);   /* >=16px between every target */
}

.nav__link {
  color: var(--ink);
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 500;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
}
/* Hover on a plain link: an underline, not a color-swap — nothing appears,
   nothing changes structure. */
.nav__link:hover { text-decoration: underline; }

/* The CTA. The accent color's second and final use on the page. */
.cta {
  background: var(--accent);
  color: var(--bg);            /* #FAFAF7 on #2F5D50 = 7.2:1 (spec) */
  text-decoration: none;
  font-weight: 600;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px var(--space-2);
  border-radius: 6px;
}
/* No hover-morphs (ND rule 1): the hover is an underline, nothing more. */
.cta:hover { text-decoration: underline; }

/* Coming-soon CTA state: the button keeps the accent look but is INERT (it's
   a <span>, not a link — the practice isn't taking clients yet, so there's no
   mailto to point at). Muted background + normal weight + no hover cursor so
   it reads as "not active yet" rather than a dead accent button. */
.cta--coming {
  background: var(--ink-soft);
  color: var(--bg);
  font-weight: 500;
  cursor: default;
  border: 1px solid var(--ink-soft);
}
.cta--coming:hover { text-decoration: none; }

/* The nav CTA is the small, persistent one (the big one lives in beat 3). */
.cta--nav { font-size: var(--fs-small); }

/* The hamburger: visible ONLY below 640px (see the media query at the
   bottom). Rendered as three plain bars. */
.nav__toggle {
  display: none;               /* mobile-only, enabled in the media query */
  background: none;
  border: 0;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.nav__toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
}

/* ------------------------------------------------------------------ *
   5. The page — one centered column, the only column
   ------------------------------------------------------------------ */
.page {
  /* 48px top padding keeps the first heading clear of the pinned nav
     (the nav's own height is handled by scroll-margin on each section). */
  max-width: var(--measure);
  margin: 0 auto;
  padding: calc(var(--nav-height) + var(--space-4)) var(--space-3) var(--space-5);
}

/* The beats. Section rhythm (spec §2): eyebrow -> one-line statement
   -> content chunks -> one next-step line, the same shape everywhere.
   Between-beat gaps are the largest on the page (96px) — the boundary
   is felt as a pause in the argument. */
.beat {
  /* scroll-margin-top: a deep-link (#background etc.) lands AT the beat
     with its label visible — the pinned nav never eats the heading. */
  scroll-margin-top: calc(var(--nav-height) + var(--space-3));
  padding-top: var(--space-6);
  border-top: 1px solid #E0DFD7;  /* the divider is a rule, not a gap trick */
}
.beat:first-child {
  padding-top: var(--space-4);    /* beat 1 has no preceding beat */
  border-top: 0;
}

/* The eyebrow: small, uppercase, letterspaced, gray — one controlled
   use of caps, for orientation only. */
.eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.eyebrow--accent { color: var(--accent); }  /* the accent's first use */

/* Headings: the display face (serif) for the letterhead signal. */
h1, h2, h3 {
  font-family: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  line-height: 1.2;
  color: var(--ink);
}
h1 { margin: 0 0 var(--space-3); font-size: var(--fs-h1); font-weight: 500; }
h2 { margin: 0 0 var(--space-3); font-size: var(--fs-h2); font-weight: 600; }
h3 { margin: 0 0 var(--space-2); font-size: var(--fs-h3); font-weight: 600; }

/* Chunks: 16px between paragraphs, 40px between blocks inside a beat
   (the spec's spacing scale). */
.beat p { margin: 0 0 var(--space-2); }
.beat .block,
.beat .receipt,
.beat .offering {
  margin-bottom: var(--space-4);
}
.beat p:last-child,
.beat .block:last-child,
.beat .receipt:last-child { margin-bottom: 0; }

/* The role line is the page's top sentence — the hero. */
.role-line { margin-bottom: var(--space-4); }

/* The thesis line in beat 2: one or two plain sentences, full-size. */
.thesis {
  margin: 0 0 var(--space-4);
  font-size: clamp(18px, 17px + 0.5vw, 21px);
}

/* The quiet continuation lines between beats — narrative, not CTA.
   They are secondary text (the gray that stays >=4.5:1). */
.quiet-line {
  margin: var(--space-4) 0 0;
  color: var(--ink-soft);
  font-size: var(--fs-small);
}
.quiet-line:last-child { margin-bottom: 0; }
.quiet-link {
  color: var(--ink);
  text-decoration: underline;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.quiet-link:hover { text-decoration-thickness: 2px; }

/* Beat 1: the receipts are plain blocks — bold lead phrase + the check. */
.receipts { margin-bottom: var(--space-4); }
.receipt p { margin-bottom: var(--space-2); }

/* The 'Why the small guys' sub-block: its own heading, then his words. */
.subhead {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-h3);
  font-weight: 600;
}

/* Beat 2: the specialty block — the ONE accented element on the page.
   Marked by border AND eyebrow AND label (never color alone). */
.specialty {
  border: 2px solid var(--accent);
  border-radius: 8px;
  padding: var(--space-3) var(--space-3);
  margin-bottom: var(--space-4);
}
.specialty .eyebrow { margin-bottom: var(--space-2); }
.specialty h3 { margin-bottom: var(--space-2); }

/* The live condition list: a short inline list that can take more
   items later without rework. */
.conditions {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-small);
}

/* Beat 3: the three co-equal offers — same shape, stacked, numbered. */
.offering {
  border-left: 2px solid #E0DFD7;
  padding-left: var(--space-2);
}
.offering h3 { margin-bottom: var(--space-1); }
.offering__who {
  color: var(--ink-soft);
  font-size: var(--fs-small);
}
.offering__price {
  margin-bottom: 0;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
/* The specialty offering carries the tag (text, not color-only). */
.tag {
  display: inline-block;
  margin-left: var(--space-1);
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
}

/* The one honest line between paid and free. */
.map-line {
  margin: var(--space-4) 0 0;
  font-size: clamp(17px, 16px + 0.4vw, 19px);
  font-weight: 500;
}

/* The free layer (a separate, clearly different block). */
.beat--free .eyebrow { color: var(--ink-soft); }

/*
   The seedling placeholder — the ONE open slot on the page.
   It is deliberately visually distinct from 'real' content: a dashed
   border (the classic 'not finished yet' signal, in the neutral
   palette) plus an explicit label, so nobody mistakes it for a link
   list. When the notes exist, this block gets replaced by the real
   list — same place, same size, zero rework (the spec's design).
*/
.seedling {
  border: 2px dashed #C9C8C0;
  border-radius: 8px;
  padding: var(--space-3);
}
.seedling__label {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.seedling__pending {
  font-weight: 600;
  color: var(--ink-soft);
}

/* The CTA block: the one real CTA, directly under the free block, the
   last major element before the footer. */
.cta-block {
  margin-top: var(--space-6);
  text-align: center;
}
.cta--big {
  font-size: clamp(17px, 16px + 0.4vw, 19px);
  padding: 12px var(--space-3);
}
.cta__support {
  margin: var(--space-3) auto 0;
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: var(--fs-small);
}

/* ------------------------------------------------------------------ *
   6. Footer
   ------------------------------------------------------------------ */
.footer {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-5) var(--space-3) var(--space-5);
  border-top: 1px solid #E0DFD7;
  color: var(--ink-soft);
  font-size: var(--fs-small);
}
.footer p { margin: 0 0 var(--space-1); }
.footer p:last-child { margin-bottom: 0; }
.footer__wordmark {
  font-family: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--ink);
}
.footer__mail {
  color: var(--ink);
  /* The footer mail link is a tap target too. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer__mail:hover { text-decoration: underline; }
.footer__note { color: var(--ink-soft); }

/* ------------------------------------------------------------------ *
   7. Responsive switches — the only breakpoints on the page
   ------------------------------------------------------------------ */
/* <=640px: the inline nav list becomes the hamburger menu. The menu
   itself is a full-width panel below the bar (the spec: 'when opened it
   shows the full labeled list, not a flyout'). It stays open through
   scroll (state survives scroll) and closes on link tap or Escape
   (wired in index.html). Nothing else on the page changes here — the
   wireframe IS the mobile layout. */
@media (max-width: 640px) {
  .nav__toggle { display: inline-flex; }

  .nav__menu {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid #E0DFD7;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3) var(--space-3);
    display: none;      /* hidden until the toggle opens it... */
  }
  .nav__menu.is-open { display: flex; }  /* ...this way */

  .nav__link {
    justify-content: flex-start;
    font-size: var(--fs-body);
    padding: 0;
  }
  .cta--nav {
    justify-content: center;
    margin-top: var(--space-1);
  }
}

/* >=960px: desktop adds breathing room on the canvas only (the spec:
   'desktop then only adds: more breathing room on the canvas, the
   pinned nav bar with the full wordmark + beat links, and the
   left-edge progress rule' — the rule is already there; the nav is
   already inline above 640px). No re-ordering, no layout change. */
@media (min-width: 960px) {
  .page { padding-left: var(--space-5); padding-right: var(--space-5); }
  .footer { padding-left: var(--space-5); padding-right: var(--space-5); }
  .nav { padding-left: var(--space-3); padding-right: var(--space-3); }
}

/* ------------------------------------------------------------------ *
   8. Reduced motion — stated explicitly, per the spec. There is
      nothing to reduce (the only motion is the progress rule, which is
      hidden above), but the declaration is the demonstration: the page
      says, in code, that it honors the preference.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}