/* ==========================================================
   UFUK TURHAN — Nothing-inspired · deep navy
   Space Grotesk (display/body) · Space Mono (labels) · Doto (numerals)
   Master language: EN · Optional: TR
   ========================================================== */

:root{
  --navy-100:#070B18;
  --navy-200:#0A1024;
  --navy-400:#141E3E;
  --navy-500:#1B2750;

  --ink-display:#FFFFFF;
  --ink-primary:#E8ECF5;
  --ink-secondary:#98A3BA;
  --ink-tertiary:#5F6B85;
  --ink-faint:#3A4358;

  --line:rgba(255,255,255,.07);
  --line-strong:rgba(255,255,255,.14);
  --chip:linear-gradient(160deg,#FFFFFF 0%,#E9EDF4 100%);

  /* studio signature accent — Ahmet Boyar neon lime */
  --acid:#C9FF4A;

  --wash-hero:radial-gradient(120% 90% at 78% 8%, rgba(45,66,130,.42) 0%, rgba(12,18,42,0) 62%),
              radial-gradient(90% 70% at 4% 96%, rgba(28,42,92,.34) 0%, rgba(7,11,24,0) 60%);
  --rule:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 22%, rgba(255,255,255,.05) 100%);

  --t-display:clamp(3.1rem, 11.2vw, 9.2rem);
  --t-h2:clamp(1.9rem, 4.6vw, 3.4rem);
  --t-h3:clamp(1.05rem, 1.8vw, 1.35rem);
  --t-body:clamp(.95rem, 1.15vw, 1.0625rem);
  --t-label:.6875rem;

  --gut:clamp(1.25rem, 5vw, 5rem);
  --max:1360px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--navy-100);
  color:var(--ink-primary);
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:var(--t-body);
  font-weight:300;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink-display);color:var(--navy-100)}

/* ── language switching ───────────────────────────────────── */
html[data-lang="en"] .i18n[lang="tr"]{display:none!important}
html[data-lang="tr"] .i18n[lang="en"]{display:none!important}

/* ── blog view switching ──────────────────────────────────── */
html.view-post [data-view="list"]{display:none}
html.view-list [data-view="post"]{display:none}

body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(95% 65% at 50% 0%, #000 0%, transparent 78%);
  mask-image:radial-gradient(95% 65% at 50% 0%, #000 0%, transparent 78%);
}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);position:relative;z-index:1}
.mono{font-family:'Space Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.18em;font-size:var(--t-label);color:var(--ink-tertiary);font-weight:400}

/* ── NAV ──────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem var(--gut);
  background:linear-gradient(180deg, rgba(7,11,24,.92) 0%, rgba(7,11,24,.7) 58%, rgba(7,11,24,0) 100%);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.nav.is-stuck{background:rgba(7,11,24,.95);border-bottom-color:var(--line)}
.nav__id{font-family:'Space Mono',monospace;font-size:.8125rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-primary);display:flex;align-items:center;gap:.6rem;white-space:nowrap}
.nav__dot{width:7px;height:7px;border-radius:50%;background:var(--ink-display);flex:none;animation:pulse 3.4s steps(1,end) infinite}
@keyframes pulse{0%,72%{opacity:1}73%,100%{opacity:.2}}
.nav__right{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2rem)}
.nav__links{display:none;gap:clamp(1.1rem,2vw,1.9rem)}
@media(min-width:1080px){.nav__links{display:flex}}
.nav__links a{font-family:'Space Mono',monospace;font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-tertiary);transition:color .22s var(--ease);white-space:nowrap}
.nav__links a:hover,.nav__links a.is-active{color:var(--ink-display)}

/* mobile menu button ----------------------------------------------- */
.navbtn{
  display:grid;place-items:center;gap:5px;flex:none;
  width:38px;height:38px;padding:0;cursor:pointer;
  background:none;border:1px solid var(--line-strong);
  -webkit-tap-highlight-color:transparent;
}
@media(min-width:1080px){.navbtn{display:none}}
.navbtn span{display:block;width:16px;height:1px;background:var(--ink-primary);transition:transform .26s var(--ease)}
.navbtn[aria-expanded="true"]{background:var(--ink-display);border-color:var(--ink-display)}
.navbtn[aria-expanded="true"] span{background:var(--navy-100)}
.navbtn[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.navbtn[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}

/* mobile menu panel ------------------------------------------------- */
.menu{
  position:fixed;inset:0;z-index:70;
  display:flex;flex-direction:column;justify-content:space-between;gap:2rem;
  padding:6rem var(--gut) 2.5rem;
  overflow-y:auto;overscroll-behavior:contain;
  background:
    radial-gradient(120% 70% at 82% 0%, rgba(45,66,130,.42) 0%, rgba(7,11,24,0) 62%),
    var(--navy-100);
  animation:menuIn .2s var(--ease);
}
.menu[hidden]{display:none}
@keyframes menuIn{from{opacity:0}to{opacity:1}}
@media(min-width:1080px){.menu{display:none!important}}

.menu__list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.menu__list a{
  display:flex;align-items:baseline;gap:1.1rem;
  padding:1.05rem 0;border-bottom:1px solid var(--line);
  font-size:clamp(1.5rem,7vw,2.1rem);font-weight:300;letter-spacing:-.03em;line-height:1.1;
  color:var(--ink-display);transition:padding-left .3s var(--ease)
}
.menu__list a:active{padding-left:.8rem}
.menu__list a i{
  font-family:'Doto',monospace;font-style:normal;font-weight:700;
  font-size:.78rem;letter-spacing:.2em;color:var(--ink-faint);flex:none
}
.menu__foot{display:flex;flex-wrap:wrap;gap:.7rem 1.5rem}
.menu__foot a:active{color:var(--ink-display)}

/* language toggle -------------------------------------------------- */
.lang{display:flex;align-items:center;gap:.4rem;border:1px solid var(--line-strong);padding:.24rem}
.lang__btn{
  display:flex;align-items:center;gap:.42rem;cursor:pointer;
  background:none;border:0;padding:.3rem .5rem;
  font-family:'Space Mono',monospace;font-size:var(--t-label);letter-spacing:.14em;
  color:var(--ink-tertiary);text-transform:uppercase;
  transition:color .22s var(--ease),background .22s var(--ease);
}
.lang__btn:hover{color:var(--ink-primary)}
.lang__btn[aria-pressed="true"]{color:var(--navy-100);background:var(--ink-display)}
.lang__btn svg{width:19px;height:auto;display:block;flex:none;border:1px solid rgba(255,255,255,.22)}
.lang__btn[aria-pressed="true"] svg{border-color:rgba(7,11,24,.25)}
@media(max-width:420px){.lang__btn span{display:none}.lang__btn{padding:.3rem}}

/* ── HERO ─────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:8rem 0 3.5rem;background:var(--wash-hero)}
.hero__grid{display:grid;gap:clamp(2.75rem,5vw,4rem);grid-template-columns:1fr;align-items:end;width:100%}
@media(min-width:980px){.hero__grid{grid-template-columns:minmax(0,1fr) 300px}}

.hero__eyebrow{display:flex;flex-wrap:wrap;gap:.75rem 1.4rem;margin-bottom:clamp(1.5rem,4vw,2.5rem)}
.hero__eyebrow span{position:relative;padding-left:1.1rem}
.hero__eyebrow span::before{content:"";position:absolute;left:0;top:.52em;width:5px;height:5px;background:var(--ink-faint)}

.hero__name{font-size:var(--t-display);font-weight:300;line-height:.86;letter-spacing:-.045em;color:var(--ink-display);margin-bottom:clamp(1.25rem,3vw,2rem)}
.hero__name em{display:block;font-style:normal;font-weight:200;color:var(--ink-secondary)}

.hero__motto{font-size:clamp(1.25rem,2.6vw,2rem);font-weight:400;line-height:1.46;letter-spacing:-.025em;max-width:24ch}
/* marker highlight — white block, navy text; each wrapped line gets its own box */
.hero__motto .i18n{
  background:var(--ink-display);
  color:var(--navy-100);
  padding:.1em .3em;
  margin-left:-.3em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.hero__motto .i18n::selection{background:var(--navy-100);color:var(--ink-display)}
.hero__role{margin-top:1.1rem;font-size:var(--t-h3);font-weight:400;color:var(--ink-secondary);max-width:40ch;line-height:1.42;letter-spacing:-.01em}
.hero__role b{font-weight:500;color:var(--ink-primary)}
.hero__meta{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem}

.hero__portrait{position:relative;justify-self:start}
@media(min-width:980px){.hero__portrait{justify-self:end}}
.hero__portrait img{
  width:clamp(150px,36vw,300px);
  /* height:auto is required — the width/height HTML attributes are a
     presentational hint (height:400px) that would otherwise beat aspect-ratio
     and stretch the box to 3:4. */
  height:auto;
  aspect-ratio:1;object-fit:cover;
  filter:grayscale(1) contrast(1.05) brightness(.95);
  border:1px solid var(--line-strong);
  transition:filter .5s var(--ease);
}
.hero__portrait:hover img{filter:none}
.hero__portrait figcaption{position:absolute;bottom:-1.5rem;left:0}

@media(max-width:700px){
  .hero{min-height:auto;padding:5.75rem 0 3rem}
  .hero__grid{gap:1.75rem}
  /* scales with the viewport height so the portrait always clears the fold,
     from a 667px-tall phone up to a large one */
  .hero__portrait img{width:clamp(110px,20svh,170px)}
  .hero__portrait figcaption{bottom:-1.25rem}
}

.hero__scroll{position:absolute;bottom:2rem;right:var(--gut);display:none;align-items:center;gap:.8rem}
@media(min-width:980px){.hero__scroll{display:flex}}
.hero__scroll i{display:block;width:1px;height:46px;background:linear-gradient(180deg,var(--ink-tertiary),transparent);animation:drop 2.6s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}48%{transform:scaleY(1);transform-origin:top}52%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ── SECTION SHELL ────────────────────────────────────────── */
.sec{padding:clamp(4.5rem,11vw,9rem) 0;position:relative}
.sec__head{display:grid;gap:1.1rem;margin-bottom:clamp(2.5rem,6vw,4.5rem)}
@media(min-width:900px){.sec__head{grid-template-columns:150px minmax(0,1fr);gap:0 3rem;align-items:baseline}}
.sec__no{font-family:'Doto',monospace;font-weight:700;font-size:1.05rem;letter-spacing:.28em;color:var(--ink-faint)}
.sec__title{font-size:var(--t-h2);font-weight:300;letter-spacing:-.035em;line-height:1.04;color:var(--ink-display)}
.sec__title span{color:var(--ink-tertiary)}
.sec__note{margin-top:1rem;max-width:58ch;color:var(--ink-secondary)}

/* ── STATS ────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line)}
@media(min-width:780px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{padding:clamp(1.5rem,3.5vw,2.5rem) 0 clamp(1.5rem,3.5vw,2.25rem);border-bottom:1px solid var(--line)}
.stat + .stat{border-left:1px solid var(--line);padding-left:clamp(1rem,2.5vw,2rem)}
@media(max-width:779px){.stat:nth-child(3){border-left:0;padding-left:0}}
.stat__n{font-family:'Doto',monospace;font-weight:900;font-size:clamp(2.6rem,7vw,4.2rem);line-height:1;color:var(--ink-display)}
.stat__n sup{font-size:.34em;vertical-align:super;font-weight:700;color:var(--ink-tertiary);margin-left:.08em}
.stat__l{margin-top:.9rem;display:block;max-width:20ch}

/* ── ABOUT ────────────────────────────────────────────────── */
.about{display:grid;gap:clamp(2rem,5vw,3.5rem)}
@media(min-width:900px){.about{grid-template-columns:150px minmax(0,1.15fr) minmax(0,.7fr);gap:0 3rem;align-items:start}}
.about__lead{font-size:clamp(1.15rem,2.2vw,1.55rem);font-weight:300;line-height:1.46;letter-spacing:-.02em;color:var(--ink-display);max-width:34ch}
.about__body{margin-top:clamp(1.5rem,3vw,2.25rem);color:var(--ink-secondary);max-width:54ch}
.about__body p + p{margin-top:1.1rem}
.about__skills{margin-top:clamp(1.75rem,3.5vw,2.5rem);padding-top:1.5rem;border-top:1px solid var(--line);max-width:54ch}
.about__skills > p{margin-bottom:.9rem}
.about__aside{border-left:1px solid var(--line);padding-left:1.75rem}
@media(max-width:899px){.about__aside{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:1.75rem}}
.kv{display:flex;justify-content:space-between;gap:1.25rem;padding:.72rem 0;border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:0}
.kv b{font-weight:400;color:var(--ink-primary);text-align:right}

/* ── EXPERTISE ────────────────────────────────────────────── */
.skills{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,235px),1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.skill{padding:clamp(1.4rem,3vw,2rem);border-bottom:1px solid var(--line);border-right:1px solid var(--line);transition:background .35s var(--ease)}
.skill:hover{background:linear-gradient(160deg,rgba(27,39,80,.6),rgba(10,16,36,0))}
.skill__i{font-family:'Doto',monospace;font-weight:700;color:var(--ink-faint);font-size:.8rem;letter-spacing:.2em}
.skill__t{margin-top:.85rem;font-size:1.0625rem;font-weight:500;color:var(--ink-display);letter-spacing:-.01em}
.skill__d{margin-top:.45rem;font-size:.875rem;color:var(--ink-tertiary);line-height:1.55}

/* ── TIMELINE ─────────────────────────────────────────────── */
.tl{border-top:1px solid var(--line-strong)}
.job{display:grid;grid-template-columns:1fr;gap:1.25rem;padding:clamp(1.75rem,4vw,2.75rem) 0;border-bottom:1px solid var(--line);transition:background .4s var(--ease)}
@media(min-width:900px){
  .job{grid-template-columns:150px 96px minmax(0,1fr);gap:0 3rem;align-items:start}
  .job:hover{background:linear-gradient(90deg,rgba(27,39,80,.45) 0%,rgba(10,16,36,0) 72%)}
}
.job__when{padding-top:.25rem}
.job__when b{display:block;font-family:'Space Mono',monospace;font-size:.8125rem;letter-spacing:.08em;color:var(--ink-primary);font-weight:400}
.job__when i{display:block;margin-top:.35rem;font-style:normal;font-family:'Space Mono',monospace;font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}

.job__mark{width:72px;height:72px;flex:none;display:grid;place-items:center;background:var(--chip);padding:11px;border:1px solid rgba(255,255,255,.18);transition:transform .4s var(--ease)}
.job:hover .job__mark{transform:translateY(-3px)}
.job__mark img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.job__mark img.on-light{filter:invert(1)}
.job__mark--type{background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.015));border-color:var(--line-strong);font-family:'Space Mono',monospace;font-weight:700;font-size:1.05rem;letter-spacing:.05em;color:var(--ink-secondary)}

.job__co{font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:400;letter-spacing:-.03em;color:var(--ink-display);line-height:1.14}
.job__span{margin-top:.55rem;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.job__roles{margin-top:1.35rem;display:grid;gap:1.05rem}
.role{position:relative;padding-left:1.5rem}
.role::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--ink-faint)}
.role__t{font-size:1.0625rem;font-weight:500;color:var(--ink-primary);letter-spacing:-.01em;line-height:1.38;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.role__t img{height:13px;width:auto;filter:brightness(0) invert(1);opacity:.92}
.role__m{margin-top:.3rem;display:flex;flex-wrap:wrap;gap:.3rem 1rem}
.role__d{margin-top:.6rem;font-size:.9375rem;color:var(--ink-tertiary);max-width:66ch;line-height:1.6}
.job--now .job__co::after{content:"";display:inline-block;width:8px;height:8px;background:var(--ink-display);margin-left:.65rem;vertical-align:.16em;animation:pulse 3.4s steps(1,end) infinite}

/* ── TAGS ─────────────────────────────────────────────────── */
.sectors{display:flex;flex-wrap:wrap;gap:.6rem}
.tag{font-family:'Space Mono',monospace;font-size:var(--t-label);text-transform:uppercase;letter-spacing:.16em;color:var(--ink-secondary);padding:.62rem 1.05rem;border:1px solid var(--line-strong);transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)}
.tag:hover{color:var(--ink-display);border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.04)}

/* ── EDUCATION / EXTRAS ───────────────────────────────────── */
.cols{display:grid;gap:clamp(2rem,5vw,3rem)}
@media(min-width:900px){.cols{grid-template-columns:150px repeat(2,minmax(0,1fr));gap:0 3rem}}
.entry{padding:1.15rem 0;border-bottom:1px solid var(--line)}
.entry:first-of-type{border-top:1px solid var(--line)}
.entry__t{font-size:1.0625rem;font-weight:500;color:var(--ink-display);letter-spacing:-.01em}
.entry__s{margin-top:.3rem;color:var(--ink-tertiary);font-size:.9375rem}
.entry__y{margin-top:.45rem}

/* ── PAGE MASTHEAD (blog, 404, standalone pages) ──────────── */
.masthead{position:relative;padding:clamp(7.5rem,15vw,11rem) 0 clamp(2.5rem,6vw,4.5rem)}
.masthead::before{
  content:"";position:absolute;inset:0;background:var(--wash-hero);pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(180deg,#000 52%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 52%,transparent 100%);
}
.masthead__grid{display:grid;gap:1.1rem}
@media(min-width:900px){.masthead__grid{grid-template-columns:150px minmax(0,1fr);gap:0 3rem;align-items:baseline}}
.masthead__no{font-family:'Doto',monospace;font-weight:700;font-size:1.05rem;letter-spacing:.28em;color:var(--ink-faint)}
.masthead__t{font-size:clamp(3rem,9.5vw,6.5rem);font-weight:300;line-height:.9;letter-spacing:-.045em;color:var(--ink-display)}
.masthead__t span{color:var(--ink-tertiary)}
.masthead__x{margin-top:1.4rem;max-width:46ch;color:var(--ink-secondary);font-size:var(--t-h3);line-height:1.4}
.masthead__meta{margin-top:1.9rem;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem}

/* ── JOURNAL / BLOG ───────────────────────────────────────── */
.posts{display:grid;gap:0;border-top:1px solid var(--line-strong)}
.post-card{
  display:grid;grid-template-columns:1fr;gap:.85rem;
  padding:clamp(1.5rem,3.5vw,2.4rem) 0;border-bottom:1px solid var(--line);
  transition:background .4s var(--ease),padding-left .35s var(--ease);
}
@media(min-width:900px){
  .post-card{grid-template-columns:150px 96px minmax(0,1fr) 2rem;gap:0 3rem;align-items:start}
  .post-card:hover{background:linear-gradient(90deg,rgba(27,39,80,.45) 0%,rgba(10,16,36,0) 72%);padding-left:1rem}
}
.post-card__thumb{width:96px;aspect-ratio:3/2;flex:none;overflow:hidden;border:1px solid var(--line-strong);display:grid;place-items:center;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015))}
.post-card__thumb img{width:100%;height:100%;object-fit:cover;object-position:top;filter:grayscale(1) brightness(.92);transition:filter .45s var(--ease)}
.post-card:hover .post-card__thumb img{filter:none}
.post-card__thumb span{font-family:'Doto',monospace;font-weight:700;font-size:.9rem;letter-spacing:.14em;color:var(--ink-faint)}
.post-card__t{font-size:clamp(1.2rem,2.4vw,1.7rem);font-weight:400;letter-spacing:-.03em;line-height:1.2;color:var(--ink-display)}
.post-card__x{margin-top:.6rem;color:var(--ink-secondary);max-width:60ch}
.post-card__tags{margin-top:.85rem;display:flex;flex-wrap:wrap;gap:.45rem}
.post-card__a{font-family:'Space Mono',monospace;font-size:1.1rem;color:var(--ink-faint);justify-self:end;transition:transform .35s var(--ease),color .25s var(--ease)}
.post-card:hover .post-card__a{transform:translate(4px,-4px);color:var(--ink-display)}
@media(max-width:899px){.post-card__a{display:none}}

.pill{font-family:'Space Mono',monospace;font-size:var(--t-label);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-tertiary);border:1px solid var(--line);padding:.3rem .6rem}

/* single post ------------------------------------------------------ */
.article{position:relative;padding:clamp(7rem,14vw,10rem) 0 clamp(3rem,7vw,5rem)}
.article::before{
  content:"";position:absolute;inset:0 0 auto 0;height:min(70vh,660px);
  background:var(--wash-hero);pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 45%,transparent 100%);
}
.article__head{display:grid;gap:1.25rem;max-width:74ch;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.article__t{font-size:clamp(2rem,5vw,3.6rem);font-weight:300;letter-spacing:-.04em;line-height:1.04;color:var(--ink-display)}
.article__meta{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center}
.article__body{max-width:68ch;color:var(--ink-secondary);font-size:clamp(1rem,1.25vw,1.125rem);line-height:1.75}
.article__body > * + *{margin-top:1.3rem}
.article__body h2{font-size:clamp(1.3rem,2.4vw,1.75rem);font-weight:400;letter-spacing:-.025em;color:var(--ink-display);margin-top:2.4rem;line-height:1.25}
.article__body h3{font-size:1.125rem;font-weight:500;color:var(--ink-primary);margin-top:1.8rem}
.article__body strong{color:var(--ink-primary);font-weight:500}
.article__body a{color:var(--ink-display);border-bottom:1px solid var(--line-strong)}
.article__body ul,.article__body ol{padding-left:1.25rem}
.article__body li + li{margin-top:.5rem}
.article__body blockquote{border-left:1px solid var(--line-strong);padding-left:1.25rem;color:var(--ink-primary);font-size:1.15em;font-weight:300}
.article__body code{font-family:'Space Mono',ui-monospace,monospace;font-size:.88em;color:var(--ink-primary);background:rgba(255,255,255,.055);border:1px solid var(--line);padding:.14em .45em;white-space:nowrap}
.article__body img{margin:2rem 0;border:1px solid var(--line-strong)}
.article__lead{font-size:clamp(1.15rem,2.2vw,1.5rem);font-weight:300;line-height:1.45;letter-spacing:-.02em;color:var(--ink-display)}

.article__cover{margin-bottom:clamp(2rem,4vw,3rem)}
.article__cover img{width:100%;height:auto;border:1px solid var(--line-strong)}
.article__cover figcaption{margin-top:.85rem;max-width:68ch;text-transform:none;letter-spacing:.01em;font-size:.8125rem;line-height:1.5}

.facts{border-top:1px solid var(--line-strong);margin-top:1.75rem}
.facts__row{display:grid;grid-template-columns:1fr;gap:.2rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
@media(min-width:620px){.facts__row{grid-template-columns:160px minmax(0,1fr);gap:0 1.75rem;align-items:baseline}}
.facts__v{color:var(--ink-primary);font-size:.9375rem;line-height:1.55}

.back{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:2rem;color:var(--ink-tertiary);transition:color .22s var(--ease)}
.back:hover{color:var(--ink-display)}

.empty{border:1px dashed var(--line-strong);padding:clamp(1.5rem,4vw,2.5rem);color:var(--ink-tertiary)}

/* ── DIGITAL BUSINESS CARD ────────────────────────────────── */
.card{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:6rem 0 2.5rem;background:var(--wash-hero);
}
.card__box{width:100%;max-width:440px;margin-inline:auto}

.card__head{display:flex;align-items:center;gap:1.15rem;padding-bottom:1.6rem}
.card__photo{
  width:clamp(84px,22vw,104px);aspect-ratio:1;height:auto;flex:none;object-fit:cover;
  border:1px solid var(--line-strong);
  filter:grayscale(1) contrast(1.05) brightness(.95);
  transition:filter .5s var(--ease);
}
.card__head:hover .card__photo{filter:none}
.card__name{font-size:clamp(1.6rem,6.5vw,2.15rem);font-weight:300;letter-spacing:-.04em;line-height:1.04;color:var(--ink-display)}
.card__role{margin-top:.55rem;color:var(--ink-secondary);font-size:.9375rem;line-height:1.38}
.card__org{display:block;margin-top:.35rem}

.card__rows{border-top:1px solid var(--line-strong)}
.card__rows .link{padding:.95rem 0;gap:1rem}
.card__rows .link:hover{padding-left:.5rem}
.card__rows .link__icon{width:28px;height:28px}
.card__rows .link__v{font-size:1rem}
.card__rows .link--adr .link__v{font-size:.875rem;line-height:1.5;letter-spacing:0}

.card__save{
  display:flex;align-items:center;justify-content:center;gap:.75rem;
  width:100%;margin-top:1.75rem;padding:1.15rem 1.25rem;
  background:var(--ink-display);color:var(--navy-100);
  border:1px solid var(--ink-display);
  font-family:'Space Mono',ui-monospace,monospace;
  font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;
  -webkit-tap-highlight-color:transparent;
  transition:transform .18s var(--ease),opacity .18s var(--ease);
}
.card__save b{font-size:1.25rem;font-weight:400;line-height:0;margin-top:-.1em}
.card__save:active{transform:translateY(1px);opacity:.88}
.card__hint{margin-top:.9rem;text-align:center;color:var(--ink-faint)}
.card__back{margin-top:2.25rem;display:flex;justify-content:center}

/* ── 404 ──────────────────────────────────────────────────── */
.err{min-height:100svh;display:flex;align-items:center;padding:7rem 0 4rem;background:var(--wash-hero)}
.err__grid{display:grid;gap:1.1rem;width:100%}
@media(min-width:900px){.err__grid{grid-template-columns:150px minmax(0,1fr);gap:0 3rem;align-items:start}}
.err__n{
  font-family:'Doto',monospace;font-weight:900;
  font-size:clamp(6rem,26vw,18rem);line-height:.8;letter-spacing:.02em;
  color:var(--ink-display);
}
.err__n b{font-weight:900;color:var(--acid);text-shadow:0 0 34px rgba(201,255,74,.35)}
.err__t{margin-top:clamp(1.75rem,4vw,2.75rem);font-size:clamp(1.3rem,3vw,2rem);font-weight:300;letter-spacing:-.03em;line-height:1.2;color:var(--ink-display);max-width:22ch}
.err__x{margin-top:1rem;max-width:48ch;color:var(--ink-secondary)}
.err__go{margin-top:clamp(2rem,5vw,3rem);display:flex;flex-wrap:wrap;gap:.6rem}

/* ── CONTACT ──────────────────────────────────────────────── */
.contact{padding:clamp(5rem,12vw,10rem) 0 0;background:radial-gradient(90% 120% at 12% 100%, rgba(38,56,116,.4) 0%, rgba(7,11,24,0) 64%)}
.contact__h{font-size:var(--t-h2);font-weight:300;letter-spacing:-.035em;line-height:1.08;color:var(--ink-display);max-width:19ch}
.links{margin-top:clamp(2.5rem,6vw,4rem);border-top:1px solid var(--line)}
.link{display:flex;align-items:center;gap:clamp(1rem,2.5vw,1.75rem);padding:clamp(1.15rem,3vw,1.9rem) 0;border-bottom:1px solid var(--line);transition:padding-left .35s var(--ease)}
.link:hover{padding-left:1.1rem}
.link__icon{width:clamp(30px,4vw,38px);height:clamp(30px,4vw,38px);flex:none;display:grid;place-items:center;color:var(--ink-secondary);transition:color .25s var(--ease)}
.link:hover .link__icon{color:var(--ink-display)}
.link__icon svg{width:100%;height:100%;display:block}
.link__l{display:flex;flex-direction:column;gap:.32rem;min-width:0;flex:1}
.link__v{font-size:clamp(1.05rem,2.4vw,1.45rem);font-weight:400;letter-spacing:-.02em;color:var(--ink-primary);overflow-wrap:anywhere;transition:color .25s var(--ease)}
.link:hover .link__v{color:var(--ink-display)}
.link__a{font-family:'Space Mono',monospace;font-size:1.1rem;color:var(--ink-faint);flex:none;transition:transform .35s var(--ease),color .25s var(--ease)}
.link:hover .link__a{transform:translate(4px,-4px);color:var(--ink-display)}

.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.9rem 1.5rem;padding:2.5rem 0 3rem;border-top:1px solid var(--line);margin-top:clamp(3rem,7vw,5rem)}
.foot__sign{color:var(--ink-secondary);order:0}
.foot__sign i{font-style:normal;color:var(--ink-faint);padding:0 .55rem;transition:color .25s var(--ease)}
.foot__sign a{color:inherit;transition:color .25s var(--ease),text-shadow .25s var(--ease)}
.foot__sign:hover a{color:var(--acid);text-shadow:0 0 16px rgba(201,255,74,.42)}
.foot__sign:hover i{color:var(--acid);opacity:.55}
@media(max-width:700px){
  .foot{justify-content:flex-start}
  .foot__sign{order:1;width:100%;padding-top:.9rem;border-top:1px solid var(--line)}
  .foot__sign i:first-child{padding-left:0}
}

/* ── reveal ───────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}
:focus-visible{outline:1px solid var(--ink-display);outline-offset:4px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}