/*
Theme Name: SERPENTINE
Author: SERPENTINE / TANA Production
Description: Custom theme based on the approved SERPENTINE final preview.
Version: 1.0.0
Text Domain: serpentine
*/

:root {
  --bg:#080808;
  --panel:#101010;
  --text:#f1f1ed;
  --muted:#a6a6a0;
  --line:#252525;
  --green:#0a7a3f;
  --paper:#f3f1eb;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  background:var(--bg);
  color:var(--text);
}
a { color:inherit; text-decoration:none; }
header {
  position:fixed; inset:0 0 auto 0;
  z-index:50; height:82px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 34px;
  background:linear-gradient(to bottom, rgba(0,0,0,.78), rgba(0,0,0,0));
}
.brand img { height:40px; width:auto; display:block; filter:brightness(1.05); }
nav { display:flex; gap:22px; align-items:center; font-size:13px; letter-spacing:.08em; }
nav a:hover, .accent { color:var(--green); }
.hero {
  min-height:100vh; position:relative;
  display:flex; align-items:flex-end;
  padding:120px 34px 54px;
  overflow:hidden;
}
.hero::before {
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 65% 35%, rgba(12,122,63,.10), transparent 32%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.70));
  z-index:1;
}
.media-placeholder {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid #161616;
  background:
    linear-gradient(135deg, #111 0%, #0b0b0b 45%, #151515 100%);
  color:#5f5f5a;
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.hero-content { position:relative; z-index:2; max-width:900px; }
.kicker { font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--green); margin-bottom:18px; }
h1 {
  margin:0; font-size:clamp(58px, 8vw, 138px); line-height:.88;
  letter-spacing:-.045em; font-weight:700;
}
.hero-note { margin-top:24px; font-size:18px; color:#d8d8d3; max-width:640px; line-height:1.45; }
section { padding:110px 34px; border-top:1px solid var(--line); }
.section-head {
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:42px; gap:20px;
}
.section-no { color:var(--green); font-size:12px; letter-spacing:.16em; }
h2 { margin:0; font-size:clamp(42px,6vw,86px); letter-spacing:-.04em; line-height:.95; }
.subtle { color:var(--muted); max-width:560px; line-height:1.55; }
.now-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:34px; align-items:stretch; }
.block-media {
  min-height:470px; position:relative; background:#111; border:1px solid var(--line); overflow:hidden;
}
.block-media::after {
  content:"ADD IMAGE / VIDEO IN CMS";
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#666; letter-spacing:.12em; font-size:12px;
}
.detail-card { border-top:1px solid #3a3a3a; padding-top:24px; display:flex; flex-direction:column; justify-content:space-between; }
.detail-card h3 { font-size:42px; margin:0 0 14px; letter-spacing:-.03em; }
.meta { color:var(--green); font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:20px; }
.button {
  display:inline-flex; align-items:center; gap:10px;
  border-bottom:1px solid currentColor; width:max-content;
  padding:0 0 7px; margin-top:26px;
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
}
.program-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.program-card { border-top:1px solid #383838; padding-top:14px; }
.program-card .thumb { height:280px; background:#121212; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:#666; font-size:12px; letter-spacing:.12em; }
.program-card h3 { margin:18px 0 6px; font-size:25px; }
.program-card small { color:var(--muted); }
.place-panel {
  min-height:640px; position:relative; border:1px solid var(--line); background:#0e0e0e; overflow:hidden;
}
.place-panel .place-bg {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#565656;
  letter-spacing:.13em; font-size:12px;
}
.place-list {
  position:relative; z-index:2; margin:0; padding:42px; list-style:none;
  display:flex; flex-direction:column; gap:18px; width:min(720px,90%);
}
.place-list li {
  font-size:clamp(24px,4vw,54px); letter-spacing:-.03em;
  padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.13);
}
.place-list li span { color:var(--green); font-size:12px; letter-spacing:.12em; margin-right:16px; vertical-align:middle; }
.video-frame {
  aspect-ratio:16/9; background:#0d0d0d; border:1px solid var(--line); display:grid; place-items:center;
  color:#666; letter-spacing:.12em; font-size:12px;
}
.video-frame .play { width:76px; height:76px; border:1px solid #777; border-radius:50%; display:grid; place-items:center; font-size:24px; color:#ddd; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.artist-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.artist { min-height:390px; background:#111; border:1px solid var(--line); position:relative; display:flex; align-items:flex-end; padding:18px; }
.artist::before { content:"ADD ARTIST PORTRAIT"; position:absolute; inset:0; display:grid; place-items:center; color:#5d5d5d; font-size:11px; letter-spacing:.12em; }
.artist strong { position:relative; z-index:2; font-size:22px; }
.archive-card { min-height:520px; background:#111; border:1px solid var(--line); display:flex; align-items:flex-end; padding:26px; position:relative; }
.archive-card::before { content:"ADD ARCHIVE IMAGE / VIDEO"; position:absolute; inset:0; display:grid; place-items:center; color:#5d5d5d; font-size:11px; letter-spacing:.12em; }
.archive-card div { position:relative; z-index:2; }
.visit-grid { display:grid; grid-template-columns:.7fr 1.3fr; gap:28px; }
.map { min-height:360px; border:1px solid var(--line); background:#111; display:grid; place-items:center; color:#666; letter-spacing:.12em; font-size:12px; }
.newsletter {
  background:var(--paper); color:#0b0b0b; padding:110px 34px;
}
.newsletter h2 { max-width:900px; }
.newsletter-row { margin-top:42px; display:flex; max-width:760px; border-bottom:1px solid #111; padding-bottom:12px; }
.newsletter input { flex:1; border:0; outline:0; background:transparent; font-size:18px; }
.newsletter button { border:0; background:transparent; font-size:13px; letter-spacing:.08em; cursor:pointer; }
footer { padding:54px 34px 38px; display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:30px; border-top:1px solid var(--line); }
footer img { height:42px; width:auto; }
footer .links { display:flex; flex-direction:column; gap:9px; color:#d6d6d0; font-size:14px; }
footer small { color:#777; display:block; margin-top:30px; }
.mobile-menu { display:none; }

@media (max-width:900px) {
  header { height:72px; padding:0 18px; }
  .brand img { height:31px; }
  nav { display:none; }
  .mobile-menu { display:block; font-size:24px; }
  .hero { padding:100px 18px 34px; min-height:90vh; }
  section { padding:76px 18px; }
  .now-grid, .split, .visit-grid { grid-template-columns:1fr; }
  .program-grid, .artist-strip { grid-template-columns:1fr; }
  .block-media { min-height:330px; }
  .program-card .thumb { height:340px; }
  .place-panel { min-height:560px; }
  .place-list { padding:24px; width:100%; }
  .place-list li { font-size:31px; }
  .newsletter { padding:80px 18px; }
  footer { padding:42px 18px; grid-template-columns:1fr; }
}


.mobile-nav-toggle{display:none;background:none;border:0;color:inherit;font-size:24px;cursor:pointer}
@media(max-width:850px){.mobile-nav-toggle{display:block} header nav.open{display:flex;position:absolute;top:100%;left:0;right:0;background:#080808;padding:24px 18px;flex-direction:column;border-bottom:1px solid #292929;gap:18px}}

body.admin-bar header{top:32px}
@media(max-width:782px){body.admin-bar header{top:46px}}

.site-logo{font-size:30px;font-weight:700;letter-spacing:-.06em;color:#08783d;text-decoration:none}