/*
Theme Name: Links Live Media
Theme URI: https://linkslivemedia.com
Author: Links Live Media
Description: Custom theme for Links Live Media -- dark broadcast-monitor design, built from the site redesign.
Version: 1.0
*/

/* Layout concept: a calibrated broadcast monitor — hairline scan-grid, slate-style
   section labels, SMPTE-bar accent stripe. Single dark theme, by design: this is a
   monitor, not a document. */
:root{
  /* Links Live Media approved brand palette (Brand Guide PDF): dark orange
     #F58025, grey #70706F, dark grey #171717. Headings use "Indoscreen" in the
     guide (a digital/LED-screen face); Orbitron substitutes until that font
     file is supplied. Body/sub-headings use "Poppins". */
  --bg:#141414;
  --bg-raised:#1c1c1c;
  --bg-card:#1a1a1a;
  --fg:#f2f0ea;
  --muted:#9a9a97;
  --line:rgba(242,240,234,0.12);
  --accent:#f58025;
  --accent-ink:#171717;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --display:'Orbitron', 'Arial Narrow', sans-serif;
  --body:'Poppins', system-ui, sans-serif;
  color-scheme: dark;
}
*{box-sizing:border-box;}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--body);
  line-height:1.5;
  padding-left:max(16px, env(safe-area-inset-left,0px));
  padding-right:max(16px, env(safe-area-inset-right,0px));
}
body::before{
  content:"";
  position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px);
  z-index:50; background:var(--bg);
}
a{color:inherit;}
img{max-width:100%;}
.wrap{max-width:1180px; margin:0 auto; width:100%;}
h1,h2,h3{font-family:var(--display); font-weight:700; letter-spacing:-0.01em; text-wrap:balance; margin:0;}
.eyebrow{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--accent); display:flex; align-items:center; gap:0.5em; margin-bottom:0.9em;
}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--accent); display:inline-block; animation:pulse 1.6s ease-in-out infinite;}
@media (prefers-reduced-motion: reduce){ .eyebrow .dot{animation:none;} }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:0.25;} }

/* ---- nav ---- */
header{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:40;
  background:rgba(10,12,13,0.88); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:0.9rem;}
.brand{display:inline-flex; align-items:center;}
.navlinks{display:flex; gap:1.6rem; font-family:var(--mono); font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; list-style:none; margin:0; padding:0;}
.navlinks a{text-decoration:none; color:var(--muted); transition:color 0.15s;}
.navlinks a:hover, .navlinks a:focus-visible{color:var(--fg);}
.btn{
  font-family:var(--mono); font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase;
  padding:0.65em 1.2em; border-radius:2px; text-decoration:none; display:inline-block;
  border:1px solid var(--accent);
}
.btn-solid{background:var(--accent); color:var(--accent-ink); font-weight:600;}
.btn-solid:hover, .btn-solid:focus-visible{background:#ffffff; border-color:#ffffff;}
.btn-outline{color:var(--fg); border-color:var(--line);}
.btn-outline:hover, .btn-outline:focus-visible{border-color:var(--accent); color:var(--accent);}
.navcta{display:none;}
.hamburger{background:none; border:1px solid var(--line); color:var(--fg); padding:0.5em 0.7em; font-family:var(--mono); border-radius:2px;}
@media (min-width:760px){
  .navlinks{display:flex;}
  .navcta{display:inline-block;}
  .hamburger{display:none;}
}
@media (max-width:759px){
  .navlinks{display:none;}
  .navlinks.open{
    display:flex; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; background:var(--bg-raised); padding:1.2rem max(16px,env(safe-area-inset-left,0px)) 1.4rem;
    border-bottom:1px solid var(--line); gap:1rem;
  }
}

/* ---- hero ---- */
.hero{padding-block:4.5rem 3.5rem; border-bottom:1px solid var(--line); position:relative; overflow:hidden;}
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:6px;
  background:repeating-linear-gradient(90deg,var(--accent) 0 8%, #3b3fb0 8% 16%, #ddd 16% 24%, #0a7a3a 24% 32%, var(--accent) 32% 40%, #3b3fb0 40% 48%, #ddd 48% 56%, #0a7a3a 56% 64%, var(--accent) 64% 72%, #3b3fb0 72% 80%, #ddd 80% 88%, #0a7a3a 88% 100%);
  opacity:0.55;
}
.hero h1{font-size:clamp(2.6rem,7vw,5.2rem); line-height:0.98;}
.hero .lede{max-width:40em; font-size:1.15rem; color:var(--muted); margin-top:1.1rem;}
.hero h1 .hero-sub{font-size:0.55em; display:block; margin-top:0.3em;}
.hero .ctas{display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem;}
.timecode{font-family:var(--mono); color:var(--muted); font-size:0.8rem; margin-top:2.2rem; letter-spacing:0.05em;}

/* ---- sections ---- */
section{padding-block:4rem; border-bottom:1px solid var(--line);}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; flex-wrap:wrap; margin-bottom:2.2rem;}
.section-head h2{font-size:clamp(1.9rem,4vw,2.6rem);}
.section-head p{color:var(--muted); max-width:34em; margin-top:0.6rem;}

/* studio */
.studio-photo{width:100%; aspect-ratio:16/8; object-fit:cover; border-radius:4px; display:block; margin-bottom:2.2rem;}
.studio-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:2.5rem;}
.tags{display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:1.4rem;}
.tag{font-family:var(--mono); font-size:0.72rem; letter-spacing:0.05em; text-transform:uppercase; border:1px solid var(--line); padding:0.5em 0.9em; border-radius:2px; color:var(--muted);}
.tags-label{font-family:var(--mono); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-top:1.8rem; margin-bottom:0.6rem;}
.statrow{display:flex; flex-wrap:wrap; gap:2.2rem; margin-top:1.8rem; padding-top:1.6rem; border-top:1px solid var(--line);}
.statrow .stat b{display:block; font-family:var(--mono); font-size:1.7rem; font-weight:500; color:var(--accent);}
.statrow .stat span{font-family:var(--mono); font-size:0.68rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--muted);}
.locatecard{background:var(--bg-card); border:1px solid var(--line); border-radius:4px; padding:1.6rem; min-width:0;}
.locatecard .label{font-family:var(--mono); font-size:0.7rem; color:var(--accent); text-transform:uppercase; letter-spacing:0.12em;}
.locatecard address{font-style:normal; margin-top:0.4rem; font-size:1.05rem;}
.locatecard hr{border:none; border-top:1px solid var(--line); margin:1.2rem 0;}

/* photo gallery */
.photogrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem;}
.photogrid figure{margin:0; border-radius:4px; overflow:hidden; border:1px solid var(--line); min-width:0;}
.photogrid img{display:block; width:100%; height:220px; object-fit:cover;}
.photogrid figcaption{font-family:var(--mono); font-size:0.68rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted); padding:0.6rem 0.8rem; background:var(--bg-card);}

/* services */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.card{background:var(--bg-card); padding:1.6rem; min-width:0;}
.card h3{font-family:var(--body); font-weight:700; font-size:1.05rem; margin-bottom:0.5rem;}
.card p{color:var(--muted); font-size:0.92rem; margin:0;}
@media (max-width:900px){ .cards{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .cards{grid-template-columns:1fr;} .studio-grid{grid-template-columns:1fr;} }

/* equipment */
.equip{display:grid; grid-template-columns:1.1fr 0.9fr; gap:2.5rem; align-items:start;}
.specpanel{background:var(--bg-raised); border:1px solid var(--line); border-radius:4px; padding:1.6rem; font-family:var(--mono); font-size:0.85rem; min-width:0;}
.specpanel .row{display:flex; justify-content:space-between; gap:1rem; padding-block:0.55rem; border-bottom:1px dashed var(--line);}
.specpanel .row:last-child{border-bottom:none;}
.specpanel .row span:first-child{color:var(--muted);}
.specpanel .row span:last-child{text-align:right;}
.specstack{display:flex; flex-direction:column; gap:1.5rem;}
.specpanel-cta{display:block; text-align:center; margin-top:1.1rem; font-size:0.72rem; padding:0.6em 1em;}
.pill{display:inline-block; font-family:var(--mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; background:var(--accent); color:var(--accent-ink); padding:0.35em 0.8em; border-radius:2px; margin-bottom:1rem; font-weight:600;}
@media (max-width:760px){ .equip{grid-template-columns:1fr;} }

/* who we work with */
.audience{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;}
.audience .item{border-left:2px solid var(--accent); padding-left:1rem; min-width:0;}
.audience h3{font-family:var(--body); font-weight:700; font-size:1rem;}
.audience p{color:var(--muted); font-size:0.9rem; margin-top:0.3rem;}
@media (max-width:760px){ .audience{grid-template-columns:1fr;} }

/* slider */
.slider{position:relative; display:flex; align-items:center; gap:0.8rem;}
.slider-track{display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding-bottom:0.3rem; -webkit-overflow-scrolling:touch;}
.slider-track::-webkit-scrollbar{height:6px;}
.slider-track::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px;}
.slider-track figure{flex:0 0 min(78vw,360px); scroll-snap-align:start; margin:0; border-radius:4px; overflow:hidden; border:1px solid var(--line);}
.slider-track img{display:block; width:100%; height:230px; object-fit:cover;}
.slider-track figcaption{font-family:var(--mono); font-size:0.68rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted); padding:0.6rem 0.8rem; background:var(--bg-card);}
.slider-btn{flex:0 0 auto; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--bg-card); color:var(--fg); font-size:1.3rem; line-height:1; cursor:pointer; display:none; align-items:center; justify-content:center;}
.slider-btn:hover{border-color:var(--accent); color:var(--accent);}
@media (min-width:760px){ .slider-btn{display:flex;} }

/* videos */
.videogrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; align-items:start;}
.videocard{min-width:0;}
.videoframe{position:relative; width:100%; aspect-ratio:16/9; border-radius:4px; overflow:hidden; border:1px solid var(--line); background:#000; cursor:pointer;}
.videoframe.is-short{aspect-ratio:9/16; max-width:260px; margin:0 auto;}
.videoframe img{width:100%; height:100%; object-fit:cover; display:block;}
.videoframe iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.playbtn{position:absolute; inset:0; margin:auto; width:56px; height:56px; border-radius:50%; background:rgba(20,20,20,0.6); border:1px solid rgba(242,240,234,0.4); display:flex; align-items:center; justify-content:center;}
.playbtn::after{content:""; width:0; height:0; border-style:solid; border-width:11px 0 11px 19px; border-color:transparent transparent transparent var(--fg); margin-left:4px;}
.videocard h3{font-family:var(--body); font-weight:700; font-size:0.95rem; margin-top:0.7rem;}
.videocard p{color:var(--muted); font-size:0.82rem; margin-top:0.2rem;}

/* team */
.team{display:grid; grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); gap:2.5rem;}
.member{display:grid; grid-template-columns:200px 1fr; gap:1.5rem; align-items:center;}
.member img{border-radius:4px; width:100%; height:auto; display:block;}
.member .bio h3{font-family:var(--body); font-weight:700; font-size:1.3rem;}
.member .bio .role{font-family:var(--mono); font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); margin-top:0.3rem;}
.member .bio p{color:var(--muted); margin-top:0.9rem; max-width:34em;}
@media (max-width:620px){ .member{grid-template-columns:1fr;} .member img{max-width:240px; margin:0 auto;} }

/* blog */
.posts{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;}
.post{min-width:0; border-top:1px solid var(--line); padding-top:1rem;}
.post .date{font-family:var(--mono); font-size:0.72rem; color:var(--accent); letter-spacing:0.08em; text-transform:uppercase;}
.post h3{font-family:var(--body); font-weight:700; font-size:1.05rem; margin-top:0.4rem;}
.post a{text-decoration:none;}
.post a:hover h3, .post a:focus-visible h3{color:var(--accent);}
@media (max-width:860px){ .posts{grid-template-columns:1fr;} }

/* cta band */
.ctaband{text-align:center; padding-block:4.5rem;}
.ctaband h2{font-size:clamp(2.2rem,5vw,3.4rem);}
.ctaband p{color:var(--muted); margin-top:0.8rem;}
.ctaband .ctas{display:flex; justify-content:center; gap:1rem; margin-top:1.8rem; flex-wrap:wrap;}

/* footer */
footer{padding-block:3rem; }
.footgrid{display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap;}
.footgrid .col{min-width:0;}
.footgrid .brand{display:block; margin-bottom:0.8rem;}
footer .navlinks{display:flex; flex-direction:column; gap:0.5rem;}
.copyline{font-family:var(--mono); font-size:0.75rem; color:var(--muted); margin-top:2.5rem; border-top:1px solid var(--line); padding-top:1.5rem;}
.copyemail{font-family:var(--mono); font-size:0.85rem; background:none; border:1px solid var(--line); color:var(--fg); padding:0.4em 0.7em; border-radius:2px; cursor:pointer;}
.copyemail:hover{border-color:var(--accent);}