/* heirloom.page — one stylesheet, one tiny first-party script (/theme.js),
   no third-party requests. Tokens copied from the Heirloom design system
   (Lamplight & Wax). */

/* Brand serif. Drop the OFL files into /fonts/ (Spectral 400/500 + 400 italic).
   Until then Georgia carries the serif voice — see README. */
@font-face { font-family: 'Spectral'; src: url('/fonts/spectral-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Spectral'; src: url('/fonts/spectral-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Spectral'; src: url('/fonts/spectral-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --paper:#FAF6EE; --card:#FFFDF7; --hairline:#EAE2D3; --outline:#D6CBB6;
  --ink-1:#302620; --ink-2:#6E6659; --ink-3:#8A7F71; --prose:#4A443C;
  --wax:#96232A; --wax-deep:#7E1E24; --on-wax:#FBEEEC; --honey:#B9832F;
  --serif:'Spectral',Georgia,'Times New Roman',serif;
  --ui:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --pad:clamp(20px,5vw,28px);
}
/* Dark palette, twice on purpose (CSS has no mixins): once for an explicit
   keeper choice (data-theme, set by /theme.js and remembered on the device),
   once for the system preference when no choice has been made. An explicit
   "light" beats a dark system setting by matching neither block. */
:root[data-theme="dark"] {
  --paper:#1C1713; --card:#262019; --hairline:#383025; --outline:#4A4238;
  --ink-1:#F0E9DE; --ink-2:#9C9184; --ink-3:#8A7F71; --prose:#E5DCCE;
  --wax:#D8565A; --wax-deep:#B3373C; --on-wax:#3A0D0C; --honey:#D9A254;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#1C1713; --card:#262019; --hairline:#383025; --outline:#4A4238;
    --ink-1:#F0E9DE; --ink-2:#9C9184; --ink-3:#8A7F71; --prose:#E5DCCE;
    --wax:#D8565A; --wax-deep:#B3373C; --on-wax:#3A0D0C; --honey:#D9A254;
  }
}

/* The theme toggle: a quiet circle in the header. The moon shows in light
   (tap for dark), the sun in dark (tap for light) — same two selector
   contexts as the palette, for the same reason. */
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:999px; border:1px solid var(--outline); background:none; color:var(--ink-2); cursor:pointer; padding:0; }
.theme-toggle:hover { color:var(--ink-1); border-color:var(--ink-3); }
.theme-toggle svg { width:17px; height:17px; }
.theme-toggle .sun { display:none; }
:root[data-theme="dark"] .theme-toggle .sun { display:block; }
:root[data-theme="dark"] .theme-toggle .moon { display:none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .sun { display:block; }
  :root:not([data-theme="light"]) .theme-toggle .moon { display:none; }
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink-1); font-family:var(--ui); -webkit-font-smoothing:antialiased; }
img { max-width:100%; }
a { color:var(--wax); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover { color:var(--wax-deep); }
::selection { background:rgba(150,35,42,.16); }
:focus-visible { outline:2px solid var(--wax); outline-offset:3px; }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:12px; top:12px; background:var(--card); padding:10px 14px; border-radius:999px; z-index:10; }

.wrap { max-width:860px; margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.wide { max-width:1040px; }

/* chrome */
.site-header { border-bottom:1px solid var(--hairline); }
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-top:20px; padding-bottom:20px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand img { width:26px; height:26px; object-fit:contain; }
.brand span { font:500 20px/1 var(--serif); color:var(--ink-1); letter-spacing:.01em; }
.site-nav { display:flex; gap:20px; }
.site-nav a { font:400 14px/1 var(--ui); color:var(--ink-2); text-decoration:none; padding:6px 0; }
.site-nav a:hover { color:var(--wax); }
.site-footer { border-top:1px solid var(--hairline); margin-top:clamp(44px,8vw,70px); }
.site-footer .wrap { display:flex; justify-content:space-between; gap:28px; flex-wrap:wrap; align-items:flex-start; padding-top:clamp(28px,6vw,38px); padding-bottom:clamp(38px,8vw,52px); }
.site-footer .brand { margin-bottom:12px; }
.site-footer .brand img { width:20px; height:20px; }
.site-footer .brand span { font-size:17px; }
.site-footer p { font:400 13px/1.6 var(--ui); color:var(--ink-3); margin:0 0 4px; }
.site-footer nav { display:flex; gap:24px; flex-wrap:wrap; }
.site-footer nav a { font:400 14px/1 var(--ui); color:var(--ink-2); text-decoration:none; padding:6px 0; }
.site-footer nav a:hover { color:var(--wax); }

/* shared type */
.eyebrow { font:600 12px/1.3 var(--ui); letter-spacing:.12em; text-transform:uppercase; color:var(--honey); margin:0 0 clamp(16px,3.8vw,26px); }
.note { font:400 15px/1.5 var(--ui); color:var(--ink-3); }
.btn { display:inline-flex; align-items:center; background:var(--wax); color:var(--on-wax); border-radius:999px; padding:16px 28px; font:600 16px/1 var(--ui); text-decoration:none; border:0; cursor:pointer; }
.btn:hover { background:var(--wax-deep); color:var(--on-wax); }

/* The waitlist form. Plain HTML POST — the site carries no scripts, and the
   form is why: see site/_worker.js for the other half. */
.notify input[type="email"] { flex:1 1 220px; min-width:0; font:400 16px/1 var(--ui); color:var(--ink-1); background:var(--card); border:1px solid var(--outline); border-radius:999px; padding:16px 22px; }
.notify input[type="email"]::placeholder { color:var(--ink-3); }
.notify input[type="email"]:focus { outline:2px solid var(--wax); outline-offset:1px; }
.notify .note { flex-basis:100%; }
/* The honeypot: positioned off-canvas rather than display:none, because the
   bots the trap exists for skip fields the layout engine dropped. */
.notify .trap { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.btn-quiet { display:inline-flex; align-items:center; color:var(--wax); background:none; border:1.5px solid var(--outline); border-radius:999px; padding:15px 26px; font:600 15px/1 var(--ui); text-decoration:none; }

/* hero */
.hero { padding-top:clamp(40px,8vw,88px); }
.hero-grid { display:flex; flex-wrap:wrap; gap:clamp(30px,5vw,52px); align-items:center; }
.hero-text { flex:1 1 320px; min-width:0; }
.hero h1 { font:500 clamp(33px,8.2vw,56px)/1.06 var(--serif); color:var(--ink-1); margin:0 0 28px; max-width:13ch; letter-spacing:-.015em; text-wrap:pretty; }
.hero .lede { font:400 clamp(17px,4.6vw,20px)/1.7 var(--ui); color:var(--prose); margin:0; max-width:46ch; text-wrap:pretty; }
.hero .cta { display:flex; gap:22px; align-items:center; flex-wrap:wrap; margin:38px 0 0; }
.hero-art { flex:0 1 272px; min-width:206px; margin:0 auto; display:flex; justify-content:center; align-items:center; padding:14px 30px 14px 14px; }
.sheets { position:relative; width:100%; max-width:236px; aspect-ratio:3/4.05; }
.sheet { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:3px; border:1px solid var(--hairline); }
.sheet-3 { transform:rotate(4.5deg) translate(9px,5px); }
.sheet-2 { transform:rotate(1.5deg) translate(4px,2px); }
.sheet-top { position:absolute; inset:0; display:block; transform:rotate(-3deg); }
.seal { position:absolute; right:-30px; bottom:30px; width:94px; height:94px; object-fit:contain; transform:rotate(7deg); }

/* THE ONE BREAKPOINT — headline beside the letters, copy full width beneath */
@media (max-width:640px) {
  .hero { padding-top:30px; }
  .hero-grid { display:grid; grid-template-columns:1fr 126px; column-gap:14px; row-gap:0; align-items:end; }
  .hero-text { display:contents; }
  .hero .eyebrow { grid-column:1; grid-row:1; margin:0 0 14px; }
  .hero h1 { grid-column:1; grid-row:2; font-size:30px; margin:0; max-width:none; }
  .hero-art { grid-column:2; grid-row:1/span 2; min-width:0; margin:0; padding:0 28px 0 0; align-self:end; }
  .hero .lede { grid-column:1/-1; grid-row:3; margin:24px 0 0; }
  .hero .cta { grid-column:1/-1; grid-row:4; margin:28px 0 0; }
  .seal { right:-14px; bottom:14px; width:42px; height:42px; }
}

/* home sections */
.section { padding-top:clamp(46px,9.5vw,84px); }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); gap:14px; list-style:none; margin:0; padding:0; }
.card { background:var(--card); border:1px solid var(--hairline); border-radius:16px; padding:clamp(20px,4.4vw,24px); }
.card .ord { font:500 15px/1 var(--serif); color:var(--honey); margin:0 0 16px; }
.card h3 { font:500 20px/1.3 var(--serif); color:var(--ink-1); margin:0 0 10px; }
.card p { font:400 15px/1.65 var(--ui); color:var(--prose); margin:0; }
blockquote.passage { margin:0; border-left:2px solid var(--honey); padding:2px 0 2px 26px; max-width:58ch; }
blockquote.passage p { font:italic 400 clamp(20px,5.4vw,25px)/1.6 var(--serif); color:var(--ink-1); margin:0; text-wrap:pretty; }
.passage-credit { font:400 15px/1.6 var(--ui); color:var(--ink-3); margin:20px 0 0; padding-left:28px; max-width:58ch; }
.shots { display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:18px; list-style:none; margin:0; padding:0; }
.shots figure { margin:0; }
.shot { aspect-ratio:9/19.5; border-radius:20px; border:1px dashed var(--outline); background:var(--card); display:flex; align-items:center; justify-content:center; text-align:center; padding:12px; margin-bottom:12px; }
.shot span { font:400 13px/1.4 var(--ui); color:var(--ink-3); }
/* A tile with its screenshot in: the dashed placeholder border becomes a
   hairline, and the image fills the tile edge to edge. Each tile carries a
   light and a dark capture; the same two selector contexts as the palette
   pick one, and lazy-loading keeps the hidden capture from being fetched. */
.shot.has-img { border:1px solid var(--hairline); padding:0; overflow:hidden; }
.shot.has-img img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.shot.has-img img.dark { display:none; }
:root[data-theme="dark"] .shot.has-img img.light { display:none; }
:root[data-theme="dark"] .shot.has-img img.dark { display:block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shot.has-img img.light { display:none; }
  :root:not([data-theme="light"]) .shot.has-img img.dark { display:block; }
}
.shots figcaption { font:400 14px/1.5 var(--ui); color:var(--ink-3); }
.statement p { font:400 clamp(16.5px,4.4vw,19px)/1.75 var(--ui); color:var(--prose); margin:0 0 16px; max-width:60ch; }
.statement p:last-child { margin-bottom:0; }
.closing { background:var(--card); border:1px solid var(--hairline); border-radius:16px; padding:clamp(22px,5vw,34px); display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.closing img { width:52px; height:52px; object-fit:contain; }
.closing div { flex:1 1 230px; }
.closing h2 { font:500 clamp(20px,5.2vw,24px)/1.25 var(--serif); color:var(--ink-1); margin:0 0 8px; }
.closing p { font:400 16px/1.6 var(--ui); color:var(--prose); margin:0; }

/* documents */
.doc { padding-top:clamp(30px,6.5vw,56px); }
.doc h1 { font:500 clamp(30px,7.5vw,44px)/1.12 var(--serif); color:var(--ink-1); margin:0 0 18px; letter-spacing:-.005em; }
.doc .meta { font:400 16px/1.6 var(--ui); color:var(--ink-2); margin:0 0 8px; }
.doc .meta:last-of-type { margin-bottom:clamp(26px,5.5vw,40px); }
.doc h2 { font:500 clamp(21px,5.4vw,26px)/1.25 var(--serif); color:var(--ink-1); margin:0 0 16px; display:flex; align-items:baseline; gap:14px; }
.doc h2 .num { font:600 13px/1 var(--ui); color:var(--honey); letter-spacing:.06em; }
.doc section { margin:0 0 clamp(32px,6.5vw,46px); scroll-margin-top:24px; }
.doc p, .doc li { font:400 17px/1.75 var(--ui); color:var(--prose); }
.doc p { margin:0 0 20px; max-width:66ch; }
.doc ul { max-width:66ch; padding-left:22px; margin:0 0 20px; }
.doc ul li { margin-bottom:8px; }
.summary { border-left:2px solid var(--wax); padding:4px 0 4px 24px; margin:0 0 clamp(32px,6.5vw,46px); max-width:66ch; }
.summary p { font:400 clamp(16.5px,4.4vw,18px)/1.75 var(--ui); margin:0 0 14px; }
.summary p:last-child { margin-bottom:0; }
.toc { background:var(--card); border:1px solid var(--hairline); border-radius:16px; padding:clamp(18px,4vw,22px) clamp(18px,4.4vw,26px); margin:0 0 clamp(34px,7vw,52px); max-width:66ch; }
.toc ol { margin:0; padding-left:20px; columns:210px 2; column-gap:32px; }
.toc li { font:400 15px/2 var(--ui); }
.panel { background:var(--card); border:1px solid var(--hairline); border-radius:16px; overflow:hidden; max-width:66ch; margin:0 0 20px; }
.panel > div { padding:15px 18px; border-bottom:1px solid var(--hairline); }
.panel > div:last-child { border-bottom:0; }
.panel dt, .panel .k { font:600 11px/1.3 var(--ui); letter-spacing:.11em; text-transform:uppercase; color:var(--honey); margin:0 0 8px; }
.panel dd, .panel p { font:400 16px/1.65 var(--ui); color:var(--prose); margin:0; }
.panel .name { font:500 17px/1.4 var(--serif); color:var(--ink-1); }
.grid-2 { display:grid; grid-template-columns:1fr 1.5fr; gap:12px; }
.grid-3 { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:8px; }
.panel .head { background:none; }
.panel .head span { font:600 11px/1.3 var(--ui); letter-spacing:.11em; text-transform:uppercase; color:var(--honey); }
.panel .foot { background:color-mix(in srgb, var(--honey) 7%, transparent); }
.panel .foot p { font:400 13px/1.55 var(--ui); color:var(--ink-2); }
.counsel { border:1px dashed var(--honey); border-radius:14px; background:color-mix(in srgb, var(--honey) 8%, transparent); padding:clamp(15px,3.6vw,18px) clamp(16px,4vw,20px); margin:0 0 20px; max-width:66ch; }
.counsel > p:first-child { font:600 11px/1.3 var(--ui); letter-spacing:.13em; text-transform:uppercase; color:var(--honey); margin:0 0 10px; }
.counsel > p:last-child { font:400 15px/1.65 var(--ui); color:var(--ink-2); margin:0; }
/* Legally conspicuous text (UCC 1-201(b)(10)): set off from surrounding prose by
   weight, size, and a border so the all-caps paragraphs read as deliberate. */
.conspicuous { font:600 15px/1.7 var(--ui); color:var(--ink-1); border:1px solid var(--hairline); border-radius:14px; background:var(--card); padding:clamp(15px,3.6vw,18px) clamp(16px,4vw,20px); margin:0 0 20px; max-width:66ch; }
.faq { max-width:66ch; margin:0 0 clamp(32px,6.5vw,46px); border-top:1px solid var(--hairline); }
.faq > div { padding:clamp(18px,4.4vw,24px) 0; border-bottom:1px solid var(--hairline); }
.faq h2 { font:500 clamp(19px,4.9vw,22px)/1.35 var(--serif); color:var(--ink-1); margin:0 0 12px; display:block; }
.faq p { margin:0 0 12px; }
.faq p:last-child { margin-bottom:0; }
.contact { background:var(--card); border:1px solid var(--hairline); border-radius:16px; padding:clamp(20px,4.6vw,28px); margin:0 0 20px; max-width:66ch; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.contact img { width:48px; height:48px; object-fit:contain; }
.contact div { flex:1 1 230px; }
.contact .addr { font:500 clamp(20px,5.6vw,26px)/1.3 var(--serif); margin:0 0 8px; }
.contact .addr a { text-decoration:none; }
.contact .note { display:block; }

.summary-honey { border-left-color:var(--honey); }
.eyebrow-gap { margin-top:clamp(32px,7vw,52px); }
code { font:400 15px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--ink-1); }