/*
Theme Name: Cue Sheet
Theme URI: https://example.com
Author: Your Name
Author URI: https://example.com
Description: A dark, moody WordPress theme for theatre technicians — lighting, sound, and rigging professionals — built around a "cue sheet" presentation of production credits. Includes a custom Productions post type with role, venue, and company fields.
Version: 1.0.4
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: cue-sheet
License: GNU General Public License v2 or later
License URI: LICENSE
*/

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root{
  /* stage-black background, warm panel, tungsten amber signature,
     cool lighting-gel blue secondary, warm paper text */
  --stage-black: #0B0B0D;
  --panel:       #16151A;
  --panel-raised:#1D1B22;
  --line:        #29272E;

  --amber:       #E8A33D;
  --amber-dim:   #8A6425;
  --amber-glow:  rgba(232,163,61,.35);

  --gel-blue:    #4E7FA8;
  --gel-blue-dim:#2E4A5F;

  --paper:       #EDE8E0;
  --muted:       #8B8790;
  --muted-dim:   #55525A;

  --tape-red:    #B23A2E;

  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;

  --max-w: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 3px;
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
body{
  margin:0;
  background: var(--stage-black);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* faint texture: a stage floor / scrim grain so black isn't flat */
body{
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(232,163,61,.05), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0px, rgba(255,255,255,.012) 1px, transparent 1px, transparent 3px);
}
img{ max-width:100%; display:block; }
a{ color: var(--amber); text-decoration: none; }
a:hover{ text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}
h1,h2,h3,h4{
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 600;
  color: var(--paper);
  margin: 0 0 .5em;
}
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }

.container{
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.eyebrow{
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
}
.eyebrow::before{ content:"◆ "; }

.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family: var(--font-mono);
  font-size:.85rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:.85em 1.4em;
  border:1px solid var(--amber);
  color: var(--amber);
  border-radius: var(--radius);
  background: transparent;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn:hover{
  background: var(--amber);
  color: var(--stage-black);
  text-decoration:none;
  box-shadow: 0 0 24px var(--amber-glow);
}
.btn--ghost{ border-color: var(--line); color: var(--paper); }
.btn--ghost:hover{ background: var(--panel-raised); color: var(--paper); box-shadow:none; border-color: var(--muted); }

/* =========================================================
   SITE HEADER
   ========================================================= */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(11,11,13,.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.1rem 0;
}
.site-branding{ display:flex; flex-direction:column; line-height:1.1; }
.site-branding a{ color: var(--paper); }
.site-branding a:hover{ text-decoration:none; }
.site-title{
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.site-tagline{
  font-family: var(--font-mono);
  font-size:.7rem;
  color: var(--muted);
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-top:.15em;
}
.custom-logo-link img{ max-height:44px; width:auto; }

.main-navigation ul{ display:flex; gap: 1.9rem; }
.main-navigation a{
  font-family: var(--font-mono);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--muted);
}
.main-navigation a:hover, .main-navigation .current-menu-item > a{
  color: var(--amber);
  text-decoration:none;
}
.menu-toggle{
  display:none;
  background:none; border:1px solid var(--line); color:var(--paper);
  padding:.5em .7em; border-radius: var(--radius);
}
@media (max-width: 760px){
  .menu-toggle{ display:block; }
  .main-navigation{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background: var(--panel); border-bottom:1px solid var(--line);
  }
  .main-navigation.is-open{ display:block; }
  .main-navigation ul{ flex-direction:column; padding: 1rem var(--gutter) 1.5rem; gap: 1rem; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  padding: clamp(4rem,10vw,7.5rem) 0 clamp(3rem,7vw,5rem);
  position: relative;
  overflow:hidden;
  border-bottom: 1px solid var(--line);
}
.hero::after{
  /* a soft followspot wash behind the name */
  content:"";
  position:absolute; top:-20%; left:50%; transform:translateX(-50%);
  width: 900px; height:900px;
  background: radial-gradient(circle, var(--amber-glow) 0%, transparent 60%);
  pointer-events:none;
  opacity:.6;
}
.hero__inner{ position:relative; z-index:1; max-width: 760px; }
.hero__name{
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: .98;
  margin-bottom:.25em;
}
.hero__role{
  font-family: var(--font-mono);
  color: var(--gel-blue);
  font-size: clamp(1rem, 2vw, 1.15rem);
  letter-spacing:.05em;
  margin-bottom: 1.4em;
}
.hero__tagline{
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 56ch;
  margin-bottom: 2.2em;
}
.hero__actions{ display:flex; gap:1rem; flex-wrap:wrap; }

/* =========================================================
   SECTION SCAFFOLDING
   ========================================================= */
.section{ padding: clamp(3.5rem,7vw,5.5rem) 0; border-bottom: 1px solid var(--line); }
.section:last-of-type{ border-bottom:none; }
.section__head{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom: 2.2rem; }
.section__title{ font-size: clamp(1.6rem, 3.4vw, 2.1rem); margin:0; }
.section__count{ font-family: var(--font-mono); color: var(--muted-dim); font-size:.85rem; }

/* =========================================================
   CUE SHEET — production credits list (signature element)
   ========================================================= */
.cue-sheet{ border-top: 1px solid var(--line); }
.cue-sheet__row{
  --dim: 1;
  display:grid;
  grid-template-columns: 4.5rem 1fr auto auto;
  align-items:center;
  gap: 1.25rem;
  padding: 1.15rem 1rem;
  border-bottom: 1px solid var(--line);
  text-decoration:none;
  color: inherit;
  opacity: var(--dim);
  transition: opacity .25s ease, background .25s ease, transform .25s ease;
  position: relative;
}
.cue-sheet__row:hover, .cue-sheet__row:focus-visible{
  text-decoration:none;
  background: var(--panel);
  box-shadow: inset 3px 0 0 var(--amber), 0 0 30px var(--amber-glow);
}
.cue-sheet:hover .cue-sheet__row{ --dim: .38; }
.cue-sheet:hover .cue-sheet__row:hover{ --dim: 1; }

/* stub rows (title only, no content/photo, no external link): plain, non-interactive */
.cue-sheet__row--static{ cursor: default; }
.cue-sheet__row--static:hover, .cue-sheet__row--static:focus-visible{
  background: none;
  box-shadow: none;
  text-decoration: none;
}
.cue-sheet:hover .cue-sheet__row--static:hover{ --dim: .38; }

.cue-sheet__num{
  font-family: var(--font-mono);
  color: var(--amber);
  font-size: .95rem;
  letter-spacing:.04em;
}
.cue-sheet__main{ min-width:0; }
.cue-sheet__title{
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing:.02em;
  font-size: 1.15rem;
  color: var(--paper);
  margin:0 0 .2em;
}
.cue-sheet__meta{ display:block; font-family: var(--font-mono); font-size:.78rem; color: var(--muted); letter-spacing:.03em; margin-top:.15em; }
.cue-sheet__client{
  display:block;
  font-family: var(--font-mono);
  font-size:.85rem;
  color: var(--muted-dim);
  letter-spacing:.03em;
  margin-top:.15em;
}
.cue-sheet__role{
  justify-self:end;
  font-family: var(--font-mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color: var(--gel-blue);
  border: 1px solid var(--gel-blue-dim);
  padding:.3em .6em;
  border-radius: var(--radius);
  white-space: nowrap;
}
.cue-sheet__year{
  justify-self:end;
  font-family: var(--font-mono);
  color: var(--muted-dim);
  font-size:.85rem;
}
@media (max-width: 640px){
  .cue-sheet__row{ grid-template-columns: 3rem 1fr; row-gap:.4rem; }
  .cue-sheet__role, .cue-sheet__year{ justify-self:start; grid-column: 2; }
}

/* header row: Cue | Title | Role | Year */
.cue-sheet__row--header{
  padding: .6rem 1rem;
  cursor: default;
  opacity: .5 !important;
  font-family: var(--font-mono);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform: uppercase;
  color: var(--muted-dim);
  border-bottom: 1px solid var(--line);
}
.cue-sheet__row--header:hover, .cue-sheet__row--header:focus-visible{
  background: none;
  box-shadow: none;
  opacity: .5 !important;
}
.cue-sheet__row--header .cue-sheet__main,
.cue-sheet__row--header .cue-sheet__role,
.cue-sheet__row--header .cue-sheet__year{
  color: var(--muted-dim);
  font-family: var(--font-mono);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform: uppercase;
  border: none;
  padding: 0;
}
@media (max-width: 640px){
  .cue-sheet__row--header{ display:none; }
}

/* =========================================================
   SPECIALTIES — patch panel grid
   ========================================================= */
.patch-panel{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.patch-panel__cell{
  background: var(--panel);
  padding: 1.6rem 1.3rem;
  transition: background .2s ease;
}
.patch-panel__cell:hover{ background: var(--panel-raised); }
.patch-panel__label{
  font-family: var(--font-mono);
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--amber);
  display:block;
  margin-bottom:.5em;
}
.patch-panel__value{
  font-family: var(--font-display);
  text-transform:uppercase;
  font-size: 1.05rem;
  letter-spacing:.02em;
}
.patch-panel__jack{
  width:10px; height:10px; border-radius:50%;
  background: var(--gel-blue);
  display:inline-block; margin-right:.6em;
  box-shadow: 0 0 8px var(--gel-blue);
}

/* =========================================================
   PRODUCTION CARD (archive grid)
   ========================================================= */
.production-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  gap: 1.75rem;
}
.production-card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.production-card:hover{
  transform: translateY(-4px);
  border-color: var(--amber-dim);
  box-shadow: 0 10px 34px rgba(0,0,0,.5), 0 0 0 1px var(--amber-dim);
  text-decoration:none;
}
.production-card__media{ aspect-ratio: 4/3; background: var(--panel-raised); overflow:hidden; }
.production-card__media img{ width:100%; height:100%; object-fit:cover; }
.production-card__media--placeholder{
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); color: var(--muted-dim); font-size:.75rem; letter-spacing:.1em;
}
.production-card__body{ padding: 1.25rem 1.3rem 1.5rem; flex:1; display:flex; flex-direction:column; gap:.5rem; }
.production-card__role{ font-family: var(--font-mono); font-size:.7rem; color: var(--gel-blue); text-transform:uppercase; letter-spacing:.08em; }
.production-card__title{ font-size: 1.15rem; margin:0; color: var(--paper); }
.production-card__meta{ font-family: var(--font-mono); font-size:.75rem; color: var(--muted); margin-top:auto; padding-top:.5rem; }

/* role filter bar */
.role-filter{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom: 2.5rem; }
.role-filter button{
  font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  background: transparent; border:1px solid var(--line); color: var(--muted);
  padding:.5em 1em; border-radius: var(--radius);
  transition: all .18s ease;
}
.role-filter button:hover{ color: var(--paper); border-color: var(--muted); }
.role-filter button.is-active{ color: var(--stage-black); background: var(--amber); border-color: var(--amber); }

/* =========================================================
   SINGLE PRODUCTION
   ========================================================= */
.production-hero{ border-bottom: 1px solid var(--line); }
.production-hero__media{ width:100%; max-height: 480px; overflow:hidden; background: var(--panel); }
.production-hero__media img{ width:100%; height:100%; object-fit:cover; }
.production-hero__body{ padding: 2.5rem 0; }
.production-meta-table{ display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap:1.5rem; margin: 1.6rem 0 2rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding: 1.4rem 0; }
.production-meta-table dt{ font-family: var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color: var(--amber); margin-bottom:.35em; }
.production-meta-table dd{ margin:0; font-size:1.02rem; }
.production-gallery{ display:grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: .75rem; margin-top: 2rem; }
.production-gallery img{ border-radius: var(--radius); aspect-ratio: 4/3; object-fit:cover; }
.production-nav{ display:flex; justify-content:space-between; padding: 2rem 0; font-family: var(--font-mono); font-size:.85rem; }

/* =========================================================
   ENTRY CONTENT (pages, single generic content)
   ========================================================= */
.entry-content{ font-size: 1.05rem; }
.entry-content > *{ max-width: 68ch; }
.entry-content h2{ font-size:1.5rem; margin-top:2em; padding-bottom:.4em; border-bottom:1px solid var(--line); }
.entry-content h3{ font-size:1.15rem; margin-top:1.6em; color: var(--gel-blue); }
.entry-content p{ color: var(--paper); }
.entry-content a{ text-decoration: underline; text-underline-offset:.2em; }
.entry-content ul{ list-style: none; margin: 1em 0; }
.entry-content ul li{ padding-left:1.3em; position:relative; margin-bottom:.5em; }
.entry-content ul li::before{ content:"—"; position:absolute; left:0; color: var(--amber); }
.entry-content table{ width:100%; max-width:none; border-collapse: collapse; margin: 1.5em 0; font-size:.95rem; }
.entry-content th, .entry-content td{ text-align:left; padding:.65em .9em; border-bottom:1px solid var(--line); }
.entry-content th{ font-family: var(--font-mono); text-transform:uppercase; font-size:.72rem; letter-spacing:.08em; color: var(--amber); }
.entry-content blockquote{ border-left:3px solid var(--amber); padding-left:1.2em; color: var(--muted); font-style:italic; }
.page-title{ padding: 3rem 0 1rem; font-size: clamp(2rem,5vw,2.8rem); }

/* =========================================================
   CONTACT / CTA
   ========================================================= */
.contact-cta{ text-align:center; padding: clamp(4rem,8vw,6rem) 0; }
.contact-cta__title{ font-size: clamp(1.8rem,4vw,2.6rem); max-width:20ch; margin: 0 auto .5em; }
.contact-cta__list{ display:flex; justify-content:center; gap:1.5rem; flex-wrap:wrap; margin-top:2rem; }
.contact-cta__list a{ font-family: var(--font-mono); font-size:.9rem; color: var(--paper); border-bottom:1px solid var(--line); padding-bottom:.2em; }
.contact-cta__list a:hover{ color: var(--amber); border-color: var(--amber); text-decoration:none; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ padding: 2.5rem 0; }
.site-footer__inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.site-footer__credit{ font-family: var(--font-mono); font-size:.72rem; color: var(--muted-dim); letter-spacing:.04em; }
.site-footer__social{ display:flex; gap:1.2rem; }
.site-footer__social a{ font-family: var(--font-mono); font-size:.72rem; color: var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.site-footer__social a:hover{ color: var(--amber); }

/* =========================================================
   REVEAL ON SCROLL
   ========================================================= */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* screen-reader only utility */
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}