/* BAE EDITIONS.
   A poster, not a brochure. Type leads, photography proves it, and the page is
   five blocks long. Deliberately absent, because every site in this trade does
   without them and every generated landing page has them: numbered section
   eyebrows, three-up feature cards, a values grid, an FAQ accordion.

   Fonts are self-hosted variable woff2, which is what the rest of the category
   does. No Google Fonts request, which also keeps the CSP to 'self'. */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-var-latin.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-var-latin.woff2") format("woff2-variations");
  font-weight: 400 600;
  font-display: swap;
}

:root {
  --pink:      #fb2c94;
  --pink-deep: #c9176f;
  --ink:       #0a0a0a;
  --graphite:  #55504e;
  --paper:     #fafaf9;
  --white:     #ffffff;
  --hair:      #ddd8d4;

  --gutter: clamp(20px, 4.5vw, 64px);
  --max: 1320px;

  --ease: cubic-bezier(0.2, 0.6, 0.3, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, Helvetica, Arial, sans-serif;
  font-size: clamp(1rem, 0.97rem + 0.18vw, 1.09rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--pink-deep);
  outline-offset: 2px;
}

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

/* Display is Archivo pushed wide and heavy. Set big, tracked tight, in caps. */
.poster {
  font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-stretch: 118%;
  text-transform: uppercase;
  letter-spacing: -0.028em;
  line-height: 0.9;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper); padding: 12px 18px; z-index: 100;
}
.skip:focus { left: 10px; top: 10px; }

/* ---------- header: two things only ---------- */

.site-head { border-bottom: 2px solid var(--ink); background: var(--paper); }
.site-head__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-block: 18px;
}
.site-head img { height: 40px; width: auto; }
@media (max-width: 560px) {
  .site-head img { height: 30px; }
  .trade-link { padding: 11px 14px; letter-spacing: 0.07em; }
}

.trade-link {
  font-family: Archivo, sans-serif;
  font-weight: 700; font-stretch: 112%;
  font-size: clamp(0.72rem, 0.68rem + 0.2vw, 0.84rem);
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  background: var(--ink); color: var(--paper);
  padding: 13px 20px;
  transition: background 160ms var(--ease);
}
.trade-link:hover { background: var(--pink); color: var(--ink); }

/* ---------- 1. the poster ---------- */

.poster-block { padding: clamp(36px, 5.5vw, 80px) 0 clamp(32px, 4vw, 64px); }
.poster-block h1 {
  /* Was 10.4vw capped at 9.4rem with a 14ch measure, which filled the whole
     viewport: the type stayed enormous as the window narrowed AND the short
     measure pushed it to five lines, so the block height grew instead of
     shrinking. Smaller step, wider measure, so it settles at three lines. */
  font-size: clamp(2rem, 5.2vw, 4.8rem);
  max-width: 21ch;
}
.poster-block h1 span { color: var(--pink); }
.poster-block .under {
  display: grid; gap: 22px; align-items: end;
  margin-top: clamp(28px, 4vw, 52px);
  padding-top: 22px;
  border-top: 2px solid var(--ink);
}
@media (min-width: 860px) {
  .poster-block .under { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 60px; }
}
.poster-block .under p { margin: 0; max-width: 46ch; font-size: clamp(1.02rem, 0.96rem + 0.4vw, 1.3rem); }
.poster-block .under .aside {
  margin: 0; color: var(--graphite); font-size: 0.93rem; max-width: 40ch;
}

/* ---------- 2. the index ---------- */

.index { padding-bottom: clamp(44px, 6vw, 88px); }
.index-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  align-items: baseline;
  padding: clamp(20px, 2.6vw, 32px) 0;
  border-top: 1px solid var(--hair);
  text-decoration: none; color: inherit;
}
.index-row:first-child { border-top: 2px solid var(--ink); }
.index-row:last-child { border-bottom: 1px solid var(--hair); }

@media (min-width: 840px) {
  .index-row {
    grid-template-columns: minmax(0, 7fr) minmax(0, 8fr) minmax(0, 4fr);
    gap: 32px;
    align-items: baseline;
  }
}

.index-row .name {
  font-family: Archivo, sans-serif; font-weight: 800; font-stretch: 116%;
  text-transform: uppercase; letter-spacing: -0.015em; line-height: 1.02;
  font-size: clamp(1.35rem, 1.05rem + 1.5vw, 2.5rem);
}
.index-row .what { color: var(--graphite); font-size: 0.96rem; }
.index-row .state {
  font-family: Archivo, sans-serif; font-weight: 700; font-stretch: 112%;
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  margin-top: 4px;
}
@media (min-width: 840px) { .index-row .state { text-align: right; margin-top: 0; } }
.index-row .state[data-s="live"] { color: var(--pink-deep); }
.index-row .state[data-s="soon"] { color: var(--graphite); }
a.index-row:hover .name { color: var(--pink-deep); }
a.index-row:hover .state::after { content: " \2197"; }
.index-row--quiet .name { color: #9a938f; }

/* ---------- 3. the proof band ---------- */

.proof { background: var(--ink); color: var(--paper); padding: clamp(48px, 7vw, 104px) 0; }
.proof h2 {
  font-family: Archivo, sans-serif; font-weight: 800; font-stretch: 118%;
  text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.96;
  font-size: clamp(1.7rem, 1.1rem + 3.2vw, 4rem);
  max-width: 16ch;
}
.proof p {
  color: #a9a29e; max-width: 48ch; margin: 22px 0 0; font-size: 1rem;
}
.proof .shots {
  display: grid; gap: clamp(14px, 2vw, 26px);
  margin-top: clamp(32px, 4.5vw, 60px);
}
@media (min-width: 720px) { .proof .shots { grid-template-columns: 1.22fr 0.78fr; align-items: start; } }
.proof figure { margin: 0; }
.proof figcaption {
  margin-top: 12px; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: #7e7875; font-family: Archivo, sans-serif; font-weight: 600; font-stretch: 110%;
}

/* ---------- 4. trade ---------- */

.trade { padding: clamp(52px, 7vw, 110px) 0; }
.trade h2 {
  font-family: Archivo, sans-serif; font-weight: 800; font-stretch: 118%;
  text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.96;
  font-size: clamp(1.7rem, 1.1rem + 3.2vw, 4rem);
  max-width: 15ch;
}
.trade__grid { display: grid; gap: clamp(30px, 4vw, 64px); margin-top: clamp(28px, 3.5vw, 52px); }
@media (min-width: 900px) { .trade__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.trade__note { color: var(--graphite); max-width: 38ch; }
.trade__note p { margin: 0 0 16px; }

.field { display: grid; gap: 7px; margin-bottom: 18px; }
.field > label {
  font-family: Archivo, sans-serif; font-weight: 600; font-stretch: 110%;
  font-size: 0.76rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--graphite);
}
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--white); border: 2px solid var(--ink); border-radius: 0;
  padding: 13px 14px; width: 100%;
  transition: border-color 140ms var(--ease);
}
.field select {
  appearance: none; padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px; background-repeat: no-repeat;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--pink); }
.field textarea { min-height: 140px; resize: vertical; }
@media (min-width: 620px) { .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.btn {
  font-family: Archivo, sans-serif; font-weight: 800; font-stretch: 116%;
  font-size: 0.84rem; letter-spacing: 0.11em; text-transform: uppercase;
  background: var(--pink); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 0;
  padding: 16px 32px; cursor: pointer;
  transition: background 160ms var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn[disabled] { opacity: 0.55; cursor: progress; }

.form-note { font-size: 0.82rem; color: var(--graphite); margin: 14px 0 0; max-width: 44ch; line-height: 1.65; }
.form-note a { color: var(--pink-deep); }
.form-msg { margin: 16px 0 0; font-size: 0.95rem; border-left: 4px solid var(--pink); padding-left: 14px; }
.form-msg[hidden] { display: none; }
.form-msg[data-state="error"] { border-left-color: #b3261e; color: #b3261e; }

/* ---------- footer ---------- */

.site-foot { background: var(--ink); color: #a9a29e; padding: clamp(40px, 5vw, 68px) 0 32px; }
.site-foot img { height: 34px; width: auto; }
.foot-top { display: grid; gap: 26px; }
@media (min-width: 720px) { .foot-top { grid-template-columns: 1fr auto; align-items: center; } }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 0.88rem; }
.foot-links a { color: #a9a29e; text-decoration: none; }
.foot-links a:hover { color: var(--pink); }
.foot-legal {
  margin-top: clamp(28px, 4vw, 48px); padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.16);
  display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 0.78rem; color: #7e7875;
}
.tbc { border-bottom: 1px dotted #7e7875; }

/* ---------- document pages ---------- */

.doc { padding: clamp(40px, 6vw, 92px) 0 clamp(52px, 7vw, 104px); }
.doc h1 {
  font-family: Archivo, sans-serif; font-weight: 800; font-stretch: 118%;
  text-transform: uppercase; letter-spacing: -0.025em; line-height: 0.95;
  font-size: clamp(2rem, 1.3rem + 3.4vw, 4rem); margin-bottom: 14px;
}
.doc__meta { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite); margin: 0 0 40px; }
.doc h2 {
  font-family: Archivo, sans-serif; font-weight: 700; font-stretch: 112%;
  font-size: 0.92rem; letter-spacing: 0.1em; text-transform: uppercase;
  margin: 42px 0 12px; padding-top: 14px; border-top: 2px solid var(--ink);
}
.doc p, .doc li { max-width: 62ch; color: #2e2b29; }
.doc ul { padding-left: 1.1em; }
.doc li { margin-bottom: 8px; }
.doc li::marker { color: var(--pink); }
.doc a { color: var(--pink-deep); }


/* ---------- press page ----------
   These are scoped under .doc deliberately. As bare .kit / .facts rules they
   tie with .doc ul and .doc a on specificity, and the document rules win on
   source order: the fact labels ran into their values and the download button
   lost its fill. */

.doc .kit {
  margin: 32px 0 10px; padding: 26px; border: 2px solid var(--ink);
  display: grid; gap: 18px; max-width: 62ch;
}
@media (min-width: 640px) { .doc .kit { grid-template-columns: 1fr auto; align-items: center; } }
.doc .kit p { margin: 0; max-width: none; }
.doc .kit strong { font-family: Archivo, sans-serif; font-weight: 800; font-stretch: 112%; }

.doc a.btn {
  background: var(--pink); color: var(--ink);
  text-decoration: none; display: inline-block; text-align: center; white-space: nowrap;
}
.doc a.btn:hover { background: var(--ink); color: var(--paper); }

.doc .facts { list-style: none; padding: 0; margin: 0; }
.doc .facts li {
  display: grid; gap: 2px 28px; margin: 0;
  padding: 15px 0; border-top: 1px solid var(--hair); max-width: 66ch;
}
.doc .facts li::marker { content: none; }
@media (min-width: 640px) { .doc .facts li { grid-template-columns: 11rem minmax(0, 1fr); } }
.doc .facts b {
  font-family: Archivo, sans-serif; font-weight: 700; font-stretch: 110%;
  font-size: 0.76rem; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--graphite); padding-top: 0.28em;
}
.doc .facts span { color: #2e2b29; }

/* The house mark leads the poster block. The master is 2089px wide and ships
   at 1400, so it only ever downscales. Capped at 700 to leave the headline
   below it as the loudest thing on the page. */
.poster-logo{width:min(92%,700px);margin:0 0 clamp(22px,3vw,38px)}

/* CSP here is style-src 'self' with no unsafe-inline, so every style="" on
   these pages was being dropped. They live here now. */
.doc .back,.doc__back{margin-top:48px}
.doc .doc__meta{margin-bottom:40px}
.proof a.marks{color:var(--blush,#feacd4)}
.aside a.home{color:var(--pink-deep)}
.foot-legal--bare{margin-top:0;border-top:0;padding-top:0}