:root{
  --ink:#15130f;
  --ink-soft:#3a3630;
  --paper:#f3eee4;
  --paper-2:#ece5d3;
  --paper-3:#dcd3bd;
  --accent:#c4521e;
  --accent-2:#a8401a;
  --muted:#766f5e;
  --line:#1513101a;
  --line-soft:#15131010;
  --font-display:'Fraunces','Times New Roman',serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-in:cubic-bezier(.65,.05,.36,1);
  --sidebar-w:280px;
  --pad:clamp(24px,5vw,72px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);font-weight:400;line-height:1.55;overflow-x:hidden}
@media(min-width:1101px){body{cursor:none}}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
@media(min-width:1101px){button,a{cursor:none}}
::selection{background:var(--accent);color:var(--paper)}

/* KEYBOARD FOCUS — visible focus ring for accessibility */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}
.sidebar__nav a:focus-visible{outline-offset:-2px}
button:focus-visible,a:focus-visible{position:relative;z-index:1}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .marquee__track{animation:none}
  .sidebar__foot .dot::after{animation:none}
}

/* Screen-reader-only helper */
.sr-only{
  position:absolute!important;
  width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Skip link — hidden until keyboard focused */
.skip-link{
  position:fixed;top:-100px;left:16px;z-index:99999;
  padding:14px 22px;background:var(--ink);color:var(--paper);
  font-family:var(--font-mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  border-radius:6px;
  transition:top .25s var(--ease);
}
.skip-link:focus{top:16px;outline:2px solid var(--accent);outline-offset:2px}

/* SUBTLE GRAIN */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/></svg>")
}

/* CURSOR — orange transparent ring + dot in middle */
.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;pointer-events:none;z-index:10000;
  transform:translate(-50%,-50%);will-change:transform;
}
.cursor-dot{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  transition:width .3s var(--ease),height .3s var(--ease),background .3s,opacity .3s;
}
.cursor-ring{
  width:38px;height:38px;border-radius:50%;
  border:1.5px solid var(--accent);background:transparent;
  transition:width .35s var(--ease),height .35s var(--ease),border-color .35s,background .35s,transform .12s linear;
}
.cursor-ring .label{
  font-family:var(--font-mono);font-size:13px;color:var(--paper);
  letter-spacing:.05em;text-transform:uppercase;
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s;white-space:nowrap;
}
/* hover: ring grows + fills orange, dot disappears */
.cursor-ring.is-hover{
  width:72px;height:72px;background:var(--accent);border-color:var(--accent);
}
.cursor-ring.is-text{
  width:120px;height:120px;background:var(--accent);border-color:var(--accent);
}
.cursor-ring.is-text .label{opacity:1}
.cursor-dot.is-hover{opacity:0;width:0;height:0}
@media(max-width:1100px){.cursor-dot,.cursor-ring{display:none}}

/* PROGRESS — thinner, lower-contrast */
.scroll-progress{position:fixed;top:0;left:var(--sidebar-w);right:0;height:1px;width:0;background:var(--accent);z-index:200;transition:width .12s linear}
@media(max-width:1100px){.scroll-progress{left:0}}

/* INTRO — quiet, single line of motion */
.intro{
  position:fixed;inset:0;background:var(--paper);z-index:9998;
  display:flex;align-items:center;justify-content:center;
  transition:transform 1.1s cubic-bezier(.76,0,.24,1);
}
.intro.done{transform:translateY(-101%)}
.intro__rule{
  width:0;height:1px;background:var(--ink);
  animation:ruleGrow 1.2s cubic-bezier(.76,0,.24,1) .2s forwards;
}
.intro__label{
  position:absolute;bottom:var(--pad);left:var(--pad);right:var(--pad);
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);
  opacity:0;animation:fadeIn .8s ease .1s forwards;
}
.intro__label em{font-style:normal;color:var(--ink)}
@keyframes ruleGrow{to{width:min(50vw,560px)}}
@keyframes fadeIn{to{opacity:1}}

/* SIDEBAR */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);
  background:var(--paper);border-right:1px solid var(--line);
  padding:36px 28px 28px;z-index:50;
  display:flex;flex-direction:column;
  overflow-y:auto;
}
.sidebar::-webkit-scrollbar{width:0}

.sidebar__profile{text-align:center;display:flex;flex-direction:column;align-items:center}
.sidebar__avatar{
  width:170px;height:170px;border-radius:50%;
  background:var(--paper-3);position:relative;overflow:hidden;
  border:4px solid var(--paper);
  box-shadow:0 8px 30px -10px #15130f30;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
  margin-bottom:24px;
}
.sidebar__avatar:hover{transform:scale(1.04) rotate(-2deg);box-shadow:0 14px 40px -12px #15130f40}
.sidebar__avatar img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;
}
.sidebar__name{
  font-family:var(--font-display);font-weight:400;
  font-size:28px;letter-spacing:-.01em;line-height:1;margin-bottom:10px;
}
.sidebar__name em{font-style:italic;color:var(--accent)}
.sidebar__role{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);
}

.sidebar__divider{
  height:1px;background:var(--line);margin:24px 0;
}

.sidebar__contact{display:flex;flex-direction:column;gap:14px}
.sidebar__contact__row{
  display:flex;align-items:center;gap:12px;
  font-size:14px;color:var(--ink-soft);
}
.sidebar__contact__row .icon{
  width:28px;height:28px;border-radius:50%;
  background:var(--paper-2);display:grid;place-items:center;
  flex-shrink:0;color:var(--muted);
  transition:background .3s,color .3s;
}
.sidebar__contact__row:hover .icon{background:var(--ink);color:var(--paper)}
.sidebar__contact__row .icon svg{width:13px;height:13px}
.sidebar__contact__row .text{word-break:break-word;line-height:1.3;font-size:13.5px}

.sidebar__nav{margin-top:8px}
.sidebar__nav ul{list-style:none}
.sidebar__nav li{padding:0}
.sidebar__nav a{
  display:grid;grid-template-columns:24px 22px 1fr auto;gap:14px;align-items:center;
  padding:13px 14px;border-radius:6px;
  font-family:var(--font-mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);
  position:relative;
  transition:background .35s var(--ease),color .35s var(--ease),padding .45s var(--ease);
}
.sidebar__nav a .num{color:var(--muted);font-weight:400;transition:color .35s}
.sidebar__nav a .ico{
  width:22px;height:22px;display:grid;place-items:center;color:var(--muted);
  transition:color .35s var(--ease),transform .45s var(--ease);
}
.sidebar__nav a .ico svg{width:18px;height:18px;stroke-width:1.5}
.sidebar__nav a .label{
  font-family:var(--font-mono);font-size:13px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
}
.sidebar__nav a .dot-mark{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  opacity:0;transition:opacity .35s var(--ease);
}
.sidebar__nav a:hover{background:var(--paper-2)}
.sidebar__nav a:hover .num{color:var(--accent)}
.sidebar__nav a:hover .ico{color:var(--ink);transform:translateX(-2px)}
.sidebar__nav a.is-active{background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line)}
.sidebar__nav a.is-active .num{color:var(--accent)}
.sidebar__nav a.is-active .ico{color:var(--accent)}
.sidebar__nav a.is-active .dot-mark{opacity:1}

.sidebar__social{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  margin-top:auto;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.sidebar__social__group{display:flex;gap:18px;align-items:center}
.sidebar__social a{
  width:auto;height:auto;border-radius:0;
  background:transparent;color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;
  transition:color .3s,transform .35s var(--ease);
}
.sidebar__social a:hover{background:transparent;color:var(--ink);transform:translateY(-2px)}
.sidebar__social svg{width:18px;height:18px}

.sidebar__cv{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:50px;
  border:1px solid var(--muted);background:transparent;color:var(--muted);
  font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  white-space:nowrap;line-height:1;
  transition:color .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease);
}
.sidebar__cv:hover{color:var(--paper);background:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.sidebar__cv svg{width:10px;height:10px;flex-shrink:0;transition:transform .35s var(--ease)}
.sidebar__cv:hover svg{transform:translateY(2px)}

.sidebar-toggle{
  display:none;position:fixed;top:18px;right:18px;z-index:60;
  width:44px;height:44px;border-radius:50%;
  background:var(--ink);color:var(--paper);align-items:center;justify-content:center;border:0;
}
@media(max-width:1100px){
  .sidebar{transform:translateX(-100%);transition:transform .5s var(--ease);width:280px;box-shadow:0 0 60px #00000022}
  .sidebar.is-open{transform:translateX(0)}
  .sidebar-toggle{display:flex}
}

/* MAIN */
.main{margin-left:var(--sidebar-w)}
@media(max-width:1100px){.main{margin-left:0}}

/* SECTION SCAFFOLD */
.section{padding:140px var(--pad) 120px;position:relative;overflow:hidden}
@media(max-width:800px){.section{padding:100px var(--pad) 80px}}

/* SECTION MARKER — tag + large title, that's it */
.section-marker{
  margin-bottom:clamp(40px,5vw,72px);
  padding-bottom:clamp(20px,3vw,32px);
  border-bottom:1px solid var(--line);
}
.section-marker__tag{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-mono);font-size:13px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--muted);margin-bottom:clamp(20px,2.5vw,32px);
}
.section-marker__tag::before{content:"";width:32px;height:1px;background:var(--accent)}
.section-marker__title{
  font-family:var(--font-display);font-weight:200;
  font-size:clamp(48px,8vw,128px);line-height:.95;letter-spacing:-.03em;
  font-optical-sizing:auto;
}
.section-marker__title em{font-style:italic;font-weight:300;color:var(--accent)}

/* dark section variant */
.cv .section-marker,.contact .section-marker{border-bottom-color:#ffffff1a}
.cv .section-marker__tag,.contact .section-marker__tag{color:#ffffffa0}

/* Old kicker/section-head — kept for back-compat but reduced */
.kicker{
  display:flex;align-items:center;gap:14px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
  margin-bottom:32px;
}
.kicker::before{content:"";width:36px;height:1px;background:var(--accent)}
.kicker strong{color:var(--ink);font-weight:500}

/* HERO */
.hero{
  min-height:100vh;padding:var(--pad);
  display:grid;grid-template-rows:auto auto auto auto;gap:clamp(28px,4vw,48px);
  position:relative;
}

/* HERO IMAGE — editorial masthead */
.hero__image{
  width:100%;aspect-ratio:21/9;border-radius:10px;
  background:var(--ink);position:relative;overflow:hidden;
  display:grid;place-items:center;
  transition:transform .8s var(--ease);
}
.hero__image::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 80% at 18% 28%,var(--accent) 0%,transparent 55%),
    radial-gradient(ellipse 70% 60% at 82% 75%,#6b2810 0%,transparent 55%),
    linear-gradient(135deg,#2a2722 0%,#15130f 100%);
}
.hero__image::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(to right,#ffffff08 1px,transparent 1px),
    linear-gradient(to bottom,#ffffff08 1px,transparent 1px);
  background-size:56px 56px;
  z-index:1;
}
.hero__image-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  z-index:0;
  filter:brightness(.85) saturate(.95);
}
/* Subtle vignette/gradient on top to keep the corner labels readable */
.hero__image-bg + .hero__image-content::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,#15130f80 0%,transparent 25%,transparent 75%,#15130f80 100%);
  z-index:-1;
}
.hero__image-content{
  position:relative;z-index:2;color:var(--paper);
  width:100%;height:100%;
  padding:clamp(20px,3vw,40px);
  display:flex;flex-direction:column;justify-content:space-between;
}
.hero__image .corner{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  display:flex;justify-content:space-between;opacity:.7;
}
.hero__image .corner span:last-child{opacity:.5}
.hero__image .center{flex:1;display:grid;place-items:center;position:relative}
.hero__image .center .mark{
  font-family:var(--font-display);font-style:italic;font-weight:200;
  font-size:clamp(72px,14vw,200px);line-height:.85;letter-spacing:-.045em;
  text-align:center;
}
.hero__image .center .mark .dot{color:var(--accent);font-style:normal;display:inline-block;transform:translateY(-.08em)}
.hero__image .center .sub{
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.32em;text-transform:uppercase;
  margin-top:18px;opacity:.7;text-align:center;
}
.hero__image .center .sub::before,.hero__image .center .sub::after{content:"—";margin:0 .9em;opacity:.5}
.hero__image .foot{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:center;opacity:.5;
}
.hero__image .foot .mid{display:flex;align-items:center;gap:8px}
.hero__image .foot .mid .pulse{width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent);animation:pulseDot 2s ease-in-out infinite}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 var(--accent)}50%{box-shadow:0 0 0 6px transparent}}
.hero__image:hover{transform:scale(1.004)}

.hero__title-wrap{
  display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(8px,2vw,20px);
}
.hero__title{
  font-family:var(--font-display);font-weight:200;
  font-size:clamp(48px,10vw,160px);
  line-height:.94;letter-spacing:-.035em;
  font-optical-sizing:auto;
}
.hero__line{display:block;overflow:hidden;padding-bottom:.06em}
.hero__line > span{
  display:inline-block;transform:translateY(110%);
  animation:reveal 1.2s var(--ease) forwards;
}
.hero__line:nth-child(1) > span{animation-delay:.35s}
.hero__line:nth-child(2) > span{animation-delay:.45s}
.hero__line:nth-child(3) > span{animation-delay:.55s}
@keyframes reveal{to{transform:translateY(0)}}
@keyframes up{to{opacity:1;transform:translateY(0)}}

.hero__title em{font-style:italic;font-weight:300;color:var(--accent)}

.hero__rotator{display:inline-block;position:relative;vertical-align:baseline}
.hero__rotator .w{
  display:inline-block;font-style:italic;font-weight:300;color:var(--accent);
  position:absolute;left:0;top:0;opacity:0;transform:translateY(35%);
  transition:opacity .6s var(--ease),transform .7s var(--ease);
  white-space:nowrap;
}
.hero__rotator .w.is-active{opacity:1;transform:translateY(0);position:relative}
.hero__rotator .w.is-out{opacity:0;transform:translateY(-35%)}

.hero__bottom{
  display:block;
  padding-top:24px;border-top:1px solid var(--line);
  opacity:0;animation:up 1s var(--ease) .9s forwards;
}
.hero__blurb{
  max-width:560px;font-size:16px;line-height:1.65;color:var(--ink-soft);
}
@media(max-width:800px){
  .hero__image{aspect-ratio:4/3}
  .hero__image .center .mark{font-size:clamp(60px,18vw,110px)}
}

/* MARQUEE — refined: smaller, single-line, asterisks not stars */
.marquee{
  background:var(--ink);color:var(--paper);padding:18px 0;overflow:hidden;white-space:nowrap;
  border-top:1px solid var(--ink);
}
.marquee__track{
  display:inline-flex;gap:48px;animation:slide 50s linear infinite;
  font-family:var(--font-display);font-style:italic;font-weight:300;
  font-size:clamp(24px,3.6vw,42px);line-height:1;padding-right:48px;
}
.marquee__track span{display:inline-flex;align-items:center;gap:48px}
.marquee__track .sep{color:var(--accent);font-style:normal;font-family:var(--font-mono);font-size:.55em}
@keyframes slide{to{transform:translateX(-50%)}}

/* SECTION HEAD — editorial, asymmetric */
.section-head{
  display:grid;grid-template-columns:1fr;gap:24px;
  margin-bottom:80px;
  padding-bottom:28px;border-bottom:1px solid var(--line);
}
.section-head__title{
  font-family:var(--font-display);font-weight:200;
  font-size:clamp(44px,7vw,108px);line-height:1;letter-spacing:-.03em;
  font-optical-sizing:auto;
}
.section-head__title em{font-style:italic;font-weight:300;color:var(--accent)}

/* ABOUT */
.about{background:var(--paper-2)}
.about__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:start}
.about__lead{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(24px,2.8vw,38px);line-height:1.25;letter-spacing:-.018em;
}
.about__lead em{font-style:italic;color:var(--accent)}
.about__body{display:flex;flex-direction:column;gap:28px}
.about__body p{font-size:17px;line-height:1.75;color:var(--ink-soft)}
.about__facts{
  display:grid;grid-template-columns:1fr 1fr;gap:20px 48px;
  padding-top:32px;margin-top:8px;border-top:1px solid var(--line);
}
.about__facts dt{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px;
}
.about__facts dd{font-family:var(--font-display);font-size:18px;font-weight:400;letter-spacing:-.005em}
.about__facts dd em{font-style:italic;color:var(--accent)}
@media(max-width:900px){.about__grid{grid-template-columns:1fr;gap:48px}}

/* CV */
.section.cv{background:var(--ink);color:var(--paper);padding-left:0;padding-right:0}
.cv > .section-marker{margin-left:var(--pad);margin-right:var(--pad)}
.cv .section-head{border-bottom-color:#ffffff1a}
.cv .kicker{color:#ffffffa0}
.cv .kicker strong{color:var(--paper)}
.cv .kicker::before{background:var(--accent)}
.cv__intro p{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(20px,2.2vw,30px);line-height:1.35;letter-spacing:-.005em;
}
.cv__intro p em{font-style:italic;color:var(--accent)}
.cv__download{
  display:inline-flex;align-items:center;gap:14px;padding:16px 26px;
  border:1px solid var(--paper);border-radius:999px;
  font-family:var(--font-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  transition:background .4s var(--ease),color .4s,padding .4s var(--ease),border-color .4s;
  align-self:start;justify-self:start;
}
.cv__download:hover{background:var(--accent);border-color:var(--accent);padding-right:36px}
.cv__download svg{transition:transform .45s var(--ease)}
.cv__download:hover svg{transform:translate(4px,-4px)}

/* CV — CINEMATIC STACK */
.cv__intro{
  display:grid;grid-template-columns:1.2fr 1fr;gap:60px;
  margin-bottom:60px;align-items:end;
  padding:0 var(--pad);
}

.cv-track-wrap{
  position:relative;width:100%;
  height:100vh;min-height:680px;max-height:900px;
  overflow:hidden;
  perspective:1800px;
  perspective-origin:50% 50%;
  background:transparent;
}

/* Stage: all pages stack at the same position; JS controls horizontal slide */
.cv-stage{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  transform-style:preserve-3d;
  z-index:1;
}

.cv-page{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:min(640px,80vw);
  height:560px;
  transform-style:preserve-3d;
  will-change:transform,opacity;
  pointer-events:none;
}
.cv-page.is-active{pointer-events:auto}

/* Page tag */
.cv-page__tag{
  position:absolute;top:-44px;left:0;right:0;
  display:flex;align-items:center;justify-content:center;gap:14px;
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.32em;text-transform:uppercase;
  color:#ffffff95;pointer-events:none;
}
.cv-page__tag::before,.cv-page__tag::after{
  content:"";flex:1;max-width:100px;height:1px;background:#ffffff20;
}

/* Cards positioned at centre of stage. JS slides horizontally + scales */
.cv-stage .cv-card{
  position:absolute;top:50%;left:50%;
  width:min(640px,80vw);height:min(560px,78vh);
  margin-top:-280px;margin-left:-320px;
  background:#1f1c17;border:1px solid #ffffff14;border-radius:12px;
  padding:44px 40px 44px 68px;display:flex;flex-direction:column;
  overflow:hidden;
  will-change:transform,opacity;
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease);
}
.cv-stage .cv-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:0;transition:opacity .5s var(--ease);
}
.cv-page.is-active .cv-card{border-color:#ffffff30;box-shadow:0 30px 80px -20px #00000080,0 0 0 1px #ffffff20}
.cv-page.is-active .cv-card::before{opacity:.7}
.cv-page.is-active .cv-card__vtag{color:#ffffffa0}
.cv-page.is-active .cv-card__glyph{border-color:var(--accent);color:var(--accent);transform:rotate(8deg)}

.cv-card__vtag{
  position:absolute;top:40px;bottom:40px;left:24px;
  display:flex;align-items:center;justify-content:flex-start;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;
  color:#ffffff70;white-space:nowrap;pointer-events:none;
  transition:color .5s var(--ease);
}
.cv-card__vtag::after{
  content:"";position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.5;
}
.cv-stage .cv-card.is-hero .cv-card__vtag{color:#ffffffa0}

.cv-card__glyph{
  position:absolute;top:32px;right:32px;
  width:44px;height:44px;border-radius:50%;
  border:1px solid #ffffff20;
  display:grid;place-items:center;
  color:#ffffff80;
  transition:border-color .5s var(--ease),color .5s var(--ease),transform .6s var(--ease);
}
.cv-card__glyph svg{width:18px;height:18px}
.cv-stage .cv-card.is-hero .cv-card__glyph{
  border-color:var(--accent);color:var(--accent);transform:rotate(8deg);
}

/* Year watermark */
.cv-year{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:0;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  opacity:.06;
  user-select:none;
}
.cv-year__label{
  font-family:var(--font-mono);font-size:13px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--paper);
}
.cv-year__num{
  font-family:var(--font-display);font-style:italic;font-weight:200;
  font-size:clamp(180px,32vw,440px);line-height:.8;letter-spacing:-.06em;
  color:var(--paper);
  display:block;
  transition:opacity .35s var(--ease);
}
.cv-year__num.is-swap{opacity:0}

.cv-card__num{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent);margin-bottom:16px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.cv-card__pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 11px;border-radius:50px;
  background:var(--accent);color:var(--paper);
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  line-height:1.4;
}
.cv-card__pill::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--paper);
  flex-shrink:0;
}
.cv-card__date{
  font-family:var(--font-mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:#ffffff95;margin-bottom:24px;
}
.cv-card__role{
  font-family:var(--font-display);font-weight:300;
  font-size:32px;line-height:1.05;letter-spacing:-.02em;
  margin-bottom:10px;
}
.cv-card__company{
  font-family:var(--font-display);font-style:italic;font-weight:300;
  font-size:18px;color:var(--accent);margin-bottom:8px;
}
.cv-card__link{
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#ffffff90;margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid #ffffff12;
}
.cv-card__body{
  font-size:15.5px;line-height:1.7;color:#ffffffb0;
  flex:1;
}
.cv-card__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:24px}
.cv-card__chips span{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;
  padding:5px 11px;border:1px solid #ffffff1f;border-radius:999px;color:#ffffffa8;
}

/* Side card variant */
.cv-card--side{background:linear-gradient(160deg,#1f1c17 0%,#15130f 100%);overflow-y:auto}
.cv-card--side::-webkit-scrollbar{width:4px}
.cv-card--side::-webkit-scrollbar-track{background:transparent}
.cv-card--side::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:2px}
.cv-card--side .cv-side__group{margin-bottom:18px}
.cv-card--side .cv-side__group:last-child{margin-bottom:0}
.cv-card--side h4{
  font-family:var(--font-mono);font-size:12px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--accent);
  margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid #ffffff12;
}
.cv-card--side .lang{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:7px 0;
}
.cv-card--side .lang span:first-child{font-family:var(--font-display);font-size:18px}
.cv-card--side .lang span:last-child{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);
}
.cv-card--side .interests{display:flex;flex-wrap:wrap;gap:6px}
.cv-card--side .interests span{
  padding:6px 11px;border:1px solid #ffffff1f;border-radius:999px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;
  transition:background .3s,color .3s,border-color .3s;
}
.cv-card--side .interests span:hover{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.cv-card--side .ref{
  font-family:var(--font-display);font-size:18px;font-style:italic;opacity:.85;
}

/* Scroll hint */
.cv-scrollhint{
  position:absolute;top:36px;right:var(--pad);
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:#ffffff95;pointer-events:none;z-index:5;
}
.cv-scrollhint svg{width:8px;height:32px;animation:arrowSlideY 1.6s ease-in-out infinite}
@keyframes arrowSlideY{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* Mobile: collapse stack into vertical scroll */
@media(max-width:900px){
  .cv__intro{grid-template-columns:1fr;gap:24px;padding:0 var(--pad)}
  .cv-track-wrap{height:auto;min-height:0;max-height:none;overflow:visible;perspective:none}
  .cv-stage{position:relative;display:block;padding:0 var(--pad);transform-style:flat}
  .cv-page{
    position:relative;top:auto;left:auto;
    transform:none!important;opacity:1!important;
    width:100%;height:auto;
    margin-bottom:32px;pointer-events:auto;
    display:block;
    transform-style:flat;
  }
  .cv-page__tag{position:relative;top:auto;margin-bottom:18px;justify-content:flex-start}
  .cv-stage .cv-card{
    position:relative;top:auto;left:auto;
    width:100%;max-width:none;height:auto;min-height:0;
    margin:0;padding:32px 24px;
    transform:none!important;opacity:1!important;
    filter:none!important;
  }
  .cv-card__vtag,.cv-card__glyph{display:none}
  .cv-card__role{font-size:26px}
  .cv-year,.cv-scrollhint{display:none}
}

/* PORTFOLIO */
.portfolio{position:relative;padding:140px 0 100px;background:var(--paper)}
.portfolio .section-head{padding-left:var(--pad);padding-right:var(--pad)}
.portfolio__list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.work{
  display:grid;grid-template-columns:60px 1fr auto auto;gap:48px;align-items:center;
  padding:42px var(--pad);border-bottom:1px solid var(--line);
  position:relative;text-align:left;width:100%;overflow:hidden;isolation:isolate;
  transition:color .5s var(--ease);
}
.work::before{
  content:"";position:absolute;inset:0;background:var(--ink);
  transform:translateY(100%);transition:transform .65s var(--ease);z-index:-1;
}
.work:hover::before{transform:translateY(0)}
.work:hover{color:var(--paper)}
.work__num{
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.22em;color:var(--muted);
  transition:color .5s,transform .65s var(--ease);
}
.work:hover .work__num{color:var(--accent);transform:translateY(-2px)}
.work__title-wrap{display:flex;flex-direction:column;gap:8px;min-width:0}
.work__title{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(30px,4.4vw,64px);line-height:1;letter-spacing:-.025em;
  transition:transform .65s var(--ease),font-style .4s,color .4s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.work:hover .work__title{transform:translateX(14px);font-style:italic;color:var(--accent)}
.work__cat{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted);opacity:.85;
  transition:color .5s,transform .65s var(--ease) .04s,opacity .4s;
}
.work:hover .work__cat{color:#ffffffa0;transform:translateX(14px);opacity:1}

/* OFFLINE STATE — strikethrough title, dimmed, small status pill */
.work__status{
  display:inline-block;margin-left:14px;vertical-align:middle;
  font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);
  border:1px solid var(--line);border-radius:999px;
  padding:5px 12px;
  position:relative;top:-3px;
  transition:color .5s,border-color .5s;
}
.work--offline .work__title{text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:#ffffff45}
.work--offline:hover .work__title{color:var(--muted);font-style:normal;text-decoration-color:var(--muted)}
.work--offline:hover .work__status{color:var(--paper);border-color:#ffffff45}
.work__year{
  font-family:var(--font-display);font-style:italic;font-weight:300;
  font-size:clamp(26px,3vw,40px);line-height:1;color:var(--paper-3);
  transition:color .5s,transform .65s var(--ease);
}
.work:hover .work__year{color:#ffffff30;transform:translateX(-12px)}
.work__arrow{
  width:48px;height:48px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;position:relative;overflow:hidden;justify-self:end;
  transition:border-color .4s,transform .55s var(--ease);
}
.work__arrow::before{
  content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);
  transform:scale(0);transition:transform .55s var(--ease);z-index:1;
}
.work__arrow svg{position:relative;z-index:2;width:13px;height:13px;transition:transform .45s var(--ease),color .4s}
.work:hover .work__arrow{border-color:var(--accent)}
.work:hover .work__arrow::before{transform:scale(1)}
.work:hover .work__arrow svg{transform:translate(2px,-2px);color:var(--paper)}
.work__preview{
  position:absolute;width:300px;height:210px;pointer-events:none;
  opacity:0;transform:scale(.94) rotate(-3deg);
  transition:opacity .35s,transform .55s var(--ease);
  border-radius:6px;overflow:hidden;z-index:5;
  background:var(--ink-soft);box-shadow:0 30px 80px -20px #00000060;
}
.work__preview .preview-art{width:100%;height:100%}
.work:hover .work__preview{opacity:1;transform:scale(1) rotate(-2deg)}
@media(max-width:900px){
  .work{grid-template-columns:36px 1fr 36px;gap:18px;padding:28px var(--pad)}
  .work__year{display:none}
  .work__preview{display:none}
  .work__cat{font-size:12px;letter-spacing:.18em}
}

/* MODAL */
.modal-backdrop{
  position:fixed;inset:0;background:#15130fcc;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  z-index:200;opacity:0;pointer-events:none;transition:opacity .5s var(--ease);
}
.modal-backdrop.is-open{opacity:1;pointer-events:auto}
/* ============================================================
   MODAL — Full-screen overlay design (desktop)
   Image fills the entire viewport. Content lives in a floating
   glass panel anchored to the right with margin. Gallery dashes
   and close button float over the image.
   ============================================================ */
.modal{
  position:fixed;inset:0;
  width:100vw;height:100vh;
  background:var(--ink);z-index:201;
  opacity:0;pointer-events:none;overflow:hidden;
  transition:opacity .5s var(--ease);
  display:grid;grid-template-columns:70fr 30fr;
}
.modal.is-open{opacity:1;pointer-events:auto}

.modal__visual{
  position:relative;
  background:var(--ink);overflow:hidden;
  min-width:0;min-height:0;
}
.modal__visual-main{
  position:absolute;inset:0;overflow:hidden;
}
.modal__visual-main .swiper-wrapper{position:static}
.modal__visual-main .preview-art{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s var(--ease)}
.modal__visual-main .preview-art.is-active{opacity:1}
.modal__visual-counter{display:none}

/* Gallery dashes — overlay bottom-left of image, transparent background */
.modal__gallery{
  position:absolute;bottom:28px;left:36px;z-index:3;
  display:flex;align-items:center;gap:20px;
  padding:0;background:transparent;border-top:0;
  font-family:var(--font-mono);
}
.modal__gallery::-webkit-scrollbar{display:none}
.modal__gallery-counter{
  font-size:11px;letter-spacing:.22em;color:rgba(255,255,255,.55);
  text-transform:uppercase;flex-shrink:0;line-height:1;
}
.modal__gallery-counter b{color:var(--paper);font-weight:500}
.modal__gallery-dashes{display:flex;gap:4px;align-items:center}
.modal__gallery-thumb{
  position:relative;
  width:40px;height:28px;padding:0;border:0;background:transparent;
  cursor:pointer;display:grid;place-items:center;
  -webkit-tap-highlight-color:transparent;
}
.modal__gallery-thumb::before{
  content:"";
  display:block;width:32px;height:2px;
  background:rgba(255,255,255,.28);
  transition:background .25s var(--ease);
}
.modal__gallery-thumb:hover::before{background:rgba(255,255,255,.55)}
.modal__gallery-thumb.is-active::before{background:var(--accent)}

.art-stack{position:absolute;inset:0;width:100%;height:100%;background:var(--ink)}
.art-stack svg{position:absolute;inset:0;width:100%;height:100%}
.art-stack .art-pic{position:absolute;inset:0;width:100%;height:100%;display:block}
.art-stack .art-img,
.art-stack .art-pic img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center top;
  display:block;background:#0a0907;
}

/* Floating glass panel — right side, 30% wide, margins all around */
.modal__body{
  position:relative;
  background:var(--paper);
  display:flex;flex-direction:column;
  overflow:hidden;
  min-width:0;min-height:0;
}

/* Directional slide transition for project navigation.
   When user clicks next, content slides left out, then new content slides in from right.
   When user clicks prev, the opposite direction.
   Project nav at the bottom of the panel also participates so titles update in sync. */
.modal__peek,.modal__inner,.modal__project-nav{
  transition:opacity .28s cubic-bezier(.22,1,.36,1),transform .42s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}
.modal__body.is-leaving-next .modal__peek,
.modal__body.is-leaving-next .modal__inner,
.modal__body.is-leaving-next .modal__project-nav{
  opacity:0;transform:translateX(-32px);
}
.modal__body.is-leaving-prev .modal__peek,
.modal__body.is-leaving-prev .modal__inner,
.modal__body.is-leaving-prev .modal__project-nav{
  opacity:0;transform:translateX(32px);
}
/* Initial position when content enters — set without transition so it appears off-screen instantly */
.modal__body.is-entering-next .modal__peek,
.modal__body.is-entering-next .modal__inner,
.modal__body.is-entering-next .modal__project-nav{
  opacity:0;transform:translateX(32px);transition:none;
}
.modal__body.is-entering-prev .modal__peek,
.modal__body.is-entering-prev .modal__inner,
.modal__body.is-entering-prev .modal__project-nav{
  opacity:0;transform:translateX(-32px);transition:none;
}

/* Image fade-out during transition — synchronized with content slide */
.modal__visual{transition:opacity .35s cubic-bezier(.22,1,.36,1)}
.modal.is-transitioning .modal__visual{opacity:.35}

.modal__peek,.modal__inner{display:block}
.modal__peek{padding:40px 36px 0;flex-shrink:0}
.modal__inner{
  padding:8px 36px 24px;
  overflow-y:auto;flex:1;min-height:0;
}
.modal__inner::-webkit-scrollbar{width:3px}
.modal__inner::-webkit-scrollbar-thumb{background:var(--paper-3);border-radius:2px}

.modal__handle{display:none}
.modal__img-nav{display:none}

.modal__num{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;
}
.modal__title{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(28px,2.6vw,40px);line-height:1.02;letter-spacing:-.025em;margin-bottom:8px;
}
.modal__title em{font-style:italic;color:var(--accent)}
.modal__sub{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;color:var(--muted);
  text-transform:uppercase;margin-bottom:20px;
}
.modal__chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.modal__chips span{
  font-family:var(--font-mono);font-size:11px;padding:4px 10px;
  border:1px solid var(--line);border-radius:999px;
}
.modal__body p{font-size:14px;line-height:1.65;color:var(--ink-soft);margin-bottom:14px}
.modal__body h4{
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  margin:20px 0 8px;
}
.modal__body ul{list-style:none;margin-bottom:20px}
.modal__body ul li{
  font-size:13px;line-height:1.5;padding:9px 0 9px 20px;position:relative;
  border-bottom:1px solid var(--line);
}
.modal__body ul li::before{content:"→";position:absolute;left:0;color:var(--accent)}
.modal__meta{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;
  padding-top:18px;border-top:1px solid var(--line);
}
.modal__meta > div h5{
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;
}
.modal__meta > div p{font-family:var(--font-display);font-size:14px;margin:0}

.modal__cta{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:22px;padding:12px 18px;background:var(--ink);color:var(--paper);
  border-radius:999px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;transition:background .35s,padding .4s var(--ease);
  align-self:flex-start;
}
.modal__cta:hover{background:var(--accent);padding-right:26px}
.modal__cta svg{width:11px;height:11px;transition:transform .4s var(--ease)}
.modal__cta:hover svg{transform:translate(4px,-4px)}

.modal__cta.is-offline{
  background:transparent;color:var(--muted);
  border:1px solid var(--line);
  cursor:not-allowed;gap:14px;
}
.modal__cta.is-offline:hover{background:transparent;padding:12px 18px}
.modal__cta.is-offline s{text-decoration-thickness:1.5px}

.modal__close{
  position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:50%;
  background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;
  z-index:6;transition:transform .4s var(--ease),background .3s,color .3s;
}
.modal__close:hover{background:var(--accent);color:var(--paper);transform:rotate(90deg)}

/* Project nav at the bottom of the floating panel — orange circle + italic accent name */
.modal__project-nav{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 24px 20px;
  border-top:1px solid var(--line);
  background:transparent;
  flex-shrink:0;
}
.modal__project-btn{
  display:flex;align-items:center;gap:10px;
  padding:4px;border:0;border-radius:0;background:transparent;
  font-family:var(--font-body);min-width:0;flex:1;
  cursor:pointer;
}
.modal__project-btn.next{justify-content:flex-end}
.modal__project-btn .arrow{
  width:36px;height:36px;border-radius:50%;
  background:var(--accent);color:var(--paper);
  display:grid;place-items:center;flex-shrink:0;
  transition:background .25s,transform .3s var(--ease);
}
.modal__project-btn:hover .arrow{background:var(--accent-2)}
.modal__project-btn:active .arrow{transform:scale(.92)}
.modal__project-btn .arrow svg{width:11px;height:11px}
.modal__project-btn .meta{
  display:flex;flex-direction:column;min-width:0;gap:2px;
  text-align:left;line-height:1.1;
}
.modal__project-btn.next .meta{text-align:right}
.modal__project-btn .label{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);line-height:1;
}
.modal__project-btn .title{
  font-family:var(--font-display);font-style:italic;font-weight:300;
  font-size:15px;line-height:1.15;letter-spacing:-.01em;
  color:var(--accent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.modal__nav-btn{display:none}
.modal-backdrop{display:none}
.modal__peek-chev{display:none}

@media(max-width:900px){
  /* Modal becomes a full-screen takeover on mobile */
  .modal{
    top:0;left:0;width:100vw;width:100dvw;
    height:100vh;height:100dvh;max-height:none;
    border-radius:0;
    transform:translate(0,0) scale(.98);
    grid-template-columns:1fr;grid-template-rows:1fr;
  }
  .modal.is-open{transform:translate(0,0) scale(1)}

  /* Visual fills the entire viewport behind the sheet */
  .modal__visual{
    grid-row:1/2;grid-column:1/2;
    min-height:0;aspect-ratio:auto;
    height:100vh;height:100dvh;
    width:100%;
    position:relative;overflow:hidden;
    touch-action:pan-y;
  }

  /* Mobile: slides are a horizontal carousel, one image per page-width slide.
     Swiper.js handles the touch interaction.
     The minimal swiper layout below is scoped to mobile only so desktop's
     cross-fade behavior isn't affected. */
  .modal__visual-main{
    flex:1;position:relative;overflow:hidden;
  }
  .modal__visual-main .swiper{width:100%;height:100%}
  .modal__visual-main .swiper-wrapper{
    position:relative;width:100%;height:100%;
    display:flex;box-sizing:content-box;
  }
  .modal__visual-main .swiper-slide{
    flex-shrink:0;
    width:100vw;width:100dvw;
    height:100vh;height:100dvh;
    position:relative;display:block;
  }
  .modal__visual-main .preview-art{
    position:relative;inset:auto;
    width:100vw;width:100dvw;
    height:100vh;height:100dvh;
    opacity:1;transition:none;
    display:block;overflow:hidden;
    -webkit-user-select:none;user-select:none;
  }
  .modal__visual-main .art-stack{
    background:#0a0907;
    position:absolute;inset:0;
    width:100%;height:100%;
  }
  .modal__visual-main .art-stack svg{position:absolute;inset:0;width:100%;height:100%}
  .modal__visual-main .art-pic{
    position:absolute;top:0;left:0;
    width:100%;height:100%;
    display:block;
  }
  .modal__visual-main .art-img,
  .modal__visual-main .art-pic img{
    position:absolute;top:0;left:0;right:0;bottom:0;
    width:100%;height:100%;
    object-fit:cover;
    object-position:center top;
    display:block;
    pointer-events:none;
    -webkit-user-drag:none;
    user-select:none;
    -webkit-touch-callout:none;
  }

  /* Desktop counter pill and thumb strip hidden on mobile */
  .modal__visual-counter{display:none}
  .modal__gallery{display:none}

  /* Dark overlay that fades in as the sheet expands (driven by JS via --sheet-dim) */
  .modal__visual::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:#0a0907;opacity:var(--sheet-dim,0);
    transition:opacity .35s var(--ease);
    z-index:2;
  }

  /* Close — sits at top-right of the sheet (inside body, follows sheet up/down) */
  .modal__close{
    position:absolute;top:10px;right:14px;
    width:36px;height:36px;border-radius:50%;
    background:var(--paper-2);color:var(--ink);
    border:1px solid var(--line);
    backdrop-filter:none;-webkit-backdrop-filter:none;
    z-index:7;
    transition:background .25s,color .25s,transform .35s var(--ease);
  }
  .modal__close:active{background:var(--ink);color:var(--paper);transform:scale(.94)}
  .modal__close:hover{background:var(--ink);color:var(--paper);transform:none}

  /* Image side arrows — left/right at mid-image, fade when sheet expands */
  .modal__img-nav{
    position:absolute;top:50%;left:0;right:0;
    transform:translateY(-50%);
    display:flex;justify-content:space-between;
    padding:0 10px;pointer-events:none;
    z-index:4;transition:opacity .25s;
  }
  .modal--sheet-up .modal__img-nav{opacity:0;pointer-events:none}
  .modal__img-btn{
    pointer-events:auto;
    width:42px;height:42px;border-radius:50%;
    background:#15130f66;color:var(--paper);border:0;
    display:grid;place-items:center;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    transition:background .25s,transform .35s var(--ease);
  }
  .modal__img-btn:active{background:var(--accent);transform:scale(.92)}
  .modal__img-btn svg{width:16px;height:16px}

  /* Body becomes the bottom sheet.
     Geometry: fixed height of 70dvh. Slides via `top` from peek (mostly hidden
     at bottom) to full (top at 30dvh). This keeps the sheet bottom anchored to
     viewport bottom in both states so the project nav never gets clipped. */
  .modal__body{
    grid-row:1/2;grid-column:1/2;
    position:absolute;left:0;right:0;
    z-index:5;
    width:100%;
    height:70dvh;
    background:var(--paper);
    border-radius:18px 18px 0 0;
    box-shadow:0 -8px 30px -10px #00000040;
    padding:0;
    overflow:visible;
    top:var(--sheet-top,calc(100dvh - 180px));
    will-change:top;
    touch-action:pan-y;
    display:flex;flex-direction:column;
  }
  .modal__body.is-smooth{transition:top .42s cubic-bezier(.22,1,.36,1)}

  /* Mobile sheet structure (overrides display:contents from desktop base) */
  .modal__handle,.modal__img-nav{display:flex}

  /* Drag handle area — handle bar on top, chevron pill below. Tappable target. */
  .modal__handle{
    position:relative;flex-shrink:0;
    flex-direction:column;align-items:center;
    padding:10px 0 8px;gap:6px;
    cursor:grab;
  }
  .modal__handle:active{cursor:grabbing}
  .modal__handle::before{
    content:"";width:42px;height:4px;border-radius:2px;
    background:var(--paper-3);
  }

  .modal__peek{
    display:block;flex-shrink:0;padding:4px 22px 18px;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .modal__peek-text{min-width:0}

  /* Chevron lives inline in the handle area, becomes a small pill cue.
     Rotates when sheet is full to point down. */
  .modal__peek-chev{
    width:auto;height:24px;padding:0 12px;
    border-radius:999px;
    background:transparent;color:var(--muted);
    display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
    font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;
    text-transform:uppercase;
  }
  .modal__peek-chev svg{
    width:10px;height:10px;
    transition:transform .42s cubic-bezier(.22,1,.36,1);
  }
  .modal--sheet-full .modal__peek-chev svg{transform:rotate(180deg)}
  .modal--sheet-full .modal__peek-chev .show-peek{display:inline}
  .modal--sheet-full .modal__peek-chev .show-full{display:none}
  .modal__peek-chev .show-peek{display:none}
  .modal__peek-chev .show-full{display:inline}

  .modal__inner{
    display:block;flex:1;overflow-y:auto;
    padding:0 22px 20px;
    -webkit-overflow-scrolling:touch;
  }
  .modal__inner::-webkit-scrollbar{width:0}

  /* Override desktop padding & sizing for inner items */
  .modal__num{margin-bottom:12px}
  .modal__title{font-size:30px;margin-bottom:6px}
  .modal__sub{margin-bottom:0}
  .modal__chips{margin-bottom:18px;margin-top:6px}
  .modal__body p{font-size:15px;line-height:1.7}
  .modal__meta{grid-template-columns:1fr 1fr;gap:16px}
  .modal__cta{margin-top:20px;margin-bottom:8px}

  /* Bottom project nav inside the sheet — visible only when sheet has risen.
     Round orange arrow + project name as plain orange text (no button bg). */
  .modal__project-nav{
    flex-shrink:0;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:16px 20px max(18px,env(safe-area-inset-bottom));
    border-top:1px solid var(--line);
    background:var(--paper);
    opacity:0;pointer-events:none;
    transform:translateY(8px);
    transition:opacity .3s var(--ease) .05s,transform .35s var(--ease) .05s;
  }
  .modal--sheet-up .modal__project-nav{
    opacity:1;pointer-events:auto;transform:translateY(0);
  }
  .modal__project-btn{
    display:flex;align-items:center;gap:10px;
    padding:4px;border:0;border-radius:0;
    background:transparent;
    font-family:var(--font-body);
    min-width:0;flex:1;
    -webkit-tap-highlight-color:transparent;
  }
  .modal__project-btn.next{justify-content:flex-end}
  .modal__project-btn .arrow{
    width:38px;height:38px;border-radius:50%;
    background:var(--accent);color:var(--paper);
    display:grid;place-items:center;flex-shrink:0;
    transition:background .25s,transform .3s var(--ease);
  }
  .modal__project-btn:active .arrow{background:var(--accent-2);transform:scale(.92)}
  .modal__project-btn .arrow svg{
    width:12px;height:12px;
  }
  .modal__project-btn .meta{
    display:flex;flex-direction:column;min-width:0;gap:2px;
    text-align:left;line-height:1.1;
  }
  .modal__project-btn.next .meta{text-align:right}
  .modal__project-btn .label{
    font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--muted);
    line-height:1;
  }
  .modal__project-btn .title{
    font-family:var(--font-display);font-style:italic;font-weight:300;
    font-size:16px;line-height:1.15;letter-spacing:-.01em;
    color:var(--accent);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }

  /* Hide the desktop project prev/next side buttons on mobile — bottom nav handles it */
  .modal__nav-btn{display:none}

  /* No backdrop needed on mobile — image fills behind */
  .modal-backdrop{display:none}
}

/* CONTACT */
.contact{background:var(--ink);color:var(--paper);padding:140px var(--pad) 56px;position:relative;overflow:hidden}
.contact .section-head{border-bottom-color:#ffffff1a}
.contact .kicker{color:#ffffffa0}
.contact .kicker strong{color:var(--paper)}
.contact .kicker::before{background:var(--accent)}
.contact__big{
  font-family:var(--font-display);font-weight:200;
  font-size:clamp(44px,9vw,140px);line-height:1;letter-spacing:-.035em;
  margin-bottom:80px;
}
.contact__big em{font-style:italic;font-weight:300;color:var(--accent)}
.contact__big a{
  display:inline-block;position:relative;border-bottom:2px solid var(--accent);
  transition:transform .4s var(--ease);
}
.contact__big a:hover{transform:translateY(-6px);font-style:italic}

.contact__grid{
  display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:40px;
  padding:56px 0;border-top:1px solid #ffffff1a;border-bottom:1px solid #ffffff1a;
}
.contact__grid h4{
  font-family:var(--font-mono);font-size:11.5px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:#ffffffa0;margin-bottom:14px;
}
.contact__grid p,.contact__grid a{font-family:var(--font-display);font-size:20px;line-height:1.3}
.contact__socials{display:flex;flex-direction:column;gap:6px}
.contact__socials a{
  display:inline-flex;align-items:center;gap:8px;font-size:17px;
  transition:color .3s,padding .3s;
}
.contact__socials a:hover{color:var(--accent);padding-left:8px}

.contact__footer{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:36px;font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;
  color:#ffffff95;text-transform:uppercase;flex-wrap:wrap;gap:20px;
}
.contact__footer .dot{color:var(--accent);margin:0 .4em}
@media(max-width:800px){.contact__grid{grid-template-columns:1fr 1fr;gap:32px}}

/* REVEAL */
.reveal{opacity:0;transform:translateY(36px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in-view{opacity:1;transform:translateY(0)}