:root { --black:#070909; --ink:#111312; --cream:#f0ecdf; --orange:#ff5a1f; --mint:#91f3e2; --dim:rgba(255,255,255,.55); --line:rgba(255,255,255,.18); --wide:1240px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:var(--black); color:#fff; font:16px/1.55 Arial,Helvetica,sans-serif; }
img { display:block; width:100%; }
a { color:inherit; }
button,input,select,textarea { font:inherit; }
.skip-link { position:fixed; top:-5rem; left:1rem; z-index:100; padding:.8rem 1rem; background:var(--mint); color:var(--black); }
.skip-link:focus { top:1rem; }
.shell-header { position:fixed; inset:0 0 auto; z-index:30; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:2rem; min-height:62px; padding:0 max(2rem,calc((100vw - var(--wide))/2 + 2rem)); border-bottom:1px solid rgba(255,255,255,.14); background:rgba(7,9,9,.76); backdrop-filter:blur(18px); }
.draft-logo { font:800 1rem/1 "Courier New",monospace; letter-spacing:.08em; text-decoration:none; }
.shell-header nav { display:flex; gap:2.7rem; }
.shell-header nav a,.shell-header > p { color:rgba(255,255,255,.5); font:700 .68rem/1 "Courier New",monospace; letter-spacing:.15em; text-decoration:none; text-transform:uppercase; }
.shell-header nav a:hover,.shell-header nav a:focus-visible { color:var(--mint); }
.shell-header > p { justify-self:end; display:flex; align-items:center; gap:.55rem; margin:0; }
.shell-header > p span { width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 12px var(--mint); }
.draft-hero { position:relative; display:flex; min-height:100svh; align-items:center; overflow:hidden; border-bottom:1px solid var(--line); }
.hero-backdrop,.hero-scan { position:absolute; inset:0; }
.hero-backdrop img { height:100%; object-fit:cover; object-position:50% 40%; filter:contrast(1.08) saturate(.58); }
.hero-backdrop::after { position:absolute; inset:0; content:""; background:linear-gradient(90deg,rgba(7,9,9,.96) 0%,rgba(7,9,9,.75) 50%,rgba(7,9,9,.25)),linear-gradient(0deg,rgba(7,9,9,.7),transparent 55%); }
.hero-scan { z-index:1; opacity:.1; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.23) 4px); mix-blend-mode:overlay; }
.hero-content { position:relative; z-index:2; width:min(900px,90vw); padding:8rem max(2rem,calc((100vw - var(--wide))/2 + 2rem)) 6rem; }
.system-label { margin:0 0 1.6rem; color:rgba(255,255,255,.55); font:700 .7rem/1.3 "Courier New",monospace; letter-spacing:.18em; text-transform:uppercase; }
h1,h2,h3 { margin-top:0; font-weight:800; line-height:.88; letter-spacing:-.045em; }
h1 { margin-bottom:1.4rem; font-size:clamp(5.8rem,13vw,11.5rem); }
.role-line { margin:0 0 2.8rem; color:var(--mint); font:700 clamp(.78rem,1.3vw,1rem)/1.4 "Courier New",monospace; letter-spacing:.08em; text-transform:uppercase; }
.hero-bio { max-width:660px; color:rgba(255,255,255,.72); font-size:clamp(1rem,1.6vw,1.25rem); }
.hero-actions { display:flex; gap:1.6rem; align-items:center; margin-top:2.2rem; }
.hero-actions a { font:800 .72rem/1 "Courier New",monospace; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; }
.primary-link { padding:.95rem 1.25rem; background:var(--cream); color:var(--black); clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px)); }
.primary-link:hover,.primary-link:focus-visible { background:var(--orange); }
.quiet-link { padding-bottom:.3rem; border-bottom:1px solid rgba(255,255,255,.42); color:rgba(255,255,255,.6); }
.hero-status { position:absolute; right:max(2rem,calc((100vw - var(--wide))/2 + 2rem)); bottom:3rem; z-index:2; display:grid; gap:.3rem; padding:1rem; border:1px solid rgba(255,255,255,.3); background:rgba(7,9,9,.55); font-family:"Courier New",monospace; text-align:right; }
.hero-status span { color:var(--orange); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; }
.hero-status strong { font-size:.74rem; letter-spacing:.05em; }
.signal-strip { overflow:hidden; border-bottom:1px solid var(--line); background:#0d1010; }
.signal-strip div { display:flex; width:max-content; gap:3rem; padding:.9rem 0; color:rgba(255,255,255,.52); font:700 .68rem/1 "Courier New",monospace; letter-spacing:.12em; animation:signal 28s linear infinite; }
.signal-strip span::first-letter { color:var(--orange); }
@keyframes signal { to { transform:translateX(-50%); } }
.profile { max-width:var(--wide); margin:0 auto; padding:8rem 2rem; }
.profile-heading { display:grid; grid-template-columns:.55fr 1.45fr; align-items:start; }
h2 { margin-bottom:2rem; font-size:clamp(4.3rem,8vw,8rem); }
.profile-copy { display:grid; grid-template-columns:1fr .8fr; gap:7vw; margin-left:27.5%; }
.profile-copy .lead { font-size:clamp(1.3rem,2vw,1.8rem); font-weight:700; line-height:1.3; }
.profile-text { max-width:600px; }
.profile-text > p:not(.lead) { margin-top:1.25rem; color:rgba(255,255,255,.58); }
.profile-photo { position:relative; align-self:start; border:1px solid rgba(255,255,255,.28); }
.profile-photo img { aspect-ratio:4/3; object-fit:cover; object-position:38% center; filter:grayscale(.75) contrast(1.12); }
.profile-photo span { position:absolute; right:.7rem; bottom:.6rem; font:700 .6rem/1 "Courier New",monospace; letter-spacing:.11em; }
.role-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:6rem; border:1px solid var(--line); }
.role-grid article { min-height:260px; padding:1.5rem; border-right:1px solid var(--line); background:rgba(255,255,255,.02); }
.role-grid article:last-child { border-right:0; }
.role-grid article:hover { background:rgba(145,243,226,.05); }
.role-grid article > p { margin:0 0 3rem; color:var(--orange); font:700 .68rem/1 "Courier New",monospace; letter-spacing:.12em; text-transform:uppercase; }
.role-grid h3 { margin-bottom:1.2rem; font-size:clamp(2rem,3.8vw,3.8rem); }
.role-grid article > span { color:rgba(255,255,255,.5); font-size:.82rem; }
.experience-log { display:grid; grid-template-columns:.55fr 1.45fr; gap:2rem; margin-top:8rem; }
.log-heading h2 { margin:0; }
.log-list { border-top:1px solid rgba(255,255,255,.55); }
.log-list p { display:grid; grid-template-columns:5rem 1.5fr .5fr; gap:1rem; margin:0; padding:1rem 0; border-bottom:1px solid var(--line); }
.log-list span { color:var(--orange); font:700 .72rem/1.5 "Courier New",monospace; }
.log-list strong { font-size:.95rem; }
.log-list em { color:rgba(255,255,255,.46); font-size:.82rem; font-style:normal; text-align:right; }
.moments { padding:8rem max(2rem,calc((100vw - var(--wide))/2 + 2rem)); border-block:1px solid var(--line); background:#0b0e0e; }
.moments-heading { display:grid; grid-template-columns:1.2fr .8fr; gap:4vw; align-items:end; }
.moments-heading h2 { margin:0; }
.moments-heading > p { max-width:470px; margin:0 0 .8rem; color:rgba(255,255,255,.55); }
.spotlight-shell { margin-top:3rem; }
.spotlight-frame { position:relative; aspect-ratio:16/9; min-height:560px; overflow:hidden; border:1px solid rgba(255,255,255,.28); background:#000; }
.spotlight-frame::before { position:absolute; inset:-5%; content:""; background-image:var(--spotlight-image); background-position:center; background-size:cover; filter:blur(22px) brightness(.38) saturate(.65); transform:scale(1.08); }
.spotlight-frame::after { position:absolute; inset:0; z-index:2; content:""; background:linear-gradient(0deg,rgba(0,0,0,.9),transparent 52%); pointer-events:none; }
.spotlight-frame > img { position:relative; z-index:1; height:100%; object-fit:cover; filter:contrast(1.06) saturate(.72); transition:opacity .35s ease,transform 5s linear; }
.spotlight-frame > img.is-changing { opacity:0; }
.spotlight-shell.is-counting .spotlight-frame > img { transform:scale(1.025); }
.spotlight-caption { position:absolute; inset:auto 2rem 2rem; z-index:3; display:grid; gap:.4rem; max-width:75%; }
.spotlight-caption span { color:var(--mint); font:700 .7rem/1 "Courier New",monospace; letter-spacing:.12em; text-transform:uppercase; }
.spotlight-caption strong { font-size:clamp(2.2rem,4.8vw,5rem); line-height:.94; }
.spotlight-controls { display:grid; grid-template-columns:1fr auto; align-items:center; margin:1.25rem 0 1rem; }
.spotlight-controls p { margin:0; color:rgba(255,255,255,.52); font:700 .78rem/1 "Courier New",monospace; letter-spacing:.12em; }
.spotlight-controls > div { display:flex; overflow:hidden; border:1px solid rgba(255,255,255,.24); }
.spotlight-controls button { min-width:48px; min-height:44px; border:0; border-right:1px solid rgba(255,255,255,.18); background:transparent; color:rgba(255,255,255,.72); font:700 .72rem/1 "Courier New",monospace; text-transform:uppercase; cursor:pointer; }
.spotlight-controls button:last-child { border-right:0; }
.spotlight-controls #spotlight-toggle { min-width:82px; }
.spotlight-controls button:hover,.spotlight-controls button:focus-visible { background:rgba(145,243,226,.08); color:var(--mint); outline:0; }
.spotlight-thumbs { display:grid; grid-auto-flow:column; grid-auto-columns:78px; gap:.55rem; overflow-x:auto; padding:.15rem 0 .65rem; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.28) transparent; scroll-snap-type:x proximity; }
.spotlight-thumbs button { position:relative; width:78px; aspect-ratio:1; border:1px solid transparent; padding:0; overflow:hidden; background:#111; opacity:.4; cursor:pointer; scroll-snap-align:start; transition:opacity .2s ease,border-color .2s ease; }
.spotlight-thumbs button.is-active { border-color:var(--mint); opacity:1; }
.spotlight-thumbs button:focus-visible { opacity:1; border-color:var(--mint); outline:0; }
.spotlight-thumbs img { height:100%; object-fit:cover; filter:saturate(.35) brightness(.72); transition:filter .2s ease; }
.spotlight-thumbs button.is-active img,.spotlight-thumbs button:hover img { filter:none; }
.booking { display:grid; grid-template-columns:.75fr 1.25fr; gap:7vw; padding:9rem max(2rem,calc((100vw - var(--wide))/2 + 2rem)); }
.booking-intro h2 { margin-bottom:2rem; }
.booking-intro > p:not(.system-label) { max-width:430px; color:rgba(255,255,255,.55); }
.booking-intro > a { display:inline-block; margin-top:1.4rem; padding-bottom:.25rem; border-bottom:1px solid var(--mint); color:var(--mint); font:700 .7rem/1 "Courier New",monospace; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; }
.booking-form { display:grid; grid-template-columns:1fr 1fr; gap:1.3rem 1rem; padding:2rem; border:1px solid var(--line); background:rgba(255,255,255,.02); }
.field { display:flex; flex-direction:column; gap:.5rem; }
.field-full { grid-column:1/-1; }
label,legend { color:rgba(255,255,255,.6); font:700 .68rem/1 "Courier New",monospace; letter-spacing:.1em; text-transform:uppercase; }
input,select,textarea { width:100%; border:0; border-bottom:1px solid rgba(255,255,255,.32); border-radius:0; padding:.8rem .1rem; background:transparent; color:white; }
select { color-scheme:dark; }
textarea { resize:vertical; }
input:focus,select:focus,textarea:focus { border-bottom-color:var(--mint); outline:0; }
.language-field { grid-column:1/-1; display:flex; flex-flow:row wrap; gap:.8rem 1.4rem; margin:0; padding:1rem 0; border:0; border-bottom:1px solid var(--line); }
.language-field legend { width:100%; }
.language-field label { display:flex; align-items:center; gap:.35rem; letter-spacing:0; text-transform:none; }
.language-field input { width:auto; accent-color:var(--orange); }
.submit { grid-column:1/-1; min-height:54px; border:0; background:var(--cream); color:var(--black); font:800 .72rem/1 "Courier New",monospace; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; }
.submit:hover,.submit:focus-visible { background:var(--orange); }
.form-note { grid-column:1/-1; margin:-.35rem 0 0; color:rgba(255,255,255,.4); font-size:.7rem; text-align:center; }
footer { display:grid; grid-template-columns:1fr 1fr 1fr; gap:2rem; align-items:center; padding:2.2rem max(2rem,calc((100vw - var(--wide))/2 + 2rem)); border-top:1px solid var(--line); color:rgba(255,255,255,.5); font:700 .68rem/1.5 "Courier New",monospace; }
footer p { margin:0; text-align:center; }
footer a { justify-self:end; }
footer small { grid-column:1/-1; }
.mobile-book { display:none; }
@media (max-width:850px) {
  .shell-header { grid-template-columns:1fr auto; padding-inline:1.2rem; }
  .shell-header nav { gap:1rem; }
  .shell-header > p { display:none; }
  .hero-content { padding-inline:1.2rem; }
  .hero-status { right:1.2rem; }
  .profile,.moments,.booking { padding:6rem 1.2rem; }
  .profile-heading,.experience-log,.moments-heading,.booking { grid-template-columns:1fr; }
  .profile-copy { grid-template-columns:1fr; margin-left:0; }
  .profile-photo { max-width:620px; }
  .role-grid { grid-template-columns:1fr; }
  .role-grid article { border-right:0; border-bottom:1px solid var(--line); }
  .role-grid article:last-child { border-bottom:0; }
  .spotlight-frame { min-height:480px; }
  .spotlight-controls { gap:1rem; }
  .spotlight-thumbs { grid-auto-columns:72px; }
  footer { grid-template-columns:1fr; padding-inline:1.2rem; }
  footer p { text-align:left; }
  footer a { justify-self:start; }
  body { padding-bottom:56px; }
  .mobile-book { position:fixed; inset:auto 0 0; z-index:50; display:flex; min-height:56px; align-items:center; justify-content:center; background:var(--orange); color:var(--black); font:800 .72rem/1 "Courier New",monospace; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; }
}
@media (max-width:540px) {
  .shell-header nav a:first-child { display:none; }
  h1 { font-size:clamp(4.8rem,25vw,7rem); }
  h2 { font-size:clamp(3.6rem,18vw,5rem); }
  .hero-content { padding-top:7rem; }
  .hero-status { bottom:1.2rem; }
  .hero-actions { align-items:flex-start; flex-direction:column; }
  .role-grid article { min-height:230px; }
  .log-list p { grid-template-columns:4rem 1fr; }
  .log-list em { grid-column:2; text-align:left; }
  .spotlight-frame { aspect-ratio:4/5; min-height:0; }
  .spotlight-caption { inset:auto 1rem 1rem; max-width:92%; }
  .spotlight-caption strong { font-size:clamp(2rem,11vw,3rem); }
  .booking-form { grid-template-columns:1fr; padding:1.25rem; }
  .booking-form .field,.language-field,.submit,.form-note { grid-column:1; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .signal-strip div { animation:none; }
  .spotlight-frame > img { transition:none; }
  .spotlight-shell.is-counting .spotlight-frame > img { transform:none; }
}
