/* ==========================================================================
   Grooms — shared layer
   Tokens, reset, and the pieces both pages use: letterhead, rules, buttons.
   Page-specific layout stays in each page's own <style> block, which loads
   after this file and therefore wins.

   The three token blocks below must stay in sync. A color defined in only
   one of them renders one theme's text on the other theme's background.
   ========================================================================== */

/* ---------- tokens : light (ledger paper, pen ink) ---------- */
:root{
  --ground:     #EFEEE9;
  --sheet:      #F7F6F2;
  --ink:        #14171C;
  --ink-2:      #52565E;
  --ink-3:      #6C7078;
  --rule:       #D4D2C9;
  --rule-soft:  #E2E0D7;
  --accent:     #1F3F97;
  --accent-2:   #16307A;
  --on-accent:  #F7F6F2;
  --stamp:      #A03327;   /* red ink   — problems */
  --green:      #1B5E45;   /* green ink — resolved */
  --gold:       #8A5D0B;   /* gold ink  — third voice */
  --ledger:     rgba(31,63,151,.07);
  --tint-blue:  rgba(31,63,151,.045);
  --tint-gold:  rgba(138,93,11,.055);
  --tint-green: rgba(27,94,69,.05);
  --tint-red:   rgba(160,51,39,.05);
  --box:        #B9B7AD;

  --display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --body:    "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --measure: 60ch;
  --gutter:  clamp(1.25rem, 5vw, 3.5rem);
  --rail:    10rem;

  /* per-page; override on :root in the page's own style block */
  --wrap:          1080px;
  --wordmark-size: 2rem;
  --nib-size:      .4rem;
}

/* ---------- tokens : dark (the same page, under a desk lamp) ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:    #131418;
    --sheet:     #1B1D22;
    --ink:       #E9E7E1;
    --ink-2:     #A5A7A3;
    --ink-3:     #8B8E92;
    --rule:      #2D3037;
    --rule-soft: #23262B;
    --accent:    #8CA9F2;
    --accent-2:  #A8BEF7;
    --on-accent: #0E1726;
    --stamp:     #E3806E;
    --green:     #6BC49B;
    --gold:      #DFAF52;
    --ledger:    rgba(140,169,242,.09);
    --tint-blue: rgba(140,169,242,.07);
    --tint-gold: rgba(223,175,82,.07);
    --tint-green:rgba(107,196,155,.07);
    --tint-red:  rgba(227,128,110,.07);
    --box:       #3B3E44;
  }
}
:root[data-theme="dark"]{
  --ground:    #131418;
  --sheet:     #1B1D22;
  --ink:       #E9E7E1;
  --ink-2:     #A5A7A3;
  --ink-3:     #8B8E92;
  --rule:      #2D3037;
  --rule-soft: #23262B;
  --accent:    #8CA9F2;
  --accent-2:  #A8BEF7;
  --on-accent: #0E1726;
  --stamp:     #E3806E;
  --green:     #6BC49B;
  --gold:      #DFAF52;
  --ledger:    rgba(140,169,242,.09);
  --tint-blue: rgba(140,169,242,.07);
  --tint-gold: rgba(223,175,82,.07);
  --tint-green:rgba(107,196,155,.07);
  --tint-red:  rgba(227,128,110,.07);
  --box:       #3B3E44;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ color-scheme:light dark; }
body{
  margin:0;
  background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:1.0625rem; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; }
p{ margin:0; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

h1,h2,h3{ margin:0; text-wrap:balance; }
h1{ font-family:var(--display); font-weight:300; line-height:1.12; letter-spacing:-.02em; }

/* ---------- layout ---------- */
.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }

/* ---------- small caps labels ---------- */
.tag{
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3);
}
.legal{ font-family:var(--mono); font-size:.6875rem; color:var(--ink-3); letter-spacing:.06em; }

/* ---------- letterhead ---------- */
.letterhead{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:1rem 2rem; padding-block:2.25rem 1rem;
}
.wordmark{ text-decoration:none; display:flex; align-items:baseline; gap:.55rem; }
.wordmark .name{
  font-family:var(--display); font-weight:400; font-size:var(--wordmark-size);
  letter-spacing:-.02em; line-height:1;
}
.wordmark .nib{
  width:var(--nib-size); height:var(--nib-size); background:var(--accent);
  transform:rotate(45deg); flex:0 0 auto; align-self:center;
}
/* the rule under the wordmark is the palette, laid out like a row of pens */
.rule-heavy{
  border:0; margin:0; height:3px;
  background:linear-gradient(to right,
    var(--accent) 0 34%, var(--gold) 34% 58%,
    var(--green) 58% 80%, var(--stamp) 80% 100%);
}
.rule-hair{ border:0; border-top:1px solid var(--rule); margin:.3rem 0 0; }

/* ---------- calls to action ---------- */
.actions{ display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.25rem; margin-top:2.1rem; }
.btn{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.09em; text-transform:uppercase;
  text-decoration:none; padding:.85rem 1.35rem; border:1px solid transparent;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-solid{ background:var(--accent); color:var(--on-accent); }
.btn-solid:hover{ background:var(--accent-2); }
.btn-quiet{
  font-family:var(--body); font-size:.9375rem; color:var(--ink-2);
  text-decoration:none; border-bottom:1px solid var(--rule); padding-bottom:1px;
}
.btn-quiet:hover{ color:var(--accent); border-bottom-color:var(--accent); }

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