/* origenmethod.com · the Origen Method brand system (per the finalized
   brand work): bone ground, ink type, dawn gold accents, clay for the
   tagline and callouts, Jost throughout, spiral mark with gold origin dot.
   Gold and clay hexes approximate the system pending exact brand values;
   ink #1a1a1a is taken from the logo artwork itself. */

:root {
  --bone: #f4efe4;
  --card: #fbf8f1;
  --ink: #1a1a1a;
  --body: #3f3b33;
  --muted: #6e6858;
  --faint: #8f8875;
  --hair: #e4ddcb;
  --hair2: #d8d0ba;
  --gold: #c9993b;
  --gold-deep: #8f6a1d;
  --gold-bg: rgba(201, 153, 59, 0.14);
  --sans: "Jost", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold-deep); }
a:hover { color: var(--ink); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */

.site-header {
  background: var(--bone);
  border-bottom: 1px solid var(--hair);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 9px;
  padding-bottom: 9px;
  flex-wrap: wrap;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.wordmark img { height: 26px; width: auto; display: block; }
.wordmark:hover { color: var(--ink); }

.site-nav { display: flex; gap: 16px; flex-wrap: wrap; }
.site-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.site-nav a:hover { color: var(--gold-deep); }

.btn {
  display: inline-block;
  background: var(--ink);
  color: var(--bone);
  border: none;
  font: 600 11.5px var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--gold); color: var(--ink); }
.site-header .btn { margin-left: auto; }

/* ---------- Hero ---------- */

.hero {
  padding: 34px 0 32px;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.hero-logo {
  display: block;
  width: min(400px, 100%);
  height: auto;
  margin: 0 0 26px;
}

/* ---------- Class alerts signup ---------- */

.signup-card {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 22px 22px 18px;
  margin-top: 6px;
}
.signup-card h3 {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.signup-lede { margin: 0 0 14px; font-size: 13.5px; color: var(--body); }
.field { margin-bottom: 12px; }
.field label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.field .opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--faint); }
.field input {
  width: 100%;
  background: var(--bone);
  color: var(--ink);
  border: 1px solid var(--hair2);
  border-radius: 8px;
  padding: 9px 11px;
  font: 400 14.5px var(--sans);
}
.field input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.hp { position: absolute; left: -9999px; top: -9999px; height: 1px; width: 1px; overflow: hidden; }
.form-alert { border-radius: 8px; padding: 10px 12px; font-size: 13px; margin: 12px 0 0; }
.alert-ok { background: var(--gold-bg); border: 1px solid var(--gold); color: var(--gold-deep); font-weight: 600; }
.alert-err { background: rgba(156, 58, 50, 0.1); border: 1px solid #9c3a32; color: #8a332c; }
.tiny-note { font-size: 10.5px; color: var(--faint); margin: 12px 0 0; line-height: 1.5; }

.hero-kickers { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.kicker-pill {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 7px 14px;
}
.kicker-pill.dark { color: var(--bone); background: var(--ink); }
.kicker-pill.gold { color: #8a6820; background: var(--gold-bg); }

.hero h1 {
  margin: 0 0 18px;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  max-width: 15ch;
}
.hero h1 em { font-style: normal; color: var(--gold-deep); }

.hero p { color: var(--body); font-size: 16.5px; max-width: 56ch; margin: 0 0 22px; }

/* ---------- Schedule ---------- */

.section { padding: 34px 0; scroll-margin-top: 16px; }

.section-head { margin-bottom: 20px; }
.section-head h2 {
  margin: 0 0 8px;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.section-head p { margin: 0; color: var(--muted); font-size: 14.5px; max-width: 66ch; }

.sample-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold-bg);
  border: 1px solid var(--gold);
  color: #7a5a17;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 8px;
  padding: 8px 14px;
  margin-bottom: 18px;
}

/* Desktop: one shared timetable grid. Row 1 holds day names; every distinct
   class time in the week owns one row, so identical times align across days.
   .day-col is display:contents here (its children join the shared grid) and
   becomes a normal stacked card on narrow screens. */
.week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: auto repeat(var(--trows, 1), auto);
  column-gap: 10px;
}

.day-col { display: contents; }

.day-bg {
  grid-column: var(--col);
  grid-row: 1 / -1;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 14px;
  min-height: 150px;
}
.day-col.has-class .day-bg { border-color: var(--ink); }

.day-name {
  grid-column: var(--col);
  grid-row: 1;
  margin: 14px 12px 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--faint);
}
.day-col.has-class .day-name { color: var(--ink); }

.class-chip {
  grid-column: var(--col);
  grid-row: var(--row);
  margin: 0 12px 10px;
  border-left: 3px solid var(--ink);
  background: rgba(26, 26, 26, 0.045);
  border-radius: 0 8px 8px 0;
  padding: 8px 10px;
}
.class-chip.gold { border-left-color: var(--gold); background: var(--gold-bg); }
.class-chip .time { font-weight: 700; font-size: 13.5px; letter-spacing: 0.04em; }
.class-chip .cname { font-size: 13px; font-weight: 600; line-height: 1.3; margin: 2px 0; }
.class-chip .cmeta { font-size: 11.5px; color: var(--muted); }
.class-chip.soldout { opacity: 0.55; border-left-color: var(--hair2); background: rgba(110, 104, 88, 0.06); }
.chip-status {
  display: inline-block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 2px 8px;
}
.chip-status.ok { color: var(--ink); border: 1px solid var(--ink); }
.chip-status.low { color: var(--ink); background: var(--gold); }
.chip-status.soldout { color: var(--muted); background: rgba(110, 104, 88, 0.16); }

.day-rest {
  grid-column: var(--col);
  grid-row: 2;
  margin: 0 12px 12px;
  align-self: start;
  color: var(--hair2);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Classes and pricing ---------- */

.fmt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.price-list { margin: 0; padding-left: 18px; }
.price-list li { font-size: 14px; color: var(--body); margin-bottom: 7px; }
.price-list li:first-child { font-weight: 700; color: var(--gold-deep); }

/* ---------- About / board ---------- */

.about-band {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
  background: var(--ink);
  color: #f1ede2;
  border-radius: 18px;
  padding: 36px 38px;
}
.about-band h2 {
  margin: 0;
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f1ede2;
  max-width: 16ch;
}
.about-band h2 em { font-style: normal; color: var(--gold); }
.about-band p { margin: 0 0 16px; font-size: 15px; color: #d9d3c4; line-height: 1.6; }
.about-band a.board-link { color: var(--gold); font-weight: 600; }
.about-band a.board-link:hover { color: #ffffff; }

.cred-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.cred-list li {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f1ede2;
  border: 1px solid rgba(201, 153, 59, 0.6);
  border-radius: 999px;
  padding: 5px 11px;
}

/* ---------- Location ---------- */

.loc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.loc-card, .info-card {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 22px 24px;
}
.loc-card h3, .info-card h3 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.loc-card p, .info-card p { margin: 0 0 8px; font-size: 14.5px; color: var(--body); }
.loc-note { font-size: 12.5px; color: var(--faint); }

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--hair); margin-top: 24px; }
.site-footer .wrap {
  display: flex;
  gap: 36px;
  align-items: flex-start;
  padding-top: 24px;
  padding-bottom: 34px;
  flex-wrap: wrap;
}
.site-footer .wordmark { font-size: 12px; flex-shrink: 0; }
.site-footer .wordmark img { height: 22px; }
.site-footer p {
  color: var(--faint);
  font-size: 11.5px;
  max-width: 70ch;
  margin: 0;
  line-height: 1.6;
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .week {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: 10px;
  }
  .day-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--card);
    border: 1px solid var(--hair);
    border-radius: 14px;
    padding: 14px 12px 12px;
    min-height: 150px;
  }
  .day-col.has-class { border-color: var(--ink); }
  .day-bg { display: none; }
  .day-name, .class-chip { margin: 0; }
  .day-rest { margin: auto 0 0; }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 760px) {
  .site-header { position: static; }
  .hero { padding-top: 40px; }
  .week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-band { grid-template-columns: 1fr; padding: 26px 24px; }
  .loc-grid, .fmt-grid { grid-template-columns: 1fr; }
  .site-header .btn { margin-left: 0; }
}

@media (max-width: 460px) {
  .week { grid-template-columns: 1fr; }
  .day-col { min-height: 0; }
}