/* Content sections: about, projects, process, stack and contact. */
/* ---------- sections ---------- */
section.block{padding-block:clamp(80px,12vw,160px)}
section.block.flush{padding-top:0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(36px,6vw,72px)}
.sec-head h2{margin:8px 0 0;font-size:var(--t-xl)}

/* about */
.about-lead{margin:0;max-width:34ch;font-size:clamp(1.5rem,3.1vw,2.6rem);line-height:1.18;font-weight:500;letter-spacing:-.015em;text-wrap:pretty}
.about-lead em{font-style:normal;color:var(--accent)}

/* projects */
.projects{border-top:1px solid var(--line)}
.proj{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(16px,3vw,48px);align-items:start;
  padding-block:clamp(26px,3.6vw,44px);border-bottom:1px solid var(--line);isolation:isolate}
.proj::before{content:"";position:absolute;inset:0 calc(var(--gutter) * -1);z-index:-1;background:var(--ink-2);
  transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease)}
a.proj{cursor:pointer}
.proj:hover::before,.proj:focus-visible::before,.proj:focus-within::before{transform:scaleY(1)}
.proj-body{min-width:0}
.proj h3{margin:0;font-size:clamp(1.7rem,4.8vw,4rem);transition:transform .55s var(--ease),color .3s}
.proj:hover h3{transform:translateX(12px);color:var(--accent)}
.proj p{margin:14px 0 0;max-width:62ch;color:var(--mute);font-size:var(--t-md)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0}
.tags li{list-style:none;font-family:var(--f-mono);font-size:.7rem;border:1px solid var(--line);border-radius:999px;padding:5px 10px;color:var(--paper)}
.proj-go{width:56px;height:56px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:background .35s,border-color .35s,transform .55s var(--ease)}
.proj:hover .proj-go{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:rotate(-45deg)}

/* process */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.step{background:var(--ink);border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(22px,2.6vw,36px);display:flex;flex-direction:column;gap:14px;transition:background .4s;min-width:0}
.step:hover{background:var(--ink-2)}
.step .n{font-family:var(--f-display);font-variation-settings:"wdth" 125;font-weight:800;font-size:3.4rem;line-height:1;color:transparent;-webkit-text-stroke:1px var(--accent)}
.step h3{margin:clamp(28px,4vw,56px) 0 0;font-family:var(--f-display);font-variation-settings:"wdth" 115;font-weight:700;text-transform:uppercase;font-size:clamp(1.1rem,1.8vw,1.35rem);letter-spacing:-.01em;overflow-wrap:anywhere}
.step p{margin:0;color:var(--mute);font-size:var(--t-sm)}

/* stack */
.stack{display:grid;border-top:1px solid var(--line)}
.stack-row{display:grid;grid-template-columns:14rem minmax(0,1fr);gap:24px;padding-block:22px;border-bottom:1px solid var(--line);align-items:baseline}
.stack-row ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 0}
.stack-row li{font-family:var(--f-display);font-variation-settings:"wdth" 110;font-weight:600;font-size:clamp(1.15rem,2.4vw,1.9rem);
  letter-spacing:-.01em;transition:color .25s}
.stack-row li:not(:last-child)::after{content:"/";color:var(--line);margin-inline:.45em}
.stack-row li:hover{color:var(--accent)}

/* contact */
.contact{padding-block:clamp(90px,14vw,190px) clamp(80px,10vw,140px);border-top:1px solid var(--line);position:relative;overflow:hidden}
.contact h2{margin:16px 0 0;font-size:clamp(1.75rem,7.4vw,9rem)}
.contact h2 .o{color:transparent;-webkit-text-stroke:1.5px var(--paper)}
.mail{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:clamp(36px,5vw,64px)}
.mail-addr{font-size:clamp(1.25rem,3vw,2.2rem);font-weight:500;letter-spacing:-.01em;user-select:all;overflow-wrap:anywhere;min-width:0}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.14em;
  padding:14px 20px;border-radius:999px;border:1px solid var(--line);transition:background .3s,color .3s,border-color .3s,transform .35s var(--ease)}
.btn:hover{border-color:var(--paper)}
.btn.solid{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.solid:hover{background:var(--paper);border-color:var(--paper)}
.socials{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.mail[hidden] + .socials{margin-top:clamp(36px,5vw,64px)}

/* responsive */
@media (max-width:760px){
  .steps{grid-template-columns:1fr}
  .step h3{margin-top:8px}
  .stack-row{grid-template-columns:1fr;gap:10px}
}
@media (max-width:620px){
  .proj-go{width:44px;height:44px}
}