/* ============================================================
   The Maths Tailor — shared styles
   Boutique Oxbridge: navy + antique gold + cream, editorial serif
============================================================ */
:root {
  --navy: #0E1B2C;
  --gold: #C2A14D;
  --gold-soft: #D9BE70;
  --cream: #F6F1E7;
  --paper: #FBF8F1;
  --ink: #15212F;
}
html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }

/* ---- editorial serif accents ---- */
.serif-italic { font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; }
.eyebrow { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; }

/* ---- pinstripe (tailor's pattern) texture ---- */
.pinstripe {
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0px, rgba(255,255,255,0.045) 1px, transparent 1px, transparent 9px);
}
.pinstripe-ink {
  background-image: repeating-linear-gradient(90deg, rgba(14,27,44,0.04) 0px, rgba(14,27,44,0.04) 1px, transparent 1px, transparent 9px);
}

/* ---- fine grain overlay ---- */
.grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- gold hairline divider ---- */
.rule-gold { height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }

/* ---- hero radial atmosphere ---- */
.hero-glow {
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(194,161,77,0.16) 0%, transparent 55%),
    radial-gradient(90% 80% at 12% 100%, rgba(110,36,51,0.18) 0%, transparent 60%),
    var(--navy);
}

/* ---- buttons ---- */
.btn-gold {
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: #1a1305; font-weight: 700; letter-spacing: 0.01em;
  box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 10px 26px -10px rgba(194,161,77,0.6);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset, 0 18px 36px -12px rgba(194,161,77,0.75); }
.btn-ghost { border: 1px solid rgba(246,241,231,0.28); color: var(--cream); transition: border-color .2s ease, background .2s ease; }
.btn-ghost:hover { border-color: var(--gold); background: rgba(194,161,77,0.08); }

/* ---- link underline sweep ---- */
.nav-link { position: relative; }
.nav-link::after {
  content:""; position:absolute; left:0; bottom:-4px; height:1px; width:100%;
  background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .3s ease;
}
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---- engraved stat plaque ---- */
.plaque { border: 1px solid rgba(194,161,77,0.35); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); }

/* ---- reveal on scroll ---- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-d="1"]{ transition-delay:.08s } .reveal[data-d="2"]{ transition-delay:.16s }
.reveal[data-d="3"]{ transition-delay:.24s } .reveal[data-d="4"]{ transition-delay:.32s }

/* ---- card hover ---- */
.lift { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.lift:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -28px rgba(14,27,44,0.45); }

/* ---- FAQ ---- */
.faq-a { max-height: 0; overflow: hidden; transition: max-height .45s ease, opacity .35s ease; opacity: 0; }
.faq-item.open .faq-a { max-height: 420px; opacity: 1; }
.faq-item.open .faq-plus { transform: rotate(45deg); }

/* ---- monogram mark ---- */
.monogram { font-family:'Fraunces',serif; font-weight:600; letter-spacing:-0.02em; }

/* ---- sticky mobile cta ---- */
#m-cta { transform: translateY(120%); transition: transform .35s ease; }
#m-cta.show { transform: translateY(0); }
@media (min-width:1024px){ #m-cta{ display:none !important; } }

/* placeholder ribbon */
.ph { outline: 1px dashed rgba(194,161,77,0.5); }

/* ---- previewable cards (clickable affordance) ---- */
.previewable { cursor: pointer; text-align: left; width: 100%; display: block; }
.preview-tag {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--gold);
  transition: gap .2s ease;
}
.previewable:hover .preview-tag { gap: 11px; }
.preview-tag svg { height: 15px; width: 15px; }

/* ---- lightbox ---- */
#lightbox {
  position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(9,19,33,0.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
#lightbox.open { display: flex; }
#lightbox .lb-card {
  position: relative; width: 100%; max-width: 760px; background: var(--paper);
  border-radius: 18px; overflow: hidden; box-shadow: 0 40px 90px -20px rgba(0,0,0,.65);
  animation: lbpop .35s cubic-bezier(.2,.7,.2,1);
}
@keyframes lbpop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
#lightbox .lb-media { background: #0b1420; line-height: 0; }
#lightbox .lb-media img, #lightbox .lb-media video { display: block; width: 100%; height: auto; }
#lightbox .lb-ph { aspect-ratio: 16/10; display: grid; place-items: center; text-align: center; color: rgba(246,241,231,.6); padding: 2rem; font-size: 14px; line-height: 0; }
#lightbox .lb-ph span { line-height: 1.5; }
#lightbox .lb-cap { padding: 16px 22px; font-size: 14.5px; }
#lightbox .lb-close {
  position: absolute; top: 12px; right: 14px; height: 38px; width: 38px; display: grid; place-items: center;
  border-radius: 999px; background: rgba(0,0,0,.5); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; z-index: 2;
}
#lightbox .lb-close:hover { background: rgba(0,0,0,.75); }