/* Ambvos: sapphire, graphite, silver, chrome. Applied across the entire UI. */
:root{
  --bg:#0b1526;
  --deep:#070f1c;
  --text:#e0e4eb;
  --muted:#a4afc1;
  --line:#414e63;
  --accent:#adb9e8;
  --sapphire:#345bd3;
  --silver:#c7ced9;
  --chrome:linear-gradient(180deg,#ffffff 5%,#e6eaf1 29%,#a2adbf 49%,#f5f7fb 53%,#c7ceda 77%,#8c98ae 100%);
  --chrome-line:linear-gradient(90deg,#8c98ae 0%,#f5f7fb 32%,#a2adbf 58%,#e6eaf1 78%,#8c98ae 100%);
}
body{background-color:var(--bg);background-image:linear-gradient(115deg,#0e1b30 0%,#0b1628 52%,#081221 100%)}
::selection{background:#344fa7;color:#fff}
button:hover,a:hover{color:#f4f6fb}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #94aaff;outline-offset:5px}
.draft-bar{color:#9da9bf;background:#080e18;border-bottom:1px solid #2b3b55}
.hero{background:#090f19;color:#e9edf3}
.hero:after{background:linear-gradient(180deg,#070e1ba3,transparent 38%,transparent 60%,#081321b8)}
.nav{border-bottom-color:#c7cfdd55}
.brand{color:#e4e8ef;text-shadow:0 1px 1px #070b13}
.brand-dot{color:#8195d3}
.nav-links a{color:#dde2ed}
.nav-links a:hover{color:#fff;text-decoration:underline;text-decoration-color:#7d91db;text-underline-offset:7px}
.hero-caption{color:#d7dde7}
.intro{position:relative;border-bottom:1px solid #566179}
.intro-panel{position:relative;isolation:isolate;--corner-size:clamp(260px,32vw,420px)}
.intro-panel>.intro,.study-stage>.intro{width:min(1240px,82%);padding-left:0}
/* The continuous silver spine sits on both panel edges; leaves turn inward. */
.intro-panel:before{content:'';position:absolute;top:0;left:0;width:var(--corner-size);height:var(--corner-size);background:url('assets/eotix-silver-border-subtle.png') left top/contain no-repeat;pointer-events:none;z-index:-1}
/* A matching, rotated corner closes the page beneath the footer. */
.portfolio-page{position:relative;isolation:isolate;--corner-size:clamp(260px,32vw,420px)}
.portfolio-page:after{content:'';position:absolute;right:0;bottom:0;width:var(--corner-size);height:var(--corner-size);background:url('assets/eotix-silver-border-subtle.png') left top/contain no-repeat;transform:rotate(180deg);pointer-events:none;z-index:-1}
.portfolio-page>footer{padding-right:clamp(24px,3vw,44px);padding-bottom:clamp(64px,7vw,96px)}
.intro:after{content:'';position:absolute;bottom:-1px;left:0;width:72px;height:2px;background:var(--chrome-line)}
.intro h1{color:#e3e7ef;letter-spacing:-.055em}
.intro h1 .message-word{display:inline-block;color:#d5dce9;padding-right:.12em}
@supports(background-clip:text){
  .intro h1 .message-word{background:var(--chrome);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
.eyebrow{color:#b5c0d7;letter-spacing:.16em}
.intro .eyebrow:before{content:'';display:inline-block;width:20px;height:2px;vertical-align:middle;margin-right:12px;background:var(--chrome-line)}
.intro-copy,.about p:not(.eyebrow){color:#c5cedd}
.text-link{color:#d6def4;border-bottom:1px solid #7487c5}
.text-link:hover{border-bottom-color:#d6dfee}
.section-heading h2,.about h2{color:#e0e5ee}
.section-heading>p,.meta{color:var(--muted)}
.film-image{background:#080f1b;border:1px solid #626d805e;box-shadow:0 1px 0 #dae3f117}
.film:hover .film-image{border-color:#899ed8}
.play{background:linear-gradient(180deg,#344359ed,#182a44f2);border:1px solid #a5b2c58c;box-shadow:inset 0 1px 0 #eef3ff28;color:#eef2f9}
.duration{color:#dce4f4;background:#081322d9}
.film-copy h3{color:#e0e5ed}
.film:hover .film-copy h3{color:#bfcdfa}
.extra-cuts summary{color:#c6d0e7}
.extra-cuts summary::marker{color:#798ecf}
.cut-row{color:#d5dce9}
.cut-row:hover{color:#fff;background:#ffffff04}
.music-section{background:linear-gradient(115deg,#070e1a 0%,#0a1425 58%,#0e1c31 100%);border-block:1px solid #414e65}
.music-section .eyebrow{color:#b5c0d7}
.music-art{border:1px solid #8f9bae;background:linear-gradient(140deg,#697487,#d5dae4 3%,#556275 6%,#101b2a 20%,#2c3b50 75%,#a0aab9 97%,#4c5c75);box-shadow:14px 14px 0 #101b2b,15px 15px 0 #59677d;padding:13px}
.music-subtitle{color:#aebbd0}
.music-section h2{color:#e3e7ee}
.button{border:1px solid #a3aec0;background:linear-gradient(180deg,#3e4a5e,#25324a 48%,#1a2941 50%,#263a59);box-shadow:inset 0 1px 0 #edf1fa36;color:#e3e9f4}
.button:hover{background:linear-gradient(180deg,#495d80,#223b61);border-color:#d0d8e5}
.photo-tabs{gap:6px}
.photo-tabs button{padding:9px 15px;color:#aab6ca;border:1px solid #515d7280;background:#0d1727}
.photo-tabs button:hover{color:#fff;border-color:#8598c6}
.photo-tabs button[aria-pressed=true]{color:#111b2e;border:1px solid #d4dce8;background:linear-gradient(180deg,#f1f3f7,#bec7d6 48%,#aab6c9 49%,#d2d9e5);box-shadow:inset 0 -3px 0 #4365d0}
.photo{background:#080e19;border:1px solid #7c89982b}
.photo:hover{border-color:#a4b8e9}
.words-section{background:linear-gradient(110deg,#091628 0%,#08111f 58%,#060e1a 100%);border-block:1px solid #334057}
.words-section:before{background:linear-gradient(90deg,#08111f,#08111fa8),url('assets/bw-0.jpg') center/cover;opacity:.14;filter:grayscale(1)}
.writing-item h3{color:#d9e0eb}
.writing-item:hover h3{color:#b8c8f7}
.about>img{border:1px solid #69758b55}
footer{color:#d2d9e6;border-top-color:#515e76}
dialog{background:#081221 linear-gradient(135deg,#0c192c 0%,#091423 55%,#070f1c 100%);border:1px solid #8794a9;color:#e0e6f0;box-shadow:0 0 0 4px #0c192b,0 20px 80px #000b}
dialog::backdrop{background:#030810e6}
.dialog-head{padding-bottom:18px;border-bottom:1px solid #6b7b935e}
.dialog-head h2{color:#e4e9f2}
.dialog-head .eyebrow{color:#b2c0e0}
.close{background:linear-gradient(180deg,#52617b,#273c5b);border:1px solid #91a0b8;color:#e8edf5;box-shadow:inset 0 1px 0 #dae5fa28}
.close:hover{background:#38517c;color:#fff}
.reader{color:#d7dfea}
@media(max-width:760px){
  .intro-panel,.portfolio-page{--corner-size:180px}
  .intro-panel>.intro,.study-stage>.intro{width:88%;padding-left:48px}
  .intro-panel .intro .eyebrow,.study-stage .intro .eyebrow{font-size:11px;letter-spacing:.12em}
  .photo-tabs{gap:6px}
  .photo-tabs button{padding:8px 13px}
  .music-art{padding:10px;box-shadow:10px 10px 0 #101b2b,11px 11px 0 #59677d}
  .dialog-head{padding-bottom:14px}
}
@media(forced-colors:active){.intro h1 .message-word{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}.photo-tabs button[aria-pressed=true]{border:2px solid Highlight}}