/* ===== Port Betaald — theatrical playbill design system ===== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Work+Sans:wght@400;500;600&family=Archivo+Black&display=swap');

:root{
  --curtain: #000000;
  --curtain-deep: #000000;
  --brass: #d9a3ac;
  --brass-bright: #e8bcc2;
  --red: #c9372e;
  --red-bright: #e2493d;
  --dusty: #d9a3ac;
  --dusty-bright: #e8bcc2;
  --paper: #f5efe6;
  --paper-dim: #c9beb0;
  --ink: #0b0908;
  --line: rgba(217,163,172,0.3);
  --display: 'Fraunces', serif;
  --wordmark: 'Archivo Black', 'Arial Black', sans-serif;
  --body: 'Work Sans', sans-serif;
  --max: 1080px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--curtain);
  color:var(--paper);
  font-family:var(--body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

a{color:var(--brass-bright); text-decoration:none;}
a:hover{text-decoration:underline;}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--brass-bright); outline-offset:3px;
}

img{max-width:100%; display:block;}

h1,h2,h3{font-family:var(--display); font-weight:600; margin:0 0 0.4em; color:var(--paper);}
h1{font-size:clamp(2.4rem,6vw,4.2rem); font-weight:700; line-height:1.02;}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem); font-style:italic; font-weight:500;}
h3{font-size:1.3rem; color:var(--brass-bright); text-transform:uppercase; letter-spacing:0.08em; font-style:normal; font-weight:600;}
p{margin:0 0 1em;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}

/* ---- Header / marquee nav ---- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--curtain-deep);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px; gap:16px; flex-wrap:wrap;}
.brand{display:flex; flex-direction:column; line-height:1.1;}
.brand .name{font-family:var(--wordmark); font-weight:400; font-size:1.35rem; color:var(--paper); letter-spacing:0.01em; text-transform:lowercase;}
.brand .tag{font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--brass); margin-top:4px;}
.brand:hover{text-decoration:none;}
nav.mainnav ul{list-style:none; display:flex; gap:26px; margin:0; padding:0; flex-wrap:wrap;}
nav.mainnav a{
  color:var(--paper-dim); font-size:0.85rem; letter-spacing:0.08em; text-transform:uppercase; font-weight:500;
  padding-bottom:4px; border-bottom:1px solid transparent;
}
nav.mainnav a:hover, nav.mainnav a.active{color:var(--brass-bright); border-color:var(--brass); text-decoration:none;}

/* ---- Hero (curtain reveal) ---- */
.hero{
  position:relative; overflow:hidden;
  padding:96px 0 84px;
  background:var(--curtain);
  border-bottom:1px solid var(--line);
}
.hero::before, .hero::after{
  content:""; position:absolute; top:0; bottom:0; width:14%;
  background:repeating-linear-gradient(90deg, rgba(0,0,0,0.35) 0 6px, rgba(255,255,255,0.02) 6px 12px);
  opacity:0.55; pointer-events:none;
}
.hero::before{left:0;}
.hero::after{right:0;}
.eyebrow{
  display:inline-block; font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--brass); border:1px solid var(--line); padding:6px 14px; border-radius:999px; margin-bottom:22px;
}
.hero-title{max-width:820px;}
.wordmark{font-family:var(--wordmark); font-weight:400; text-transform:lowercase; letter-spacing:0;}
.hero-sub{max-width:640px; font-size:1.15rem; color:var(--paper-dim); margin-top:14px;}
.hero-actions{display:flex; gap:16px; margin-top:34px; flex-wrap:wrap;}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-weight:600; font-size:0.9rem; letter-spacing:0.04em; text-transform:uppercase;
  padding:14px 26px; border-radius:2px; border:1px solid var(--brass);
  transition:transform 0.15s ease, background 0.15s ease;
}
.btn:hover{text-decoration:none; transform:translateY(-2px);}
.btn-primary{background:var(--red); color:var(--paper);}
.btn-primary:hover{background:var(--red-bright);}
.btn-ghost{background:transparent; color:var(--paper);}
.btn-ghost:hover{border-color:var(--red); color:var(--red-bright);}

/* ---- ticket-stub info block ---- */
.ticket{
  margin-top:56px; background:rgba(217,163,172,0.16); border:1px solid rgba(217,163,172,0.3); border-radius:6px;
  padding:28px 32px; position:relative; display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.ticket::before, .ticket::after{
  content:""; position:absolute; top:50%; width:20px; height:20px; background:var(--curtain);
  border-radius:50%; transform:translateY(-50%); border:1px solid var(--line);
}
.ticket::before{left:-10px;}
.ticket::after{right:-10px;}
.ticket dt{font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--brass); margin-bottom:6px;}
.ticket dd{margin:0; color:var(--paper); font-size:0.98rem;}

/* ---- sections ---- */
section{padding:76px 0;}
section.alt{background:rgba(217,163,172,0.14); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.section-head{max-width:640px; margin-bottom:36px;}
.section-head .kicker{font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--brass); display:block; margin-bottom:10px;}

/* ---- credits list ---- */
.credits{list-style:none; margin:0; padding:0; display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.credits li{font-size:0.95rem; color:var(--paper); border-left:2px solid var(--red); padding-left:14px;}
.credits li b{color:var(--brass); font-weight:600; display:block; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:2px;}

/* ---- archive grid ---- */
.archive-grid{display:grid; gap:22px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
.show-card{
  border:1px solid var(--line); border-radius:6px; overflow:hidden; background:rgba(217,163,172,0.14);
  transition:transform 0.15s ease, border-color 0.15s ease; display:flex; flex-direction:column;
}
.show-card:hover{transform:translateY(-4px); border-color:var(--brass); text-decoration:none;}
.show-card .thumb{aspect-ratio:3/4; overflow:hidden; background:var(--curtain-deep);}
.show-card .thumb img{width:100%; height:100%; object-fit:cover; object-position:top center;}
.show-card .body{padding:16px 18px; flex:1; display:flex; flex-direction:column;}
.show-card .year{font-size:0.7rem; letter-spacing:0.14em; color:var(--brass); text-transform:uppercase;}
.show-card h3{margin:6px 0 0; font-size:1.05rem; color:var(--paper); text-transform:none; letter-spacing:0; font-family:var(--display); font-weight:600;}
.show-card p{color:var(--paper-dim); font-size:0.85rem; margin-top:8px; margin-bottom:0;}

/* ---- gallery ---- */
.gallery{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
.gallery button{padding:0; border:none; background:none; cursor:zoom-in; border-radius:4px; overflow:hidden; aspect-ratio:4/3;}
.gallery img{width:100%; height:100%; object-fit:cover; transition:transform 0.25s ease;}
.gallery button:hover img{transform:scale(1.05);}

/* ---- lightbox ---- */
.lightbox{position:fixed; inset:0; background:rgba(12,3,4,0.94); display:none; align-items:center; justify-content:center; z-index:100; padding:32px;}
.lightbox.open{display:flex;}
.lightbox img{max-width:92vw; max-height:86vh; object-fit:contain; border:1px solid var(--line);}
.lightbox .close{position:absolute; top:20px; right:28px; font-size:1.8rem; color:var(--paper); background:none; border:none; cursor:pointer;}
.lightbox .nav-btn{position:absolute; top:50%; transform:translateY(-50%); background:rgba(243,234,217,0.08); border:1px solid var(--line); color:var(--paper); font-size:1.6rem; width:48px; height:48px; border-radius:50%; cursor:pointer;}
.lightbox .prev{left:20px;} .lightbox .next{right:20px;}

/* ---- form ---- */
form.card{
  background:rgba(217,163,172,0.15); border:1px solid rgba(217,163,172,0.3); border-radius:8px; padding:32px;
  display:grid; gap:18px; max-width:640px;
}
.field{display:grid; gap:6px;}
.field label{font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--brass);}
.field input, .field select, .field textarea{
  background:var(--curtain-deep); border:1px solid var(--line); color:var(--paper); padding:12px 14px; border-radius:4px;
  font-family:var(--body); font-size:0.95rem;
}
.field textarea{resize:vertical; min-height:100px;}
.two-col{display:grid; gap:18px; grid-template-columns:1fr 1fr;}
@media (max-width:560px){.two-col{grid-template-columns:1fr;}}
.note-box{border-left:3px solid var(--dusty); background:rgba(217,163,172,0.18); padding:14px 18px; font-size:0.88rem; color:var(--paper-dim); border-radius:0 4px 4px 0;}

/* ---- timeline (about) ---- */
.timeline{border-left:1px solid var(--line); margin-left:8px; padding-left:28px; display:grid; gap:26px;}
.timeline .item{position:relative;}
.timeline .item::before{content:""; position:absolute; left:-34px; top:6px; width:10px; height:10px; border-radius:50%; background:var(--brass);}
.timeline .item .yr{font-family:var(--display); font-style:italic; color:var(--brass-bright); font-size:1.05rem;}

/* ---- footer ---- */
footer{border-top:1px solid var(--line); padding:44px 0 60px; background:var(--curtain-deep);}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; color:var(--paper-dim); font-size:0.85rem;}
footer a{color:var(--paper-dim);}
footer a:hover{color:var(--brass-bright);}

/* ---- misc ---- */
.list-plain{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.list-plain li a{display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); color:var(--paper); font-size:1rem;}
.list-plain li a:hover{color:var(--brass-bright); text-decoration:none;}
.list-plain li a span.yr{color:var(--brass); font-family:var(--display); font-style:italic;}

.quote{font-family:var(--display); font-style:italic; font-size:1.3rem; color:var(--brass-bright); border-left:3px solid var(--brass); padding-left:20px; margin:28px 0;}

@media (max-width:820px){
  .hero .wrap > div[style*="grid-template-columns:1"],
  section .wrap > div[style*="grid-template-columns:1"]{
    grid-template-columns:1fr !important;
  }
  .hero .wrap > div[style*="grid-template-columns:1"] > div:last-child,
  section .wrap > div[style*="grid-template-columns:1"] > div:last-child{
    order:-1;
    max-width:320px;
  }
}

@media (max-width:640px){
  section{padding:56px 0;}
  .hero{padding:64px 0 56px;}
  .site-header .wrap{flex-direction:column; align-items:flex-start; gap:10px;}
  .brand{width:100%;}
  nav.mainnav{width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
  nav.mainnav ul{flex-wrap:nowrap; gap:18px; width:max-content; padding-bottom:2px;}
  .two-col{grid-template-columns:1fr;}
}