/* ------------------------------------------------------------------ *
 * Fernsage — the shared identity for every page of the marketing site.
 * Inverted cyanotype: white paper, one Prussian-blue ink doing nearly all
 * the work. Named for Anna Atkins' 1843 specimen book (see the colophon).
 * Page-specific sections stay in each page's own <style> block; anything
 * that must look identical across pages lives here so it cannot drift.
 * ------------------------------------------------------------------ */
:root{
  --paper:#fbfaf7;
  --blue:#12336b;          /* the ink: cyanotype, does almost all the work */
  --blue-lift:#2a5aa8;
  --blue-wash:#eef1f7;
  --ink:#14161a;
  --soft:#5a5f68;
  --line:rgba(18,51,107,0.18);

  /* two secondaries, used sparingly. Darkened 2026-07-29 (from #c07c1e) to
     clear WCAG AA (4.5:1) against --paper — the original was ~3.3:1. */
  --ochre:#8f5a12;
  --madder:#a8342c;
  /* A blue "weighted back" without relying on opacity, which washes out below
     4.5:1 against --paper at body-text sizes (see .voice .yr). */
  --blue-soft:#355995;

  --serif:'EB Garamond', serif;
  --gap:88px;
  /* The side margin of the page, in one place. Full-bleed bands set it on
     their own inner blocks, so it must be readable from anywhere. */
  --pad:32px;
}

/* Self-hosted, replacing the Google Fonts request every page used to make
   (privacy leak on every load, plus a blocking cross-origin round trip on
   the LCP text). Weights/styles match what the site actually sets. */
@font-face{
  font-family:'EB Garamond'; font-style:normal; font-weight:400;
  font-display:swap; src:url('/fonts/eb-garamond-400.woff2') format('woff2');
}
@font-face{
  font-family:'EB Garamond'; font-style:italic; font-weight:400;
  font-display:swap; src:url('/fonts/eb-garamond-400-italic.woff2') format('woff2');
}
@font-face{
  font-family:'EB Garamond'; font-style:normal; font-weight:500;
  font-display:swap; src:url('/fonts/eb-garamond-500.woff2') format('woff2');
}
@font-face{
  font-family:'EB Garamond'; font-style:italic; font-weight:500;
  font-display:swap; src:url('/fonts/eb-garamond-500-italic.woff2') format('woff2');
}
@font-face{
  font-family:'EB Garamond'; font-style:normal; font-weight:600;
  font-display:swap; src:url('/fonts/eb-garamond-600.woff2') format('woff2');
}
@font-face{
  font-family:'EB Garamond'; font-style:italic; font-weight:600;
  font-display:swap; src:url('/fonts/eb-garamond-600-italic.woff2') format('woff2');
}

*{box-sizing:border-box;}
html{background:var(--paper);}
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth;}
}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:20px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}

/* ---------- skip link ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--blue); color:var(--paper);
  padding:12px 20px; font-size:15px; text-decoration:none;
}
.skip-link:focus{left:var(--pad); top:var(--pad);}
/* Anything that sets padding on a .wrap element must use the *vertical*
   longhand (padding-block), never the `padding` shorthand: page <style> blocks
   load after this file at equal specificity, so a shorthand there silently
   resets the side padding to zero and the text runs to the screen edge. */
.wrap{max-width:780px; margin-inline:auto; padding-inline:var(--pad);}
/* Also used as a heading tag (h2) for several section labels, so margin is
   reset to zero here — each usage site sets its own margin-bottom, and a
   heading element must not carry a browser-default margin-top on top of it. */
.track{text-transform:uppercase; letter-spacing:0.2em; font-size:11.5px; margin:0; font-weight:400;}
/* h2 borrows .track as its section-eyebrow style, but at the base size it
   reads smaller than body text and smaller than the h3s underneath it —
   these are the page's actual section headings, not endmatter captions
   like the footer/colophon spans that also use .track, so they get a
   size/weight step up while keeping the same uppercase-eyebrow language. */
h2.track{font-size:14px; font-weight:600; letter-spacing:0.17em;}

/* ---------- masthead ---------- */
.top{border-bottom:1px solid var(--line);}
.top-inner{
  max-width:780px; margin:0 auto; padding:22px var(--pad);
  display:flex; justify-content:space-between; align-items:baseline;
}
/* Same split the published-site footer wordmark uses (.wm-fern/.wm-sage in
   public-site/assets.ts): one ink, "sage" bold against "Fern" at normal
   weight — legible as two fused words without reading as two colors. Both
   weights must be ones the EB Garamond <link> above actually loads (400/600);
   an unloaded weight (e.g. 700) silently clamps to the nearest loaded one and
   the contrast vanishes. */
.top-inner .name{font-size:20px; font-weight:400; color:var(--blue);}
.top-inner .name .sage{font-weight:600;}
/* The trailing link's side padding would otherwise inset the nav from the
   gutter the masthead name sits against; pull it back so the optical edges line up. */
.top-inner nav{display:flex; gap:10px; font-size:17px; margin-right:-7px;}
/* Vertical padding on an *inline* link grows the touch target without growing
   the line box, so the masthead keeps its height while the tap area clears the
   44px thumb minimum. Do not make these inline-block — the masthead would jump
   by 22px and the baseline alignment above would break. The side padding brings
   the shortest word ("Price") up to 44px wide too; `gap` is set to the visual
   spacing we want *minus* that padding. */
.top-inner nav a{text-decoration:none; color:var(--soft); padding:11px 7px;}
.top-inner nav a:hover, .top-inner nav a:focus-visible{color:var(--blue);}
/* ---------- footer + colophon (identical on every page) ---------- */
footer{padding-block:var(--gap) 72px; text-align:center;}
/* Ochre, like every other editorial section label on the page (specimen, why
   publish, books) — the eyebrow is the site's ordinary section mark, not a
   scarce accent, and the footer was the one band without one. Naming the block
   is also what licenses its contents: a note on how the thing was printed is
   exactly what a colophon carries, so labelled, the Atkins sentence reads as
   endmatter convention rather than as the page explaining its own colour. */
footer .track{color:var(--ochre); display:block; margin-bottom:28px;}
footer p{max-width:52ch; margin:0 auto 10px; color:var(--soft); font-size:17px;}
footer .marks{margin-top:20px;}
footer .marks a{color:var(--blue); text-decoration:none; margin:0 11px;}

/* The colophon. In a printed book the last leaf carries the imprint and the
   notices: who made it, where, when, and the legal small print, set small
   and in a fixed order below a rule. That is where Privacy and Terms belong
   — subtle without being hidden, and separated by *kind* from the two
   destinations above, which is the whole point of an ordered footer.
   Monochrome on purpose: the ochre/madder budget is already spent. */
footer .colophon{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
  margin:38px auto 0; padding-top:20px; border-top:1px solid var(--line);
  font-size:11.5px; text-transform:uppercase; letter-spacing:0.16em;
  color:var(--soft); line-height:1.9;
}
footer .colophon span + span::before{
  content:"\00B7"; margin:0 0.7em; opacity:0.5;
}
footer .colophon a{
  position:relative; color:inherit; text-decoration:none;
  border-bottom:1px solid var(--line); padding-bottom:1px;
}
footer .colophon a:hover, footer .colophon a:focus-visible{color:var(--blue); border-color:var(--blue);}
/* The visible link (11.5px, tight line-height) is under the 24px touch-target
   minimum. Rather than growing the underline's own box — which would move it
   away from the text — an invisible ::after expands the tappable area without
   touching layout or the visual underline. */
footer .colophon a::after{
  content:""; position:absolute; inset:-5px -3px;
}
@media (max-width:780px){
:root{--gap:68px; --pad:26px;}
.top-inner{padding-block:20px;}
}
@media (max-width:600px){
:root{--gap:56px; --pad:22px;}
body{font-size:21px; line-height:1.62;}
.top-inner{padding-block:16px;}
.top-inner .name{font-size:17px;}
.top-inner nav{gap:6px; font-size:16px;}
.track{font-size:10px; letter-spacing:0.15em;}
h2.track{font-size:13.5px; letter-spacing:0.14em;}
footer .colophon{font-size:10px; letter-spacing:0.11em; margin-top:30px;}
footer .colophon span + span::before{margin:0 0.5em;}
}
@media (max-width:380px){
.top-inner .name{font-size:16px;}
.top-inner nav{font-size:15px;}
}