/*
  djpiyushbajaj.com
  One stylesheet for the website and the PDF profile (print.css adds page
  layout for the PDF). Components are styled once and look the same in both.

  The one loud element is the venue wall: venues set like a festival line-up
  poster. Everything else stays quiet so it can carry the page.
*/

@font-face { font-family: "Big Shoulders"; font-weight: 700; font-display: swap; src: url("../fonts/big-shoulders-display-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders"; font-weight: 800; font-display: swap; src: url("../fonts/big-shoulders-display-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders"; font-weight: 900; font-display: swap; src: url("../fonts/big-shoulders-display-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 400; font-display: swap; src: url("../fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 500; font-display: swap; src: url("../fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 600; font-display: swap; src: url("../fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); }

:root {
  --night: #10141d;      /* page */
  --stage: #181e2b;      /* raised bands */
  --rule: #2a3243;       /* hairlines */
  --amber: #ffc107;      /* brand: logo, residencies, actions */
  --amber-ink: #1a1404;  /* text on amber */
  --ink: #f1eee6;        /* body text */
  --muted: #a3aab9;      /* secondary text */

  --display: "Big Shoulders", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(16px, 4vw, 48px);
  --measure: 66ch;
  --max: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font: 400 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration-color: color-mix(in srgb, var(--amber) 70%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--amber); }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

h1, h2, h3 { margin: 0; font-weight: 400; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.skip { position: absolute; left: -999px; top: 0; background: var(--amber); color: var(--amber-ink); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }

/* Display type ------------------------------------------------------------ */

.display {
  font-family: var(--display);
  font-weight: 900;
  line-height: .88;
  letter-spacing: .005em;
  text-transform: uppercase;
}

.section-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1;
  letter-spacing: .01em;
  margin-bottom: 28px;
}

.section-title small {
  display: block;
  margin-top: 10px;
  font: 400 16px/1.4 var(--body);
  letter-spacing: 0;
  color: var(--muted);
}

.lede { font-size: 19px; color: var(--muted); max-width: var(--measure); }

/* Top strip and header ------------------------------------------------------ */

.strip { background: var(--amber); color: var(--amber-ink); font-size: 14px; font-weight: 500; }
.strip .wrap { display: flex; justify-content: space-between; gap: 16px; padding-top: 6px; padding-bottom: 6px; }
.strip a { text-decoration-color: var(--amber-ink); }
.strip a:hover { color: inherit; }

.masthead { border-bottom: 1px solid var(--rule); }
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }

.wordmark { font-family: var(--display); font-weight: 900; font-size: 28px; line-height: 1; text-decoration: none; text-transform: uppercase; letter-spacing: .02em; }
.wordmark span { color: var(--amber); }
.wordmark img { height: 48px; width: auto; }

.nav { display: flex; align-items: center; gap: 4px 22px; flex-wrap: wrap; justify-content: flex-end; }
.nav a { text-decoration: none; font-weight: 500; font-size: 15px; color: var(--muted); padding: 6px 0; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--amber); }

.nav-toggle { display: none; }

@media (max-width: 860px) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: 1px solid var(--rule); color: var(--ink);
    font: 500 15px var(--body); padding: 8px 14px; border-radius: 4px; cursor: pointer;
  }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--night); border-bottom: 1px solid var(--rule); padding: 8px var(--gutter) 16px; flex-direction: column; align-items: stretch; z-index: 5; }
  .nav a { font-size: 18px; padding: 10px 0; border-top: 1px solid var(--rule); }
  .masthead { position: relative; }
  .masthead.open .nav { display: flex; }
  .strip .wrap span:last-child { display: none; }
}

/* Buttons ------------------------------------------------------------------- */

.button {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--amber); color: var(--amber-ink);
  font: 600 16px/1 var(--body); text-decoration: none;
  padding: 14px 22px; border-radius: 3px; border: 2px solid var(--amber);
  cursor: pointer;
}
.button:hover { background: #ffd34d; border-color: #ffd34d; color: var(--amber-ink); }
.button.ghost { background: transparent; color: var(--ink); border-color: color-mix(in srgb, var(--ink) 55%, transparent); }
.button.ghost:hover { border-color: var(--amber); color: var(--amber); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Hero ---------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(86vh, 860px);
  display: flex; align-items: flex-end;
  background-color: var(--stage);
  background-size: cover; background-position: 70% 25%;
  isolation: isolate;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(16,20,29,.92) 0%, rgba(16,20,29,.55) 42%, rgba(16,20,29,0) 70%),
    linear-gradient(0deg, var(--night) 0%, rgba(16,20,29,0) 38%);
}
.hero .wrap { padding-top: 120px; padding-bottom: clamp(40px, 7vh, 80px); }
.hero h1 { font-size: clamp(64px, 9.5vw, 150px); max-width: 9ch; }
.hero .wrap > * { position: relative; }
.hero .roles { margin: 18px 0 6px; font-weight: 600; font-size: 18px; letter-spacing: .02em; }
.hero .headline { margin: 0 0 28px; font-size: 18px; color: var(--muted); }

@media (max-width: 640px) {
  .hero { background-position: 75% 20%; min-height: 78vh; }
  .hero::before { background: linear-gradient(0deg, var(--night) 8%, rgba(16,20,29,.55) 55%, rgba(16,20,29,.15) 100%); }
}

/* Next up: the next three dates, straight under the hero --------------------- */

.next-up { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.next-up ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.next-up li { padding: 22px 24px 22px 0; }
.next-up li + li { padding-left: 24px; border-left: 1px solid var(--rule); }
.next-up .when { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1; text-transform: uppercase; }
.next-up .when span { color: var(--amber); }
.next-up .what { margin-top: 8px; font-weight: 600; }
.next-up .where { color: var(--muted); font-size: 15px; }
@media (max-width: 760px) {
  .next-up ol { grid-template-columns: 1fr; }
  .next-up li, .next-up li + li { padding: 16px 0; border-left: 0; border-top: 1px solid var(--rule); }
  .next-up li:first-child { border-top: 0; }
}

/* Sections -------------------------------------------------------------------- */

.band { padding: clamp(56px, 9vw, 112px) 0; }
.band.raised { background: var(--stage); }
.band + .band:not(.raised) { padding-top: 0; }

.two-col { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

.more { margin-top: 28px; font-weight: 600; }

/* Residencies ----------------------------------------------------------------- */

.residencies { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 32px; }
.residency { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; padding: 20px 0; border-top: 2px solid var(--amber); }
.residency .logo { width: 64px; height: 64px; border-radius: 4px; background: #fff; object-fit: contain; }
.residency .logo.blank { display: grid; place-items: center; background: var(--rule); color: var(--amber); font-family: var(--display); font-weight: 900; font-size: 26px; }
.residency .when { color: var(--amber); font-weight: 600; font-size: 15px; }
.residency .venue { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1.05; text-transform: uppercase; margin: 2px 0 4px; }
.residency .meta { color: var(--muted); font-size: 15px; }

/* Upcoming gigs ---------------------------------------------------------------- */

.gig-list { list-style: none; margin: 0; padding: 0; }
.gig { display: grid; grid-template-columns: 112px minmax(0, 1fr) minmax(0, 14rem); gap: 6px 24px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--rule); }
.gig:last-child { border-bottom: 1px solid var(--rule); }
.gig time { white-space: nowrap; font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.1; text-transform: uppercase; }
.gig time span { color: var(--amber); }
.gig .title { font-weight: 600; }
.gig .at { color: var(--muted); font-size: 14px; margin-top: 2px; }
.gig .place a { text-decoration-color: var(--rule); }
.gig .place a:hover { text-decoration-color: var(--amber); }
.gig .place { color: var(--muted); font-size: 15px; }
@media (max-width: 640px) {
  .gig { grid-template-columns: 104px 1fr; gap: 2px 14px; }
  .gig .place { grid-column: 2; }
}
.empty { color: var(--muted); max-width: var(--measure); }

/* Venue wall: the line-up poster ------------------------------------------------ */

.wall-city { padding: 28px 0 32px; border-top: 1px solid var(--rule); }
.wall-city:first-of-type { border-top: 0; padding-top: 0; }
.wall-city h3 { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; font-weight: 600; font-size: 15px; color: var(--muted); }
.wall-city h3 strong { font-family: var(--display); font-weight: 900; font-size: 22px; color: var(--ink); text-transform: uppercase; letter-spacing: .04em; }
.wall { margin: 0; padding: 0; list-style: none; font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: 1.12; font-size: 23px; }
.wall li { display: inline; }
.wall li::after { content: "/"; color: var(--rule); font-weight: 700; margin: 0 .35em; }
.wall li:last-child::after { content: none; }
.wall li:nth-child(4n+2) { color: var(--muted); }
.wall li.resident { color: var(--amber); }
.wall-city.headline .wall { font-size: clamp(26px, 3.4vw, 44px); line-height: 1.04; }
.wall-key { color: var(--muted); font-size: 15px; margin-bottom: 28px; }
.wall-key span { color: var(--amber); font-weight: 600; }

.abroad { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px 40px; }
.country { padding: 18px 0; border-top: 1px solid var(--rule); break-inside: avoid; }
.country h3 { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1; text-transform: uppercase; margin-bottom: 10px; }
.country .flag { flex: none; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--rule); }
.country ul { list-style: none; margin: 0; padding: 0; }
.country li { padding: 3px 0; }
.country .city { color: var(--muted); font-size: 14px; display: block; line-height: 1.3; }

.counts { display: flex; flex-wrap: wrap; gap: 8px 40px; margin: 0 0 40px; }
.counts div { font-family: var(--display); font-weight: 900; font-size: clamp(48px, 7vw, 88px); line-height: .9; }
.counts div span { display: block; font: 500 15px/1.4 var(--body); color: var(--muted); margin-top: 6px; }

/* Awards -------------------------------------------------------------------------- */

.awards { margin: 0; }
.award-year { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0 24px; padding: 18px 0; border-top: 1px solid var(--rule); break-inside: avoid; }
.award-year dt { font-family: var(--display); font-weight: 900; font-size: 40px; line-height: 1; color: var(--amber); }
.award-year dd { margin: 0; }
.award-year ul { list-style: none; margin: 0; padding: 0; }
.award-year li { padding: 2px 0 8px; }
.award-year li strong { font-weight: 600; display: block; line-height: 1.35; }
.award-year li span { color: var(--muted); font-size: 15px; }
@media (max-width: 560px) { .award-year { grid-template-columns: 1fr; } .award-year dt { margin-bottom: 8px; } }

/* Clients ------------------------------------------------------------------------- */

.clients { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.clients li { min-width: 0; overflow: hidden; aspect-ratio: 3 / 2; background: #fff; border-radius: 4px; display: grid; place-items: center; padding: 14px; }
.clients img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }
.clients .name { color: #2a2f3a; font-weight: 600; font-size: 15px; text-align: center; line-height: 1.25; }

/* Press and gallery -------------------------------------------------------------- */

.press { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 40px; }
.press li { padding: 22px 0; border-top: 2px solid var(--amber); }
.press blockquote { margin: 0 0 12px; font-size: 19px; line-height: 1.5; }
.press .source { color: var(--muted); font-size: 15px; }
.press .source strong { color: var(--ink); font-weight: 600; }
.press img { margin-bottom: 14px; border-radius: 3px; }

.gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.gallery a { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px; background: var(--stage); }
.gallery img { width: 100%; height: 100%; object-fit: cover; }

/* Inner pages: photo column + text (shape matches the Backgrounds tab) ---------- */

.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: calc(100vh - 110px); }
.split .photo { background-color: var(--stage); background-size: cover; background-position: center 20%; position: sticky; top: 0; height: 100vh; max-height: 1100px; }
.split .text { padding: clamp(40px, 7vw, 96px) var(--gutter) 96px clamp(28px, 5vw, 80px); max-width: calc(var(--measure) + 160px); }
.split.no-photo { grid-template-columns: 1fr; }
.split.no-photo .text { margin: 0 auto; max-width: calc(var(--measure) + 2 * var(--gutter)); padding-left: var(--gutter); }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split .photo { position: relative; height: 58vh; background-position: center 18%; }
  .split .text { padding-left: var(--gutter); }
}

.page-title { font-size: clamp(64px, 10vw, 128px); margin-bottom: 28px; }

.banner { min-height: 44vh; display: flex; align-items: flex-end; background-color: var(--stage); background-size: cover; background-position: center 30%; position: relative; isolation: isolate; }
.banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--night) 0%, rgba(16,20,29,.35) 60%, rgba(16,20,29,.15) 100%); }
.banner .wrap { padding-bottom: 32px; }
.banner .page-title { margin: 0; }

.prose { max-width: var(--measure); }
.prose h2 { font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1.05; margin: 1.8em 0 .5em; }
.prose h3 { font-weight: 600; font-size: 19px; margin: 1.6em 0 .3em; }
.prose p:first-child { font-size: 20px; line-height: 1.55; }
.prose ul { padding-left: 1.2em; }
.prose table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: 16px; }
.prose th, .prose td { text-align: left; padding: 9px 12px 9px 0; border-top: 1px solid var(--rule); }
.prose th { color: var(--muted); font-weight: 500; }
.prose td:first-child { font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--amber); }

/* New Year's Eve editions --------------------------------------------------------- */

.editions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0 32px; }
.editions li { padding: 16px 0 20px; border-top: 1px solid var(--rule); }
.editions .year { font-family: var(--display); font-weight: 900; font-size: 40px; line-height: 1; color: var(--amber); }
.editions .venue { font-weight: 600; margin-top: 6px; line-height: 1.3; }
.editions .meta { color: var(--muted); font-size: 15px; }
.editions .note { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--amber-ink); background: var(--amber); padding: 1px 8px; border-radius: 2px; }

/* Contact ------------------------------------------------------------------------ */

.contact-lines { list-style: none; padding: 0; margin: 0 0 32px; }
.contact-lines li { padding: 6px 0; }
.contact-lines span { color: var(--muted); display: inline-block; min-width: 6.5rem; }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; max-width: 720px; }
.form .full { grid-column: 1 / -1; }
.form label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.form input, .form select, .form textarea {
  width: 100%; font: 400 16px/1.4 var(--body); color: var(--ink);
  background: var(--stage); border: 1px solid var(--rule); border-radius: 3px; padding: 12px 14px;
}
.form textarea { min-height: 150px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--amber); outline-offset: 0; border-color: transparent; }
.form .error { color: #ff8f7a; font-size: 14px; margin-top: 6px; }
.form .hp { position: absolute; left: -5000px; }
.notice { border-left: 3px solid var(--amber); padding: 12px 16px; background: var(--stage); margin-bottom: 28px; max-width: 720px; }
@media (max-width: 640px) { .form { grid-template-columns: 1fr; } }

/* Footer --------------------------------------------------------------------------- */

.footer { border-top: 1px solid var(--rule); padding: 48px 0 40px; color: var(--muted); font-size: 15px; }
.footer .wrap { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.footer h2 { font-family: var(--display); font-weight: 900; font-size: 34px; line-height: 1; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { padding: 3px 0; }
.footer a { text-decoration: none; }
.footer .small { grid-column: 1 / -1; font-size: 13px; padding-top: 24px; border-top: 1px solid var(--rule); }
@media (max-width: 760px) { .footer .wrap { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* Floating menu: the header stays at the top while scrolling ------------------- */

.masthead { position: sticky; top: 0; z-index: 20; background: rgba(16, 20, 29, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.split .photo { top: 73px; height: calc(100vh - 73px); }
[id] { scroll-margin-top: 96px; }
@media (max-width: 860px) {
  .split .photo { top: auto; height: 58vh; }
}