:root{
  /* palette — slate / maroon / pink / teal / deep */
  /* earthy + futuristic */
  --teal:#116466; --sand:#D9B08C; --peach:#FFCB9A; --mint:#D1E8E2;
  --deep:#1C3334; --wine:#2E151B; --magenta:#7A1E56;
  --base:#1C3334; --base2:#116466;
  --warm:#FFCB9A; --warm2:#D9B08C; --gold:#FFCB9A; --moss:#116466;
  --text:#D1E8E2; --mut:#8FAFAB; --line:rgba(209,232,226,.18);
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.16,.84,.44,1);
}
/* HOME — black ground with a teal glow behind the focus cover */
body[data-page="home"]{
  --base:#0A0708; --base2:#141018;
  --text:#ECE6E8; --mut:#8FAFAB; --line:rgba(236,230,232,.16);
  --acc:#3FB8B0; --gold:#3FB8B0; --warm:#116466;
  background:
    radial-gradient(38% 34% at 50% 47%, rgba(17,100,102,.65), rgba(17,100,102,0) 66%),
    #0A0708;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html{overflow-x:hidden}
body{background:var(--base);color:var(--text);font-family:var(--serif);font-weight:300;-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
::selection{background:var(--warm);color:var(--base)}
img{max-width:100%;display:block}

/* warm earthy atmosphere + grain */
.atmos{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.atmos::before,.atmos::after{content:"";position:absolute;border-radius:50%;filter:blur(100px);opacity:.4;mix-blend-mode:screen}
.atmos::before{width:64vw;height:64vw;left:-12vw;top:-16vw;background:radial-gradient(circle,rgba(201,138,94,.55),transparent 62%);animation:drift1 30s ease-in-out infinite alternate}
.atmos::after{width:60vw;height:60vw;right:-14vw;bottom:-18vw;background:radial-gradient(circle,rgba(125,138,99,.42),transparent 62%);animation:drift2 36s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(16vw,22vh) scale(1.15)}}
@keyframes drift2{to{transform:translate(-14vw,-18vh) scale(1.2)}}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* WORK & dark pages — teal / greenish-blue ground */
body:not([data-page="home"]){background:
  radial-gradient(120% 90% at 12% 0%, rgba(17,100,102,.92), transparent 62%),
  radial-gradient(100% 80% at 95% 100%, rgba(17,100,102,.58), transparent 64%),
  radial-gradient(90% 70% at 60% 42%, rgba(209,232,226,.07), transparent 70%),
  var(--deep);
  background-attachment:fixed}
/* ART — edgy: near-black wine, hard contrast, sand accent */
body[data-page="art"]{
  --text:#F2ECE6; --mut:#9A8378; --line:rgba(242,236,230,.16);
  --gold:#D9B08C; --warm:#D9B08C;
  background:
   radial-gradient(85% 60% at 50% -10%, rgba(17,100,102,.62), transparent 66%),
   radial-gradient(70% 55% at 6% 42%, rgba(17,100,102,.26), transparent 72%),
   radial-gradient(80% 60% at 100% 100%, rgba(217,176,140,.10), transparent 68%),
   #0A0708;
  background-attachment:fixed}
body[data-page="home"] .atmos{display:none}
body[data-page="home"] .neon{display:none}
body[data-page="home"] #loader{background:#0A0708}
body[data-page="home"] nav{mix-blend-mode:normal}
body[data-page="home"]::before{opacity:.05;mix-blend-mode:overlay}
/* keep the white-page UI legible over the graphics */
body[data-page="home"] .navlink{color:var(--text);opacity:1;font-weight:500}
body[data-page="home"] .nowview .nv-title{color:var(--text);font-weight:400}
body[data-page="home"] .nowview .nv-cta{color:var(--gold);font-weight:500}
body[data-page="home"] .scrollcue{color:var(--mut)}
/* teal glow behind the focus cover */
body[data-page="home"] .bfocal{box-shadow:0 0 78px rgba(17,100,102,.6), 0 40px 90px rgba(0,0,0,.6)}
body[data-page="home"] .bstrip{filter:none}
body[data-page="home"] .hero::after{display:none}
/* colour accents — teal on black */
body[data-page="home"] .ethosbtn{border-color:var(--acc);color:var(--acc)}
body[data-page="home"] .ethosbtn::before{background:var(--acc)}
body[data-page="home"] .ethosbtn:hover{color:#0A0708;border-color:var(--acc)}
body[data-page="home"] .nowview .nv-title{color:var(--text)}
body[data-page="home"] .nowview .nv-cta{color:var(--acc)}
body[data-page="home"] .nowview .nv-cta::after{background:var(--acc)}
body[data-page="home"] .nowview .nv-cta:hover{color:#fff}
body[data-page="home"] .navlink::after{background:var(--acc)}
body[data-page="home"] .navlink:hover{color:var(--acc)}
body[data-page="home"] ::selection{background:var(--acc);color:#0A0708}
body[data-page="home"] .statement em,body[data-page="home"] .philo .line em{color:var(--acc)}
body[data-page="home"] .eyebrow{color:var(--acc)}
body[data-page="home"] .eyebrow::before{background:var(--acc)}
body[data-page="home"] .statement .mut,
body[data-page="home"] .philo .line.mut{color:var(--acc)}

/* HOME — quiet ambient tint; the colour belongs to the UI, not the page */
.neon{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.neon i{position:absolute;display:block;border-radius:50%;mix-blend-mode:multiply;will-change:transform}
.neon .n1{left:-16vw;top:16vh;width:56vw;height:56vw;
  background:radial-gradient(closest-side, rgba(209,232,226,.85), rgba(209,232,226,0) 72%);
  animation:ambDrift1 26s ease-in-out infinite alternate}
.neon .n2{right:-18vw;top:30vh;width:58vw;height:58vw;
  background:radial-gradient(closest-side, rgba(255,203,154,.42), rgba(255,203,154,0) 74%);
  animation:ambDrift2 31s ease-in-out infinite alternate}
.neon .n3,.neon .n4{display:none}
@keyframes ambDrift1{to{transform:translate(10vw,-8vh) scale(1.14)}}
@keyframes ambDrift2{to{transform:translate(-9vw,8vh) scale(1.18)}}
@media(prefers-reduced-motion:reduce){.neon i{animation:none}}

/* LOADER */
#loader{position:fixed;inset:0;z-index:1000;background:var(--base);display:flex;align-items:center;justify-content:center;transition:opacity .9s var(--ease),visibility .9s}
#loader.done{opacity:0;visibility:hidden}
#loader .lbox{display:flex;flex-direction:column;align-items:center;gap:clamp(20px,4vh,34px)}
#loader .llogo{width:clamp(180px,34vw,360px);opacity:0;animation:fadein 1.1s var(--ease) both}
#loader .lp{font-family:var(--sans);font-weight:300;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut)}
/* ART & WORK loader: black ground, white logo, teal loading text */
body[data-page="art"] #loader,body[data-page="work"] #loader{background:#000}
body[data-page="art"] #loader .llogo,body[data-page="work"] #loader .llogo{filter:brightness(0) invert(1)}
body[data-page="art"] #loader .lp,body[data-page="work"] #loader .lp{color:#1F9B9C}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:26px clamp(20px,5vw,60px);font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase}
nav .grp{display:flex;gap:clamp(16px,2.4vw,34px)}
nav .mark{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;line-height:0}
nav .navlogo{height:clamp(22px,2.4vw,30px);width:auto;transition:opacity .3s;opacity:.95}
nav .mark:hover .navlogo{opacity:1}
.navlink{position:relative;color:var(--text);opacity:.9;padding-bottom:3px;cursor:pointer;background:none;border:0;font:inherit;letter-spacing:inherit;text-transform:inherit}
.navlink::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--warm);transition:width .5s var(--ease)}
.navlink.active{opacity:1}
.navlink.active::after{width:100%}
.navlink:hover{opacity:1}
.navlink:hover::after{width:100%}
@media(max-width:600px){nav .mark{font-size:18px}nav{font-size:11px}}

/* HERO (home) */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:relative;padding:0 20px}
.hero::after{content:"";position:absolute;width:min(92vw,1000px);height:min(70vw,700px);border-radius:50%;background:radial-gradient(circle,rgba(201,138,94,.14),transparent 62%);z-index:-1}
.hero h1{font-weight:400;font-size:clamp(88px,25vw,320px);line-height:.86;letter-spacing:.01em;animation:boot 1.3s var(--ease) both}
.hero h1 .ital{font-style:italic}
.herologo{width:min(76vw,760px);animation:boot 1.4s var(--ease) both;filter:drop-shadow(0 10px 44px rgba(0,0,0,.5))}
@keyframes boot{0%{opacity:0;filter:blur(20px);transform:translateY(24px)}100%{opacity:1;filter:blur(0);transform:none}}
.hero .sub{font-style:italic;font-size:clamp(16px,2.2vw,24px);color:var(--gold);margin-top:22px;opacity:0;animation:fadein 1.1s ease 1s both}
.enter{display:flex;gap:22px;margin-top:44px;opacity:0;animation:fadein 1.1s ease 1.3s both}
.enterbtn{font-family:var(--sans);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--text);border:1px solid var(--line);border-radius:40px;padding:14px 28px;position:relative;overflow:hidden;transition:color .45s,border-color .45s}
.enterbtn span{position:relative;z-index:1}
.enterbtn::before{content:"";position:absolute;inset:0;background:var(--warm);transform:translateY(101%);transition:transform .5s var(--ease);z-index:0}
.enterbtn:hover{color:var(--base);border-color:var(--warm)}
.enterbtn:hover::before{transform:translateY(0)}
.scrollcue{position:absolute;bottom:132px;left:50%;transform:translateX(-50%);z-index:4;pointer-events:none;font-family:var(--sans);font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--mut);display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;animation:fadein 1s ease 1.6s both}
.scrollcue span{width:1px;height:26px;background:linear-gradient(var(--mut),transparent);animation:pulse 2.2s infinite}
/* ETHOS — scroll is bound to the ring, so descending is a button */
.ethosbtn{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:6;cursor:pointer;
  font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--text);
  background:none;border:1px solid var(--line);border-radius:40px;padding:13px 30px;overflow:hidden;
  transition:color .45s,border-color .45s;opacity:0;animation:fadein 1s ease 1.8s both}
.ethosbtn span{position:relative;z-index:1}
.ethosbtn::before{content:"";position:absolute;inset:0;background:var(--warm);transform:translateY(101%);transition:transform .5s var(--ease);z-index:0}
.ethosbtn:hover{color:#fff;border-color:var(--warm)}
.ethosbtn:hover::before{transform:translateY(0)}
@keyframes fadein{to{opacity:1}}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}

/* SECTION SHELL */
section{padding:clamp(90px,14vh,180px) clamp(20px,7vw,110px);position:relative}
.eyebrow{font-family:var(--sans);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--warm);display:flex;align-items:center;gap:14px;margin-bottom:40px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--warm);opacity:.6}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}

/* STATEMENT / PHILOSOPHY */
.statement{max-width:1040px}
.statement p{font-size:clamp(26px,4.4vw,58px);font-weight:300;line-height:1.22;margin-bottom:.55em;letter-spacing:-.005em}
.statement em{font-style:italic;color:var(--gold)}
.statement .mut{color:var(--mut)}
.philo{max-width:1100px}
.philo .line{font-size:clamp(28px,4.8vw,62px);font-weight:300;line-height:1.18;margin:.5em 0;letter-spacing:-.01em}
.philo .line.mut{color:var(--mut)}
.philo .line em{font-style:italic;color:var(--gold)}
.philo-right{margin-left:auto;text-align:right}
.philo-right .eyebrow{justify-content:flex-end}
.philo-right .eyebrow::before{order:2}

/* HOMEPAGE — infinite draggable cover field */
.hero{overflow:hidden}
.dragfield{position:absolute;inset:0;z-index:1;cursor:grab;touch-action:pan-y;perspective:1200px;opacity:0;animation:fadein 1.4s var(--ease) .2s both}
.dragfield.grabbing{cursor:grabbing}
.band3d{position:absolute;transform-style:preserve-3d;will-change:transform}
.bstrip{position:absolute;left:0;top:0;background-repeat:no-repeat;filter:brightness(.86);backface-visibility:visible;will-change:transform}
.bfocal{position:absolute;left:0;top:0;border-radius:3px;overflow:hidden;box-shadow:0 55px 120px rgba(0,0,0,.72);backface-visibility:hidden;will-change:transform}
.bfocal img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none}
.nowview{position:absolute;top:clamp(78px,11vh,104px);left:clamp(20px,5vw,60px);z-index:8;pointer-events:none;max-width:min(60vw,420px);text-align:left}
/* reserve 2 lines so the Listen button below never shifts as titles change length */
.nowview .nv-title{display:block;font-style:italic;font-size:clamp(20px,2.4vw,30px);color:var(--gold);line-height:1.2;min-height:2.4em}
.nowview .nv-cta{display:inline-block;pointer-events:auto;position:relative;font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);margin-top:10px;min-height:14px;transition:color .3s}
.nowview .nv-cta::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:0;background:var(--warm);transition:width .45s var(--ease)}
.nowview .nv-cta:hover{color:var(--warm)}
.nowview .nv-cta:hover::after{width:100%}

/* PAGE HEADER (art / work) */
.pagehead{padding:clamp(130px,20vh,210px) clamp(20px,7vw,110px) clamp(20px,4vh,50px);text-align:center}
.pagehead .eyebrow{justify-content:center}
.pagetitle{font-weight:300;font-size:clamp(46px,9vw,120px);letter-spacing:-.015em;line-height:.96}
.pagetitle em{font-style:italic;color:var(--gold)}
.pagelead{font-style:italic;color:var(--mut);font-size:clamp(16px,2vw,22px);margin-top:16px}

/* HORIZONTAL CINEMATIC CAROUSEL */
.carwrap{position:relative}
.hcar{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;height:86svh;scrollbar-width:none;cursor:grab}
.hcar::-webkit-scrollbar{display:none}
.hcar.drag{cursor:grabbing;scroll-snap-type:none}
.hslide{flex:0 0 100%;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(20px,3vh,42px);padding:20px}
.carnav{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);display:flex;justify-content:space-between;padding:0 clamp(12px,3vw,42px);pointer-events:none;z-index:5}
.cbtn{pointer-events:auto;width:54px;height:54px;border-radius:50%;border:1px solid var(--line);background:rgba(11,8,6,.35);backdrop-filter:blur(6px);color:var(--text);font-size:18px;cursor:pointer;display:grid;place-items:center;position:relative;overflow:hidden;transition:color .4s,border-color .4s}
.cbtn::before{content:"";position:absolute;inset:0;background:var(--warm);transform:scale(0);border-radius:50%;transition:transform .5s var(--ease);z-index:0}
.cbtn i{position:relative;z-index:1;font-style:normal}
.cbtn:hover{color:var(--base);border-color:var(--warm)}
.cbtn:hover::before{transform:scale(1)}
.progress{text-align:center;font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);padding:20px 0 6px}
.progress b{color:var(--gold);font-weight:400}

/* SHARED SLIDE FRAME (used by carousel) */
.stitle{font-weight:300;font-size:clamp(38px,7vw,92px);line-height:.98;letter-spacing:-.01em}
.stitle em{font-style:italic;color:var(--gold)}
.sframe{display:block;position:relative;width:min(64vh,460px);max-width:88vw;aspect-ratio:1;border-radius:3px;overflow:hidden;background:linear-gradient(155deg,#241a13,#14100c);box-shadow:0 34px 90px rgba(0,0,0,.55);transition:transform .6s var(--ease)}
.sframe.wide{width:min(90vw,940px);aspect-ratio:16/9}
.sframe:hover{transform:translateY(-6px)}
.sframe .init{position:absolute;inset:0;display:grid;place-items:center;font-style:italic;font-size:clamp(70px,12vw,150px);color:rgba(220,172,125,.22)}
.sframe img,.sframe iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;opacity:0;transition:opacity .6s}
.sframe img.loaded{opacity:1}
.sframe iframe{opacity:1;z-index:2;pointer-events:none}
.sframe::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 120px rgba(0,0,0,.35);pointer-events:none;z-index:1}
.scap{font-size:clamp(15px,1.9vw,21px);letter-spacing:.14em;color:var(--gold);text-transform:uppercase}
.splay{font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}

/* LIST LAYOUT (below carousel) */
.listsec .eyebrow{margin-bottom:8px}
.worklist{border-top:1px solid var(--line);margin-top:34px}
.row{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:baseline;padding:clamp(20px,2.6vw,32px) 4px;border-bottom:1px solid var(--line);cursor:pointer;position:relative;transition:padding-left .5s var(--ease)}
.row .rt{font-size:clamp(24px,3.6vw,50px);font-weight:300;letter-spacing:-.01em;transition:color .3s}
.row .rt em{font-style:italic}
.row .rd{font-family:var(--sans);font-size:12px;color:var(--mut);margin-top:9px;letter-spacing:.04em}
.row .rmeta{font-family:var(--sans);font-size:12px;color:var(--mut);text-align:right;letter-spacing:.06em;white-space:nowrap;line-height:1.9;text-transform:uppercase}
.row .rmeta .yr{color:var(--gold)}
.row::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--warm);transition:width .55s var(--ease)}
@media(hover:hover){
  .row:hover{padding-left:24px}
  .row:hover .rt{color:#fff}
  .row:hover .rmeta{color:var(--text)}
  .row:hover::after{width:100%}
  .worklist:hover .row:not(:hover) .rt{color:var(--mut)}
}
.preview{position:fixed;z-index:60;width:min(44vw,440px);aspect-ratio:16/9;pointer-events:none;opacity:0;transform:translateY(-50%) scale(.96);transition:opacity .3s var(--ease),transform .3s var(--ease);box-shadow:0 30px 90px rgba(0,0,0,.65);border:1px solid rgba(201,138,94,.4);background:#000;overflow:hidden;border-radius:3px}
.preview.show{opacity:1;transform:translateY(-50%) scale(1)}
.preview iframe,.preview img{width:100%;height:100%;border:0;object-fit:cover;display:block}
.preview.cover{width:min(30vw,320px);aspect-ratio:1}
@media(hover:none),(max-width:760px){.preview{display:none}}

/* DRAWERS */
.drawer{position:fixed;left:0;right:0;top:0;z-index:300;background:#2E151E;color:#F3E9EC;transform:translateY(-100%);transition:transform .85s var(--ease);min-height:100svh;display:flex;align-items:center;overflow-y:auto}
/* shadow only while open — otherwise it bleeds down over the top of the page */
.drawer.open{transform:translateY(0);box-shadow:0 40px 120px rgba(0,0,0,.6)}
.drawer::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0}

/* ABOUT — matches the ART page (near-black wine, sand accent) */
#drawer-about{background:#0A0708;color:#F2ECE6}
#drawer-about::before{background:
  radial-gradient(85% 60% at 50% -10%, rgba(17,100,102,.62), transparent 66%),
  radial-gradient(70% 55% at 6% 42%, rgba(17,100,102,.26), transparent 72%),
  radial-gradient(80% 60% at 100% 100%, rgba(217,176,140,.10), transparent 68%)}
#drawer-about .eyebrow{color:var(--sand)}
#drawer-about .eyebrow::before{background:var(--sand)}
#drawer-about .big em{color:var(--sand)}
#drawer-about .small{color:#F2ECE6;border-top-color:rgba(242,236,230,.16)}
#drawer-about .worked{color:#9A8378}
#drawer-about .worked b{color:var(--sand)}
#drawer-about .dclose{color:#F2ECE6}
#drawer-about .dclose:hover{color:var(--sand)}
#drawer-about .portrait{background:linear-gradient(160deg,#0F2A2B,#0A0708)}

/* CONTACT — matches the WORK page (teal ground, peach accent) */
#drawer-contact{background:var(--deep);color:#D1E8E2}
#drawer-contact::before{background:
  radial-gradient(120% 90% at 12% 0%, rgba(17,100,102,.92), transparent 62%),
  radial-gradient(100% 80% at 95% 100%, rgba(17,100,102,.58), transparent 64%),
  radial-gradient(90% 70% at 60% 42%, rgba(209,232,226,.07), transparent 70%)}
#drawer-contact .eyebrow{color:var(--peach)}
#drawer-contact .eyebrow::before{background:var(--peach)}
#drawer-contact h2{color:#D1E8E2}
#drawer-contact h2 em{color:var(--peach)}
#drawer-contact .lead{color:#8FAFAB}
#drawer-contact .clink{border-color:rgba(209,232,226,.18);color:#D1E8E2}
#drawer-contact .clink .arr{color:var(--peach)}
#drawer-contact .clink::after{background:var(--peach)}
#drawer-contact .clink:hover{color:var(--peach)}
#drawer-contact .dclose{color:#D1E8E2}
#drawer-contact .dclose:hover{color:var(--peach)}
.dwrap{position:relative;z-index:1;width:100%;padding:clamp(90px,12vh,140px) clamp(20px,7vw,110px)}
.dclose{position:absolute;top:26px;right:clamp(20px,5vw,60px);z-index:5;font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--text);cursor:pointer;background:none;border:0;display:flex;align-items:center;gap:8px;transition:color .3s}
.dclose:hover{color:var(--gold)}
.dclose::after{content:"↑"}
.about-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:clamp(30px,6vw,90px);align-items:center}
@media(max-width:820px){.about-grid{grid-template-columns:1fr}}
.about-grid .big{font-size:clamp(24px,3.2vw,40px);font-weight:300;line-height:1.3}
.about-grid .big em{font-style:italic;color:var(--gold)}
.about-grid .small{font-family:var(--serif);font-size:clamp(15px,1.5vw,18px);font-weight:300;color:var(--text);opacity:.82;line-height:1.62;letter-spacing:0;margin-top:26px;max-width:46ch;padding-top:22px;border-top:1px solid var(--line)}
.portrait{aspect-ratio:4/5;border-radius:3px;background:linear-gradient(160deg,#241a13,#14100c);position:relative;overflow:hidden}
.portrait .ph{position:absolute;inset:0;display:grid;place-items:center;font-style:italic;color:rgba(220,172,125,.3);font-size:14px;font-family:var(--sans);letter-spacing:.1em}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.portrait img.loaded{opacity:1}
.worked{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);line-height:2.3;margin-top:40px}
.worked b{display:block;color:var(--warm);margin-bottom:12px;letter-spacing:.24em;font-weight:500}
.contact-inner h2{font-weight:300;font-size:clamp(46px,9vw,120px);letter-spacing:-.02em;line-height:.95;margin-bottom:14px}
.contact-inner h2 em{font-style:italic;color:var(--gold)}
.contact-inner .lead{font-style:italic;color:var(--mut);font-size:clamp(18px,2.4vw,26px);margin-bottom:48px}
/* one border per row + no gap, so every separation is identical and the
   hover line lands exactly on the separator */
.clinks{display:flex;flex-direction:column;max-width:640px;border-top:1px solid var(--line)}
.clink{display:flex;justify-content:space-between;align-items:center;padding:22px 4px;border-bottom:1px solid var(--line);font-size:clamp(20px,2.6vw,30px);position:relative;transition:padding-left .5s var(--ease)}
.clink .arr{font-family:var(--sans);font-size:13px;color:var(--gold);opacity:0;transform:translateX(-8px);transition:.4s}
.clink::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--warm);transition:width .5s var(--ease)}   /* overlays the row's own border-bottom */
.clink:hover{padding-left:20px}
.clink:hover .arr{opacity:1;transform:none}
.clink:hover::after{width:100%}

footer{padding:38px clamp(20px,7vw,110px);font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* ================= MOBILE ================= */
@media(max-width:640px){
  /* stack each list row: title, then year + credit beneath it (no more one-line overflow) */
  .row{grid-template-columns:1fr;gap:6px;align-items:start;padding:18px 2px}
  .row .rmeta{text-align:left;white-space:normal;line-height:1.7;margin-top:2px}
  .row .rmeta .yr{display:block}          /* year on its own line, credit beneath it */
  .row:hover{padding-left:0}                    /* no slide on touch */
  .row .rt{font-size:clamp(22px,7vw,30px)}

  /* about/contact drawers: clamp to viewport + scroll internally so the portrait is reachable */
  .drawer{align-items:flex-start;height:100svh;min-height:0;-webkit-overflow-scrolling:touch}
  .dwrap{padding:96px clamp(20px,7vw,40px) 64px}
  .about-grid{gap:28px}
  .about-grid .small{max-width:none}
  .portrait{aspect-ratio:4/5;width:min(100%,300px);margin:0 auto}
  .dclose{position:fixed;top:20px;right:20px}

  .contact-inner .clinks{max-width:none}
  .clink{font-size:clamp(19px,6vw,26px)}
}

/* stop any stray horizontal overflow that forces mobile zoom-out */
html,body{max-width:100%}