/* Wedding Dance Lessons UK — base.css
   Shared foundation for every page: self-hosted fonts, tokens, reset,
   typography, buttons, sheet/section scaffolding, forms. */

@font-face { font-family: 'DM Serif Display'; src: url('../fonts/DMSerifDisplay-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Serif Display'; src: url('../fonts/DMSerifDisplay-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/Figtree-variable.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-variable.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap; }

:root {
  --ground: #e8e5df;
  --sheet: #fffefb;
  --sheet-soft: #f4f2ee;
  --ink: #141210;
  --ink-2: #4e4943;
  --ink-3: #8a847b;
  --line: #e2ded7;
  --line-2: #cdc8bf;
  --accent: #e2553a;
  --dark: #0c0b0a;
  --dark-2: #171614;
  --dark-line: #292725;
  --dark-muted: #8f8a83;
  --dark-title: #a39d95;
  --serif: 'DM Serif Display', 'Iowan Old Style', Georgia, serif;
  --sans: 'Figtree', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --gutter: clamp(0.5rem, 1vw, 0.85rem);
  --pad: clamp(1.15rem, 3.2vw, 2.8rem);
  --cell: clamp(1.8rem, 4vw, 3.4rem);
  --radius: 10px;
  --measure: 62ch;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); font-size: 1rem; line-height: 1.6; color: var(--ink); background: var(--ground); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.5rem, 5.4vw, 4.5rem); line-height: 1.02; letter-spacing: -0.01em; }
h2 { font-family: var(--sans); font-weight: 500; text-transform: uppercase; letter-spacing: -0.015em; line-height: 1.06; font-size: clamp(1.65rem, 3.2vw, 2.55rem); }
h2.h2-sm { font-size: clamp(1.35rem, 2.3vw, 1.85rem); }
h3 { font-family: var(--sans); font-weight: 500; font-size: 1.18rem; line-height: 1.25; letter-spacing: -0.01em; }

.label { font-family: var(--sans); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.num { font-family: var(--mono); font-size: 0.78rem; font-weight: 500; color: var(--accent); display: block; margin-bottom: 1rem; }
.lede { font-size: clamp(1.02rem, 1.5vw, 1.15rem); color: var(--ink-2); }

.wrap { max-width: 80rem; margin: 0 auto; }
main { max-width: 80rem; margin: 0 auto; }

/* ---------- hand-drawn doodles ---------- */
.squig { position: absolute; pointer-events: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; color: var(--ink); height: auto; overflow: visible; }
.ring { position: relative; display: inline-block; }
.squig-ring { left: -5%; top: -16%; width: 110%; height: 136%; color: var(--accent); stroke-width: 2.8; }
@media (max-width: 900px) { .squig-float { display: none; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.25rem; background: var(--ink); color: #fff; text-decoration: none; font-weight: 500; font-size: 0.94rem; padding: 0.7rem 0.7rem 0.7rem 1.35rem; border-radius: 9px; border: 1px solid var(--ink); cursor: pointer; font-family: var(--sans); transition: background 0.15s, color 0.15s; }
.btn::after { content: '\2192'; flex: 0 0 auto; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: rgba(255,255,255,0.12); display: grid; place-items: center; font-size: 0.9rem; color: var(--accent); }
.btn:hover { background: var(--accent); border-color: var(--accent); }
.btn:hover::after { color: #fff; }
.btn-light { background: var(--sheet-soft); color: var(--ink); border-color: var(--sheet-soft); }
.btn-light::after { background: #fff; }
.btn-light:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-light:hover::after { background: rgba(255,255,255,0.12); }

/* ---------- sheets & sections ---------- */
.sheet { background: var(--sheet); margin: 0 var(--gutter) var(--gutter); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.sheet > .sec + .sec, .sheet > * + * { border-top: 1px solid var(--line); }
.sec { padding: clamp(2.6rem, 5vw, 4.6rem) var(--pad); }
.ground-sec { padding: clamp(2.6rem, 5vw, 4.6rem) calc(var(--pad) + var(--gutter)); }

.sec-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.5rem 4rem; align-items: end; margin-bottom: 2.6rem; }
.sec-head p { color: var(--ink-2); font-size: 0.96rem; max-width: 48ch; }
.sec-head h2 { max-width: 20ch; }

.split-2 { display: grid; grid-template-columns: 1fr 1fr; }
.split-2 > .cell + .cell { border-left: 1px solid var(--line); }
.split-2.tight > .cell { padding-top: 0.6rem; padding-bottom: 0.6rem; }
.split-2.tight > .cell:first-child { padding-left: 0; }
.split-2.tight > .cell:last-child { padding-right: 0; }
.sec-head.slim { margin-bottom: 1rem; }
.cell { padding: var(--cell) var(--pad); }

/* ---------- prose ---------- */
.prose p { color: var(--ink-2); max-width: var(--measure); }
.prose h2 { margin-bottom: 1.1rem; }
.prose p + p { margin-top: 1rem; }
.prose strong { color: var(--ink); font-weight: 600; }

/* ---------- forms ---------- */
.form-card { background: var(--sheet-soft); border: 1px solid var(--line-2); border-radius: 12px; padding: clamp(1.4rem, 3vw, 2.2rem); }
.form-title { font-size: 1.1rem; font-weight: 500; margin-bottom: 1.6rem; color: var(--accent); }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 1.6rem; }
.form-grid .ff-wide { grid-column: 1 / -1; }
.field-full { grid-column: 1 / -1; }
label { display: block; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.45rem; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea { appearance: none; -webkit-appearance: none; width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--ink); background: #fff; border: 1px solid var(--line-2); border-radius: 9px; padding: 0.8rem 0.95rem; }
select { background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.2rem; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
textarea { min-height: 6rem; resize: vertical; }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.form-foot small { font-size: 0.78rem; color: var(--ink-3); max-width: 30ch; line-height: 1.4; }
.hp-field { position: absolute; left: -9999px; height: 0; overflow: hidden; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .split-2 { grid-template-columns: minmax(0, 1fr); }
  .split-2 > .cell + .cell { border-left: 0; border-top: 1px solid var(--line); }
  .sec-head { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}