/*
Theme Name: Dixie Cobbers
Theme URI: https://example.com
Author: Dixie Cobbers
Author URI: https://example.com
Description: Dixieland- & New-Orleans-Jazz-Bandwebsite. Warmes Papier-Beige, Messing, Sumpf-Teal – mit "Second-Line-Route" als verbindendem Gestaltungselement. Termine werden über das Plugin "Dixie Cobbers – Auftrittstermine" gepflegt.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: dixie-cobbers
*/

:root{
  --ink:#20140d;
  --ink-soft:#3a281c;
  --paper:#f1e4c4;
  --paper-light:#f8f0da;
  --brass:#c08a2e;
  --brass-bright:#e0ab45;
  --teal:#2c5850;
  --teal-deep:#1f403a;
  --brick:#a8402a;
  --line: rgba(32,20,13,0.18);
  --shadow: 0 10px 30px rgba(32,20,13,0.18);
  --radius: 4px;
  --display: 'Fraunces', serif;
  --title: 'Fifties Movies', 'Fraunces', serif;
  --body: 'Vollkorn', serif;
  --mono: 'Courier Prime', monospace;
}

@font-face{
  font-family:'Fifties Movies';
  src:url('assets/fonts/Fifties-Movies.ttf') format('truetype');
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
}
img{max-width:100%; height:auto; display:block;}
a{color:inherit;}
h1,h2,h3{font-family:var(--display); margin:0 0 .4em; line-height:1.05; letter-spacing:-.01em;}
.container{max-width:1120px; margin:0 auto; padding:0 28px;}
.eyebrow{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.78rem;
  color:var(--brass);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.eyebrow svg{flex:0 0 auto;}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.82rem;
  padding:13px 24px;
  border-radius:999px;
  border:1.5px solid var(--ink);
  background:transparent;
  color:var(--ink);
  text-decoration:none;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn--solid{background:var(--brass); border-color:var(--brass); color:var(--ink);}
.btn--solid:hover{background:var(--brass-bright);}
.btn--light{border-color:var(--paper-light); color:var(--paper-light);}
.btn--light:hover{background:var(--paper-light); color:var(--teal-deep);}

/* ---------- WP admin bar offset ---------- */
body.admin-bar header.site-nav{top:32px;}
@media screen and (max-width:782px){
  body.admin-bar header.site-nav{top:46px;}
}

/* ---------- NAV ---------- */
/* Sichtbare Höhe der Nav-Leiste (Logo/Menü-Zone auf dem Brett).
   Kleiner Wert = Bild hängt weiter in den Hero hinein, größerer Wert = weniger Überhang. */
:root{
  --nav-h: clamp(120px, 15vw, 200px);
}

header.site-nav{
  position:sticky;
  top:0;
  z-index:50;
  overflow:visible;
  min-height:var(--nav-h);

  /* Grundfarbe des Nachthimmels */
  background:
    radial-gradient(
      ellipse at 50% 120%,
      rgba(35, 42, 95, .55) 0%,
      rgba(12, 18, 48, .45) 35%,
      rgba(3, 6, 20, .95) 75%
    ),
    linear-gradient(
      180deg,
      #02030d 0%,
      #050817 45%,
      #090d25 100%
    );

  box-shadow:0 6px 18px rgba(0,0,0,.35);

  /* wichtig für die Ebenen */
  isolation:isolate;
}


/* =========================================
   STERNENHIMMEL
   ========================================= */

header.site-nav::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;

  /* viele kleine Sterne in unterschiedlichen Größen */
  background-image:

    /* sehr kleine Sterne */
    radial-gradient(circle at 5% 18%,  rgba(255,255,255,.75) 0 1px, transparent 1.5px),
    radial-gradient(circle at 12% 72%, rgba(255,255,255,.55) 0 1px, transparent 1.5px),
    radial-gradient(circle at 18% 35%, rgba(255,255,255,.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 24% 83%, rgba(255,255,255,.45) 0 1px, transparent 1.5px),
    radial-gradient(circle at 31% 21%, rgba(255,255,255,.7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 38% 65%, rgba(255,255,255,.5) 0 1px, transparent 1.5px),
    radial-gradient(circle at 44% 31%, rgba(255,255,255,.85) 0 1px, transparent 1.5px),
    radial-gradient(circle at 51% 77%, rgba(255,255,255,.55) 0 1px, transparent 1.5px),
    radial-gradient(circle at 57% 14%, rgba(255,255,255,.75) 0 1px, transparent 1.5px),
    radial-gradient(circle at 64% 48%, rgba(255,255,255,.6) 0 1px, transparent 1.5px),
    radial-gradient(circle at 71% 81%, rgba(255,255,255,.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 26%, rgba(255,255,255,.5) 0 1px, transparent 1.5px),
    radial-gradient(circle at 84% 61%, rgba(255,255,255,.75) 0 1px, transparent 1.5px),
    radial-gradient(circle at 91% 15%, rgba(255,255,255,.65) 0 1px, transparent 1.5px),
    radial-gradient(circle at 96% 74%, rgba(255,255,255,.5) 0 1px, transparent 1.5px),

    /* etwas größere Sterne */
    radial-gradient(circle at 9% 46%,  rgba(190,210,255,.9) 0 1.4px, transparent 2px),
    radial-gradient(circle at 27% 52%, rgba(255,245,210,.85) 0 1.3px, transparent 2px),
    radial-gradient(circle at 47% 58%, rgba(205,220,255,.9) 0 1.5px, transparent 2px),
    radial-gradient(circle at 69% 33%, rgba(255,240,205,.9) 0 1.3px, transparent 2px),
    radial-gradient(circle at 88% 48%, rgba(210,225,255,.85) 0 1.5px, transparent 2px);

  opacity:.9;
}


/* =========================================
   MILCHSTRASSE / NEBEL
   ========================================= */

header.site-nav::after{
  content:"";
  position:absolute;
  inset:-30%;
  z-index:-3;
  pointer-events:none;

  background:

    /* diffuse blaue Nebelwolke */
    radial-gradient(
      ellipse 45% 18% at 30% 55%,
      rgba(75,95,180,.16),
      transparent 70%
    ),

    /* violetter Nebel */
    radial-gradient(
      ellipse 35% 16% at 68% 35%,
      rgba(125,80,190,.12),
      transparent 70%
    ),

    /* warme, extrem dezente Sternwolke */
    radial-gradient(
      ellipse 55% 12% at 52% 65%,
      rgba(220,200,170,.07),
      transparent 75%
    );

  transform:rotate(-8deg);
  filter:blur(18px);

  opacity:.8;
}


/* =========================================
   HELLERE STERNE / GLITZERN
   ========================================= */

header.site-nav{
  --star-color:#ffffff;
}


/* einige Sterne bekommen einen kleinen Glow */
header.site-nav .site-nav-bg{
  filter:
    drop-shadow(0 0 0 rgba(0,0,0,0));
}



/* Das Holzbrett-Artwork: liegt hinter dem Menü, wird per max-width begrenzt
   (kein Hochskalieren über die Originalgröße hinaus) und hängt bewusst
   unten aus der Nav heraus in den Hero-Bereich hinein. */


header.site-nav{
  --twinkle-duration: 4s;
}

header.site-nav::before{
  animation: starfieldTwinkle 7s ease-in-out infinite alternate;
}

@keyframes starfieldTwinkle{
  0%{
    opacity:.72;
  }

  35%{
    opacity:.86;
  }

  70%{
    opacity:.76;
  }

  100%{
    opacity:.95;
  }
}

@media (prefers-reduced-motion: reduce){
  header.site-nav::before{
    animation:none;
  }
}
/* =========================================================
   NAVIGATION – STERNENHIMMEL + BRETT + ZENTRIERTES BRANDING
   ========================================================= */

.nav-inner{
  position:relative;
  z-index:4;

  height:100%;
  min-height:var(--nav-h);

  max-width:none;
  margin:0;
  padding:0;
}


/* ---------------------------------------------------------
   BRANDING
   Logo + Seitentitel sitzen exakt mittig auf dem Brett
   --------------------------------------------------------- */
/* =========================================================
   LOGO + SEITENTITEL
   Liegen VOR dem Brett
   ========================================================= */

.brand{
  position:absolute;

  left:50%;
  top:70%;

  transform:translate(-50%, -50%);

  z-index:4;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:25px;

  width:max-content;
  max-width:90%;

  font-family:var(--title);
  font-weight:400;
  font-style:normal;

  font-size:clamp(1.5rem, 2.8vw, 2.25rem);
  line-height:1;
  letter-spacing:.02em;

  text-decoration:none;
  color:var(--paper-light);

  /* damit der Schriftzug wirklich auf dem Holz lesbar bleibt */
  text-shadow:
    0 2px 2px rgba(0,0,0,.7),
    0 3px 7px rgba(0,0,0,.55);
}


.brand img{
  width:clamp(68px, 7vw, 95px);
  height:clamp(68px, 7vw, 95px);

  object-fit:contain;
  flex:0 0 auto;

  filter:
    drop-shadow(0 2px 2px rgba(0,0,0,.7))
    drop-shadow(0 4px 7px rgba(0,0,0,.35));
}



/* ---------------------------------------------------------
   MENÜ
   Sitzt oben im Sternenhimmel
   --------------------------------------------------------- */


nav.links{
  position:absolute;

  top:18px;
  left:50%;

  transform:translateX(-50%);

  z-index:5;

  display:block;

  font-family:var(--mono);
  font-size:.78rem;

  text-transform:uppercase;
  letter-spacing:.1em;

  white-space:nowrap;
}


nav.links ul{
  list-style:none;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:28px;

  margin:0;
  padding:0;
}


nav.links a{
  position:relative;

  display:block;

  padding:5px 2px;

  text-decoration:none;

  color:rgba(248,240,218,.95);

  text-shadow:
    0 1px 3px rgba(0,0,0,.95),
    0 0 8px rgba(0,0,0,.7);

  border-bottom:2px solid transparent;

  transition:
    color .2s ease,
    border-color .2s ease,
    text-shadow .2s ease;
}


nav.links a:hover{
  color:var(--brass-bright);
  border-color:var(--brass-bright);

  text-shadow:
    0 1px 3px rgba(0,0,0,.95),
    0 0 10px rgba(224,171,69,.4);
}

/* ---------------------------------------------------------
   Das Brett bekommt optisch etwas Tiefe
   --------------------------------------------------------- */

.site-nav-bg{
  position:absolute;

  top:-60px;
  left:50%;

  transform:translateX(-50%);

  width:100%;
  max-width:1900px;
  height:auto;

  z-index:2;

  pointer-events:none;
  user-select:none;

  /* Schatten unter/um das Brett */
  filter:
    drop-shadow(0 12px 18px rgba(0,0,0,.45))
    drop-shadow(0 2px 3px rgba(0,0,0,.55));
}


/* ---------------------------------------------------------
   WICHTIG:
   Das Branding muss VOR dem Brett liegen,
   sonst verschwindet die Schrift teilweise dahinter.
   --------------------------------------------------------- */

.brand{
  z-index:3;
}


/* Menü ganz vorne */
nav.links{
  z-index:5;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

/* =========================================================
   BURGER-MENÜ
   Gut sichtbar vor Sternenhimmel und Brett
   ========================================================= */

.menu-toggle{
  position:absolute;
  top:14px;
  right:22px;

  z-index:6;

  /* kompakter, gut sichtbarer Hintergrund */
  width:48px;
  height:48px;

  display:none;
  align-items:center;
  justify-content:center;

  padding:0;

  border:1px solid rgba(224,171,69,.65);
  border-radius:8px;

  /* dunkler "Burger-Button" */
  background:
    linear-gradient(
      145deg,
      rgba(15,18,35,.94),
      rgba(3,6,18,.94)
    );

  box-shadow:
    0 3px 10px rgba(0,0,0,.55),
    0 0 12px rgba(0,0,0,.3);

  cursor:pointer;

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .15s ease,
    box-shadow .2s ease;
}


/* Die drei Burger-Linien */
.menu-toggle span{
  display:block;

  width:24px;
  height:3px;

  margin:0;

  border-radius:999px;

  background:var(--paper-light);

  box-shadow:
    0 1px 2px rgba(0,0,0,.65);

  transition:
    transform .25s ease,
    opacity .2s ease;
}


/* Abstand zwischen den drei Linien */
.menu-toggle{
  flex-direction:column;
  gap:4px;
}


.menu-toggle:hover{
  border-color:var(--brass-bright);

  background:
    linear-gradient(
      145deg,
      rgba(30,34,58,.97),
      rgba(5,8,23,.97)
    );

  box-shadow:
    0 4px 14px rgba(0,0,0,.6),
    0 0 14px rgba(224,171,69,.18);

  transform:translateY(-1px);
}


/* Tastatur-Fokus */
.menu-toggle:focus-visible{
  outline:2px solid var(--brass-bright);
  outline-offset:3px;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width:820px){

  .menu-toggle{
    display:flex;
  }

}


/* ---------------------------------------------------------
   Wenn das Menü geöffnet ist:
   Burger wird zum X
   --------------------------------------------------------- */

.menu-toggle[aria-expanded="true"] span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2){
  opacity:0;
  transform:scaleX(0);
}

.menu-toggle[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

/* ---------------------------------------------------------
   Tablet / Mobile
   --------------------------------------------------------- */

@media (max-width:820px){

  nav.links{
    position:absolute;

    top:100%;
    left:0;
    right:0;

    transform:none;

    flex-direction:column;

    background:
      linear-gradient(
        180deg,
        rgba(3,6,20,.97),
        rgba(5,8,23,.98)
      );

    padding:18px 28px;

    gap:16px;

    border-bottom:3px solid var(--teal-deep);

    display:none;

    white-space:normal;
  }


  nav.links ul{
    flex-direction:column;
    gap:16px;
  }


  nav.links.open{
    display:flex;
  }


  .menu-toggle{
    display:block;
  }


  /* Branding etwas kleiner */
  .brand{
    max-width:72%;
    gap:9px;

    font-size:1.35rem;
  }


  .brand img{
    width:62px;
    height:62px;
  }
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  background:linear-gradient(180deg,var(--teal-deep),var(--teal) 70%);
  color:var(--paper-light);
  overflow:hidden;
  padding:100px 0 130px;
}
.staff-lines{
  position:absolute; inset:0; opacity:.14;
  background-image:repeating-linear-gradient(to bottom, var(--paper-light) 0px, var(--paper-light) 1px, transparent 1px, transparent 46px);
  background-position:0 60px;
}
.hero-inner{position:relative; text-align:center;}
.hero .eyebrow{justify-content:center; color:var(--brass-bright);}
.hero h1{
  font-size:clamp(2.8rem, 7vw, 5.6rem);
  font-style:italic;
  font-weight:600;
  color:var(--paper-light);
  text-shadow:0 4px 24px rgba(0,0,0,.25);
}
.hero h1 span{color:var(--brass-bright); display:block; font-size:.42em; font-style:normal; font-family:var(--mono); text-transform:uppercase; letter-spacing:.16em; margin-top:14px;}
.hero p.lead{
  max-width:620px; margin:26px auto 40px; font-size:1.15rem; color:var(--paper);
}
.hero-actions{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
.hero-photo{
  max-width:900px; margin:44px auto 8px; border-radius:6px; overflow:hidden;
  border:1px solid rgba(224,171,69,.45);
  box-shadow:0 22px 55px rgba(0,0,0,.5), 0 0 0 6px rgba(20,14,9,.35);
  aspect-ratio:1672 / 941;
  background-image:url('assets/img/dixie-cobbers-hero.jpg');
  background-size:cover;
  background-position:center;
}
.hero-lineup{
  margin-top:64px; display:flex; justify-content:center; gap:44px; flex-wrap:wrap;
  font-family:var(--mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--brass-bright);
}
.hero-lineup div{text-align:center;}
.hero-lineup strong{display:block; font-family:var(--body); font-style:normal; text-transform:none; letter-spacing:0; font-size:1.02rem; color:var(--paper-light); margin-top:4px;}

/* ---------- PARADE ROUTE ---------- */
.parade-wrapper{position:relative;}
.parade-line{
  position:absolute; left:52px; top:0; bottom:0; width:2px;
  background-image:linear-gradient(var(--brass) 60%, transparent 0%);
  background-size:2px 14px; background-repeat:repeat-y;
  z-index:1;
}
@media (max-width:900px){ .parade-line{display:none;} }

section.stop{ position:relative; padding:96px 0 96px 0; }
section.stop .container{position:relative; padding-left:104px;}
@media (max-width:900px){ section.stop .container{padding-left:28px;} }

/* Öllampen-Marker: deutlich größer (72x72px statt 38x38px) und mit
   größerem Motivanteil (80% statt 70%), damit die Lampe gut zur
   Geltung kommt. "top" leicht angepasst, damit die Lampe optisch
   weiterhin auf Höhe der Section-Überschrift sitzt. */
.stop-marker{
  position:absolute; left:52px; top:78px; transform:translateX(-50%);
  width:72px; height:72px; border-radius:50%;
  background-color:var(--paper);
  background-image:url('assets/img/oil-lamp.png');
  background-size:80%;
  background-position:center;
  background-repeat:no-repeat;
  border:2px solid var(--brass);
  display:flex; align-items:center; justify-content:center;
  z-index:2;
  box-shadow:var(--shadow);
  overflow:visible;
  animation:lamp-flicker 3.4s ease-in-out infinite;
}

.stop-marker::before{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(224,171,69,.55) 0%, rgba(224,171,69,0) 70%);
  z-index:-1;
  animation:lamp-glow 2.6s ease-in-out infinite;
}

@keyframes lamp-glow{
  0%,100%{
    opacity:.6;
    transform:scale(1);
  }
  25%{
    opacity:.85;
    transform:scale(1.08);
  }
  50%{
    opacity:.7;
    transform:scale(1.02);
  }
  75%{
    opacity:.95;
    transform:scale(1.1);
  }
}

@keyframes lamp-flicker{
  0%, 100%{
    box-shadow:var(--shadow), 0 0 8px 2px rgba(224,171,69,.5);
    filter:brightness(1);
  }
  20%{
    box-shadow:var(--shadow), 0 0 14px 4px rgba(224,171,69,.75);
    filter:brightness(1.1);
  }
  45%{
    box-shadow:var(--shadow), 0 0 6px 1px rgba(224,171,69,.4);
    filter:brightness(.95);
  }
  70%{
    box-shadow:var(--shadow), 0 0 16px 5px rgba(224,171,69,.85);
    filter:brightness(1.15);
  }
}
@media (max-width:900px){ .stop-marker{display:none;} }

section.stop:nth-of-type(odd){background:var(--paper);}
section.stop:nth-of-type(even){background:var(--paper-light);}

.section-head{max-width:640px; margin-bottom:48px;}
.section-head h2{font-size:clamp(1.9rem,3.6vw,2.6rem); font-style:italic;}
.section-head p{color:var(--ink-soft); font-size:1.05rem;}

/* ---------- ABOUT ---------- */
.about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start;}
@media (max-width:820px){ .about-grid{grid-template-columns:1fr;} }
.about-grid p{font-size:1.08rem;}
.about-grid p.press{ font-style:italic; border-left:3px solid var(--brass); padding-left:20px; color:var(--ink-soft); }
.photo-frame{
  background:var(--teal-deep); border-radius:var(--radius); aspect-ratio:4/5;
  display:flex; align-items:center; justify-content:center; color:var(--brass-bright);
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.photo-frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.photo-frame::after{ content:''; position:absolute; inset:0; border:1px solid rgba(240,225,190,.25); margin:12px; pointer-events:none; }
.photo-frame span{font-family:var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; opacity:.85; position:relative; z-index:1;}

/* ---------- MEMBERS ---------- */
.members{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
@media (max-width:820px){ .members{grid-template-columns:1fr;} }
.member{ background:var(--paper-light); border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px; box-shadow:var(--shadow); }
.member .icon{ width:48px; height:48px; border-radius:50%; background:var(--teal-deep); color:var(--brass-bright); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.member h3{font-size:1.3rem; font-style:italic; margin-bottom:2px;}
.member .role{font-family:var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--brass); margin-bottom:12px; display:block;}
.member p{font-size:.98rem; color:var(--ink-soft); margin:0;}

/* ---------- TERMINE ---------- */
.dates{display:flex; flex-direction:column; gap:16px; max-width:760px;}
.date-row{
  display:grid; grid-template-columns:90px 1fr auto; gap:22px; align-items:center;
  background:var(--paper-light); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 22px; box-shadow:var(--shadow);
}
@media (max-width:600px){ .date-row{grid-template-columns:70px 1fr;row-gap:10px;} .date-row .btn{grid-column:1/-1;} }
.date-box{ font-family:var(--mono); text-align:center; background:var(--brick); color:var(--paper-light); border-radius:var(--radius); padding:10px 4px; }
.date-box .day{font-size:1.5rem; font-weight:700; line-height:1;}
.date-box .month{font-size:.72rem; text-transform:uppercase; letter-spacing:.1em;}
.date-info h3{font-size:1.15rem; margin-bottom:2px;}
.date-info .venue{font-family:var(--mono); font-size:.82rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em;}
.dates-note{font-family:var(--mono); font-size:.78rem; color:var(--ink-soft); margin-top:18px;}
.dates-empty{font-family:var(--mono); font-size:.9rem; color:var(--ink-soft);}

/* ---------- GALLERY ---------- */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:820px){ .gallery{grid-template-columns:repeat(2,1fr);} }
.gallery .photo-frame{aspect-ratio:1/1;}
.gallery .photo-frame:nth-child(3n+1){background:var(--brick);}
.gallery .photo-frame:nth-child(3n+2){background:var(--teal-deep);}
.gallery .photo-frame:nth-child(3n){background:var(--ink-soft);}

/* ---------- VIDEOS ---------- */
.videos{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
@media (max-width:820px){ .videos{grid-template-columns:1fr;} }
.video-card{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:var(--ink);}
.video-thumb{ aspect-ratio:16/9; background:linear-gradient(135deg,var(--teal-deep),var(--ink)); position:relative; display:flex; align-items:center; justify-content:center; }
.video-thumb iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.play-btn{ width:58px; height:58px; border-radius:50%; background:var(--brass); display:flex; align-items:center; justify-content:center; }
.video-card p{padding:14px 16px; margin:0; color:var(--paper-light); font-size:.95rem;}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
@media (max-width:820px){ .contact-grid{grid-template-columns:1fr;} }
.contact-info dl{font-family:var(--mono); font-size:.92rem;}
.contact-info dt{color:var(--brass); text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; margin-top:18px;}
.contact-info dd{margin:4px 0 0; color:var(--ink);}
form.contact-form{display:flex; flex-direction:column; gap:14px;}
form.contact-form input, form.contact-form textarea{
  font-family:var(--body); font-size:1rem; padding:13px 16px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--paper-light); color:var(--ink); resize:vertical; width:100%;
}
form.contact-form label{font-family:var(--mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:-8px;}

/* ---------- SIMPLE PAGE (page.php / index.php) ---------- */
.simple-page{padding:80px 0; min-height:50vh;}
.simple-page .entry-content{max-width:760px;}
.simple-page .entry-content h1{font-style:italic; font-size:clamp(2rem,4vw,3rem);}

/* ---------- FOOTER ---------- */
footer{ background:var(--ink); color:var(--paper); padding:56px 0 30px; }
.footer-inner{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; align-items:center;}
.footer-brand{font-family:var(--display); font-style:italic; font-size:1.3rem;}
.footer-links{display:flex; gap:20px; font-family:var(--mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; list-style:none; margin:0; padding:0;}
.footer-links a{text-decoration:none; opacity:.85;}
.footer-bottom{margin-top:32px; padding-top:24px; border-top:1px solid rgba(241,228,196,.15); font-family:var(--mono); font-size:.72rem; color:rgba(241,228,196,.55); text-align:center;}