/* Reference composition: background → illuminated geometry → portrait → type. */
.hero {
  isolation: isolate;
  background: radial-gradient(ellipse at 78% 35%, #17646a 0%, #07363a 40%, #00181a 76%);
}
.hero__glow { z-index: 0; }
.hero__visual {
  z-index: 1;
  opacity: 1;
  transform: none;
  transition: none;
}
.hero__diagram {
  width: min(76vw, 1160px);
  right: 3vw;
  opacity: .62;
  filter: blur(.2px) drop-shadow(0 0 12px #e0bd6b20);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000);
}
.hero__portrait {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, #00181ae8 0%, #00181ab0 30%, transparent 57%),
              linear-gradient(0deg, #00181a 0%, transparent 18%);
}
.hero__copy { z-index: 4; }
.hero__index { z-index: 4; }
.hero__author { display: none; }
/* Keep the author's vertical photograph intact at every screen size. */
.author__portrait .portrait-art {
  aspect-ratio: auto;
  display: block;
}
.author__portrait .portrait-art img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}
@media (max-width: 1000px) {
  .hero__portrait {
    top: auto;
    height: 600px;
    object-position: 80% center;
  }
  .hero__diagram { right: -3%; width: min(124vw, 980px); top: 50%; }
  .hero::after {
    background: linear-gradient(0deg, #00181a 0%, transparent 14%),
                linear-gradient(180deg, #00181a88 0%, transparent 55%);
  }
}
@media (max-width: 680px) {
  .hero__portrait { height: 500px; object-position: 82% center; }
  .hero__visual { height: 470px; margin-top: 20px; }
  .hero__diagram { width: 158vw; right: -15vw; top: 48%; opacity: .56; }
}

/* Desktop art direction follows the 1280 × 631 reference proportions. */
.site-header { height:clamp(60px,4.7vw,80px); padding:0 4.4vw; background:#032c22; border-color:#dbc38a26; }
.site-header .brand__mark { width:30px; stroke:#c8aa66; stroke-width:1.2; }
.site-header .brand b { font-size:12px; }
.site-header .brand small { font-family:var(--serif); font-size:10px; letter-spacing:.18em; }
.site-header .desktop-nav { gap:18px; font-size:8px; letter-spacing:0; }
.site-header .header-cta { border:1px solid #c4a76a; border-radius:30px; padding:8px 14px; font-size:9px; letter-spacing:0; color:#e7cc89; }
.hero { display:block; min-height:570px; height:44.65vw; max-height:820px; padding:3.65vw 6.75vw 2vw; background:linear-gradient(110deg,#032d25 0%,#064637 65%,#0c5342 100%); }
.hero::before { display:none; }
.hero__glow { display:none; }
.hero__portrait { inset:0; width:100%; height:100%; object-fit:contain; object-position:right bottom; filter:none; }
.hero::after { background:linear-gradient(90deg,#02291f77,transparent 50%),linear-gradient(0deg,#02291f44,transparent 9%); }
.hero__copy { padding:0; width:44%; max-width:640px; }
.hero .eyebrow { margin:0 0 1.5vw -1.7vw; font-size:clamp(7px,.7vw,10px); letter-spacing:.1em; white-space:nowrap; color:#c9b67f; gap:14px; }
.hero .eyebrow i { width:23px; }
.hero h1 { font-family:Georgia,'Times New Roman',serif; font-size:clamp(78px,6.85vw,122px); line-height:.9; font-weight:400; letter-spacing:-.045em; margin:0 0 2.1vw; }
.hero h1 em { display:inline-block; transform:scaleX(.9); transform-origin:left center; font-weight:400; color:#e9d8b2; text-shadow:none; }
.hero__subtitle { font-family:Georgia,'Times New Roman',serif; font-size:clamp(21px,1.8vw,31px); line-height:1.05; color:#e2d5b7; margin:0 0 1.1vw; }
.hero__lead { max-width:390px; width:90%; font-size:clamp(11px,.94vw,16px); line-height:1.45; color:#c1c8c3; margin-bottom:12px; }
.hero__extra { max-width:360px; font-size:clamp(8px,.7vw,11px); letter-spacing:.16em; text-transform:uppercase; line-height:1.8; color:#b4ad8d; margin:0; }
.hero__extra::before { content:""; display:block; width:60px; height:1px; background:#ceb475; margin-bottom:10px; }
.hero__actions { gap:24px; margin-top:1.7vw; align-items:center; }
.hero__actions .button { min-width:200px; padding:14px 24px; font-size:10px; background:#e8d5a3; border:1px solid #cfbb88; box-shadow:none; color:#273125; }
.hero__actions .text-link { font-size:8px; letter-spacing:.1em; padding:12px 0; white-space:nowrap; }
.hero__audience { margin:17px 0 0; font-size:clamp(7px,.62vw,10px); letter-spacing:.01em; color:#a9aa92; }
.hero__visual { position:absolute; inset:0; height:100%; max-height:none; margin:0; }
.hero__diagram { width:47vw; max-width:850px; left:32.5vw; right:auto; top:-1.3vw; transform:none; opacity:.44; filter:none; mask-image:none; -webkit-mask-image:none; }
.hero__diagram-main { stroke:#d9b467; stroke-width:1; }
.hero__diagram-ghost { stroke:#efc777; stroke-width:1.1; stroke-dasharray:13 10; }
.hero__diagram-accent { stroke:#efc87d; stroke-width:.8; opacity:.8; }
.hero__diagram-horizontal { stroke:#d9b467; }
.hero__diagram-rings { fill:none; stroke:#c6a665; stroke-width:.6; opacity:.22; }
.hero__diagram-numbers { fill:#d6b66e; font-family:Georgia,serif; font-size:31px; text-anchor:middle; }
.hero__diagram-stars,.hero__diagram-rings,.hero__diagram g[fill="url(#diagram-halo)"] { display:none; }
.hero__signature { position:absolute; z-index:4; right:3.5vw; top:7.5vw; display:flex; flex-direction:column; align-items:center; color:#c7b37b; gap:15px; }
.hero__signature p { writing-mode:vertical-rl; font-size:8px; text-transform:uppercase; letter-spacing:.13em; margin:0 0 18px; }
.hero__signature p span { opacity:.65; }
.hero__signature i { width:1px; height:38px; background:#c7b37b; }
.hero__signature b { font-size:18px; font-weight:400; line-height:1; }
.hero__signature small { text-align:center; font-size:7px; line-height:1.7; text-transform:uppercase; }
@media(min-width:1600px) { .hero__lead { max-width:510px; } .hero__extra { max-width:450px; } }
@media(max-width:1100px) and (min-width:761px) {
  .hero { height:650px; padding-top:60px; }
  .hero h1 { font-size:76px; }
  .hero__copy { width:53%; }
  .hero__portrait { width:100%; max-width:none; left:0; }
  .hero__actions { gap:16px; }
  .hero__actions .button { min-width:170px; padding:14px 18px; }
  .hero__signature { right:20px; top:100px; }
  .hero__diagram { width:62vw; left:27vw; top:35px; }
}
@media(max-width:760px) {
  .site-header { height:68px; padding:0 20px; }
  .site-header .header-cta { display:none; }
  .site-header.menu-open .desktop-nav { inset:68px 0 0; font-size:25px; gap:24px; }
  .hero { height:auto; max-height:none; min-height:0; padding:42px 24px 440px; }
  .hero__copy { width:100%; max-width:520px; }
  .hero .eyebrow { font-size:7px; white-space:normal; line-height:1.8; margin:0 0 22px; max-width:330px; }
  .hero .eyebrow i { flex-shrink:0; width:18px; }
  .hero h1 { font-size:clamp(54px,12.8vw,86px); line-height:.9; margin-bottom:24px; }
  .hero__subtitle { font-size:21px; line-height:1.13; margin-bottom:18px; }
  .hero__lead { font-size:12px; max-width:380px; width:100%; }
  .hero__extra { font-size:8px; max-width:320px; margin-top:16px; }
  .hero__actions { flex-direction:row; flex-wrap:wrap; gap:12px 20px; margin-top:22px; }
  .hero__actions .button { min-width:185px; padding:14px 18px; font-size:9px; }
  .hero__actions .text-link { font-size:8px; }
  .hero__audience { font-size:7px; margin-top:16px; max-width:320px; }
  .hero__portrait { top:auto; bottom:0; left:auto; right:-35px; width:760px; max-width:none; height:428px; object-fit:contain; object-position:right bottom; }
  .hero__visual { position:absolute; top:auto; bottom:0; height:440px; }
  .hero__diagram { width:610px; max-width:none; left:calc(50% - 350px); top:-22px; opacity:.44; }
  .hero::after { background:linear-gradient(0deg,#02291f44,transparent 16%); }
  .hero__signature { display:none; }
}
/* No simulated spotlights, golden haze or sparkle overlays on the portrait. */

/* Keep navigation available throughout mobile and tablet pages. */
@media (max-width:1000px) {
  html { scroll-padding-top:84px; }
  body { padding-top:68px; }
  .site-header, .site-header.menu-open {
    position:fixed; inset:0 0 auto; height:68px; z-index:40;
    box-shadow:0 4px 18px #001b2020;
  }
  .site-header.menu-open .desktop-nav {
    inset:68px 0 0; overflow-y:auto; overscroll-behavior:contain;
    justify-content:flex-start; padding:30px 20px max(30px,env(safe-area-inset-bottom));
    gap:18px; font-size:clamp(21px,4vw,28px);
  }
  .site-header .menu-toggle { min-width:44px; min-height:44px; cursor:pointer; }
}
@media (max-width:760px) {
  .hero { padding-bottom:370px; }
  .hero__portrait {
    width:clamp(540px,145vw,680px); height:auto; aspect-ratio:1672 / 941;
    right:12px; bottom:0; top:auto; left:auto;
  }
  .hero__visual { height:370px; }
}