@layer tokens {
  :root {
    color-scheme: dark;

    --bg:      #08070b;
    --text:    #c4b49e;
    --muted:   #7a6e60;
    --accent:  #8b1a1a;
    --accent-dim: #5c1010;
    --accent-dim: oklch(from var(--accent) calc(l * 0.7) c h);
    --link:    #c4973e;
    --border:  #2c2836;
    --surface: #131119;
    --glow:    #1a0a0a22;
    --focus:   var(--accent);

    --font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'URW Palladio L', P052, ui-serif, serif;
    --font-body: Georgia, 'Palatino Linotype', Palatino, 'URW Palladio L', P052, ui-serif, serif;
    --leading: 1.65;
    --ease: ease;
    --hairline: 1px;

    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 2rem;
    --space-xl: 4rem;
    --radius: 2px;
    --motion: 0.15s;
    --size: 1rem;

    --grid-min: 16rem;
    --grid-gap: var(--space-md);
    --flex-min: var(--grid-min);
    --flex-gap: var(--grid-gap);
    --measure: 36rem;
    --logo-max: 8rem;
    --gallery-min: 8rem;
    --reel-block-size: min(70dvh, 28rem);
    --wave-block-size: 3rem;
  }

  /* dark first in color-scheme: no OS preference → original factory dark. */
  @supports (color: light-dark(#fff, #000)) {
    :root {
      color-scheme: dark light;
      --bg:      light-dark(#f4efe4, #08070b);
      --text:    light-dark(#1a1410, #c4b49e);
      --muted:   light-dark(#6b5f52, #7a6e60);
      --accent:  light-dark(#8b1a1a, #b52222);
      --accent-dim: oklch(from var(--accent) calc(l * 0.7) c h);
      --link:    light-dark(#8a5a12, #c4973e);
      --border:  light-dark(#d4cbb8, #2c2836);
      --surface: light-dark(#fffaf3, #131119);
      --glow:    light-dark(#c4973e22, #1a0a0a22);
      --focus:   var(--accent);
    }

    :root[data-scheme="light"] { color-scheme: light; }
    :root[data-scheme="dark"]  { color-scheme: dark; }
  }

  @media (prefers-reduced-motion: reduce) {
    :root { --motion: 0s; }
  }

  /* Short window (landscape phone, squat desktop): leave room for the tree. */
  @media (max-height: 40rem) {
    :root {
      --reel-block-size: min(45dvh, 16rem);
      --wave-block-size: 2rem;
    }
  }

  @media (forced-colors: active) {
    :root {
      --bg: Canvas;
      --text: CanvasText;
      --muted: GrayText;
      --accent: LinkText;
      --accent-dim: LinkText;
      --link: LinkText;
      --border: CanvasText;
      --surface: Canvas;
      --glow: transparent;
      --focus: Highlight;
    }
  }
}

@layer layout {
  body {
    font-family: var(--font-body);
    font-kerning: normal;
    font-optical-sizing: auto;
    font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "onum" 1;
    text-rendering: optimizeLegibility;
    background-color: var(--bg);
    background-image: radial-gradient(ellipse 70% 50% at 50% 40%, var(--glow) 0%, transparent 70%);
    color: var(--text);
    min-block-size: 100vh;
    min-block-size: 100dvh;
  }

  ::selection {
    background: var(--accent);
    color: var(--bg);
  }

  .app {
    min-block-size: 100vh;
    min-block-size: 100dvh;
  }

  .main {
    container: page / inline-size;
    min-block-size: 100vh;
    min-block-size: 100dvh;
    display: grid;
    place-items: center;
    padding-block: var(--space-xl);
    padding-inline: var(--space-md);
    padding-block-start: max(var(--space-xl), env(safe-area-inset-top, 0px));
    padding-block-end: max(var(--space-xl), env(safe-area-inset-bottom, 0px));
    padding-inline-start: max(var(--space-md), env(safe-area-inset-left, 0px));
    padding-inline-end: max(var(--space-md), env(safe-area-inset-right, 0px));
  }

  .main:has(> .tree--wide) {
    align-items: start;
    justify-items: center;
  }

  .main > p {
    color: var(--muted);
    font-size: 0.9rem;
    letter-spacing: 0.08em;
  }

  .main.stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    place-items: unset;
    padding-block-start: 0;
    padding-block-end: 0;
    padding-inline: 0;
  }

  .home {
    inline-size: 100%;
    min-inline-size: 0;
  }

  .main.stack .tree {
    margin-inline: auto;
    padding-block-start: var(--space-xl);
    padding-block-end: max(var(--space-xl), env(safe-area-inset-bottom, 0px));
    padding-inline-start: max(var(--space-md), env(safe-area-inset-left, 0px));
    padding-inline-end: max(var(--space-md), env(safe-area-inset-right, 0px));
  }
}

@layer components {
  .wordmark {
    --flex-min: 100%;
    --flex-gap: 0.35em;
    align-items: center;
    text-wrap: balance;
    text-rendering: optimizeLegibility;
  }

  .wordmark__name {
    font-family: var(--font-display);
    font-size: 1.65em;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin-inline-end: -0.12em;
    text-transform: uppercase;
    line-height: 1.05;
    color: var(--text);
  }

  .wordmark__house {
    font-family: var(--font-display);
    font-size: 0.95em;
    font-weight: 400;
    letter-spacing: 0.28em;
    margin-inline-end: -0.28em;
    text-transform: uppercase;
    color: var(--accent);
  }

  .wordmark__house::before {
    content: '';
    display: block;
    inline-size: 2.5em;
    block-size: var(--hairline);
    margin-block: 0.25em;
    margin-inline: auto;
    background: var(--accent-dim);
  }

  .logo {
    display: block;
    inline-size: min(var(--logo-max), 40%);
  }

  .logo picture,
  .logo__img,
  .media picture,
  .media__img {
    inline-size: 100%;
    block-size: auto;
  }

  .media {
    inline-size: 100%;
  }

  .media__cap {
    margin-block-start: var(--space-sm);
    color: var(--muted);
    font-size: 0.8em;
    font-style: italic;
  }

  .gallery__link {
    color: inherit;
    text-decoration: none;
  }

  .line,
  .kicker {
    color: var(--muted);
    font-family: var(--font-display);
    font-size: 1.05em;
    font-style: italic;
    letter-spacing: 0.02em;
    max-inline-size: 28em;
    text-wrap: pretty;
  }

  .heading {
    font-family: var(--font-display);
    font-size: 1.85em;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-wrap: balance;
    text-rendering: optimizeLegibility;
    color: var(--text);
  }

  .lede,
  .copy {
    display: grid;
    gap: var(--space-sm);
    justify-items: center;
    inline-size: 100%;
  }

  .page-col {
    display: grid;
    gap: var(--space-xl);
    justify-items: stretch;
    text-align: start;
    inline-size: 100%;
    max-inline-size: 100%;
  }

  .page-col > * {
    inline-size: 100%;
    min-inline-size: 0;
  }

  .tree--wide .lede {
    gap: var(--space-md);
    justify-items: stretch;
    text-align: center;
  }

  .tree--wide .essay .prose {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    hanging-punctuation: first last;
  }

  .tree--home .copy {
    gap: 0;
    justify-items: stretch;
    text-align: start;
  }

  .tree--home .copy .prose {
    text-align: start;
    hyphens: auto;
    hanging-punctuation: first last;
    orphans: 3;
    widows: 3;
  }

  .tree--home .copy .prose p + p {
    margin-block-start: 0.85em;
    text-indent: 1.35em;
  }

  .epigraph {
    display: grid;
    gap: 0.65em;
    justify-items: stretch;
    text-align: start;
  }

  .epigraph .kicker,
  .epigraph .statement {
    max-inline-size: none;
    text-align: start;
  }

  .statement {
    font-family: var(--font-display);
    font-size: 1.35em;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.35;
    color: var(--text);
  }

  .cta {
    font-family: var(--font-display);
    font-size: 1.05em;
    font-style: italic;
    line-height: 1.5;
    inline-size: 100%;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    text-wrap: pretty;
    color: var(--link);
  }

  .cta::before {
    content: '';
    display: block;
    inline-size: 2.5em;
    block-size: var(--hairline);
    margin-inline: 0 auto;
    margin-block-end: var(--space-md);
    background: var(--accent-dim);
  }

  .pillars {
    list-style: none;
    display: grid;
    gap: var(--space-lg);
    inline-size: 100%;
    padding: 0;
    margin: 0;
    text-align: start;
  }

  .pillars::before {
    content: '';
    display: block;
    inline-size: 2.5em;
    block-size: var(--hairline);
    margin-inline: 0 auto;
    margin-block-end: var(--space-md);
    background: var(--accent-dim);
  }

  .pillar {
    display: grid;
    grid-template-columns: 2.75em minmax(0, 1fr);
    column-gap: 0.85em;
    align-items: baseline;
  }

  .pillar__num {
    font-family: var(--font-display);
    font-variant-caps: all-small-caps;
    letter-spacing: 0.12em;
    color: var(--accent);
    text-align: end;
  }

  .pillar__body {
    display: grid;
    gap: 0.3em;
  }

  .pillar__name {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--text);
  }

  .pillar__gloss {
    color: var(--muted);
    font-size: 0.92em;
    line-height: 1.5;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
  }

  .copy {
    justify-items: stretch;
    text-align: start;
  }

  .copy .kicker,
  .copy .meta,
  .copy .empty {
    text-align: center;
  }

  .crumbs {
    color: var(--muted);
    font-size: 0.75em;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.14em;
  }

  .meta {
    color: var(--muted);
    font-size: 0.8em;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.1em;
  }

  .empty {
    color: var(--muted);
    font-size: 0.95em;
    font-style: italic;
  }

  .notice {
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 0.9em;
    font-style: italic;
    letter-spacing: 0.02em;
    text-align: justify;
    text-justify: inter-word;
    text-wrap: pretty;
  }

  .prose {
    justify-self: stretch;
    text-align: start;
    color: var(--text);
    font-size: 1.0625em;
    font-style: normal;
    letter-spacing: 0.01em;
    line-height: 1.7;
    hanging-punctuation: first last;
    hyphens: auto;
    text-wrap: pretty;
  }

  .prose p {
    margin: 0;
  }

  .prose p + p {
    margin-block-start: 1.1em;
  }

  .essay .prose > p:first-child::first-letter {
    font-family: var(--font-display);
    font-size: 2.6em;
    font-weight: 700;
    float: left;
    float: inline-start;
    line-height: 0.85;
    padding-inline-end: 0.08em;
    padding-block-end: 0.05em;
    color: var(--accent);
  }

  .prose a,
  .prose__link {
    color: var(--link);
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: 0.18em;
  }

  .prose a:hover,
  .prose a:focus-visible,
  .prose__link:hover,
  .prose__link:focus-visible {
    color: var(--accent);
  }

  .doors {
    --flex-min: 100%;
    --flex-gap: var(--space-sm);
  }

  /* Press chrome: real buttons and .door. Door keeps the link-tree layout. */
  :is(button, input[type="button"], input[type="submit"], input[type="reset"], .door) {
    padding: 0.9em 1em;
    border: var(--hairline) solid var(--border);
    border-radius: var(--radius);
    background-color: var(--surface);
    color: var(--text);
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    transition: border-color var(--motion) var(--ease), color var(--motion) var(--ease);
  }

  .door {
    --flex-min: 100%;
    --flex-gap: 0.15em;
    align-items: center;
    text-decoration: none;
  }

  :is(button, input[type="button"], input[type="submit"], input[type="reset"], .door):focus-visible {
    border-color: var(--accent-dim);
    color: var(--accent);
    outline: var(--hairline) solid var(--focus);
    outline-offset: 2px;
  }

  :is(button, input[type="button"], input[type="submit"], input[type="reset"], .door):active:not(:disabled) {
    border-color: var(--accent-dim);
    color: var(--accent);
  }

  @media (hover: hover) {
    :is(button, input[type="button"], input[type="submit"], input[type="reset"], .door):not(:disabled) {
      cursor: pointer;
    }

    :is(button, input[type="button"], input[type="submit"], input[type="reset"], .door):not(:disabled):hover {
      border-color: var(--accent-dim);
      color: var(--accent);
    }
  }

  :is(button, input[type="button"], input[type="submit"], input[type="reset"]):disabled {
    color: var(--muted);
    cursor: default;
  }

  .door__label {
    font-family: var(--font-display);
    font-size: 0.85em;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-rendering: optimizeLegibility;
  }

  .door__blurb {
    color: var(--muted);
    font-size: 0.75em;
    font-style: italic;
    letter-spacing: 0.02em;
  }

  .bar,
  .social {
    --flex-grow: 0;
    --flex-min: min-content;
    --flex-gap: var(--space-sm);
    justify-content: center;
  }

  .bar__link,
  .social__link {
    font-family: var(--font-display);
    font-size: 0.75em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--muted);
    transition: color var(--motion) var(--ease);
  }

  .bar__link:focus-visible,
  .social__link:focus-visible {
    color: var(--accent);
    outline: var(--hairline) solid var(--focus);
    outline-offset: 2px;
  }

  @media (hover: hover) {
    .bar__link:hover,
    .social__link:hover {
      color: var(--accent);
    }
  }

  details.menu {
    inline-size: 100%;
  }

  .menu > summary {
    font-family: var(--font-display);
    font-size: 0.85em;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: default;
    list-style: none;
  }

  .menu > summary::-webkit-details-marker {
    display: none;
  }

  @media (hover: hover) {
    .menu > summary {
      cursor: pointer;
    }
  }

  .menu__list {
    --flex-min: 100%;
    --flex-gap: var(--space-sm);
    margin-block-start: var(--space-sm);
    padding: var(--space-md);
    border: var(--hairline) solid var(--border);
    border-radius: var(--radius);
    background-color: var(--surface);
  }

  .field {
    --flex-min: 100%;
    --flex-gap: 0.35em;
    text-align: start;
  }

  .field label {
    color: var(--muted);
    font-size: 0.8em;
    letter-spacing: 0.04em;
  }

  .field :is(input, textarea, select) {
    appearance: none;
    inline-size: 100%;
    padding: 0.9em 1em;
    border: var(--hairline) solid var(--border);
    border-radius: var(--radius);
    background-color: var(--surface);
    color: var(--text);
  }

  .field textarea {
    min-block-size: 8rem;
    resize: vertical;
  }

  .field :is(input, textarea, select):focus-visible {
    border-color: var(--accent-dim);
    outline: var(--hairline) solid var(--focus);
    outline-offset: 2px;
  }

  @supports selector(::scroll-button(inline-start)) {
    .reel {
      scroll-marker-group: after;
    }

    .reel::scroll-button(inline-start) {
      content: "‹" / "Previous slide";
    }

    .reel::scroll-button(inline-end) {
      content: "›" / "Next slide";
    }

    .reel::scroll-button(inline-start),
    .reel::scroll-button(inline-end) {
      color: var(--accent);
      background: var(--surface);
      border: var(--hairline) solid var(--border);
      border-radius: var(--radius);
      inline-size: 2.25rem;
      block-size: 2.25rem;
    }

    .reel > .reel__slide::scroll-marker {
      content: "";
      inline-size: 0.5rem;
      block-size: 0.5rem;
      border-radius: 50%;
      background: var(--border);
    }

    .reel > .reel__slide::scroll-marker:target-current {
      background: var(--accent);
    }
  }

  @media print {
    :root {
      --bg: #fff;
      --text: #1a1410;
      --muted: #5c5348;
      --accent: #8b1a1a;
      --link: #8a5a12;
      --glow: transparent;
      --surface: #fff;
    }

    body {
      background: #fff;
      color: #1a1410;
    }

    .tree--home .bar,
    .tree--home .doors,
    .tree--home .notice,
    .tree--home .social {
      display: none;
    }

    .tree--home {
      gap: 2.25rem;
    }

    .tree--home .copy .prose {
      text-align: start;
    }

    .prose a {
      color: inherit;
      text-decoration: none;
    }
  }
}