/* Self-hosted. No request leaves the site to render text, and no third
   party sees the visitor. */

/* EB Garamond ships as a variable font — one file covers 400–800. The
   range on font-weight is what makes the axis reachable; declaring a
   single weight would serve the default master and nothing else. */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/garamond-var-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: 'EB Garamond';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/garamond-var-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: 'EB Garamond';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/garamond-var-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: 'EB Garamond';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/garamond-var-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;
}

/* ============================================================
   Demarvo — ink on bone.

   One typeface, one accent, one rule weight. There is no
   ornament anywhere on this page: no gradient, no icon set, no
   illustration, nothing that moves on its own. The hierarchy is
   made of size, space and hairlines, because that is the only
   hierarchy that still holds at 40px in a browser tab and at
   A4 on a carton.

   The logo lockup is the one image, and it is set in real
   Baskerville rather than the page face — a mark is drawn once
   and reproduced, not re-rendered by whatever a device has.
   ============================================================ */

:root {
  --bone:  #EDEDE9;                /* page */
  --sand:  #E2DCD0;                /* warm second ground */
  --deep:  #1B2A28;                /* deep green-graphite, reversed sections */
  --ink:   #15181B;                /* display */
  --body:  #33383D;                /* running text */
  --muted: #5C6268;                /* labels, fine print */
  /* One accent, in two values so it holds on both grounds. Clay rather
     than another green: green on deep green is only more of the same, and
     a warm note against the cool ground is what gives the palette a second
     thing to say. It is terracotta, not metallic — gold would say luxury
     anti-aging, which is the position we turned down. It also finally
     agrees with the warm sand ledger, which the old cool slate did not. */
  --accent:   #8A4F30;             /* on bone and sand — 5.5:1 */
  --accent-d: #D69B72;             /* on deep — 6.2:1 */
  --rule:  #D2D3CD;
  --rule-d: rgba(237,237,233,.22); /* hairline on deep */

  --serif: "EB Garamond", Baskerville, Georgia, "Times New Roman", serif;

  --pad:  clamp(1.5rem, 5vw, 4.5rem);
  --page: 68rem;
  --read: 34rem;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: light;             /* stops form controls inverting */
}

/* Garamond carries a small x-height, so the same pixel size reads a grade
   smaller than a grotesque would. 20px here is roughly 17px of Inter, and
   the audience is forty-plus reading on a handset. */
body {
  margin: 0;
  background: var(--bone);
  color: var(--body);
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

/* A page made only of flat colour reads as a screen. A little noise gives it
   a surface, and on the deep sections it also stops the large areas banding
   on 8-bit displays. Fixed, so it does not travel with the scroll. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, .topbar, .foot { position: relative; z-index: 1; }

/* ---------- grounds ----------
   v1 was one flat bone field from top to bottom, and it read as careful
   rather than alive. The page now has three grounds and a pulse: bone for
   the reading chapters, warm sand for the ledger, and the deep green the
   brand palette always had for the two moments that should land hardest —
   the position, and the ask. */

.on-sand { background: var(--sand); }

.on-deep {
  background: var(--deep);
  color: #D8DCD6;
  border-top: 0;
}
.on-deep .heading,
.on-deep .doc-title { color: #F2F3EE; }
.on-deep .num        { color: var(--accent-d); }
.on-deep .caption    { color: #93A398; }
.on-deep .pull       { color: #F2F3EE; }
.on-deep .pull::before { background: var(--accent-d); }
.on-deep a           { color: var(--accent-d); border-bottom-color: var(--rule-d); }
.on-deep a:hover     { border-bottom-color: var(--accent-d); }
.on-deep .row        { border-top-color: var(--rule-d); }
.on-deep dt          { color: #F2F3EE; }
.on-deep dd          { color: #C3C9C2; }

/* the section that follows a deep one needs no rule — the colour is the edge */
.on-deep + .chapter,
.on-deep + .ledger,
.on-deep + .signup,
.on-sand + .chapter,
.on-sand + .ledger,
.on-sand + .signup { border-top: 0; }
.on-sand { border-top: 0; }

/* ---------- the mark, used as a graphic ----------
   The monogram is the only shape the brand owns, so it does one job beyond
   the avatar: it sits oversized and half off the page in the deep section,
   at an opacity where it is texture rather than a logo. */
.markfield { position: relative; overflow: hidden; }
.markfield > * { position: relative; z-index: 1; }
.markfield::before {
  content: "";
  position: absolute;
  top: 50%; right: -6%;
  width: min(38rem, 62vw);
  aspect-ratio: 1;
  transform: translateY(-50%);
  background: url('/assets/img/dmark-light-v1.png') no-repeat center / contain;
  opacity: .07;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 54rem) {
  .markfield::before { right: -22%; opacity: .05; }
}

/* ---------- type ---------- */

/* Caps in an old-style face sit small and need air to stay legible;
   the tracking is the same 0.28em family the wordmark uses, stepped
   down because these are set at a fraction of its size. */
.caption {
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

.num {
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.5rem;
}

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--rule); }
a:hover { border-bottom-color: var(--accent); }

em { font-style: italic; }

/* ---------- sticky header ---------- */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 0.6rem var(--pad);
  background: color-mix(in srgb, var(--bone) 88%, transparent);
  border-bottom: 1px solid transparent;
  transform: translateY(-100%);
  transition: transform .35s ease, border-color .35s ease;
}
@supports (backdrop-filter: blur(8px)) {
  .topbar { backdrop-filter: blur(14px); }
}
.topbar.visible { transform: none; border-bottom-color: var(--rule); }

.lockup {
  display: flex;
  align-items: center;
  gap: .7rem;
  border-bottom: 0;
}
/* Up 15% on the first sizing: the bar read as tentative rather than quiet,
   and the wordmark in particular was small enough to be decoration. */
.lockup-d    { height: clamp(28px, 4.6vw, 32px); width: auto; }
.lockup-rule { width: 1px; height: clamp(21px, 3.5vw, 28px); background: var(--rule); }
/* 10px of tracked caps was legible in a mockup and not on a phone. 15px is
   where it becomes readable without starting to compete with the D. */
.lockup-w    { height: clamp(15px, 2vw, 16px); width: auto; }

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

.hero {
  min-height: clamp(24rem, 74vh, 38rem);
  min-height: clamp(24rem, 74dvh, 38rem);   /* mobile browser chrome */
  display: grid;
  place-items: center;
  padding: clamp(5rem, 14vh, 9rem) var(--pad) clamp(3rem, 8vh, 5rem);
  text-align: center;
}

.hero-mark { width: 100%; }

.wordmark { margin: 1.8rem 0 0; line-height: 0; }
.wordmark img { width: min(28rem, 78vw); margin: 0 auto; }

/* The slogan, set as part of the lockup rather than as a sentence: a short
   rule, then tracked caps under the wordmark, the way the logo files carry
   their descriptor. text-indent cancels the trailing letter-space so the
   line is optically centred rather than sitting one space to the left. */
.slogan {
  position: relative;
  font-size: clamp(0.75rem, 2.1vw, 0.9375rem);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--accent);
  max-width: none;
  margin: clamp(2rem, 5.5vh, 2.8rem) auto 0;
  padding-top: clamp(1.5rem, 3.6vh, 2.1rem);
}
.slogan::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: clamp(3rem, 9vw, 4.5rem);
  height: 1px;
  background: var(--accent);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 1.1s cubic-bezier(.22,.61,.36,1) .25s;
}
.js .slogan.in::before,
html:not(.js) .slogan::before { transform: translateX(-50%) scaleX(1); }

/* ---------- chapter ---------- */

/* Merfonte splits its chapters down the middle. This one hangs the label
   in a narrow margin column and gives everything else to the text, the
   way a specimen sheet or a spec is set. */
.chapter {
  border-top: 1px solid var(--rule);
  padding: clamp(3.5rem, 9vw, 6.5rem) var(--pad);
}

.chapter-inner {
  max-width: var(--page);
  margin: 0 auto;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 54rem) {
  .chapter-inner {
    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
    align-items: start;
  }
  /* the label sits on the heading's first baseline, not above it */
  .chapter-inner .num { margin-top: .55rem; }
}

.heading {
  font-weight: 400;
  font-size: clamp(2.6rem, 7.6vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 1.8rem;
  text-wrap: balance;
}

.body p {
  max-width: var(--read);
  margin: 0 0 1.15rem;
}
.body p:last-child { margin-bottom: 0; }

/* pull-quote treatment for the sharpest line in a chapter */
.pull {
  position: relative;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  line-height: 1.4;
  color: var(--ink);
  padding-left: 1.3rem;
  margin: 2.2rem 0 0;
  max-width: 28rem;
}
.pull::before {
  content: "";
  position: absolute; left: 0; top: .25em; bottom: .1em;
  width: 1px; background: var(--accent);
  transform-origin: top;
}
.js .pull.r::before {
  transform: scaleY(0);
  transition: transform 1.05s cubic-bezier(.22,.61,.36,1) .2s;
}
.js .pull.r.in::before { transform: scaleY(1); }

/* ---------- the ledger ----------
   Five commitments as a glossary rather than five icons. An icon has to
   be invented, learned and then believed; a term with its definition
   beside it is simply read. It also survives being printed on a leaflet
   in one colour, which no icon set of ours has been drawn to do yet. */

.ledger {
  border-top: 1px solid var(--rule);
  padding: clamp(3rem, 8vw, 5rem) var(--pad);
}
.ledger-inner { max-width: var(--page); margin: 0 auto; }

.ledger dl { margin: 2.4rem 0 0; }

/* The rule belongs to the row, not to the two cells — put a border on each
   cell instead and the column gap punches a hole in every line, which reads
   as two unrelated tables rather than one ledger. HTML allows dl > div for
   exactly this. */
.ledger .row {
  border-top: 1px solid var(--rule);
  padding: 1.5rem 0;
}
.ledger .row:first-child { border-top: 0; padding-top: 0; }
.ledger .row:last-child { padding-bottom: 0; }

.ledger dt {
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 0.3rem;
}

.ledger dd {
  margin: 0;
  max-width: 30rem;
  color: var(--body);
}

/* Two columns at reading width: term left, definition right, on one rule.
   align-items:baseline is what makes them sit on the same line — the term
   is set smaller and tighter than the definition, so aligning the boxes
   instead leaves the two texts a few pixels out and looking untended. */
@media (min-width: 46rem) {
  .ledger .row {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    column-gap: clamp(2rem, 6vw, 5rem);
    align-items: baseline;
  }
  .ledger dt { margin: 0; }
}

/* ---------- signup ---------- */

.signup {
  border-top: 1px solid var(--rule);
  padding: clamp(3.5rem, 9vw, 6rem) var(--pad);
}
.signup .heading { font-size: clamp(2.2rem, 6vw, 3.4rem); margin-bottom: 1.1rem; }
.signup .body > p { max-width: var(--read); margin: 0; }

.capture {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  margin: 2.2rem 0 1.3rem;
  max-width: 30rem;
}
.capture input {
  flex: 1 1 14rem; min-width: 0;
  padding: 0.55rem 0.15rem;
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--rule);
  border-radius: 0;
}
.capture input::placeholder { color: var(--muted); }
.capture input:focus { outline: none; border-bottom-color: var(--accent); }

.capture button {
  flex: 0 0 auto;
  padding: 0.55rem 0;
  font: inherit;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--accent);
  border-radius: 0;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.capture button:hover { color: var(--ink); border-bottom-color: var(--ink); }
.capture button:disabled { color: var(--muted); border-bottom-color: var(--rule); cursor: default; }

/* The answer lands where the form was. Two classes so it beats `.signup p`. */
.signup .body .form-note {
  max-width: 30rem;
  margin: 2.2rem 0 1.3rem;
  font-size: 1.125rem;
  color: var(--ink);
}
.signup .body .form-note.ok { color: var(--accent); }

.signup .body .consent {
  max-width: 30rem;
  margin: 0 0 2.6rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted);
}

.signup .body .note {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

/* ---------- document pages ---------- */

.doc {
  max-width: 38rem;
  margin: 0 auto;
  padding: clamp(3rem, 9vw, 6rem) var(--pad) clamp(3rem, 7vw, 5rem);
}

.doc-center {
  text-align: center;
  padding-block: clamp(6rem, 20vh, 12rem);
}
.doc-center .doc-mark { width: min(15rem, 62vw); margin: 0 auto 3.5rem; }
.doc-center .doc-lede { max-width: 27rem; margin-inline: auto; }

.doc-title {
  font-weight: 400;
  font-size: clamp(2.2rem, 6.4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 1.6rem 0 1.4rem;
}

.doc-lede { font-size: 1.25rem; line-height: 1.65; margin: 0 0 3rem; }

.doc h2 {
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 2.6rem 0 .6rem;
}

.doc p { margin: 0 0 1rem; }
.doc strong { font-weight: 600; color: var(--ink); }
.nowrap { white-space: nowrap; }

.doc-foot {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  font-size: 1rem;
  color: var(--muted);
}

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

.foot {
  border-top: 1px solid var(--rule);
  padding: 2rem var(--pad) 3rem;
}
.foot-inner {
  max-width: var(--page);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
}
.foot .caption { letter-spacing: .16em; }
.foot a { border-bottom-color: transparent; }
.foot a:hover { border-bottom-color: var(--rule); }

/* ---------- reveal ---------- */

.js .r {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .9s ease, transform .9s ease;
}
.js .r.in { opacity: 1; transform: none; }

/* display type wipes up from its own baseline */
.js .heading.r {
  clip-path: inset(0 0 100% 0);
  transition: opacity .9s ease, transform .9s ease,
              clip-path 1.15s cubic-bezier(.22,.61,.36,1);
}
.js .heading.r.in { clip-path: inset(0 0 -16% 0); }

/* chapter label types itself in from the left */
.js .num.r {
  clip-path: inset(0 100% 0 0);
  transition: opacity .7s ease, transform .7s ease,
              clip-path 1s cubic-bezier(.22,.61,.36,1);
}
.js .num.r.in { clip-path: inset(0 -3% 0 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .r { opacity: 1; transform: none; transition: none; }
  .js .heading.r, .js .num.r { clip-path: none; }
  .js .pull.r::before { transform: none; transition: none; }
  .slogan::before { transition: none; }
  .topbar { transition: none; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ---------- form on the deep ground ---------- */
.on-deep .capture input {
  color: #F2F3EE;
  border-bottom-color: var(--rule-d);
}
.on-deep .capture input::placeholder { color: #7E8C82; }
.on-deep .capture input:focus { border-bottom-color: var(--accent-d); }
.on-deep .capture button {
  color: var(--accent-d);
  border-bottom-color: var(--accent-d);
}
.on-deep .capture button:hover { color: #F2F3EE; border-bottom-color: #F2F3EE; }
.on-deep .capture button:disabled { color: #7E8C82; border-bottom-color: var(--rule-d); }
.on-deep .body .form-note { color: #F2F3EE; }
.on-deep .body .form-note.ok { color: var(--accent-d); }
.on-deep .body .consent,
.on-deep .body .note { color: #93A398; }

/* the footer sits under a deep signup, so it carries the same ground rather
   than dropping back to bone for one strip of small print */
.foot.on-deep {
  border-top: 1px solid var(--rule-d);
  /* Overscroll at the bottom of the page would otherwise show the bone body
     under a deep footer. A shadow extends the colour past the last element
     without adding any height to the document. */
  box-shadow: 0 50vh 0 var(--deep);
}
.foot.on-deep .caption { color: #93A398; }