:root {
  --bg: #F2F1EF;
  --surface: #FFFFFF;
  --cream: #EFE9DC;
  --outline: #E7E0D2;
  --ink: #1C1B18;
  --ink-2: #3A372F;
  --muted: #6B6557;
  --coral: #DF7E8B;
  --coral-dark: #91525A;
  --coral-soft: #F7DFE2;
  --ok: #008A05;
  --bad: #C62828;
  --serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%20.11%200%200%200%200%20.10%200%200%200%200%20.09%200%200%200%20.07%200'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23n%29'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}

img, svg { max-width: 100%; }
a { color: var(--coral-dark); }
:focus-visible { outline: 2px solid var(--coral-dark); outline-offset: 3px; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

.skip { position: absolute; left: 16px; top: -60px; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 100; text-decoration: none; font-weight: 600; }
.skip:focus { top: 16px; }

.topbar { position: sticky; top: 0; z-index: 60; background: var(--bg); border-bottom: 1px solid var(--ink); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); text-decoration: none; }
.topbar .wrap { position: relative; z-index: 1; }
.tear { position: absolute; left: 0; top: 0; bottom: 0; z-index: 0; display: flex; pointer-events: none; width: calc(max(0px, (100% - 1240px) / 2) + 24px + 74px); filter: drop-shadow(1px 0 1px rgba(28, 27, 24, 0.16)); }
.tear .fill { flex: 1; background: var(--coral); }
.tear svg { flex: none; width: 40px; height: 100%; margin-right: -6px; }
.brand-name { position: relative; top: 4px; }
.brand-mark { position: relative; display: inline-block; flex: none; width: 74px; height: 52px; margin-right: -2px; }
.brand-mark img { position: absolute; left: -2px; top: 50%; width: 48px; height: auto; transform: translateY(-50%) rotate(-4deg); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff; border: none; border-radius: 8px;
  padding: 16px 26px; font-family: var(--sans); font-size: 0.9375rem; font-weight: 600;
  text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none;
  box-shadow: none; background-image: none; transition: transform 0.1s ease-out;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.6; cursor: default; }
.btn.sm { padding: 12px 18px; min-height: 44px; font-size: 0.875rem; }
.topbar .btn { background: var(--coral); color: var(--ink); }

form.signup { display: grid; grid-template-columns: 1fr 1.3fr; gap: 4px 20px; max-width: 540px; }
form.signup .full { grid-column: 1 / -1; }
form.signup input, form.signup select {
  width: 100%; padding: 16px 0 12px; border: none; border-bottom: 1px solid var(--ink); border-radius: 0;
  background: transparent; font-family: var(--sans); font-size: 1.0625rem; color: var(--ink); outline: none;
  -webkit-appearance: none; appearance: none;
}
form.signup input::placeholder { color: var(--muted); opacity: 1; }
form.signup select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1B18' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center; background-size: 16px; padding-right: 28px;
}
form.signup select:has(option[value=""]:checked) { color: var(--muted); }
form.signup .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
form.signup { scroll-margin-top: 96px; }
form.signup [aria-invalid="true"] { border-bottom-color: var(--bad); border-bottom-width: 2px; }
form.signup input:focus-visible, form.signup select:focus-visible { outline: none; border-bottom-width: 3px; padding-bottom: 10px; }
form.signup .btn { margin-top: 18px; }
.form-error { display: none; color: var(--bad); font-size: 0.8125rem; font-weight: 600; padding-top: 8px; }
.success { display: none; max-width: 540px; padding: 18px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font-family: var(--serif); font-size: 1.375rem; letter-spacing: -0.02em; outline: none; }
.success p { margin: 0; }
.success .share-row { margin-top: 10px; font-family: var(--sans); font-size: 0.9375rem; letter-spacing: 0; color: var(--ink-2); }
.success .share { background: none; border: none; padding: 0; font: inherit; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.success.show { display: block; }

.colophon { border-top: 1px solid var(--ink); padding: 40px 0 120px; }
@media (min-width: 760px) { .colophon { padding-bottom: 48px; } }
.colophon-grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .colophon-grid { grid-template-columns: 1.2fr 1fr 1.4fr; gap: 48px; } }
.colophon .mark { font-family: var(--serif); font-size: 1.875rem; font-weight: 500; letter-spacing: -0.03em; margin: 0 0 6px; color: var(--ink); }
.colophon p, .colophon li { font-size: 0.84375rem; line-height: 1.65; color: var(--muted); margin: 0 0 6px; }
.colophon ul { list-style: none; margin: 0; padding: 0; }
.colophon a { color: var(--ink); display: inline-block; padding: 5px 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}