/* ============================================================
   Kenan Demir — Portfolio
   Palette: warm ink / bone / flare
   Type:    Familjen Grotesk (display+ui) · Newsreader (accent italic)
            IBM Plex Mono (labels)
   ============================================================ */

:root{
  --ink:      #0C0C13;
  --ink-2:    #12121C;
  --ink-3:    #191926;
  --bone:     #E9E8F3;
  --muted:    #8B89A6;
  --flare:    #6A5CFF;
  --flare-rgb: 106,92,255;
  --flare-dk: #3B2FCC;
  --line:     rgba(233,232,243,.13);
  --line-2:   rgba(233,232,243,.07);

  --nav-h: 92px;
  --pad: clamp(20px, 4.5vw, 68px);
  --maxw: 1560px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);

  --fs-display: clamp(3.4rem, 12.5vw, 13rem);
  --fs-h2:      clamp(2.1rem, 5.2vw, 4.6rem);
  --fs-h3:      clamp(1.5rem, 2.6vw, 2.4rem);
  --fs-body:    clamp(1rem, 1.12vw, 1.2rem);
  --fs-label:   clamp(.68rem, .74vw, .78rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

html,body{
  margin:0; padding:0;
  background:var(--ink);
  color:var(--bone);
}
body{
  font-family:"Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size:var(--fs-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

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

h1,h2,h3,h4,p,figure,ul{ margin:0; }
ul{ list-style:none; padding:0; }

/* ---------- shared bits ---------- */
.shell{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

.label{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:var(--fs-label);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.serif{ font-family:"Newsreader", Georgia, serif; font-style:italic; font-weight:400; }
.flare{ color:var(--flare); }

.dot{
  display:inline-block; width:.42em; height:.42em; border-radius:50%;
  background:var(--flare); vertical-align:middle; margin-right:.6em;
  transform:translateY(-.08em);
}

/* grain + vignette atmosphere */
.grain{
  position:fixed; inset:-120%; z-index:9000; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)} 100%{transform:translate(0,0)}
}

/* the thin hairline curve that threads the page (like a stitched seam) */
.seam{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; overflow:visible; z-index:0;
}
.seam path{
  fill:none; stroke:var(--line); stroke-width:1;
  stroke-dasharray:2400; stroke-dashoffset:2400;
  animation:draw 2.6s var(--ease) .5s forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0 } }

/* ---------- custom cursor ---------- */
.cursor{
  position:fixed; top:0; left:0; z-index:9500; pointer-events:none;
  width:9px; height:9px; border-radius:50%; background:var(--flare);
  transform:translate3d(-100px,-100px,0);
  transition:width .3s var(--ease), height .3s var(--ease), background .3s;
  mix-blend-mode:normal;
}
.cursor--ring{
  width:34px; height:34px; background:transparent;
  border:1px solid rgba(233,232,243,.35);
  transition:transform .12s linear, width .35s var(--ease), height .35s var(--ease), border-color .3s, opacity .3s;
}
body.cursor-hot .cursor{ width:0; height:0; }
body.cursor-hot .cursor--ring{ width:76px; height:76px; border-color:var(--flare); background:rgba(var(--flare-rgb),.08); }
@media (hover:none),(pointer:coarse){ .cursor{ display:none } }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:800;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .45s var(--ease), backdrop-filter .45s;
}
.nav.is-stuck{
  background:rgba(18,17,16,.72);
  backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid var(--line-2);
}
.nav__in{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

.brand{ display:flex; align-items:center; gap:12px; }
/* the mark: a bar and a chevron that read as a K  ( |< ) */
.brand__mark{ width:29px; height:34px; flex:none; overflow:visible; color:var(--bone); }
.brand__mark .stem,
.brand__mark .arm{ transition:transform .5s var(--ease), opacity .4s; transform-origin:50% 50%; }
.brand:hover .brand__mark .arm{ transform:translateX(2.5px); }
.brand:hover .brand__mark .stem{ transform:translateX(-1px); }
.brand__name{
  font-weight:600; letter-spacing:.09em; line-height:1;
  font-size:.9rem; text-transform:uppercase;
}
.brand__name small{
  display:block; font-family:"IBM Plex Mono",monospace;
  font-size:.58rem; letter-spacing:.2em; color:var(--muted);
  text-transform:uppercase; font-weight:400; margin-top:2px;
}

.nav__menu{ display:flex; gap:clamp(18px,2.4vw,42px); align-items:center; }
.nav__link{
  position:relative; font-size:.95rem; padding:6px 0;
  color:rgba(233,232,243,.72); transition:color .3s;
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--flare); transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .45s var(--ease);
}
.nav__link:hover{ color:var(--bone); }
.nav__link:hover::after,.nav__link.is-active::after{ transform:scaleX(1); transform-origin:0 50%; }
.nav__link.is-active{ color:var(--bone); }

/* language toggle: the label is the language you'll GET, not the one you're in */
.nav__link.lang{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.72rem; letter-spacing:.14em; cursor:pointer;
}
.drawer__link.lang{
  width:100%; text-align:left; cursor:pointer;
  font-family:inherit; text-transform:none;
}

.burger{ display:none; width:44px; height:44px; place-items:center; }
.burger i{ display:block; width:22px; height:1.5px; background:var(--bone); transition:transform .4s var(--ease), opacity .3s; }
.burger i+i{ margin-top:6px; }
body.menu-open .burger i:first-child{ transform:translateY(3.75px) rotate(45deg); }
body.menu-open .burger i:last-child{ transform:translateY(-3.75px) rotate(-45deg); }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:790; background:var(--ink-2);
  padding:calc(var(--nav-h) + 30px) var(--pad) 40px;
  display:flex; flex-direction:column; justify-content:space-between;
  clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--ease-io);
  visibility:hidden;
}
body.menu-open .drawer{ clip-path:inset(0 0 0 0); visibility:visible; }
.drawer a.drawer__link{
  display:block; font-size:clamp(2.2rem,9vw,3.4rem); font-weight:500;
  letter-spacing:-.035em; padding:.18em 0; border-bottom:1px solid var(--line-2);
}

@media (max-width:860px){
  .nav__menu{ display:none; }
  .burger{ display:grid; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  /* the headline sits on the true vertical centre of the viewport:
     no vertical padding to bias it, and the foot row is lifted out of flow */
  display:grid; align-content:center;
  overflow:hidden;
}
.hero__glow{
  position:absolute; z-index:0; pointer-events:none;
  width:min(78vw,900px); aspect-ratio:1; right:-14vw; top:-18vh;
  background:radial-gradient(circle at 50% 50%, rgba(var(--flare-rgb),.32), rgba(62,168,255,.10) 42%, transparent 68%);
  filter:blur(28px);
  animation:float 15s ease-in-out infinite;
}
@keyframes float{
  0%,100%{ transform:translate3d(0,0,0) scale(1) }
  50%{ transform:translate3d(-4%,5%,0) scale(1.1) }
}

.hero__title{
  position:relative; z-index:2;
  font-size:var(--fs-display);
  font-weight:500; line-height:.86; letter-spacing:-.045em;
  text-transform:none;
  /* line-height .86 and the descender padding pull the type block above the
     layout box; this em-based nudge puts the real text block on the centre,
     and being em-based it stays correct at every clamp() size */
  transform:translateY(.067em);
}
/* the clip box is padded so italic descenders (p, y, the i-dot) aren't cut;
   the negative margin cancels that padding so line spacing is unchanged */
.hero__title .ln{
  display:block; overflow:hidden;
  padding-bottom:.22em; margin-bottom:-.22em;
}
.hero__title .ln > span{
  display:block; transform:translateY(135%);   /* clears the padded box before it rises */
  animation:riseIn 1.15s var(--ease-io) forwards;
}
.hero__title .ln:nth-child(2) > span{ animation-delay:.12s; }
.hero__title .ln:nth-child(2){ padding-left:clamp(0px,7vw,180px); }
@keyframes riseIn{ to{ transform:translateY(0) } }

.hero__title em{
  font-family:"Newsreader",Georgia,serif; font-style:italic; font-weight:300;
  letter-spacing:-.02em;
  /* blue -> violet gradient across the word */
  color:var(--flare);                       /* fallback */
  background:linear-gradient(100deg, #3EA8FF 0%, #6A5CFF 42%, #A45CFF 78%, #C77BFF 100%);
  background-size:180% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:hue 12s ease-in-out infinite alternate;
  padding-right:.04em;                      /* italic overhang breathing room */
}
@keyframes hue{ from{ background-position:0% 50% } to{ background-position:100% 50% } }
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hero__title em{ color:var(--flare); -webkit-text-fill-color:var(--flare); background:none; }
}

.hero__foot{
  position:absolute; left:0; right:0; bottom:clamp(26px,5vh,58px); z-index:2;
  display:grid; grid-template-columns:1fr auto; gap:clamp(24px,5vw,80px);
  align-items:end;
}
.hero__tags{ display:flex; flex-wrap:wrap; gap:clamp(14px,2.4vw,38px); }
.hero__tags li{ font-size:.94rem; opacity:0; animation:fadeUp .8s var(--ease) forwards; }
.hero__tags li:nth-child(1){ animation-delay:.7s }
.hero__tags li:nth-child(2){ animation-delay:.8s }
.hero__tags li:nth-child(3){ animation-delay:.9s }
@keyframes fadeUp{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }

.hero__blurb{
  max-width:38ch; font-size:clamp(1rem,1.25vw,1.28rem); line-height:1.42;
  opacity:0; animation:fadeUp .9s var(--ease) 1s forwards;
}
.hero__blurb small{ display:block; margin-top:.5em; color:var(--flare); font-size:.9em; }

/* scroll cue: the same chevron as the logo mark, turned to point down */
.scrollcue{
  position:relative; z-index:2; justify-self:end;
  display:block; line-height:0;
  opacity:0; animation:fadeUp .9s var(--ease) 1s forwards;
}
.scrollcue__arrow{
  width:30px; height:21px;
  animation:bob 2.6s var(--ease) infinite;
  transition:transform .5s var(--ease), opacity .4s;
  opacity:.8;
}
@keyframes bob{
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(8px) }
}
.scrollcue:hover .scrollcue__arrow{ opacity:1; }

@media (max-width:760px){
  .hero__foot{ grid-template-columns:1fr; gap:26px; }
  .scrollcue{ display:none; }
}

/* ============================================================
   SECTION FRAME
   ============================================================ */
.sec{ position:relative; padding-block:clamp(70px,11vw,170px); }
.sec__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:20px; padding-bottom:clamp(26px,3.6vw,54px);
  border-bottom:1px solid var(--line);
}
.sec__head h2{
  font-size:var(--fs-h2); font-weight:500; letter-spacing:-.04em; line-height:.95;
}
.sec__head .label{ white-space:nowrap; }

/* quiet link out, sitting opposite a section heading */
.sec__link{
  display:inline-flex; align-items:center; gap:.7em; white-space:nowrap;
  color:var(--bone); border-bottom:1px solid var(--line); padding-bottom:.35em;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.sec__link svg{ width:11px; height:11px; flex:none; transition:transform .5s var(--ease); }
.sec__link:hover{ color:var(--flare); border-color:var(--flare); }
.sec__link:hover svg{ transform:translate(2px,-2px); }

@media (max-width:640px){ .sec__head{ flex-wrap:wrap; } }

/* reveal-on-scroll */
[data-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal].in{ opacity:1; transform:none; }

/* ============================================================
   WORK LIST
   ============================================================ */
.work__list{ position:relative; z-index:2; }
.work__row{
  position:relative; display:block;
  border-bottom:1px solid var(--line);
  padding:clamp(20px,2.6vw,34px) 0;
  transition:padding-left .55s var(--ease);
}
.work__row::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:0;
  background:linear-gradient(90deg, rgba(var(--flare-rgb),.10), transparent 60%);
  transition:width .6s var(--ease);
}
.work__row:hover{ padding-left:clamp(10px,1.8vw,28px); }
.work__row:hover::before{ width:100%; }

.work__grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:5.5ch minmax(0,1.15fr) minmax(0,1fr) auto;
  gap:clamp(14px,2.4vw,40px); align-items:center;
}
.work__num{ font-family:"IBM Plex Mono",monospace; font-size:.76rem; color:var(--muted); letter-spacing:.1em; }
.work__name{
  font-size:clamp(1.6rem,3.5vw,3.1rem); font-weight:500;
  letter-spacing:-.04em; line-height:1; display:flex; align-items:baseline; gap:.5em;
  flex-wrap:wrap;
}
.work__name em{
  font-family:"Newsreader",Georgia,serif; font-style:italic; font-weight:300;
  font-size:.42em; letter-spacing:-.01em; color:var(--muted);
}
.work__meta{ display:flex; flex-wrap:wrap; gap:8px; }
.work__meta span{
  font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); border-radius:100px; padding:5px 11px;
  transition:border-color .4s, color .4s;
}
.work__row:hover .work__meta span{ border-color:rgba(var(--flare-rgb),.4); color:var(--bone); }
.work__go{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; flex:none;
  transition:background .4s var(--ease), border-color .4s, transform .5s var(--ease);
}
.work__go svg{ width:14px; height:14px; transition:transform .5s var(--ease); }
.work__row:hover .work__go{ background:var(--flare); border-color:var(--flare); transform:rotate(45deg); }

/* floating hover preview */
.preview{
  position:fixed; top:0; left:0; z-index:600; pointer-events:none;
  width:clamp(260px,26vw,420px); aspect-ratio:4/3; border-radius:6px;
  overflow:hidden; opacity:0; transform:translate3d(-50%,-50%,0) scale(.86);
  transition:opacity .45s var(--ease), transform .55s var(--ease);
  box-shadow:0 40px 90px rgba(0,0,0,.55);
}
.preview.is-on{ opacity:1; transform:translate3d(-50%,-50%,0) scale(1); }
.preview__inner{ position:absolute; inset:0; opacity:0; transition:opacity .35s; }
.preview__inner.is-on{ opacity:1; }
.preview__inner::after{
  content:attr(data-cap); position:absolute; left:16px; bottom:14px;
  font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.85);
}
@media (max-width:1024px){ .preview{ display:none } }

/* generated abstract covers */
.cover{ position:absolute; inset:0; }
.cover--a{ background:
  radial-gradient(120% 90% at 20% 15%, #8B7CFF 0%, #3B2FCC 45%, #0B0920 100%); }
.cover--b{ background:
  radial-gradient(110% 100% at 80% 20%, #3EA8FF 0%, #12406E 55%, #060F1C 100%); }
.cover--c{ background:
  radial-gradient(100% 110% at 30% 80%, #A45CFF 0%, #451C86 50%, #10061C 100%); }
.cover--d{ background:
  radial-gradient(120% 100% at 65% 30%, #C9CCF5 0%, #6367A0 50%, #1A1B2A 100%); }
.cover--e{ background:
  radial-gradient(110% 100% at 25% 30%, #E7E7F5 0%, #9695AE 45%, #22222F 100%); }
.cover--f{ background:
  radial-gradient(120% 100% at 75% 70%, #6A5CFF 0%, #241C7A 50%, #07061A 100%); }
/* real project imagery — same layer contract as the gradients */
.cover--img{
  background-size:cover; background-position:center top;
  background-repeat:no-repeat; background-color:var(--ink-2);
}
.cover::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at 50% 50%, #000 20%, transparent 78%);
}
.cover::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.14), transparent 70%);
  mix-blend-mode:overlay;
}
/* …but never over a real screenshot — must follow .cover::before/::after to win */
.cover--img::before,
.cover--img::after{ content:none; }

@media (max-width:760px){
  .work__grid{ grid-template-columns:1fr auto; grid-template-areas:"num go" "name name" "meta meta"; row-gap:14px; }
  .work__num{ grid-area:num } .work__go{ grid-area:go }
  .work__name{ grid-area:name } .work__meta{ grid-area:meta }
}

/* ============================================================
   WORK GALLERY  (work.html) — covers visible up front
   ============================================================ */
.gallery{
  display:grid; grid-template-columns:repeat(12,1fr);
  column-gap:clamp(14px,2vw,34px); row-gap:clamp(30px,4.5vw,86px);
}
.tile{ position:relative; display:block; grid-column:span 6; }
.tile--wide  { grid-column:span 7; }
.tile--narrow{ grid-column:span 5; }
.tile--full  { grid-column:1 / -1; }
.tile--offset{ margin-top:clamp(24px,7vw,110px); }

.tile__frame{
  position:relative; overflow:hidden; border-radius:5px;
  border:1px solid var(--line); aspect-ratio:4/3;
  background:var(--ink-2);
}
.tile--narrow .tile__frame{ aspect-ratio:4/5; }
.tile--full   .tile__frame{ aspect-ratio:16/7; }

.tile__frame .cover{ transition:transform 1.2s var(--ease); will-change:transform; }
.tile:hover .tile__frame .cover{ transform:scale(1.055); }

/* scrim so the overlay bits stay legible on any cover */
.tile__frame::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(200deg, rgba(12,12,19,.42) 0%, transparent 38%, rgba(12,12,19,.55) 100%);
  opacity:0; transition:opacity .6s var(--ease);
}
.tile:hover .tile__frame::after{ opacity:1; }

.tile__chip{
  position:absolute; z-index:3; left:clamp(14px,1.4vw,20px); top:clamp(14px,1.4vw,20px);
  font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone);
  border:1px solid rgba(233,232,243,.28); border-radius:100px;
  padding:6px 12px; backdrop-filter:blur(6px);
  opacity:0; transform:translateY(-6px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.tile:hover .tile__chip{ opacity:1; transform:none; }

.tile__go{
  position:absolute; z-index:3; right:clamp(14px,1.4vw,20px); bottom:clamp(14px,1.4vw,20px);
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:var(--flare); color:#fff;
  opacity:0; transform:scale(.7) rotate(-30deg);
  transition:opacity .5s var(--ease), transform .55s var(--ease);
}
.tile:hover .tile__go{ opacity:1; transform:scale(1) rotate(0deg); }
.tile__go svg{ width:15px; height:15px; }

.tile__meta{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; padding-top:clamp(14px,1.4vw,20px);
  border-top:1px solid var(--line); margin-top:clamp(12px,1.2vw,18px);
}
.tile__name{
  font-size:clamp(1.25rem,2.1vw,2rem); font-weight:500;
  letter-spacing:-.035em; line-height:1.05;
  transition:color .4s;
}
.tile__name em{
  display:block; margin-top:.45em;
  font-family:"Newsreader",Georgia,serif; font-style:italic; font-weight:300;
  font-size:.56em; letter-spacing:-.01em; color:var(--muted);
}
.tile:hover .tile__name{ color:var(--flare); }
.tile__year{ font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.14em; color:var(--muted); white-space:nowrap; }

.tile__tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.tile__tags span{
  font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); border-radius:100px; padding:4px 10px;
  transition:border-color .4s, color .4s;
}
.tile:hover .tile__tags span{ border-color:rgba(var(--flare-rgb),.4); color:var(--bone); }

@media (max-width:900px){
  .tile, .tile--wide, .tile--narrow{ grid-column:1 / -1; }
  .tile--offset{ margin-top:0; }
  .tile--narrow .tile__frame{ aspect-ratio:4/3; }
  .tile--full .tile__frame{ aspect-ratio:4/3; }
}

/* ============================================================
   CAPABILITIES
   ============================================================ */
.caps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.caps__item{
  padding:clamp(26px,3vw,46px) clamp(18px,2vw,34px) clamp(30px,4vw,60px) 0;
  border-top:1px solid var(--line);
  position:relative;
}
.caps__item h3{
  font-size:var(--fs-h3); font-weight:500; letter-spacing:-.03em;
  margin:.5em 0 .5em; line-height:1.05;
}
.caps__item p{ color:var(--muted); max-width:34ch; line-height:1.5; font-size:.98rem; }
.caps__n{ font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.18em; color:var(--flare); }
.caps__item::after{
  content:""; position:absolute; top:-1px; left:0; height:1px; width:0; background:var(--flare);
  transition:width .7s var(--ease);
}
.caps__item:hover::after{ width:100%; }

/* ============================================================
   ABOUT
   ============================================================ */
.about{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(30px,6vw,110px); align-items:start; }
.about__lead{
  font-size:clamp(1.35rem,2.7vw,2.35rem); font-weight:400; line-height:1.24; letter-spacing:-.03em;
}
.about__lead em{ font-family:"Newsreader",Georgia,serif; font-style:italic; color:var(--flare); }
.about__body p{ color:var(--muted); margin-top:1.2em; max-width:56ch; line-height:1.6; }
.about__portrait{
  position:relative; aspect-ratio:4/5; border-radius:4px; overflow:hidden;
  border:1px solid var(--line);
}
.about__portrait .cover::before{ background-size:34px 34px; }
.about__portrait figcaption{
  position:absolute; inset:auto 0 0 0; padding:18px 20px;
  background:linear-gradient(transparent, rgba(0,0,0,.72));
  font-family:"IBM Plex Mono",monospace; font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase;
}
.facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:clamp(28px,4vw,52px); }
.facts div{ border-top:1px solid var(--line); padding-top:14px; }
.facts b{ display:block; font-size:clamp(1.6rem,3vw,2.6rem); font-weight:500; letter-spacing:-.04em; line-height:1; }
.facts span{ font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

@media (max-width:900px){ .about{ grid-template-columns:1fr } }

/* ============================================================
   RECOGNITION
   ============================================================ */
.rec{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line-2); margin-top:2px; }
.rec div{
  background:var(--ink); padding:clamp(22px,2.6vw,38px) 18px;
  display:flex; flex-direction:column; gap:8px; transition:background .5s var(--ease);
}
.rec div:hover{ background:var(--ink-3); }
.rec b{ font-size:clamp(1.05rem,1.5vw,1.3rem); font-weight:500; letter-spacing:-.02em; }
.rec span{ font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* ============================================================
   JOURNAL
   ============================================================ */
.notes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1px; background:var(--line-2); }
.note{
  background:var(--ink); padding:clamp(24px,2.6vw,40px);
  display:flex; flex-direction:column; gap:14px; min-height:280px;
  transition:background .5s var(--ease);
}
.note:hover{ background:var(--ink-3); }
.note h3{ font-size:clamp(1.15rem,1.7vw,1.5rem); font-weight:500; letter-spacing:-.025em; line-height:1.2; margin-top:auto; }
.note__arrow{ font-size:1.1rem; color:var(--flare); transition:transform .5s var(--ease); }
.note:hover .note__arrow{ transform:translateX(8px); }

/* ============================================================
   CONTACT + FOOTER
   ============================================================ */
.contact{ position:relative; padding-block:clamp(80px,12vw,180px); overflow:hidden; }
.contact__glow{
  position:absolute; left:50%; bottom:-40%; width:min(120vw,1200px); aspect-ratio:1;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(var(--flare-rgb),.24), rgba(62,168,255,.07) 45%, transparent 64%);
  filter:blur(40px); pointer-events:none;
}
.contact h2{
  position:relative; z-index:2;
  font-size:clamp(2.6rem,9vw,8.5rem); font-weight:500; letter-spacing:-.05em; line-height:.9;
}
.contact h2 em{ font-family:"Newsreader",Georgia,serif; font-style:italic; font-weight:300; }
.contact__mail{
  position:relative; z-index:2; display:inline-flex; align-items:center; gap:.5em;
  margin-top:clamp(24px,4vw,46px); font-size:clamp(1.1rem,2.2vw,1.8rem);
  letter-spacing:-.02em; border-bottom:1px solid var(--line); padding-bottom:.18em;
  transition:border-color .4s, color .4s;
}
.contact__mail:hover{ border-color:var(--flare); color:var(--flare); }
.contact__grid{
  position:relative; z-index:2;
  margin-top:clamp(40px,6vw,80px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:26px;
}
.contact__grid a{ display:block; transition:color .3s; }
.contact__grid a:hover{ color:var(--flare); }

.foot{ border-top:1px solid var(--line); padding-block:26px; }
.foot__in{ display:flex; flex-wrap:wrap; gap:16px 30px; align-items:center; justify-content:space-between; }
.foot__socials{ display:flex; gap:20px; }
.foot__socials a{ position:relative; }
.foot__socials a::after{
  content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:100% 50%; transition:transform .4s var(--ease);
}
.foot__socials a:hover::after{ transform:scaleX(1); transform-origin:0 50%; }

/* ============================================================
   INNER PAGES
   ============================================================ */
.page-hero{
  padding-top:calc(var(--nav-h) + clamp(50px,10vh,120px));
  padding-bottom:clamp(30px,5vw,70px);
  position:relative; overflow:hidden;
}
.page-hero h1{
  font-size:clamp(2.8rem,9vw,8rem); font-weight:500; letter-spacing:-.05em; line-height:.9;
}
.page-hero h1 em{ font-family:"Newsreader",Georgia,serif; font-style:italic; font-weight:300; color:var(--flare); }
.page-hero p{ max-width:52ch; margin-top:clamp(18px,2.6vw,34px); color:var(--muted); font-size:clamp(1rem,1.3vw,1.22rem); }

.case__hero{ position:relative; aspect-ratio:16/7; border-radius:4px; overflow:hidden; border:1px solid var(--line); }
.case__facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:24px; margin-top:clamp(30px,4vw,56px); }
.case__facts div{ border-top:1px solid var(--line); padding-top:14px; }
.case__facts b{ display:block; font-weight:500; font-size:1.05rem; margin-top:6px; letter-spacing:-.01em; }

.prose{ max-width:66ch; }
.prose h3{ font-size:var(--fs-h3); font-weight:500; letter-spacing:-.03em; margin-top:2em; }
.prose p{ color:var(--muted); margin-top:1em; line-height:1.65; }
.prose ul{ margin-top:1em; display:grid; gap:.6em; }
.prose li{ color:var(--muted); padding-left:1.3em; position:relative; }
.prose li::before{ content:""; position:absolute; left:0; top:.62em; width:6px; height:1px; background:var(--flare); }

.split{ display:grid; grid-template-columns:22ch minmax(0,1fr); gap:clamp(24px,5vw,80px); align-items:start; }
@media (max-width:860px){ .split{ grid-template-columns:1fr } }

.nextcase{
  border-top:1px solid var(--line); padding-block:clamp(40px,6vw,90px);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.nextcase strong{ font-size:clamp(1.8rem,5vw,4rem); font-weight:500; letter-spacing:-.04em; }

/* ============================================================
   MOTION PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .hero__title .ln > span{ transform:none; }
  [data-reveal]{ opacity:1; transform:none; }
  .grain{ display:none; }
}