/* ============================================================
   FIELD NOTES — MAGAZINE  (field-notes.html + field-notes/*.html)
   Brand book v24: the writing-purple is retired — Kat, direct, no
   purple on this brand. Field Notes now uses the standard Alkemia
   Growth palette like every other page: terracotta for kickers,
   eyebrows, the active nav and pull-quote marks; ink for bylines and
   drop caps; a sage wash behind the kicker chip. Gold keeps every rule
   and hairline. Most of the old rules are simply gone — the house
   defaults in site.css were already correct.
   Layout reuses .fn-title / .fn-excerpt / .fn-meta / .fn-more /
   .fn-item from site.css; this sheet adds the magazine shape.
   ============================================================ */

/* ---- header ----
   The active nav state is terracotta in site.css already; no override. */
.fn-page .hero-editorial .eyebrow{color:var(--terracotta)}
.fn-page .hero-editorial h1 em{font-style:italic;color:var(--terracotta)}

/* ---- the kicker chip + byline ---- */
.fn-kicker{display:inline-block;font-family:var(--ui);font-weight:600;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--terracotta);background:rgba(178,179,114,.18);
  padding:.34rem .72rem;border-radius:2px;margin-bottom:1.1rem}
.fn-page .fn-meta{margin:1.2rem 0 0}
.fn-byline{color:var(--ink);font-weight:600}

/* ---- container ---- */
.fn-mag{max-width:1060px;margin:3rem auto 0;text-align:left}

/* ---- the lead note ---- */
.fn-lead{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  background:var(--cream-card);border-radius:4px;
  border:1px solid rgba(86,72,35,.08);border-top:1px solid var(--gold);
  box-shadow:0 16px 40px rgba(86,72,35,.11)}
.fn-lead-body{padding:2.8rem 2.8rem 2.5rem}
.fn-lead .fn-title{font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.12;
  margin-bottom:1.1rem}
.fn-lead .fn-excerpt{font-size:1.14rem;line-height:1.66;max-width:44ch}

/* drop cap — Marcellus, ink */
.fn-dropcap::first-letter{float:left;font-family:var(--display);
  font-size:3.7em;line-height:.82;padding:.06em .12em 0 0;
  color:var(--ink)}

/* pull-quote — gold hairline divides it from the body; the mark is terracotta */
.fn-pull{margin:0;padding:2.8rem 2.6rem;border-left:1px solid rgba(201,165,59,.55);
  display:flex;flex-direction:column;justify-content:center}
.fn-pull blockquote{margin:0}
.fn-pull .fn-quote-mark{display:block;font-family:var(--display);
  font-size:4.6rem;line-height:.6;height:2.2rem;color:var(--terracotta)}
.fn-pull p{font-family:var(--display);font-size:1.42rem;line-height:1.4;
  color:var(--olive)}
.fn-pull cite{display:block;margin-top:1.2rem;font-style:normal;
  font-family:var(--ui);font-weight:500;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--olive-62)}

/* ---- the rest of the notes ---- */
.fn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.6rem;margin-top:1.6rem}
.fn-grid .fn-item{display:flex;flex-direction:column}
.fn-grid .fn-kicker{align-self:flex-start}
.fn-grid .fn-title{font-size:1.36rem}
.fn-grid .fn-more{margin-top:auto;padding-top:1.1rem;align-self:flex-start}

/* ---- the post pages ----
   An ink drop cap on the opening paragraph and a terracotta mark on any
   quote. The headline, the short-answer label, the back link and the
   closing CTA are all terracotta in site.css already — no override here;
   blockquote rules keep gold. */
.fn-page .post-hero .eyebrow{color:var(--terracotta)}
/* only the paragraph that opens the article — a post that opens on a
   heading and a list gets no drop cap rather than one mid-article */
.fn-page .post-body > p:first-child::first-letter,
.fn-page .post-body > h2:first-child + p::first-letter{float:left;
  font-family:var(--display);font-size:3.4em;line-height:.8;
  padding:.07em .1em 0 0;color:var(--ink)}
.fn-page .post-body blockquote::before{content:"\201C";display:block;
  font-family:var(--display);font-style:normal;font-size:3rem;line-height:1;
  height:1.5rem;color:var(--terracotta)}

@media (max-width:880px){
  .fn-lead{grid-template-columns:1fr}
  .fn-lead-body{padding:2.1rem 1.6rem 1.9rem}
  .fn-pull{border-left:0;border-top:1px solid rgba(201,165,59,.55);
    padding:1.9rem 1.6rem 2.1rem}
  .fn-grid{grid-template-columns:1fr}
}