/* ═══════════════════════════════════════════════════════════
   humusic — style.css
   The publication. Editorial spreads, hanging numerals, ruled
   bands. Content is set left and dense; nothing is centred.
   ═══════════════════════════════════════════════════════════ */

[hidden] { display: none !important; }

.press { position: relative; }

main { position: relative; z-index: 1; }

/* ──────────────────────────────────────────────────────────
   MASTHEAD
   ────────────────────────────────────────────────────────── */
.masthead {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--s8);
  padding: var(--s3) var(--s8);
  padding-top: calc(var(--s3) + var(--sa-t));
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: var(--rule);
}

.masthead__brand { display: flex; align-items: center; gap: var(--s3); }
.masthead__brand .wordmark { font-size: var(--fs-21); }

.masthead__nav {
  display: flex;
  gap: var(--s6);
  margin-right: auto;
}
.masthead__nav a {
  font-family: var(--mono);
  font-size: var(--fs-11);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color var(--t1) var(--ease), border-color var(--t1) var(--ease);
}
.masthead__nav a:hover,
.masthead__nav a[aria-current='true'] { color: var(--ink); border-bottom-color: var(--ink); }

.masthead__cta { height: 34px; }

.masthead__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  margin-left: auto;
  border: var(--rule);
  padding: 0 8px;
}
.masthead__toggle span { display: block; height: 1.5px; background: var(--ink); }
.masthead__toggle[aria-expanded='true'] { background: var(--ink); }
.masthead__toggle[aria-expanded='true'] span { background: var(--paper); }

.drawer {
  position: sticky;
  top: 0;
  z-index: 29;
  display: flex;
  flex-direction: column;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: var(--rule);
}
.drawer a {
  padding: var(--s4) var(--s6);
  border-bottom: var(--rule-hair);
  font-family: var(--mono);
  font-size: var(--fs-12);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.drawer a:last-child { border-bottom: none; }
.drawer__cta { background: var(--blue); color: #fff; }

/* ──────────────────────────────────────────────────────────
   OPENING SPREAD — asymmetric; text set hard left
   ────────────────────────────────────────────────────────── */
.spread {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr);
  gap: var(--s16);
  align-items: start;
  padding: var(--s20) var(--s8) var(--s16);
  border-bottom: var(--rule);
}

.spread__folio {
  padding-bottom: var(--s3);
  border-bottom: var(--rule);
  margin-bottom: var(--s8);
}

.spread__lede {
  font-size: clamp(3rem, 8.5vw, 7.5rem);
  margin-bottom: var(--s8);
}
.spread__lede em { font-style: italic; color: var(--blue-deep); }

.spread__deck {
  max-width: 46ch;
  font-size: var(--fs-17);
  line-height: 1.62;
  color: var(--ink-2);
  padding-top: var(--s5);
  border-top: var(--rule-hair);
}

.spread__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s8);
}

.spread__fine { margin-top: var(--s5); }

/* Specification panel — glass, straddling the blue field */
.spec { padding: var(--s5); }
.spec__title {
  padding-bottom: var(--s3);
  border-bottom: var(--rule);
  color: var(--ink);
}
.spec .rows { border-top: none; }
.spec .row:last-child { border-bottom: none; }
.spec__note {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: var(--rule);
  font-size: var(--fs-12);
  line-height: 1.6;
  color: var(--ink-2);
}

/* ──────────────────────────────────────────────────────────
   RUNNING RULE
   ────────────────────────────────────────────────────────── */
.ticker {
  overflow: hidden;
  border-bottom: var(--rule);
  background: var(--ink);
  padding-block: var(--s3);
}
/* The strip is built from identical groups laid end to end, and the
   animation shifts it by exactly one group's width — at which point the
   next group is standing precisely where the last one began, so the loop
   has no seam to see. The old keyframe shifted by -50% of the track, which
   is only the same distance when the track holds exactly two copies; on a
   wide desktop two copies are narrower than the window, so the strip ran
   out mid-scroll and the text reappeared out of nowhere on the right.

   The shift and the duration are measured in script.js, because only the
   browser knows how wide the words actually are once the fonts have
   loaded. Duration is derived from the width, so the speed stays the same
   however many copies it took to cover the screen. */
.ticker__track {
  display: flex;
  width: max-content;
}
.ticker__track.is-live {
  animation: ticker var(--ticker-duration, 34s) linear infinite;
  /* For a left-to-right drift instead, add: animation-direction: reverse; */
}
/* No gap between groups — the spacing that separates one group from the
   next belongs to the group, or the wrap would land a half-gap out of step
   on every cycle and creep sideways over time. */
.ticker__group {
  display: flex;
  align-items: center;
  gap: var(--s6);
  padding-right: var(--s6);
}
.ticker__track span {
  font-family: var(--mono);
  font-size: var(--fs-11);
  font-weight: var(--w-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
}
.ticker__track i { color: var(--blue-lift); font-style: normal; }
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(var(--ticker-shift, 50%) * -1)); }
}

/* ──────────────────────────────────────────────────────────
   BANDS
   ────────────────────────────────────────────────────────── */
.band {
  padding: var(--s16) var(--s8);
  border-bottom: var(--rule);
}

.band__head {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  flex-wrap: wrap;
  padding-bottom: var(--s4);
  border-bottom: var(--rule);
  margin-bottom: var(--s10);
}
.band__head .seq { color: var(--blue-deep); }
.band__head h2 { font-size: var(--fs-11); color: var(--ink); }
.band__kicker {
  margin-left: auto;
  font-size: clamp(var(--fs-28), 4vw, var(--fs-40));
  font-style: italic;
}

.band--dark {
  background: var(--ink);
  color: var(--paper);
}
.band--dark .band__head { border-color: rgba(237, 232, 222, 0.3); }
.band--dark .band__head h2 { color: var(--paper); }
.band--dark .band__head .seq { color: var(--blue-lift); }
.band--dark .label { color: var(--ink-4); }

/* ──────────────────────────────────────────────────────────
   INDEX ENTRIES — hanging numerals, dense two-column set
   ────────────────────────────────────────────────────────── */
.entries {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s16);
  border-top: var(--rule-hair);
}

.entry {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: var(--s4);
  padding: var(--s6) 0;
  border-bottom: var(--rule-hair);
}

.entry__num {
  font-size: var(--fs-12);
  color: var(--blue-deep);
  font-variant-numeric: tabular-nums;
  padding-top: 3px;
}

.entry__body h3 {
  font-family: var(--display);
  font-size: var(--fs-28);
  font-weight: var(--w-medium);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: var(--s2);
}
.entry__body p {
  font-size: var(--fs-13);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 44ch;
}

/* ──────────────────────────────────────────────────────────
   METHOD — three ruled columns
   ────────────────────────────────────────────────────────── */
.method {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.method__step {
  padding: 0 var(--s6);
  border-left: 1px solid rgba(237, 232, 222, 0.22);
}
.method__step:first-child { padding-left: 0; border-left: none; }
.method__step:last-child { padding-right: 0; }

.method__numeral {
  font-size: var(--fs-40);
  color: var(--blue-lift);
  font-style: italic;
  margin-bottom: var(--s4);
}

.method__step h3 {
  font-family: var(--display);
  font-size: var(--fs-28);
  font-weight: var(--w-medium);
  letter-spacing: -0.02em;
  margin-bottom: var(--s3);
}
.method__step p {
  font-size: var(--fs-13);
  line-height: 1.7;
  color: rgba(237, 232, 222, 0.72);
}

/* ──────────────────────────────────────────────────────────
   ORIGIN
   ────────────────────────────────────────────────────────── */
.origin {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.9fr);
  gap: var(--s16);
  align-items: start;
}

.origin__standfirst {
  font-family: var(--display);
  font-size: clamp(var(--fs-21), 2.6vw, var(--fs-28));
  line-height: 1.24;
  letter-spacing: -0.015em;
  margin-bottom: var(--s6);
  padding-bottom: var(--s6);
  border-bottom: var(--rule);
}
.origin__text p + p { margin-top: var(--s4); }
.origin__text p {
  font-size: var(--fs-15);
  line-height: 1.68;
  color: var(--ink-2);
  max-width: 58ch;
}

.byline {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: var(--rule);
}
.byline__mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  background: var(--blue);
  border: var(--rule);
  color: #fff;
  font-family: var(--mono);
  font-size: var(--fs-12);
  letter-spacing: 0.06em;
}
.byline__name {
  font-family: var(--display);
  font-size: var(--fs-21);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.byline__mail {
  display: inline-block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: var(--fs-11);
  color: var(--blue-deep);
  border-bottom: 1px solid currentColor;
}

.pull { padding: var(--s6); }
.pull__quote {
  font-size: clamp(var(--fs-21), 2.4vw, var(--fs-28));
  font-style: italic;
  line-height: 1.28;
  letter-spacing: -0.015em;
  margin-bottom: var(--s4);
}
.pull__attr { padding-bottom: var(--s5); border-bottom: var(--rule); }

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s5);
}
.tags li {
  padding: 4px 10px;
  border: var(--rule-hair);
  font-family: var(--mono);
  font-size: var(--fs-10);
  letter-spacing: 0.06em;
  color: var(--ink-2);
}

/* ──────────────────────────────────────────────────────────
   ENQUIRIES
   ────────────────────────────────────────────────────────── */
.enquiries {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
  gap: var(--s16);
  align-items: start;
}

.enquiries__aside > p {
  font-size: var(--fs-15);
  line-height: 1.68;
  color: var(--ink-2);
  margin-bottom: var(--s6);
  max-width: 40ch;
}
.enquiries__aside a { border-bottom: 1px solid var(--ink-4); }
.enquiries__aside a:hover { border-bottom-color: var(--ink); }

.field-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5);
}

.field { display: block; margin-bottom: var(--s5); }
.field .label { display: block; margin-bottom: var(--s2); }

/* Inputs are ruled lines, not filled boxes */
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: var(--s2) 0;
  background: transparent;
  border: none;
  border-bottom: var(--rule);
  border-radius: 0;
  font-family: var(--ui);
  font-size: var(--fs-15);
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--t1) var(--ease);
}
.field textarea { resize: vertical; line-height: 1.6; }
.field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23061225' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--blue);
}

.sent { padding: var(--s8) 0; border-top: var(--rule); }
.sent__title { font-size: var(--fs-40); margin-bottom: var(--s3); }
.sent p { color: var(--ink-2); }

/* ──────────────────────────────────────────────────────────
   FOOTER / COLOPHON
   ────────────────────────────────────────────────────────── */
.footer {
  position: relative;
  z-index: 1;
  padding: var(--s10) var(--s8) calc(var(--s8) + var(--sa-b));
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s8);
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: var(--s6);
  border-bottom: var(--rule);
}
.footer__mark { font-size: var(--fs-28); display: block; margin-bottom: var(--s2); }

.footer__nav { display: flex; flex-wrap: wrap; gap: var(--s5); }
.footer__nav a {
  font-family: var(--mono);
  font-size: var(--fs-11);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.footer__nav a:hover { color: var(--ink); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  justify-content: space-between;
  padding-top: var(--s5);
}
.footer__bottom a { color: var(--blue-deep); }

.privacy { margin-top: var(--s6); border-top: var(--rule-hair); padding-top: var(--s4); }
.privacy summary { cursor: pointer; list-style: none; }
.privacy summary::-webkit-details-marker { display: none; }
.privacy summary::before { content: '+ '; color: var(--blue-deep); }
.privacy[open] summary::before { content: '− '; }
.privacy__body {
  margin-top: var(--s5);
  max-width: 76ch;
  font-size: var(--fs-12);
  line-height: 1.72;
  color: var(--ink-3);
  columns: 2;
  column-gap: var(--s10);
}
.privacy__body p { margin-bottom: var(--s3); break-inside: avoid; }
.privacy__body strong { color: var(--ink-2); }
.privacy__body a { color: var(--blue-deep); }

/* ──────────────────────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .spread { grid-template-columns: minmax(0, 1fr); gap: var(--s10); }
  .origin { grid-template-columns: minmax(0, 1fr); gap: var(--s10); }
  .enquiries { grid-template-columns: minmax(0, 1fr); gap: var(--s10); }
  .backdrop__field { width: 100%; height: 30%; top: auto; border-left: none; border-top: var(--rule); }
}

@media (max-width: 880px) {
  /* The drawer carries all three; the masthead keeps only the toggle. */
  .masthead__nav, .masthead__cta, .masthead .ghlink { display: none; }
  .masthead__toggle { display: flex; }
  .entries { grid-template-columns: minmax(0, 1fr); }
  .method { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
  .method__step { padding: var(--s6) 0 0; border-left: none; border-top: 1px solid rgba(237, 232, 222, 0.22); }
  .method__step:first-child { padding-top: 0; border-top: none; }
  .privacy__body { columns: 1; }
}

@media (max-width: 620px) {
  .masthead { padding-inline: var(--s4); }
  .spread { padding: var(--s12) var(--s4) var(--s10); }
  .band { padding: var(--s12) var(--s4); }
  .footer { padding-inline: var(--s4); }
  .band__kicker { margin-left: 0; width: 100%; }
  .field-pair { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .entry { grid-template-columns: 2.4rem minmax(0, 1fr); gap: var(--s3); }
}