/* ZEN Real Property — Recruitment Deck
   Editorial Luxury vibe per high-end-visual-design Section 3
   Concentric Double-Bezel architecture, hairline rings, ambient shadows
*/

:root {
  --cream: #FDFBF7;
  --cream-2: #F4EFE6;
  --ink: #1c1c1c;
  --ink-2: #0f0f0f;
  --muted: #5a5048;
  --muted-dark: #a59c92;
  --gold-1: #cbb26a;
  --gold-2: #f8ed9f;
  --gold-grad: linear-gradient(135deg, #cbb26a 0%, #f8ed9f 100%);
  --bezel: cubic-bezier(0.32, 0.72, 0, 1);
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Montserrat', sans-serif;
  background: var(--cream);
  color: var(--ink);
  font-feature-settings: "ss01", "cv11";
}

/* Film grain overlay — Editorial Luxury signature */
.grain::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Display typography — Montserrat light/extralight for editorial luxury feel */
.display-serif {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  letter-spacing: -0.025em;
}

.eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.dark .eyebrow, [data-theme="dark"] .eyebrow { color: var(--muted-dark); }

/* ────────────────────────────────────────────────────────────
   Spacing scale — everything in the deck should use only these:
     --space-1 = 0.5rem    tight (inside cards)
     --space-2 = 0.75rem   between card meta + body
     --space-3 = 1.5rem    eyebrow → headline, headline → subtitle
     --space-4 = 3rem      headline → first content block
     --space-5 = 5rem      between major content blocks
   ──────────────────────────────────────────────────────────── */

/* Section base — every slide fills the viewport, content vertically centered.
   - min-height: 100dvh — full-screen cinematic feel
   - justify-content: safe center — centers content; on overflow falls back
     to flex-start so long slides don't get clipped */
.section {
  min-height: 100dvh;
  padding: 5rem 8% 5rem;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  position: relative;
}
@media (max-width: 768px) {
  .section { padding: 4rem 1.25rem; min-height: 100dvh; }
}

/* Cover keeps the same padding rhythm as the rest — no longer an outlier */
#s01 .split {
  align-items: center !important;
}

/* Center-balanced text-heavy slides (no right-column visual element).
   Without this the headline + subtitle hugged the left half and the right
   half read as empty space. Center alignment gives both sides equal weight. */
#s07 > .reveal,
#s07 > h2,
#s07 > p,
#s11b > .reveal:first-of-type,
#s11b > h2,
#s11b > p,
#s13 > .reveal:first-of-type,
#s13 > h2,
#s13 > p {
  max-width: 64ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Smooth section boundaries — cream↔dark transition fades over ~80px.
   Without this the page break felt like a PowerPoint slide-end. With the
   gradient overlay it reads as a continuous editorial spread. */
.section.dark + .section.cream::before,
.section.cream + .section.dark::before {
  content: "";
  position: absolute;
  top: -80px;
  left: 0;
  right: 0;
  height: 80px;
  pointer-events: none;
  z-index: 5;
}
.section.dark + .section.cream::before {
  background: linear-gradient(to bottom, transparent 0%, var(--ink) 100%);
}
.section.cream + .section.dark::before {
  background: linear-gradient(to top, transparent 0%, var(--cream) 100%);
}

/* Default vertical rhythm for direct children of a section.
   Author can override per-element with inline margin-top when needed. */
.section > * + * { margin-top: 1.5rem; }
.section > .bento + *,
.section > * + .bento { margin-top: 3rem; }
.section > .reveal + .bento,
.section > .bento + .reveal { margin-top: 3rem; }

.section.cream { background: var(--cream); color: var(--ink); }
.section.dark { background: var(--ink); color: var(--cream); }
.section.dark .muted { color: var(--muted-dark); }
.section.cream .muted { color: var(--muted); }

/* Hairline divider */
.hairline { height: 1px; background: rgba(28,28,28,0.08); }
.dark .hairline { background: rgba(253,251,247,0.10); }

/* Double-Bezel card — outer shell + inner core, concentric radii */
.bezel {
  background: rgba(28,28,28,0.04);
  padding: 8px;
  border-radius: 2rem;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 30px 60px -25px rgba(45,30,10,0.10);
  /* Make bezel a flex column so its inner card stretches to match
     equal-height grid rows. Without this, bezel is forced taller by the
     grid while bezel-inner stays content-height — leaving a visible empty
     band below the card content. */
  display: flex;
  flex-direction: column;
}
.bezel > .bezel-inner { flex: 1 1 auto; }
.section.dark .bezel {
  background: rgba(253,251,247,0.05);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 40px 80px -30px rgba(0,0,0,0.6);
}
.bezel-inner {
  background: var(--cream);
  border-radius: calc(2rem - 0.5rem);
  padding: 2rem;
  box-shadow:
    0 1px 1px rgba(255,255,255,0.6) inset,
    0 0 0 1px rgba(28,28,28,0.05);
  position: relative;
  overflow: hidden;
}
.section.dark .bezel-inner {
  background: var(--ink-2);
  box-shadow:
    0 1px 1px rgba(255,255,255,0.06) inset,
    0 0 0 1px rgba(253,251,247,0.06);
  color: var(--cream);
}

/* Pill CTA with nested arrow */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem 0.875rem 1.75rem;
  border-radius: 9999px;
  background: var(--gold-grad);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: transform 0.6s var(--bezel), box-shadow 0.6s var(--bezel);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 10px 30px -10px rgba(203,178,106,0.5);
}
.pill .arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: rgba(28,28,28,0.08);
  transition: transform 0.5s var(--bezel), background 0.5s var(--bezel);
}
.pill:hover { transform: scale(1.02); box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 16px 36px -10px rgba(203,178,106,0.6); }
.pill:hover .arrow { transform: translate(2px, -1px) scale(1.06); background: rgba(28,28,28,0.14); }
.pill:active { transform: scale(0.98); }

.pill-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 9999px;
  border: 1px solid rgba(28,28,28,0.12);
  background: transparent;
  color: inherit;
  font-weight: 500;
  font-size: 0.85rem;
  transition: all 0.5s var(--bezel);
}
.section.dark .pill-ghost { border-color: rgba(253,251,247,0.18); }
.pill-ghost:hover { transform: translateY(-1px); border-color: rgba(28,28,28,0.25); }
.section.dark .pill-ghost:hover { border-color: rgba(253,251,247,0.35); }

/* Gold accent — used once per slide */
.gold-text {
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gold-underline {
  background-image: var(--gold-grad);
  background-position: 0 92%;
  background-repeat: no-repeat;
  background-size: 100% 0.18em;
}

/* Hero numbers — bumped to weight 500 so the gold gradient actually carries.
   Earlier weight 200 was too thin: outline-style numbers got swallowed by
   cream/dark backgrounds. 500 keeps the elegance but has enough stroke
   for the gradient fill to read as a real number, not a ghost. */
.hero-num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: clamp(7rem, 22vw, 18rem);
  line-height: 0.9;
  letter-spacing: -0.06em;
}

/* Headline scale */
.h-display { font-size: clamp(2.5rem, 5.6vw, 5rem); line-height: 1.02; font-weight: 700; letter-spacing: -0.02em; }

/* Notion section title — verbatim from the source file */
.section-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  line-height: 1.02;
  text-wrap: balance;
}
.h-1 { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.05; font-weight: 700; letter-spacing: -0.01em; }
.h-2 { font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.15; font-weight: 600; letter-spacing: -0.005em; }
.body-lg { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.55; font-weight: 400; }
.body { font-size: 1rem; line-height: 1.6; font-weight: 400; }

/* Reveal animations — staggered fade-up + blur (high-end-visual-design 5C)
   Animation plays the transition; an explicit final-state declaration
   ensures content remains visible even if animation is paused (e.g. in
   headless browsers or background tabs). */
@keyframes revealIn {
  from { opacity: 0; transform: translateY(40px); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.reveal { opacity: 0; transform: translateY(40px); filter: blur(8px); }
.reveal.in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  animation: revealIn 0.9s var(--bezel) both;
}
.reveal.in[data-delay="1"] { animation-delay: 0.1s; }
.reveal.in[data-delay="2"] { animation-delay: 0.2s; }
.reveal.in[data-delay="3"] { animation-delay: 0.3s; }
.reveal.in[data-delay="4"] { animation-delay: 0.4s; }
.reveal.in[data-delay="5"] { animation-delay: 0.5s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; }
  .reveal.in { animation: none; }
}

/* Section number tag — hidden per user request (was distracting) */
.section-no { display: none; }

/* Bento grid utilities */
.bento { display: grid; gap: 1.25rem; }
@media (min-width: 768px) {
  .bento-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bento-asym { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); }
  .bento-asym > .span-8 { grid-column: span 8; }
  .bento-asym > .span-7 { grid-column: span 7; }
  .bento-asym > .span-6 { grid-column: span 6; }
  .bento-asym > .span-5 { grid-column: span 5; }
  .bento-asym > .span-4 { grid-column: span 4; }
  .bento-asym > .row-2 { grid-row: span 2; }
}

/* Split layout */
.split { display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: center; }
@media (min-width: 1024px) { .split { grid-template-columns: 1.05fr 0.95fr; gap: 6rem; } }

/* Compensation breakdown grid — sales + rentals side by side */
@media (min-width: 768px) { .comp-grid { grid-template-columns: 1fr 1fr !important; } }

/* Career ladder table — semantic, viewport-bulletproof */
.career-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.5rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.92rem;
}
.career-table thead th {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 0.25rem 1rem;
  font-weight: 500;
  opacity: 0.65;
}
.career-table thead th.t-lvl { width: 3.25rem; }
.career-table thead th.t-pos { min-width: 13rem; }
.career-table tbody tr {
  background: rgba(28,28,28,0.04);
  box-shadow: 0 0 0 1px rgba(28,28,28,0.05) inset;
  border-radius: 1rem;
}
.career-table tbody td {
  padding: 1rem 1rem;
  vertical-align: middle;
  line-height: 1.35;
}
.career-table tbody td:first-child { border-radius: 1rem 0 0 1rem; }
.career-table tbody td:last-child { border-radius: 0 1rem 1rem 0; }
.career-table td.t-lvl {
  font-weight: 300;
  font-style: italic;
  font-size: 1.25rem;
  opacity: 0.4;
  letter-spacing: 0.04em;
  width: 3.25rem;
}
.career-table td.t-pos strong {
  font-weight: 600;
  font-size: 1rem;
}
.career-table td.t-pos small {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.2rem;
}
.career-table td.t-perk {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 400;
}

/* Dark variant for the Executive tier */
.career-table-dark tbody tr {
  background: #1c1c1c;
  color: var(--cream);
  box-shadow: 0 0 0 1px rgba(253,251,247,0.08) inset, 0 1px 1px rgba(255,255,255,0.06) inset;
}
.career-table-dark td.t-perk { color: var(--muted-dark); }
.career-table-dark td.t-pos small { color: var(--muted-dark); }

/* Partner card — Tier IV */
.partner-card {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 1.25rem;
  padding: 1.75rem 2rem;
  align-items: center;
  background: linear-gradient(135deg, #1c1c1c 0%, #2a2014 100%);
  color: var(--cream);
  border-radius: 1.25rem;
  box-shadow: 0 0 0 1px rgba(203,178,106,0.25) inset;
}
@media (min-width: 768px) {
  .partner-card { grid-template-columns: 3.25rem minmax(14rem, 1fr) minmax(20rem, 2fr); }
}
.partner-card .partner-lvl {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 1.5rem;
  opacity: 0.5;
}
.partner-card .partner-reward {
  background: rgba(255,255,255,0.04);
  padding: 1rem 1.25rem;
  border-radius: 0.85rem;
  box-shadow: 0 0 0 1px rgba(203,178,106,0.18) inset;
}

/* Responsive: collapse table to stacked cards below 720px */
@media (max-width: 720px) {
  .career-table thead { display: none; }
  .career-table, .career-table tbody, .career-table tr, .career-table td { display: block; width: 100%; }
  .career-table tbody tr { padding: 1rem 1.25rem; margin-bottom: 0.5rem; border-radius: 1rem; }
  .career-table tbody td { padding: 0.4rem 0; border-radius: 0 !important; }
  .career-table tbody td::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 9rem;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: 0.7;
    margin-right: 0.5rem;
  }
  .career-table td.t-lvl { font-size: 1rem; opacity: 0.5; padding-bottom: 0.5rem; }
  .career-table td.t-pos { font-size: 1.1rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(28,28,28,0.08); margin-bottom: 0.5rem; }
}

/* Scroll-progress bar */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: rgba(28,28,28,0.06); z-index: 110;
}
.progress-bar {
  height: 100%;
  width: 0%;
  background: var(--gold-grad);
  transition: width 0.1s linear;
}

/* Side nav dots */
.side-nav {
  position: fixed;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 90;
}
.side-nav a {
  width: 8px; height: 8px;
  border-radius: 9999px;
  background: rgba(28,28,28,0.18);
  transition: all 0.4s var(--bezel);
}
.side-nav a:hover { background: rgba(28,28,28,0.4); transform: scale(1.4); }
.side-nav a.active { background: var(--gold-1); width: 22px; }
@media (max-width: 768px) { .side-nav { display: none; } }

/* Decorative number block (compensation hero) — same weight bump 200→500 */
.money-hero {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: clamp(3.25rem, 11vw, 10rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
  word-break: keep-all;
  overflow-wrap: normal;
}
@media (max-width: 480px) {
  .money-hero { font-size: 3.25rem; line-height: 1; }
}

/* Career ladder */
.ladder-step {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(253,251,247,0.08);
}
.ladder-step:last-child { border-bottom: none; }
.ladder-step .step-no {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 1.5rem;
  opacity: 0.4;
  min-width: 2rem;
  letter-spacing: 0.02em;
}

/* Quote */
.quote {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* Phosphor-like hairline icon containers */
.icon-frame {
  width: 3rem; height: 3rem;
  border-radius: 9999px;
  border: 1px solid rgba(28,28,28,0.10);
  display: inline-flex; align-items: center; justify-content: center;
}
.section.dark .icon-frame { border-color: rgba(253,251,247,0.15); }

/* Number ticker */
.tick-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Speaker engagement cue — legacy class kept for any residual markup */
.speaker-cue {
  display: none;
}
.section.dark .speaker-cue { border-top-color: rgba(253,251,247,0.20); }
.speaker-cue::before { content: "→ "; opacity: 0.7; }
.speaker-cue .label {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-style: normal;
  margin-right: 0.5rem;
  opacity: 0.6;
}

/* Next-steps 3-card grid (slide 17) — fills full width, no empty right side */
.next-steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 900px) {
  .next-steps-grid { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
}
.next-step {
  background: rgba(28,28,28,0.03);
  border-radius: 1.25rem;
  padding: 2rem 2rem 2.25rem;
  box-shadow: 0 0 0 1px rgba(28,28,28,0.06) inset;
}
.next-step .next-num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 1rem;
}

/* Honest tradeoffs — 2×2 card grid filling the slide width */
.honest-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .honest-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
.honest-card {
  background: rgba(253,251,247,0.04);
  border-radius: 1.25rem;
  padding: 1.75rem 2rem;
  box-shadow: 0 0 0 1px rgba(253,251,247,0.08) inset, 0 1px 1px rgba(255,255,255,0.04) inset;
}
.honest-card .honest-num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Honest requirements list (legacy — kept for backwards compatibility) */
.req {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px dashed rgba(253,251,247,0.12);
}
.section.cream .req { border-bottom-color: rgba(28,28,28,0.10); }
.req:last-child { border-bottom: none; }
.req .check { color: var(--gold-1); font-size: 1.25rem; }

/* Roadmap row + Done state with gold fill + strikethrough */
.roadmap-row {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 2rem;
  padding: 1.75rem 1.5rem;
  border-top: 1px solid rgba(28,28,28,0.10);
  align-items: baseline;
}
.roadmap-row:last-child { border-bottom: 1px solid rgba(28,28,28,0.10); }
.roadmap-stage {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 1.05rem;
  opacity: 0.45;
}
.roadmap-stage-done {
  font-weight: 600;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 1;
}
.roadmap-done {
  background: linear-gradient(90deg, rgba(203,178,106,0.18) 0%, rgba(248,237,159,0.10) 50%, rgba(248,237,159,0.0) 100%);
  border-radius: 1rem;
  margin: 0 -1.5rem;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}
.roadmap-strike {
  text-decoration: line-through;
  text-decoration-color: rgba(28,28,28,0.45);
  text-decoration-thickness: 2px;
}
.roadmap-strike-muted {
  text-decoration: line-through;
  text-decoration-color: rgba(28,28,28,0.25);
  color: var(--muted);
  margin-top: 0.5rem;
  opacity: 0.75;
}

/* Two-up site grid on dark slide 04 */
@media (min-width: 768px) {
  #zen-sites-grid { grid-template-columns: 1fr 1fr !important; }
}

/* Three-up site grid for sites slide (s03b) */
@media (min-width: 900px) {
  #zen-sites-grid-3 { grid-template-columns: repeat(3, 1fr) !important; }
}

/* Two-up training guides grid (Sales Module + Intern Checklist) */
@media (min-width: 768px) {
  #training-guides { grid-template-columns: 1fr 1fr !important; }
}

/* Clickable training-guide cards — Notion links */
.guide-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.45s var(--bezel);
}
.guide-card:hover { transform: translateY(-4px); }
.guide-card:hover .bezel-inner { box-shadow: 0 0 0 1px rgba(203,178,106,0.35) inset, 0 1px 1px rgba(255,255,255,0.08) inset; }

/* Site-card images must show the WHOLE page top, not crop to center */
.site-card .photo img { object-position: center top; }

/* Clickable site cards — for ZEN web property showcase */
.site-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.45s var(--bezel);
}
.site-card:hover { transform: translateY(-4px); }
.site-card .site-caption {
  margin-top: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.site-card .site-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.005em;
}
.site-card .site-url {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  color: var(--gold-1);
  letter-spacing: 0.02em;
  font-weight: 500;
}
.site-card .site-desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 400;
}
.section.dark .site-card .site-desc { color: var(--muted-dark); }

/* Photo placeholder treatment */
.photo {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #2a2520 0%, #3a3128 100%);
}
.photo::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(248,237,159,0.08), transparent 60%);
  pointer-events: none;
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Cover hero specific */
.cover-bg {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(203,178,106,0.18), transparent 60%),
    linear-gradient(180deg, #0f0f0f 0%, #1c1c1c 60%, #15110c 100%);
}

/* Smooth focus rings (accessibility) */
:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 4px; border-radius: 4px; }

/* Mobile single-column collapse */
@media (max-width: 768px) {
  .bento-3, .bento-asym { grid-template-columns: 1fr; }
  .bento-asym > * { grid-column: span 1 !important; grid-row: span 1 !important; }
  .split { grid-template-columns: 1fr; gap: 2rem; }
  .section-no { display: none; }
}