:root {
  color-scheme: light;
  --paper: #f6f1e7;
  --card: #fffcf6;
  --ink: #222d27;
  --muted: #515e54;
  --green: #183b31;
  --green-dark: #0f2b23;
  --sage: #e7eee3;
  --gold: #f2dbad;
  --line: #ded6c6;
  --berry: #8d343c;
  --serif: Georgia, 'Times New Roman', serif;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
h1, h2, h3, p { margin: 0; }
h1, h2, .hero-title { font-family: var(--serif); font-weight: 500; line-height: 1.08; }
h1, .hero-title { font-size: clamp(2.45rem, 6vw, 4rem); letter-spacing: -.045em; overflow-wrap: anywhere; }
h2 { font-size: 1.65rem; letter-spacing: -.025em; }
h3 { font-size: 1.05rem; line-height: 1.35; overflow-wrap: anywhere; }
a { color: var(--green); text-underline-offset: .2em; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #a34d27; outline-offset: 3px; }

.frame { width: min(100% - 3rem, 62rem); margin-inline: auto; }
.site-header { background: var(--green); color: var(--card); border-bottom: 3px solid #d7b981; }
.header-inner { min-height: 4.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { color: inherit; display: inline-flex; align-items: center; gap: .7rem; font: 600 1.18rem var(--serif); text-decoration: none; }
.account { display: flex; align-items: center; gap: .8rem; min-width: 0; font-size: .9rem; }
.account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sign-out { min-height: 44px; white-space: nowrap; color: var(--gold); background: none; border: 0; padding: .5rem .1rem .5rem .5rem; text-decoration: underline; text-underline-offset: .2em; }
.site-header :focus-visible { outline-color: var(--gold); }
.skip-link { position: absolute; inset: .5rem auto auto .5rem; z-index: 1; background: var(--card); padding: .5rem 1rem; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.content { flex: 1; padding-block: clamp(1.5rem, 5vw, 3.5rem); }
.site-footer { color: var(--muted); border-top: 1px solid var(--line); padding: 1rem 0 1.45rem; font-size: .85rem; }
.site-footer span { color: var(--berry); margin-right: .35rem; }

.hero { background: var(--green); color: var(--card); border: 1px solid var(--green-dark); border-radius: 1.25rem; }
.eyebrow { font-size: .74rem; letter-spacing: .145em; text-transform: uppercase; font-weight: 750; color: var(--berry); margin-bottom: .7rem; }
.hero .eyebrow { color: var(--gold); }
.hero-copy { color: #e4eadd; margin-top: .85rem; max-width: 34ch; }
.hero-art { display: block; max-width: 100%; height: auto; }
.directory-hero { display: flex; justify-content: space-between; gap: 1.5rem; align-items: center; padding: clamp(1.4rem, 4vw, 2.5rem) clamp(1.4rem, 5vw, 3rem); }
.directory-hero > div { min-width: 0; }
.directory-hero .hero-copy { max-width: 42ch; }
.directory-hero .hero-art { width: min(32%, 13.25rem); }

.panel { min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 1rem; padding: clamp(1.15rem, 3vw, 1.8rem); }
.panel h2 { margin-bottom: .65rem; }
.muted { color: var(--muted); }
.auth-layout { display: grid; grid-template-columns: 1.08fr 1fr; gap: 1rem; }
.auth-hero { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(1.4rem, 4vw, 2.6rem); }
.auth-hero .hero-art { align-self: center; margin-top: 1.1rem; }
.auth-panel { padding: clamp(1.4rem, 4vw, 2.6rem); align-content: center; }
.auth-panel h1, .narrow h1 { font-size: clamp(2.15rem, 5vw, 3rem); }
.auth-panel .muted, .narrow .muted { margin-top: .65rem; }
.auth-panel .field-stack { margin-top: 1.6rem; }
.auth-panel .button { justify-self: stretch; }
.auth-switch { color: var(--muted); border-top: 1px solid var(--line); margin-top: 1.4rem; padding-top: 1rem; font-size: .94rem; }
.auth-switch a, .gift-link { font-weight: 650; }

.field-stack { display: grid; gap: .4rem; }
.field-stack label { font-size: .94rem; font-weight: 650; }
.field-stack label:not(:first-of-type) { margin-top: .5rem; }
.field-stack input, .field-stack textarea { width: 100%; min-width: 0; min-height: 46px; color: var(--ink); background: #fffdfa; border: 1px solid #a69d8f; border-radius: .5rem; padding: .6rem .7rem; }
.field-stack textarea { resize: vertical; }
.field-stack .button { margin-top: .75rem; justify-self: start; }
.optional { margin-left: .25rem; font-size: .78rem; color: var(--muted); font-weight: 400; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; border: 1px solid transparent; border-radius: .55rem; padding: .55rem 1rem; font-weight: 650; line-height: 1.3; text-align: center; text-decoration: none; }
.primary { background: var(--green); color: var(--card); }
.primary:hover { background: var(--green-dark); }
.secondary, .quiet { color: var(--green); border-color: var(--line); background: var(--card); }
.secondary:hover, .quiet:hover { background: var(--sage); }
.quiet { font-size: .85rem; padding-inline: .7rem; }
.danger { color: var(--berry); }
.danger:hover { background: #fbefe9; }
.destructive { color: white; background: var(--berry); }
.destructive:hover { background: #72262d; }

.seasons { display: flex; flex-wrap: wrap; gap: .55rem; margin-block: 1.3rem; }
.season-tab { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .45rem .8rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--card); font-weight: 750; text-decoration: none; }
.season-tab span { font-size: .78rem; font-weight: 500; }
.season-tab[aria-current] { background: var(--sage); border-color: #a3b5a0; }
.season-tab:hover { border-color: var(--green); }
.directory-layout, .owner-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 1rem; align-items: start; }
.owner-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
.single-column { grid-template-columns: 1fr; }
.own-card .button { margin-top: 1.05rem; }
.card-mark { display: inline-grid; place-items: center; width: 2rem; height: 2rem; background: #f6e6cc; color: var(--berry); border-radius: .55rem; margin-bottom: .7rem; }
.directory-list, .gift-list { list-style: none; padding: 0; margin: 0; }
.directory-list li, .gift-row { border-top: 1px solid var(--line); }
.person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .65rem .35rem; text-decoration: none; font-weight: 650; overflow-wrap: anywhere; }
.person:hover { background: var(--sage); }
.avatar { display: grid; place-items: center; min-width: 2.1rem; height: 2.1rem; padding-inline: .2rem; border-radius: 50%; background: var(--sage); font-family: var(--serif); }
.person-arrow { color: var(--berry); font-size: 1.2rem; }
.empty { padding: .9rem 0 .25rem; border-top: 1px solid var(--line); }

.back-link { display: inline-flex; min-height: 44px; align-items: center; gap: .4rem; font-weight: 650; }
.page-heading { margin: .8rem 0 1.5rem; }
.page-heading .muted { margin-top: .6rem; }
.gift-row { display: flex; align-items: flex-start; gap: .75rem; padding-block: 1rem; }
.gift-row:last-child { padding-bottom: 0; }
.gift-detail { flex: 1; min-width: 0; }
.gift-note { color: var(--muted); margin-top: .25rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.gift-link { display: inline-block; margin-top: .3rem; font-size: .9rem; }
.gift-check { width: 1.35rem; height: 1.35rem; margin: .05rem .05rem 0 0; flex: none; accent-color: var(--green); cursor: pointer; }
.gift-detail label { display: inline-block; min-height: 28px; cursor: pointer; }
.claim-label { display: inline-block; max-width: 100%; overflow-wrap: anywhere; margin-top: .3rem; padding: .13rem .5rem; border-radius: .3rem; color: var(--berry); background: #f9ece8; font-size: .85rem; font-weight: 650; }
.claim-actions { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 1rem; }
.notice { margin-bottom: 1rem; padding: .65rem .85rem; color: var(--green-dark); background: var(--sage); border: 1px solid #a3b5a0; border-radius: .5rem; overflow-wrap: anywhere; }
.warning { background: #faece3; color: #703036; border-color: #d6ada4; }
.notice p { margin-top: .3rem; }
.auth-panel .notice { margin: .9rem 0 0; }
.narrow { max-width: 34rem; margin-inline: auto; }
.narrow .button-row, .narrow > .button { margin-top: 1.25rem; }
.remove-name { margin-block: .8rem; overflow-wrap: anywhere; }
.button-row { display: flex; flex-wrap: wrap; gap: .6rem; }

@media (max-width: 42rem) {
  .frame { width: calc(100% - 2rem); }
  .auth-layout, .directory-layout, .owner-layout { grid-template-columns: 1fr; }
  .auth-hero { position: relative; overflow: hidden; }
  .auth-hero .hero-title { font-size: clamp(1.85rem, 7vw, 2.6rem); }
  .auth-hero .hero-copy { max-width: 25ch; }
  .auth-hero .hero-art { display: none; }
  .directory-hero { gap: .45rem; }
  .directory-hero h1 { font-size: clamp(2rem, 8vw, 3.1rem); }
}

@media (max-width: 25rem) {
  .header-inner { gap: .5rem; }
  .brand { gap: .4rem; font-size: 1rem; white-space: nowrap; }
  .brand img { width: 23px; height: 23px; }
  .account { gap: .4rem; font-size: .8rem; }
  .directory-hero .hero-art { width: 25%; }
  .claim-actions .button, .add-card .button { width: 100%; }
}