/* ======================================================
   My Daily Pilates — style.css
   Theme: noir #1D1B19 / ivory / gold #BE9A57
   ====================================================== */

:root{
  --noir:      #1D1B19;
  --noir-2:    #242220;
  --noir-3:    #2B2825;
  --ivory:     #F5F2EC;
  --ivory-dim: rgba(245,242,236,.68);
  --ivory-faint:rgba(245,242,236,.40);
  --gold:      #BE9A57;
  --gold-bright:#D4B36F;
  --line:      rgba(245,242,236,.12);
  --line-gold: rgba(190,154,87,.4);
  --max:       1180px;
}

/* ---------- reset ---------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html  { scroll-behavior:smooth; }
body  {
  background:var(--noir);
  color:var(--ivory);
  font-family:'Jost', sans-serif;
  font-weight:300;
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
::selection { background:var(--gold); color:var(--noir); }
img { display:block; max-width:100%; }

/* ---------- type ---------- */
h1,h2,h3 { font-weight:300; line-height:1.2; }

.eyebrow {
  font-size:11px;
  letter-spacing:.42em;
  text-transform:uppercase;
  font-weight:400;
  color:var(--gold);
}

/* ---------- layout ---------- */
.wrap { max-width:var(--max); margin:0 auto; padding:0 40px; }

/* ---------- buttons ---------- */
.btn {
  display:inline-block;
  font-family:'Jost', sans-serif;
  font-size:11.5px;
  letter-spacing:.26em;
  text-transform:uppercase;
  font-weight:400;
  padding:15px 34px;
  border:1px solid var(--gold);
  color:var(--gold-bright);
  text-decoration:none;
  transition:all .3s ease;
  background:transparent;
  cursor:pointer;
}
.btn:hover          { background:var(--gold); color:var(--noir); }
.btn.solid          { background:var(--gold); color:var(--noir); }
.btn.solid:hover    { background:var(--gold-bright); border-color:var(--gold-bright); }
.btn.ghost          { border-color:var(--line); color:var(--ivory-dim); }
.btn.ghost:hover    { border-color:var(--ivory); color:var(--ivory); background:transparent; }
a:focus-visible, .btn:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }

/* ======================================================
   HEADER
   ====================================================== */
header {
  position:sticky; top:0; z-index:50;
  background:rgba(29,27,25,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav {
  display:flex; align-items:center; justify-content:space-between;
  height:80px;
}
.logo-link { display:flex; align-items:center; text-decoration:none; }
.logo-link img { height:52px; width:auto; }

nav.links { display:flex; gap:36px; align-items:center; }
nav.links a {
  font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ivory-dim); text-decoration:none; font-weight:400;
  transition:color .25s ease;
}
nav.links a:hover { color:var(--gold-bright); }

/* ======================================================
   HERO
   ====================================================== */
.hero {
  padding:100px 0 110px;
  text-align:center;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(190,154,87,.08), transparent 70%),
    var(--noir);
}
.hero .hero-logo {
  margin:0 auto 50px;
  height:160px;
  width:auto;
}
.hero h1 {
  font-size:clamp(34px,5.4vw,64px);
  letter-spacing:.28em;
  text-transform:uppercase;
  text-indent:.28em;
  max-width:18ch;
  margin:0 auto 14px;
  color:var(--ivory);
}
.hero .subline {
  font-size:clamp(14px,1.6vw,18px);
  letter-spacing:.58em; text-indent:.58em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:44px;
}
.hero p.lede {
  max-width:560px; margin:0 auto 50px;
  font-size:17.5px; font-weight:200; color:var(--ivory-dim);
  letter-spacing:.02em;
}
.hero .cta-row { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }

/* centenary */
.centenary {
  display:flex; align-items:center; justify-content:center; gap:26px;
  margin:96px auto 0; max-width:640px;
}
.centenary .year { font-size:14px; letter-spacing:.32em; color:var(--ivory-dim); font-weight:300; }
.centenary .rule { flex:1; height:1px; background:var(--line); position:relative; }
.centenary .rule::after {
  content:""; position:absolute; left:50%; top:50%;
  width:8px; height:8px;
  background:var(--gold);
  transform:translate(-50%,-50%) rotate(45deg);
}
.centenary-caption {
  text-align:center; margin-top:20px;
  font-size:13px; letter-spacing:.08em; color:var(--ivory-faint);
  font-weight:200; font-style:italic;
}

/* ======================================================
   STUDIO PHOTOS
   ====================================================== */
.studio-photos {
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  grid-template-rows:420px;
  gap:3px;
  background:var(--noir-2);
}
.studio-photos .photo {
  overflow:hidden;
  background:var(--noir-3);
  position:relative;
}
.studio-photos .photo img {
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .7s ease;
}
.studio-photos .photo:hover img { transform:scale(1.04); }

/* placeholder shown when image missing */
.studio-photos .photo .ph {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:14px;
  color:var(--ivory-faint);
  font-size:11px; letter-spacing:.32em; text-transform:uppercase;
  border:1px dashed var(--line);
}
.studio-photos .photo .ph svg { opacity:.4; }

/* ======================================================
   SECTION BASE
   ====================================================== */
.section { padding:110px 0; }
.section-head { max-width:640px; margin-bottom:70px; }
.section-head .eyebrow { margin-bottom:22px; display:block; }
.section-head h2 {
  font-size:clamp(26px,3.4vw,40px);
  letter-spacing:.2em; text-transform:uppercase;
  margin-bottom:20px;
}
.section-head p { color:var(--ivory-dim); font-weight:200; }

/* ======================================================
   CLASSES
   ====================================================== */
.classes {
  background:var(--noir-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.class-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  border-left:1px solid var(--line);
}
.class-card {
  border-right:1px solid var(--line);
  padding:56px 40px 60px;
  display:flex; flex-direction:column;
  transition:background .35s ease;
  position:relative;
}
.class-card::before {
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--line-gold),transparent);
  opacity:0; transition:opacity .35s ease;
}
.class-card:hover { background:var(--noir-3); }
.class-card:hover::before { opacity:1; }
.class-card .capacity {
  font-size:68px; line-height:1; font-weight:200;
  color:var(--gold-bright); margin-bottom:8px;
}
.class-card .capacity-label {
  font-size:10.5px; letter-spacing:.38em; text-transform:uppercase;
  color:var(--ivory-faint); font-weight:400; margin-bottom:38px;
}
.class-card h3 {
  font-size:20px; letter-spacing:.24em; text-transform:uppercase;
  margin-bottom:18px; font-weight:400;
}
.class-card p { font-size:15.5px; font-weight:200; color:var(--ivory-dim); margin-bottom:36px; flex:1; }
.class-card a {
  font-size:11px; letter-spacing:.28em; text-transform:uppercase; font-weight:400;
  color:var(--gold-bright); text-decoration:none;
  border-bottom:1px solid var(--line-gold);
  padding-bottom:6px; align-self:flex-start;
  transition:color .25s ease, border-color .25s ease;
}
.class-card a:hover { color:var(--ivory); border-color:var(--ivory); }
.class-note {
  margin-top:28px;
  font-size:13px; font-weight:200; color:var(--ivory-faint);
  font-style:italic; letter-spacing:.02em;
}

/* ======================================================
   SCHEDULE
   ====================================================== */
.schedule { padding:110px 0; }

.schedule-table-wrap {
  overflow-x:auto;
  border:1px solid var(--line-gold);
}

table.sched {
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  min-width:680px;
}
table.sched th,
table.sched td {
  padding:12px 16px;
  text-align:center;
  border:1px solid rgba(190,154,87,.2);
  white-space:nowrap;
}
table.sched thead th {
  background:var(--noir-3);
  font-size:11px;
  letter-spacing:.32em;
  text-transform:uppercase;
  font-weight:400;
  color:var(--gold);
}
table.sched thead th:first-child { background:var(--noir-2); }

table.sched tbody tr:nth-child(even) td { background:rgba(255,255,255,.017); }

table.sched td.time {
  text-align:left;
  font-size:12px;
  letter-spacing:.1em;
  color:var(--gold-bright);
  font-weight:400;
  background:var(--noir-2);
  border-right:1px solid var(--line-gold);
}

table.sched td.mat {
  background:rgba(190,154,87,.18);
  color:var(--gold-bright);
  font-size:10.5px;
  letter-spacing:.26em;
  text-transform:uppercase;
  font-weight:500;
}
table.sched td.ref {
  background:rgba(190,154,87,.3);
  color:var(--gold-bright);
  font-size:10.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:500;
}
table.sched td.empty { background:transparent; }

.schedule-note {
  margin-top:22px;
  font-size:13px;
  color:var(--ivory-faint);
  font-weight:200;
  font-style:italic;
  letter-spacing:.04em;
}

/* ======================================================
   METHOD
   ====================================================== */
.method-grid {
  display:grid; grid-template-columns:1.1fr .9fr; gap:90px; align-items:start;
}
.method-grid h2 {
  font-size:clamp(26px,3.4vw,40px);
  letter-spacing:.2em; text-transform:uppercase; margin-bottom:28px;
}
.method-grid p { font-weight:200; color:var(--ivory-dim); margin-bottom:22px; }

.cred { border-top:1px solid var(--line); padding:32px 0; }
.cred:last-child { border-bottom:1px solid var(--line); }
.cred h3 {
  font-size:18px; letter-spacing:.26em; text-transform:uppercase;
  margin-bottom:12px; color:var(--ivory); font-weight:400;
}
.cred p { font-size:15px; margin-bottom:0; color:var(--ivory-dim); font-weight:200; }
.cred .tag {
  font-size:10px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold); font-weight:400; display:block; margin-bottom:14px;
}

/* ======================================================
   TEAM
   ====================================================== */
.team {
  background:var(--noir-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:60px; }
.member { border-top:1px solid var(--line-gold); padding-top:32px; }
.member .role {
  font-size:10.5px; letter-spacing:.36em; text-transform:uppercase;
  color:var(--gold); font-weight:400; margin-bottom:16px; display:block;
}
.member h3 {
  font-size:19px; letter-spacing:.2em; text-transform:uppercase;
  margin-bottom:16px; font-weight:400;
}
.member p { font-size:15px; font-weight:200; color:var(--ivory-dim); }

/* ======================================================
   OFFER
   ====================================================== */
.offer {
  text-align:center;
  padding:110px 0;
  background:
    radial-gradient(ellipse 60% 80% at 50% 100%, rgba(190,154,87,.07), transparent 70%),
    var(--noir);
}
.offer .offer-logo {
  margin:0 auto 44px;
  height:88px;
  width:auto;
  opacity:.9;
}
.offer h2 {
  font-size:clamp(24px,3vw,36px);
  letter-spacing:.22em; text-transform:uppercase;
  max-width:24ch; margin:0 auto 22px;
}
.offer p { max-width:480px; margin:0 auto 44px; font-weight:200; color:var(--ivory-dim); }

/* ======================================================
   CONTACT
   ====================================================== */
.contact { padding:120px 0 100px; border-top:1px solid var(--line); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.contact h2 {
  font-size:clamp(24px,3vw,36px);
  letter-spacing:.22em; text-transform:uppercase; margin-bottom:24px;
}
.contact p { font-weight:200; color:var(--ivory-dim); margin-bottom:40px; max-width:44ch; }

.detail { border-top:1px solid var(--line); padding:26px 0; }
.detail:last-of-type { border-bottom:1px solid var(--line); }
.detail .label {
  font-size:10px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold); font-weight:400; display:block; margin-bottom:8px;
}
.detail .value { font-size:19px; letter-spacing:.06em; font-weight:300; }
.detail a { color:var(--ivory); text-decoration:none; transition:color .25s; }
.detail a:hover { color:var(--gold-bright); }

/* ======================================================
   FOOTER
   ====================================================== */
footer {
  border-top:1px solid var(--line);
  padding:44px 0;
  background:var(--noir-2);
}
.footer-row {
  display:flex; justify-content:space-between;
  align-items:center; gap:20px; flex-wrap:wrap;
}
footer .fine {
  font-size:11.5px; letter-spacing:.14em; color:var(--ivory-faint);
  font-weight:300; text-transform:uppercase;
}
.footer-logo { height:40px; width:auto; opacity:.7; transition:opacity .25s; }
.footer-logo:hover { opacity:1; }

/* ======================================================
   SCROLL REVEAL
   ====================================================== */
.reveal {
  opacity:0; transform:translateY(22px);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
}

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media (max-width:960px) {
  .class-grid { grid-template-columns:1fr; border-left:none; }
  .class-card { border-right:none; border-bottom:1px solid var(--line); padding:46px 0; }
  .method-grid, .contact-grid { grid-template-columns:1fr; gap:56px; }
  .team-grid { grid-template-columns:1fr; gap:44px; }
  .studio-photos { grid-template-columns:1fr 1fr; grid-template-rows:280px 280px; }
  .studio-photos .photo:first-child { grid-column:1 / -1; }
}
@media (max-width:680px) {
  .wrap { padding:0 24px; }
  nav.links a:not(.btn) { display:none; }
  .hero { padding:70px 0 80px; }
  .hero .hero-logo { height:120px; }
  .section { padding:80px 0; }
  .studio-photos { grid-template-columns:1fr; grid-template-rows:260px 260px 260px; }
  .studio-photos .photo:first-child { grid-column:auto; }
}