/* br33jon3s.com — black and honey gold, ivory secondary, plum and silver accents */
/* Self-hosted fonts (SIL Open Font License) */
@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  --black: #0B0B0D;
  --black-2: #131317;
  --gold: #C9963E;
  --gold-soft: #DDB777;
  --ivory: #F2EEE6;
  --ivory-dim: #CFCAC0;
  --plum: #3F1D4D;
  --plum-deep: #24112C;
  --silver: #A8A9AD;
  --line: rgba(168, 169, 173, 0.18);

  --serif: "Archivo", "Helvetica Neue", Arial, sans-serif; /* display face */
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(16px, 5vw, 72px);
  --max: 1240px;
  --measure: 62ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--black);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--gold); color: var(--black); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--gold); color: var(--black); padding: 8px 14px; z-index: 100; }

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

/* The 3s are always honey gold */
.three { color: var(--gold); font-style: normal; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 11, 13, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
.wordmark {
  font-family: var(--serif); font-size: 26px; font-weight: 500;
  text-decoration: none; letter-spacing: 0.01em; white-space: nowrap;
}
.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  text-decoration: none; font-size: 14px; letter-spacing: 0.04em; color: var(--ivory-dim);
  padding: 6px 0; border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ivory); border-bottom-color: var(--gold); }
.nav .nav-book {
  color: var(--black); background: var(--gold); padding: 10px 18px; border: 0; border-radius: 2px; font-weight: 600;
}
.nav .nav-book:hover, .nav .nav-book[aria-current="page"] { background: var(--gold-soft); color: var(--black); }
.menu-toggle {
  display: none; background: none; border: 1px solid var(--line); color: var(--ivory);
  font: 600 14px var(--sans); padding: 9px 14px; border-radius: 2px; cursor: pointer;
}

@media (max-width: 900px) {
  .menu-toggle { display: block; }
  .nav {
    position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--black); border-bottom: 1px solid var(--line);
    padding: 12px var(--gutter) 28px; display: none;
  }
  .nav.open { display: flex; }
  .nav a { font-size: 18px; padding: 14px 0; width: 100%; border-bottom: 1px solid var(--line); }
  .nav .nav-book { margin-top: 18px; width: auto; text-align: center; padding: 14px 22px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 15px var(--sans); letter-spacing: 0.03em; text-decoration: none;
  padding: 16px 28px; border-radius: 2px; cursor: pointer; border: 1px solid var(--gold);
  transition: background-color .2s ease, color .2s ease;
}
.btn-gold { background: var(--gold); color: var(--black); }
.btn-gold:hover { background: var(--gold-soft); border-color: var(--gold-soft); }
.btn-line { background: transparent; color: var(--gold); }
.btn-line:hover { background: var(--gold); color: var(--black); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: min(90vh, 860px);
  display: flex; align-items: center;
  background: var(--black);
  overflow: hidden;
}
.hero picture { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; }
.hero picture img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; }
.hero::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 62%;
  background:
    linear-gradient(90deg, var(--black) 0%, rgba(11,11,13,0.7) 18%, rgba(11,11,13,0) 46%),
    linear-gradient(0deg, var(--black) 0%, rgba(11,11,13,0) 28%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; padding-top: 72px; padding-bottom: 72px; }
.hero h1 {
  font-family: var(--serif); font-weight: 650;
  font-size: clamp(64px, 9vw, 150px); line-height: 0.92; letter-spacing: -0.02em;
  margin: 0 0 24px; max-width: 46%;
}
.hero .catch {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(22px, 2.4vw, 32px); color: var(--ivory); margin: 0 0 40px; max-width: 18ch;
}
.hero .catch .three { font-style: normal; }
/* The 33 can't be gold on a gold button: plum on the menu button, the button's text color on other buttons */
.nav .nav-book .three { color: var(--plum); }
.btn .three { color: inherit; }

@media (max-width: 900px) {
  /* At least 780px tall so on short phones the photo has room above the text instead of behind it */
  .hero { min-height: max(100svh, 780px); align-items: flex-end; }
  .hero picture, .hero::after { width: 100%; }
  .hero picture img { object-position: 60% 18%; }
  /* Shift the photo up a tenth to trim the top of the brick wall and lift the face clear of the text's dark fade */
  .hero picture { transform: translateY(-10%); }
  .hero::after {
    background: linear-gradient(0deg, var(--black) 0%, rgba(11,11,13,0.88) 32%, rgba(11,11,13,0) 62%);
  }
  .hero-inner { padding-top: 140px; padding-bottom: 56px; }
  .hero h1 { max-width: none; font-size: clamp(60px, 17vw, 120px); }
  /* A dark fade that travels with the text, so the name always sits on it whatever the screen height.
     It starts 40px above the text block's top padding (140px) and is fully dark from the name down. */
  .hero-inner::before {
    content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -50vw; right: -50vw;
    background: linear-gradient(0deg, rgba(11,11,13,0.94) 0%, rgba(11,11,13,0.8) calc(100% - 150px), rgba(11,11,13,0) calc(100% - 60px));
  }
}
@media (max-width: 700px) { .btn-row .btn { flex: 1 1 100%; } }

/* ---------- Proof strip ---------- */
.proof { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 34px 0; }
.logos {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px;
}
.logos li {
  font-family: var(--serif); font-size: 17px; color: var(--ivory); opacity: 0.8; white-space: nowrap;
}
.logos img { height: 30px; width: auto; opacity: 0.85; }
/* main.js turns the list into a slowly scrolling loop (unless the visitor prefers reduced motion).
   Copies of the list follow the original so the loop has no gap. Hover or tap pauses it. */
.logos-viewport {
  overflow: hidden; cursor: pointer;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logos-track { display: flex; width: max-content; animation: logos-scroll var(--logos-duration, 40s) linear infinite; }
.logos-track .logos { flex-wrap: nowrap; gap: 0; }
.logos-track .logos li { padding: 0 28px; }
.logos-viewport:hover .logos-track, .logos-viewport.paused .logos-track { animation-play-state: paused; }
@keyframes logos-scroll { to { transform: translateX(calc(-1 * var(--logos-shift, 50%))); } }

/* ---------- Sections ---------- */
.section { padding: clamp(80px, 12vw, 150px) 0; }
.section-tight { padding: clamp(56px, 8vw, 96px) 0; }
.section-plum { background: linear-gradient(180deg, var(--plum-deep), var(--black)); }
.section-ivory { background: var(--ivory); color: var(--black); }
.section-ivory .muted { color: #55545A; }

.h2 {
  font-family: var(--serif); font-weight: 650;
  font-size: clamp(38px, 5.4vw, 72px); line-height: 1.04; letter-spacing: -0.015em;
  margin: 0 0 28px; max-width: 18ch;
}
.h3 { font-family: var(--serif); font-weight: 650; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; margin: 0 0 12px; }
.lede { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.6; color: var(--ivory-dim); max-width: var(--measure); margin: 0 0 24px; }
.muted { color: var(--silver); }
.prose p { max-width: var(--measure); margin: 0 0 1.2em; }
.prose p:last-child { margin-bottom: 0; }

/* Page intro */
.page-head { padding: clamp(96px, 14vw, 170px) 0 clamp(48px, 7vw, 80px); border-bottom: 1px solid var(--line); }
.page-head h1 {
  font-family: var(--serif); font-weight: 650;
  font-size: clamp(48px, 8vw, 116px); line-height: 0.98; letter-spacing: -0.02em; margin: 0 0 26px; max-width: 14ch;
}
/* A two-line heading: first line silver, second line ivory on its own line just below */
.split-heading span { display: block; }
.split-heading span:first-child { color: var(--silver); }
.split-heading span + span { color: var(--ivory); margin-top: 0.3em; }

/* ---------- Distinctions (two featured credentials) ---------- */
.distinctions { display: grid; grid-template-columns: 1fr 1fr; }
.distinctions a {
  display: block; text-decoration: none; padding: 46px var(--gutter) 46px 0;
  border-bottom: 1px solid var(--line);
}
.distinctions a + a { padding-left: var(--gutter); padding-right: 0; border-left: 1px solid var(--line); }
.distinctions .h3 { color: var(--ivory); }
.distinctions a:hover .h3 { color: var(--gold); }
.distinctions p { margin: 0; color: var(--silver); font-size: 15px; }
@media (max-width: 760px) {
  .distinctions { grid-template-columns: 1fr; }
  .distinctions a, .distinctions a + a { padding: 34px 0; border-left: 0; }
}

/* ---------- Mission ---------- */
.mission {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(34px, 5vw, 66px); line-height: 1.12; letter-spacing: -0.01em;
  max-width: 20ch; margin: 0 0 40px;
}

/* ---------- Talks (index list, not cards) ---------- */
.talks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.talk { border-bottom: 1px solid var(--line); }
.talk-row {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px 56px;
  padding: 38px 0; align-items: baseline;
}
.talk h3 {
  font-family: var(--serif); font-weight: 650; font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.06; margin: 0; letter-spacing: -0.01em;
}
.talk .promise { font-size: 19px; color: var(--ivory); margin: 0; }
.talk .detail { color: var(--silver); margin: 12px 0 0; max-width: 56ch; font-size: 16px; }
.talks-compact .talk-row { padding: 28px 0; }
.talks-compact h3 a { text-decoration: none; }
.talks-compact h3 a:hover { color: var(--gold); }
@media (max-width: 760px) { .talk-row { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- Offerings ---------- */
.offerings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--gold); }
.offering { padding: 40px 36px 8px 0; }
.offering + .offering { padding-left: 36px; border-left: 1px solid var(--line); }
.offering ul { margin: 18px 0 0; padding-left: 18px; color: var(--ivory-dim); }
.offering li { margin-bottom: 8px; }
.offering li::marker { color: var(--gold); }
.offering p { color: var(--ivory-dim); }
@media (max-width: 900px) {
  .offerings { grid-template-columns: 1fr; }
  .offering, .offering + .offering { padding: 34px 0; border-left: 0; border-bottom: 1px solid var(--line); }
}

/* ---------- Quote ---------- */
.quote { margin: 0; }
.quote blockquote {
  margin: 0; font-family: var(--serif); font-weight: 500;
  font-size: clamp(30px, 4.4vw, 58px); line-height: 1.16; color: var(--gold); max-width: 24ch;
}
.quote figcaption { margin-top: 26px; color: var(--silver); font-size: 15px; letter-spacing: 0.03em; }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.about-grid figure { margin: 0; position: sticky; top: 104px; }
.about-grid figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 62% 30%; filter: saturate(0.92); }
.about-grid figcaption { margin-top: 12px; color: var(--silver); font-size: 14px; }
/* The About quote stays in view while the text scrolls under it, so it sits on a solid block above the text */
/* The shadow fills the gap between the header and the stuck quote with the page color, so no text peeks through there */
.about-grid .quote { z-index: 2; background: var(--plum-deep); border-left: 3px solid var(--gold); padding: clamp(24px, 3vw, 40px); box-shadow: 0 -32px 0 var(--black); }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } .about-grid figure { position: static; } }

/* ---------- Media ---------- */
.media-group { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px 56px; padding: 56px 0; border-bottom: 1px solid var(--line); }
.media-group:first-child { padding-top: 0; }
.media-group h2 { font-family: var(--serif); font-weight: 650; font-size: clamp(28px, 3vw, 38px); margin: 0; line-height: 1.1; }
.media-list { list-style: none; margin: 0; padding: 0; }
.media-list li { border-top: 1px solid var(--line); }
.media-list li:first-child { border-top: 0; }
.media-list a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding: 18px 0; text-decoration: none;
}
.media-list .title { font-size: 18px; color: var(--ivory); }
.media-list .meta { font-size: 14px; color: var(--silver); white-space: nowrap; }
.media-list a:hover .title { color: var(--gold); }
@media (max-width: 760px) {
  .media-group { grid-template-columns: 1fr; }
  .media-list a { flex-direction: column; gap: 2px; }
  .media-list .meta { white-space: normal; }
}

/* ---------- Form ---------- */
.book-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 96px); }
@media (max-width: 900px) { .book-grid { grid-template-columns: 1fr; } }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label, .field legend { font-size: 14px; color: var(--ivory-dim); letter-spacing: 0.02em; padding: 0; }
.field input, .field textarea, .field select {
  font: 16px var(--sans); color: var(--ivory); background: var(--black-2);
  border: 1px solid rgba(168,169,173,0.28); border-radius: 2px; padding: 14px 14px; width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.field input[type="date"] { color-scheme: dark; }
fieldset.field { border: 0; margin: 0; padding: 0; }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice label {
  display: flex; gap: 12px; align-items: center; cursor: pointer;
  border: 1px solid rgba(168,169,173,0.28); padding: 16px; border-radius: 2px; color: var(--ivory); font-size: 16px;
}
.choice input { accent-color: var(--gold); width: 18px; height: 18px; margin: 0; }
.choice label:has(input:checked) { border-color: var(--gold); background: rgba(201,150,62,0.08); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { grid-column: 1 / -1; margin: 0; min-height: 1.5em; font-size: 15px; }
.form-status.ok { color: var(--gold-soft); }
.form-status.err { color: #E7A9A0; }
@media (max-width: 600px) { .form, .choice { grid-template-columns: 1fr; } }

/* ---------- Circle ---------- */
.circle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 36px; }
.person img { aspect-ratio: 4/5; width: 100%; object-fit: cover; background: var(--black-2); margin-bottom: 18px; }
.person .ph { aspect-ratio: 4/5; background: linear-gradient(160deg, var(--plum-deep), var(--black-2)); margin-bottom: 18px; }
.person h3 { font-family: var(--serif); font-weight: 650; font-size: 28px; margin: 0 0 6px; }
.person p { margin: 0; color: var(--silver); }
@media (max-width: 900px) { .circle-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .circle-grid { grid-template-columns: 1fr; } }

/* ---------- Closing CTA ---------- */
.closing { text-align: left; }
.closing .h2 { max-width: 16ch; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 56px 0 40px; color: var(--silver); font-size: 14px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px; align-items: flex-end; }
.site-footer .wordmark { font-size: 32px; color: var(--ivory); display: block; margin-bottom: 6px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 22px; }
.site-footer nav a { text-decoration: none; }
.site-footer nav a:hover { color: var(--gold); }

/* One orchestrated moment: the hero name settles in on load */
@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero .catch, .hero .btn-row { animation: settle 1.1s cubic-bezier(.2,.7,.2,1) both; }
  .hero .catch { animation-delay: .18s; }
  .hero .btn-row { animation-delay: .32s; }
  @keyframes settle { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}

.field[hidden] { display: none; }
/* Buttons on ivory sections */
.btn-ink { background: var(--black); color: var(--gold); border-color: var(--black); }
.btn-ink:hover { background: var(--plum); border-color: var(--plum); color: var(--ivory); }
.btn-ink-line { background: transparent; color: var(--black); border-color: var(--black); }
.btn-ink-line:hover { background: var(--black); color: var(--gold); }

/* Modern display type: sharp, bold, easy to read */
.wordmark { font-weight: 750; font-stretch: 108%; letter-spacing: -0.02em; }
.hero h1 { font-weight: 800; font-stretch: 112%; letter-spacing: -0.04em; line-height: 0.9; }
.hero .catch { font-weight: 500; font-stretch: 100%; letter-spacing: -0.01em; line-height: 1.3; max-width: 20ch; }
.h2, .page-head h1, .mission { letter-spacing: -0.03em; }
.page-head h1 { font-weight: 750; }
.mission { font-weight: 600; }
.talk h3, .h3, .media-group h2, .person h3 { letter-spacing: -0.02em; }
.logos li { font-weight: 600; letter-spacing: -0.01em; }
.quote blockquote { font-weight: 600; letter-spacing: -0.02em; }