/* ============================================================
   KIRK & GRANITE — RED & BLACK THEME
   Loads last and wins. Black-first, flat poster-red accents.
   Display face: Roc Grotesk (Adobe Fonts) with Archivo Black
   as fallback. Kit: use.typekit.net/bbg5kxz.css (weights 400/700).
   ============================================================ */

:root {
  /* New palette */
  --kg-black: #0B0A0A;      /* page ground */
  --kg-coal: #151313;       /* alternate dark panel */
  --kg-white: #FAF7F2;      /* primary text on dark */
  --kg-grey: #A8A19A;       /* secondary text on dark */
  --kg-red: #BE362D;        /* the red: flat poster red (StoryWorks-style) */
  --kg-red-bright: #F0695C; /* small text / accents on dark grounds */
  --kg-red-deep: #8E241D;   /* deep red ground (contact) */
  --kg-line: rgba(250, 247, 242, .14);

  /* Display stacks: real Roc Grotesk first, Archivo Black as fallback.
     Wide carries the wordmark and the Mak Siccar mark; standard width
     carries headings so long words and titles never overflow. */
  --display: "roc-grotesk-wide", "roc-grotesk", "Archivo Black", "Arial Black", Arial, sans-serif;
  --display-head: "roc-grotesk", "Archivo Black", "Arial Black", Arial, sans-serif;

  /* Remap legacy tokens so every stray usage falls in line */
  --serif: var(--display-head);
  --claret: var(--kg-red);
  --claret-d: var(--kg-red-deep);
  --ember: var(--kg-red-bright);
  --gold: var(--kg-red-bright);
  --granite: #8F8983;
  --line: var(--kg-line);
  --grain: none;
}

/* ---------- Ground ---------- */
body {
  background: var(--kg-black);
  color: var(--kg-white);
}

::selection { background: var(--kg-red); color: #fff; }

.skip-link { background: var(--kg-red); color: #fff; }

/* ---------- Type system: bold grotesque, all caps ---------- */
h1, h2, h3 {
  font-family: var(--display-head);
  font-weight: 700;
  font-synthesis-weight: none;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.02;
}

.eyebrow { color: var(--kg-red-bright); }
.sec-head .note { color: var(--kg-grey); }

/* ---------- Header + wordmark ---------- */
header.site {
  background: var(--kg-black);
  border-bottom: 1px solid var(--kg-line);
  color: var(--kg-white);
}

header.site.scrolled {
  background: rgba(11, 10, 10, .94);
  color: var(--kg-white);
  border-color: var(--kg-line);
  backdrop-filter: blur(10px);
}

.wordmark,
.foot .wordmark {
  display: inline-block;
  background: var(--kg-red);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-synthesis-weight: none;
  font-size: 16px;
  letter-spacing: .05em;
  line-height: 1;
  text-transform: uppercase;
  padding: 11px 14px 10px;
}

.wordmark .amp,
.foot .wordmark .amp,
header.site.scrolled .wordmark .amp {
  color: #fff;
  font-style: normal;
  padding: 0 .06em;
}

nav.primary a { color: #CFC8C1; }

/* ---------- Hero ---------- */
.hero { background: var(--kg-black); }
.hero-copy .eyebrow { color: var(--kg-red-bright); }

.hero h1 {
  font-size: clamp(36px, 3.8vw, 62px);
  line-height: 1;
  letter-spacing: 0;
  color: var(--kg-white);
  overflow-wrap: break-word;
}

.hero .lede { color: var(--kg-grey); }

.hero .btn { border-color: rgba(250, 247, 242, .55); }
.hero .btn.solid { background: var(--kg-red); border-color: var(--kg-red); }

.hero-visual { background: #191515; }
.hero-visual::after {
  background: linear-gradient(0deg, rgba(11, 10, 10, .66), transparent 38%);
}

/* ---------- Territory strip: solid red band ---------- */
.strip {
  background: var(--kg-red);
  color: #fff;
  border-bottom: 0;
  padding: 16px 0;
}
.strip .row { font-weight: 700; letter-spacing: .22em; }
.strip .row span.dot { color: rgba(255, 255, 255, .65); }

/* ---------- Current productions ---------- */
.current { background: var(--kg-coal); }
.now-list { border-top: 3px solid var(--kg-red); }
.now { border-bottom: 1px solid var(--kg-line); }
/* Pure fr columns so every row's venue and role line up exactly. */
@media (min-width: 961px) {
  .now { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .72fr); }
  .now .role { justify-self: end; text-align: right; white-space: normal; }
}
.now h3 { color: var(--kg-white); font-size: clamp(22px, 2.2vw, 31px); }
.now h3 .tag { color: var(--kg-red-bright); border-color: var(--kg-red-bright); }
.now .venue { color: var(--kg-grey); }
.now .role { color: var(--kg-red-bright); }

/* ---------- Production wall ---------- */
.work { background: var(--kg-black); }
.work .sec-head h2 { color: var(--kg-white); }
.work .sec-head .note { color: var(--kg-grey); }

.production-copy p { color: var(--kg-red-bright) !important; }
.production-copy h3 {
  font-family: var(--display-head) !important;
  font-weight: 700 !important;
  font-synthesis-weight: none;
  text-transform: uppercase;
  letter-spacing: .005em !important;
  font-size: clamp(19px, 1.7vw, 27px) !important;
  line-height: 1.04 !important;
}

.role-filters button:hover,
.role-filters button:focus-visible,
.role-filters button[aria-pressed="true"] { color: #fff; }

/* Crop nudges: sit each subject a little higher in the card */
.production-card:has(img[alt="Smalltown Boy artwork"]) > img { object-position: center 16% !important; transform: none !important; }
.production-card:has(img[alt="Fly More Than You Fall production photograph"]) > img { object-position: center 36% !important; }

.credit-number, .credit-role { color: var(--kg-red-bright); }
.credit h3 { font-size: clamp(24px, 2.4vw, 34px); }

/* ---------- Awards: red block, white type ---------- */
.awards { background: var(--kg-red); }
.awards h3 { color: #fff; font-size: clamp(28px, 3.2vw, 44px); }
.awards li { color: rgba(255, 250, 248, .92); border-top: 1px solid rgba(255, 255, 255, .35); font-weight: 500; }
.awards li b { color: #fff; }
.awards li em { font-style: normal; font-weight: 700; }

/* ---------- What comes next ---------- */
.development-index > h2 { color: var(--kg-white); }
.development-item { border-color: var(--kg-line) !important; }
.development-item .meta { color: var(--kg-red-bright); }
.development-item h3 { color: var(--kg-white); font-size: 21px; }
.development-item p { color: var(--kg-grey); }

/* ---------- About ---------- */
.about { background: var(--kg-coal); }
.about-photo figcaption { color: var(--kg-grey); }
.about-body > .eyebrow::after {
  color: var(--kg-white);
  font-family: var(--display-head);
  font-weight: 700;
  font-synthesis-weight: none;
  letter-spacing: .002em;
  font-size: clamp(22px, 2.5vw, 34px);
  line-height: 1.08;
}
.about-grid .lead.about-intro { color: #EDE9E3; }
.about-body p { color: var(--kg-grey); }

/* ---------- Creed: red block, white type (storyworks-style) ---------- */
.creed { background: var(--kg-red); }
.creed .gloss { color: rgba(255, 255, 255, .8); }
.creed .mark {
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  font-synthesis-weight: none;
  letter-spacing: 0;
  font-size: clamp(42px, 6.6vw, 96px);
}
.creed .say { color: rgba(255, 250, 248, .88); }

/* ---------- Founders ---------- */
.founders { background: var(--kg-black); }
.founders-lead { color: var(--kg-grey); }
.founder h3 { color: var(--kg-white); font-size: clamp(26px, 3vw, 38px); }
.founder .role { color: var(--kg-red-bright); }
.founder .home { color: var(--kg-grey); border-left: 1px solid var(--kg-line); }
.founder p { color: var(--kg-grey); }
.founder:nth-child(2) > div::after { color: var(--kg-red-bright); }

/* ---------- Services ---------- */
#services { background: var(--kg-coal); }
.services-grid { border-top: 3px solid var(--kg-red); }
.svc { border-color: var(--kg-line); }
.svc .no { color: var(--kg-red-bright); }
.svc h3 { color: var(--kg-white); font-size: clamp(21px, 2.3vw, 29px); }
.svc p { color: var(--kg-grey); }

/* ---------- Contact: deep red closer ---------- */
.contact { background: var(--kg-red-deep); }
.contact .eyebrow { color: #F5A9A0; }
.contact h2 { color: #fff; font-size: clamp(44px, 6.6vw, 96px); }
.contact a.mail {
  font-family: var(--sans);
  font-weight: 700;
  color: #fff;
  border-bottom: 2px solid rgba(255, 255, 255, .45);
}
.contact a.mail:hover { border-color: #fff; }
.contact-grid > div:first-child { border-top: 1px solid rgba(255, 255, 255, .3); }
.detail-block h4 { color: #F5A9A0; }
.detail-block p, .detail-block a { color: #F8ECEA; }

/* ---------- Footer ---------- */
footer.site {
  background: var(--kg-black);
  border-top: 1px solid var(--kg-line);
  color: var(--kg-grey);
}
.foot nav a { color: var(--kg-grey); }
.foot nav a:hover { color: var(--kg-white); }
.foot .copy { color: #7E7871; border-top: 1px solid var(--kg-line); }

/* ---------- Section rhythm helpers ---------- */
.sec-head h2 { font-size: clamp(34px, 4.6vw, 58px); color: var(--kg-white); }

/* ---------- Enquiry modal ---------- */
.enquiry-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 4, 4, .78);
  backdrop-filter: blur(4px);
}
.enquiry-overlay[hidden] { display: none; }
.enquiry-modal {
  position: relative;
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: clamp(28px, 4vw, 44px);
  background: var(--kg-coal);
  border-top: 4px solid var(--kg-red);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.enquiry-modal h3 { color: var(--kg-white); font-size: clamp(24px, 3vw, 34px); margin-bottom: 8px; }
.enquiry-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: 0;
  color: var(--kg-grey);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.enquiry-close:hover { color: #fff; }
#enquiry-form { margin-top: 22px; }
#enquiry-form label {
  display: block;
  margin-bottom: 18px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kg-grey);
}
#enquiry-form input,
#enquiry-form textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px 2px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(250, 247, 242, .3);
  color: var(--kg-white);
  font-family: var(--sans);
  font-size: 16px;
  outline: none;
  resize: vertical;
}
#enquiry-form input:focus,
#enquiry-form textarea:focus { border-bottom-color: var(--kg-red-bright); }
.enquiry-honey { display: none !important; }
#enquiry-form .enquiry-submit {
  margin-top: 6px;
  background: var(--kg-red);
  border: 1px solid var(--kg-red);
  color: #fff;
  cursor: pointer;
  border-radius: 0;
}
#enquiry-form .enquiry-submit:hover { background: var(--kg-red-bright); border-color: var(--kg-red-bright); }
#enquiry-form .enquiry-submit:disabled { opacity: .6; cursor: wait; }
.enquiry-status {
  margin: 16px 0 0;
  min-height: 1.3em;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--kg-red-bright);
}

/* ---------- Mobile menu ---------- */
@media (max-width: 680px) {
  nav.primary { background: var(--kg-black); color: var(--kg-white); }
  nav.primary a {
    font-family: var(--display-head);
    font-weight: 700;
    font-synthesis-weight: none;
    text-transform: uppercase;
    font-size: 26px;
    letter-spacing: .01em;
  }
  header.site.menu-active { border-color: var(--kg-line); }
  .wordmark { font-size: 14px; padding: 10px 12px 9px; }
  .hero h1 { font-size: clamp(30px, 8.5vw, 50px); }
  .creed .mark { font-size: clamp(36px, 11vw, 64px); }
  .contact h2 { font-size: clamp(38px, 11vw, 64px); }
}