:root{--font-ui:Futura,"Futura PT","Futura Medium","Century Gothic",Avenir,"Avenir Next",Arial,sans-serif;--ink:#0b303c;--paper:#e9e6cc;--copper:#d7a675;--muted:#a8c2b8}*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;background:#103b48;color:var(--paper);font:14px/1.8 var(--font-ui);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid var(--copper);outline-offset:6px}::selection{background:var(--copper);color:var(--ink)}header{position:absolute;left:5%;right:5%;top:0;z-index:6;display:flex;height:110px;align-items:center;border-bottom:1px solid #c3d7c02e}.brand{font-size:18px;font-weight:700;letter-spacing:6px}.brand small{display:block;font-size:8px;font-weight:400;letter-spacing:2px;line-height:1.3;color:var(--muted)}.contact-link{margin-left:auto;margin-right:40px;font-size:10px;letter-spacing:2px;text-transform:uppercase}.motion{color:var(--paper);font-size:10px;letter-spacing:1.2px;border:0;border-bottom:1px solid #bfcfc04f;background:none;padding:8px 0;cursor:pointer}.motion:before{content:'≈';font-family:var(--font-ui);color:var(--copper);font-size:19px;margin-right:9px}.world{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#174753 0%,#123e4a 20%,#123a42 41%,#0a2e3b 55%,#071f2d 74%,#03131f 91%,#020e18 100%)}.scene{position:relative;height:0;width:100%;padding-bottom:833.333333%;isolation:isolate}.backdrop{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.art-strip{position:absolute;left:0;width:100%;overflow:hidden;contain:paint}.art-strip img{display:block;width:100%;height:100%;pointer-events:none}.route{position:absolute;left:0;width:100%;z-index:1;pointer-events:none}.animal{position:absolute;top:0;pointer-events:none}.animal img{width:100%;height:auto;display:block;pointer-events:none;user-select:none}.copy{position:absolute;left:8%;width:51%;z-index:3;pointer-events:none}.micro{font-size:9px;letter-spacing:2.8px;text-transform:uppercase;color:var(--muted)}h1,h2,.closing{font-family:var(--font-ui);font-weight:400}h1{font-size:clamp(88px,11.6vw,180px);line-height:.99;letter-spacing:-.06em;margin:32px 0 24px}h1 em,h2 em{font-weight:400;color:var(--copper)}h2{font-size:clamp(34px,4.4vw,66px);line-height:1.14;letter-spacing:-.04em;margin:20px 0 18px}.copy p{font-size:13px;line-height:1.85;color:var(--muted);max-width:340px}.copy.hero{left:6%;width:85%}.hero p{margin-left:3px}.copy.surface{left:8%;width:65%}.surface h2{font-size:clamp(28px,3.6vw,52px);display:inline}.surface .micro{display:block;margin-bottom:12px}.copy.reef{left:9%}.copy.coast{left:55%;width:40%}.copy.blue{left:10%}.copy.twilight{left:57%;width:39%}.copy.deep{left:9%}.depth-label{position:absolute;right:5%;writing-mode:vertical-rl;font-size:9px;letter-spacing:3.5px;color:#94b5aa80;z-index:1}.contact{position:absolute;left:9%;width:43%;z-index:4;scroll-margin-top:30px}.contact h2{font-size:clamp(36px,4.3vw,65px);margin:15px 0 20px}.contact>p{font-size:13px;color:var(--muted);max-width:380px}.contact form{max-width:430px}.contact label{display:block;color:var(--muted);font-size:10px;letter-spacing:1px;margin:19px 0 5px}.contact input,.contact textarea{width:100%;background:transparent;border:0;border-bottom:1px solid #e9e6cc55;border-radius:0;color:var(--paper);padding:8px 0;resize:vertical;font-size:13px;line-height:1.6}.contact input::placeholder,.contact textarea::placeholder{color:#93aaa5;opacity:1}.contact input:focus,.contact textarea:focus{outline:0;border-color:var(--copper)}.contact button{background:none;color:var(--paper);border:0;border-bottom:1px solid var(--copper);padding:12px 0 8px;font-size:12px;cursor:pointer;margin-top:10px}.contact .form-note{font-size:9px;color:#8fa8a2;line-height:1.7;margin:15px 0}.contact svg{margin-left:22px;vertical-align:middle}.closing{position:absolute;left:10%;width:80%;text-align:center;font-size:30px;line-height:1.35;letter-spacing:-.5px;z-index:2}.closing small{display:block;font:8px/1.8 var(--font-ui);letter-spacing:2px;color:var(--muted);margin-top:20px}.closing a{display:inline-block;font:9px/2 var(--font-ui);letter-spacing:2px;text-transform:uppercase;border-bottom:1px solid #e9e6cc55;margin-top:20px}footer{position:absolute;left:5%;right:5%;bottom:24px;z-index:4;display:flex;justify-content:space-between;color:#8ba79e;font-size:8px;letter-spacing:2px}.scene-mobile{padding-bottom:3481.250000%}.noscript{padding:30px;background:#123a43}
@media(min-width:1800px){.micro{font-size:12px}.copy p,.contact>p{font-size:16px;max-width:420px}.contact form{max-width:560px}.contact input,.contact textarea{font-size:16px}}
@media(min-width:601px) and (max-width:900px){header{height:80px}.hero{padding-top:25px}h1{font-size:12vw}.copy p{font-size:11px}.micro{font-size:8px;letter-spacing:1.8px}h2{font-size:30px}.surface h2{font-size:27px}.contact h2{font-size:31px}.contact input,.contact textarea{font-size:11px}.contact label{margin-top:10px}.contact .form-note{font-size:8px}.closing{font-size:25px}}
@media(max-width:600px){header{left:6%;right:6%;height:88px}.brand{font-size:15px;letter-spacing:4px}.brand small{font-size:6px;letter-spacing:1.4px}.contact-link{margin-right:18px;font-size:8px;letter-spacing:1px}.motion{font-size:8px;letter-spacing:.5px}.motion:before{font-size:15px;margin-right:5px}.copy{left:8%;width:84%}.copy.hero{left:7%;width:86%}h1{font-size:23vw;line-height:1.01;letter-spacing:-.06em;margin:27px 0 25px}h1 em{display:block;margin-left:8%}.hero p{font-size:11px;width:240px}.micro{font-size:8px;letter-spacing:1.7px}h2{font-size:9.6vw;line-height:1.18;letter-spacing:-.04em;margin:15px 0}.copy p{font-size:11px;max-width:270px}.copy.surface,.copy.reef,.copy.coast,.copy.blue,.copy.twilight,.copy.deep{left:9%;width:82%}.surface h2{font-size:9vw}.surface .micro{margin-bottom:16px}.depth-label{font-size:7px;letter-spacing:2px;right:5%}.contact{left:9%;width:82%}.contact h2{font-size:10vw;line-height:1.14}.contact>p{font-size:11px;max-width:270px}.contact label{font-size:9px;margin-top:16px}.contact input,.contact textarea{font-size:12px}.contact .form-note{font-size:8px}.contact button{font-size:11px}.closing{font-size:25px}.closing small{font-size:7px;letter-spacing:1.5px}footer{font-size:6px;letter-spacing:1px;bottom:15px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* The world clips only at the page edges. Do not promote the full scene/world. */
[data-swim-scene] {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
  /* Author top/height per route. Overflow stays visible to avoid cutting the art. */
}
[data-swim] {
  position: absolute;
  /* Author left/top/width, with responsive overrides. This is the still composition. */
  pointer-events: none;
  transform-origin: 50% 50%;
}
[data-swim] > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  /* Put permanent rotate / scaleX on the img, NEVER on its travelling parent. */
}
[data-swim][data-swimming] { will-change: transform; }
[data-motion-toggle]:disabled { cursor: default; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.motion{position:fixed;z-index:12;right:5%;bottom:22px;background:#0a2b37;border:1px solid #aec1ae55;padding:8px 14px}.motion:focus-visible{outline-offset:4px} footer{padding-right:170px}
/* Preserve every illustrated asset; compact spacing is authored independently. */
header{border:0}.copy,.contact{pointer-events:auto}.glass{padding:28px 32px;background:transparent;border:0!important;border-radius:4px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 12px 45px #00121a12}.copy.hero{width:52%;max-width:730px}.copy.hero h1{margin:0 0 25px;font-size:clamp(72px,9vw,140px)}.copy.hero p{margin:0 0 20px}.copy.surface{width:46%}.copy h2,.contact h2{font-size:clamp(30px,3.6vw,52px);margin:0 0 18px}.copy p{max-width:100%;margin-bottom:0}.copy.coast,.copy.twilight{left:53%;width:40%}.copy.blue,.copy.deep,.copy.reef{width:43%}.project-links{display:grid;gap:12px;font-size:13px}.project-links a{width:fit-content}.project-links a:hover,.copy a:hover,.contact a:hover{color:var(--copper)}.waterline{position:absolute;top:125px;left:0;width:100%;height:90px;border-bottom:1px solid #c6d6c43a;z-index:2;pointer-events:none}.boat{position:absolute;transform:scaleX(-1);width:clamp(190px,19vw,290px);height:auto;left:72%;bottom:-20%;transform-origin:50% 78%;animation:boat-bob 5.5s ease-in-out infinite;animation-play-state:running}.ocean-moving .boat{animation-play-state:running}@keyframes boat-bob{0%,100%{transform:translateY(2px) rotate(-1deg)}50%{transform:translateY(-3px) rotate(1.2deg)}}.contact{width:43%}.closing{font-size:20px}
@media(max-width:600px){.glass{padding:20px 22px}.copy.hero{width:86%;left:7%;padding:20px}.copy.hero h1{font-size:17vw;margin-bottom:12px}.copy.hero h1 em{margin:0}.copy.hero p{font-size:11px}.copy.hero a{font-size:12px}.copy.surface,.copy.reef,.copy.coast,.copy.blue,.copy.twilight,.copy.deep,.contact{left:9%;width:82%}.copy h2,.contact h2{font-size:8vw;line-height:1.16}.project-links{font-size:11px;gap:8px}.waterline{top:80px;height:36px}.boat{width:145px;left:61%;bottom:-40%}}
@supports not (backdrop-filter:blur(1px)){.glass{background:transparent}}
.boat{top:100%;bottom:auto;translate:0 -79.5%}.copy.archive{left:8%;width:44%}.copy.mobile-work{left:53%;width:40%}.copy.skills{left:8%;width:44%}.copy details{font-size:13px;color:var(--muted);margin-top:16px}.copy summary{cursor:pointer;color:var(--paper)}.copy ul{padding-left:18px}.copy li{margin:4px 0}
@media(max-width:600px){.boat{bottom:auto}.copy.archive,.copy.mobile-work,.copy.skills{left:9%;width:82%}.copy details{font-size:11px}}

.copy .project-meta{font-size:10px;letter-spacing:.6px;color:#d7a675;margin:0 0 13px}.copy details[open]{background:transparent;padding:12px;border-radius:3px}

/* Surface revision: a pale sky above a visibly darker, refracting ocean. */
:root{--surface-y:230px}
.world{background:linear-gradient(180deg,#326a72 0%,#154c5c 9%,#123e4a 20%,#123a42 41%,#0a2e3b 55%,#071f2d 74%,#03131f 91%,#020e18 100%)}
.sky{position:absolute;inset:0 0 auto;height:var(--surface-y);z-index:2;pointer-events:none;overflow:hidden;background:linear-gradient(180deg,#d8ddcb 0%,#e8dfbf 58%,#b4ccc1 92%,#84b1ae 100%)}
.sky-haze{position:absolute;inset:0;background:radial-gradient(ellipse at 27% 43%,#fff7d88f,transparent 29%),linear-gradient(174deg,transparent 35%,#f4e9c340 36%,transparent 46%)}
.distant-shore{position:absolute;bottom:-1px;left:-2%;width:58%;height:30px;opacity:.22;background:#326670;clip-path:polygon(0 88%,8% 73%,13% 80%,21% 51%,27% 57%,33% 38%,41% 63%,48% 48%,57% 72%,68% 62%,81% 89%,100% 100%,0 100%)}
header{z-index:7;color:#173d47;height:100px}.brand small{color:#34575b}.contact-link{font-size:9px;letter-spacing:1px;margin-right:0;padding:6px 0}
.waterline{top:var(--surface-y);height:0;border:0;z-index:4;box-shadow:0 1px 0 #def1db8a,0 5px 10px #e2efc928}
.surface-ripples{position:absolute;top:0;left:0;width:100%;height:70px;background:repeating-linear-gradient(176deg,transparent 0 12px,#d1e9cd28 13px,#9fcdc11c 14px,transparent 16px 24px);mask-image:linear-gradient(#000,transparent);-webkit-mask-image:linear-gradient(#000,transparent)}
.boat{top:0;bottom:auto;left:73%;width:clamp(190px,19vw,290px);translate:0 -79.5%;transform-origin:50% 79.5%;filter:drop-shadow(0 3px 2px #183f4338);animation:boat-bob 6.4s ease-in-out infinite;animation-play-state:paused}
.ocean-moving .boat{animation-play-state:running}
@keyframes boat-bob{0%,100%{transform:translate(0,1px) rotate(-.65deg)}35%{transform:translate(1px,-2px) rotate(.8deg)}70%{transform:translate(-1px,1px) rotate(-.2deg)}}
.water-light{position:absolute;left:0;top:var(--surface-y);width:100%;height:1800px;z-index:1;pointer-events:none;background:linear-gradient(114deg,transparent 8%,#bce0c710 13%,transparent 19%,transparent 37%,#d9efc912 40%,transparent 49%,transparent 69%,#c5e3ca0d 73%,transparent 81%),radial-gradient(ellipse at 25% 0%,#91cfc32e,transparent 64%);mask-image:linear-gradient(#000,transparent);-webkit-mask-image:linear-gradient(#000,transparent)}
.backdrop{opacity:.92}.copy.hero{top:300px!important}.glass,.copy details[open]{border-radius:8px;border:0!important}.glass{background:transparent;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.copy a,.contact a{font-size:12px}.project-links{font-size:12px;gap:10px}.copy summary{font-size:12px;padding:3px 0}.closing a{font-size:8px}.motion{display:none!important}
.animal[data-swimming] > img{animation:water-lift 8s ease-in-out infinite;animation-play-state:paused}
.ocean-moving .animal[data-swimming] > img{animation-play-state:running}
.animal[data-direction="right"][data-swimming] > img{animation-duration:11s}
.animal[data-species="A1093"][data-swimming] > img{animation-duration:16s}
@keyframes water-lift{0%,100%{translate:0 0}50%{translate:0 -3px}}
@media(max-width:900px) and (min-width:601px){:root{--surface-y:190px}.copy.hero{top:245px!important}.copy.hero h1{font-size:9vw}.boat{left:69%}}
@media(max-width:600px){:root{--surface-y:150px}header{height:80px}.sky-haze{background:radial-gradient(ellipse at 24% 30%,#fff7d866,transparent 55%)}.boat{width:145px;left:59%;top:0;bottom:auto}.copy.hero{top:190px!important}.copy.hero h1{font-size:16vw}.copy.hero p{margin-bottom:12px}.copy a,.contact a,.copy summary{font-size:11px}.water-light{height:1000px}.surface-ripples{height:48px}}
/* Keep expanded certificate details clear of contact on intermediate widths. */
@media(min-width:601px) and (max-width:900px){.scene-desktop .copy.deep{top:87%!important}}

/* Story edition: open sky, personal shallows, then a gradual portfolio descent.
   Underwater percentages stay local to the original illustrated scene. */
:root{--surface-y:clamp(650px,88svh,940px)}
.world{background:#071f2d}
#scene-host{position:relative;margin-top:var(--surface-y)}
.scene{background:linear-gradient(180deg,#397c82 0%,#236872 8%,#205c66 20%,#1a4f57 29%,#123d46 34%,#10343e 47%,#0b2c38 60%,#071f2d 74%,#03131f 91%,#020e18 100%)}
.sky{height:var(--surface-y);background:radial-gradient(ellipse at 74% 15%,#fff9dfaa,transparent 45%),linear-gradient(180deg,#d8e5dc 0%,#e4e8d5 50%,#f1dfb9 83%,#a8c7c0 100%)}
.sky:after{content:"";position:absolute;inset:0;opacity:.24;background:repeating-linear-gradient(178deg,transparent 0 61px,#fffaf01f 63px,transparent 67px 100px);pointer-events:none}
.sky-haze{background:radial-gradient(ellipse at 68% 58%,#fff7dc9c,transparent 42%),radial-gradient(ellipse at 20% 25%,#ffffff6b,transparent 40%)}
.distant-shore{height:43px;width:46%;opacity:.2}
.sky-intro{position:absolute;left:9%;top:clamp(155px,20svh,240px);z-index:5;width:min(700px,75%);color:#173c44;background:none;border:0;box-shadow:none;padding:0;backdrop-filter:none}
.sky-intro h1{font-size:clamp(100px,12vw,178px);line-height:.94;margin:0 0 28px;font-weight:400;letter-spacing:-.065em}
.sky-intro h1 em{color:#3e6b68;font-weight:400}
.sky-intro p{max-width:340px;font-size:14px;line-height:1.8;color:#3d6262}
header{left:9%;right:9%;height:106px}
.waterline{top:var(--surface-y);z-index:4;height:0;box-shadow:0 -2px 0 #eef4d066,0 3px 7px #d9eacb44}
.waterline:before{content:"";position:absolute;left:-10%;top:-16px;width:120%;height:40px;background:radial-gradient(ellipse at 50% 0%,#a4ccc58c,transparent 65%);opacity:.65;pointer-events:none}
.surface-ripples{height:125px;background:repeating-linear-gradient(177deg,transparent 0 14px,#dcf3d839 15px,#93cfc82a 16px,transparent 18px 33px);mask-image:linear-gradient(#000,transparent)}
.boat{left:70%;width:clamp(190px,21vw,320px);filter:drop-shadow(0 5px 3px #123e434a)}
.water-light{top:var(--surface-y);height:clamp(1500px,180vw,2800px);z-index:2;opacity:.9;background:linear-gradient(110deg,transparent 2%,#cbe6bf18 8%,transparent 14%,transparent 25%,#dcf2d01b 31%,transparent 35%,transparent 60%,#d9f1cd15 66%,transparent 72%),radial-gradient(ellipse at 45% 0%,#b5e3d556,transparent 64%);mask-image:linear-gradient(#000,transparent)}
.scene:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.28;background-image:radial-gradient(circle,#c8e5ce55 .7px,transparent 1px),radial-gradient(circle,#b3d3cd33 .8px,transparent 1.2px);background-size:89px 117px,173px 137px;background-position:21px 51px,71px 17px;mask-image:linear-gradient(#000,transparent 73%)}
.backdrop{opacity:.94}
.copy.personal{width:36%;max-width:540px}
.personal.personal-left{left:9%}.personal.personal-right{left:55%}
.personal p{line-height:1.95;max-width:33em}
.glass{border-radius:8px;background:transparent;border:0!important;box-shadow:0 16px 50px #00121a0c;padding:30px 34px;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}
.copy.surface{left:52%;width:40%}.copy.reef{left:8%;width:42%}.copy.coast{left:53%;width:40%}.copy.blue{left:8%;width:42%}.copy.twilight{left:54%;width:39%}.copy.mobile-work{left:53%;width:40%}.copy.archive{left:8%;width:44%}.copy.deep{left:53%;width:40%}.contact{left:9%;width:42%}
.copy h2{font-size:clamp(28px,3.3vw,49px)}
.copy p,.copy details{font-size:13px}.copy a,.contact a,.copy summary{font-size:12px}
footer{padding-right:0}
@media(min-width:601px) and (max-width:900px){
 :root{--surface-y:680px}.sky-intro{top:180px;width:80%}.sky-intro h1{font-size:110px}.sky-intro p{font-size:13px}.boat{left:67%;width:200px}
 .glass{padding:22px 24px}.copy.personal{width:42%}.personal.personal-right{left:51%}.copy h2{font-size:30px}.copy p,.copy details{font-size:12px}.copy.deep{top:88%!important}
}
@media(max-width:600px){
 :root{--surface-y:clamp(620px,88svh,800px)}header{left:8%;right:8%;height:83px}
 .sky-intro{left:8%;top:160px;width:84%}.sky-intro h1{font-size:clamp(76px,19vw,110px);line-height:1.02;margin-bottom:26px}.sky-intro h1 em{margin-left:0}.sky-intro p{max-width:260px;font-size:13px}
 .boat{left:56%;width:170px}.distant-shore{width:65%;height:27px}.surface-ripples{height:90px}.water-light{height:1400px}
 .copy.personal,.copy.surface,.copy.reef,.copy.coast,.copy.blue,.copy.twilight,.copy.deep,.copy.mobile-work,.copy.archive,.contact{left:8%;width:84%;max-width:none}
 .glass{padding:24px}.copy h2,.contact h2{font-size:clamp(28px,8vw,39px)}.copy p,.copy details{font-size:12px;line-height:1.85}.copy a,.copy summary,.contact a{font-size:11px}.copy.deep{top:89%!important}
}
/* Animated offscreen targets must not pan the clipped world when focused. */
@supports (overflow:clip){.world{overflow:clip}}

/* Local Futura is used when installed; no unlicensed font is distributed. */
h1 em,h2 em{font-style:normal}h1,h2,.closing{font-family:var(--font-ui)}
.glass{background:transparent;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:none}
.copy details[open]{background:transparent}
.contact .contact-icon{flex:0 0 18px;width:18px;height:18px;margin:0;vertical-align:middle}
.scene .contact>a,.scene .contact .project-links a{display:inline-flex;align-items:center;gap:10px}
/* overflow:clip is not a formatting context: retain child margin containment. */
@supports (overflow:clip){.world{display:flow-root}}
/* Name appears only in the hero; keep the remaining contact link on the right. */
.world > header{justify-content:flex-end}

/* Fixed anti-contrast site header */
header.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 68px !important;
  padding: 0 clamp(20px, 7vw, 90px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  z-index: 99999 !important;
  pointer-events: none !important;
  mix-blend-mode: difference !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: 0 !important;
}

.site-header .header-inner {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  pointer-events: none !important;
}

.site-header a,
.site-header nav {
  pointer-events: auto !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.site-header .brand-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-family: var(--font-ui) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-4px) !important;
  transition: opacity 0.35s ease, transform 0.35s ease !important;
}

.site-header.underwater .brand-link {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}


.site-header .brand-orca {
  height: 26px !important;
  width: auto !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  pointer-events: auto !important;
}

.site-header .brand-text {
  font-family: var(--font-ui) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 4px !important;
}

.site-header .brand-link:hover,
.site-header .nav-link:hover {
  opacity: 0.65 !important;
}


.site-header .header-nav {
  display: flex !important;
  align-items: center !important;
  gap: clamp(20px, 3.5vw, 40px) !important;
}

.site-header .nav-link {
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  font-weight: 350 !important;
  letter-spacing: 3.5px !important;
  text-transform: uppercase !important;
  transition: opacity 0.25s ease, letter-spacing 0.25s ease !important;
  padding: 6px 2px !important;
  white-space: nowrap !important;
  opacity: 0.9 !important;
}

.site-header .brand-text {
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 4px !important;
}

/* Scroll margin so cards are not concealed beneath the fixed header */
#projects, .scene-desktop #projects, .scene-mobile #projects {
  scroll-margin-top: 85px !important;
}
#contact, .scene-desktop #contact, .scene-mobile #contact {
  scroll-margin-top: 85px !important;
}
#surface {
  scroll-margin-top: 0 !important;
}

/* ========================================================================= */
/* 📖 KART OKUNABİLİRLİĞİ (SAF METİN - ARKA PLAN VE BORDER YOK)              */
/* ========================================================================= */
.glass {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.copy p,
.copy.personal p,
.contact > p {
  font-size: 15.5px !important;
  line-height: 1.75 !important;
  font-weight: 450 !important;
  color: #f1f7f5 !important;
  text-shadow: 0 1px 3px rgba(0, 12, 18, 0.6) !important;
  letter-spacing: 0.2px !important;
}

.copy h2,
.contact h2 {
  color: #ffffff !important;
  text-shadow: 0 2px 6px rgba(0, 10, 15, 0.4) !important;
}

.copy .project-meta {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 1px !important;
  color: #dfb383 !important;
  text-transform: uppercase !important;
  margin: 0 0 12px !important;
}

.copy details,
.copy summary {
  font-size: 14px !important;
  color: #d6e8e2 !important;
  line-height: 1.6 !important;
}

.copy summary {
  font-weight: 500 !important;
  color: #ffffff !important;
}

.copy a,
.contact a {
  font-size: 13.5px !important;
  color: #7de2cf !important;
  font-weight: 450 !important;
  transition: color 0.2s ease !important;
}

.copy a:hover,
.contact a:hover {
  color: #fed9a8 !important;
}

@media (max-width: 600px) {
  header.site-header {
    height: 56px !important;
    padding: 0 6vw !important;
  }
  .site-header .brand-link {
    font-size: 11px !important;
    letter-spacing: 2.5px !important;
  }
  .site-header .header-nav {
    gap: 16px !important;
  }
  .site-header .nav-link {
    font-size: 11px !important;
    font-weight: 350 !important;
    letter-spacing: 2.5px !important;
  }
  .copy p,
  .copy.personal p,
  .contact > p {
    font-size: 13.5px !important;
    line-height: 1.7 !important;
  }
}