/* =========================================================================
   Lourenço Lume portfolio
   1. Tokens          5. Hero            9.  Path / timeline
   2. Reset & base    6. Work grid       10. Contact & footer
   3. Chrome          7. About           11. Case study
   4. Components      8. Capabilities    12. Lightbox & responsive
   ========================================================================= */

/* ───────────────────────────────────────────────────────── 1. tokens */
:root{
  --ink:        #edeae3;
  --ink-dim:    #9a968d;
  --ink-faint:  #5d5a54;
  --bg:         #0a0a0b;
  --bg-2:       #111113;
  --bg-3:       #17171a;
  --line:       rgba(237,234,227,.12);
  --line-soft:  rgba(237,234,227,.07);
  --accent:     #2e6bff;
  --accent-2:   #e8613c;

  --serif: "Instrument Serif", "Didot", "Bodoni MT", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --pad: clamp(1.25rem, 5vw, 5.5rem);
  --maxw: 1560px;
  --r: 14px;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);
}

[data-theme="light"]{
  --ink:        #14130f;
  --ink-dim:    #605c53;
  --ink-faint:  #a8a49a;
  --bg:         #f4f1ea;
  --bg-2:       #eae6dc;
  --bg-3:       #e1dcd0;
  --line:       rgba(20,19,15,.14);
  --line-soft:  rgba(20,19,15,.07);
  --accent:     #1c4fd8;
  --accent-2:   #cf4a25;
}

/* ─────────────────────────────────────────────────── 2. reset & base */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  font-weight:300;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background .5s var(--ease), color .5s var(--ease);
}
body.is-locked{ overflow:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-weight:400; letter-spacing:-.02em; }
p{ margin:0 0 1.1em; }
em{ font-style:italic; }
::selection{ background:var(--accent); color:#fff; }

.skip-link{
  position:fixed; top:-100px; left:1rem; z-index:999;
  background:var(--accent); color:#fff; padding:.7rem 1.1rem; border-radius:8px;
}
.skip-link:focus{ top:1rem; }

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

.muted{ color:var(--ink-dim); }

/* film grain */
.grain{
  position:fixed; inset:-50%; z-index:2; pointer-events:none; opacity:.035;
  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='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(6) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0) }
  10%{ transform:translate(-3%,-4%) } 30%{ transform:translate(4%,-2%) }
  50%{ transform:translate(-2%,4%) }  70%{ transform:translate(3%,3%) }
  90%{ transform:translate(-4%,1%) }
}

/* ───────────────────────────────────────────────────────── 3. chrome */
.preloader{
  position:fixed; inset:0; z-index:1000; background:var(--bg);
  display:grid; place-items:center;
  transition:opacity .7s var(--ease), visibility .7s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__inner{ width:min(560px, 78vw); text-align:center; }
.preloader__name{
  font-family:var(--serif); font-size:clamp(2.6rem,7vw,4.6rem); line-height:.98;
  display:flex; flex-direction:column; gap:.05em; margin-bottom:2rem;
}
.preloader__name span{ display:block; opacity:0; transform:translateY(24px); animation:preIn .9s var(--ease) forwards; }
.preloader__name span:nth-child(2){ font-style:italic; animation-delay:.12s; }
@keyframes preIn{ to{ opacity:1; transform:none; } }
.preloader__bar{ height:1px; background:var(--line); position:relative; overflow:hidden; }
.preloader__bar i{ position:absolute; inset:0 100% 0 0; background:var(--ink); transition:right .2s linear; }
.preloader__count{ margin-top:.9rem; font-family:var(--mono); font-size:.68rem; color:var(--ink-dim); letter-spacing:.1em; }

.cursor,.cursor-dot{ position:fixed; top:0; left:0; z-index:900; pointer-events:none; border-radius:50%; }
.cursor{
  width:38px; height:38px; margin:-19px 0 0 -19px; border:1px solid var(--line);
  display:grid; place-items:center;
  transition:width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease),
             background .3s var(--ease), border-color .3s var(--ease), opacity .3s;
}
.cursor__label{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--bg); opacity:0; transition:opacity .2s; white-space:nowrap;
}
.cursor.is-active{ width:84px; height:84px; margin:-42px 0 0 -42px; background:var(--ink); border-color:var(--ink); }
.cursor.is-active .cursor__label{ opacity:1; }
.cursor-dot{ width:5px; height:5px; margin:-2.5px 0 0 -2.5px; background:var(--ink); transition:opacity .3s, transform .3s; }
.cursor.is-active + .cursor-dot,
.cursor-dot.is-hidden{ opacity:0; }
@media (hover:none),(pointer:coarse){ .cursor,.cursor-dot{ display:none; } }

.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:800;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}

.header{
  position:fixed; top:0; left:0; right:0; z-index:700;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem var(--pad);
  transition:transform .45s var(--ease), background .45s var(--ease), border-color .45s;
  border-bottom:1px solid transparent;
}
.header.is-stuck{
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom-color:var(--line-soft);
}
.header.is-hidden{ transform:translateY(-105%); }
.header__logo{ display:flex; align-items:baseline; gap:.6rem; }
.header__mark{
  font-family:var(--serif); font-size:1.35rem; line-height:1;
  border:1px solid var(--line); border-radius:50%; width:2.1rem; height:2.1rem;
  display:grid; place-items:center; transition:background .35s var(--ease), color .35s var(--ease);
}
.header__logo:hover .header__mark{ background:var(--ink); color:var(--bg); }
.header__logotext{ font-size:.82rem; letter-spacing:.02em; }
.header__nav{ display:flex; gap:2rem; }
.header__nav a{ font-size:.78rem; letter-spacing:.03em; position:relative; padding-bottom:2px; }
.header__nav a i{ font-style:normal; font-family:var(--mono); font-size:.6rem; color:var(--ink-faint); margin-right:.4rem; }
.header__nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:currentColor;
  transition:width .4s var(--ease);
}
.header__nav a:hover::after, .header__nav a.is-current::after{ width:100%; }
.header__tools{ display:flex; align-items:center; gap:.5rem; }

.theme-toggle{
  width:2.1rem; height:2.1rem; border:1px solid var(--line); border-radius:50%;
  display:grid; place-items:center; position:relative;
  transition:border-color .3s, background .3s;
}
.theme-toggle:hover{ background:var(--bg-2); }
.theme-toggle svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; position:absolute; transition:opacity .3s var(--ease), transform .4s var(--ease); }
.theme-toggle__sun{ opacity:0; transform:rotate(-60deg) scale(.5); }
.theme-toggle__moon{ opacity:1; transform:none; }
[data-theme="light"] .theme-toggle__sun{ opacity:1; transform:none; }
[data-theme="light"] .theme-toggle__moon{ opacity:0; transform:rotate(60deg) scale(.5); }

.burger{ display:none; width:2.1rem; height:2.1rem; position:relative; }
.burger span{ position:absolute; left:.35rem; right:.35rem; height:1px; background:currentColor; transition:transform .4s var(--ease), opacity .3s; }
.burger span:first-child{ top:.85rem; } .burger span:last-child{ bottom:.85rem; }
.burger.is-open span:first-child{ transform:translateY(.22rem) rotate(45deg); }
.burger.is-open span:last-child{ transform:translateY(-.22rem) rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:650; background:var(--bg);
  display:flex; flex-direction:column; justify-content:center; gap:2rem;
  padding:5rem var(--pad) 3rem;
  clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--ease); visibility:hidden;
}
.menu.is-open{ clip-path:inset(0 0 0 0); visibility:visible; }
.menu__nav{ display:flex; flex-direction:column; gap:.2rem; }
.menu__nav a{ font-family:var(--serif); font-size:clamp(2.2rem,10vw,3.6rem); line-height:1.15; display:flex; align-items:baseline; gap:1rem; }
.menu__nav a i{ font-family:var(--mono); font-size:.65rem; font-style:normal; color:var(--ink-faint); }
.menu__foot{ display:flex; flex-direction:column; gap:.4rem; font-size:.85rem; color:var(--ink-dim); border-top:1px solid var(--line); padding-top:1.5rem; }

/* ───────────────────────────────────────────────────── 4. components */
.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  padding:.95rem 1.6rem; border-radius:100px; font-size:.82rem; letter-spacing:.02em;
  border:1px solid var(--line); position:relative; overflow:hidden;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.btn svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.btn span,.btn svg{ position:relative; z-index:1; }
.btn::before{
  content:''; position:absolute; inset:0; background:var(--ink);
  transform:translateY(101%); transition:transform .5s var(--ease);
}
.btn:hover::before{ transform:translateY(0); }
.btn:hover{ color:var(--bg); border-color:var(--ink); }
.btn--primary{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.btn--primary::before{ background:var(--accent); }
.btn--primary:hover{ color:#fff; border-color:var(--accent); }

.section{ padding:clamp(5rem,11vw,10rem) var(--pad); max-width:var(--maxw); margin-inline:auto; }
.section__head{ margin-bottom:clamp(2.5rem,6vw,5rem); }
.section__num{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:1.6rem;
  padding-bottom:.9rem; border-bottom:1px solid var(--line-soft);
}
.section__title{ font-family:var(--serif); font-size:clamp(2.7rem,7.5vw,5.6rem); line-height:.95; }
.section__title em{ color:var(--ink-dim); }
.section__lead{ max-width:46ch; margin-top:1.6rem; color:var(--ink-dim); font-size:1.02rem; }

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .grain{ animation:none; }
}

/* ───────────────────────────────────────────────────────── 5. hero */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:8rem var(--pad) 0; max-width:var(--maxw); margin-inline:auto; overflow:hidden;
}
.hero__collage{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__collage img{
  position:absolute; border-radius:8px; object-fit:cover;
  opacity:0; filter:grayscale(1) contrast(1.05);
  transition:opacity 1.4s var(--ease), filter .6s var(--ease);
  will-change:transform;
}
.hero__collage img.is-in{ opacity:.2; }
.hero__collage img:nth-child(1){ width:15vw; aspect-ratio:1/1;   top:14%;  left:2%;  }
.hero__collage img:nth-child(2){ width:11vw; aspect-ratio:3/4;   top:8%;   right:8%; }
.hero__collage img:nth-child(3){ width:13vw; aspect-ratio:4/3;   top:44%;  right:1%; }
.hero__collage img:nth-child(4){ width:12vw; aspect-ratio:16/10; bottom:26%; left:9%; }
.hero__collage img:nth-child(5){ width:16vw; aspect-ratio:16/9;  top:24%;  left:36%; }
.hero__collage img:nth-child(6){ width:9vw;  aspect-ratio:1/1;   bottom:32%; right:22%; }

.hero__inner{ position:relative; z-index:1; padding-bottom:clamp(2rem,5vw,4rem); }
.hero__eyebrow{
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-dim); margin-bottom:clamp(1.5rem,4vw,3rem);
}
.hero__eyebrow .dot{ width:3px; height:3px; border-radius:50%; background:var(--accent); }

.hero__title{
  font-family:var(--serif); font-size:clamp(3.6rem,15.5vw,15rem); line-height:.83;
  letter-spacing:-.035em; margin-bottom:clamp(1.6rem,4vw,3rem);
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{
  display:block; transform:translateY(105%);
  transition:transform 1.15s var(--ease);
}
.hero__title .line:nth-child(2) > span{ transition-delay:.1s; }
.is-ready .hero__title .line > span{ transform:none; }
.hero__title em{ color:var(--ink-dim); }

.hero__meta{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,4rem); align-items:end;
  border-top:1px solid var(--line-soft); padding-top:1.8rem;
}
.hero__role{ font-size:clamp(.95rem,1.6vw,1.25rem); margin:0; }
.hero__blurb{ color:var(--ink-dim); max-width:48ch; margin:0 0 1.6rem; font-size:.98rem; }
.hero__cta{ display:flex; gap:.7rem; flex-wrap:wrap; }

.marquee{ position:relative; overflow:hidden; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding:.9rem 0; }
.marquee__track{ display:flex; gap:2.6rem; width:max-content; animation:slide 46s linear infinite; }
.marquee__track span{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim);
  display:flex; align-items:center; gap:2.6rem; white-space:nowrap;
}
.marquee__track span::after{ content:'✦'; color:var(--accent); font-size:.6rem; }
@keyframes slide{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; } }

/* ────────────────────────────────────────────────────── 6. work grid */
.filters{ display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:2.6rem; }
.filter{
  padding:.55rem 1.1rem; border:1px solid var(--line); border-radius:100px;
  font-size:.76rem; letter-spacing:.02em; color:var(--ink-dim);
  transition:color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.filter:hover{ color:var(--ink); border-color:var(--ink-faint); }
.filter.is-on{ background:var(--ink); border-color:var(--ink); color:var(--bg); }

/* 12-column grid. The size pattern in main.js is built so every row adds
   up to 12; `dense` packing then closes any gaps left by filtering. */
.grid{
  display:grid; grid-template-columns:repeat(12,1fr); grid-auto-flow:row dense;
  gap:clamp(.8rem,1.6vw,1.6rem);
}

.card{
  grid-column:span 4; position:relative; display:block; text-align:left;
  opacity:0; transform:translateY(28px) scale(.985);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.card.is-in{ opacity:1; transform:none; }
.card.is-hidden{ display:none; }
.card--wide{ grid-column:span 8; }
.card--half{ grid-column:span 6; }
.card--full{ grid-column:span 12; }

.card__media{
  position:relative; overflow:hidden; border-radius:var(--r); background:var(--bg-2);
  aspect-ratio:4/3;
}
.card--wide .card__media{ aspect-ratio:16/9; }
.card--half .card__media{ aspect-ratio:3/2; }
.card--full .card__media{ aspect-ratio:21/9; }
.card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease), filter .6s var(--ease);
  filter:grayscale(.35);
}
.card:hover .card__media img{ transform:scale(1.055); filter:grayscale(0); }
.card__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.55), transparent 55%);
  opacity:0; transition:opacity .5s var(--ease);
}
.card:hover .card__media::after{ opacity:1; }

.card__tag{
  position:absolute; top:.9rem; left:.9rem; z-index:2;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase;
  background:color-mix(in srgb, var(--bg) 76%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  padding:.34rem .6rem; border-radius:100px; border:1px solid var(--line-soft);
}
.card__open{
  position:absolute; right:.9rem; bottom:.9rem; z-index:2; color:#fff;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  opacity:0; transform:translateY(8px); transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.card:hover .card__open{ opacity:1; transform:none; }

.card__body{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.95rem .15rem 0; }
.card__title{ font-family:var(--serif); font-size:clamp(1.25rem,2vw,1.7rem); line-height:1.15; }
.card__sub{ display:block; font-family:var(--sans); font-size:.82rem; color:var(--ink-dim); margin-top:.2rem; letter-spacing:0; }
.card__year{ font-family:var(--mono); font-size:.66rem; color:var(--ink-faint); white-space:nowrap; }

/* ───────────────────────────────────────────────────────── 7. about */
.about{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,6vw,6rem); align-items:start; }
.about__lead{ font-family:var(--serif); font-size:clamp(1.5rem,3.1vw,2.4rem); line-height:1.24; color:var(--ink); }
.about__text p{ color:var(--ink-dim); max-width:58ch; }
.about__text p.about__lead{ color:var(--ink); }
.about__signature{
  display:flex; align-items:center; gap:1rem; margin-top:2.4rem; padding-top:1.4rem;
  border-top:1px solid var(--line-soft); font-family:var(--mono); font-size:.68rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);
}
.about__signature a{ color:var(--accent); }

.stats{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; margin-bottom:2.4rem; }
.stat{ background:var(--bg); padding:1.5rem 1.3rem; }
.stat b{ display:block; font-family:var(--serif); font-size:clamp(2rem,4vw,3rem); line-height:1; font-weight:400; }
.stat span{ display:block; margin-top:.5rem; font-family:var(--mono); font-size:.6rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-faint); }

.ventures__label{ font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:.9rem; }
.venture{
  display:block; padding:1.2rem 0; border-top:1px solid var(--line-soft);
  transition:padding-left .45s var(--ease);
}
.venture:last-child{ border-bottom:1px solid var(--line-soft); }
.venture:hover{ padding-left:.7rem; }
.venture b{ display:block; font-family:var(--serif); font-size:1.25rem; font-weight:400; }
.venture span{ display:block; font-size:.85rem; color:var(--ink-dim); margin:.25rem 0 .45rem; }
.venture i{ font-style:normal; font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; color:var(--accent); }

/* ────────────────────────────────────────────────── 8. capabilities */
.caps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; }
.cap{ background:var(--bg); padding:1.8rem 1.5rem; transition:background .45s var(--ease); }
.cap:hover{ background:var(--bg-2); }
.cap h3{ font-family:var(--mono); font-size:.64rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:1.1rem; }
.cap ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.cap li{ font-size:.94rem; display:flex; align-items:center; gap:.6rem; }
.cap li::before{ content:''; width:4px; height:4px; border-radius:50%; background:var(--accent); flex:none; }

/* ─────────────────────────────────────────────── 9. path / timeline */
.path{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:start; }
.path__label{ font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:1.4rem; }
.path__label--mt{ margin-top:3.5rem; }

.timeline{ position:relative; }
.tl{
  position:relative; padding:0 0 1.7rem 1.7rem; border-left:1px solid var(--line);
  opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.tl.is-in{ opacity:1; transform:none; }
.tl:last-child{ border-left-color:transparent; padding-bottom:0; }
.tl::before{
  content:''; position:absolute; left:-4px; top:.55rem; width:7px; height:7px; border-radius:50%;
  background:var(--bg); border:1px solid var(--ink-faint); transition:background .4s, border-color .4s;
}
.tl:hover::before{ background:var(--accent); border-color:var(--accent); }
.tl__when{ font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; color:var(--ink-faint); text-transform:uppercase; }
.tl__role{ font-family:var(--serif); font-size:1.35rem; line-height:1.25; margin-top:.25rem; }
.tl__org{ font-size:.85rem; color:var(--ink-dim); margin-bottom:.6rem; }
.tl__tag{
  display:inline-block; margin-left:.5rem; vertical-align:middle;
  font-family:var(--mono); font-size:.55rem; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--accent); color:var(--accent); padding:.15rem .45rem; border-radius:100px;
}
.tl ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.35rem; }
.tl li{ font-size:.87rem; color:var(--ink-dim); padding-left:.9rem; position:relative; }
.tl li::before{ content:'·'; position:absolute; left:0; color:var(--ink-faint); }

.timeline--edu .tl__role{ font-size:1.2rem; }

.certs{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.cert{
  border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; background:var(--bg-2);
  display:flex; flex-direction:column; text-align:left;
  width:100%; font:inherit; color:inherit; padding:0;
  opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease), border-color .4s;
}
.cert.is-in{ opacity:1; transform:none; }
.cert:hover{ border-color:var(--ink-faint); }
.cert__img{ position:relative; aspect-ratio:4/3; background:var(--bg-3); overflow:hidden; }
.cert__img img{ width:100%; height:100%; object-fit:cover; object-position:top center; filter:grayscale(.3); transition:transform .9s var(--ease), filter .5s; }
.cert:hover .cert__img img{ transform:scale(1.05); filter:none; }

.cert__zoom{
  position:absolute; right:.7rem; bottom:.7rem; z-index:2; color:#fff;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.11em; text-transform:uppercase;
  background:rgba(0,0,0,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:.32rem .6rem; border-radius:100px;
  opacity:0; transform:translateY(6px); transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.cert--open:hover .cert__zoom,
.cert--open:focus-visible .cert__zoom{ opacity:1; transform:none; }
.cert:not(.cert--open) .cert__zoom{ display:none; }
.cert__body{ padding:.95rem 1rem 1.1rem; }
.cert__year{ font-family:var(--mono); font-size:.58rem; letter-spacing:.12em; color:var(--ink-faint); }
.cert__title{ font-family:var(--serif); font-size:1.05rem; line-height:1.25; margin:.25rem 0 .3rem; }
.cert__org{ font-size:.76rem; color:var(--ink-dim); line-height:1.45; }
.cert__detail{ font-size:.72rem; color:var(--ink-faint); margin-top:.45rem; line-height:1.5; }

/* ────────────────────────────────────────────── 10. contact & footer */
.section--contact{ padding-bottom:0; }
.contact{ border-top:1px solid var(--line-soft); padding-top:clamp(2.5rem,6vw,4rem); }
.contact__title{ font-family:var(--serif); font-size:clamp(2.8rem,9vw,7.5rem); line-height:.92; letter-spacing:-.03em; margin-bottom:clamp(2rem,5vw,3.5rem); }
.contact__title em{ color:var(--accent); }
.contact__mail{
  display:inline-block; font-family:var(--serif); font-size:clamp(1.4rem,4vw,2.9rem);
  border-bottom:1px solid var(--line); padding-bottom:.15em; margin-bottom:clamp(2.5rem,6vw,4.5rem);
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.contact__mail:hover{ color:var(--accent); border-color:var(--accent); }
.contact__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1.6rem; }
.contact__grid > div{ display:flex; flex-direction:column; gap:.35rem; }
.contact__grid span{ font-family:var(--mono); font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); }
.contact__grid a,
.contact__grid .is-plain{ font-size:.98rem; font-weight:300; width:fit-content; border-bottom:1px solid transparent; transition:border-color .35s; }
.contact__grid a:hover{ border-color:var(--ink); }

.footer{
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  margin-top:clamp(4rem,9vw,7rem); padding:1.6rem 0;
  border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);
}
.footer__top{ font:inherit; letter-spacing:.1em; text-transform:uppercase; transition:color .3s; }
.footer__top:hover{ color:var(--ink); }

/* ─────────────────────────────────────────────────── 11. case study */
.case{
  position:fixed; inset:0; z-index:850; background:var(--bg);
  visibility:hidden; opacity:0; transition:opacity .5s var(--ease), visibility .5s;
}
.case.is-open{ visibility:visible; opacity:1; }
.case__scroll{ position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
.case__inner{ max-width:var(--maxw); margin-inline:auto; padding:clamp(4.5rem,9vw,7rem) var(--pad) 5rem; }

.case__close{
  position:fixed; top:1.3rem; right:var(--pad); z-index:5;
  width:2.9rem; height:2.9rem; border-radius:50%; border:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:background .35s, transform .35s var(--ease);
}
.case__close:hover{ background:var(--ink); transform:rotate(90deg); }
.case__close span{ position:absolute; left:.85rem; right:.85rem; top:50%; height:1px; background:currentColor; transition:background .35s; }
.case__close:hover span{ background:var(--bg); }
.case__close span:first-child{ transform:rotate(45deg); }
.case__close span:last-child{ transform:rotate(-45deg); }

.case__eyebrow{ font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:1.2rem; }
.case__title{ font-family:var(--serif); font-size:clamp(2.6rem,8vw,6.5rem); line-height:.94; letter-spacing:-.03em; }
.case__sub{ font-family:var(--serif); font-style:italic; font-size:clamp(1.1rem,2.4vw,1.9rem); color:var(--ink-dim); margin:.6rem 0 2.6rem; }

.case__hero{ border-radius:var(--r); overflow:hidden; background:var(--bg-2); margin-bottom:clamp(2rem,5vw,3.5rem); }
.case__hero img{ width:100%; }

.case__meta{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1.4rem;
  padding:1.8rem 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  margin-bottom:clamp(2rem,5vw,3.5rem);
}
.case__meta div{ display:flex; flex-direction:column; gap:.35rem; }
.case__meta dt, .case__meta span:first-child{ font-family:var(--mono); font-size:.58rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); }
.case__meta strong{ font-weight:400; font-size:.92rem; }
.case__link{ color:var(--accent); font-size:.92rem; width:fit-content; border-bottom:1px solid currentColor; }

.case__text{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(1.5rem,5vw,4rem); margin-bottom:clamp(2.5rem,6vw,4.5rem); }
.case__intro{ font-family:var(--serif); font-size:clamp(1.3rem,2.6vw,2rem); line-height:1.3; margin:0; }
.case__body p{ color:var(--ink-dim); }
.case__body p:last-child{ margin-bottom:0; }

.case__gallery{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(.7rem,1.4vw,1.2rem); }
.case__shot{
  grid-column:span 3; border-radius:var(--r); overflow:hidden; background:var(--bg-2); padding:0; display:block;
  opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.case__shot.is-in{ opacity:1; transform:none; }
.case__shot:nth-child(6n+1){ grid-column:span 4; }
.case__shot:nth-child(6n+2){ grid-column:span 2; }
.case__shot:nth-child(6n+5){ grid-column:span 2; }
.case__shot:nth-child(6n+6){ grid-column:span 4; }
.case__shot img{ width:100%; transition:transform .9s var(--ease); }
.case__shot:hover img{ transform:scale(1.03); }

.case__next{
  margin-top:clamp(3.5rem,8vw,6rem); padding-top:2rem; border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; flex-wrap:wrap; text-align:left;
}
.case__next small{ font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:.5rem; }
.case__next b{ font-family:var(--serif); font-weight:400; font-size:clamp(1.8rem,5vw,3.4rem); line-height:1; transition:color .4s; }
.case__next:hover b{ color:var(--accent); }

/* ──────────────────────────────────────── 12. lightbox & responsive */
.lightbox{
  position:fixed; inset:0; z-index:950;
  background:color-mix(in srgb, var(--bg) 92%, #000);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  display:grid; place-items:center; padding:4rem clamp(1rem,7vw,6rem);
  visibility:hidden; opacity:0; transition:opacity .4s var(--ease), visibility .4s;
}
.lightbox.is-open{ visibility:visible; opacity:1; }
.lightbox__figure{ margin:0; max-width:100%; max-height:100%; }
.lightbox__figure img{ max-width:100%; max-height:82svh; width:auto; object-fit:contain; border-radius:8px; }
.lightbox__close{ position:absolute; top:1.3rem; right:1.5rem; font-size:1.2rem; width:2.6rem; height:2.6rem; border-radius:50%; border:1px solid var(--line); transition:background .3s, color .3s; }
.lightbox__close:hover{ background:var(--ink); color:var(--bg); }
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%); font-size:2rem; line-height:1;
  width:3.2rem; height:3.2rem; border-radius:50%; border:1px solid var(--line);
  transition:background .3s, color .3s, border-color .3s;
}
.lightbox__nav:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.lightbox__nav--prev{ left:clamp(.6rem,2vw,2rem); }
.lightbox__nav--next{ right:clamp(.6rem,2vw,2rem); }
.lightbox__count{ position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; color:var(--ink-dim); margin:0; }

@media (max-width:1180px){
  .card{ grid-column:span 6; }
  .card--wide,
  .card--full{ grid-column:span 12; }
  .card--half{ grid-column:span 6; }
  .card--full .card__media{ aspect-ratio:16/9; }
  .hero__meta{ grid-template-columns:1fr; align-items:start; gap:1.6rem; }
  .about{ grid-template-columns:1fr; }
  .path{ grid-template-columns:1fr; }
  .case__text{ grid-template-columns:1fr; }
}

@media (max-width:860px){
  .header__nav{ display:none; }
  .burger{ display:block; }
  .header__logotext{ display:none; }
  .hero__collage img:nth-child(5),
  .hero__collage img:nth-child(6){ display:none; }
  .hero__collage img{ width:26vw !important; }
  .hero__collage img.is-in{ opacity:.13; }
  .grid{ grid-template-columns:repeat(6,1fr); }
  .card, .card--wide, .card--half, .card--full{ grid-column:span 6; }
  .card--full .card__media{ aspect-ratio:4/3; }
  .case__gallery{ grid-template-columns:repeat(2,1fr); }
  .case__shot,
  .case__shot:nth-child(6n+1),.case__shot:nth-child(6n+2),
  .case__shot:nth-child(6n+5),.case__shot:nth-child(6n+6){ grid-column:span 2; }
  .certs{ grid-template-columns:1fr; }
  .footer{ justify-content:center; text-align:center; }
  .footer__mid{ width:100%; order:3; }
}

@media (max-width:520px){
  .stats{ grid-template-columns:1fr; }
  .lightbox__nav{ width:2.6rem; height:2.6rem; font-size:1.5rem; }
}