/* Hallmark · macrostructure: Letter · nav: N1a (3 destinations) · footer: Ft1 · tone: intimate, calm · theme: custom "Wissel" · anchor hue: 40 */
@font-face { font-family: "Fraunces"; src: url("../../fonts/fraunces-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../../fonts/instrument-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
:root {
  --color-paper: oklch(95% 0.022 60);
  --color-paper-2: oklch(31% 0.05 30);
  --color-ink: oklch(25% 0.03 40);
  --color-ink-2: oklch(44% 0.035 40);
  --color-on-dark: oklch(95% 0.022 60);
  --color-on-dark-2: oklch(82% 0.04 55);
  --color-accent: oklch(52% 0.15 38);
  --color-accent-soft: oklch(78% 0.1 50);
  --color-rule: oklch(82% 0.035 55);
  --color-demo: oklch(88% 0.13 92);
  --color-demo-ink: oklch(21% 0.02 264);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --text-sm: 0.9375rem;
  --text-base: 1.125rem;
  --text-big: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
  --text-h3: 1.3rem;
  --text-h2: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem);
  --text-display: clamp(2.4rem, 1rem + 6.4vw, 5.5rem);
  --space-2: 0.5rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem;
  --space-section: clamp(3.5rem, 2rem + 6vw, 7rem);
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --radius-1: 2px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 160ms;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font: var(--text-base)/1.65 var(--font-body); }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; font-weight: 400; line-height: 1.05; margin: 0; overflow-wrap: anywhere; min-width: 0; letter-spacing: -0.02em; }
h1 { font-size: var(--text-display); max-width: 11em; }
h2 { font-size: var(--text-h2); margin-bottom: var(--space-8); }
h3 { font: 600 var(--text-h3)/1.25 var(--font-body); letter-spacing: 0; margin-bottom: var(--space-2); }
p { margin: 0 0 var(--space-6); max-width: 34em; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.demo-bar { margin: 0; max-width: none; background: var(--color-demo); color: var(--color-demo-ink); font-size: var(--text-sm); padding: var(--space-2) var(--gutter); text-align: center; }
.demo-bar a { color: var(--color-demo-ink); white-space: nowrap; }
.top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2) var(--space-6); padding: var(--space-6) var(--gutter); }
.name { font: 500 1.25rem/1 var(--font-display); color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.top nav { display: flex; gap: var(--space-6); }
.top nav a { color: var(--color-ink-2); text-decoration: none; font-size: var(--text-sm); white-space: nowrap; }
.top nav a:hover { color: var(--color-accent); }
.letter { padding: clamp(2rem, 6vw, 6rem) var(--gutter) var(--space-section); }
.letter .body { margin: clamp(2rem, 5vw, 4rem) 0 0 clamp(0rem, 22vw, 22rem); border-left: 2px solid var(--color-accent); padding-left: clamp(1.25rem, 3vw, 2.5rem); }
.big { font: 400 var(--text-big)/1.4 var(--font-display); }
.link { color: var(--color-accent); font-weight: 600; text-underline-offset: 0.2em; text-decoration-thickness: 2px; }
.link:hover { color: var(--color-ink); }
.band { background: var(--color-paper-2); color: var(--color-on-dark); padding: var(--space-section) var(--gutter); }
.band p { color: var(--color-on-dark-2); }
.band :focus-visible { outline-color: var(--color-accent-soft); }
.path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); counter-reset: p; }
.path li { counter-increment: p; border-top: 1px solid var(--color-accent-soft); padding-top: var(--space-4); }
.path li::before { content: counter(p, decimal-leading-zero); display: block; font: 400 2rem/1 var(--font-display); color: var(--color-accent-soft); margin-bottom: var(--space-4); }
.path p { font-size: var(--text-sm); margin: 0; }
.rates { padding: var(--space-section) var(--gutter); max-width: 56rem; }
table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-8); }
th, td { text-align: left; padding: var(--space-4) 0; border-bottom: 1px solid var(--color-rule); font-weight: 400; vertical-align: baseline; }
td { text-align: right; white-space: nowrap; font: 400 1.5rem/1 var(--font-display); padding-left: var(--space-4); }
.write { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8) var(--space-12); }
.addr { overflow-wrap: anywhere; }
form { display: grid; gap: var(--space-4); }
label { display: grid; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; min-width: 0; }
input, textarea { font: inherit; font-weight: 400; background: transparent; color: var(--color-on-dark); border: 0; border-bottom: 1px solid var(--color-on-dark-2); padding: 0.5em 0; width: 100%; min-width: 0; border-radius: 0; }
input:hover, textarea:hover { border-bottom-color: var(--color-accent-soft); }
button { justify-self: start; font: 600 var(--text-base)/1.2 var(--font-body); background: var(--color-accent-soft); color: var(--color-ink); border: 0; border-radius: var(--radius-1); padding: 0.8em 1.8em; cursor: pointer; white-space: nowrap; transition: background var(--dur-1) var(--ease-out); }
button:hover { background: var(--color-on-dark); }
.status { background: var(--color-demo); color: var(--color-demo-ink) !important; padding: var(--space-4); margin: 0; font-size: var(--text-sm); }
.end { padding: var(--space-8) var(--gutter); font-size: var(--text-sm); color: var(--color-ink-2); }
.end p { margin: 0; max-width: none; }
[hidden] { display: none !important; }
@media (max-width: 59.99rem) { .path { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .path, .write { grid-template-columns: minmax(0, 1fr); } .top nav { gap: var(--space-4); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: 1ms !important; } }