:root{
  --bg:#17140f;
  --bg-soft:#1e1a15;
  --card:#221d17;
  --teal:#1f5c63;
  --teal-light:#3a8b93;
  --rust:#c1622c;
  --rust-light:#e08348;
  --cream:#f4efe6;
  --cream-dim:#e7e0d2;
  --ink:#17140f;
  --stone:#a99e8d;
  --line: rgba(244,239,230,0.12);
  --r-lg:28px;
  --r-md:18px;
  --r-sm:12px;
  --r-pill:999px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  background:var(--bg);
  color:var(--cream);
  font-family:'Work Sans', sans-serif;
  font-weight:400;
  overflow-x:hidden;
  max-width:100vw;
}
img, iframe, video{ max-width:100%; }
::selection{background:var(--rust);color:var(--ink);}
img{max-width:100%;display:block;}

h1,h2,h3,.display{
  font-family:'Fraunces', serif;
  font-weight:600;
  line-height:1.05;
  letter-spacing:-0.01em;
}
/* Kadence's own palette paints headings a dark blue/navy, which is
   unreadable on this dark brown background. Force every heading to the
   site's cream, nothing from the parent theme can override this. */
body h1, body h2, body h3, body h4, body h5, body h6,
.entry-title, .wp-block-heading{
  color:var(--cream) !important;
}
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6{
  color:var(--ink) !important;
}
.mono{
  font-family:'Space Mono', monospace;
  letter-spacing:0.1em;
  text-transform:uppercase;
}

/* ===== PLACEHOLDER PHOTO BLOCKS ===== */
.ph{
  border-radius:var(--r-lg);
  background:linear-gradient(150deg, rgba(31,92,99,0.55), rgba(23,20,15,0.9) 55%, rgba(193,98,44,0.35));
  background-size:cover; background-position:center;
  position:relative; overflow:hidden;
}
.ph::after{
  content:''; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay; opacity:0.5; pointer-events:none;
}
/* While a video is playing, drop the grain overlay entirely so the
   picture is clean and every YouTube control stays clickable. */
.ph:has(> iframe)::after{ display:none; }
.ph .ph-photo{
  position:absolute; inset:12px; width:calc(100% - 24px); height:calc(100% - 24px); object-fit:contain; z-index:0; display:block;
}
/* Colour-wash tint: sits over a real uploaded photo at an adjustable strength.
   Set --tint-opacity inline (0.1 to 1) to dial it from 10% to 100%; defaults
   to 40% so real photos still pick up the brand colour without hiding them. */
.ph .tint{
  position:absolute; inset:0; opacity:var(--tint-opacity, 0.4); pointer-events:none; z-index:1;
}
.ph.warm .tint{ background:radial-gradient(circle at 30% 20%, rgba(224,131,72,0.95), transparent 60%); }
.ph.teal .tint{ background:radial-gradient(circle at 70% 30%, rgba(58,139,147,0.95), transparent 60%); }
/* Legacy support: if no .tint child is present, fall back to the old always-on wash. */
.ph.warm:not(:has(.tint))::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%, rgba(224,131,72,0.4), transparent 60%); }
.ph.teal:not(:has(.tint))::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 70% 30%, rgba(58,139,147,0.4), transparent 60%); }

/* ===== NAV ===== */
header{
  position:fixed; top:22px; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 5vw;
}
.logo-mark{display:flex; align-items:center; gap:10px; text-decoration:none;
  background:rgba(23,20,15,0.7); backdrop-filter:blur(10px);
  padding:10px 18px; border-radius:var(--r-pill); border:1px solid var(--line);
}
.mark-img{ width:26px; height:26px; object-fit:contain; display:block; }
.logo-word{font-family:'Fraunces'; font-weight:600; font-size:15px; color:var(--cream);}
nav{display:flex; gap:8px; align-items:center;
  background:rgba(23,20,15,0.7); backdrop-filter:blur(10px);
  padding:6px; border-radius:var(--r-pill); border:1px solid var(--line);
}
nav a{
  color:var(--cream); text-decoration:none;
  font-family:'Space Mono'; font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  padding:11px 20px; border-radius:var(--r-pill);
  transition:background 0.3s ease, color 0.3s ease;
}
nav a:hover{ background:rgba(244,239,230,0.1); }
nav a.active{ background:var(--cream); color:var(--ink); }
.nav-toggle{ display:none; }
@media (max-width:860px){
  header{ top:14px; }
  .logo-word{ display:none; }
  nav{
    display:none; position:absolute; top:60px; right:0; left:auto;
    flex-direction:column; gap:2px; align-items:stretch;
  }
  nav.open{ display:flex; }
  nav a{ text-align:center; }
  .nav-toggle{
    display:block; background:rgba(23,20,15,0.7); border:1px solid var(--line); color:var(--cream);
    font-family:'Space Mono'; font-size:11px; padding:12px 16px; cursor:pointer; letter-spacing:0.1em;
    border-radius:var(--r-pill);
  }
}

/* ===== HOME HERO ===== */
.hero{
  position:relative; min-height:90vh; display:flex; align-items:center;
  padding:140px 5vw 50px; gap:60px;
}
.hero-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:center; width:100%; }
.hero-photo{ aspect-ratio:4/5; }
.hero-tag{ font-family:'Space Mono'; font-size:12px; letter-spacing:0.18em; color:var(--rust-light); margin-bottom:22px; display:block;}
.hero h1{ font-size:clamp(40px,5.4vw,72px); }
.hero-sub{ margin-top:24px; color:var(--stone); font-size:16px; line-height:1.7; max-width:460px; }
.hero-actions{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } .hero-photo{ order:-1; aspect-ratio:16/10; } }

.btn{
  font-family:'Space Mono'; font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase;
  padding:16px 30px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--r-pill); border:1px solid var(--cream); color:var(--cream);
  transition:all 0.3s ease; background:none; cursor:pointer; min-width:140px; text-align:center;
}
.btn:hover{ background:var(--cream); color:var(--ink); }
.btn.solid{ background:var(--rust); border-color:var(--rust); color:var(--ink); font-weight:600;}
.btn.solid:hover{ background:var(--rust-light); border-color:var(--rust-light); }

/* ===== SECTION SCAFFOLD ===== */
section{ position:relative; padding:55px 5vw; max-width:1360px; margin-left:auto; margin-right:auto; }
.section-tight{ padding-top:15px; }

/* Default link colour, without this any link inside page content (legal
   pages, film write-ups, etc.) falls back to the browser's default blue,
   which reads poorly against this dark background. */
body a{ color:var(--rust-light) !important; }
body a:hover{ color:var(--cream) !important; }
.legal-content a, .stat-quote a{ text-decoration:underline; }
/* The email link in the homepage contact block should read as plain text,
   not shout as a bright link, it still works as a mailto, just quieter. */
.contact-split a[href^="mailto:"]{ color:var(--stone) !important; text-decoration:none; }
.contact-split a[href^="mailto:"]:hover{ color:var(--rust-light) !important; text-decoration:underline; }

/* Echo rings: the concentric-circle motif from the logo, used as a subtle
   background flourish behind hero sections. Add class "has-rings" to any
   section/div with position:relative to place them. */
/* Echo rings: soft concentric waves pulsing outward like an echo.
   They fade at the edges (no hard cut lines), sit behind all content,
   and are clipped by the section so they can never widen the page. */
.has-rings{ position:relative; }
.has-rings::before{
  content:''; position:absolute; top:50%; right:-120px; transform:translateY(-50%);
  width:620px; height:620px; pointer-events:none; z-index:0;
  background:
    radial-gradient(circle, transparent 0 96px,  rgba(31,92,99,0.32) 100px, transparent 118px),
    radial-gradient(circle, transparent 0 156px, rgba(193,98,44,0.24) 160px, transparent 182px),
    radial-gradient(circle, transparent 0 216px, rgba(244,239,230,0.14) 220px, transparent 246px),
    radial-gradient(circle, transparent 0 276px, rgba(31,92,99,0.1) 280px, transparent 308px);
  -webkit-mask-image:radial-gradient(circle, rgba(0,0,0,1) 0 35%, rgba(0,0,0,0) 78%);
  mask-image:radial-gradient(circle, rgba(0,0,0,1) 0 35%, rgba(0,0,0,0) 78%);
  animation:tep-echo-pulse 7s ease-in-out infinite;
}
/* Left-side variant so rings alternate down a page instead of stacking on one edge. */
.has-rings.rings-left::before{ right:auto; left:-120px; }
@keyframes tep-echo-pulse{
  0%, 100%{ transform:translateY(-50%) scale(1); opacity:0.9; }
  50%{ transform:translateY(-50%) scale(1.08); opacity:0.55; }
}
.has-rings > *{ position:relative; z-index:1; }
@media (max-width:800px){
  .has-rings::before{ width:380px; height:380px; right:-140px; opacity:0.55; }
}
@media (prefers-reduced-motion: reduce){
  .has-rings::before{ animation:none; }
}
.section-head{ max-width:640px; margin-bottom:32px; }
.section-head .tag{font-family:'Space Mono'; font-size:12px; color:var(--rust-light); letter-spacing:0.14em;}
.section-head h2{ font-size:clamp(30px,4.2vw,50px); margin-top:14px; }
.section-head p{color:var(--stone); font-size:15px; line-height:1.7; margin-top:16px;}
.section-head.center{ margin:0 auto 56px; text-align:center; }

/* ===== FEATURE CARD GRID (2x2 photo cards, heading top-left, text bottom-right) ===== */
.feature-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.feature-card{
  min-height:280px; padding:26px 28px; position:relative;
  display:flex; flex-direction:column; justify-content:space-between;
}
.feature-card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:1;
  background:linear-gradient(to bottom,
    rgba(15,13,9,0.78) 0%, rgba(15,13,9,0.2) 30%,
    transparent 50%,
    rgba(15,13,9,0.2) 70%, rgba(15,13,9,0.82) 100%);
}
.feature-card h3{
  position:relative; z-index:2; font-size:22px; color:var(--cream); line-height:1.25;
  align-self:flex-start; text-align:left; max-width:75%; margin:0;
}
.feature-card p{
  position:relative; z-index:2; font-size:13.5px; color:var(--cream-dim); line-height:1.6;
  align-self:flex-end; text-align:right; max-width:75%; margin:24px 0 0;
}
@media (max-width:760px){ .feature-grid{ grid-template-columns:1fr; } }

/* Equal-height columns: text blocks whose CTA buttons must line up regardless of copy length */
.equal-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; align-items:stretch; }
.equal-col{ display:flex; flex-direction:column; height:100%; }
.equal-col .btn{ min-width:110px; }
@media (max-width:860px){ .equal-cols{ grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:520px){ .equal-cols{ grid-template-columns:1fr !important; } }
.equal-col p{ flex:1 0 auto; }
.equal-col .btn{ margin-top:20px; align-self:flex-start; }

/* ===== PHOTO GRID (any number of images tiles evenly, no forced gaps) ===== */
.masonry{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); grid-auto-rows:210px; gap:16px; }
.masonry .ph{ aspect-ratio:auto; }
@media (max-width:760px){ .masonry{ grid-template-columns:repeat(2,1fr); grid-auto-rows:160px; } }

/* ===== STATS / TESTIMONIAL CARD ===== */
.stat-card{ background:var(--card); border-radius:var(--r-lg); border:1px solid var(--line); padding:60px; }
.stat-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:50px; align-items:center; }
.stat-quote{ font-family:'Fraunces'; font-weight:500; font-size:clamp(20px,2.4vw,28px); line-height:1.5; }
.stat-name{ margin-top:24px; font-family:'Space Mono'; font-size:12px; color:var(--rust-light); letter-spacing:0.08em; }
.stat-numbers{ display:flex; gap:40px; }
.stat-numbers .num{ font-family:'Fraunces'; font-size:clamp(36px,4vw,54px); color:var(--cream); }
.stat-numbers .label{ font-family:'Space Mono'; font-size:11px; color:var(--stone); letter-spacing:0.08em; text-transform:uppercase; margin-top:6px; }
@media (max-width:800px){ .stat-grid{ grid-template-columns:1fr; } .stat-card{ padding:36px; } }

/* ===== EVENTS TABS ===== */
.tabbar{ display:flex; gap:10px; margin-bottom:36px; flex-wrap:wrap; }
.tabbar button{
  font-family:'Space Mono'; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
  padding:12px 22px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--card);
  color:var(--cream); cursor:pointer; transition:all 0.3s ease;
}
.tabbar button.active{ background:var(--rust); border-color:var(--rust); color:var(--ink); }
.event-panel{ display:grid; grid-template-columns:1fr 1.3fr; gap:40px; align-items:stretch; background:var(--card); border-radius:var(--r-lg); border:1px solid var(--line); overflow:hidden; }
.event-photo{ border-radius:0; aspect-ratio:auto; min-height:280px; }
.event-info{ padding:40px; display:flex; flex-direction:column; justify-content:center; }
.event-info .loc{ font-family:'Space Mono'; font-size:12px; color:var(--rust-light); letter-spacing:0.08em; }
.event-info h4{ font-size:clamp(22px,2.6vw,30px); margin:14px 0 16px; }
.event-info .meta{ display:flex; gap:24px; margin-bottom:16px; }
.event-info .meta span{ font-family:'Space Mono'; font-size:11.5px; color:var(--stone); }
.event-info p{ color:var(--stone); font-size:14px; line-height:1.7; margin-bottom:24px; }
@media (max-width:800px){ .event-panel{ grid-template-columns:1fr; } .event-photo{ min-height:220px; } }

/* ===== CONTACT FORM (dark, split) ===== */
.contact-split{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.contact-form-card{ background:var(--card); border-radius:var(--r-lg); border:1px solid var(--line); padding:48px; }
form{ display:flex; flex-direction:column; gap:20px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
form label{ font-family:'Space Mono'; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; display:block; margin-bottom:8px; color:var(--stone); }
form input, form select, form textarea{
  width:100%; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:13px 16px; font-family:'Work Sans'; font-size:14.5px; color:var(--cream);
}
form input::placeholder, form textarea::placeholder{ color:var(--stone); }
form textarea{ resize:vertical; min-height:80px; }
form button{
  margin-top:6px; align-self:flex-start;
  background:var(--rust); color:var(--ink); border:none; border-radius:var(--r-pill);
  font-family:'Space Mono'; font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  padding:16px 32px; cursor:pointer; transition:background 0.3s ease;
}
form button:hover{ background:var(--rust-light); }
@media (max-width:860px){ .contact-split{ grid-template-columns:1fr; } .row2{ grid-template-columns:1fr; } }

/* ===== CONTACT CARDS (icon rows: Email / Phone / Studio) ===== */
.contact-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:20px; }
.contact-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:32px; }
.contact-card .ico{ width:40px; height:40px; border-radius:var(--r-pill); background:var(--rust); display:flex; align-items:center; justify-content:center; margin-bottom:20px; font-family:'Space Mono'; font-size:14px; color:var(--ink); }
.contact-card h5{ font-family:'Space Mono'; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--stone); margin-bottom:8px; }
.contact-card p{ font-size:14px; color:var(--cream-dim); margin-bottom:14px; line-height:1.6; }
.contact-card a{ color:var(--rust-light); text-decoration:none; font-size:14px; font-weight:600; }
@media (max-width:860px){ .contact-cards{ grid-template-columns:1fr; } }

/* ===== PILLARS (People/Honesty/Legacy/Craft tag pills + cards) ===== */
.tagpills{ display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }
.tagpills span{ font-family:'Space Mono'; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; padding:9px 18px; border-radius:var(--r-pill); border:1px solid var(--line); color:var(--stone); }

.pillars-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.pillar{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:32px 26px; }
.pillar .idx{ font-family:'Space Mono'; font-size:11px; color:var(--rust-light); }
.pillar h3{ font-size:20px; margin-top:16px; }
.pillar p{ font-size:13.5px; color:var(--stone); margin-top:10px; line-height:1.6; }
@media (max-width:900px){ .pillars-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .pillars-grid{ grid-template-columns:1fr; } }

/* ===== TEAM GRID ===== */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.team-card .ph{ aspect-ratio:4/5; margin-bottom:18px; }
.team-card h4{ font-size:19px; }
.team-card .role{ font-family:'Space Mono'; font-size:11px; color:var(--rust-light); letter-spacing:0.06em; margin:6px 0 12px; text-transform:uppercase; }
.team-card p{ font-size:13px; color:var(--stone); line-height:1.6; }
.team-social{ display:flex; gap:10px; margin-top:14px; }
.team-social a{ font-family:'Space Mono'; font-size:10px; color:var(--stone); text-decoration:none; letter-spacing:0.05em; }
.team-social a:hover{ color:var(--rust-light); }
@media (max-width:900px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }

/* ===== FILM CARDS (category + time + title + desc) ===== */
.films-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.film-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; position:relative; }
.film-card .ph{ aspect-ratio:16/10; border-radius:0; position:relative; }
.film-card .play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%; border:1px solid var(--cream); display:flex; align-items:center; justify-content:center; z-index:2; transition:all 0.3s ease; }
.film-card:hover .play{ background:var(--rust); border-color:var(--rust); }
.film-body{ padding:28px; }
.film-meta-row{ display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.film-meta-row .cat{ font-family:'Space Mono'; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--rust-light); }
.film-meta-row .time{ font-family:'Space Mono'; font-size:10.5px; color:var(--stone); }
.film-card h4{ font-size:20px; margin-bottom:10px; }
.film-card p{ font-size:13.5px; color:var(--stone); line-height:1.6; margin-bottom:16px; }
@media (max-width:760px){ .films-grid{ grid-template-columns:1fr; } }

/* Hover popup: contributor photo + write-up, revealed over the thumbnail on hover/focus */
.film-card .contributor-pop{
  position:absolute; inset:0; z-index:5; display:flex; gap:16px; align-items:center;
  padding:26px; background:rgba(15,13,9,0.94); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity 0.3s ease;
}
.film-card:hover .contributor-pop, .film-card:focus-within .contributor-pop{ opacity:1; pointer-events:auto; }
.contributor-pop .avatar{ width:64px; height:64px; border-radius:50%; flex-shrink:0; border:2px solid var(--rust); }
.contributor-pop .who{ font-family:'Fraunces'; font-size:16px; color:var(--cream); margin-bottom:6px; }
.contributor-pop .desc{ font-size:12.5px; color:var(--cream-dim); line-height:1.55; }

/* Multi-category filter chips (strand + feature tags) */
.filter-group{ margin-bottom:20px; }
.filter-group .label{ font-family:'Space Mono'; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--stone); margin-bottom:10px; display:block; }

/* ===== TABS COMPONENT (Portraits of Scotland) ===== */
.tabs-panel{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.tabs-list{ display:flex; flex-direction:column; gap:4px; }
.tabs-list button{
  text-align:left; background:none; border:none; color:var(--stone); cursor:pointer;
  padding:18px 0; border-bottom:1px solid var(--line); font-family:'Fraunces'; font-size:18px;
}
.tabs-list button .sub{ display:block; font-family:'Work Sans'; font-size:13px; color:var(--stone); margin-top:6px; font-weight:400; }
.tabs-list button.active{ color:var(--cream); }
.tabs-list button.active .sub{ color:var(--cream-dim); }
@media (max-width:800px){ .tabs-panel{ grid-template-columns:1fr; } .tabs-panel .ph{ order:-1; aspect-ratio:16/10; } }

/* ===== GALLERY (filter + cards) ===== */
.filter-row{ display:flex; gap:10px; margin-bottom:40px; flex-wrap:wrap; }
.filter-row button{
  font-family:'Space Mono'; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
  padding:11px 22px; border-radius:var(--r-pill); border:1px solid var(--line); background:none;
  color:var(--stone); cursor:pointer; transition:all 0.3s ease;
}
.filter-row button.active{ background:var(--cream); border-color:var(--cream); color:var(--ink); }
.gallery-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.gallery-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.gallery-card .ph{ aspect-ratio:4/3; border-radius:0; }
.gallery-card .gbody{ padding:26px; }
.gallery-card .cat{ font-family:'Space Mono'; font-size:10.5px; color:var(--rust-light); letter-spacing:0.08em; text-transform:uppercase; }
.gallery-card h4{ font-size:19px; margin:10px 0 8px; }
.gallery-card p{ font-size:13px; color:var(--stone); line-height:1.6; margin-bottom:14px; }
.gallery-card .who{ display:flex; justify-content:space-between; font-family:'Space Mono'; font-size:11px; color:var(--stone); border-top:1px solid var(--line); padding-top:14px; }
@media (max-width:900px){ .gallery-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .gallery-cards{ grid-template-columns:1fr; } }

/* ===== SERIES STRAND GRID (photo + title/sub cards) ===== */
.strand-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.strand-card{ min-height:260px; padding:30px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; }
.strand-card::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(to top, rgba(15,13,9,0.88) 0%, rgba(15,13,9,0.35) 55%, transparent 85%);
}
.strand-card .num{ position:relative; z-index:2; font-family:'Space Mono'; font-size:11px; color:var(--rust-light); letter-spacing:0.1em; margin-bottom:10px; }
.strand-card h3{ position:relative; z-index:2; font-size:22px; color:var(--cream); margin-bottom:10px; line-height:1.25; }
.strand-card p{ position:relative; z-index:2; font-size:13.5px; color:var(--cream-dim); margin-top:0; line-height:1.6; }
@media (max-width:900px){ .strand-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .strand-grid{ grid-template-columns:1fr; } }

/* ===== NOMINATE STRIP CTA ===== */
.nominate-strip{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:60px; text-align:center; }
.nominate-strip h2{ font-size:clamp(28px,4vw,44px); max-width:640px; margin:0 auto; }
.nominate-strip p{ color:var(--stone); font-size:15px; max-width:480px; margin:20px auto 32px; line-height:1.7; }

/* ===== MAD-LIBS FORM (Contact page) ===== */
.madlibs{ font-family:'Fraunces'; font-weight:500; font-size:clamp(20px,2.6vw,30px); line-height:2.3; max-width:820px; }
.madlibs input, .madlibs select{
  background:transparent; border:none; outline:none; font-family:'Fraunces'; font-weight:500; font-size:inherit; color:var(--cream);
  border-bottom:2px solid var(--rust); min-width:min(180px, 60vw); max-width:100%; padding:0 4px 4px;
}
.madlibs input::placeholder{ color:var(--stone); }
.consent{ display:flex; align-items:center; gap:10px; margin-top:36px; font-family:'Space Mono'; font-size:12px; color:var(--stone); }
.consent a{ color:var(--rust-light); }
.consent input{ width:16px; height:16px; }

/* ===== LEGAL / TEXT CONTENT PAGES ===== */
.legal-content{ max-width:760px; margin:0 auto; }
.legal-content h2{ font-size:clamp(22px,2.8vw,30px); margin:44px 0 16px; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content p{ color:var(--stone); font-size:15px; line-height:1.8; margin-bottom:16px; }
.legal-content ul{ color:var(--stone); font-size:15px; line-height:1.8; margin:0 0 16px 20px; }
.legal-content li{ margin-bottom:8px; }
.legal-content .updated{ font-family:'Space Mono'; font-size:12px; color:var(--stone); letter-spacing:0.06em; margin-bottom:36px; display:block; }

/* ===== PAGE HERO (inner pages, no split grid) ===== */
.page-hero{ padding:110px 5vw 30px; }
.page-hero h1{ max-width:800px; }
.page-hero > p{ max-width:640px; }
.page-hero .tag{ font-family:'Space Mono'; font-size:12px; letter-spacing:0.14em; color:var(--rust-light); }
.page-hero h1{ font-size:clamp(36px,5.6vw,64px); margin-top:16px; }
.page-hero p{ margin-top:20px; color:var(--stone); font-size:15.5px; line-height:1.7; max-width:520px; }

/* ===== NEWSLETTER STRIP ===== */
.newsletter{
  background:var(--card); border-radius:var(--r-lg); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  padding:50px; margin:0 auto 60px; width:calc(100% - 10vw); max-width:1224px;
}
.newsletter h3{ font-size:clamp(18px,2.2vw,26px); max-width:380px; font-family:'Fraunces'; }
.newsletter form{ flex-direction:row; gap:0; align-items:stretch; }
.newsletter input{ border-radius:var(--r-pill) 0 0 var(--r-pill); border:1px solid var(--line); border-right:none; background:var(--bg-soft); color:var(--cream); padding:14px 20px; font-family:'Work Sans'; min-width:min(240px, 55vw); flex:1; }
.newsletter button{ border-radius:0 var(--r-pill) var(--r-pill) 0; margin-top:0 !important; align-self:stretch; white-space:nowrap; }
@media (max-width:760px){ .newsletter{ flex-direction:column; align-items:flex-start; } .newsletter form{ width:100%; } .newsletter input{ flex:1; min-width:0; } }

/* ===== FOOTER (light cream) ===== */
footer{ background:var(--cream); color:var(--ink); padding:70px 5vw 30px; border-radius:var(--r-lg) var(--r-lg) 0 0; }
.footer-location{ font-family:'Space Mono'; font-size:12px; color:#6b6355; letter-spacing:0.08em; margin-bottom:10px; }
.footer-email{ font-family:'Fraunces'; font-size:clamp(22px,3vw,32px); color:var(--ink); text-decoration:none; }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:30px; padding-bottom:50px; border-bottom:1px solid rgba(23,20,15,0.12); }
.footer-cols{ display:flex; gap:60px; flex-wrap:wrap; }
.footer-col h5{ font-family:'Space Mono'; font-size:11px; letter-spacing:0.1em; color:#6b6355; margin-bottom:16px; text-transform:uppercase; }
.footer-col a{ display:block; color:var(--ink); text-decoration:none; font-size:14px; margin-bottom:10px; opacity:0.85; }
.footer-col a:hover{ color:var(--rust); opacity:1; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; margin-top:36px; flex-wrap:wrap; gap:16px; }
.footer-wordmark{ font-family:'Fraunces'; font-size:clamp(40px,8vw,110px); color:var(--ink); line-height:0.9; margin:30px 0; }
.footer-social{ display:flex; gap:16px; }
.footer-social a{ font-family:'Space Mono'; font-size:11px; color:var(--ink); text-decoration:none; letter-spacing:0.06em; }
.footer-social a:hover{ color:var(--rust); }
.footer-bottom span{ font-family:'Space Mono'; font-size:11px; color:#6b6355; }

/* ===== STAGGERED GRID REVEAL ===== */
.stagger > *{ opacity:0; transform:translateY(22px) scale(0.97); transition:opacity 0.5s ease, transform 0.5s ease; }
.stagger.in > *{ opacity:1; transform:translateY(0) scale(1); }
.stagger > *:nth-child(1){ transition-delay:0.03s; }
.stagger > *:nth-child(2){ transition-delay:0.09s; }
.stagger > *:nth-child(3){ transition-delay:0.15s; }
.stagger > *:nth-child(4){ transition-delay:0.21s; }
.stagger > *:nth-child(5){ transition-delay:0.27s; }
.stagger > *:nth-child(6){ transition-delay:0.33s; }
.stagger > *:nth-child(7){ transition-delay:0.39s; }
.stagger > *:nth-child(8){ transition-delay:0.45s; }
.stagger > *:nth-child(9){ transition-delay:0.51s; }
.stagger > *:nth-child(10){ transition-delay:0.57s; }
.stagger > *:nth-child(11){ transition-delay:0.63s; }
.stagger > *:nth-child(12){ transition-delay:0.69s; }

/* reveal animation */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; opacity:1; transform:none; }
  .stagger > *{ transition:none; opacity:1; transform:none; transition-delay:0s !important; }
  html{ scroll-behavior:auto; }
}

/* ===== Password-protected page notice / release forms ===== */
.form-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:48px; margin-bottom:20px; }
.release-form h3{ font-size:18px; margin:32px 0 16px; }
.release-form h3:first-child{ margin-top:0; }
.form-actions{ margin-top:30px; }
.form-note{ color:var(--stone); font-size:12.5px; margin-top:14px; line-height:1.6; }
@media (max-width:760px){ .form-card{ padding:26px; } }

/* ===== Shortcode fallback notice (plugin not active) ===== */
.tep-missing-plugin{ background:var(--card); border:1px dashed var(--rust); border-radius:var(--r-lg); padding:30px; color:var(--stone); font-size:14px; }

/* ===== Branded play button + film info popup (shared with plugin) ===== */
.ph .play{
  width:58px; height:58px; border-radius:50%;
  background:rgba(193,98,44,0.85); border:1px solid var(--rust-light); color:var(--cream);
  font-size:16px; padding-left:4px;
  box-shadow:0 0 0 0 rgba(193,98,44,0.4);
  animation:tep-play-echo 2.6s ease-out infinite;
}
.film-card:hover .play, .ph:hover .play{ background:var(--rust); }
@keyframes tep-play-echo{
  0%{ box-shadow:0 0 0 0 rgba(193,98,44,0.45), 0 0 0 0 rgba(193,98,44,0.25); }
  70%{ box-shadow:0 0 0 14px rgba(193,98,44,0), 0 0 0 26px rgba(193,98,44,0); }
  100%{ box-shadow:0 0 0 0 rgba(193,98,44,0), 0 0 0 0 rgba(193,98,44,0); }
}
@media (prefers-reduced-motion: reduce){ .ph .play{ animation:none; } }

/* Film thumbnails: show the whole uploaded image, scaled to fit, never cropped.
   The brand gradient fills any letterbox space around it. */
.film-card .ph .ph-photo, .ph[data-yt] .ph-photo{ object-fit:contain; }
.film-card .ph{ cursor:default; }
.film-card .ph[data-yt]:not([data-yt=""]), .ph[data-yt]:not([data-yt=""]){ cursor:pointer; }

/* About page "Everyday Scotland": strict 4x2 photo grid */
.about-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.about-grid .ph{ aspect-ratio:1/1; }
@media (max-width:900px){ .about-grid{ grid-template-columns:repeat(2,1fr); } }

/* When a tile holds a real photo, the tile sizes itself to the photo,
   so the gradient forms an even 12px frame that follows the image,
   instead of the photo floating inside a fixed-shape box. Empty
   placeholders keep their own set shapes. */
.ph:has(> .ph-photo){ aspect-ratio:auto !important; height:auto !important; padding:12px; }
.ph:has(> .ph-photo) > .ph-photo{ position:static; inset:auto; width:100%; height:auto; border-radius:10px; }

/* Film image: only the play button is clickable */
.film-card .ph[data-yt]:not([data-yt=""]){ cursor:default; }
.film-card .ph .play{ cursor:pointer; }

/* The hover panel is retired, film details live in the Info popup only */
.contributor-pop{ display:none !important; }

/* ===== Contact page: form + reassurance panel ===== */
.contact-wrap{ display:grid; grid-template-columns:1.25fr 1fr; gap:28px; align-items:start; }
.contact-form-card label{ display:block; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--stone); margin:0 0 8px; }
.contact-form-card label .optional{ text-transform:none; letter-spacing:0; color:var(--stone); opacity:0.8; }
.contact-form-card input[type="text"], .contact-form-card input[type="email"],
.contact-form-card select, .contact-form-card textarea{
  width:100%; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--cream); padding:14px 16px; font-family:'Work Sans'; font-size:14.5px;
}
.contact-form-card textarea{ resize:vertical; line-height:1.6; }
.contact-form-card input:focus, .contact-form-card select:focus, .contact-form-card textarea:focus{
  outline:none; border-color:var(--rust);
}
.contact-form-card .consent{ display:flex; gap:10px; align-items:flex-start; font-family:'Work Sans'; text-transform:none; letter-spacing:0; font-size:13px; color:var(--stone); line-height:1.6; }
.contact-form-card .consent input{ margin-top:3px; flex-shrink:0; width:auto; }
.contact-form-card .consent span{ display:inline; }
.contact-form-card .consent a{ white-space:nowrap; }
.contact-aside{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:36px; }
.contact-aside h3{ font-size:21px; margin-bottom:18px; }
.next-steps{ list-style:none; counter-reset:step; margin:0 0 20px; }
.next-steps li{ counter-increment:step; position:relative; padding:0 0 16px 44px; color:var(--stone); font-size:13.5px; line-height:1.65; }
.next-steps li strong{ color:var(--cream); display:block; margin-bottom:2px; }
.next-steps li::before{
  content:counter(step); position:absolute; left:0; top:0; width:28px; height:28px;
  border:1px solid var(--rust); border-radius:50%; color:var(--rust-light);
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Mono',monospace; font-size:12px;
}
.aside-note{ color:var(--stone); font-size:13px; line-height:1.65; border-top:1px solid var(--line); padding-top:18px; }
.aside-alt{ margin-top:20px; }
.aside-alt h4{ font-size:15px; margin-bottom:8px; }
.aside-alt p{ font-size:13.5px; line-height:1.7; }
.aside-alt span{ color:var(--stone); font-size:12.5px; }
@media (max-width:900px){ .contact-wrap{ grid-template-columns:1fr; } }

/* Strand dropdown: the open list was rendering light-on-light in some
   browsers. Tell the browser this is a dark control and colour the
   options explicitly so they're readable everywhere. */
.contact-form-card select{ color-scheme:dark; }
.contact-form-card select option{ background:var(--card); color:var(--cream); }