/* Tokens match design/03-tokens.md (Dusty Rose). */
:root {
  --bg: #FAF3F0; --surface: #FFFBF9; --surface-2: #F7E7E3; --text: #3B2526; --muted: #6C5355;
  --primary: #7E4A4A; --on-primary: #FFF8F6; --panel: #E8C8C2; --stitch: #EFD7D2; --outline: #F2E4E0;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1E1418; --surface: #2D2025; --surface-2: #3B2A30; --text: #F8EDEC; --muted: #D2BDBE;
    --primary: #DDB4B4; --on-primary: #2E1A1F; --panel: #6B3843; --stitch: #74414D; --outline: #382830;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
h1, h2, h3, header.top b { font-family: "EB Garamond", Georgia, "Times New Roman", serif; font-weight: 500; }
a { color: var(--primary); }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
header.top { display: flex; align-items: center; gap: 12px; padding: 18px 0; }
header.top img { width: 40px; height: 40px; border-radius: 12px; }
header.top b { font-size: 24px; }
header.top nav { margin-left: auto; display: flex; gap: 18px; font-weight: 600; }
header.top nav a { color: var(--text); text-decoration: none; }
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: 32px 0; }
.hero h1 { font-size: clamp(38px, 5.5vw, 60px); line-height: 1.05; margin: 0 0 16px; }
.hero p { font-size: 20px; color: var(--muted); margin: 0 0 24px; }
.panel { position: relative; overflow: hidden; aspect-ratio: 3 / 4; width: min(340px, 80vw); margin: auto; border-radius: 42px; background: var(--panel); display: flex; flex-direction: column; align-items: center; padding-top: 26px; }
.panel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: radial-gradient(ellipse 20px 9px at 22px 10px, var(--stitch) 96%, transparent) 0 0 / 50px 26px,
              radial-gradient(ellipse 20px 9px at 22px 10px, var(--stitch) 96%, transparent) 25px 13px / 50px 26px; }
.panel b { font: 500 112px/1.1 "EB Garamond", Georgia, serif; }
.panel span { font-weight: 600; }
.soon { display: inline-block; color: var(--muted); font-size: 16px; background: var(--surface-2); border-radius: 18px; padding: 8px 16px; }
section { padding: 32px 0; }
section h2 { font-size: 32px; margin: 0 0 8px; }
section .lead { color: var(--muted); margin: 0 0 24px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--outline); border-radius: 22px; padding: 20px; }
.card h3 { margin: 0 0 6px; font-size: 22px; }
.card p { margin: 0; color: var(--muted); font-size: 16px; }
article { max-width: 760px; padding-bottom: 48px; }
article h1 { font-size: 40px; margin: 24px 0 4px; }
article h2 { font-size: 25px; margin: 28px 0 6px; }
article .date { color: var(--muted); margin: 0 0 20px; }
footer { border-top: 1px solid var(--outline); padding: 28px 0 40px; color: var(--muted); font-size: 15px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 18px; }
footer a { color: var(--muted); }
.btn { display: inline-flex; align-items: center; background: var(--primary); color: var(--on-primary); border: 0; border-radius: 28px; padding: 14px 28px; font: inherit; font-weight: 600; cursor: pointer; justify-self: start; }
form.contact { display: grid; gap: 8px; }
form.contact label { font-weight: 600; margin-top: 8px; }
form.contact textarea, form.contact input, form.contact select { width: 100%; font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--muted); border-radius: 14px; padding: 12px; }
.hint { color: var(--muted); font-size: 14px; }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; padding-top: 16px; } .panel { order: -1; width: 62vw; } header.top nav { gap: 12px; font-size: 15px; } }