/* ═══════════════════════════════════════════════════
   RADOVAN VITOSEVIC — MODERN DARK
   Aligned with Billingz · violet · navy · black
   ═══════════════════════════════════════════════════ */

:root {
  --bg:           #07090F;
  --bg-elev:      #0F1320;
  --bg-card:      #131829;
  --bg-soft:      #0B0E18;

  --line:         rgba(255,255,255,0.08);
  --line-strong:  rgba(255,255,255,0.14);
  --line-violet:  rgba(168,85,247,0.22);

  --text:         #F8FAFC;
  --text-2:       rgba(248,250,252,0.78);
  --text-3:       rgba(248,250,252,0.55);
  --text-mute:    rgba(248,250,252,0.38);
  --text-faint:   rgba(248,250,252,0.22);

  --violet:       #A855F7;
  --violet-2:     #C084FC;
  --violet-deep:  #6D28D9;
  --indigo:       #4F46E5;
  --indigo-deep:  #1E1B4B;

  --grad-violet-2: linear-gradient(140deg, #A855F7, #6D28D9);

  --t-display: clamp(3.6rem, 9vw, 7.4rem);
  --t-h1:      clamp(2.8rem, 5.5vw, 4.6rem);
  --t-h2:      clamp(2.2rem, 4vw, 3.4rem);
  --t-h3:      clamp(1.45rem, 2.4vw, 1.85rem);
  --t-lede:    clamp(1.1rem, 1.5vw, 1.25rem);
  --t-body:    1.0625rem;

  --gutter: clamp(1.25rem, 3vw, 2rem);
  --pad-section: clamp(4.5rem, 9vw, 8rem);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* On narrow screens, drop the section padding minimum so end-of-page sections
   don't leave excessive vertical space before the footer. */
@media (max-width: 480px) {
  :root { --pad-section: clamp(3rem, 9vw, 8rem); }
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem; /* clear sticky nav for anchor jumps */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg);
}
@media (max-width: 480px) {
  /* Nav is now single-row at all widths; tighten the offset accordingly */
  html { scroll-padding-top: 5rem; }
}
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-feature-settings: 'cv02','cv03','cv04','cv11';
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--text-2);
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(168,85,247,0.10) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(79,70,229,0.06) 0%, transparent 50%);
  background-attachment: fixed;
  letter-spacing: -0.005em;
  overflow-x: hidden;
}

::selection { background: var(--violet); color: #fff; }

h1, h2, h3, h4 {
  font-family: 'Inter', sans-serif;
  color: var(--text);
  letter-spacing: -0.035em;
  line-height: 1.04;
  font-weight: 800;
}
h1 { font-size: var(--t-h1); font-weight: 900; letter-spacing: -0.045em; line-height: 0.96; }
h2 { font-size: var(--t-h2); letter-spacing: -0.04em; line-height: 1.02; }
h3 { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.02em; line-height: 1.18; }
h4 { font-size: 1.15rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; }

a { color: var(--violet-2); transition: color .18s var(--ease); }
a:hover { color: var(--violet); }
.prose a, .lede a, p a:not(.btn):not(.foot-link):not(.nav-link):not(.brand) {
  text-decoration: underline;
  text-decoration-color: rgba(168,85,247,0.4);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color .18s, color .18s;
}
.prose a:hover, .lede a:hover { text-decoration-color: var(--violet); }

.shell {
  width: 100%;
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}
.measure { max-width: 38rem; }
.measure-wide { max-width: 52rem; }

section { padding: var(--pad-section) 0; position: relative; }
section + section { border-top: 1px solid var(--line); }

/* ─── NAV ─── */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Solid-enough fallback for browsers without backdrop-filter support */
  background: rgba(7, 9, 15, 0.96);
  border-bottom: 1px solid var(--line);
}
@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  .nav {
    /* When blur is supported, content underneath is softened. We still keep
       opacity high enough that headings can't read through. */
    background: rgba(7, 9, 15, 0.92);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
  gap: 1.5rem;
}
.brand {
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.018em;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  transition: opacity .15s;
}
.brand:hover { opacity: 0.85; }
.brand .dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 10px rgba(168,85,247,0.7), 0 0 20px rgba(168,85,247,0.3);
}
.nav-links {
  display: flex;
  gap: 2.2rem;
  font-size: 0.88rem;
  font-weight: 500;
}
.nav-link {
  color: var(--text-3);
  position: relative;
  padding: 0.35rem 0;
  transition: color .15s var(--ease);
}
.nav-link:hover { color: var(--text); }
.nav-link.active { color: var(--text); }
.nav-link.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--violet);
  box-shadow: 0 0 8px rgba(168,85,247,0.6);
}

/* ─── LANG SWITCHER ─── (removed — site is English-only) */

@media (max-width: 700px) {
  .nav-links { gap: 1.2rem; font-size: 0.78rem; }
  .brand { font-size: 0.92rem; }
}
@media (max-width: 480px) {
  /* No more lang-switcher means no second row to accommodate; just keep
     nav-inner ready to wrap if a future change ever introduces extra items. */
  .nav-inner {
    flex-wrap: wrap;
    row-gap: 0.45rem;
    gap: 0.8rem;
  }
}

/* ─── ELEMENTS ─── */
.eyebrow {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--violet-2);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: var(--violet);
  opacity: 0.7;
}
.lede {
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--text-2);
  font-weight: 400;
}
.prose p { margin-top: 1.2em; line-height: 1.7; color: var(--text-2); }
.prose p:first-child { margin-top: 0; }
.prose em { color: var(--text); font-style: italic; }
.prose strong { color: var(--text); font-weight: 600; }

/* ─── HERO ─── */
.hero {
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 7vw, 5.5rem);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 80% 30%, rgba(168,85,247,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 70%, rgba(79,70,229,0.10) 0%, transparent 60%);
  pointer-events: none;
}
.hero > * { position: relative; }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 880px) {
  .hero-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 5rem); }
}
.hero-name {
  font-size: var(--t-display);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.95;
  color: var(--text);
}
.hero-name em {
  font-size: inherit;
  font-style: normal;
  color: transparent;
  display: inline-block;
  width: 0.5em;
  vertical-align: baseline;
  position: relative;
}
.hero-name em::before {
  content: "";
  position: absolute;
  left: 0.06em;
  bottom: 0.05em;
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 32px rgba(168,85,247,0.7), 0 0 12px rgba(168,85,247,0.5);
}
.hero-name .nw { white-space: nowrap; }
.hero-tag {
  margin-top: 1.7rem;
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--text-2);
  max-width: 32rem;
}

/* ─── PORTRAIT ─── */
.portrait {
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  max-width: 24rem;
  margin-left: auto;
  border-radius: 6px;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,0.6),
    0 0 0 1px rgba(168,85,247,0.10);
}
.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(7,9,15,0.35) 100%);
  pointer-events: none;
}
.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.04) saturate(0.96);
}
.portrait-caption {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-top: 0.9rem;
  text-align: right;
  max-width: 24rem;
  margin-left: auto;
  font-weight: 500;
}
@media (max-width: 880px) {
  .portrait, .portrait-caption { margin-left: 0; max-width: 100%; }
  .portrait-caption { text-align: left; }
}

/* ─── SECTION HEAD ─── */
.section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  margin-bottom: clamp(2.4rem, 4.5vw, 3.8rem);
}
@media (min-width: 880px) {
  .section-head { grid-template-columns: 13rem 1fr; align-items: start; }

  /* When a section-head wraps the speaking-venues grid, let the cards span
     the full shell width instead of being constrained to the right 1fr
     column. The empty label-col was pushing the cards ~13rem to the right,
     which made them look offset and could clip the rightmost card on
     wider viewports. The award-grid on the same page is structured
     outside a section-head — this restores parity. */
  .section-head:has(.speaking-venues) {
    grid-template-columns: 1fr;
  }
  .section-head:has(.speaking-venues) .label-col {
    display: none;
  }
}
.section-head .label-col .eyebrow { margin-top: 0.55rem; }
.section-head h2 { max-width: 22ch; }

/* ─── PULL QUOTE ─── */
blockquote.pull {
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  line-height: 1.3;
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.022em;
  padding: 0.2rem 0 0.2rem 1.6rem;
  margin: 2.4rem 0;
  max-width: 38rem;
  border-left: 2px solid var(--violet);
  position: relative;
}

/* ─── FACTS ─── */
.facts {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}
.fact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
  transition: background .2s var(--ease);
}
.fact:hover { background: rgba(168,85,247,0.025); }
@media (min-width: 720px) {
  .fact { grid-template-columns: 11rem 1fr auto; gap: 2rem; align-items: baseline; }
}
.fact-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--violet-2);
  font-weight: 600;
}
.fact-body {
  font-size: 1.18rem;
  color: var(--text);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.fact-body small {
  display: block;
  font-size: 0.92rem;
  color: var(--text-3);
  margin-top: 0.3rem;
  font-weight: 400;
}
.fact-body a {
  color: var(--text);
  border-bottom: 1px solid rgba(168,85,247,0.4);
  transition: border-color .15s, color .15s;
  text-decoration: none;
}
.fact-body a:hover { color: var(--violet-2); border-bottom-color: var(--violet); }
.fact-meta {
  font-size: 0.78rem;
  color: var(--text-mute);
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* ─── BOOK FEATURE ─── */
.book-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.8rem, 7vw, 4.2rem);
  align-items: start;
}
@media (min-width: 720px) {
  .book-feature {
    grid-template-columns: minmax(220px, 280px) minmax(0, 38rem);
    gap: clamp(2.4rem, 5vw, 4rem);
    align-items: start;
  }
}
.book-feature-cover {
  position: relative;
}
/* On mobile, constrain the cover so it reads as a discrete book object
   sitting in space, rather than a full-width banner that visually merges
   with the page edges and crashes into the body text below. */
@media (max-width: 719px) {
  .book-feature-cover {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
}
.book-feature-cover img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow:
    0 25px 50px -8px rgba(0, 0, 0, 0.75),
    0 0 80px rgba(168, 85, 247, 0.22);
}
/* Pull quote inside book-feature-text uses a softer style that aligns
   flush-left with the surrounding body paragraphs (no left-border indent),
   so on mobile the quote does not appear shifted to the right of the body. */
.book-feature-text blockquote.pull {
  padding: 1rem 0 1rem 0;
  margin: 1.6rem 0;
  border-left: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
}
.book-feature-meta {
  font-size: 0.92rem !important;
  color: var(--muted) !important;
  line-height: 1.6 !important;
  padding-top: 1rem !important;
  margin-top: 1.6rem !important;
}

/* ─── NOTES LIST ─── */
.notes-list { list-style: none; padding: 0; }
.note-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  padding: 1.85rem 0;
  border-bottom: 1px solid var(--line);
  transition: background .2s var(--ease);
}
.note-item:hover { background: rgba(168,85,247,0.025); }
@media (min-width: 720px) {
  .note-item { grid-template-columns: 8rem 1fr auto; gap: 2.4rem; align-items: baseline; padding: 2rem 0; }
}
.note-item:first-child { border-top: 1px solid var(--line); }
.note-date {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
  white-space: nowrap;
  font-weight: 500;
}
.note-link { display: block; }
.note-title {
  font-size: clamp(1.3rem, 2.1vw, 1.55rem);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.025em;
  line-height: 1.22;
  transition: color .15s var(--ease);
}
.note-link:hover .note-title { color: var(--violet-2); }
.note-excerpt {
  margin-top: 0.55rem;
  color: var(--text-3);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 38rem;
}
.note-arrow {
  font-size: 1rem;
  color: var(--text-mute);
  transition: transform .2s var(--ease), color .15s;
  font-weight: 500;
}
.note-link:hover .note-arrow { transform: translateX(4px); color: var(--violet); }

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.95rem 1.55rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: all .2s var(--ease);
  border: 1px solid transparent;
  border-radius: 10px;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn-primary {
  background: var(--grad-violet-2);
  color: #fff;
  border-color: rgba(168,85,247,0.5);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 8px 24px rgba(168,85,247,0.32),
    0 2px 6px rgba(168,85,247,0.18);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 12px 32px rgba(168,85,247,0.42),
    0 4px 10px rgba(168,85,247,0.24);
}
.btn-ghost {
  color: var(--text);
  border-color: var(--line-strong);
  background: rgba(255,255,255,0.02);
}
.btn-ghost:hover {
  border-color: var(--violet);
  background: rgba(168,85,247,0.08);
  color: var(--violet-2);
}
.btn-arrow::after {
  content: "→";
  display: inline-block;
  transition: transform .2s var(--ease);
}
.btn:hover .btn-arrow::after,
.btn-arrow:hover::after { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }
@media (max-width: 480px) {
  /* On narrow screens, a 3-button row wraps to an unbalanced 2 + 1 — stack
     it column-wise instead. 2-button rows are left inline since they fit
     fine and look cleaner at this width. Content-sized, left-aligned. */
  .btn-row:has(> *:nth-child(3)) {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
  }
}

/* ─── ARTICLE ─── */
.article-header {
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.article-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 80% 0%, rgba(168,85,247,0.10) 0%, transparent 60%);
  pointer-events: none;
}
.article-header > * { position: relative; }
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 1.6rem;
  font-weight: 500;
}
.article-title {
  font-size: var(--t-h1);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
  max-width: 22ch;
  color: var(--text);
}
.article-body { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(4rem, 8vw, 6rem); }
.article-body .prose {
  max-width: 38rem;
  margin: 0 auto;
  font-size: 1.13rem;
  line-height: 1.72;
  color: var(--text-2);
}
.article-body .prose h3 {
  font-size: 1.55rem;
  margin-top: 2.5em;
  margin-bottom: 0.5em;
  letter-spacing: -0.025em;
  color: var(--text);
}
.article-footer {
  border-top: 1px solid var(--line);
  padding: 2.4rem 0 4rem;
  font-size: 0.85rem;
  color: var(--text-mute);
}
.article-footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.article-footer a { color: var(--text-3); transition: color .15s; }
.article-footer a:hover { color: var(--violet-2); }

/* ─── PHOTO MOSAIC (editorial layout) ─── */
.photo-mosaic {
  display: grid;
  gap: 0.85rem;
  margin-top: 2.4rem;
  grid-template-columns: 1fr;
}
.photo-mosaic figure {
  margin: 0;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--line);
  transition: border-color .25s var(--ease);
  aspect-ratio: 4 / 3;
}
.photo-mosaic figure:hover { border-color: var(--line-violet); }
.photo-mosaic figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease-out);
}
.photo-mosaic figure:hover img { transform: scale(1.025); }
.photo-mosaic figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.2rem 1rem 0.85rem;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(248,250,252,0.85);
  font-weight: 500;
  background: linear-gradient(0deg, rgba(7,9,15,0.92) 0%, rgba(7,9,15,0.4) 60%, transparent 100%);
  pointer-events: none;
}

/* Tablet — 2 cols */
@media (min-width: 640px) {
  .photo-mosaic { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop — uniform 3 cols, no item dominates */
@media (min-width: 880px) {
  .photo-mosaic { grid-template-columns: repeat(3, 1fr); }
  /* Reset legacy span classes so all tiles render uniform */
  .photo-mosaic .m-hero,
  .photo-mosaic .m-wide,
  .photo-mosaic .m-tall,
  .photo-mosaic .m-medium,
  .photo-mosaic .m-banner,
  .photo-mosaic .m-square {
    grid-column: auto;
    aspect-ratio: 4 / 3;
  }
}

/* ─── BOOK SECTION (editorial) ─── */
.book-hero {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 720px) {
  .book-hero {
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(2.5rem, 5vw, 4rem);
  }
}
.book-cover {
  margin: 0;
  width: 100%;
  max-width: 28rem;
  justify-self: center;
}
@media (min-width: 720px) { .book-cover { justify-self: start; max-width: none; } }
.book-cover img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,0.55))
          drop-shadow(0 6px 12px rgba(168,85,247,0.10));
}
.book-info p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0;
}
.book-spec {
  margin: 1.6rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 1rem 2.4rem;
  justify-content: start;
}
@media (min-width: 720px) { .book-spec { grid-template-columns: repeat(4, auto); } }
.book-spec > div { display: grid; gap: 0.3rem; }
.book-spec dt {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 600;
  margin: 0;
}
.book-spec dd {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* Inside the book — editorial extracts, no boxy cards */
.book-inside {
  margin-top: clamp(3rem, 5vw, 4rem);
  padding-top: clamp(2.5rem, 4vw, 3.5rem);
  border-top: 1px solid var(--line);
}
.book-inside-label {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--violet-2);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.book-inside-label::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: var(--violet);
  opacity: 0.7;
}
/* ─── INSIDE THE BOOK — editorial pull-quotes ─── */
.book-pullquotes {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.4rem 3rem;
}
@media (min-width: 720px) {
  .book-pullquotes { grid-template-columns: 1fr 1fr; gap: 3rem 4rem; }
}
.book-pullquote {
  margin: 0;
  position: relative;
  padding: 2.6rem 0 0 0;
}
.book-pullquote::before {
  content: "\201C"; /* left double quotation mark */
  position: absolute;
  top: -0.7rem;
  left: -0.4rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 5.5rem;
  line-height: 1;
  color: var(--violet);
  opacity: 0.85;
  font-weight: 400;
  pointer-events: none;
}
.book-pullquote p {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--text);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.008em;
  font-family: Georgia, "Times New Roman", serif;
}
.book-pullquote footer {
  margin-top: 1.1rem;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--violet-2);
  font-weight: 600;
  font-style: normal;
  font-family: inherit;
}
.book-pullquote footer::before {
  content: "— ";
  color: var(--text-mute);
  letter-spacing: 0;
}

/* ─── READER REVIEWS — testimonial cards ─── */
.book-reviews-wrap {
  margin-top: clamp(3rem, 5vw, 4rem);
  padding-top: clamp(2rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
}
.book-reviews {
  margin-top: 1.8rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 720px) {
  .book-reviews { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
}
.book-review {
  margin: 0;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.4rem 1.5rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.book-review:hover {
  border-color: var(--line-violet);
  background: rgba(168,85,247,0.04);
}
.book-review-stars {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--violet-2);
  line-height: 1;
}
.book-review blockquote {
  margin: 0;
}
.book-review blockquote p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--text);
  font-weight: 400;
  letter-spacing: -0.005em;
  font-style: normal;
}
.book-review blockquote p::before { content: "\201C"; color: var(--text-3); margin-right: 0.05em; }
.book-review blockquote p::after { content: "\201D"; color: var(--text-3); margin-left: 0.05em; }
.book-review figcaption {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 600;
  margin-top: auto;
}

/* Editions — tighter, more typographic */
.book-editions {
  margin-top: clamp(3rem, 5vw, 4rem);
  padding-top: clamp(2.5rem, 4vw, 3.5rem);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
}
@media (min-width: 720px) { .book-editions { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } }
.book-edition {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--line-strong);
  transition: border-color .2s var(--ease);
}
.book-edition:hover { border-top-color: var(--violet); }
.book-edition-lang {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--violet-2);
  font-weight: 600;
  margin-bottom: 0.7rem;
}
.book-edition-title {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--text);
  margin-bottom: 0.85rem;
}
.book-edition-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--violet-2);
}
.book-edition-meta {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-3);
  flex: 1;
  margin: 0;
}
.book-edition-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.1rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--violet-2);
  border-bottom: 1px solid rgba(168,85,247,0.3);
  padding-bottom: 1px;
  align-self: flex-start;
  transition: border-color .15s, color .15s;
  text-decoration: none;
}
.book-edition-link:hover {
  color: var(--violet);
  border-bottom-color: var(--violet);
}

/* ─── SHARE ROW ─── */
.share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  padding: clamp(2rem, 4vw, 3rem) 0 0;
  margin: 0 auto;
  max-width: 38rem;
}
.share-label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 600;
  margin-right: 0.5rem;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-strong);
  color: var(--text-2);
  transition: background .15s var(--ease), border-color .15s, color .15s, transform .15s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.share-btn:hover {
  background: rgba(168,85,247,0.12);
  border-color: var(--violet);
  color: var(--violet-2);
  transform: translateY(-1px);
}
.share-btn:active {
  transform: translateY(0);
  background: rgba(168,85,247,0.18);
}
.share-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}
.share-btn.copied {
  background: rgba(74,222,128,0.12);
  border-color: rgba(74,222,128,0.5);
  color: #4ADE80;
}

/* ─── NOTE MOCKUP — compact phone frame, journalistic placement ─── */
.note-mockup {
  margin: 0.5rem 0 1.6rem;
  padding: 0;
  width: 200px;
  float: right;
  margin-left: clamp(1.4rem, 3vw, 2.4rem);
  margin-right: 0;
}
.note-mockup-body {
  position: relative;
  padding: 8px;
  border-radius: 32px;
  background: linear-gradient(155deg, #2A2A2D 0%, #16161A 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.10),
    0 0 0 1.5px rgba(0,0,0,0.65),
    0 24px 50px -10px rgba(0,0,0,0.55),
    0 10px 20px -4px rgba(0,0,0,0.4);
}
.note-mockup-island {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 14px;
  background: #000;
  border-radius: 10px;
  z-index: 5;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.note-mockup-screen {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
  overflow: hidden;
}
.note-mockup figcaption {
  margin-top: 0.85rem;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
}

/* Text wraps cleanly around the floated mockup on desktop;
   stacks block-centered on narrower screens */
@media (max-width: 720px) {
  .note-mockup {
    float: none;
    width: min(220px, 70%);
    margin: 2rem auto;
  }
}

/* ─── PHOTOS ─── */
.photo-hero {
  width: 100%;
  max-width: 44rem;
  margin: 2.4rem 0 0.85rem;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  aspect-ratio: 3 / 2;
}
.photo-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-caption {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-top: 0.85rem;
  font-weight: 500;
}
.photo-grid {
  /* Legacy class — kept lightly defined as a fallback,
     real layout is via .photo-mosaic above */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  margin-top: 2.4rem;
}

/* ─── VENUE ─── */
.venue-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin-top: 2.5rem;
}
@media (min-width: 720px) and (max-width: 1023px) {
  .venue-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .venue-grid { grid-template-columns: repeat(4, 1fr); }
}
.venue {
  border: 1px solid var(--line);
  background: var(--bg-card);
  padding: 1.7rem 1.5rem;
  border-radius: 10px;
  transition: border-color .2s var(--ease), transform .25s var(--ease);
  position: relative;
  overflow: hidden;
}
.venue::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 100% 80% at 0% 0%, rgba(168,85,247,0.06) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.venue:hover { border-color: var(--line-violet); transform: translateY(-2px); }
.venue:hover::before { opacity: 1; }
.venue-year {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--violet-2);
  font-weight: 600;
}
.venue-name {
  font-size: 1.25rem;
  color: var(--text);
  margin-top: 0.6rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.venue-meta {
  font-size: 0.92rem;
  color: var(--text-3);
  margin-top: 0.55rem;
  line-height: 1.5;
}

/* ─── SPEAKING VENUES (photo cards) ─── */
.speaking-venues {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin-top: 0;
}
@media (min-width: 520px) and (max-width: 1023px) {
  .speaking-venues { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
}
@media (min-width: 1024px) {
  .speaking-venues { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
}
@media (min-width: 1200px) {
  .speaking-venues { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
}
.venue-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .2s var(--ease), transform .25s var(--ease);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.venue-card:hover { border-color: var(--line-violet); transform: translateY(-2px); }
.venue-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 28%;
  display: block;
}
/* Per-image crop overrides — these photos don't have the speaker dead-center
   in the source frame, so the default center-crop loses or clips the subject.
   Object-position-x shifts the visible window horizontally. */
.venue-card img[src*="speaking-close-orange"] {
  /* VELTINS-Arena: speaker is right-of-center with arms extended; shift the
     crop slightly right so the gesturing hand isn't clipped. */
  object-position: 62% 28%;
}
.venue-card img[src*="speaking-portugal-lyceum"] {
  /* Centro de Congressos do Estoril: speaker stands far right of the frame;
     anchor the crop to the right edge so he's actually visible. */
  object-position: 92% 28%;
}
.venue-card-body {
  padding: 0.95rem 1.05rem 1.05rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.venue-card .venue-year {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--violet-2);
  font-weight: 600;
}
.venue-card .venue-name {
  font-size: 0.98rem;
  color: var(--text);
  margin-top: 0.4rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.012em;
}
.venue-card .venue-meta {
  font-size: 0.78rem;
  color: var(--text-3);
  margin-top: 0.35rem;
  line-height: 1.45;
}

/* Ensure equal-height cards in the grid */
.speaking-venues { align-items: stretch; }
.speaking-venues > * { height: 100%; }

/* legacy, leftover (kept as no-op) */
.section-wide { width: 100%; }

/* ─── AWARDS ─── */
.award-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.8rem;
  margin-top: 2.5rem;
}
@media (min-width: 720px) { .award-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.award-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s var(--ease), transform .25s var(--ease);
}
.award-card:hover { border-color: var(--line-violet); transform: translateY(-2px); }
.award-card .photo-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #050609;
}
.award-card .photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ease-out);
}
.award-card:hover .photo-wrap img { transform: scale(1.04); }
.award-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  padding: 1.3rem 1.5rem 0.4rem;
  letter-spacing: -0.018em;
}
.award-meta {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 0 1.5rem 0.35rem;
  font-weight: 500;
}
.award-location {
  font-size: 0.82rem;
  color: var(--text-3);
  padding: 0 1.5rem 1.5rem;
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* ─── BOOK (legacy classes — see .book-stage above for the active layout) ─── */

/* ─── FORM ─── */
.form-card { display: grid; gap: 1.4rem; max-width: 36rem; }

/* ─── HONEYPOT — visually hidden, reachable for bots ─── */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

.field { display: grid; gap: 0.5rem; }
.field label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 600;
}
.field input,
.field textarea {
  font-family: 'Inter', sans-serif;
  font-size: 1.02rem;
  color: var(--text);
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line);
  padding: 0.85rem 1rem;
  outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
  border-radius: 8px;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus,
.field textarea:focus {
  border-color: var(--violet);
  background: rgba(168,85,247,0.04);
  box-shadow: 0 0 0 3px rgba(168,85,247,0.12);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-mute); opacity: 0.7; }
.form-status {
  font-size: 0.85rem;
  color: var(--text-mute);
  min-height: 1.2em;
  font-weight: 500;
}
.form-status.success { color: #4ADE80; }
.form-status.error { color: #FB7185; }

/* ─── NOTICE ─── */
.notice {
  font-size: 0.84rem;
  color: rgba(251,113,133,0.82);
  border-left: 2px solid #FB7185;
  padding: 0.7rem 0 0.7rem 1rem;
  background: rgba(251,113,133,0.05);
  margin: 1.4rem 0;
  line-height: 1.55;
  border-radius: 0 6px 6px 0;
}
.notice code {
  background: rgba(251,113,133,0.12);
  padding: 0.05em 0.35em;
  border-radius: 3px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* ─── FOOTER ─── */
.foot {
  border-top: 1px solid var(--line);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2.5rem;
  /* margin-top removed — the foot's own padding-top already provides the
     separation. The previous 2rem margin combined with the preceding section's
     padding-bottom and the foot's padding-top to produce ~150px of dead space
     between the last button and the first footer line on mobile. */
  background: var(--bg-soft);
  color: var(--text-3);
  font-size: 0.92rem;
}
@media (max-width: 480px) {
  /* On narrow screens, also tighten the section padding so end-of-page
     sections don't leave a large void before the footer. */
  .foot { padding-top: clamp(2.5rem, 5vw, 3rem); }
}
.foot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
  .foot-grid { grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; gap: 2rem; }
}
.foot-brand h3 {
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 0.5rem;
}
.foot-brand h3 .em {
  background: var(--grad-violet-2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.foot-brand p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-3);
  max-width: 26ch;
  margin: 0;
}
.foot-col-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 1rem;
}
.foot-col ul { list-style: none; padding: 0; margin: 0; }
.foot-col li + li { margin-top: 0.55rem; }
.foot-col a {
  color: var(--text-2);
  font-size: 0.92rem;
  text-decoration: none;
  border-bottom: none;
  transition: color .15s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.foot-col a:hover { color: var(--violet-2); }
.foot-col a .ext {
  font-size: 0.7rem;
  color: var(--text-mute);
  transition: color .15s var(--ease);
}
.foot-col a:hover .ext { color: var(--violet-2); }
.foot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.8rem;
  font-size: 0.82rem;
  color: var(--text-mute);
}
.foot-bottom .legal-links {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
}
.foot-bottom a {
  color: var(--text-mute);
  border-bottom: none;
  transition: color .15s var(--ease);
}
.foot-bottom a:hover { color: var(--text-2); }

/* Legacy footer classes retained for backward compatibility */
.foot-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: end;
}
@media (min-width: 720px) { .foot-inner { grid-template-columns: 1fr auto; } }
.foot-mark {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.foot-mark .em {
  background: var(--grad-violet-2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.foot-mark .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 8px rgba(168,85,247,0.6);
}
.foot-meta {
  font-size: 0.82rem;
  color: var(--text-mute);
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-weight: 500;
}
.foot-link {
  color: var(--text-3);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color .15s, color .15s;
}
.foot-link:hover { border-bottom-color: var(--violet); color: var(--violet-2); }

/* ─── 404 ─── */
.notfound {
  min-height: 65vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem 0;
}
.notfound-code {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--violet-2);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1.4rem;
}

/* ─── REVEAL ─── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  }
  .reveal.in { opacity: 1; transform: none; }
}