/* SimpleSiteBuilder. The shell the tool itself is dressed in.

   The look comes from the Balance design system, translated from the email
   guide into web tokens. Recorded in docs/decisions/0012-brand-the-tool.md,
   and written out in full in docs/brand.md.

   In one line: warm stone canvas, light cream card, dark serif headlines,
   cobalt backbone, warm gold for the highest intent action, one deep navy
   voice moment.

   This is NOT the styling of the sites the tool produces. Those are themed
   from the document, from the six design directions, in render.js from phase 2
   onwards. If this file ever leaks into a generated site, that is F-06 and it
   is a bug. */

/* ---- typefaces, served from our own address ---- */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/playfair-display-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;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/playfair-display-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/playfair-display-italic-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;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/playfair-display-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/geist-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;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- one token block governs every colour and size.
       Quality seven in section 3.3 of the method. ---- */

:root{
  /* surfaces */
  --canvas:#EFEDE8;      /* warm stone, behind the card */
  --paper:#FAF9F7;       /* the card itself */
  --white:#FFFFFF;       /* raised things sitting on the card */
  --tint:#F7F8FD;        /* lilac, the reframe card */

  /* text */
  --ink:#14171F;         /* headlines and strong text */
  --slate:#525A6A;       /* body copy */
  --muted:#6F7684;       /* captions and fine print. Guide says #8A909E,
                            which measures 3.20 on white and fails AA at the
                            12px it is used at. Darkened to the nearest tone
                            that passes. See docs/brand.md. */

  /* cobalt, the backbone */
  --cobalt:#2A4BE2;
  --cobalt-deep:#1E33BB;
  --cobalt-bright:#7E97FF; /* guide says #6E8BFF, 4.38 on navy, just short */

  /* gold, the single highest intent action */
  --gold:#F5B642;
  --gold-deep:#DFA53D;
  --gold-tint:#FBF1DC;
  --gold-line:#E3C173;   /* guide says #F0D9A6, invisible on cream */
  --gold-ink:#8A6410;
  --on-gold:#14171F;     /* text on a gold button. Deliberately NOT redefined
                            for dark mode: gold stays gold, so its text stays
                            dark. Using --ink here was a real bug, caught by
                            scripts/check-contrast.mjs. */

  /* navy, the one voice moment */
  --navy:#14304A;
  --navy-body:#9AA1AE;
  --navy-head:#EEF0F5;

  /* the calm state, for when nothing needs doing */
  --calm-line:#B8C2E4;

  /* lines */
  --hairline:#EFECE6;
  --hairline-2:#DDD8CE;  /* guide says #E7E4DE, the card edge disappears */
  --hairline-3:#E8EAF6;

  /* type */
  --display:'Playfair Display', Georgia, 'Times New Roman', serif;
  --body:'Geist', Helvetica, Arial, sans-serif;

  /* shape and rhythm */
  --radius-card:24px;
  --radius-inset:20px;
  --radius-pill:999px;
  --pad-side:clamp(24px, 6vw, 34px);
  --measure:34ch;
}

/* Dark is derived from the navy voice band rather than invented, so a phone in
   dark mode still looks like this brand and not a different one. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --canvas:#0A131C;
    --paper:#11212F;
    --white:#16293A;
    --tint:#152A44;

    --ink:#EEF0F5;
    --slate:#B4BCC8;
    --muted:#8F98A6;

    --cobalt:#8AA2FF;
    --cobalt-deep:#6E8BFF;
    --cobalt-bright:#A8BAFF;

    --gold:#F5B642;
    --gold-deep:#DFA53D;
    --gold-tint:#2A2113;
    --gold-line:#5C4922;
    --gold-ink:#F0D9A6;

    --navy:#14304A;
    --navy-body:#AEB6C2;
    --navy-head:#EEF0F5;

    --calm-line:#38537D;

    --hairline:#1D3143;
    --hairline-2:#22394D;
    --hairline-3:#22364F;
  }
}
:root[data-theme="dark"]{
  --canvas:#0A131C;
  --paper:#11212F;
  --white:#16293A;
  --tint:#152A44;
  --ink:#EEF0F5;
  --slate:#B4BCC8;
  --muted:#8F98A6;
  --cobalt:#8AA2FF;
  --cobalt-deep:#6E8BFF;
  --cobalt-bright:#A8BAFF;
  --gold:#F5B642;
  --gold-deep:#DFA53D;
  --gold-tint:#2A2113;
  --gold-line:#5C4922;
  --gold-ink:#F0D9A6;
  --navy:#14304A;
  --navy-body:#AEB6C2;
  --navy-head:#EEF0F5;
  --calm-line:#38537D;
  --hairline:#1D3143;
  --hairline-2:#22394D;
  --hairline-3:#22364F;
}

/* ---- base ---- */

*{box-sizing:border-box}

html{color-scheme:light dark}

body{
  margin:0;
  background:var(--canvas);
  color:var(--slate);
  font-family:var(--body);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;color:var(--ink)}
p{margin:0}
a{color:var(--cobalt)}

/* Nothing is ever parked at opacity 0. A page whose script does not run must
   still render every word. That bug has already been found once. */

/* ---- the card on stone. The brand's signature structure. ---- */

.app{
  max-width:720px;
  margin:0 auto;
  background:var(--paper);
  border:1px solid var(--hairline-2);
  border-radius:var(--radius-card);
  overflow:hidden;
  min-height:calc(100vh - 64px);
  display:flex;
  flex-direction:column;
}
@media (min-width:600px){
  body{padding:32px}
}
@media (max-width:599px){
  body{padding:12px}
  .app{min-height:calc(100vh - 24px)}
}

/* ---- brand bar ---- */

.bar{
  display:flex;
  align-items:baseline;
  gap:.9rem;
  background:var(--white);
  padding:18px var(--pad-side);
  border-bottom:1px solid var(--hairline);
}
.brand{
  font-family:var(--display);
  font-size:21px;
  font-weight:700;
  color:var(--ink);
  letter-spacing:-0.01em;
}
.brand em{font-style:italic;color:var(--cobalt)}
.bar .where{
  margin-left:auto;
  font-size:12px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

/* ---- eyebrow. A 26px rule, then the label. ---- */

.eyebrow{
  font-size:11px;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--cobalt);
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  display:block;
  width:26px;
  border-top:2px solid var(--cobalt);
  margin-bottom:12px;
}

/* ---- the hero ---- */

.stage{
  flex:1;
  padding:34px var(--pad-side);
}

.headline{
  font-size:clamp(30px, 7vw, 42px);
  line-height:1.05;
  letter-spacing:-0.015em;
  max-width:var(--measure);
  text-wrap:balance;
}
/* The signature move: a serif sentence with exactly one phrase in cobalt
   italic. Exactly one per page. Never two. */
.headline em{font-style:italic;color:var(--cobalt)}

.lead{
  margin-top:18px;
  font-size:17px;
  line-height:1.6;
  color:var(--slate);
  max-width:46ch;
}

/* ---- the reframe card, in lilac ---- */

.feature{
  margin-top:30px;
  background:var(--tint);
  border:1px solid var(--hairline-3);
  border-radius:var(--radius-inset);
  padding:30px 28px;
}
.feature h2{font-size:26px;line-height:1.2;margin-bottom:14px}
.feature h2 em{font-style:normal;color:var(--cobalt)}
.feature p{font-size:16px;line-height:1.7;color:var(--slate)}
.feature p + p{margin-top:12px}
.feature b{color:var(--ink);font-weight:600}

/* ---- the state line, in two moods ----

   Gold is the brand's attention colour and it is spent on one thing at a time,
   so it is wrong for good news. A pill saying everything is fine, dressed in
   the same colour as a pill saying something needs doing, teaches people to
   stop reading either of them.

   So: gold when something needs noticing, calm lilac when nothing does. The
   default is gold, because the page starts out not knowing. */

.state{
  display:inline-block;
  margin-top:6px;
  background:var(--gold-tint);
  border:1px solid var(--gold-line);
  color:var(--gold-ink);
  /* Not a pill. A fully rounded corner on a message that wraps to three lines
     turns into a stadium and reads as a mistake. The brand's pill is for a
     short single line, which this is not. */
  border-radius:14px;
  padding:10px 16px;
  font-size:13px;
  line-height:1.5;
}
.state::before{content:"\25CF";margin-right:8px;color:var(--gold-ink)}

.state.calm{
  background:var(--tint);
  border-color:var(--calm-line);
  color:var(--slate);
}
.state.calm::before{color:var(--cobalt)}

/* ---- footer ---- */

.foot{
  background:var(--white);
  border-top:1px solid var(--hairline);
  padding:22px var(--pad-side);
  font-size:12px;
  line-height:1.6;
  color:var(--muted);
}
.foot p + p{margin-top:6px}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}