/* ══════════════════════════════════════════════════════════════════
   Rexonate — Press Kit
   Web translation of the "Complete" Figma frame (A4 × 5).
   Tokens below are the exact values from the design file.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* surface */
  --paper:        #fbf8f3;
  --band:         #473e35;

  /* ink */
  --ink:          #1e1a16;   /* headings, values          */
  --body:         #574f45;   /* paragraphs, pull quote    */
  --muted:        #7c7264;   /* eyebrows, running heads   */

  /* accent */
  --gold:         #a07c4e;
  --gold-light:   #c2a06e;   /* on the dark band          */

  /* rules */
  --rule-strong:  #e3dacd;
  --rule-soft:    #efe8dc;

  /* type */
  --display: "Cormorant Garamond", "Times New Roman", serif;
  --sans:    "Jost", "Futura", "Helvetica Neue", Arial, sans-serif;

  /* rhythm */
  --shell:   1120px;
  --gutter:  clamp(1.5rem, 5vw, 4rem);
  --gap:     clamp(2.5rem, 6vw, 5rem);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

h1, h2, h3, h4, p, dl, dd, blockquote, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }

a { color: inherit; }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: .75rem 1.25rem; z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

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

/* ── layout shell ────────────────────────────────────────────────── */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sheet { padding-block: clamp(3rem, 8vw, 6rem); scroll-margin-top: 60px; }
.sheet + .sheet { padding-top: clamp(3.5rem, 9vw, 7rem); }

/* ── running header (sticky) ─────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule-soft);
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 52px;
}
.topbar__mid { flex: 1; text-align: center; }
.topbar__print {
  appearance: none; border: 1px solid var(--rule-strong);
  background: transparent; color: var(--muted);
  padding: .5rem .9rem; cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
}
.topbar__print:hover { color: var(--ink); border-color: var(--gold); }

@media (max-width: 560px) { .topbar__mid { display: none; } }

/* ── the eyebrow / label voice ───────────────────────────────────── */
.label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(.6rem, 1.1vw, .688rem);   /* 8pt in the design */
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
}
.label--center  { display: block; text-align: center; }
.label--ink     { color: var(--ink); letter-spacing: .22em; }
.label--gold    { color: var(--gold-light); letter-spacing: .2em; }
.label--meta    { margin-top: 1.25rem; letter-spacing: .2em; }
.label--note    { white-space: nowrap; }

.label--col     { margin-bottom: 1.5rem; letter-spacing: .22em; }
.label--section { display: block; margin-top: clamp(3rem, 6vw, 4.5rem); }
.label--sub     { margin: 2.25rem 0 .75rem; font-size: clamp(.575rem, 1vw, .625rem); letter-spacing: .2em; }
.label--sub:first-of-type { margin-top: 1.75rem; }

/* ── rules ───────────────────────────────────────────────────────── */
.rule {
  height: 1px; border: 0; margin: 0;
  background: var(--rule-soft);
}
.rule--strong { background: var(--rule-strong); }

.runhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .875rem;
}
.runhead--page  { padding-top: 0; }
.runhead--baseline { align-items: baseline; }
.footer-rule { margin-top: clamp(3rem, 6vw, 4.5rem); }

/* ── display type ────────────────────────────────────────────────── */
.num {
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(.6rem, 1.1vw, .688rem);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.display {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.14;
  letter-spacing: .01em;
  color: var(--ink);
  margin-top: .35rem;
}

.heading-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}

.pull {
  font-family: var(--display);
  font-weight: 300; font-style: italic;
  font-size: clamp(1.1rem, 1.9vw, 1.5rem);
  line-height: 1.36;
  color: var(--body);
  margin: clamp(1.25rem, 2.5vw, 2rem) 0 clamp(1.75rem, 3.5vw, 2.75rem);
}

/* ── 01 · cover ──────────────────────────────────────────────────── */
.cover { padding-top: clamp(2rem, 5vw, 3.5rem); }

.cover__figure {
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  width: min(420px, 72%);
}
.cover__figure img { width: 100%; aspect-ratio: 320 / 484; object-fit: cover; }

.wordmark {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.75rem, 10.2vw, 3.75rem);
  line-height: 1.2;
  letter-spacing: .2em;
  text-indent: .2em;              /* balances the trailing letter-space */
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
  margin-top: clamp(1rem, 2.5vw, 1.75rem);
}

.accent {
  width: 36px; height: 1px;
  background: var(--gold);
  margin: clamp(.75rem, 1.5vw, 1.25rem) auto clamp(1.25rem, 2.5vw, 2rem);
}

.cover__foot-rule { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

.phone {
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(.9rem, 1.6vw, 1.05rem);
  letter-spacing: .04em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.phone:hover { border-color: var(--gold); }

/* ── two-column split (bio / facts, venues / requirements) ───────── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  position: relative;
}
.split::before {                   /* the vertical hairline divider */
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px; background: var(--rule-soft);
}
@media (max-width: 800px) {
  .split { grid-template-columns: 1fr; gap: clamp(2.5rem, 8vw, 3.5rem); }
  .split::before { display: none; }
}

.split__col > .rule { margin-top: 1rem; }

/* ── prose ───────────────────────────────────────────────────────── */
.prose p {
  font-size: clamp(.9rem, 1.5vw, .975rem);
  line-height: 1.85;
  color: var(--body);
}
.prose p + p { margin-top: 1.25rem; }

/* ── at a glance ─────────────────────────────────────────────────── */
.facts { display: block; }
.fact {
  display: flex; align-items: baseline; gap: 1rem;
  border-top: 1px solid var(--rule-soft);
  padding-block: .875rem;
}
.fact dt {
  flex: 0 0 clamp(6.5rem, 12vw, 8.5rem);
  font-weight: 500;
  font-size: clamp(.55rem, 1vw, .625rem);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
}
.fact dd {
  flex: 1 1 auto;
  font-size: clamp(.875rem, 1.4vw, .95rem);
  color: var(--ink);
  line-height: 1.5;
}

/* ── set formats ─────────────────────────────────────────────────── */
.formats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.formats h4 {
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(.625rem, 1.1vw, .7rem);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink);
  margin-bottom: .625rem;
}
.formats p {
  font-size: clamp(.85rem, 1.3vw, .9rem);
  line-height: 1.65;
  color: var(--body);
}
@media (max-width: 720px) { .formats { grid-template-columns: 1fr; } }

/* ── venue list ──────────────────────────────────────────────────── */
.venues li {
  display: flex; align-items: baseline; gap: .75rem;
  border-top: 1px solid var(--rule-soft);
  padding-block: .5rem;
}
.venues li > span:first-child {
  font-size: clamp(.875rem, 1.4vw, .95rem);
  color: var(--ink);
  line-height: 1.5;
}
.venue-role {
  margin-left: auto;
  font-family: var(--sans);
  font-size: clamp(.55rem, 1vw, .625rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── requirements list ───────────────────────────────────────────── */
.reqs li {
  border-top: 1px solid var(--rule-soft);
  padding-block: .5rem;
  font-size: clamp(.85rem, 1.35vw, .925rem);
  line-height: 1.55;
  color: var(--ink);
}

/* ── booking band ────────────────────────────────────────────────── */
.band {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  background: var(--band);
  padding: clamp(1.5rem, 3.5vw, 2.25rem) clamp(1.5rem, 3.5vw, 2.5rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
  text-decoration: none;
  transition: background .3s ease;
}
.band:hover { background: #3e362e; }
.band__cell { display: flex; flex-direction: column; gap: .5rem; }
.band__cell--end { align-items: flex-end; text-align: right; }
.band__phone {
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  letter-spacing: .02em;
  color: var(--paper);
  line-height: 1.25;
}
.band__place {
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(.85rem, 1.5vw, 1rem);
  color: var(--paper);
  line-height: 1.3;
}
@media (max-width: 520px) {
  .band { flex-direction: column; align-items: flex-start; }
  .band__cell--end { align-items: flex-start; text-align: left; }
}

/* ── 04 · press photos ───────────────────────────────────────────── */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.5vw, 1rem);
  margin-top: clamp(1.5rem, 3vw, 2rem);
}
.gallery img {
  width: 100%;
  aspect-ratio: 243.5 / 262;
  object-fit: cover;
}
@media (max-width: 560px) { .gallery { grid-template-columns: 1fr; } }

/* ── 05 · closing ────────────────────────────────────────────────── */
.closing__figure { margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.closing__figure img {
  width: 100%;
  aspect-ratio: 503 / 690;
  object-fit: cover;
}
.runhead--closing { padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.runhead--centered {
  --signoff-gap: clamp(2rem, 4vw, 3rem);
  --signoff-content-gap: clamp(3rem, 6vw, 5rem);
  flex-direction: column;
  justify-content: center;
  gap: var(--signoff-gap);
  padding-top: var(--signoff-content-gap);
}
.runhead--centered::before {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--gold);
}
.runhead--closing a { text-decoration: none; }
.runhead--closing a:hover { color: var(--ink); }

/* ── radial navigation ───────────────────────────────────────────── */
.radial-nav {
  position: fixed;
  left: 80px;
  top: 120px;
  width: 0;
  height: 0;
  z-index: 100;
}

/* Trigger — transparent hit target; lens handles the visual */
.radial-nav__trigger {
  position: absolute;
  top: 0; left: 0;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 2;
}
.radial-nav__trigger:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; border-radius: 50%; }

/* Lens — matches the non-selected orbital items exactly */
.radial-nav__lens {
  position: absolute;
  top: 0; left: 0;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid #6b5c50;
  box-shadow: 0 2px 10px rgba(30, 26, 22, .14);
  pointer-events: none;
  transition: transform .25s ease;
  z-index: 1;
}
.radial-nav__trigger:hover ~ .radial-nav__lens,
.radial-nav.is-open .radial-nav__lens {
  transform: translate(-50%, -50%) scale(1.07);
}

/* R — border colour, same as orbital item labels */
.radial-nav__r {
  position: absolute;
  top: 0; left: 0;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 300;
  font-size: 2.1rem;
  color: #6b5c50;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 3;
}

/* Orbital items */
.radial-nav__item {
  position: absolute;
  top: 0; left: 0;
  transform: translate(-50%, -50%) scale(0);
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid #6b5c50;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .55rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #6b5c50;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(30, 26, 22, .14);
  padding: 0 .25rem;
  line-height: 1.3;
  transition:
    transform .4s cubic-bezier(.34, 1.4, .64, 1),
    opacity .28s ease,
    background .2s ease,
    border-color .2s ease,
    color .2s ease;
}
.radial-nav__item:hover { background: var(--rule-soft); }
.radial-nav__item[aria-current="page"] {
  background: #6b5c50;
  color: var(--paper);
  border-color: #6b5c50;
}

/* ══════════════════════════════════════════════════════════════════
   PRINT — restores the original A4 pagination
   ══════════════════════════════════════════════════════════════════ */
@page { size: A4; margin: 0; }

@media print {
  :root { --gutter: 14mm; --gap: 10mm; --shell: 210mm; }

  body { background: #fff; font-size: 9.5pt; line-height: 1.6; }
  .topbar, .skip { display: none !important; }

  .sheet {
    width: 210mm; min-height: 297mm;
    padding: 14mm 0 12mm;
    break-after: page; page-break-after: always;
    display: flow-root;
  }
  .sheet:last-child { break-after: auto; page-break-after: auto; }

  .display  { font-size: 30pt; }
  .wordmark { font-size: 34pt; }
  .pull     { font-size: 19pt; }
  .band__phone { font-size: 15pt; }

  /* an A4 page is ~794 CSS px, which would otherwise trip the mobile
     breakpoints — restore the printed column structure explicitly. */
  .split { grid-template-columns: 1fr 1fr; gap: 10mm; break-inside: avoid; page-break-inside: avoid; }
  .split::before { display: block; }
  .formats { grid-template-columns: repeat(3, 1fr); gap: 8mm; }
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 5mm; }
  .band { flex-direction: row; align-items: center; }
  .band__cell--end { align-items: flex-end; text-align: right; }
  .fact, .venues li, .reqs li, .format, .gallery figure {
    break-inside: avoid; page-break-inside: avoid;
  }

  .cover__figure { width: 60mm; }
  .band { background: var(--band) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { text-decoration: none; }
}