/* ============================================================
   MIKE KEENAN — mikekeenan.co.uk
   Night & day theme: dark "stage" for comedy, light "day" for
   A Presenter Walks Into a Boardroom.

   COLOURS (change here to retheme the whole site)
   ============================================================ */
:root {
  --ink: #16130f;        /* near-black background */
  --paper: #f5efe3;      /* warm off-white */
  --amber: #e8b04b;      /* accent */
  --amber-dark: #a4611c; /* accent on light backgrounds */
  --muted: #b8ad98;      /* muted text on dark */
  --muted-light: #6d6355;/* muted text on light */
  --line: #453e32;       /* hairlines on dark */
  --line-light: #d8cfba; /* hairlines on light */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: 'Karla', Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

h1, h2, h3, .display {
  font-family: 'Bricolage Grotesque', Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  margin: 0;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--amber); }
img { display: block; max-width: 100%; }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: 48px; padding-right: 48px; }

/* ---------- Nav ---------- */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 48px; max-width: 1200px; margin: 0 auto;
}
.nav .logo { font: 800 18px 'Bricolage Grotesque', sans-serif; letter-spacing: 0.06em; }
.nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav a { font: 600 14px 'Bricolage Grotesque', sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.nav a:hover, .nav a.active { color: var(--paper); }

/* ---------- Hero ---------- */
.hero { padding-top: 32px; padding-bottom: 56px; }
.hero h1 {
  font-size: clamp(64px, 11vw, 128px);
  font-weight: 800; line-height: 0.92; letter-spacing: -0.03em;
  margin-bottom: 8px;
}
.hero .strap {
  font: 600 18px 'Bricolage Grotesque', sans-serif;
  color: var(--amber); letter-spacing: 0.14em; text-transform: uppercase;
  margin: 0 0 36px;
}
.hero-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.hero-photo {
  width: 100%; height: 440px; object-fit: cover;
  object-position: 50% 0%;   /* <-- keeps the head in frame; adjust % to re-crop */
  border-radius: 4px; filter: grayscale(1) contrast(1.05);
}
.hero-cards { display: flex; flex-direction: column; gap: 16px; }
.quote-card {
  flex: 1; border-radius: 4px; padding: 26px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.quote-card.solid { background: var(--amber); color: var(--ink); }
.quote-card.outline { border: 1px solid var(--line); }
.quote-card .q {
  font: 800 30px/1.05 'Bricolage Grotesque', sans-serif;
  letter-spacing: -0.01em; text-transform: uppercase; margin: 0;
}
.quote-card .who {
  font: 700 13px 'Bricolage Grotesque', sans-serif;
  letter-spacing: 0.12em; margin: 16px 0 0;
}
.quote-card.outline .who { color: var(--muted); font-weight: 600; letter-spacing: 0.1em; }
.quote-card .aside { letter-spacing: 0; text-transform: none; font-weight: 400; }

/* ---------- Quote ticker ---------- */
.ticker {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 18px 24px; text-align: center;
}
.ticker p {
  font: 600 17px 'Bricolage Grotesque', sans-serif;
  color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; margin: 0;
}

/* ---------- Section shells ---------- */
.section { padding-top: 72px; padding-bottom: 72px; }
.section-title { font-size: 44px; font-weight: 800; line-height: 1; }
.section-title .dot { color: var(--amber); }
.kicker {
	font: 700 19px 'Bricolage Grotesque', sans-serif;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--amber);
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 16px;
}
.split { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start; }

/* ---------- About ---------- */
.about-copy p { margin: 0 0 16px; }
.about-copy .muted { color: var(--muted); font-size: 16px; }
.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 32px; }
.photo-grid img { width: 100%; height: 220px; object-fit: cover; border-radius: 4px; }

/* ---------- Video ---------- */
.video-frame {
  aspect-ratio: 16 / 9; width: 100%; border: 0; border-radius: 4px;
  background: #000;
}

/* ---------- Press quotes ---------- */
.press-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; border-top: 1px solid var(--line); }
.press-list .row {
  display: flex; justify-content: space-between; gap: 24px; align-items: baseline;
  border-bottom: 1px solid var(--line); padding: 14px 0;
}
.press-list .quote { font: 600 17px 'Bricolage Grotesque', sans-serif; }
.press-list .src { font: 400 14px Karla, sans-serif; color: var(--muted); text-align: right; white-space: nowrap; }

/* ---------- Gigs ---------- */
.gig-list { border-top: 1px solid var(--line); }
.gig {
  display: grid; grid-template-columns: 140px 1fr 160px; gap: 24px;
  padding: 16px 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.gig .date { font: 700 17px 'Bricolage Grotesque', sans-serif; color: var(--amber); }
.gig .venue { font: 600 18px 'Bricolage Grotesque', sans-serif; }
.gig .tickets { font: 600 13px 'Bricolage Grotesque', sans-serif; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
.gig .tickets:hover { color: var(--amber); }

/* ---------- Boardroom (light "day" section) ---------- */
.boardroom { background: var(--paper); color: var(--ink); padding: 72px 0; }
.boardroom .kicker { color: var(--amber-dark); }
.boardroom h2 { font-size: clamp(40px, 5vw, 56px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 20px; max-width: 900px; }
.boardroom .lede { font-size: 19px; margin: 0 0 16px; }
.boardroom .muted { color: var(--muted-light); margin: 0 0 28px; }
.boardroom-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; }
.boardroom h3 {
  font-size: 16px; letter-spacing: 0.1em; margin: 32px 0 10px;
  color: var(--amber-dark);
}
.boardroom ul { margin: 0; padding-left: 20px; }
.boardroom li { margin-bottom: 6px; }

.price-table { display: grid; }
.price-row {
  border-bottom: 1px solid var(--line-light); padding: 14px 0;
}
.price-row:last-child { border-bottom: 0; }
.price-row .top { display: flex; justify-content: space-between; gap: 16px; font: 600 16px 'Bricolage Grotesque', sans-serif; }
.price-row .price { color: var(--amber-dark); white-space: nowrap; }
.price-row .desc { font-size: 14px; color: var(--muted-light); margin: 4px 0 0; }

.btn {
  display: inline-block; background: var(--ink); color: var(--paper);
  font: 700 15px 'Bricolage Grotesque', sans-serif; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 14px 26px; border-radius: 4px; border: 0; cursor: pointer;
}
.btn:hover { background: var(--amber-dark); color: var(--paper); }
.btn.on-dark { background: var(--amber); color: var(--ink); }
.btn.on-dark:hover { background: var(--paper); }

/* ---------- Contact / footer ---------- */
.contact { padding-top: 72px; padding-bottom: 56px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.contact .details { color: var(--muted); }
.contact .details a:hover { color: var(--amber); }
.mailing form { display: flex; gap: 10px; margin-top: 12px; }
.mailing input[type="email"] {
  flex: 1; background: transparent; border: 1px solid var(--line);
  border-radius: 4px; padding: 12px 18px; font: 400 14px Karla, sans-serif;
  color: var(--paper);
}
.mailing input::placeholder { color: #7a7161; }
.footnote { font-size: 13px; color: #7a7161; margin-top: 40px; border-top: 1px solid var(--line); padding-top: 20px; }

/* ---------- Small screens ---------- */
@media (max-width: 900px) {
  .wrap { padding-left: 24px; padding-right: 24px; }
  .nav { padding: 20px 24px; }
  .nav ul { gap: 18px; }
  .hero-grid, .split, .boardroom-grid, .contact-grid, .press-list, .photo-grid { grid-template-columns: 1fr; }
  .hero-photo { height: 360px; }
  .gig { grid-template-columns: 90px 1fr; }
  .gig .tickets { grid-column: 2; }
}