@font-face{font-family:"Archivo";src:url(/fonts/archivo-latin-wdth-normal.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(/fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2");font-weight:100 800;font-display:swap}
body{margin:0}img{max-width:100%}
:root{
  color-scheme: dark;
  --bg:#0B0D10;
  --bg-2:#0F1216;
  --raised:#13171C;
  --raised-2:#181D23;
  --line:#21262D;
  --line-strong:#323943;
  --text:#E9EBEE;
  --muted:#A3AAB4;
  --faint:#858D98;
  --accent:#D9925A;
  --accent-hi:#EDB283;
  --accent-ink:#1A0F07;
  --accent-glow:rgba(237,178,131,.85);
  --ok:#7CC29B;

  --f-display:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body:"Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --step-0:1.0625rem;
  --step-1:1.25rem;
  --step-2:clamp(1.5rem, 1.15rem + 1.3vw, 2.125rem);
  --step-3:clamp(2.125rem, 1.4rem + 2.8vw, 3.5rem);
  --step-4:clamp(3rem, 1.5rem + 6.2vw, 6rem);

  --ease-out:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(16px, 4vw, 40px);
  --maxw:1180px;
  --radius:14px;
  --pitch:24px; /* perfboard pitch, 2.54 mm */
}
html{scroll-behavior:smooth; scroll-padding-top:88px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  font-size:var(--step-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  scrollbar-color:var(--line-strong) var(--bg);
  overflow-x:clip;
}
::selection{background:var(--accent); color:var(--accent-ink)}
a{color:inherit; text-decoration-color:var(--line-strong); text-underline-offset:.22em; text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
button{font:inherit; color:inherit; cursor:pointer}
svg{flex:none}

/* language: FR by default */
.en{display:none}
body[data-lang="en"] .en{display:revert}
body[data-lang="en"] .fr{display:none}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}

/* ================= header ================= */
.top{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:20;
  background:rgba(11,13,16,.92);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background-color .3s ease;
}
.top.scrolled{border-bottom-color:var(--line); background:var(--bg)}
.top .wrap{display:flex; align-items:center; gap:28px; min-height:68px}
.mark{
  display:inline-flex; align-items:center; gap:10px; min-height:44px; text-decoration:none; white-space:nowrap;
  font-family:var(--f-display); font-weight:700; font-stretch:88%; font-size:1.0625rem; letter-spacing:-.005em; word-spacing:.08em;
}
.mark-chip{
  display:grid; place-items:center; width:30px; height:30px; border-radius:8px;
  border:1px solid var(--line-strong); background:var(--raised);
  font:600 .75rem/1 var(--f-mono); color:var(--accent-hi); letter-spacing:.02em;
  transition:border-color .2s ease, transform .2s var(--ease-out);
}
.mark:hover .mark-chip{border-color:var(--accent); transform:rotate(-6deg)}
.nav{position:relative; display:flex; gap:4px; margin-left:auto; font-size:.9375rem}
.nav a{position:relative; z-index:1; display:inline-flex; align-items:center; min-height:44px; color:var(--muted); text-decoration:none; padding:0 12px; border-radius:8px; transition:color .2s ease}
.nav a:hover, .nav a[aria-current="true"]{color:var(--text)}
.nav-marker{
  position:absolute; z-index:0; top:0; height:100%; left:0; width:0; border-radius:8px;
  background:var(--raised-2); border:1px solid var(--line);
  opacity:0; transition:transform .45s var(--ease-out), width .45s var(--ease-out), opacity .25s ease;
}
.nav-marker.on{opacity:1}
.lang{
  position:relative; display:grid; grid-template-columns:1fr 1fr; flex:none;
  border:1px solid var(--line-strong); border-radius:11px; padding:0; background:var(--bg-2);
}
.lang::before{
  content:""; position:absolute; top:3px; bottom:3px; left:3px; width:calc(50% - 3px); border-radius:7px;
  background:var(--text); transition:transform .35s var(--ease-out);
}
body[data-lang="en"] .lang::before{transform:translateX(100%)}
.lang button{
  position:relative; z-index:1; min-width:46px; min-height:44px; padding:0 12px; border:0; background:transparent;
  font:600 .75rem/1 var(--f-mono); letter-spacing:.06em; color:var(--faint); transition:color .25s ease;
}
.lang button[aria-pressed="true"]{color:var(--bg)}
.lang button:not([aria-pressed="true"]):hover{color:var(--text)}
@media (max-width: 760px){
  html{scroll-padding-top:128px}
  .top .wrap{flex-wrap:wrap; gap:0 12px; min-height:60px}
  .mark{min-height:60px}
  .lang{margin-left:auto}
  .nav{order:3; width:calc(100% + var(--gutter) * 2); margin:0 calc(var(--gutter) * -1); padding:0 var(--gutter) 8px; overflow-x:auto; scrollbar-width:none; gap:2px}
  .nav::-webkit-scrollbar{display:none}
  .nav a{display:inline-flex; align-items:center; min-height:44px; white-space:nowrap; padding:0 12px}
  .nav-marker{height:44px; margin-left:0}
}

/* ================= hero ================= */
.hero{position:relative; isolation:isolate; padding-block:clamp(56px, 9vw, 120px) clamp(64px, 9vw, 112px)}
.board{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  --mx:72%; --my:42%;
}
.board::before, .board::after{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle at center, var(--dot) 1.1px, transparent 1.6px);
  background-size:var(--pitch) var(--pitch);
  background-position:calc(50% + 12px) 12px;
}
.board::before{
  --dot:rgba(233,235,238,.13);
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 60% 40%, #000 20%, transparent 75%);
          mask-image:radial-gradient(ellipse 70% 80% at 60% 40%, #000 20%, transparent 75%);
}
.board::after{
  --dot:rgba(237,178,131,.95);
  -webkit-mask-image:radial-gradient(260px circle at var(--mx) var(--my), #000, transparent 72%);
          mask-image:radial-gradient(260px circle at var(--mx) var(--my), #000, transparent 72%);
  opacity:.85;
  transition:opacity .4s ease;
}
.hero-glow{
  position:absolute; z-index:-1; pointer-events:none; inset:0;
  background:radial-gradient(520px circle at var(--gx,78%) var(--gy,38%), rgba(217,146,90,.075), transparent 70%);
}
.hero .wrap{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(36px, 6vw, 96px); align-items:center}
.hero h1{
  font-family:var(--f-display); font-weight:760; font-stretch:78%;
  font-size:var(--step-4); line-height:.92; letter-spacing:-.022em; word-spacing:.1em;
  margin:0;
}
.hero h1 .line{display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em}
.hero h1 .line > span{display:block}
.role{
  margin:22px 0 0; font-family:var(--f-display); font-stretch:100%; font-weight:500;
  font-size:var(--step-1); color:var(--accent-hi); word-spacing:.05em;
}
.pitch{margin:18px 0 0; max-width:34em; color:var(--muted); font-size:1.1875rem; line-height:1.55}
.actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px; min-height:48px;
  font:600 .9375rem/1 var(--f-body); text-decoration:none;
  padding:0 20px; border-radius:10px; border:1px solid var(--line-strong);
  transition:background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.btn:active{transform:scale(.98)}
.btn svg{width:18px; height:18px}
.btn .arrow{transition:transform .25s var(--ease-out)}
.btn:hover .arrow{transform:translateY(3px)}
.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-hi); border-color:var(--accent-hi)}
.btn-ghost{background:rgba(19,23,28,.6)}
.btn-ghost:hover{border-color:var(--text)}
.facts{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); margin:48px 0 0; border-top:1px solid var(--line)}
.facts div{padding:16px 16px 0 0}
.facts div + div{padding-left:18px; border-left:1px solid var(--line)}
.facts dt{font:500 .75rem/1.4 var(--f-mono); letter-spacing:.09em; text-transform:uppercase; color:var(--faint)}
.facts dd{margin:6px 0 0; font-size:.9375rem; line-height:1.4}
.hero-links{display:flex; flex-wrap:wrap; gap:0 28px; margin:16px 0 0; padding:6px 0 0; list-style:none; border-top:1px solid var(--line)}
.hero-links a{display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--muted); text-decoration:none; font-size:.9375rem; transition:color .2s ease}
.hero-links a:hover{color:var(--text)}
.hero-links svg{width:18px; height:18px; color:var(--accent-hi)}
.hero-links .ext{width:14px; height:14px; color:var(--faint); transition:transform .25s var(--ease-out), color .2s ease}
.hero-links a:hover .ext{transform:translate(2px,-2px); color:var(--accent-hi)}

.portrait{position:relative; margin:0; justify-self:end; width:100%; max-width:440px}
.portrait-frame{
  position:relative; border-radius:18px; overflow:hidden;
  background:linear-gradient(#1b1d20, #1b1d20) padding-box, linear-gradient(160deg, rgba(237,178,131,.6), rgba(50,57,67,.9) 38%, rgba(33,38,45,1)) border-box;
  border:1px solid transparent;
}
.portrait img{display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; max-width:100%}
.portrait figcaption{
  display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 2px 0;
  font-size:.875rem; line-height:1.4; color:var(--faint);
}
.status{display:inline-flex; align-items:center; gap:8px; color:var(--muted)}
.status i{width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px rgba(124,194,155,.18)}

/* entrance */
@media (prefers-reduced-motion: no-preference){
  .hero h1 .line > span{animation:rise .9s var(--ease-out) both}
  .hero h1 .line:nth-child(2) > span{animation-delay:.08s}
  .hero .role{animation:fadeup .7s .22s var(--ease-out) both}
  .hero .pitch{animation:fadeup .7s .3s var(--ease-out) both}
  .hero .actions{animation:fadeup .7s .38s var(--ease-out) both}
  .hero .facts{animation:fadeup .7s .46s var(--ease-out) both}
  .hero .hero-links{animation:fadeup .7s .54s var(--ease-out) both}
  .portrait-frame{animation:wipe 1.1s .1s var(--ease-out) both}
  .portrait img{animation:develop 1.4s .1s var(--ease-out) both}
  .board::before{animation:boardon 1.6s .2s ease both}
}
@keyframes rise{from{transform:translateY(105%)} to{transform:none}}
@keyframes fadeup{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes wipe{from{clip-path:inset(0 0 100% 0 round 18px)} to{clip-path:inset(0 0 0 0 round 18px)}}
@keyframes develop{from{filter:brightness(.4) saturate(.6); transform:scale(1.06)} to{filter:none; transform:none}}
@keyframes boardon{from{opacity:0} to{opacity:1}}

@media (max-width: 900px){
  .hero .wrap{grid-template-columns:1fr}
  .portrait{order:-1; justify-self:stretch; max-width:none}
  .portrait img{aspect-ratio:1/1; object-position:50% 22%}
}
@media (max-width: 540px){
  .facts{grid-template-columns:1fr}
  .facts div, .facts div + div{padding:12px 0; border-left:0; border-bottom:1px solid var(--line)}
  .hero-links{gap:0 24px; margin-top:6px; padding-top:0; border-top:0}
}

/* ================= sections ================= */
.section{position:relative; padding-block:clamp(72px, 10vw, 136px); border-top:1px solid var(--line)}
.head{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(20px,5vw,64px); align-items:end; margin-bottom:clamp(36px,5vw,64px)}
.head h2{
  font-family:var(--f-display); font-weight:720; font-stretch:82%;
  font-size:var(--step-3); line-height:1; letter-spacing:-.02em; word-spacing:.08em; margin:0; text-wrap:balance;
}
.head p{margin:0; color:var(--muted); max-width:36em; font-size:1.0625rem}
@media (max-width: 900px){.head{grid-template-columns:1fr; gap:14px}}

/* ================= projects ================= */
.projects{display:grid; gap:clamp(20px, 2.4vw, 28px)}
.project{
  position:relative; border-radius:var(--radius); background:var(--bg-2);
  border:1px solid var(--line);
  --x:50%; --y:50%;
  transition:border-color .3s ease, background-color .3s ease;
}
.project::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none;
  background:radial-gradient(360px circle at var(--x) var(--y), var(--accent-glow), transparent 50%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .35s ease;
}
.project::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(600px circle at var(--x) var(--y), rgba(217,146,90,.045), transparent 45%);
  opacity:0; transition:opacity .35s ease;
}
@media (hover:hover) and (pointer:fine){
  .project:hover::before, .project:hover::after{opacity:1}
}
.project.open{background:var(--raised)}
.project-main{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:stretch;
}
.project:nth-child(even) .project-main{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.project:nth-child(even) .project-media{order:2}
.project-media{
  position:relative; margin:0; overflow:hidden; background:#08090b; align-self:stretch;
  min-height:clamp(300px, 33vw, 430px);
  border-radius:calc(var(--radius) - 1px) 0 0 calc(var(--radius) - 1px); border-right:1px solid var(--line);
  transition:border-radius .3s ease;
}
.project:nth-child(even) .project-media{border-radius:0 calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0; border-right:0; border-left:1px solid var(--line)}
.project.open .project-media{border-bottom-left-radius:0; border-bottom-right-radius:0}
.project-media > img, .project-media > svg{position:absolute; inset:0; width:100%; height:100%}
.project-media img{object-fit:cover; transition:transform .9s var(--ease-out)}
.project-media img.dim{filter:brightness(.8); object-fit:contain; object-position:center; padding:clamp(14px,2vw,24px); box-sizing:border-box}
.project-media:has(img.dim){background:var(--bg)}
.project-media img.dim + figcaption{top:10px; right:10px; bottom:auto; left:auto}
.project:hover .project-media img{transform:scale(1.03)}
.project-media > .diagram-v{display:none}
.project-media figcaption{
  position:absolute; left:10px; bottom:10px; padding:5px 9px; border-radius:6px;
  background:rgba(11,13,16,.82); border:1px solid var(--line);
  font-size:.8125rem; line-height:1.3; color:var(--muted);
}
.project-body{display:flex; flex-direction:column; padding:clamp(20px, 3vw, 40px) clamp(20px, 3vw, 40px) clamp(20px, 3vw, 32px)}
.when{font:500 .8125rem/1.4 var(--f-mono); color:var(--accent); font-variant-numeric:tabular-nums; letter-spacing:.01em}
.meta{margin:12px 0 0; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; font-size:.875rem; line-height:1.45; color:var(--faint)}
.project h3{
  margin:0; font-family:var(--f-display); font-weight:680; font-stretch:88%;
  font-size:var(--step-2); line-height:1.08; letter-spacing:-.015em; word-spacing:.06em; text-wrap:balance;
}
.summary{margin:14px 0 0; color:var(--muted); max-width:44ch}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin:20px 0 0; padding:0; list-style:none}
.tags li{
  font-weight:500; font-size:.8125rem; line-height:1; color:var(--text); padding:7px 10px; border-radius:6px;
  background:var(--raised-2); border:1px solid var(--line); white-space:nowrap;
}
.toggle{
  align-self:flex-start; display:inline-flex; align-items:center; gap:10px; min-height:44px;
  padding:0 16px 0 14px; margin-top:28px; border-radius:10px;
  border:1px solid var(--line-strong); background:transparent; font-weight:600; font-size:.9375rem;
  transition:border-color .2s ease, background-color .2s ease;
}
.toggle:hover{border-color:var(--accent); background:rgba(217,146,90,.06)}
.toggle .pm{position:relative; width:14px; height:14px}
.toggle .pm::before, .toggle .pm::after{
  content:""; position:absolute; left:0; top:6.25px; width:14px; height:1.5px; border-radius:1px; background:var(--accent-hi);
  transition:transform .35s var(--ease-out);
}
.toggle .pm::after{transform:rotate(90deg)}
.toggle[aria-expanded="true"] .pm::after{transform:rotate(0deg)}
.toggle .when-open{display:none}
.toggle[aria-expanded="true"] .when-open{display:inline}
.toggle[aria-expanded="true"] .when-closed{display:none}

.detail{display:grid; grid-template-rows:1fr}
.js .detail{grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease-out)}
.js .project.open .detail{grid-template-rows:1fr}
.detail-clip{min-height:0; overflow:hidden}
.detail-inner{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(24px,4vw,56px);
  margin:0; padding:clamp(24px,3vw,40px) clamp(20px,3vw,40px) clamp(20px,3vw,36px);
  border-top:1px solid var(--line);
}
.js .detail-inner{opacity:0; transform:translateY(-8px); transition:opacity .3s ease, transform .45s var(--ease-out)}
.js .project.open .detail-inner{opacity:1; transform:none; transition-delay:.08s}
.detail-text p{margin:0; max-width:62ch}
.detail-text ul{margin:20px 0 0; padding:0; list-style:none; display:grid; gap:12px; max-width:62ch}
.detail-text ul:first-child{margin-top:0}
.detail-text li{position:relative; padding-left:22px; color:var(--muted)}
.detail-text li::before{content:""; position:absolute; left:0; top:.8em; width:10px; height:1px; background:var(--accent)}
.detail-text li strong{color:var(--text); font-weight:600}
.spec{margin:0; display:grid; grid-template-columns:max-content minmax(0,1fr); border-top:1px solid var(--line); align-self:start}
.spec dt, .spec dd{padding:11px 0; border-bottom:1px solid var(--line); margin:0}
.spec dt{font:500 .75rem/1.9 var(--f-mono); letter-spacing:.09em; text-transform:uppercase; color:var(--faint); padding-right:20px}
.spec dd{font:400 .8125rem/1.6 var(--f-mono); color:var(--text)}
.detail-side{display:grid; gap:20px; align-content:start}
.gallery{grid-column:1/-1; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin:4px 0 0}
.gallery.g2{grid-template-columns:repeat(2, minmax(0,1fr))}
.gallery figure{margin:0}
.gallery img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; max-width:100%; border-radius:8px; background:var(--raised-2); border:1px solid var(--line)}
.gallery figcaption{margin-top:8px; font-size:.875rem; line-height:1.4; color:var(--faint)}
.more{display:inline-flex; align-items:center; min-height:44px; gap:6px; font-weight:600; color:var(--accent-hi); text-decoration:none; border-bottom:1px solid var(--line-strong); padding-bottom:2px; justify-self:start}
.more:hover{border-bottom-color:var(--accent-hi)}
.more svg{width:16px; height:16px; transition:transform .25s var(--ease-out)}
.more:hover svg{transform:translate(2px,-2px)}

/* locator diagram */
.diagram{width:100%; height:100%; display:block; background:
  radial-gradient(circle at center, rgba(233,235,238,.07) 1px, transparent 1.5px) 0 0 / 20px 20px, #090b0e}
.diagram .blk{fill:#12161B; stroke:#39414C; stroke-width:1.2}
.diagram .blk-tx{stroke:rgba(217,146,90,.8)}
.diagram .lbl{fill:#E9EBEE; font:600 18px var(--f-body)}
.diagram-v .lbl{font-size:15px}
.diagram-v .sub{font-size:12.5px}
.diagram .sub{fill:#A3AAB4; font:400 14px var(--f-body)}
.diagram .grp{fill:#D9925A; font:600 12px var(--f-mono); letter-spacing:.12em}
.diagram .wire{stroke:#5B6470; stroke-width:1.5; fill:none}
.diagram .cable{stroke:#D9925A; stroke-width:2.4; fill:none; stroke-linejoin:round}
.diagram .field{stroke:rgba(237,178,131,.55); stroke-width:1.3; fill:none; stroke-dasharray:3 5}
.diagram .pulse{stroke:#FFD9B8; stroke-width:3; fill:none; stroke-dasharray:18 2400; stroke-linecap:round; opacity:0}
@media (prefers-reduced-motion: no-preference){
  .project:hover .diagram .pulse{opacity:1; animation:flow 3.2s linear infinite}
}
@keyframes flow{from{stroke-dashoffset:0} to{stroke-dashoffset:-2418}}

@media (max-width: 900px){
  .project-main, .project:nth-child(even) .project-main{grid-template-columns:1fr}
  .project:nth-child(even) .project-media{order:0}
  .project-media, .project:nth-child(even) .project-media{min-height:0; aspect-ratio:16/10; border:0; border-bottom:1px solid var(--line); border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0}
  .project-body{padding:20px 18px 20px}
  .detail-inner{grid-template-columns:1fr; padding:22px 18px 18px}
}
@media (max-width: 600px){
  .project-media.dia{aspect-ratio:auto}
  .project-media.dia > .diagram-h{display:none}
  .project-media.dia > .diagram-v{display:block; position:static; height:auto}
}
@media (max-width: 560px){
  .gallery, .gallery.g2{grid-template-columns:1fr}
  .spec{grid-template-columns:1fr}
  .spec dt{border-bottom:0; padding-bottom:0}
  .spec dd{padding-top:2px}
}

/* scroll reveal: progressive, final state is the default */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .reveal{animation:reveal linear both; animation-timeline:view(); animation-range:entry 0% entry 45%}
  }
}
@keyframes reveal{from{opacity:.001; transform:translateY(36px) scale(.985)} to{opacity:1; transform:none}}

/* ================= path ================= */
.path{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(20px,5vw,64px)}
.path h3{font-family:var(--f-display); font-weight:660; font-stretch:90%; font-size:1.3125rem; word-spacing:.06em; color:var(--text); margin:0 0 22px}
.path ol{position:relative; list-style:none; margin:0; padding:0 0 0 28px}
.path ol::before{content:""; position:absolute; left:4px; top:10px; bottom:10px; width:1px; background:linear-gradient(var(--accent), var(--line-strong) 30%, var(--line))}
.path li{position:relative; padding:0 0 30px}
.path li:last-child{padding-bottom:0}
.path li::before{
  content:""; position:absolute; left:-28px; top:8px; width:9px; height:9px; border-radius:50%;
  background:var(--bg); border:1.5px solid var(--line-strong);
}
.path li.now::before{background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 4px rgba(217,146,90,.18)}
.path .row{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-top:6px}
.badge{font:600 .75rem/1 var(--f-body); letter-spacing:.01em; color:var(--accent-hi); border:1px solid rgba(217,146,90,.45); padding:5px 7px; border-radius:5px}
.path strong{display:block; margin-top:0; font-weight:600; font-size:1.0625rem; line-height:1.35}
.path .sub{display:block; color:var(--muted); font-size:.9375rem; line-height:1.5; margin-top:4px; max-width:46ch}
@media (max-width: 900px){.path{grid-template-columns:1fr}}

/* ================= skills ================= */
.skills{margin:0; border-top:1px solid var(--line)}
.skills div{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(20px,5vw,64px); padding:26px 0; border-bottom:1px solid var(--line); position:relative}
.skills div::before{content:""; position:absolute; left:0; top:-1px; height:1px; width:0; background:var(--accent); transition:width .6s var(--ease-out)}
@media (hover:hover){.skills div:hover::before{width:100%}}
.skills dt{font-family:var(--f-display); font-weight:660; font-stretch:90%; font-size:clamp(1.25rem, 1.05rem + .7vw, 1.625rem); line-height:1.2; word-spacing:.06em}
.skills dd{margin:0; color:var(--muted); font-size:1.0625rem; max-width:60ch}
.skills .tools{display:block; margin-top:10px; font:400 .8125rem/1.65 var(--f-mono); color:var(--text)}
@media (max-width: 700px){.skills div{grid-template-columns:1fr; gap:8px; padding:22px 0}}

.aside{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(20px,5vw,64px); margin-top:clamp(40px,5vw,64px)}
.aside h3{font-family:var(--f-display); font-weight:660; font-stretch:90%; font-size:1.3125rem; word-spacing:.06em; color:var(--text); margin:0 0 8px}
.kv{margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:28px}
.kv.single{grid-template-columns:1fr}
.kv li{display:flex; justify-content:space-between; align-items:baseline; gap:12px; border-bottom:1px solid var(--line); padding:12px 0}
.kv li > span:last-child{font-size:.9375rem; color:var(--muted); text-align:right}
@media (max-width: 760px){.aside{grid-template-columns:1fr}}
@media (max-width: 420px){.kv{grid-template-columns:1fr}}

/* ================= contact ================= */
.contact{position:relative; isolation:isolate; overflow:hidden; border-top:1px solid var(--line); padding-block:clamp(88px, 12vw, 160px) clamp(56px, 8vw, 88px)}
.contact .board::before{-webkit-mask-image:radial-gradient(ellipse 60% 70% at 20% 60%, #000 10%, transparent 70%); mask-image:radial-gradient(ellipse 60% 70% at 20% 60%, #000 10%, transparent 70%)}
.contact .board::after{opacity:0}
.contact:hover .board::after{opacity:.85}
.contact h2{
  font-family:var(--f-display); font-weight:760; font-stretch:78%;
  font-size:var(--step-4); line-height:.95; letter-spacing:-.022em; word-spacing:.1em; margin:0; max-width:13ch; text-wrap:balance;
}
.contact p{margin:22px 0 0; color:var(--muted); max-width:40em; font-size:1.125rem}
.mailrow{display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin-top:40px}
.mail{
  font-family:var(--f-display); font-weight:620; font-stretch:92%;
  font-size:clamp(1.375rem, 1rem + 1.8vw, 2.5rem); letter-spacing:-.01em; text-decoration:none;
  background:linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 2px no-repeat;
  display:inline-block; padding:6px 0 6px; overflow-wrap:anywhere; transition:color .2s ease;
}
.mail:hover{color:var(--accent-hi)}
.copy{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px;
  font-weight:600; font-size:.875rem; line-height:1; background:var(--bg-2); color:var(--muted);
  border:1px solid var(--line-strong); border-radius:10px; transition:color .2s ease, border-color .2s ease;
}
.copy:hover{color:var(--text); border-color:var(--text)}
.copy .ic{position:relative; width:16px; height:16px}
.copy .ic svg{position:absolute; inset:0; width:16px; height:16px; transition:transform .3s var(--ease-out), opacity .2s ease}
.copy .ic .check{opacity:0; transform:scale(.4); color:var(--ok)}
.copy.done .ic .check{opacity:1; transform:none}
.copy.done .ic .clip{opacity:0; transform:scale(.4)}
.copied{font-size:.875rem; line-height:1; color:var(--ok); min-height:1em}
.contact .elsewhere{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin-top:28px; font-size:1.0625rem}
.contact .elsewhere .more{font-size:1.0625rem}

footer{border-top:1px solid var(--line); padding-block:26px 34px}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; font-size:.875rem; line-height:1.5; color:var(--faint)}

/* ================= a11y utilities ================= */
.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}
.skip{
  position:fixed; z-index:50; top:10px; left:10px; padding:12px 16px; border-radius:10px;
  background:var(--accent); color:var(--accent-ink); font-weight:600; text-decoration:none;
  transform:translateY(-160%); transition:transform .2s var(--ease-out);
}
.skip:focus{transform:none}
main:focus{outline:none}
html:not(.js) .copy{display:none}

footer .legal-links{display:flex; flex-wrap:wrap; gap:4px 18px; margin:0; padding:0; list-style:none}
footer .legal-links a{display:inline-flex; align-items:center; min-height:44px; color:var(--muted); text-decoration:none}
footer .legal-links a:hover{color:var(--text); text-decoration:underline; text-decoration-color:var(--accent)}
footer .wrap{align-items:center}

/* ================= legal pages ================= */
.page{position:relative; isolation:isolate; padding-block:clamp(48px, 8vw, 104px) clamp(72px, 10vw, 128px)}
.legal{max-width:46rem}
.legal-back{margin:0 0 28px; font-size:.9375rem}
.legal-back a{display:inline-flex; align-items:center; min-height:44px; color:var(--muted); text-decoration:none}
.legal-back a:hover{color:var(--text)}
.legal h1{
  font-family:var(--f-display); font-weight:740; font-stretch:80%;
  font-size:var(--step-3); line-height:1; letter-spacing:-.02em; word-spacing:.08em; margin:0; text-wrap:balance;
}
.legal-updated{margin:14px 0 0; color:var(--faint); font-size:.9375rem}
.legal section{margin-top:clamp(40px, 5vw, 56px); padding-top:clamp(28px, 4vw, 36px); border-top:1px solid var(--line)}
.legal h2{font-family:var(--f-display); font-weight:680; font-stretch:92%; font-size:var(--step-2); line-height:1.15; letter-spacing:-.01em; margin:0 0 14px}
.legal h3{font-size:1.0625rem; font-weight:600; margin:26px 0 6px; color:var(--text)}
.legal p, .legal li{color:var(--muted); max-width:40em}
.legal p{margin:0 0 12px}
.legal ul{margin:0; padding-left:1.2em}
.legal li{margin:0 0 8px}
.legal li::marker{color:var(--accent)}
.legal a{color:var(--text); text-decoration:underline; text-decoration-color:var(--accent)}
.legal a:hover{color:var(--accent-hi)}
.legal strong{color:var(--text); font-weight:600}
.legal code{font-family:var(--f-mono); font-size:.875em; padding:1px 6px; border-radius:6px; background:var(--raised); border:1px solid var(--line); color:var(--text)}
.legal-summary{background:var(--raised); border:1px solid var(--line) !important; border-radius:var(--radius); padding:clamp(20px, 3vw, 28px) !important}
.legal-summary h2{font-size:var(--step-1)}
.legal-summary li{color:var(--text)}
.legal-kv{display:grid; grid-template-columns:minmax(0, 13rem) minmax(0, 1fr); gap:10px 24px; margin:18px 0 0}
.legal-kv dt{color:var(--faint); font-size:.9375rem}
.legal-kv dd{margin:0; color:var(--text); overflow-wrap:anywhere}
@media (max-width: 560px){.legal-kv{grid-template-columns:1fr; gap:2px}.legal-kv dd{margin-bottom:12px}}

/* ================= 404 ================= */
.notfound{position:relative; isolation:isolate; overflow:hidden; min-height:calc(100svh - 68px - 110px); display:grid; align-content:center; padding-block:72px}
.notfound .wrap{width:100%; box-sizing:border-box}
.notfound .board::before{-webkit-mask-image:radial-gradient(ellipse 60% 70% at 30% 50%, #000 10%, transparent 70%); mask-image:radial-gradient(ellipse 60% 70% at 30% 50%, #000 10%, transparent 70%)}
.nf-code{margin:0; font:500 .9375rem/1 var(--f-mono); color:var(--accent-hi); letter-spacing:.08em}
.notfound h1{
  font-family:var(--f-display); font-weight:760; font-stretch:78%;
  font-size:var(--step-4); line-height:.95; letter-spacing:-.022em; word-spacing:.1em; margin:18px 0 0; max-width:12ch; text-wrap:balance;
}
.nf-text{margin:22px 0 0; color:var(--muted); max-width:34em; font-size:1.125rem}