/* Webfonts — all three are free Google Fonts.
   Instrument Serif (display), Hanken Grotesk (body), Space Mono (labels/times/footnotes). */
/* cyrillic-ext */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* vietnamese */
/* latin-ext */
/* latin */
/* latin-ext */
/* latin */
/* latin-ext */
/* latin */
/* vietnamese */
/* latin-ext */
/* latin */
/* vietnamese */
/* latin-ext */
/* latin */
/* vietnamese */
/* latin-ext */
/* latin */
/* crib notes — color system
   Rest, without the rulebook. Paper carries ~70% of any layout, ink ~20%,
   slate blue ~7% (primary accent), olive ~3% (asides/labels/callouts only). */
:root {
  /* --- core four (authoritative brand palette) --- */
  --paper: #F1F0EA;        /* backgrounds, ~70% */
  --ink: #23303A;          /* text, ~20% */
  --slate-blue: #46657A;   /* primary accent, ~7% */
  --olive: #6B7A4E;        /* asides, labels, callouts only, ~3% */

  /* --- extended palette (from the brand brief, use sparingly) --- */
  --warm-sand: #E5E1D4;    /* secondary surface / quiet fills */
  --pale-sage: #EEF1E8;    /* olive-tinted surface for asides */
  --dusty-blue: #8FA6BA;   /* muted slate-blue tint, hairlines, meta */
  --clay: #A85C4A;         /* rare warm signal, "go in" / attention */

  /* --- neutrals derived from ink, for hairlines and muted text --- */
  --ink-70: #55606A;       /* muted / secondary text */
  --ink-45: #8A929A;       /* captions, disabled, placeholder */
  --rule: #D8D5CA;         /* hairline rules on paper */
  --rule-soft: #E4E1D6;    /* softest divider */

  /* --- semantic surface aliases --- */
  --surface-page: var(--paper);
  --surface-raised: #F7F6F1;   /* card / raised paper, a touch lighter */
  --surface-sunken: var(--warm-sand);
  --surface-aside: var(--pale-sage);

  /* --- semantic text aliases --- */
  --text-body: var(--ink);
  --text-muted: var(--ink-70);
  --text-faint: var(--ink-45);
  --text-accent: var(--slate-blue);
  --text-label: var(--olive);
  --text-on-slate: var(--paper);

  /* --- semantic line / accent aliases --- */
  --border-hairline: var(--rule);
  --border-strong: var(--ink);
  --accent: var(--slate-blue);
  --accent-quiet: var(--dusty-blue);
  --mark: var(--slate-blue);   /* the ✶ */
}

/* crib notes — global stylesheet entry point.
   Consumers link this one file. Keep to @import lines only. */
/* Webfonts — all three are free Google Fonts.
   Instrument Serif (display), Hanken Grotesk (body), Space Mono (labels/times/footnotes). */
/* cyrillic-ext */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* vietnamese */
/* latin-ext */
/* latin */
/* latin-ext */
/* latin */
/* latin-ext */
/* latin */
/* vietnamese */
/* latin-ext */
/* latin */
/* vietnamese */
/* latin-ext */
/* latin */
/* vietnamese */
/* latin-ext */
/* latin */
/* crib notes — color system
   Rest, without the rulebook. Paper carries ~70% of any layout, ink ~20%,
   slate blue ~7% (primary accent), olive ~3% (asides/labels/callouts only). */
:root {
  /* --- core four (authoritative brand palette) --- */
  --paper: #F1F0EA;        /* backgrounds, ~70% */
  --ink: #23303A;          /* text, ~20% */
  --slate-blue: #46657A;   /* primary accent, ~7% */
  --olive: #6B7A4E;        /* asides, labels, callouts only, ~3% */

  /* --- extended palette (from the brand brief, use sparingly) --- */
  --warm-sand: #E5E1D4;    /* secondary surface / quiet fills */
  --pale-sage: #EEF1E8;    /* olive-tinted surface for asides */
  --dusty-blue: #8FA6BA;   /* muted slate-blue tint, hairlines, meta */
  --clay: #A85C4A;         /* rare warm signal, "go in" / attention */

  /* --- neutrals derived from ink, for hairlines and muted text --- */
  --ink-70: #55606A;       /* muted / secondary text */
  --ink-45: #8A929A;       /* captions, disabled, placeholder */
  --rule: #D8D5CA;         /* hairline rules on paper */
  --rule-soft: #E4E1D6;    /* softest divider */

  /* --- semantic surface aliases --- */
  --surface-page: var(--paper);
  --surface-raised: #F7F6F1;   /* card / raised paper, a touch lighter */
  --surface-sunken: var(--warm-sand);
  --surface-aside: var(--pale-sage);

  /* --- semantic text aliases --- */
  --text-body: var(--ink);
  --text-muted: var(--ink-70);
  --text-faint: var(--ink-45);
  --text-accent: var(--slate-blue);
  --text-label: var(--olive);
  --text-on-slate: var(--paper);

  /* --- semantic line / accent aliases --- */
  --border-hairline: var(--rule);
  --border-strong: var(--ink);
  --accent: var(--slate-blue);
  --accent-quiet: var(--dusty-blue);
  --mark: var(--slate-blue);   /* the ✶ */
}

/* crib notes — typography
   Instrument Serif  → display + headings, ALWAYS lowercase, italic for emphasis
   Hanken Grotesk    → body text
   Space Mono        → small labels, schedule times, footnotes */
:root {
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "Space Mono", "SFMono-Regular", ui-monospace, monospace;

  /* type scale — display leans large and airy */
  --fs-display: 4.5rem;    /* 72px cover / hero */
  --fs-h1: 3rem;           /* 48px */
  --fs-h2: 2.125rem;       /* 34px */
  --fs-h3: 1.5rem;         /* 24px */
  --fs-lead: 1.3125rem;    /* 21px opening paragraph */
  --fs-body: 1.0625rem;    /* 17px body */
  --fs-small: 0.9375rem;   /* 15px */
  --fs-label: 0.75rem;     /* 12px mono label */
  --fs-micro: 0.6875rem;   /* 11px footnote */

  /* line-heights (unitless ratios) */
  --lh-tight: 1.05;        /* @kind other */
  --lh-snug: 1.25;         /* @kind other */
  --lh-body: 1.6;          /* @kind other */
  --lh-loose: 1.75;        /* @kind other */

  --tracking-label: 0.18em;  /* mono labels are spaced out */
  --tracking-tight: -0.01em; /* display */
  --tracking-normal: 0;
}

/* crib notes — spacing, radius, layout
   Generous whitespace is a brand rule. Scale is roomy on purpose. */
:root {
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */

  /* editorial measure — keep lines short and readable */
  --measure: 62ch;
  --measure-narrow: 46ch;
  --page-max: 720px;

  /* corners stay gentle, never app-like. mostly square, softly eased. */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* the system avoids heavy shadow. these are barely-there paper lifts. */
  --shadow-none: none;
  --shadow-card: 0 1px 2px rgba(35, 48, 58, 0.04), 0 8px 24px rgba(35, 48, 58, 0.05);
  --shadow-raised: 0 1px 3px rgba(35, 48, 58, 0.06), 0 14px 40px rgba(35, 48, 58, 0.07);
}

/* crib notes — base element defaults.
   Light-touch resets so raw HTML already reads like the brand.
   Consumers get these for free by linking styles.css. */
:root { color-scheme: light; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* headings: Instrument Serif, always lowercase */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  color: var(--ink);
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* italic is the emphasis gesture in display type */
h1 em, h2 em, h3 em { font-style: italic; }

p { margin: 0 0 var(--space-5); max-width: var(--measure); text-wrap: pretty; }

em { font-style: italic; }
strong { font-weight: 600; }

a { color: var(--text-accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--slate-blue) 35%, transparent); transition: border-color 160ms ease, color 160ms ease; }
a:hover { color: color-mix(in srgb, var(--slate-blue) 80%, var(--ink)); border-bottom-color: var(--slate-blue); }

hr { border: none; border-top: 1px solid var(--border-hairline); margin: var(--space-7) 0; }

small { font-size: var(--fs-small); }

::selection { background: color-mix(in srgb, var(--slate-blue) 22%, transparent); }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }

/* the mark — a small slate-blue star, doubles as footnote glyph */
.cn-star { color: var(--mark); font-style: normal; }



    body { margin:0; background:#DED9CB; color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased; }
    * { box-sizing:border-box; }
    a { color:var(--slate-blue); text-decoration:none; }
    a:hover { color:color-mix(in srgb, var(--slate-blue) 82%, var(--ink)); }
    .frame { max-width:1120px; margin:0 auto; background:var(--paper); border-left:1px solid var(--ink); border-right:1px solid var(--ink); min-height:100vh; display:flex; flex-direction:column; overflow-x:hidden; }
    .headmeta { display:flex; justify-content:space-between; gap:12px; padding:9px 26px; border-bottom:1px solid var(--ink); font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase; color:#8a8574; }
    .headmain { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 26px; border-bottom:1px solid var(--ink); background:var(--paper); position:sticky; top:0; z-index:20; flex-wrap:wrap; }
    .cn-nav { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
    .cn-navlink { font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-muted); border-bottom:1.5px solid transparent; padding-bottom:3px; transition:color 160ms ease, border-color 160ms ease; white-space:nowrap; }
    .cn-navlink:hover { color:var(--ink); border-bottom-color:var(--slate-blue); }
    nav[data-page="method"] a[data-nav="method"],
    nav[data-page="two-weeks"] a[data-nav="two-weeks"],
    nav[data-page="about"] a[data-nav="about"],
    nav[data-page="shop"] a[data-nav="shop"],
    nav[data-page="families"] a[data-nav="families"],
    nav[data-page="letter"] a[data-nav="letter"] { color:var(--ink); border-bottom-color:var(--slate-blue); }
    .cell { border-top:1px solid var(--ink); padding:52px 40px; }
    .cell.first { border-top:0; }
    .cell.ink { background:var(--ink); }
    .coord { display:flex; align-items:baseline; justify-content:space-between; gap:16px; font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--olive); margin:0 0 16px; }
    .coord .n { color:#b0ac9e; letter-spacing:0.1em; }
    .h-display { font-family:var(--font-display); font-weight:400; text-transform:lowercase; letter-spacing:-0.01em; color:var(--ink); }
    .split { display:grid; grid-template-columns:1fr; gap:var(--space-5); }
    .split .l { min-width:0; }
    .split .r { min-width:0; }
    .cn-body { font-family:var(--font-body); font-size:1.0625rem; line-height:1.7; color:var(--ink); }
    .spec3 { display:grid; grid-template-columns:1fr; border-top:1px solid #E4E1D6; margin-top:26px; }
    .spec3 > div { border-bottom:1px solid #E4E1D6; padding:22px 0; }
    .shopgrid { display:grid; grid-template-columns:1fr; border-top:1px solid var(--ink); border-left:1px solid #D8D5CA; margin-top:8px; }
    .shopgrid > div { border-right:1px solid #D8D5CA; border-bottom:1px solid #D8D5CA; display:flex; flex-direction:column; }
    .cn-timeline span[style*="min-width"] { min-width:10.5em !important; }
    @media (max-width:767px) {
      .cn-timeline [style*="align-items: baseline"] { flex-direction:column !important; align-items:flex-start !important; gap:4px !important; }
      .cn-timeline span[style*="min-width"] { min-width:0 !important; }
    }
    .cn-footlink { font-family:var(--font-mono); font-size:var(--fs-small); letter-spacing:0.06em; text-transform:uppercase; color:var(--dusty-blue); border-bottom:1px solid transparent; padding-bottom:2px; transition:color 160ms ease, border-color 160ms ease; }
    .cn-footlink:hover { color:var(--paper); border-bottom-color:var(--dusty-blue); }
    .frame a[style*="inline-flex"], .frame button[style*="inline-flex"] { white-space:nowrap; flex:none; }
    @media (min-width:560px) { .shopgrid { grid-template-columns:1fr 1fr; } }
    @media (min-width:760px) {
      .spec3 { grid-template-columns:repeat(3,1fr); border-top:1px solid var(--ink); }
      .spec3 > div { border-bottom:0; border-right:1px solid #D8D5CA; padding:28px 26px; }
      .spec3 > div:last-child { border-right:0; }
      .cn-body { font-size:1.1rem; }
      .cell { padding:72px 64px; }
    }
    @media (min-width:820px) {
      .split { grid-template-columns:1.12fr 0.88fr; gap:0; align-items:start; }
      .split .l { padding-right:var(--space-8); }
      .split .r { border-left:1px solid #D8D5CA; padding-left:var(--space-8); }
      .split.center-r .r { align-self:center; }
    }
    @media (min-width:900px) { .shopgrid { grid-template-columns:1fr 1fr 1fr; } }
    .aboutgrid { display:grid; grid-template-columns:1fr; gap:var(--space-6); align-items:start; }
    @media (min-width:720px) { .aboutgrid { grid-template-columns:minmax(200px, 300px) 1fr; gap:var(--space-8); } }
    .cn-menulink { font-family:var(--font-display); font-weight:400; text-transform:lowercase; font-size:2rem; line-height:1; letter-spacing:-0.01em; color:var(--ink); padding:var(--space-4) 0; border-bottom:1px solid var(--rule-soft); transition:color 160ms ease; }
    .cn-menulink:hover { color:var(--slate-blue); }
    @media (max-width:767px) {
      .cn-nav { display:none !important; }
      .cn-hamburger { display:flex !important; }
      .cn-nav.cn-open {
        display:flex !important;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:var(--paper);
        border-bottom:1px solid var(--ink);
        padding:8px 26px 20px;
        z-index:40;
        box-shadow:0 16px 28px rgba(35,48,58,0.10);
      }
      .cn-nav.cn-open .cn-navlink {
        display:block;
        width:100%;
        font-size:0.72rem;
        padding:15px 0;
        border-bottom:1px solid var(--rule-soft);
      }
      .cn-nav.cn-open a[href*="typeform"] {
        margin-top:16px;
        width:100%;
        text-align:center;
      }
      .frame a[style*="inline-flex"], .frame button[style*="inline-flex"] { white-space:normal !important; max-width:100%; text-align:center; }
      .cell { padding:44px 22px; }
    }