/* ============================================================
   Emily Jenkins : Shakespeare Studio
   Central stylesheet — shared across all website pages.

   Contains only rules that are byte-identical across the 9 MVP
   pages (design tokens, reset, nav, wrap, typography, buttons,
   footer, shared responsive bits). Page-unique sections (hero
   variants, section layouts specific to a single page) stay in
   that page's own <style> block.
   ============================================================ */

/* --- TOKENS --- */
:root{--terracotta:#7E2E15;--terracotta-deep:#5F2010;--terracotta-soft:#E08B68;--ink:#1F2F30;--ink-deep:#0E1A1B;--ochre:#D4A547;--parchment:#FBF8F1;--parchment-warm:#F2E9D6;--cream:#FFFFFF;--cocoa:#3A241A;--rule:rgba(58,36,26,.16)}

/* --- RESET + BASE --- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--parchment);color:var(--cocoa);font-family:'Instrument Sans',system-ui,sans-serif;font-size:17px;line-height:1.6;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.14;mix-blend-mode:multiply;z-index:1;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .23 0 0 0 0 .14 0 0 0 0 .10 0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
img{display:block;max-width:100%}

/* --- NAV --- */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--terracotta)}
.nav-inner{max-width:1320px;margin:0 auto;padding:14px 48px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav-mark{font-family:'Fraunces',serif;font-weight:500;font-style:normal;font-size:21px;letter-spacing:.005em;color:var(--cream);text-decoration:none;font-variation-settings:"opsz" 144,"SOFT" 30,"wght" 500;white-space:nowrap}
.nav-links{display:flex;gap:24px;list-style:none;align-items:center}
.nav-links a{font-size:14px;font-weight:500;color:rgba(251,248,241,.85);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--cream)}
.nav-cta{font-family:'JetBrains Mono',monospace!important;font-size:10.5px!important;letter-spacing:.15em;text-transform:uppercase;color:var(--terracotta)!important;background:var(--cream);padding:9px 18px;transition:all .3s;white-space:nowrap}
.nav-cta:hover{background:var(--parchment)}
.nav-cta-ghost{font-family:'JetBrains Mono',monospace!important;font-size:10.5px!important;letter-spacing:.15em;text-transform:uppercase;color:rgba(251,248,241,.75)!important;padding:9px 18px;border:1px solid rgba(251,248,241,.3);transition:all .3s;white-space:nowrap}
.nav-cta-ghost:hover{color:var(--cream)!important;border-color:rgba(251,248,241,.5)}

/* --- NAV DROPDOWN (View programmes) --- */
.nav-dropdown{position:relative}
.nav-dropdown-menu{display:none;position:absolute;top:calc(100% + 8px);right:0;background:var(--cream);min-width:220px;padding:8px 0;box-shadow:0 10px 28px rgba(0,0,0,.18);z-index:101}
.nav-dropdown-menu::before{content:'';position:absolute;top:-10px;left:0;right:0;height:10px}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{display:block}
.nav-dropdown-menu a{display:block;padding:12px 20px;font-family:'Instrument Sans',system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important;text-decoration:none;background:transparent!important;border:0!important;transition:background .15s}
.nav-dropdown-menu a:hover{background:var(--parchment)!important}
.nav-dropdown-menu .dd-title{display:block;font-size:14px;font-weight:500;color:var(--ink);line-height:1.3}
.nav-dropdown-menu .dd-sub{display:block;font-size:12px;font-weight:400;color:rgba(58,36,26,.65);line-height:1.35;margin-top:2px}
.nav-dropdown-menu a:hover .dd-title{color:var(--terracotta)}
@media(max-width:900px){.nav-dropdown-menu{display:none!important}.nav-dropdown.open .nav-dropdown-menu{display:block!important;position:absolute;right:0;top:calc(100% + 8px);min-width:240px}}

/* --- NAV HAMBURGER + DRAWER (mobile) --- */
.nav-burger{display:none;background:transparent;border:0;padding:0;cursor:pointer;width:32px;height:32px;flex-direction:column;justify-content:center;gap:6px;align-items:stretch}
.nav-burger span{display:block;height:2px;background:var(--cream);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.nav-open .nav-burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-open .nav-burger span:nth-child(2){opacity:0}
.nav-open .nav-burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.nav-drawer{display:none;position:absolute;top:100%;left:0;right:0;background:var(--terracotta);border-top:1px solid rgba(251,248,241,.18);flex-direction:column;padding:8px 48px 20px}
.nav-drawer a{display:block;font-size:17px;font-weight:500;color:var(--cream);text-decoration:none;padding:16px 0;border-bottom:1px solid rgba(251,248,241,.12);letter-spacing:.01em}
.nav-drawer a:last-child{border-bottom:none}
.nav-open .nav-drawer{display:flex}

@media(max-width:900px){
  .nav-links li.nav-hide{display:none}
  .nav-links{margin-left:auto}
  .nav-burger{display:flex}
}

/* --- WRAP + SECTION BASE --- */
/* Base .wrap is identical across all 9 pages. Some pages tighten padding
   to 28px at ≤1024px — those 1024px overrides stay inline on the pages
   that use them. */
.wrap{position:relative;z-index:2;max-width:1320px;margin:0 auto;padding:0 48px}
section{padding:96px 0}
.section-label{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--terracotta);display:flex;align-items:center;gap:14px;margin-bottom:20px}
.section-label::before{content:'';width:28px;height:1.5px;background:var(--terracotta)}
h2{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(30px,3.8vw,50px);line-height:1.06;letter-spacing:-.015em;color:var(--ink);margin-bottom:28px;max-width:720px;font-variation-settings:"opsz" 144,"SOFT" 30}
h2 em{font-style:italic;color:var(--terracotta)}

/* --- SHARED BUTTONS --- */
.btn-primary{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream);background:var(--terracotta);padding:16px 36px;text-decoration:none;border:1.5px solid var(--terracotta);transition:all .3s}
.btn-primary:hover{background:var(--terracotta-deep);border-color:var(--terracotta-deep)}
.btn-secondary{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--terracotta);background:transparent;padding:16px 36px;text-decoration:none;border:1.5px solid var(--terracotta);margin-left:16px;transition:all .3s}
.btn-secondary:hover{background:var(--terracotta);color:var(--cream)}

/* --- HERO VIEWPORT WRAPPER ---
   Ensures the hero + cred-strip together fill at least one viewport:
   short heroes stretch to 100vh (cred pinned to bottom);
   tall heroes keep their natural height (cred flows naturally below). */
.hero-viewport{min-height:100vh;display:flex;flex-direction:column}
.hero-viewport > .page-hero,
.hero-viewport > .hero{flex:1}

/* --- HERO CREDENTIAL STRIP (sits beneath the terracotta hero) --- */
.hero-cred-strip{display:grid;grid-template-columns:repeat(4,1fr);background:var(--ink-deep);position:relative;z-index:3}
.hero-cred-cell{padding:22px 28px;text-align:center;border-right:1px solid rgba(251,248,241,.12)}
.hero-cred-cell:last-child{border-right:none}
.hero-cred-label{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ochre);margin-bottom:6px}
.hero-cred-value{font-family:'Fraunces',serif;font-size:15px;font-weight:500;color:var(--cream);font-variation-settings:"SOFT" 40}
@media(max-width:900px){
  .hero-cred-strip{grid-template-columns:1fr 1fr}
  .hero-cred-cell{border-right:none;border-bottom:1px solid rgba(251,248,241,.08)}
  .hero-cred-cell:nth-last-child(-n+2){border-bottom:none}
  .hero-cred-mobile-hide{display:none}
}
@media(max-width:600px){
  .hero-cred-strip{grid-template-columns:1fr}
  .hero-cred-cell{border-bottom:1px solid rgba(251,248,241,.08)!important}
  .hero-cred-cell:last-child{border-bottom:none!important}
}

/* --- FOOTER --- */
footer{border-top:1.5px solid var(--cocoa);padding:32px 0 48px;display:flex;justify-content:space-between;align-items:center;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cocoa);opacity:.7}
footer a{color:var(--terracotta);text-decoration:none}

/* --- SHARED RESPONSIVE --- */
@media(max-width:600px){
  .nav-inner{padding:12px 20px}
  .nav-links li.nav-hide{display:none}
  .nav-drawer{padding:8px 20px 20px}
  .wrap{padding:0 20px}
}