/* Successor's site. Every value comes from the brand's tokens (context/brand/tokens.json), named by
   role. Ink and paper carry the page, with no story colours. Codicil is never set below 20 px;
   Hanken Grotesk takes everything smaller. */

@font-face { font-family: "Codicil"; src: url("/fonts/codicil/Codicil-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Codicil"; src: url("/fonts/codicil/Codicil-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/fonts/hanken-grotesk/HankenGrotesk-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/fonts/hanken-grotesk/HankenGrotesk-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  color-scheme: light dark;
  --color-surface-page: #F5F1E9;
  --color-surface-card: #FFFDF8;
  --color-surface-inverse: #18352B;
  --color-text-default: #18352B;
  --color-text-muted: #4A5D54;
  --color-text-inverse: #F5F1E9;
  --color-text-inverse-muted: #A9B8AF;
  --color-border-hairline: #D9D3C5;
  --color-border-control: #4A5D54;
  --color-action-primary: #18352B;
  --color-action-on-primary: #F5F1E9;
  --color-action-primary-hover: #3B5349;
  --color-action-focus: #18352B;
  --color-feedback-warning: #6E5200;

  --font-display: "Codicil", "Iowan Old Style", "Palatino Linotype", Baskerville, Georgia, serif;
  --font-text: "Hanken Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;

  --space-2: 4px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 24px;
  --space-7: 32px; --space-8: 48px; --space-9: 64px; --space-10: 96px;
  --radius-sm: 4px;
  --gutter: 24px;
  --margin: 16px;
  --measure: 62ch;
  --ease-settle: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-productive: cubic-bezier(0.2, 0, 0.38, 0.9);
  --duration-fast: 100ms;
  --duration-reveal: 1200ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-surface-page: #112820;
    --color-surface-card: #18352B;
    --color-surface-inverse: #18352B;
    --color-text-default: #F5F1E9;
    --color-text-muted: #A9B8AF;
    --color-border-hairline: #2E4A40;
    --color-border-control: #A9B8AF;
    --color-action-primary: #F5F1E9;
    --color-action-on-primary: #18352B;
    --color-action-primary-hover: #D1D1C9;
    --color-action-focus: #F5F1E9;
    --color-feedback-warning: #E6C77A;
  }
}

@media (min-width: 768px) {
  :root { --margin: 56px; }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-surface-page);
  color: var(--color-text-default);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.55;
  font-variant-numeric: lining-nums tabular-nums;
  overflow-wrap: break-word;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

img { max-width: 100%; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; text-wrap: balance; }
h1 { font-size: 32px; line-height: 1.1; letter-spacing: -0.005em; }
h2 { font-size: 28px; line-height: 1.15; }
h3 { font-size: 22px; line-height: 1.25; }
p { margin: 0; }
p, li { text-wrap: pretty; }

@media (min-width: 768px) {
  h1 { font-size: 44px; }
  h2 { font-size: 32px; }
  h3 { font-size: 24px; }
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--color-action-focus); outline-offset: 3px; border-radius: 2px; }


.wrap { width: 100%; max-width: calc(1200px + 2 * var(--margin)); margin: 0 auto; padding: 0 var(--margin); }

.skip { position: absolute; left: -9999px; top: 0; z-index: 10; padding: var(--space-4) var(--space-5); background: var(--color-surface-card); color: var(--color-text-default); }
.skip:focus { left: var(--space-5); top: var(--space-5); }

/* Header: the name at logo size, linking home, on every page; the navigation beside it. */
.site-header__row { display: flex; align-items: center; justify-content: space-between; gap: 0 var(--space-6); flex-wrap: wrap; padding-top: var(--space-3); padding-bottom: var(--space-3); }
.site-header__home { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; margin-left: -8px; }
.site-header__home img { display: block; height: 16.7px; width: auto; }
@media (min-width: 768px) { .site-header__home img { height: 20.6px; } }
.site-nav { display: flex; flex-wrap: wrap; column-gap: var(--space-6); }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; text-decoration: none; }
@media (max-width: 767px) {
  .site-nav { column-gap: var(--space-5); }
  .site-header__row { padding-top: var(--space-2); padding-bottom: 0; }
}
.site-nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; }

/* The photograph hero. One plane holds the photograph, the name and (for a depth moment) the same
   photograph again, masked by its own foreground edge. Everything inside the plane is placed in the
   photograph's own percentages and the plane scales as one, so the edge stays on the same part of
   the same letter at every width. Each breakpoint only re-crops the plane (zoom and offset). */
.depth {
  --ar: var(--ar-n); --zoom: var(--zoom-n); --fx: var(--fx-n); --fy: var(--fy-n);
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 1680px;
  aspect-ratio: var(--ar);
  overflow: hidden;
  container-type: inline-size;
  background: var(--color-surface-card);
}
@media (min-width: 768px) {
  /* On wide screens the hero stops at its share of the window (--cap, from HEROES), so the page's point
     shows near the first screen. The plane is placed from its top-left corner, so this only trims the bottom. */
  .depth { --ar: var(--ar-w); --zoom: var(--zoom-w); --fx: var(--fx-w); --fy: var(--fy-w); max-height: max(var(--cap, 62vh), 440px); }
}
.depth__plane {
  position: absolute;
  width: calc(100cqw * var(--zoom));
  aspect-ratio: var(--pa);
  left: calc(-100cqw * var(--zoom) * var(--fx));
  top: calc(-100cqw * var(--zoom) * var(--ph) * var(--fy));
}
.depth__photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; }
.depth__name { position: absolute; left: var(--nl); top: var(--nt); width: var(--nw); display: block; line-height: 0; }
.depth__name picture, .depth__name img { display: block; width: 100%; height: auto; max-width: none; }
a.depth__name:focus-visible { outline-offset: 6px; }
.depth__fg {
  position: absolute; inset: 0; pointer-events: none;
  background-size: 100% 100%;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* The reveal: the name arrives pale and lands in full ink, once, on the settle curve. With reduced
   motion the end state is the default. */
@media (prefers-reduced-motion: no-preference) {
  .depth__name { animation: name-reveal var(--duration-reveal) var(--ease-settle) both; }
}
@keyframes name-reveal { from { opacity: 0.25; } to { opacity: 1; } }

/* The first screen under the photograph: the page's point in one line, who it is for, the action. */
.intro { display: grid; gap: var(--space-5); justify-items: start; padding-top: var(--space-7); padding-bottom: var(--space-8); }
.intro h1 { max-width: 20ch; }
.intro__who { font-family: var(--font-display); font-size: 20px; line-height: 1.4; max-width: 44ch; }
.intro .cta { margin-top: var(--space-3); }
@media (min-width: 768px) {
  .intro { padding-top: var(--space-8); padding-bottom: var(--space-9); }
  .intro h1 { max-width: 30ch; }
  .intro h1 { font-size: 56px; line-height: 1.08; }
  .intro__who { font-size: 26px; }
}

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4); min-height: 52px; padding: 0 var(--space-6);
  border: 1.5px solid var(--color-action-primary); border-radius: var(--radius-sm);
  background: var(--color-action-primary); color: var(--color-action-on-primary);
  font: 600 16px/1.2 var(--font-text); text-decoration: none; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-productive);
}
.button:hover { background: var(--color-action-primary-hover); border-color: var(--color-action-primary-hover); }
/* Not open yet: the same button, unfilled, saying so inside it. */
.button:disabled { background: transparent; color: var(--color-text-default); border-color: var(--color-border-control); cursor: not-allowed; }
.button__soon { font-weight: 400; font-size: 14px; color: var(--color-text-muted); }

/* Sections: one idea each, generous space, no bands. On wide screens the heading holds the left
   column and the content the right. */
.section { position: relative; padding-top: var(--space-9); padding-bottom: var(--space-9); }
.section + .section::before { content: ""; position: absolute; top: 0; left: var(--margin); right: var(--margin); border-top: 1px solid var(--color-border-hairline); }
.hero + .section { padding-top: var(--space-6); }
.split { display: grid; gap: var(--space-6); align-items: start; }
.split > h2 { max-width: 14ch; }
.split__head { display: grid; gap: var(--space-4); max-width: 28ch; }
.split__head p { font-size: 17px; color: var(--color-text-muted); }
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--space-8); }
}

.lede { font-family: var(--font-display); font-size: 24px; line-height: 1.35; max-width: 36ch; }
@media (min-width: 768px) { .lede { font-size: 28px; } }
.section--cta { grid-template-columns: none; }
.section--cta > h2 { max-width: 24ch; }
.section--cta .cta { margin-top: 0; }
.section--cta .lede + .cta { margin-top: var(--space-7); }

.steps, .points, .record__entries { list-style: none; margin: 0; padding: 0; }

/* How it works: three numbered steps, the list's own numbers drawn in Codicil beside each. */
.steps { display: grid; gap: var(--space-8); counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--space-5); row-gap: var(--space-3); }
.steps li::before { content: counter(step); grid-row: span 2; font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1.1; color: var(--color-text-muted); }
.steps h3 { font-size: 24px; max-width: 26ch; }
.steps p { font-size: 18px; max-width: 40ch; }
@media (min-width: 768px) { .steps h3 { font-size: 28px; } .steps li { grid-template-columns: 56px minmax(0, 1fr); } .steps li::before { font-size: 32px; } }

/* Short statements in Codicil, one per line. */
.points { display: grid; gap: var(--space-6); }
.points li { font-family: var(--font-display); font-size: 24px; line-height: 1.3; max-width: 36ch; }
@media (min-width: 768px) { .points li { font-size: 28px; } }

/* What Successor writes: a sample page from a record, set like a typed page. Facts in Codicil, where
   each came from in small sans beneath it, the open question with a ruled line to answer on. */
.record { background: var(--color-surface-card); border-radius: var(--radius-sm); padding: var(--space-7) var(--space-6); box-shadow: 0 1px 0 var(--color-border-hairline), 0 18px 40px -28px rgba(24, 53, 43, 0.35); }
@media (min-width: 768px) { .record { padding: var(--space-8) var(--space-9); } }
.record__title { font-size: 28px; padding-bottom: var(--space-5); margin-bottom: var(--space-6); border-bottom: 2px solid var(--color-text-default); }
.record__entries { display: grid; gap: var(--space-7); }
.entry { display: grid; gap: var(--space-2); }
.entry__fact { font-family: var(--font-display); font-size: 22px; line-height: 1.35; }
.entry__source { font-size: 15px; color: var(--color-text-muted); }

.entry__blank { display: block; height: var(--space-7); border-bottom: 1px solid var(--color-border-control); }
.record__foot { margin-top: var(--space-8); font-size: 14px; color: var(--color-text-muted); }

/* Footer: an ink ground, so the reversed masthead. */
.site-footer { background: var(--color-surface-inverse); color: var(--color-text-inverse); padding: var(--space-8) 0; }
.site-footer__grid { display: grid; gap: var(--space-6); align-items: start; }
.site-footer__home { display: inline-flex; align-items: center; min-height: 44px; justify-self: start; }
.site-footer__home img { display: block; height: 16.7px; width: auto; }
@media (min-width: 768px) { .site-footer__home img { height: 20.6px; } }
.site-footer__nav { display: flex; flex-wrap: wrap; column-gap: var(--space-6); }
.site-footer__nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 15px; text-decoration: none; }
.site-footer__nav a:hover { text-decoration: underline; }
.site-footer__notes { display: grid; gap: var(--space-3); font-size: 14px; color: var(--color-text-inverse-muted); max-width: var(--measure); }
.site-footer__advice { color: var(--color-text-inverse); font-size: 15px; }
.site-footer :focus-visible { outline-color: var(--color-text-inverse); }
@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: auto 1fr; column-gap: var(--space-9); }
  .site-footer__nav { justify-self: end; }
  .site-footer__notes { grid-column: 1 / -1; padding-top: var(--space-6); border-top: 1px solid var(--color-text-inverse-muted); max-width: none; display: flex; justify-content: space-between; gap: var(--space-6); }
}


/* Not found: one line and one way home, set well down the page. */
.notfound { display: grid; gap: var(--space-7); align-content: center; min-height: 64vh; }
.notfound h1 { font-size: 44px; line-height: 1.05; }
.notfound__home { font-size: 18px; font-weight: 600; text-underline-offset: 4px; }
.notfound__home:hover { text-decoration-thickness: 2px; }
@media (min-width: 768px) { .notfound h1 { font-size: 64px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0ms !important; }
}