:root{
  --brown-0:#0c0605;
  --brown-1:#160b08;
  --brown-2:#2c1912;
  --brown-3:#4b2f22;
  --cream:#f1e8d8;
  --beige:#c8b8a3;
  --turq:#52d7ce;
  --turq-soft:#89ece4;
  --line:rgba(241,232,216,.12);
  --mx:50%;
  --my:28%;
  --tx:0px;
  --ty:0px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(62rem 50rem at var(--mx) var(--my),rgba(118,76,51,.52),transparent 68%),
    radial-gradient(48rem 40rem at 82% 42%,rgba(48,145,135,.12),transparent 70%),
    linear-gradient(155deg,var(--brown-0),var(--brown-2) 48%,var(--brown-1));
  background-attachment:fixed;
  color:var(--cream);
  font-family:Arial,Helvetica,sans-serif;
  overflow-x:hidden;
}
body.js{--motion:1}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.ambient{
  position:fixed;
  inset:-20%;
  pointer-events:none;
  z-index:-2;
  background:
    radial-gradient(circle at 32% 22%,rgba(194,125,80,.08),transparent 35%),
    radial-gradient(circle at 72% 57%,rgba(82,215,206,.055),transparent 32%);
  filter:blur(42px);
  animation:ambientDrift 18s ease-in-out infinite alternate;
}
@keyframes ambientDrift{
  from{transform:translate3d(-1.5%,-1%,0) scale(1)}
  to{transform:translate3d(2.5%,2%,0) scale(1.05)}
}
.grain{
  position:fixed;
  inset:0;
  z-index:-1;
  opacity:.10;
  pointer-events:none;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.15) 0 .5px,transparent .7px);
  background-size:9px 9px;
  mix-blend-mode:soft-light;
}

.site-nav{
  position:sticky;
  top:0;
  z-index:50;
  height:68px;
  padding:0 4vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(15,8,6,.42);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.site-nav .brand,.site-nav nav a{
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.site-nav nav{display:flex;gap:22px}
.site-nav nav a{color:var(--beige)}
.site-nav nav a:hover{color:var(--turq)}

.hero-stage{height:180vh;position:relative}
.hero-sticky{
  position:sticky;
  top:68px;
  height:calc(100vh - 68px);
  width:min(1180px,92vw);
  margin:auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.eyebrow{
  color:var(--turq);
  font-size:11px;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
  margin:0 0 18px;
}
.hero-title{
  margin:0;
  font-size:clamp(76px,14vw,170px);
  line-height:.76;
  letter-spacing:-.075em;
  font-weight:900;
  text-transform:uppercase;
  position:relative;
}
.hero-title span,.hero-title em{display:block}
.hero-title em{color:rgba(82,215,206,.82);font-style:italic}
.hero-foot{
  margin-top:34px;
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:flex-end;
  color:var(--beige);
}
.hero-foot p{max-width:580px;line-height:1.65;margin:0}
.hero-foot span{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}

/* Progressive enhancement: titles remain visible if JS fails. */
.holo-title{position:relative}
body.js .holo-title{
  --p:1;
  --clip:0%;
  --rise:0px;
  --blur:0px;
  --ghost:.05;
  --beam:0;
  opacity:calc(.16 + var(--p)*.84);
  transform:translate3d(calc(var(--tx)*.05),var(--rise),0);
  clip-path:inset(var(--clip) 0 0 0);
  filter:blur(var(--blur)) brightness(calc(.72 + var(--p)*.28));
  will-change:transform,clip-path,filter,opacity;
}
body.js .holo-title::before{
  content:attr(data-holo);
  position:absolute;
  inset:0;
  pointer-events:none;
  white-space:pre-line;
  color:rgba(82,235,223,.42);
  opacity:var(--ghost);
  transform:translate3d(calc(var(--tx)*.5 + 3px),calc(var(--ty)*.25 + 2px),0);
  filter:blur(1.5px);
  mix-blend-mode:screen;
  clip-path:inset(var(--clip) 0 0 0);
}
body.js .holo-title::after{
  content:"";
  position:absolute;
  left:-2%;
  width:104%;
  height:22px;
  top:calc(var(--clip) - 11px);
  opacity:var(--beam);
  pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(94,244,232,.20),rgba(226,255,252,.54),rgba(82,224,214,.10),transparent);
  filter:blur(2px);
  mix-blend-mode:screen;
}

.signal-section{
  width:min(1180px,92vw);
  height:220px;
  margin:-26px auto 70px;
  position:relative;
  border-top:1px solid rgba(82,215,206,.11);
  border-bottom:1px solid rgba(82,215,206,.08);
}
#signal-canvas{width:100%;height:100%;display:block}
.signal-copy{
  position:absolute;
  left:14px;right:14px;bottom:10px;
  display:flex;
  justify-content:space-between;
  color:rgba(110,236,226,.56);
  font-size:8px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}

.work-section,.about-section,.contact-section{
  width:min(1180px,92vw);
  margin:auto;
}
.section-head{
  border-top:2px solid rgba(82,215,206,.68);
  padding-top:18px;
  display:flex;
  justify-content:space-between;
  gap:36px;
  align-items:flex-end;
  margin-bottom:90px;
}
.section-title{
  margin:0;
  font-size:clamp(50px,8vw,92px);
  line-height:.86;
  letter-spacing:-.06em;
  font-weight:900;
  text-transform:uppercase;
}
.section-head>p{
  max-width:370px;
  color:var(--beige);
  line-height:1.6;
  font-size:14px;
}

/* Mature project rhythm: consistent base spacing, only controlled variation */
.project{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(280px,.82fr);
  gap:clamp(22px,3vw,38px);
  align-items:center;
  margin-bottom:clamp(120px,16vh,190px);
}
.project-b{grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr)}
.project-wide{
  grid-template-columns:1fr;
  gap:22px;
}
.project-wide .project-copy{
  width:min(700px,72%);
  margin-left:auto;
}
.project-client{
  grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);
  padding:70px 0;
  border-top:1px solid rgba(82,215,206,.13);
  border-bottom:1px solid rgba(82,215,206,.13);
}
.project-final{
  grid-template-columns:1fr;
  justify-items:center;
  text-align:center;
}
.project-final .project-copy{max-width:680px}

.art-frame{
  position:relative;
  min-height:clamp(420px,62vh,700px);
  overflow:hidden;
  border:1px solid rgba(82,215,206,.14);
  border-radius:18px;
  background:rgba(15,8,6,.28);
}
.art-frame.compact{min-height:clamp(380px,54vh,610px)}
.art-holo{position:absolute;inset:0;overflow:hidden}
.art-holo>img:first-child{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:1;filter:none;transform:none;
}
.ghost{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;
  mix-blend-mode:screen;
  filter:sepia(1) saturate(5) hue-rotate(120deg) contrast(1.1) blur(1.8px);
  pointer-events:none;
}
body.js .ghost-a{opacity:var(--ghostA,0);transform:translate3d(var(--ghostAX,6px),var(--ghostAY,4px),0)}
body.js .ghost-b{opacity:var(--ghostB,0);transform:translate3d(var(--ghostBX,-5px),var(--ghostBY,-3px),0)}
.scan-beam{
  position:absolute;left:-2%;width:104%;height:34px;top:var(--scanY,100%);
  opacity:var(--scanOpacity,0);
  background:linear-gradient(to bottom,transparent,rgba(82,224,214,.08),rgba(222,255,252,.62),rgba(82,224,214,.14),transparent);
  filter:blur(2px);mix-blend-mode:screen;pointer-events:none;
}
.hud{
  position:absolute;left:14px;right:14px;bottom:12px;z-index:10;
  display:flex;gap:12px;justify-content:space-between;
  color:rgba(119,240,230,.66);
  font-size:8px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  text-shadow:0 0 14px rgba(82,215,206,.12);
}

.project-copy{min-width:0}
.project-index{
  color:var(--turq);
  font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  margin:0 0 10px;
}
.project-copy h3{
  margin:0 0 14px;
  font-size:clamp(38px,5.4vw,70px);
  line-height:.9;
  letter-spacing:-.055em;
  font-weight:900;
  text-transform:uppercase;
  max-width:13ch;
}
.project-wide .project-copy h3{max-width:18ch}
.meta{
  color:var(--beige);
  font-size:10px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;
  margin:0 0 16px;
}
.description{
  color:var(--beige);
  max-width:50ch;
  line-height:1.65;
  margin:0;
}

.album-stack{display:grid;gap:18px}
.art-frame.secondary{
  min-height:320px;
}
.art-frame.secondary>img{
  width:100%;height:100%;object-fit:cover;
}

.about-section{
  padding:120px 0;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:60px;
}
.portrait-placeholder{
  min-height:520px;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(82,54,42,.65),rgba(17,9,7,.92));
  display:grid;place-items:center;
  color:rgba(241,232,216,.40);
  font-size:10px;font-weight:800;letter-spacing:.13em;
}
.about-copy>p:not(.eyebrow){color:var(--beige);line-height:1.7;max-width:650px}
.skills{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:38px;
}
.skills>div{border-top:2px solid rgba(82,215,206,.60);padding-top:11px}
.skills strong{display:block;font-size:10px;letter-spacing:.12em;margin-bottom:10px}
.skills span{color:var(--beige);font-size:13px;line-height:1.8}

.contact-section{
  padding:120px 0 80px;
  border-top:1px solid var(--line);
}
.contact-title{
  margin:0;
  font-size:clamp(58px,10vw,120px);
  line-height:.84;
  letter-spacing:-.065em;
  font-weight:900;
  text-transform:uppercase;
}
.contact-title em{color:var(--turq);font-style:italic}
.contact-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.contact-links a{
  border:1px solid rgba(241,232,216,.16);
  border-radius:999px;padding:10px 14px;
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.contact-links a:hover{border-color:var(--turq);color:var(--turq)}

@media(max-width:800px){
  .hero-stage{height:150vh}
  .hero-sticky{top:62px;height:calc(100vh - 62px)}
  .hero-foot,.section-head{align-items:flex-start;flex-direction:column}
  .signal-section{height:170px;margin-bottom:50px}
  .project,.project-b,.project-client{grid-template-columns:1fr;gap:18px}
  .project-b .project-copy{order:2}
  .project-wide .project-copy{width:100%;margin:0}
  .art-frame,.art-frame.compact{min-height:52vh}
  .about-section{grid-template-columns:1fr;gap:32px}
  .portrait-placeholder{min-height:360px}
  .skills{grid-template-columns:1fr}
  .hud span:nth-child(2){display:none}
}

@media(prefers-reduced-motion:reduce){
  .ambient{animation:none}
  body.js .holo-title{
    --p:1!important;--clip:0%!important;--rise:0px!important;--blur:0px!important;--ghost:0!important;--beam:0!important
  }
  .ghost,.scan-beam{display:none!important}
}

/* =========================================================
   V11.2 — PROJECT 07 / METAL 3D STUDY
   ========================================================= */

.project-3d-feature {
  margin-top: 30px;
}

.project-3d-frame {
  width: min(860px, 82vw);
  min-height: clamp(460px, 66vh, 720px);
  background:
    radial-gradient(circle at 50% 45%, rgba(82,215,206,.06), transparent 58%),
    rgba(15,8,6,.30);
}

/* Guarantee the metal artwork is visible even before any hologram overlay runs. */
.project-3d-frame .art-holo > img:first-child {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transform: none !important;
  object-fit: contain;
  background: rgba(10,5,4,.68);
}

.project-3d-frame .ghost {
  object-fit: contain;
}

.project-3d-feature .project-copy {
  margin-top: 18px;
}

@media(max-width:800px){
  .project-3d-frame {
    width: 100%;
    min-height: 52vh;
  }
}

/* =========================================================
   V11.3 — PROJECT 08 / ULUWATU + CONTACT LEGEND
   ========================================================= */
.project-uluwatu{margin-top:110px}
.uluwatu-frame{min-height:clamp(440px,64vh,720px)}
.uluwatu-frame .art-holo>img{object-fit:contain;background:rgba(10,5,4,.72)}

.contact-legend{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  margin-top:46px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.contact-legend a{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:22px;
  padding:19px 4px;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  transition:color .25s ease,border-color .25s ease;
}
.contact-legend a:nth-child(odd){padding-right:24px;border-right:1px solid var(--line)}
.contact-legend a:nth-child(even){padding-left:24px}
.contact-legend a:nth-last-child(-n+2){border-bottom:0}
.contact-legend span{font-size:9px;font-weight:800;letter-spacing:.14em;color:var(--beige);text-transform:uppercase}
.contact-legend strong{font-size:12px;font-weight:700;letter-spacing:.06em;text-align:right}
.contact-legend a:hover{color:var(--turq)}

@media(max-width:800px){
  .project-uluwatu{margin-top:70px}
  .uluwatu-frame{min-height:48vh}
  .contact-legend{grid-template-columns:1fr}
  .contact-legend a,.contact-legend a:nth-child(odd),.contact-legend a:nth-child(even){padding:17px 2px;border-right:0;border-bottom:1px solid var(--line)}
  .contact-legend a:last-child{border-bottom:0}
}


/* =========================================================
   V11.4 — FINAL POLISH
   Project titles above artwork / About rebuild / Uluwatu 4:3
   ========================================================= */

/* Project identification now arrives before the artwork in scroll flow. */
.project-heading{
  grid-column:1 / -1;
  width:100%;
  min-width:0;
  margin:0 0 -4px;
  position:relative;
  z-index:12;
}

.project-heading .project-index{
  margin:0 0 10px;
}

.project-heading h3{
  margin:0;
  font-size:clamp(38px,5.4vw,70px);
  line-height:.9;
  letter-spacing:-.055em;
  font-weight:900;
  text-transform:uppercase;
  max-width:18ch;
}

/* The copy beside/below the artwork now begins with metadata + description. */
.project-copy{
  align-self:center;
}

/* Wide projects keep the title aligned with the exhibition width. */
.project-wide .project-heading{
  width:min(700px,72%);
  margin-left:auto;
  margin-bottom:0;
}

/* Final centered 3D project keeps its existing centered language. */
.project-final .project-heading{
  max-width:760px;
  text-align:center;
  justify-self:center;
}

/* PROJECT 08 — match the artwork's native 4:3 ratio.
   This removes the black letterboxing without cropping the composition. */
.uluwatu-frame{
  width:100%;
  aspect-ratio:4 / 3;
  min-height:0 !important;
  background:transparent;
}

.uluwatu-frame .art-holo>img,
.uluwatu-frame .ghost{
  object-fit:cover !important;
  background:transparent !important;
}

/* ABOUT — no portrait; content is the visual focus. */
.about-section{
  display:block;
  padding:120px 0;
}

.about-copy{
  width:min(980px,100%);
}

.about-copy>p:not(.eyebrow){
  max-width:760px;
}

.about-build-note{
  margin-top:18px;
  color:rgba(241,232,216,.82) !important;
}

.about-section .skills{
  margin-top:52px;
}

@media(max-width:800px){
  .project-heading{
    margin-bottom:0;
  }

  .project-wide .project-heading{
    width:100%;
    margin-left:0;
  }

  .project-final .project-heading{
    text-align:left;
    justify-self:stretch;
  }

  .uluwatu-frame{
    aspect-ratio:4 / 3;
    min-height:0 !important;
  }

  .about-section{
    padding:90px 0;
  }

  .about-section .skills{
    margin-top:38px;
  }
}


/* FINAL MASTER — Project 01 native artwork ratio (2793 × 2793) */
.project01-native {
  aspect-ratio: 2793 / 2793;
  min-height: 0 !important;
}
.project01-native .art-holo > img,
.project01-native .ghost {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
}


/* FINAL FIX — Universe artwork shown in full (1800 × 1800) */
.universe-native {
  aspect-ratio: 1800 / 1800;
  min-height: 0 !important;
  overflow: hidden;
}
.universe-native .art-holo > img,
.universe-native .ghost {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
}