/* Detling Players — rebuild
   Brand: #2f5aae (blue) / #00ccff (cyan), lifted from the group's logo */

:root{
  --blue:#2f5aae;
  --blue-dark:#1d3a75;
  --blue-deep:#122549;
  --cyan:#00ccff;
  --gold:#e8b04b;
  --ink:#16202e;
  --body:#42505f;
  --line:#dfe5ec;
  --bg:#ffffff;
  --bg-soft:#f4f7fb;
  --wrap:1120px;
  --r:14px;
  --shadow:0 2px 8px rgba(18,37,73,.06), 0 12px 32px rgba(18,37,73,.08);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--body);
  font:17px/1.7 "Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
}
h1,h2,h3,h4{
  color:var(--ink); font-family:Georgia,"Times New Roman",serif;
  line-height:1.18; margin:0 0 .5em; font-weight:700; letter-spacing:-.01em;
}
h1{font-size:clamp(2rem,5.2vw,3.1rem)}
h2{font-size:clamp(1.5rem,3.4vw,2.15rem)}
h3{font-size:1.22rem}
p{margin:0 0 1.15em}
a{color:var(--blue); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--blue-dark)}
img{max-width:100%; height:auto; display:block}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
.narrow{max-width:760px}

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.head-inner{display:flex; align-items:center; gap:16px; padding:12px 20px; max-width:var(--wrap); margin:0 auto}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; flex:1; min-width:0}
.brand img{width:52px; height:52px; object-fit:contain; flex:0 0 auto}
.brand b{display:block; font-family:Georgia,serif; font-size:1.16rem; color:var(--ink); line-height:1.15}
.brand span{display:block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); font-weight:600}
.nav-toggle{
  display:none; background:none; border:1px solid var(--line); border-radius:10px;
  padding:9px 12px; font-size:1.15rem; color:var(--ink); cursor:pointer; line-height:1
}
.nav{display:flex; gap:2px; flex-wrap:wrap}
.nav a{
  padding:9px 13px; border-radius:9px; text-decoration:none; color:var(--ink);
  font-size:.94rem; font-weight:600; white-space:nowrap
}
.nav a:hover{background:var(--bg-soft); color:var(--blue)}
.nav a.on{background:var(--blue); color:#fff}
.nav a.cta{background:var(--gold); color:#3a2a05}
.nav a.cta:hover{background:#d89f36; color:#3a2a05}

@media (max-width:900px){
  .nav-toggle{display:block}
  .nav{
    display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    background:#fff; border-bottom:1px solid var(--line); padding:8px 14px 16px; gap:2px;
    box-shadow:0 14px 30px rgba(18,37,73,.10)
  }
  .nav.open{display:flex}
  .nav a{padding:13px 12px; font-size:1rem}
}

/* ---------- hero ---------- */
.hero{
  position:relative; background:linear-gradient(150deg,var(--blue-deep),var(--blue-dark) 55%,var(--blue));
  color:#fff; padding:clamp(56px,9vw,104px) 0; overflow:hidden
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 78% 15%, rgba(0,204,255,.30), transparent 62%)
}
.hero .wrap{position:relative; z-index:1}
.hero h1{color:#fff; max-width:16ch}
.hero p{color:#d5e2f5; font-size:1.12rem; max-width:56ch}
.eyebrow{
  display:inline-block; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:700; color:var(--cyan); margin-bottom:14px
}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:center}
.hero-grid img{border-radius:var(--r); box-shadow:0 20px 50px rgba(0,0,0,.35)}
@media (max-width:860px){ .hero-grid{grid-template-columns:1fr; gap:30px} }

/* ---------- page header ---------- */
.page-head{background:var(--blue-deep); color:#fff; padding:clamp(38px,6vw,64px) 0}
.page-head h1{color:#fff; margin-bottom:.2em}
.page-head p{color:#c8d8ef; margin:0; max-width:62ch}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; padding:14px 26px; border-radius:999px; font-weight:700;
  text-decoration:none; font-size:1rem; border:2px solid transparent; cursor:pointer
}
.btn-primary{background:var(--gold); color:#3a2a05}
.btn-primary:hover{background:#d89f36; color:#3a2a05}
.btn-ghost{border-color:rgba(255,255,255,.5); color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12); color:#fff}
.btn-solid{background:var(--blue); color:#fff}
.btn-solid:hover{background:var(--blue-dark); color:#fff}
.btns{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}

/* ---------- sections ---------- */
section{padding:clamp(44px,7vw,80px) 0}
.soft{background:var(--bg-soft)}
.sec-head{max-width:62ch; margin-bottom:38px}
.sec-head p{font-size:1.06rem}

/* ---------- next production ---------- */
.next{display:grid; grid-template-columns:.85fr 1.15fr; gap:44px; align-items:center}
.next img{border-radius:var(--r); box-shadow:var(--shadow)}
.dates{
  display:inline-flex; align-items:center; gap:10px; background:var(--blue); color:#fff;
  padding:9px 18px; border-radius:999px; font-weight:700; font-size:.95rem; margin-bottom:18px
}
@media (max-width:820px){ .next{grid-template-columns:1fr; gap:28px} }

/* ---------- cards ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:26px}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.card .thumb{aspect-ratio:4/3; background:var(--bg-soft); overflow:hidden}
.card .thumb.ph{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg,var(--blue-deep),var(--blue));
}
.card .thumb.ph span{font-size:2.6rem; opacity:.85}
.card .thumb img{width:100%; height:100%; object-fit:cover}
.card .body{padding:20px 22px 24px; flex:1; display:flex; flex-direction:column}
.card h3{margin-bottom:.35em}
.card h3 a{text-decoration:none; color:var(--ink)}
.card h3 a:hover{color:var(--blue)}
.card .year{font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); font-weight:700; margin-bottom:8px}
.card p{font-size:.95rem; margin-bottom:1em}
.card .more{margin-top:auto; font-weight:700; font-size:.94rem; text-decoration:none}

/* ---------- prose ---------- */
.prose{max-width:72ch}
.prose h2{margin-top:1.6em}
.prose h2:first-child{margin-top:0}
.prose ul{padding-left:1.3em; margin:0 0 1.2em}
.prose li{margin-bottom:.45em}
.pull{
  border-left:4px solid var(--cyan); background:var(--bg-soft);
  padding:20px 24px; border-radius:0 var(--r) var(--r) 0; margin:0 0 1.6em;
  font-size:1.06rem; color:var(--ink)
}
.credit{font-size:.86rem; color:#77838f; font-style:italic}

/* ---------- gallery ---------- */
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; margin:34px 0}
.gallery a{display:block; border-radius:10px; overflow:hidden; aspect-ratio:1; background:var(--bg-soft)}
.gallery img{width:100%; height:100%; object-fit:cover; transition:transform .3s ease}
.gallery a:hover img{transform:scale(1.05)}

/* lightbox */
.lb{
  position:fixed; inset:0; z-index:200; background:rgba(9,16,28,.94);
  display:none; align-items:center; justify-content:center; padding:24px
}
.lb.open{display:flex}
.lb img{max-width:100%; max-height:86vh; border-radius:8px}
.lb button{
  position:absolute; background:rgba(255,255,255,.12); color:#fff; border:0;
  width:52px; height:52px; border-radius:50%; font-size:1.5rem; cursor:pointer; line-height:1
}
.lb .x{top:20px; right:20px}
.lb .prev{left:16px; top:50%; transform:translateY(-50%)}
.lb .next-btn{right:16px; top:50%; transform:translateY(-50%)}
.lb button:hover{background:rgba(255,255,255,.24)}

/* ---------- team ---------- */
.team{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px}
.member{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:22px}
.member .role{font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:var(--blue); font-weight:700}
.member b{display:block; font-family:Georgia,serif; font-size:1.16rem; color:var(--ink); margin:6px 0 4px}
.member a{font-size:.92rem; word-break:break-word}

/* ---------- form ---------- */
.form{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:clamp(24px,4vw,38px); box-shadow:var(--shadow)}
.field{margin-bottom:20px}
.field label{display:block; font-weight:700; color:var(--ink); margin-bottom:7px; font-size:.95rem}
.field input[type=text], .field input[type=email], .field input[type=tel], .field textarea, .field select{
  width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:10px;
  font:inherit; font-size:16px; background:#fff; color:var(--ink)
}
.field textarea{min-height:110px; resize:vertical}
.field input:focus, .field textarea:focus, .field select:focus{outline:2px solid var(--cyan); outline-offset:1px; border-color:var(--cyan)}
.checks{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:9px}
.check{display:flex; align-items:center; gap:9px; background:var(--bg-soft); border:1px solid var(--line); border-radius:10px; padding:11px 13px}
.check input{width:19px; height:19px; accent-color:var(--blue); flex:0 0 auto}
.check span{font-size:.94rem}
.tiers{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:8px}
.tier{position:relative}
.tier input{position:absolute; opacity:0; pointer-events:none}
.tier label{
  display:block; text-align:center; border:2px solid var(--line); border-radius:12px;
  padding:16px 10px; cursor:pointer; margin:0
}
.tier input:checked + label{border-color:var(--blue); background:#eef3fc}
.tier label b{display:block; font-family:Georgia,serif; font-size:1.5rem; color:var(--ink)}
.tier label span{font-size:.85rem; color:var(--body)}
.hp{position:absolute; left:-9999px}

/* ---------- info panels ---------- */
.panels{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px}
.panel{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px}
.panel h3{margin-bottom:.5em}
.panel ul{padding-left:1.15em; margin:0}
.panel li{margin-bottom:.5em; font-size:.96rem}

/* ---------- news ---------- */
.entry{border-bottom:1px solid var(--line); padding-bottom:34px; margin-bottom:34px}
.entry:last-child{border-bottom:0; margin-bottom:0}
.entry .when{font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); font-weight:700; margin-bottom:8px}

/* ---------- footer ---------- */
.site-foot{background:var(--blue-deep); color:#b9cbe6; padding:56px 0 30px; font-size:.95rem}
.foot-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:34px; margin-bottom:34px}
.site-foot h4{color:#fff; font-family:Georgia,serif; font-size:1.05rem; margin-bottom:.7em}
.site-foot a{color:#9fd9f5}
.site-foot a:hover{color:#fff}
.site-foot ul{list-style:none; padding:0; margin:0}
.site-foot li{margin-bottom:.5em}
.foot-base{border-top:1px solid rgba(255,255,255,.14); padding-top:22px; font-size:.86rem; color:#8ba3c4; display:flex; gap:16px; flex-wrap:wrap; justify-content:space-between}

.skip{position:absolute; left:-9999px; background:#fff; padding:12px 18px; z-index:100}
.skip:focus{left:12px; top:12px}