/*
 * theme.css — Studio Mitti. Flat terracotta + lime-wash, earthy, sharp corners.
 */

:root {
  --canvas: #f4ede1;
  --surface: #faf7f2;
  --surface-2: #ece2d0;
  --border: #ddccb0;
  --border-strong: #c2ab84;
  --ink: #241a12;
  --muted: #645d56;
  --accent: #b5502f;
  --accent-hover: #9a4428;
  --accent-ink: #faf3e8;
  --accent-text: #9a4428;
  --accent-strong: #9a4428;
  --accent-soft: #ecd9c6;
  --accent-border: #d8a07f;
  --success: #4b6a1f;
  --success-ink: #f4ede1;
  --success-soft: #dfe6cd;
  --success-strong: #3d5619;
  --warning: #a6641b;
  --warning-ink: #f4ede1;
  --warning-soft: #f0ddbd;
  --warning-strong: #8a5215;
  --danger: #9c3a2c;
  --danger-ink: #f4ede1;
  --danger-soft: #f0d6cd;
  --danger-strong: #82301f;
  --chart-1: #b5502f;
  --chart-2: #7a8f3f;
  --chart-3: #c98a2c;
  --chart-4: #5c4632;
  --chart-5: #8f6a4a;
  --chart-6: #9a4428;

  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Work Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Work Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 900;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.14em;

  --radius-btn: 0px;
  --radius-card: 0px;
  --radius-input: 0px;
  --border-w: 2px;
  --border-strong-w: 2px;
  --shadow-card: none;
  --shadow-raised: none;
  --shadow-btn: none;
  --card-pad: 1.75rem;
  --caps: uppercase;
  --caps-tracking: 0.04em;
  --btn-weight: 700;
  --measure: 62ch;

  /* This app's own tokens — bands and ink-band surfaces. */
  --x-lime: #e2e3a9;
  --x-lime-ink: #2c3010;
  --x-lime-strong: #4b5420;
  --x-ink-band: #241a12;
  --x-ink-band-ink: #f4ede1;
  --x-ink-band-muted: #b8ad9f;
}

html[data-theme="dark"] {
  --canvas: #1c150f;
  --surface: #251c15;
  --surface-2: #2e231a;
  --border: #403325;
  --border-strong: #5c4a36;
  --ink: #f3e9db;
  --muted: #b8a993;
  --accent: #d97a4f;
  --accent-hover: #e5926c;
  --accent-ink: #241a12;
  --accent-text: #e39169;
  --accent-strong: #f0a97e;
  --accent-soft: #402c1f;
  --accent-border: #6b4530;
  --success: #9db566;
  --success-ink: #1c150f;
  --success-soft: #2c3010;
  --success-strong: #c3d494;
  --warning: #d6a34e;
  --warning-ink: #1c150f;
  --warning-soft: #3a2b12;
  --warning-strong: #e8c07f;
  --danger: #d9836d;
  --danger-ink: #1c150f;
  --danger-soft: #3a221b;
  --danger-strong: #eba491;
  --chart-1: #d97a4f;
  --chart-2: #a3b465;
  --chart-3: #e0ab4f;
  --chart-4: #c79a78;
  --chart-5: #b3835d;
  --chart-6: #e39169;

  --x-lime: #565c26;
  --x-lime-ink: #eef0d4;
  --x-lime-strong: #d7dba0;
  --x-ink-band: #120d09;
  --x-ink-band-ink: #f3e9db;
  --x-ink-band-muted: #a1917c;
}

/*
 * app.css — Studio Mitti. Flat colour bands, sharp corners, mono countdown.
 * Tokens only. Loads last, after design.css and theme.css.
 */

/* ---- Shell + bands ------------------------------------------------------ */
.shell {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
@media (min-width: 48rem) {
  .shell { padding-inline: 2.5rem; }
}

.band {
  padding-block: 4rem;
}
@media (min-width: 48rem) {
  .band { padding-block: 6rem; }
}

.band-terracotta { background: var(--accent); color: var(--accent-ink); }
.band-ink-strip { background: var(--x-ink-band); color: var(--x-ink-band-ink); padding-block: 0.9rem; }
.band-lime { background: var(--x-lime); color: var(--x-lime-ink); }
.band-cream { background: var(--canvas); color: var(--ink); }
.band-ink { background: var(--x-ink-band); color: var(--x-ink-band-ink); }
.band-closing { background: var(--x-ink-band); color: var(--x-ink-band-ink); padding-block: 5rem; }

/* ---- Top bar -------------------------------------------------------------
   wordmark-only: a mark and a single button, no link row. */
.topbar { background: var(--canvas); border-bottom: 2px solid var(--ink); }
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.1rem;
}
.wordmark { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); }
.wordmark:hover { text-decoration: none; }
.wordmark-mark {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.1rem;
  border: 2px solid var(--ink);
}
.wordmark-text {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}
.topbar-actions { display: flex; align-items: center; gap: 0.75rem; }

/* ---- Eyebrow / section titles -------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: var(--eyebrow-tracking);
  color: var(--accent-ink);
  opacity: 0.9;
}
.eyebrow-invert { color: currentColor; opacity: 0.75; }

.section-title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.98;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  color: var(--ink);
}
.section-title-invert { color: currentColor; }

.section-text {
  margin-top: 1.25rem;
  max-width: 42rem;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--muted);
}
.section-text-invert { color: currentColor; opacity: 0.82; }
.band-lime .section-text { color: var(--x-lime-ink); opacity: 0.75; }

/* ---- Hero ----------------------------------------------------------------- */
.hero-grid {
  display: grid;
  gap: 3rem;
}
@media (min-width: 64rem) {
  .hero-grid { grid-template-columns: 1.2fr 1fr; align-items: end; }
}
.hero-copy { display: flex; flex-direction: column; gap: 1.5rem; }
.hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.94;
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  text-wrap: balance;
  color: var(--accent-ink);
}
.hero-sub {
  max-width: 34rem;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--accent-ink);
  opacity: 0.85;
}
.hero-actions { display: flex; flex-direction: column; gap: 0.9rem; }
@media (min-width: 26rem) {
  .hero-actions { flex-direction: row; flex-wrap: wrap; }
}
.btn-invert { border-color: var(--accent-ink); background: var(--accent-ink); color: var(--accent); }
.btn-invert:hover { border-color: var(--surface); background: var(--surface); color: var(--accent-hover); }
.btn-outline-invert { border-color: var(--accent-ink); background: transparent; color: var(--accent-ink); }
.btn-outline-invert:hover { border-color: var(--accent-ink); background: var(--accent-ink); color: var(--accent); }

/* ---- Countdown -------------------------------------------------------------
   Four mono digit blocks — flat ink-on-terracotta, no shadow, no radius. */
.countdown { display: flex; flex-direction: column; gap: 1rem; }
.countdown-heading {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: var(--eyebrow-tracking);
  color: var(--accent-ink);
  opacity: 0.85;
}
.countdown-row { display: flex; gap: 0.75rem; }
.countdown-cell {
  flex: 1 1 0;
  min-width: 4.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding-block: 1.1rem;
  background: var(--x-ink-band);
  color: var(--x-ink-band-ink);
  border: 2px solid var(--accent-ink);
}
.countdown-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.countdown-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--x-ink-band-muted);
  text-transform: uppercase;
}

/* ---- Address strip ---------------------------------------------------------- */
.strip-line {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-align: center;
}

/* ---- What you'll make ------------------------------------------------------- */
.make-grid { display: grid; gap: 2.5rem; }
@media (min-width: 64rem) {
  .make-grid { grid-template-columns: 0.85fr 1.15fr; align-items: center; }
}
.make-photo { display: flex; flex-direction: column; gap: 0.75rem; }
.photo-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.photo-caption-name { color: var(--x-lime-ink); letter-spacing: 0.02em; }
.photo-caption-fig { font-weight: 700; color: var(--x-lime-strong); text-align: right; }

/* ---- Tickets ------------------------------------------------------------------
   Three unequal-width flat blocks — never an equal-card grid. */
.tickets-row {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media (min-width: 56rem) {
  .tickets-row { flex-direction: row; align-items: stretch; }
}
.ticket {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.75rem;
  border: 2px solid var(--ink);
}
@media (min-width: 56rem) {
  .ticket-wheel { flex: 1 1 0; }
  .ticket-full-day { flex: 1.15 1 0; }
  .ticket-seconds { flex: 1.3 1 0; }
}
.ticket-wheel { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.ticket-full-day { background: var(--x-lime); color: var(--x-lime-ink); border-color: var(--x-lime-ink); }
.ticket-seconds { background: var(--accent); color: var(--accent-ink); border-color: var(--accent-ink); }
.ticket-name {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.4rem;
  letter-spacing: -0.005em;
}
.ticket-price { font-family: var(--font-mono); font-weight: 700; font-size: 2rem; line-height: 1; }
.ticket-currency { font-size: 1.1rem; margin-right: 0.15rem; }
.ticket-blurb { font-size: 0.92rem; line-height: 1.55; opacity: 0.88; }
.ticket-cta {
  margin-top: 0.5rem;
  border-color: currentColor;
  color: currentColor;
  background: transparent;
}
.ticket-wheel .ticket-cta:hover { background: var(--ink); color: var(--surface); }
.ticket-full-day .ticket-cta:hover { background: var(--x-lime-ink); color: var(--x-lime); }
.ticket-seconds .ticket-cta:hover { background: var(--accent-ink); color: var(--accent); }

/* ---- Instructor ------------------------------------------------------------- */
.instructor-grid { display: grid; gap: 2.5rem; }
@media (min-width: 64rem) {
  .instructor-grid { grid-template-columns: 0.85fr 1.15fr; align-items: center; }
}
.instructor-photo { aspect-ratio: 4 / 5; border: 2px solid var(--x-ink-band-ink); }
@media (min-width: 64rem) {
  .instructor-photo { aspect-ratio: 3 / 4; }
}
.instructor-copy { display: flex; flex-direction: column; gap: 0.5rem; }

/* ---- Reviews ------------------------------------------------------------------ */
.reviews-list { margin-top: 2.5rem; display: flex; flex-direction: column; }
.review-item { padding-block: 1.75rem; border-top: 2px solid var(--x-lime-ink); }
.review-item:last-child { border-bottom: 2px solid var(--x-lime-ink); }
.review-quote {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.4;
  max-width: 46rem;
}
.review-meta {
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--x-lime-strong);
}

/* ---- Booking ------------------------------------------------------------------ */
.booking-grid { display: grid; gap: 2.5rem; }
@media (min-width: 56rem) {
  .booking-grid { grid-template-columns: 0.9fr 1.1fr; align-items: start; }
}
.booking-heading { display: flex; flex-direction: column; gap: 0.5rem; }
.booking-panel { width: 100%; }
.booking-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 2rem;
  background: var(--x-ink-band);
  border: 2px solid var(--accent-ink);
}
.label-invert { color: var(--x-ink-band-ink); }
.booking-submit { width: 100%; }
.booking-reassurance { font-size: 0.85rem; color: var(--x-ink-band-muted); text-align: center; }

.booking-confirmed {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 2.25rem;
  background: var(--x-ink-band);
  border: 2px solid var(--accent-ink);
  color: var(--x-ink-band-ink);
}
.booking-confirmed-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--accent-ink);
  color: var(--accent);
}
.booking-confirmed-icon .icon { width: 1.25rem; height: 1.25rem; }
.booking-confirmed-title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.5rem;
}
.booking-confirmed-text { color: var(--x-ink-band-muted); line-height: 1.55; }

/* ---- Closing --------------------------------------------------------------------- */
.closing-inner { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; text-align: center; }
.closing-line {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.96;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
}
.closing-date {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--x-ink-band-muted);
}

/* ---- Motion: count-up only. Everything rests visible; JS drives the count. ---- */
html.reduced-motion .countdown-num,
html.reduced-motion [data-countup] {
  transition: none !important;
}