/* ==========================================================================
   Horizon Search Institute — design system
   "Instrument": stone paper, ink masthead, lapis signal, brass accent.

   Loaded after each page's inline <style>, so it overrides tokens and
   refines type, structure, and surfaces site-wide.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* surfaces */
  --paper:#f3f3f1;
  --bg:#f3f3f1;
  --stone:#e9e9e4;
  --surface:#e9e9e4;
  --card:#ffffff;
  --inner:#efefec;
  --field:#111820;          /* deep ink band / masthead */
  --field-2:#18212c;

  /* ink */
  --ink:#14181e;
  --text:#14181e;
  --navy:#17253c;
  --slate:#3c4859;
  --muted:#5c6472;
  --dim:#656c76;

  /* rules */
  --border:#dcdbd4;
  --rule:rgba(23,37,60,.13);
  --hair:rgba(23,37,60,.08);

  /* signal (interactive, live, links) */
  --lapis:#1d4e9b;
  --teal:#1d4e9b;
  --teal-bg:rgba(29,78,155,.055);
  --teal-border:rgba(29,78,155,.18);

  /* brass (research, patronage, prestige) */
  --brass:#7a5e15;
  --gold:#7a5e15;
  --amber:#715713;
  --amber-bg:rgba(122,94,21,.08);
  --brass-bright:#c9a544;   /* brass on dark surfaces only */

  /* chart / status */
  --ochre:#a03d26;
  --moss:#2f5540;

  --radius:2px;
}

/* ---------- 2. Typography ------------------------------------------------ */
body{
  font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-feature-settings:"kern","liga","calt","tnum" 0;
  letter-spacing:-.003em;
}

h1,h2,h3,h4,.serif{
  font-family:'Newsreader',Georgia,'Times New Roman',serif;
}

/* Display: one weight, generous size, tight measure. Used only for page H1. */
h1{
  font-family:'Instrument Serif',Georgia,serif;
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.012em;
  font-size:clamp(42px,6vw,72px);
}
h1 em,h1 i{font-style:italic}

h2{
  font-weight:500;
  line-height:1.14;
  letter-spacing:-.014em;
  font-size:clamp(26px,3.1vw,38px);
}
h3{font-weight:600;letter-spacing:-.008em;line-height:1.24}
h4{font-weight:600;letter-spacing:-.005em}

/* Former monospace labels are now a tracked grotesque — typeset, not printed
   off a terminal. Numerals stay tabular so data still lines up. */
.mono,
[class*="overline"],[class*="eyebrow"],[class*="cadence"],
[class*="-label"],[class*="-num"],[class*="-status"],
[class*="-tag"],[class*="-meta"],[class*="-date"]{
  font-feature-settings:"tnum" 1,"kern" 1;
}

/* ---------- 3. The horizon rule (signature) ------------------------------ */
/* A short brass rule opens every eyebrow — the sightline the Institute is
   named for, and a nod to the aperture in the mark. */
.overline{
  display:inline-flex;
  align-items:center;
  font-weight:500;
  font-size:11px;
  letter-spacing:.16em;
  color:var(--slate);
}
.overline::before{
  content:"";
  width:26px;height:1px;
  background:var(--brass);
  margin-right:12px;
  flex:none;
}

/* ---------- 4. Structure: squared corners, hairlines, crisper lift ------- */
.divider{background:var(--border)}

/* Cards read as tipped-in plates: a hairline, a whisper of lift, and a brass
   sightline that appears on hover instead of a coloured glow. */
.hero-card,.pub-card,.pillar,.tool-block,.card,.salon-card,.issue-cta,
.people-member,.council-member,.featured-pub-inner{
  border-radius:2px;
}
.hero-card:hover,.pub-card:hover,.pillar:hover{
  transform:translateY(-1px);
  box-shadow:0 1px 2px rgba(20,24,30,.05),0 6px 18px rgba(20,24,30,.06);
}

/* ---------- 5. Buttons --------------------------------------------------- */
.btn,.fp-primary,.fp-secondary,.issue-cta,.btn-submit{
  border-radius:2px;
  letter-spacing:.005em;
  font-weight:500;
}
.btn-dark{background:var(--field)}
.btn-dark:hover{background:var(--navy)}
.btn-ghost{border-color:var(--border);color:var(--navy)}
.btn-ghost:hover{border-color:var(--navy);background:rgba(23,37,60,.03)}
.btn-gold{background:var(--brass);color:#fff}
.btn-gold:hover{background:#7a5f14}

/* On ink surfaces the brass button flips: bright brass, ink type. */
.on-ink .btn-gold{
  background:var(--brass-bright);color:var(--field);font-weight:600;
}
.on-ink .btn-gold:hover{background:#d8b65c}

/* ---------- 6. Masthead navigation --------------------------------------- */
/* A persistent ink bar. It carries the mark across every page and gives the
   site the spine of a publication rather than the header of a landing page. */
nav,nav.site-nav{
  background:var(--field);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.nav-inner{padding-top:15px;padding-bottom:15px}
.nav-name{
  color:#f4f3ef;
  font-family:'Newsreader',Georgia,serif;
  font-weight:500;
  font-size:15px;
  letter-spacing:.005em;
}
.nav-links a{
  color:rgba(244,243,239,.66);
  font-size:11px;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:500;
}
.nav-links a:hover{color:#fff}
.nav-links a.active{color:#fff;font-weight:600}
.nav-links a.active::after{content:"";display:block;height:1px;margin-top:5px;background:var(--brass-bright)}
.nav-cta,.nav-links a.nav-cta{
  background:var(--brass-bright);
  color:var(--field);
  border:1px solid var(--brass-bright);
  border-radius:2px;
  padding:6px 15px;
  font-weight:600;
  letter-spacing:.11em;
}
.nav-cta:hover,.nav-links a.nav-cta:hover{background:#d8b65c;border-color:#d8b65c;color:var(--field)}
.nav-links a.nav-cta.active::after{display:none}
.nav-back,nav .back-link{color:rgba(244,243,239,.6)}
.nav-back:hover,nav .back-link:hover{color:#fff}
.mobile-nav-toggle{color:#f4f3ef}
@media(max-width:880px){
  .nav-links{
    background:var(--field);
    border-bottom:1px solid rgba(255,255,255,.10);
    box-shadow:0 8px 24px rgba(0,0,0,.28);
  }
  .nav-links a{font-size:12px;letter-spacing:.11em}
}

/* ---------- 7. Home cover ------------------------------------------------ */
/* The one bold move: the homepage opens on an ink field, treated as the cover
   of a printed report — mark debossed at the edge, masthead line, no gloss. */
body.home .hero{
  background:var(--field);
  padding:150px 0 84px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
body.home .hero::before{
  background:
    radial-gradient(900px 620px at 80% -12%,rgba(201,165,68,.10),transparent 62%),
    radial-gradient(720px 520px at -4% 104%,rgba(29,78,155,.16),transparent 60%);
}
body.home .hero-watermark{opacity:.06;filter:none}
body.home .hero h1{color:#f7f6f2;margin-bottom:26px}
body.home .hero-lead{color:rgba(247,246,242,.84)}
body.home .hero-lead b{color:#fff;font-weight:600}
body.home .hero-sub{color:rgba(247,246,242,.58)}
body.home .hero .btn-dark{background:#f7f6f2;color:var(--field)}
body.home .hero .btn-dark:hover{background:#fff}
body.home .hero .btn-ghost{color:rgba(247,246,242,.9);border-color:rgba(255,255,255,.26)}
body.home .hero .btn-ghost:hover{border-color:rgba(255,255,255,.62);background:rgba(255,255,255,.06)}
body.home .hero .ghost-link{color:rgba(247,246,242,.58);border-bottom-color:rgba(255,255,255,.22)}
body.home .hero .ghost-link:hover{color:#fff;border-bottom-color:rgba(255,255,255,.6)}

.hero-masthead{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:30px;
  font-size:10.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(247,246,242,.5);
}
.hero-masthead .hm-rule{width:34px;height:1px;background:var(--brass-bright);flex:none}
.hero-masthead .hm-sep{color:rgba(247,246,242,.28)}
@media(max-width:640px){
  /* the nav directly above already says the name — drop the repeat rather
     than let the masthead wrap to two lines */
  .hero-masthead{font-size:9.5px;letter-spacing:.16em;gap:9px;flex-wrap:nowrap}
  .hero-masthead .hm-name,.hero-masthead .hm-sep{display:none}
  body.home .hero{padding:126px 0 60px}
}

/* ---------- 8. Ink sections ---------------------------------------------- */
.patron-section,.independence,.on-ink{background:var(--field)}
.on-ink .overline::before{background:var(--brass-bright)}
.on-ink .overline{color:rgba(247,246,242,.7)}
.on-ink .lbl,.on-ink .sustain-num{color:var(--brass-bright)}
.on-ink h4{color:rgba(247,246,242,.72)}

/* ---------- 9. Links in running text ------------------------------------- */
/* The pages already drew link underlines with border-bottom. A real underline
   sits better (it skips descenders), so we use that and retire the border —
   otherwise the two stack and you get a double rule under every link. */
.article-body a:not(.btn):not([class*="cta"]),
.stream-body a:not(.btn),
.idea-body a:not(.btn),
.condition-body a,.framework-note a,.refs-list a,.sources ol li a,
.lens-item p a,.publisher-line a{
  color:var(--lapis);
  border-bottom:0 none !important;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2.5px;
  text-decoration-color:rgba(29,78,155,.35);
  transition:text-decoration-color .15s;
}
.article-body a:not(.btn):not([class*="cta"]):hover,
.stream-body a:not(.btn):hover,
.idea-body a:not(.btn):hover,
.condition-body a:hover,.framework-note a:hover,.refs-list a:hover,
.sources ol li a:hover,.lens-item p a:hover,.publisher-line a:hover{
  text-decoration-color:var(--lapis);
}

/* small text that sat just under AA on the new stone */
.footer-sep{color:var(--dim)}
.cov-src{color:var(--muted)}

::selection{background:var(--lapis);color:#fff}

/* ---------- 8b. Subscribe band ------------------------------------------- */
/* One beehiiv form is embedded on 15 pages. It can only carry one style (the
   embed is an iframe), so every subscribe band is ink and the form is tuned
   for ink. See README for the values to set in beehiiv's Style tab. */
.subscribe.on-ink{padding:72px 0}
.subscribe.on-ink h2{color:#f7f6f2}
.subscribe.on-ink p{color:rgba(247,246,242,.72)}
.subscribe.on-ink .subscribe-note{color:rgba(247,246,242,.5)}
.subscribe.on-ink .cta-form input{
  background:#1b242f;border:1px solid #33404f;color:#f7f6f2;border-radius:2px;
}
.subscribe.on-ink .cta-form input::placeholder{color:#8a929c}
.subscribe.on-ink .btn-dark{background:var(--brass-bright);color:var(--field);font-weight:600}
.subscribe.on-ink .btn-dark:hover{background:#d8b65c}

/* ---------- 9b. Archive lists ------------------------------------------- */
.issues{padding-top:44px}
.issues .issue:first-of-type{border-top:0 none}

/* ---------- 10. Quality floor -------------------------------------------- */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--lapis);
  outline-offset:2px;
  border-radius:2px;
}
nav a:focus-visible{outline-color:var(--brass-bright)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .hero-card:hover,.pub-card:hover,.pillar:hover{transform:none}
}