/* De Kelder In website: style guide tokens, day and "de kelder in" mode. */
@font-face { font-family: 'Caveat'; font-weight: 500; font-display: swap; src: url(../fonts/caveat-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Caveat'; font-weight: 700; font-display: swap; src: url(../fonts/caveat-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Fraunces'; font-weight: 400; font-display: swap; src: url(../fonts/fraunces-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Fraunces'; font-weight: 600; font-display: swap; src: url(../fonts/fraunces-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Karla'; font-weight: 400; font-display: swap; src: url(../fonts/karla-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Karla'; font-weight: 500; font-display: swap; src: url(../fonts/karla-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Karla'; font-weight: 700; font-display: swap; src: url(../fonts/karla-latin-700-normal.woff2) format('woff2'); }

:root {
  --bg: #F4ECDC; --band: #EDE2CC; --card: #FBF7EE; --text: #221C18; --sub: #4F443B;
  --line: #221C18; --soft: #C7A47A; --accent: #7A1E3E; --label: #5F6234; --stroke: #7A1E3E;
  --on-bg: #221C18; --on-text: #F4ECDC;
  --primary: #7A1E3E; --primary-text: #F4ECDC; --stain: #B5547A;
  --hand: 'Caveat', 'Segoe Print', cursive;
  --story: 'Fraunces', Georgia, serif;
  --label-font: 'Karla', 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}
:root[data-theme='dark'] {
  --bg: #2E1D12; --band: #3E2819; --card: #3E2819; --text: #F4ECDC; --sub: #E4D6BE;
  --line: #8A6A4A; --soft: #8A6A4A; --accent: #D9A23F; --label: #D9A23F; --stroke: #B5547A;
  --on-bg: #F4ECDC; --on-text: #2E1D12;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--story); font-size: 18px; line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--stain); outline-offset: 3px; }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
@media (max-width: 600px) { .wrap { padding-left: 16px; padding-right: 16px; } }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; z-index: 10; background: var(--card); padding: 8px 12px; }

/* Navigation */
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-top: 20px; padding-bottom: 20px; }
.brand { flex-grow: 1; display: inline-flex; flex-direction: column; text-decoration: none; color: var(--text); }
.brand span { font-family: var(--hand); font-weight: 700; font-size: 34px; line-height: 0.9; }
.brand svg path, .underline path { stroke: var(--stroke); }
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; font-family: var(--label-font); font-size: 16px; font-weight: 500; }
.menu a { text-decoration: none; padding: 12px 0; display: inline-flex; align-items: center; gap: 6px; border-bottom: 2px solid transparent; }
.menu a[aria-current='page'] { border-bottom-color: var(--stroke); }
.menu .soon { font-family: var(--hand); font-size: 19px; color: var(--accent); }
.theme-toggle { height: 44px; padding: 0 16px; border-radius: 22px; border: 1.5px solid var(--line); background: transparent; color: var(--text); display: inline-flex; align-items: center; gap: 8px; font-family: var(--hand); font-weight: 700; font-size: 21px; cursor: pointer; }
@media (max-width: 600px) { .brand { flex-basis: 100%; } .menu { gap: 4px 18px; } }

/* Type */
h1, h2, h3 { font-family: var(--story); font-weight: 600; margin: 0; }
h1 { font-size: clamp(2.5rem, 5vw, 4.3rem); line-height: 1.04; letter-spacing: -0.015em; text-wrap: balance; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.1; }
h3 { font-size: 1.5rem; line-height: 1.2; }
p { margin: 0; }
.kicker { font-family: var(--hand); font-size: 30px; color: var(--accent); line-height: 1.2; }
.lead { font-size: 1.22rem; color: var(--sub); max-width: 36rem; }
.sub { color: var(--sub); }
.label { font-family: var(--label-font); font-weight: 700; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--label); }
.hand { font-family: var(--hand); }
.nowrap { white-space: nowrap; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.section { padding-top: 88px; padding-bottom: 88px; }
.band { background: var(--band); }
@media (max-width: 600px) { .section { padding-top: 56px; padding-bottom: 56px; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 28px; font-family: var(--label-font); font-weight: 700; font-size: 17px; text-decoration: none; cursor: pointer; border: 1.5px solid var(--line); background: transparent; color: var(--text); }
.btn.primary { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }
.btn:disabled { cursor: default; border-style: dashed; border-color: var(--soft); color: var(--sub); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Sketch frame cards */
.card { padding: 30px; background: var(--card); border: 1.5px solid var(--line); border-radius: 6px 16px 8px 14px; }
.card:nth-child(3n+2) { border-radius: 14px 6px 16px 8px; }
.card:nth-child(3n) { border-radius: 8px 14px 6px 16px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; }
.num { font-family: var(--hand); font-size: 46px; font-weight: 700; color: var(--accent); line-height: 1; }

/* Hero */
.hero { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 72px; padding-top: 32px; padding-bottom: 96px; }
.hero-text { flex: 1 1 420px; display: flex; flex-direction: column; gap: 22px; }
.hero-art { flex: 1 1 320px; display: flex; justify-content: center; position: relative; }
.hero-art .ring { position: absolute; width: 112%; max-width: 560px; top: -6%; opacity: 0.5; }
.hero-art .ring circle { stroke: var(--stain); }
.hero-art picture { display: block; width: 100%; max-width: 440px; position: relative; }
.hero-art img { width: 100%; height: auto; max-width: 440px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; position: relative; }

/* Date coaster */
.coaster { flex: none; width: 220px; height: 220px; border-radius: 50%; border: 3px dashed var(--soft); background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-4deg); text-align: center; }
.coaster .day { font-family: var(--label-font); font-weight: 700; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; }
.coaster .date { font-family: var(--hand); font-weight: 700; font-size: 96px; line-height: 0.85; color: var(--accent); }
.coaster .month { font-family: var(--label-font); font-size: 15px; }
.coaster.small { width: 120px; height: 120px; border-width: 2.5px; background: var(--bg); transform: none; }
.coaster.small .day, .coaster.small .month { font-size: 13px; }
.coaster.small .date { font-size: 54px; }
.next { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 56px; }
.next > div:first-child { flex: 1 1 360px; display: flex; flex-direction: column; gap: 14px; }
.full-tag { align-self: flex-start; display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--primary); color: var(--primary-text); font-family: var(--label-font); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }

/* Tasting list */
.tasting { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.tasting-body { flex: 1 1 340px; display: flex; flex-direction: column; gap: 8px; }
.tasting-side { flex: 0 1 240px; display: flex; flex-direction: column; gap: 10px; }
.tasting-side .status { font-family: var(--label-font); font-weight: 700; font-size: 15px; color: var(--label); }
.where { font-family: var(--label-font); font-size: 1rem; color: var(--sub); }
.steps .hand { font-weight: 700; font-size: 34px; color: var(--accent); line-height: 1.1; }

/* Testproever band */
.wine-band { background: var(--primary); color: #F4ECDC; }
.wine-band .big-hand { font-family: var(--hand); font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: 1; }
.wine-band p { color: #F4DCE4; font-size: 1.2rem; }
.wine-band ol { margin: 0; padding-left: 1.2em; font-family: var(--label-font); font-size: 1.05rem; line-height: 1.9; }
.split { display: flex; flex-wrap: wrap; gap: 40px 72px; align-items: center; }
.split > * { flex: 1 1 360px; }

/* Forms */
form.signup { display: flex; flex-direction: column; gap: 12px; font-family: var(--label-font); }
form.signup.paper { padding: 28px; background: #F4ECDC; color: #221C18; border-radius: 6px 16px 8px 14px; --line: #221C18; --card: #FBF7EE; --text: #221C18; --sub: #5A4E44; }
form.signup label { font-weight: 700; font-size: 14px; }
form.signup input[type='text'], form.signup input[type='email'] { height: 48px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 4px 12px 6px 10px; background: var(--card); color: var(--text); font-family: var(--label-font); font-size: 16px; width: 100%; }
form.signup .check { display: flex; align-items: center; gap: 10px; font-weight: 400; font-size: 15px; min-height: 44px; }
form.signup .check input { width: 20px; height: 20px; accent-color: #7A1E3E; }
form.signup .note { font-size: 13px; color: var(--sub); }
form.signup .msg { font-size: 15px; font-weight: 700; min-height: 1.4em; }
form.signup .msg.ok { color: var(--label); }
form.signup .msg.err { color: #A3123A; }
:root[data-theme='dark'] form.signup:not(.paper) .msg.err { color: #F0A3B8; }
form.signup .hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
form.inline { flex-direction: row; flex-wrap: wrap; gap: 10px; }
form.inline label { flex-basis: 100%; }
form.inline input[type='email'] { flex: 1 1 240px; width: auto; height: 52px; }
form.inline .msg, form.inline .note { flex-basis: 100%; }

/* Shop */
.teaser { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; padding: 36px; border: 1.5px dashed var(--soft); border-radius: 12px; text-decoration: none; }
.teaser > div { flex: 1 1 360px; display: flex; flex-direction: column; gap: 8px; }
.stamp { position: relative; width: 260px; height: 260px; transform: rotate(-8deg); flex: none; }
.stamp svg { position: absolute; inset: 0; }
.stamp svg circle, .stamp svg path.ring { stroke: var(--stroke); }
.stamp svg text { fill: var(--stroke); font-family: var(--label-font); font-size: 17px; font-weight: 700; letter-spacing: 4px; }
.stamp .word { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--accent); font-family: var(--hand); font-weight: 700; font-size: 50px; line-height: 0.9; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button { height: 44px; padding: 0 18px; border-radius: 22px; border: 1.5px solid var(--line); background: transparent; color: var(--text); font-family: var(--label-font); font-weight: 700; font-size: 15px; cursor: pointer; }
.filters button[aria-pressed='true'] { background: var(--on-bg); color: var(--on-text); }
.wines { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.wine { display: flex; flex-direction: column; background: var(--card); border: 1.5px solid var(--line); border-radius: 6px 16px 8px 14px; overflow: hidden; }
.wine[hidden] { display: none; }
.wine-pic { height: 220px; display: flex; align-items: flex-end; justify-content: center; background: var(--bg); border-bottom: 1.5px solid var(--line); position: relative; }
.wine-pic svg path, .wine-pic svg rect { stroke: var(--line); }
.wine-pic svg rect { fill: var(--card); }
.wine-tag { position: absolute; left: 14px; top: 14px; font-family: var(--label-font); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 10px; border-radius: 12px; }
.wine-info { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex-grow: 1; }
.wine-info h3 { font-size: 1.3rem; }
.wine-info .meta { font-family: var(--label-font); font-size: 14px; color: var(--sub); }
.wine-info .noot { font-family: var(--hand); font-size: 22px; line-height: 1.15; }
.wine-buy { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--label-font); font-weight: 700; font-size: 18px; }
.wine-buy .btn { min-height: 44px; padding: 0 16px; font-size: 14px; }
.how > div { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 2px solid var(--line); }
.how .hand { font-weight: 700; font-size: 32px; color: var(--accent); line-height: 1.1; }
.rules { display: flex; flex-wrap: wrap; gap: 16px 40px; padding: 24px 28px; border: 1.5px solid var(--line); border-radius: 4px 12px 6px 10px; font-family: var(--label-font); font-size: 15px; color: var(--sub); }
.rules span { flex: 1 1 260px; }
.rules strong { color: var(--text); }

/* Footer */
.footer { border-top: 1.5px solid var(--line); }
.footer .wrap { padding-top: 28px; padding-bottom: 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; font-family: var(--label-font); font-size: 15px; color: var(--sub); }
.footer .name { font-family: var(--hand); font-weight: 700; font-size: 26px; color: var(--text); }
.footer a { color: var(--sub); }
.footer .links { display: flex; flex-wrap: wrap; gap: 16px; }

@media (prefers-reduced-motion: no-preference) {
  .hero-art .ring { animation: drift 18s ease-in-out infinite alternate; }
  @keyframes drift { from { transform: rotate(0deg); } to { transform: rotate(14deg); } }
}