/* =================================================================
   Artem Morev — Portfolio
   Light editorial · liquid-glass signature · bilingual
   ================================================================= */

:root{
  /* palette */
  --paper:    #efeee9;
  --paper-2:  #e6e4dc;
  --ink:      #121311;
  --ink-soft: #5c5c55;
  --ink-faint:#9a9a8f;
  --line:     rgba(18,19,17,.14);
  --line-2:   rgba(18,19,17,.08);
  --accent:   #2a2ef5;            /* electric ultramarine — interactive only */
  --white:    #fbfaf7;

  /* iridescent render-glass (signature) */
  --irid: linear-gradient(120deg,
            #b8c6ff 0%, #ffd1ec 26%, #d6ffe6 52%, #fff2c2 74%, #c8e1ff 100%);

  /* type */
  --display: "Space Grotesk", system-ui, sans-serif;
  --body:    "Inter", system-ui, sans-serif;
  --serif:   "Instrument Serif", Georgia, serif;
  --mono:    "Space Mono", ui-monospace, monospace;

  /* layout */
  --pad: clamp(20px, 5vw, 88px);
  --maxw: 1640px;
  --r: 18px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html:focus-within{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* subtle paper grain over everything */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:1;
  opacity:.045; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{ color:inherit; text-decoration:none; }
img,svg,video{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
::selection{ background:var(--accent); color:#fff; }

.mono{ font-family:var(--mono); font-size:.72rem; letter-spacing:.02em; text-transform:uppercase; color:var(--ink-soft); }
.serif{ font-family:var(--serif); font-style:italic; font-weight:400; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }

/* =================================================================
   HEADER  — progressive blur toward the lower edge (note 1)
   ================================================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  height:74px;
}
/* the blur layer: backdrop-filter masked to FADE OUT toward the bottom,
   so the blur is strongest at the screen edge */
.header-blur{
  position:absolute; inset:0;
  height:140%;                       /* extend below so the fade lives at the edge */
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  background:linear-gradient(to bottom,
              rgba(239,238,233,.86) 0%,
              rgba(239,238,233,.55) 45%,
              rgba(239,238,233,0)   100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 42%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 42%, transparent 100%);
  pointer-events:none;
}
.header-inner{
  position:relative; z-index:2;
  height:74px;
  display:flex; align-items:center; gap:24px;
  padding:0 var(--pad);
  max-width:var(--maxw); margin:0 auto;   /* align header with page content (fixes wide-screen drift) */
}
.brand{
  font-family:var(--display); font-weight:600; font-size:1.05rem;
  letter-spacing:-.01em; white-space:nowrap;
}
.brand sup{ font-size:.5em; vertical-align:super; opacity:.6; }

.nav{
  display:flex; gap:30px; margin-left:auto;
  font-family:var(--display); font-weight:500; font-size:.95rem;
}
.nav a{ position:relative; padding:4px 0; }
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0;
  background:var(--ink); transition:width .35s var(--ease);
}
.nav a:hover::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:22px; margin-left:24px; }

.lang-switch{ display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.78rem; }
.lang-btn{ color:var(--ink-faint); letter-spacing:.04em; transition:color .25s; }
.lang-btn.is-active{ color:var(--ink); }
.lang-btn:hover{ color:var(--ink); }
.lang-sep{ color:var(--ink-faint); }

.btn-talk{
  font-family:var(--display); font-weight:500; font-size:.92rem;
  padding:11px 23px; border-radius:999px; color:var(--ink);
  /* frosted glass, tuned for the light header (dark text stays readable) */
  background:rgba(255,255,255,.22);
  border:1px solid rgba(18,19,17,.16);
  backdrop-filter:blur(9px) saturate(1.5);
  -webkit-backdrop-filter:blur(9px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 8px 20px -14px rgba(18,19,17,.5);
  transition:transform .3s var(--ease), background .3s, color .3s, border-color .3s;
}
.btn-talk:hover{ transform:translateY(-2px); background:var(--ink); color:var(--paper); border-color:var(--ink); }

.menu-toggle{ display:none; width:40px; height:40px; }
.menu-toggle span{ display:block; width:22px; height:1.6px; background:var(--ink); margin:5px auto; transition:transform .3s var(--ease), opacity .3s; }
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ transform:translateY(-6.6px) rotate(-45deg); }

/* mobile nav */
.mobile-nav{
  position:fixed; inset:74px 0 auto 0; z-index:45;
  background:var(--paper); border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; padding:18px var(--pad) 30px; gap:6px;
  font-family:var(--display); font-size:1.5rem; font-weight:500;
  box-shadow:0 30px 40px -30px rgba(0,0,0,.3);
}
.mobile-nav[hidden]{ display:none; }
.mobile-nav a{ padding:12px 0; border-bottom:1px solid var(--line-2); }
.mobile-nav .m-talk{ color:var(--accent); border-bottom:0; }

/* =================================================================
   HERO
   ================================================================= */
.hero{
  padding:140px var(--pad) 18px;
  max-width:var(--maxw); margin:0 auto;
}
.hero-head{
  display:flex; flex-direction:column; gap:18px;
  margin-bottom:0;
}
.eyebrow{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft); margin:0;
}
.hero-title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.16rem, 6.8vw, 6.72rem);
  line-height:.94; letter-spacing:-.035em;
  margin:0; max-width:14ch;
}
.hero-title .line{ display:block; }
.hero-title em.serif{
  font-size:.92em; letter-spacing:-.01em; color:var(--ink);
  padding-right:.06em;
}

/* ---- showreel ---- */
.reel{ margin:0; }
.reel-media{
  position:relative; width:100%;
  aspect-ratio:16/9; border-radius:var(--r); overflow:hidden;
  background:#0c0d0c;
  box-shadow:0 50px 90px -50px rgba(18,19,17,.55);
}
.reel-media video{ width:100%; height:100%; object-fit:cover; }

/* showreel poster — same image as the Showreel card on the Work page */
.reel-poster{
  position:absolute; inset:0;
  background:#0a0e1a url("assets/showreel/preview.webp") center / cover no-repeat;
}
@keyframes reelShift{ to{ transform:scale(1.08) translate(-2%, -1%); } }
.reel-grain{ display:none; }

.reel-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:4;
  display:inline-flex; align-items:center; gap:12px;
  padding:13px 22px 13px 16px; border-radius:999px;
  color:#fff; font-family:var(--display); font-weight:500; font-size:.95rem;
  white-space:nowrap;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.30);
  backdrop-filter:blur(10px) saturate(1.4);
  -webkit-backdrop-filter:blur(10px) saturate(1.4);
  transition:transform .35s var(--ease), background .35s;
}
.reel-play svg{ width:22px; height:22px; fill:#fff; }
.reel-play:hover{ transform:translate(-50%,-50%) scale(1.05); background:rgba(255,255,255,.22); }

/* liquid-glass skill chips (note 2 — Apple-like translucent panels) */
.chips{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.chip{
  position:absolute; padding:9px 15px; border-radius:13px;
  font-family:var(--display); font-weight:500; font-size:.84rem; color:#fff;
  white-space:nowrap;
  animation:floaty 7s ease-in-out infinite; animation-delay:var(--d);
}
.glass{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.45);
  backdrop-filter:blur(7px) saturate(1.6);
  -webkit-backdrop-filter:blur(7px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 10px 24px -12px rgba(0,0,0,.5);
  position:relative; overflow:hidden;
}
.glass::after{ /* iridescent edge sheen */
  content:""; position:absolute; inset:0; border-radius:inherit;
  padding:1px; background:var(--irid);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.55; mix-blend-mode:screen;
}
.chips .chip{ position:absolute; }   /* beat .glass{position:relative} */
.chip:nth-child(1){ left:6%;  top:18%; }
.chip:nth-child(2){ right:8%; top:30%; }
.chip:nth-child(3){ left:12%; bottom:20%; }
.chip:nth-child(4){ right:6%; bottom:28%; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

.reel-cap{
  display:flex; justify-content:space-between; gap:16px;
  margin-top:16px; flex-wrap:wrap;
}
.reel-scroll{ color:var(--ink); }

/* =================================================================
   MARQUEE
   ================================================================= */
.marquee{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin-top:56px; padding:18px 0; overflow:hidden; white-space:nowrap;
}
.marquee-track{
  display:inline-flex; gap:42px; align-items:center;
  font-family:var(--display); font-weight:500; font-size:clamp(1.4rem,3.2vw,2.4rem);
  letter-spacing:-.02em;
  animation:scroll-x 32s linear infinite;
}
.marquee-track .dot{ color:var(--accent); font-size:.6em; }
@keyframes scroll-x{ to{ transform:translateX(-50%); } }

/* =================================================================
   SECTION SCAFFOLD
   ================================================================= */
.section-head{
  max-width:var(--maxw); margin:0 auto;
  padding:0 var(--pad);
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:30px; flex-wrap:wrap;
}
.section-title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.8rem,4.5vw,3.4rem); letter-spacing:-.03em;
  margin:0; display:flex; align-items:baseline; gap:18px;
}
.section-title .idx{ font-size:.85rem; color:var(--accent); }
.section-note{
  font-size:clamp(1.05rem,1.7vw,1.4rem); color:var(--ink-soft);
  max-width:42ch; margin:0; line-height:1.35;
}

/* =================================================================
   WORK
   ================================================================= */
.work{ padding:23px 0 30px; }
.work .section-head{ margin-bottom:54px; }

.projects{ list-style:none; margin:0; padding:0; max-width:var(--maxw); margin-inline:auto; }
.project{
  display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(24px,4vw,72px);
  align-items:center;
  padding:clamp(34px,5vw,64px) var(--pad);
  border-top:1px solid var(--line);
}
.project:last-child{ border-bottom:1px solid var(--line); }
/* home: no divider above the first project (Selected Work head removed) */
.work .projects .project:first-child{ border-top:0; }
.project:nth-child(even){ direction:rtl; }       /* alternate sides */
.project:nth-child(even) > *{ direction:ltr; }

.project-media{
  position:relative; display:block; border-radius:var(--r); overflow:hidden;
  aspect-ratio:16/10;
}
/* production year hidden on the project cards (home + Work) */
.project-year{ display:none; }
.thumb{ position:absolute; inset:0; transition:transform .9s var(--ease); }
.project-media:hover .thumb{ transform:scale(1.05); }

/* Cartier — Juste un Clou preview image (used on home card, work card, and prev/next thumbs) */
.thumb-1{ background:#0a0e1a url("assets/cartier-juste-un-clou.webp") center / cover no-repeat; }
.thumb-1::after{ content:none; }   /* real photo — skip the grain overlay */
/* Showreel 2025 preview image */
.thumb-2{ background:#0a0e1a url("assets/showreel/preview.webp") center / cover no-repeat; }
.thumb-2::after{ content:none; }
/* Trust Wallet Visualization preview image */
.thumb-3{ background:#0a0e1a url("assets/trust/trust_preview.webp") center / cover no-repeat; }
.thumb-3::after{ content:none; }
/* grain overlay on thumbs */
.thumb::after{
  content:""; position:absolute; inset:0; opacity:.18; mix-blend-mode:overlay;
  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");
}

.project-title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.5rem,3vw,2.4rem); letter-spacing:-.025em;
  margin:0 0 12px; line-height:1.02;
}
.project-tags{ margin:0 0 18px; color:var(--accent); }
.project-desc{ margin:0; font-size:clamp(1rem,1.4vw,1.15rem); color:var(--ink-soft); max-width:46ch; }

/* =================================================================
   ABOUT
   ================================================================= */
.about{ padding:110px 0 40px; }
.about .section-head{ margin-bottom:48px; }
.about-grid{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(30px,5vw,80px);
  align-items:start;
}
.about-portrait{ position:sticky; top:100px; }
.portrait{
  aspect-ratio:3/4; border-radius:var(--r); overflow:hidden;
  background:
    radial-gradient(90% 70% at 30% 20%, #d9e2ff, transparent 60%),
    radial-gradient(80% 80% at 90% 90%, #ffd9ec, transparent 55%),
    linear-gradient(160deg,#e9e7df,#cfcdc3);
  position:relative;
}
.portrait img{ width:100%; height:100%; object-fit:cover; display:block; }
.portrait::after{
  content:""; position:absolute; inset:0; opacity:.16; mix-blend-mode:overlay;
  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'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.portrait-cap{ margin:14px 0 0; }

.about-lead{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.4rem,2.8vw,2.2rem); letter-spacing:-.02em; line-height:1.18;
  margin:0 0 26px;
}
.about-text{ font-size:clamp(1.02rem,1.4vw,1.18rem); color:var(--ink-soft); max-width:58ch; margin:0 0 46px; }

.capabilities{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; border-top:1px solid var(--line); padding-top:34px; }
.cap-idx{
  display:inline-flex; width:30px; height:30px; border-radius:50%;
  align-items:center; justify-content:center;
  border:1px solid var(--line); color:var(--accent); margin-bottom:14px;
}
.cap h4{ font-family:var(--display); font-weight:600; font-size:1.15rem; margin:0 0 8px; letter-spacing:-.01em; }
.cap p{ margin:0; font-size:.96rem; color:var(--ink-soft); }

/* =================================================================
   CONTACT
   ================================================================= */
.contact{ padding:120px 0 90px; border-top:1px solid var(--line); }
.contact-inner{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.contact-title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.6rem,9vw,8rem); line-height:.95; letter-spacing:-.035em;
  margin:14px 0 0;
}
.contact-title em{ display:inline; }
.contact-sub{ font-size:clamp(1.1rem,1.7vw,1.4rem); color:var(--ink-soft); max-width:44ch; margin:26px 0 40px; }

.contact-email{
  display:inline-block; position:relative;
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.5rem,4.5vw,3rem); letter-spacing:-.02em;
  padding-bottom:6px;
}
.contact-email::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--ink); transform-origin:right; transition:transform .5s var(--ease);
}
.contact-email:hover{ color:var(--accent); }
.contact-email:hover::after{ transform:scaleX(0); }

.socials{
  list-style:none; margin:60px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  border-top:1px solid var(--line);
}
.socials li{ border-bottom:1px solid var(--line); }
.socials a{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--display); font-weight:500; font-size:1.15rem;
  padding:22px 18px 22px 4px; transition:padding .35s var(--ease), color .25s;
}
.socials a:hover{ padding-left:18px; color:var(--accent); }
.socials .arrow{ color:var(--ink-faint); transition:transform .35s var(--ease); }
.socials a:hover .arrow{ transform:translate(4px,-4px); color:var(--accent); }

/* =================================================================
   FOOTER
   ================================================================= */
.site-footer{
  border-top:1px solid var(--line);
  padding:26px var(--pad);
  max-width:var(--maxw); margin:0 auto;
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
}
.back-top{ color:var(--ink); }
.back-top:hover{ color:var(--accent); }

/* =================================================================
   REVEAL ON SCROLL
   ================================================================= */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.hero-title .line.reveal{ transition-delay:.05s; }
.hero-title .line:nth-child(2).reveal{ transition-delay:.13s; }
.hero-title .line:nth-child(3).reveal{ transition-delay:.21s; }

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width:1080px){
  .about-grid{ grid-template-columns:1fr; }
  .about-portrait{ position:static; max-width:360px; }
}
@media (max-width:820px){
  .nav, .btn-talk{ display:none; }
  .menu-toggle{ display:block; }
  .header-actions{ margin-left:auto; gap:10px; }
  .hero{ padding-top:118px; }
  .project{ grid-template-columns:1fr; gap:22px; }
  .project:nth-child(even){ direction:ltr; }
  .project-meta{ order:2; }
  .capabilities{ grid-template-columns:1fr; gap:22px; }
  .socials{ grid-template-columns:1fr 1fr; }
  .chip{ font-size:.74rem; padding:7px 11px; }
}
@media (max-width:520px){
  /* phone-only: ease off the very large hero title (desktop stays untouched) */
  .hero-title{ font-size:clamp(2.2rem, 9vw, 2.7rem); }
  .socials{ grid-template-columns:1fr; }
  .reel-cap{ gap:8px; }
  /* keep only two chips and pin them to the top corners, clear of the play button */
  .chips .chip:nth-child(3), .chips .chip:nth-child(4){ display:none; }
  .chips .chip:nth-child(1){ top:6%; left:5%; }
  .chips .chip:nth-child(2){ top:6%; right:5%; }
  .reel-media{ aspect-ratio:4/5; }   /* taller frame gives the reel room on phones */

  /* phones: pull the blocks closer together, but keep hairline divisions
     so it's still clear where a new section begins */
  .hero{ padding-bottom:11px; }
  .marquee{ margin-top:30px; }
  .work{ padding:18px 0 4px; }
  .about{ padding:52px 0 24px; }
  .contact{ padding:52px 0 56px; border-top:1px solid var(--line); }
  .work .section-head, .about .section-head{ margin-bottom:26px; }
  .project{ padding:26px var(--pad); }
  .about-text{ margin-bottom:30px; }
  .capabilities{ padding-top:26px; }
  .contact-sub{ margin:16px 0 28px; }
  .socials{ margin-top:34px; }
}

/* =================================================================
   REDUCED MOTION
   ================================================================= */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .reel-poster{ animation:none; }
}

/* =================================================================
   SUBPAGES (work.html / contact.html)
   ================================================================= */

/* active nav item — persistent underline */
.nav a[aria-current="page"]::after{ width:100%; }
.mobile-nav a[aria-current="page"]{ color:var(--accent); }

/* extra project thumbnails */
/* Bracelet — John Rider preview */
.thumb-4{ background:#0a0e1a url("assets/john/Bracelet0.webp") center / cover no-repeat; }
.thumb-4::after{ content:none; }
/* Ping preview */
.thumb-5{ background:#0a0e1a url("assets/ping/Ping_50.webp") center / cover no-repeat; }
.thumb-5::after{ content:none; }
/* Kari preview */
.thumb-6{ background:#0a0e1a url("assets/kari/kari_50.webp") center / cover no-repeat; }
.thumb-6::after{ content:none; }
/* Ivex Financial — You can touch it preview */
.thumb-7{ background:#0a0e1a url("assets/ivex/Ivex_Preview.webp") center / cover no-repeat; }
.thumb-7::after{ content:none; }

/* page header (Work) */
.page-head{ max-width:var(--maxw); margin:0 auto; padding:150px var(--pad) 36px; }
.page-title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.8rem, 9vw, 7rem); line-height:.9; letter-spacing:-.04em;
  margin:14px 0 0;
}
.page-intro{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.15rem,1.9vw,1.6rem); color:var(--ink-soft);
  max-width:46ch; margin:22px 0 0; line-height:1.32;
}
.work-list{ padding-bottom:20px; }

/* work-page contact CTA */
.work-cta{
  max-width:var(--maxw); margin:0 auto;
  padding:84px var(--pad) 104px;
}
.work-cta-title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.4rem,7vw,6rem); line-height:.95; letter-spacing:-.03em;
  margin:14px 0 30px;
}

/* =================== CONTACT PAGE =================== */
.contact-page{
  position:relative; min-height:72vh;
  max-width:var(--maxw); margin:0 auto;
  padding:150px var(--pad) 90px;
}
.cp-inner{
  display:grid; grid-template-columns:1.5fr 1fr;
  gap:clamp(40px,7vw,110px); align-items:start;
}
.cp-heading{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.9rem,4.4vw,3.7rem); line-height:1.07; letter-spacing:-.02em;
  margin:20px 0 0;
}
.cp-ul{ text-decoration:underline; text-underline-offset:7px; text-decoration-thickness:1.5px; }
.cp-dash{ color:var(--ink-faint); margin:0 .12em; }
.cp-email{ font-size:.94em; color:var(--ink); }
.cp-email:hover{ color:var(--accent); }

.cp-blurb{
  font-size:clamp(1.15rem,1.7vw,1.55rem); line-height:1.4; max-width:40ch;
  margin:clamp(34px,4vw,54px) 0 0; color:var(--ink);
}
.cp-blurb .serif{ color:var(--ink); }
.cp-inline-link{ text-decoration:underline; text-underline-offset:3px; }
.cp-inline-link:hover{ color:var(--accent); }

.cp-based{ margin-top:clamp(64px,11vw,150px); }
.cp-subhead{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.6rem,3.4vw,2.8rem); letter-spacing:-.02em; line-height:1.05; margin:0;
}
.cp-based-text{
  color:var(--ink-soft); max-width:40ch; margin:14px 0 0;
  font-size:clamp(1rem,1.3vw,1.15rem);
}

.cp-side{ padding-top:14px; }
.cp-follow{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.9rem,3.2vw,2.8rem); line-height:1; margin:0 0 22px;
}
.cp-socials{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.cp-socials li{ border-bottom:1px solid var(--line); }
.cp-socials a{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 4px; font-family:var(--display); font-weight:500; font-size:1.15rem;
  transition:padding .35s var(--ease), color .25s;
}
.cp-socials a:hover{ padding-left:14px; color:var(--accent); }
.cp-arrow{ color:var(--ink-faint); transition:transform .35s var(--ease), color .25s; }
.cp-socials a:hover .cp-arrow{ transform:translate(4px,-4px); color:var(--accent); }

@media (max-width:900px){
  .cp-inner{ grid-template-columns:1fr; gap:50px; }
}
@media (max-width:820px){
  .page-head{ padding-top:118px; }
  .contact-page{ padding-top:118px; }
}
@media (max-width:520px){
  .page-head{ padding:104px var(--pad) 26px; }
  .contact-page{ padding:104px var(--pad) 64px; }
  .cp-based{ margin-top:56px; }
  .work-cta{ padding:48px var(--pad) 64px; }
}

/* =================================================================
   CLICKABLE PROJECT CARD — underline the title on hover (→ case page)
   (lines under the text, like the "Get in touch" link — not a full box)
   ================================================================= */
.projects .project{ cursor:pointer; }
.project-title{
  text-decoration:underline;
  text-decoration-color:transparent;
  text-underline-offset:6px;
  text-decoration-thickness:1.5px;
  transition:text-decoration-color .35s var(--ease);
}
.project:hover .project-title,
.project-media:focus-visible ~ .project-meta .project-title,
.project-meta:focus-visible .project-title{ text-decoration-color:var(--ink); }

/* =================================================================
   CASE / PROJECT PAGE (work-*.html)
   ================================================================= */
.case{ max-width:var(--maxw); margin:0 auto; padding:120px var(--pad) 0; }
.case-back{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.76rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-soft); margin-bottom:38px;
  transition:color .25s, gap .3s var(--ease);
}
.case-back:hover{ color:var(--accent); gap:13px; }
.case-head{ margin-bottom:40px; }
.case-title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.5rem,2.4vw,2.05rem); line-height:1.12; letter-spacing:-.015em;
  margin:10px 0 0; max-width:36ch;
}

/* video */
.case-video{ margin:0 0 clamp(44px,6vw,84px); }
.case-video-media{
  position:relative; aspect-ratio:16/9; border-radius:var(--r); overflow:hidden;
  background:#0c0d0c; box-shadow:0 50px 90px -50px rgba(18,19,17,.5);
}
.case-video-media video{ width:100%; height:100%; object-fit:cover; }
/* darker play pill so it reads on any poster (home showreel keeps its light glass) */
.case-video-media .reel-play{ background:rgba(10,12,16,.42); border-color:rgba(255,255,255,.42); }
.case-video-media iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* extra media sections inside a case page (look-dev / models / etc.) */
.case-section{ padding:clamp(44px,5vw,72px) 0 0; }
.case-section-title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.25rem,2.2vw,1.75rem); letter-spacing:-.02em; margin:0 0 22px;
  text-align:center;
}
.case-section-note{ color:var(--ink-soft); font-size:clamp(1rem,1.3vw,1.12rem); max-width:60ch; margin:0 0 24px; }
.case-section-note.center{ text-align:center; margin-left:auto; margin-right:auto; }
.case-gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,2vw,24px); }
.case-gallery--3{ grid-template-columns:repeat(3,1fr); }
.case-shot{ margin:0; border-radius:var(--r); overflow:hidden; aspect-ratio:16/10; background:var(--paper-2); }
.case-shot img, .case-shot video{ width:100%; height:100%; object-fit:cover; display:block; }
.case-shot.is-empty{ display:flex; align-items:center; justify-content:center; border:1px dashed rgba(18,19,17,.22); background:transparent; }
.case-shot.is-empty::after{ content:"Image / GIF"; font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); }
.case-stack{ display:flex; flex-direction:column; gap:clamp(14px,2vw,24px); }
.case-shot--full{ aspect-ratio:auto; background:transparent; }
.case-shot--full img, .case-shot--full video{ height:auto; object-fit:contain; }
.case-shot--square{ aspect-ratio:1/1; max-width:520px; margin-inline:auto; }
@media (max-width:820px){ .case-gallery--3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .case-gallery, .case-gallery--3{ grid-template-columns:1fr; } }

/* description (single column) */
.case-body{
  padding-bottom:clamp(54px,7vw,92px); border-bottom:1px solid var(--line);
}
.case-lead{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.4rem,2.6vw,2.1rem); line-height:1.2; letter-spacing:-.015em;
  margin:0 auto 26px; max-width:46rem;
}
.case-text{ font-size:clamp(1.02rem,1.4vw,1.18rem); color:var(--ink-soft); max-width:46rem; margin:0 auto 18px; }

/* credits */
/* credits — left label, right grouped list (no rules, no dashes) */
.case-credits{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,6vw,90px); align-items:start;
  padding:clamp(54px,7vw,90px) 0 clamp(56px,7vw,90px);
}
.case-credits h2{
  font-family:var(--display); font-weight:600; font-size:clamp(1.6rem,3vw,2.2rem);
  letter-spacing:-.02em; margin:0;
}
.credits-body{ font-family:var(--body); font-size:.95rem; line-height:1.7; color:var(--ink); max-width:62ch; }
.credits-group{ margin:0 0 18px; }
.credits-group:last-child{ margin-bottom:0; }
.cr-line{ display:block; }
.cr-role{ font-family:var(--display); font-weight:500; }

/* previous & next projects */
.case-nav{ border-top:1px solid var(--line); padding:clamp(40px,5vw,60px) 0 clamp(80px,9vw,110px); }
.case-nav-label{ font-style:italic; font-weight:400; font-size:clamp(1.1rem,1.8vw,1.5rem); color:var(--ink); margin:0 0 26px; }
.case-nav-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.5vw,30px); }
.case-nav-item{ display:block; }
.case-nav-media{ position:relative; aspect-ratio:16/9; border-radius:var(--r); overflow:hidden; }
.case-nav-item .thumb{ transition:transform .9s var(--ease); }
.case-nav-item:hover .thumb{ transform:scale(1.05); }
.case-nav-meta{ display:flex; flex-direction:column; gap:5px; margin-top:14px; }
.case-nav-dir{ color:var(--ink-soft); }
.case-nav-title{ font-family:var(--display); font-weight:500; font-size:clamp(1.02rem,1.5vw,1.35rem); letter-spacing:-.01em; transition:color .25s; }
.case-nav-item:hover .case-nav-title{ color:var(--accent); }

@media (max-width:820px){
  .case{ padding-top:104px; }
  .case-credits{ grid-template-columns:1fr; gap:18px; }
}
@media (max-width:640px){
  .case-nav-grid{ grid-template-columns:1fr; gap:26px; }
}