:root { color-scheme: light; --ink: #27221f; --muted: #68605a; --accent: #a34d30; --line: #dedbd8; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: white; font: 1rem/1.6 'Inter', system-ui, sans-serif; }
.shell { width: min(100% - 3rem, 36rem); margin: auto; padding-bottom: 4rem; }
header { padding: 2rem 0 2.5rem; }
.wordmark { font: 400 1.75rem 'Fraunces', Georgia, serif; letter-spacing: -.04em; }
.store-page { width: min(100% - 3rem, 36rem); margin: auto; padding-bottom: 4rem; }
.store-page a { color: var(--ink); text-underline-offset: .2em; }
.store-page .wordmark { text-decoration: none; }
.store-page h2 { margin-top: 2rem; }
.store-page nav { margin-top: 3rem; font-size: .875rem; }
.store-page .hint { font-size: .875rem; margin-top: 1rem; }
h1 { font: 400 clamp(1.9rem, 6vw, 2.4rem)/1.2 'Fraunces', Georgia, serif; letter-spacing: -.025em; margin: 0 0 .75rem; }
h2 { font-size: 1.125rem; font-weight: 500; line-height: 1.4; margin: 0; }
p { margin: .4rem 0 1rem; color: var(--muted); }
.intro { margin-bottom: 2.5rem; }
.steps { padding: 0; margin: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 1.5rem 1fr; gap: .5rem; margin-bottom: 2rem; }
.number { color: var(--muted); }
.steps p { margin: .3rem 0 .8rem; }
.action { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: .55rem 1rem; border: 1px solid var(--accent); border-radius: 2px; background: var(--accent); color: white; font: inherit; text-decoration: none; cursor: pointer; }
.action:hover:not(:disabled) { background: #833d26; }
.action:disabled { background: white; border-color: var(--line); color: var(--muted); cursor: not-allowed; }
.action.secondary { background: white; color: var(--muted); border-color: var(--line); font-size: .875rem; }
.action.secondary:hover { background: #f7f7f7; color: var(--ink); }
.back-link { display: inline-block; color: var(--muted); font-size: .875rem; text-underline-offset: .2em; margin-bottom: 1.5rem; padding: .5rem 0; }
:is(a, button, summary, input, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.account-note, .small { font-size: .875rem; color: var(--muted); }
.account-note { margin: .25rem 0 3rem; }
.help { margin-bottom: 3rem; }
details { border-bottom: 1px solid var(--line); padding: .6rem 0; }
summary { cursor: pointer; padding: .25rem 0; }
details p { margin-top: .8rem; }
form { margin-top: 1.25rem; }
label { display: block; font-size: .875rem; margin-bottom: .4rem; }
textarea, input { display: block; width: 100%; border: 1px solid var(--line); border-radius: 2px; padding: .65rem; background: white; color: var(--ink); font: inherit; margin-bottom: 1.1rem; }
textarea { resize: vertical; min-height: 7rem; }
#feedback-status { margin: .75rem 0 0; }
#feedback-status[data-error="true"] { color: #a1271d; }
.sr-only, .honeypot, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip:focus { display: block; padding: 1rem; color: var(--accent); }
@media (max-width: 430px) { .shell { width: calc(100% - 2.5rem); } header { padding-top: 1.5rem; } }
@font-face { font-family: Inter; src: url('./assets/inter.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: Fraunces; src: url('./assets/fraunces.ttf') format('truetype'); font-display: swap; }