:root {
  color-scheme: light;
  --ink: #17251f;
  --forest: #123d2d;
  --coffee: #9f5e39;
  --cream: #f7f0e5;
  --paper: #fffdf8;
  --gold: #e3bd78;
  --line: #ddcfbd;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); line-height: 1.6; }
a { color: #874825; text-underline-offset: 0.2em; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid #236fcb;
  outline-offset: 3px;
}
.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 20; background: white; padding: .75rem; }
header { background: var(--forest); color: white; }
nav { max-width: 72rem; margin: auto; padding: 1rem 1.25rem; display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.brand { margin-right: auto; color: white; text-decoration: none; font-family: Georgia, serif; font-size: 1.35rem; font-weight: 700; }
nav a:not(.brand) { color: #f9ead0; }
main { max-width: 72rem; margin: auto; padding: 3rem 1.25rem 5rem; }
.hero { display: grid; grid-template-columns: 1.3fr .7fr; gap: 2rem; align-items: center; min-height: 34rem; }
.eyebrow { color: var(--coffee); font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1, h2 { font-family: Georgia, serif; line-height: 1.12; }
h1 { font-size: clamp(2.6rem, 7vw, 5.2rem); margin: .3rem 0 1.25rem; }
h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); margin-top: 2.5rem; }
.lead { font-size: 1.2rem; max-width: 43rem; }
.cup { width: min(19rem, 70vw); aspect-ratio: 1; border-radius: 50%; margin: auto; display: grid; place-items: center; background: radial-gradient(circle at 48% 46%, #4a2417 0 28%, #fffaf0 29% 43%, var(--gold) 44% 48%, var(--forest) 49%); box-shadow: 0 1.5rem 4rem #2a21182d; }
.cup span { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.card, .legal, form { background: var(--paper); border: 1px solid var(--line); border-radius: 1rem; padding: 1.4rem; }
.legal { max-width: 52rem; }
.notice { border-left: .35rem solid var(--coffee); background: #fff3e8; padding: 1rem 1.25rem; margin: 1.25rem 0; }
label { display: block; font-weight: 700; margin-top: 1rem; }
input, textarea { width: 100%; margin-top: .35rem; padding: .8rem; border: 1px solid #9a8d80; border-radius: .5rem; font: inherit; }
button, .button { display: inline-block; border: 0; border-radius: 999px; padding: .8rem 1.2rem; background: var(--coffee); color: white; font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; margin-top: 1rem; }
footer { background: #0d2d22; color: #e9ddca; padding: 2rem 1.25rem; }
footer div { max-width: 72rem; margin: auto; }
footer a { color: white; margin-right: 1rem; }
@media (max-width: 720px) { .hero { grid-template-columns: 1fr; min-height: auto; } .cards { grid-template-columns: 1fr; } nav { align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }