:root {
  --ink: #071512;
  --pine: #0c211c;
  --gold: #f2c84b;
  --cream: #f4efe4;
  --muted: #aab7ae;
  --line: rgba(244, 239, 228, .17);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--cream); font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.6; }
a { color: inherit; }
.skip { position: fixed; left: 1rem; top: -8rem; z-index: 50; padding: .75rem 1rem; background: var(--gold); color: var(--ink); }
.skip:focus { top: 1rem; }

header { height: 84px; padding: 0 clamp(1.25rem, 5vw, 5rem); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); position: absolute; z-index: 10; width: 100%; }
.brand { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; font-size: .86rem; letter-spacing: .18em; font-weight: 600; line-height: 1.15; }
.brand b { display: block; color: var(--gold); font-weight: 500; }
.mark { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(242,200,75,.7); border-radius: 50%; color: var(--gold); font: 1.25rem/1 "Italiana", serif; }
nav { display: flex; gap: clamp(1rem, 3vw, 2.5rem); }
nav a { text-transform: uppercase; text-decoration: none; font-size: .72rem; letter-spacing: .16em; color: rgba(244,239,228,.78); }
nav a:hover, nav a:focus-visible { color: var(--gold); }

.hero { min-height: 94vh; padding: 10rem clamp(1.25rem, 8vw, 8rem) 5rem; display: grid; align-items: center; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); position: relative; overflow: hidden; background: radial-gradient(circle at 78% 42%, rgba(38,119,87,.22), transparent 29%), linear-gradient(120deg,#071512 30%,#0a1915 100%); }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.17) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.17) 1px,transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to right, transparent 8%, #000 50%, transparent 92%); }
.hero-copy { position: relative; z-index: 2; max-width: 760px; }
.eyebrow { color: var(--gold); font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
h1,h2,h3 { margin: 0; font-family: "Italiana", serif; font-weight: 400; line-height: .96; }
h1 { font-size: clamp(3.8rem, 7.5vw, 8.2rem); letter-spacing: -.035em; }
h1 em { color: var(--gold); font-weight: 400; }
.hero-copy > p:not(.eyebrow) { max-width: 640px; margin: 2rem 0; color: #c1cac3; font-size: clamp(1rem, 1.4vw, 1.22rem); }
.cta { display: inline-flex; gap: 2.8rem; align-items: center; padding: 1rem 1.25rem; border: 1px solid rgba(242,200,75,.6); text-decoration: none; text-transform: uppercase; letter-spacing: .15em; font-size: .72rem; }
.cta:hover,.cta:focus-visible { background: var(--gold); color: var(--ink); }
.signal { position: relative; aspect-ratio: 1; width: min(42vw, 540px); justify-self: center; display: grid; place-items: center; }
.ring { position: absolute; border: 1px solid rgba(242,200,75,.22); border-radius: 50%; }
.r1{inset:8%}.r2{inset:24%}.r3{inset:39%}
.signal::after { content:""; width: 1px; height: 118%; background: linear-gradient(transparent,var(--gold),transparent); transform: rotate(36deg); opacity: .32; }
.bird { position: absolute; width: 102px; height: 102px; display: grid; place-items:center; background: var(--gold); color: var(--ink); border-radius: 54% 46% 60% 40%; transform: rotate(-10deg); box-shadow: 0 0 70px rgba(242,200,75,.16); }
.bird b { font: 3.6rem/1 "Italiana",serif; transform: rotate(10deg); }
.bird i { position:absolute; right:-18px; top:28px; width:30px; height:20px; background:var(--gold); clip-path:polygon(0 20%,100% 50%,0 80%); }
.hero-note { position: absolute; left: clamp(1.25rem, 8vw, 8rem); bottom: 2rem; margin:0; color:#809088; font-size:.67rem; letter-spacing:.24em; }

.authors { padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 5vw, 5rem); background: #f0ece3; color: var(--ink); }
.section-intro { display:grid; grid-template-columns: 1fr 1.2fr 1fr; gap:2rem; align-items:end; margin-bottom:3rem; }
.section-intro .eyebrow { align-self:start; }
.section-intro h2,.about h2 { font-size:clamp(3rem,5vw,5.6rem); }
.section-intro > p:last-child { max-width:340px; color:#53615b; }
.author-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#a9aea9; }
.author-card { min-height: 620px; position:relative; overflow:hidden; text-decoration:none; background:#111; isolation:isolate; }
.art,.shade { position:absolute; inset:0; }
.art { background-position:center; background-size:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.scarlett .art { background-image:url("assets/scarlett-world.png"); background-position:62% center; }
.naomi .art { background-image:url("assets/naomi-world.png"); background-position:center; }
.scott .art { background-image:url("assets/scott-world.webp"); background-position:center 20%; }
.shade { background:linear-gradient(to bottom,rgba(3,8,7,.08) 16%,rgba(3,8,7,.9) 86%); }
.card-copy { position:absolute; inset:auto 0 0; padding:clamp(1.5rem,3vw,2.6rem); z-index:2; }
.card-copy p { margin:0 0 1rem; color:var(--gold); font-size:.68rem; letter-spacing:.2em; }
.card-copy h3 { font-size:clamp(3.2rem,4.8vw,5.6rem); color:white; }
.card-copy span { display:block; min-height:3.4rem; margin:1rem 0 1.5rem; color:rgba(255,255,255,.76); }
.card-copy strong { font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:white; }
.author-card:hover .art,.author-card:focus-visible .art { transform:scale(1.045); }
.author-card:hover strong,.author-card:focus-visible strong { color:var(--gold); }

.about { padding:clamp(5rem,10vw,9rem) clamp(1.25rem,8vw,8rem); display:grid; grid-template-columns:1fr 2fr; gap:4rem; background:var(--pine); }
.about > div { max-width:800px; }
.about p:last-child { max-width:650px; color:var(--muted); font-size:1.12rem; margin-top:2rem; }
footer { min-height:150px; padding:2.5rem clamp(1.25rem,5vw,5rem); display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; border-top:1px solid var(--line); color:#89968f; font-size:.75rem; }
footer p:nth-child(2){text-align:center} footer p:last-child{text-align:right}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:9rem}.signal{position:absolute;right:-22vw;top:18%;width:76vw;opacity:.48}.hero-copy{z-index:3}.section-intro{grid-template-columns:1fr}.author-grid{grid-template-columns:1fr}.author-card{min-height:560px}.about{grid-template-columns:1fr;gap:1.5rem}footer{grid-template-columns:1fr;gap:1.5rem;text-align:left!important}footer p:nth-child(2),footer p:last-child{text-align:left}
}
@media (max-width:560px){
  header{height:72px;padding:0 1rem}.brand{font-size:.7rem}.mark{width:32px;height:32px}nav a:last-child{display:none}h1{font-size:clamp(3.5rem,17vw,5rem)}.hero{min-height:820px}.hero-note{bottom:1rem}.authors{padding-inline:1rem}.author-card{min-height:520px}.card-copy h3{font-size:4.25rem}.about{padding-inline:1.25rem}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.art{transition:none}}