:root { --bg:#303340; --hero:#0f1010; --deep:#242833; --ink:#f3f0e8; --muted:#afb0bb; --gold:#f5bf55; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Arial,Helvetica,sans-serif; overscroll-behavior-y:none; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
a:focus-visible, button:focus-visible { outline:2px solid var(--gold); outline-offset:5px; }
header { width:100%; max-width:1000px; margin:0 auto; padding:26px 0; display:flex; justify-content:space-between; align-items:center; background:var(--hero); box-shadow:0 0 0 100vmax var(--hero); clip-path:inset(0 -100vmax); }
.logo { font-size:42px; font-weight:900; color:var(--gold); line-height:1; letter-spacing:-3px; }
.logo span { color:var(--ink); }
nav { display:flex; gap:42px; font-size:13px; }
.hero { width:100%; max-width:1000px; margin:0 auto; position:relative; min-height:680px; display:grid; grid-template-columns:1fr 1fr; align-items:center; padding:35px 0 85px; isolation:isolate; overflow:hidden; background:var(--hero); box-shadow:0 0 0 100vmax var(--hero); clip-path:inset(0 -100vmax); }
.name { z-index:2; }
.eyebrow { font-size:9px; letter-spacing:2px; color:var(--muted); line-height:1.8; }
h1 { font-size:clamp(70px,8vw,114px); line-height:.95; letter-spacing:-6px; margin:35px 0 25px; }
h1 span { color:var(--gold); }
.name i { width:48px; height:5px; background:var(--gold); display:block; }
.scroll { display:block; margin-top:80px; font-size:8px; letter-spacing:2px; color:var(--gold); }
.portrait { position:absolute; width:48%; height:100%; left:22%; bottom:0; z-index:-1; overflow:visible; transform:translateY(var(--hero-shift,0)); will-change:transform; }
.portrait img { width:100%; height:100%; object-fit:contain; object-position:50% 100%; mix-blend-mode:normal; -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 15%,#000 85%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0%,#000 15%,#000 85%,transparent 100%); }
.portrait::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,var(--hero) 0%,transparent 19%); pointer-events:none; }
.intro { justify-self:end; width:65%; z-index:2; }
.intro h2 { font-size:29px; line-height:1.2; font-weight:500; letter-spacing:-1px; }
.intro>p:not(.eyebrow) { font-size:12px; line-height:1.9; color:var(--muted); max-width:240px; }
.gold { display:inline-block; color:var(--gold); font-size:12px; border-bottom:1px solid #f5bf5555; padding:12px 0; }
.hero-foot { position:absolute; bottom:24px; left:0; right:0; display:flex; justify-content:space-between; color:var(--muted); font-size:8px; letter-spacing:1.7px; }
.shorts { width:100%; max-width:1000px; margin:0 auto; padding:78px 0 90px; background:#191c25; box-shadow:0 0 0 100vmax #191c25; clip-path:inset(0 -100vmax); }
.shorts-heading { text-align:center; max-width:620px; margin:0 auto 38px; }
.shorts-heading h2 { margin:10px 0 8px; font-size:clamp(30px,4vw,48px); line-height:1.1; letter-spacing:-2px; }
.shorts-heading>p:last-child { margin:0; color:var(--muted); font-size:12px; }
.shorts-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; }
.short-frame { position:relative; aspect-ratio:9/16; overflow:hidden; background:#0b0c10; box-shadow:0 20px 45px #07080d77; }
.short-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
em { font-family:Georgia,serif; font-weight:400; color:var(--gold); }
.collection { position:relative; background:var(--deep); padding:0 7% 90px; }
.heading { max-width:860px; margin:auto; padding:58px 1% 34px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.heading h2 { font-size:clamp(32px,4vw,50px); font-weight:800; letter-spacing:-2px; margin:10px 0 7px; }
.heading>span { font-size:10px; color:var(--gold); font-weight:700; letter-spacing:1px; }
.sheet { --reveal-y:100px; --stack-shift:0px; --stack-scale:1; --stack-tilt:0deg; position:sticky; top:22px; max-width:860px; background:#303644; box-shadow:0 -18px 50px #12151d55; padding:22px; margin:0 auto 55px; transform-origin:50% 0; transform:perspective(1200px) translateY(calc(var(--reveal-y) + var(--stack-shift))) scale(var(--stack-scale)) rotateX(var(--stack-tilt)); transition:opacity .9s ease,transform 1s cubic-bezier(.2,.72,.2,1),filter .2s linear; will-change:transform,filter; overflow:hidden; }
.sheet:nth-child(even) { background:#383b49; }
.sheet-bar { display:flex; justify-content:space-between; font-size:9px; letter-spacing:1.5px; color:#c5c6cf; padding-bottom:22px; }
.grid { display:block; width:100%; }
.art { display:block; width:100%; border:0; padding:0; background:transparent; position:relative; min-height:clamp(440px,68vh,740px); overflow:hidden; }
.art>img { width:100%; height:100%; max-height:78vh; object-fit:contain; transform:scale(1.045); transition:transform 1.1s cubic-bezier(.2,.72,.2,1); }
.sheet.visible .art>img { transform:scale(1); }
.art:hover>img { transform:scale(1.025); }
.art>span { position:absolute; right:14px; bottom:14px; width:34px; height:34px; border-radius:50%; background:var(--gold); color:#252832; display:grid; place-items:center; z-index:5; }
.mock-browser, .mock-book { height:clamp(440px,68vh,740px); position:relative; display:flex; align-items:center; justify-content:center; }
.browser-shell { width:min(68%,540px); height:94%; background:#171a22; border-radius:13px; box-shadow:0 30px 70px #11141b99; overflow:hidden; }
.browser-chrome { height:42px; display:flex; align-items:center; gap:8px; padding:0 16px; background:#151820; }
.browser-chrome i { width:8px; height:8px; border-radius:50%; background:#5b5f69; }
.browser-chrome b { height:14px; width:45%; max-width:390px; margin-left:12px; border-radius:10px; background:#282d39; }
.browser-window { height:calc(100% - 42px); overflow:hidden; background:#eee; }
.browser-window img { width:100%; height:100%; object-fit:contain; object-position:top; transition:transform .8s ease; }
.art:hover .browser-window img { transform:scale(.985); }
.book-stage { width:100%; height:100%; display:flex; align-items:center; justify-content:center; perspective:1500px; background:radial-gradient(circle at 50% 45%,#505667 0%,#2b2f3b 52%,#20232d 100%); }
.book { height:82%; max-width:72%; aspect-ratio:.68; position:relative; transform:rotateY(-12deg) rotateX(2deg); filter:drop-shadow(30px 36px 25px #12141b99); transition:transform .7s ease; }
.art:hover .book { transform:rotateY(-5deg) translateY(-5px); }
.book img { width:100%; height:100%; object-fit:cover; }
.book::before { content:''; position:absolute; top:1%; bottom:1%; left:-13px; width:13px; background:linear-gradient(90deg,#111,#555); transform:skewY(-45deg); transform-origin:right; }
.book::after { content:''; position:absolute; inset:0; box-shadow:inset 14px 0 18px #0005,inset -3px 0 #fff3; pointer-events:none; }
.contact { width:100%; max-width:1000px; margin:0 auto; padding:100px 0; background:var(--bg); }
.contact h2 { font-size:clamp(42px,6vw,80px); line-height:1.1; letter-spacing:-3px; font-weight:400; }
.contact .gold { font-size:clamp(15px,2vw,23px); }
.contact p:not(.eyebrow) { margin-top:24px; color:var(--muted); font-size:12px; }
footer { width:100%; max-width:1000px; margin:0 auto; text-align:center; padding:30px 0 55px; }
footer p { font-size:10px; color:var(--muted); margin:25px; }
footer>a:last-child { font-size:10px; color:var(--gold); }
dialog { width:min(1100px,96vw); max-height:94vh; background:var(--deep); color:var(--ink); border:1px solid #ffffff30; padding:16px; border-radius:8px; }
dialog::backdrop { background:#10121bec; backdrop-filter:blur(10px); }
.bar { display:flex; align-items:center; justify-content:space-between; gap:15px; font-size:11px; padding:10px 0; }
dialog button { color:var(--ink); background:transparent; border:1px solid #ffffff30; padding:10px 14px; }
.image-scroll { height:70vh; overflow:auto; text-align:center; }
.image-scroll img { max-width:100%; height:auto; display:block; margin:auto; }
body.modal-open { overflow:hidden; }
.reveal:not(.sheet) { opacity:0; transform:translateY(70px) scale(.97); filter:blur(8px); transition:opacity .9s ease,transform 1.05s cubic-bezier(.16,.8,.22,1),filter .9s ease; transition-delay:var(--delay,0ms); }
.reveal:not(.sheet).visible { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
.sheet.reveal { opacity:0; }
.sheet.reveal.visible { --reveal-y:0px; opacity:1; }
.name { animation:hero-left 1.25s .1s both cubic-bezier(.16,.8,.22,1); }
.portrait { animation:hero-person 1.55s .18s both cubic-bezier(.16,.8,.22,1); }
.intro { animation:hero-right 1.25s .34s both cubic-bezier(.16,.8,.22,1); }
.hero-foot { animation:hero-up 1s .7s both cubic-bezier(.16,.8,.22,1); }
@keyframes hero-left { from { opacity:0; transform:translateX(-70px); } to { opacity:1; transform:translateX(0); } }
@keyframes hero-right { from { opacity:0; transform:translateX(70px); } to { opacity:1; transform:translateX(0); } }
@keyframes hero-up { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes hero-person { from { opacity:0; transform:translateY(90px) scale(.92); clip-path:inset(18% 0 0); } to { opacity:1; transform:translateY(var(--hero-shift,0)) scale(1); clip-path:inset(0); } }
@media (max-width:800px) {
  header { padding-left:6%; padding-right:6%; }
  .hero { min-height:620px; padding-left:6%; padding-right:6%; }
  .shorts { padding-left:6%; padding-right:6%; }
  .shorts-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; max-width:560px; margin:auto; }
  h1 { font-size:76px; letter-spacing:-4px; }
  .intro { width:85%; }
  .intro h2 { font-size:24px; }
  .portrait { left:17%; width:62%; }
  .sheet { padding:18px; }
  .contact, footer { padding-left:6%; padding-right:6%; }
}
@media (max-width:560px) {
  header { padding:22px 6%; }
  .logo { font-size:34px; }
  nav { font-size:11px; gap:25px; }
  .hero { display:block; min-height:760px; padding-top:28px; }
  .name { position:relative; }
  h1 { font-size:72px; margin-top:22px; }
  .name>.eyebrow { font-size:7px; }
  .portrait { height:500px; width:105%; left:13%; top:10px; }
  .portrait img { object-position:center bottom; }
  .scroll { margin-top:35px; font-size:7px; }
  .intro { width:90%; margin-top:100px; }
  .intro h2 { font-size:27px; margin:12px 0; }
  .intro h2 br { display:none; }
  .intro>p:not(.eyebrow) { max-width:300px; }
  .hero-foot { left:6%; right:6%; font-size:6px; letter-spacing:1px; bottom:20px; }
  .shorts { padding-top:58px; padding-bottom:64px; }
  .shorts-heading { margin-bottom:28px; }
  .shorts-heading h2 { font-size:34px; }
  .shorts-grid { gap:10px; }
  .collection { padding:0 4% 35px; }
  .heading { padding:30px 2% 20px; }
  .heading h2 { font-size:24px; }
  .heading .eyebrow { font-size:7px; }
  .sheet { top:12px; padding:12px; margin-bottom:32px; }
  .sheet-bar { font-size:7px; padding-bottom:12px; letter-spacing:1px; }
  .art, .mock-browser, .mock-book { min-height:0; height:62vh; max-height:620px; }
  .art>img { max-height:62vh; }
  .browser-shell { width:min(78%,430px); height:88%; border-radius:8px; }
  .browser-chrome { height:28px; padding:0 10px; gap:5px; }
  .browser-chrome i { width:5px; height:5px; }
  .browser-window { height:calc(100% - 28px); }
  .book { height:76%; max-width:82%; }
  .contact { padding:60px 6%; }
  footer { padding-left:6%; padding-right:6%; }
  .contact h2 { font-size:44px; letter-spacing:-2px; }
  dialog button { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .sheet { transform:none!important; } * { transition:none!important; animation:none!important; } .reveal { opacity:1!important; transform:none!important; filter:none!important; } }