/* ───────── hero ───────── */
.hero-wrap{position:relative;height:calc(max(100svh,620px) + 80vh)}
.hero{position:sticky;top:0;height:100vh;height:100svh;min-height:620px;overflow:hidden;isolation:isolate}
.grid-lines{position:absolute;inset:0;z-index:0;pointer-events:none;background:repeating-linear-gradient(to right,var(--line) 0,var(--line) 1px,transparent 1px,transparent calc(100%/6));border-right:1px solid var(--line);opacity:.7}
.circle-wrap{position:absolute;z-index:1;left:50%;top:48%;width:min(62svh,44vw);aspect-ratio:1;transform:translate(-50%,-50%);will-change:transform}
.circle{width:100%;height:100%;border-radius:50%;background:var(--red)}
.name{position:absolute;inset:0;z-index:2;margin:0;padding:6svh var(--pad) 0;display:flex;flex-direction:column;justify-content:center;font-family:var(--f-display);font-weight:400;font-size:min(28vw,42svh);line-height:.86;text-transform:uppercase;letter-spacing:-.005em;user-select:none}
.name .line{display:block;white-space:nowrap}
.name .l1{align-self:flex-start}
.name .l2{align-self:flex-end}
.name .ci{will-change:transform;transition:color .25s}
.name .ci.hot{color:transparent;-webkit-text-stroke:2px var(--ink)}
.portrait-wrap{position:absolute;z-index:3;left:50%;bottom:0;height:min(88svh,64vw);aspect-ratio:400/560;transform:translateX(-50%);pointer-events:none}
.portrait{width:100%;height:100%;position:relative}
.portrait svg,.portrait img{position:absolute;inset:0;width:100%;height:100%}
.portrait img{object-fit:contain;object-position:bottom;filter:grayscale(1) contrast(1.08)}
.hero-copy{position:absolute;z-index:5;left:var(--pad);bottom:15svh;max-width:min(26.25rem,38vw)}
.hero-copy .hello{font-family:var(--f-serif);font-style:italic;font-size:clamp(1.4rem,2.4vw,2.25rem);line-height:1;margin:0 0 .6rem}
.hero-copy h2{margin:0 0 1.25rem;font-size:clamp(1.25rem,2.2vw,2rem);font-weight:600;line-height:1.1;letter-spacing:-.02em}
.corner{position:absolute;z-index:5;bottom:calc(env(safe-area-inset-bottom,0px) + 1.4rem);color:var(--mute)}
.corner.l{left:var(--pad)}
.corner.r{right:var(--pad)}
.cross{color:var(--ink);display:grid;place-items:center;width:2.125rem;height:2.5rem;bottom:calc(env(safe-area-inset-bottom,0px) + 1rem)}
.cross svg{width:15px;height:28px;display:block;transition:transform .5s var(--ease)}
.cross:hover svg{transform:translateY(4px)}

/* black blocks slide over the red hero like a curtain */
.curtain{position:relative;z-index:2;background:var(--bg);border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;margin-top:-44px}

/* ───────── marquee ───────── */
.marquee{border-block:1px solid var(--line);overflow:hidden;padding:clamp(.9rem,2vw,1.75rem) 0}
.track{display:flex;width:max-content;animation:slide 38s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.track span{font-family:var(--f-serif);font-style:italic;font-size:clamp(2.5rem,7vw,6.5rem);line-height:1.1;white-space:nowrap;padding:0 .3em}
.track i{align-self:center;width:.28em;height:.28em;min-width:12px;min-height:12px;background:var(--red);transform:rotate(45deg);font-size:clamp(2.5rem,7vw,6.5rem)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ───────── about ───────── */
.about-sec{padding-bottom:clamp(1.9rem,4vw,3.75rem)}
.about-card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-xl);padding:clamp(1.75rem,4vw,4rem)}
.about-card .sec-head{margin-bottom:clamp(1.75rem,4vw,3.5rem)}
.statement{font-size:clamp(1.75rem,4.6vw,4.75rem);line-height:1.08;letter-spacing:-.03em;font-weight:500;margin:0;max-width:20em}
.statement .w{opacity:.16;transition:opacity .35s}
.statement .w.on{opacity:1}
.statement .w.hl.on{color:var(--red)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(2.5rem,6vw,5.6rem);border-top:1px solid var(--line)}
.fact{padding:1.4rem 1.5rem 0 0}
.fact + .fact{padding-left:1.5rem;border-left:1px solid var(--line)}
.fact b{display:block;font-family:var(--f-display);font-weight:400;font-size:clamp(3.4rem,8vw,8rem);line-height:1}
.fact span{color:var(--mute);display:block;max-width:22ch;margin-top:.5rem}
.fact.status-card{padding:1.5rem;border-left:0}
.fact.status-card span{color:inherit;max-width:none;margin-top:0}
.fact.status-card b{font-size:clamp(1.9rem,3.2vw,3.25rem)}

/* ───────── what I do ───────── */
.what-sec{padding-top:clamp(1.9rem,4vw,3.75rem)}
.wbento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(10rem,auto);gap:14px}
.wt{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg-2);padding:1.4rem;display:flex;flex-direction:column;justify-content:space-between;min-height:13.75rem;transition:transform .5s var(--ease),border-color .3s}
.wt:hover{transform:translateY(-5px);border-color:var(--ink)}
.wt .mono{color:var(--mute);display:flex;justify-content:space-between;position:relative;z-index:2}
.wt .info{position:relative;z-index:2}
.wt strong{display:block;font-family:var(--f-display);font-weight:400;text-transform:uppercase;font-size:clamp(2.1rem,4.4vw,4.25rem);line-height:.95}
.wt p{margin:.5rem 0 0;color:var(--mute);max-width:30ch}
.wt1{grid-column:span 7;grid-row:span 2;background:var(--bg-inverse);color:var(--ink-inverse);border-color:var(--bg-inverse)}
.wt1 .mono,.wt1 p{color:var(--ink-inverse);opacity:.65}
.wt2,.wt3{grid-column:span 5}
.wt4{grid-column:span 12;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;gap:.6rem 1.9rem;align-items:end;min-height:12.5rem}
.wt4 .mono{grid-column:1/-1}
.wart{position:absolute;right:1.6rem;top:3.5rem;pointer-events:none}
.wt1 .wart{right:1.9rem;top:3.25rem;display:flex;flex-direction:column;align-items:flex-end;gap:1.1rem}
.aa{font-family:var(--f-display);font-size:clamp(8rem,17vw,17.5rem);line-height:.8}
.aa::after{content:".";color:var(--red)}
.sw{display:flex;gap:.5rem}
.sw i{width:1.75rem;height:1.75rem;border-radius:50%;border:1px solid rgba(128,128,128,.45)}
.sw i:nth-child(1){background:#E5251B}.sw i:nth-child(2){background:#121212}.sw i:nth-child(3){background:#8A877F}.sw i:nth-child(4){background:#EFECE4}
.wart.code{width:46%;display:flex;flex-direction:column;gap:9px}
.wart.code u{display:block;height:10px;border-radius:5px;background:var(--line);text-decoration:none}
.wart.code u:nth-child(1){width:62%}.wart.code u:nth-child(2){width:84%;margin-left:14px}
.wart.code u:nth-child(3){width:46%;margin-left:14px;background:var(--red)}
.wart.code u:nth-child(4){width:70%;margin-left:14px}.wart.code u:nth-child(5){width:38%}
.wart.ease{width:160px;height:100px}
.wart.ease svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wart.ease path{fill:none;stroke:var(--mute);stroke-width:1.5;stroke-dasharray:4 5}
.wart.ease i{position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--red);offset-path:path("M8 92 C 60 92, 60 8, 152 8");animation:travel 2.6s cubic-bezier(.65,0,.35,1) infinite alternate}
@keyframes travel{from{offset-distance:0%}to{offset-distance:100%}}
.wart.table{position:static;display:grid;grid-template-columns:1fr 2fr 1fr;gap:8px;align-self:end}
.wart.table u{display:block;height:12px;border-radius:6px;background:var(--line);text-decoration:none}
.wart.table u.h{background:var(--mute);height:10px}
.wart.table u.r{background:var(--red)}

/* ───────── work bento ───────── */
.work{padding-top:clamp(4rem,8vw,6.9rem)}
.bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(10.6rem,auto);gap:14px}
.t1{grid-column:span 7;grid-row:span 2}
.t2{grid-column:span 5}
.t3{grid-column:span 5}
.t4,.t5,.t6{grid-column:span 4}
.art{position:absolute;pointer-events:none;z-index:1}
.t1 .art{right:1.4rem;top:4rem;width:min(56%,27rem);aspect-ratio:4/3;border:1px solid var(--line);border-radius:14px;background:var(--bg);padding:12px;display:grid;grid-template-columns:34% 1fr;gap:10px;transform:rotate(2.5deg);transition:transform .6s var(--ease)}
.t1:hover .art{transform:rotate(0) translateY(-6px)}
.art .side{display:flex;flex-direction:column;gap:7px}
.art .side u,.art .main u{display:block;height:9px;border-radius:5px;background:var(--line);text-decoration:none}
.art .side u:first-child{background:var(--red);width:60%}
.art .main{display:grid;grid-template-rows:auto 1fr;gap:10px}
.art .main > u{width:55%}
.art .bars{display:flex;align-items:flex-end;gap:7px;height:100%;border:1px solid var(--line);border-radius:8px;padding:8px}
.art .bars u{flex:1;height:auto;border-radius:3px;background:var(--ink);opacity:.8}
.art .bars u:nth-child(1){height:38%}.art .bars u:nth-child(2){height:62%}.art .bars u:nth-child(3){height:85%;background:var(--red);opacity:1}.art .bars u:nth-child(4){height:48%}.art .bars u:nth-child(5){height:70%}
.t2 .art{inset:0;background-image:radial-gradient(var(--line) 1.4px,transparent 1.6px);background-size:16px 16px;-webkit-mask-image:linear-gradient(90deg,transparent 20%,#000);mask-image:linear-gradient(90deg,transparent 20%,#000)}
.pin{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--red)}
.pin::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--red);animation:ping 2.4s infinite}
.pin:nth-child(2)::after{animation-delay:.8s}.pin:nth-child(3)::after{animation-delay:1.6s}
.pin:nth-child(1){left:58%;top:30%}.pin:nth-child(2){left:78%;top:52%}.pin:nth-child(3){left:68%;top:74%}
@keyframes ping{0%{transform:scale(.4);opacity:1}100%{transform:scale(2.2);opacity:0}}
.t3 .art{right:-4%;top:6%;font-family:var(--f-display);font-size:clamp(5.6rem,12vw,11.9rem);line-height:.9;color:#EFECE4;transform:rotate(-7deg);transition:transform .6s var(--ease)}
.t3:hover .art{transform:rotate(-2deg) scale(1.04)}
.t4 .art.hp{right:1.4rem;top:3.4rem;width:46%;display:grid;gap:.5rem;color:var(--mute)}
.t4 .hp i{display:block;height:14px;border:1px solid var(--line-strong);border-radius:99px;overflow:hidden;font-style:normal}
.t4 .hp b{display:block;width:30%;height:100%;background:var(--red);transition:width .8s var(--ease)}
.t4:hover .hp b{width:72%}
.t5 .art{right:1.4rem;top:2.9rem;font-family:var(--f-display);font-size:clamp(5.6rem,10vw,10.6rem);line-height:.85;color:transparent;-webkit-text-stroke:1.5px var(--ink);transition:color .4s}
.t5:hover .art{color:var(--ink)}
.t6 h3{font-size:clamp(1.9rem,3.4vw,3.25rem)}

/* ───────── tools (cream) ───────── */
.tools{position:relative;z-index:2;background:var(--bg);color:var(--ink);border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;margin-top:-44px;padding:clamp(5rem,11vw,9.4rem) var(--pad) clamp(5rem,10vw,8.75rem)}
.tools .big{font-family:var(--f-display);font-weight:400;text-transform:uppercase;font-size:clamp(3.5rem,10vw,10.6rem);line-height:.88;margin:0 0 clamp(2.25rem,5vw,4.4rem);letter-spacing:-.005em}
.tools .big em{font-family:var(--f-serif);font-style:italic;text-transform:none;color:var(--red);letter-spacing:0}
.tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tool-card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-md);padding:1.25rem;min-height:11.9rem;display:flex;flex-direction:column;justify-content:space-between;transition:transform .4s var(--ease)}
.tool-card:nth-child(3n+2){border-radius:var(--radius-md) var(--radius-md) var(--radius-md) 80px}
.tool-card:hover{transform:translateY(-6px)}
.tool-card .mono{color:var(--mute);display:flex;justify-content:space-between;align-items:center}
.tool-card .dot{width:9px;height:9px;border-radius:50%;background:var(--ink);transition:background .3s}
.tool-card:hover .dot{background:var(--red)}
.tool-card strong{font-size:clamp(1.4rem,2.2vw,2rem);font-weight:600;letter-spacing:-.03em;line-height:1.05}
.tool-card.is-accent{background:var(--red);border-color:var(--red);color:#fff}
.tool-card.is-accent .mono{color:rgba(255,255,255,.8)}
.tool-card.is-accent .dot{background:#fff}

/* ───────── contact ───────── */
.contact{padding:clamp(5.6rem,13vw,11.9rem) var(--pad) clamp(4.4rem,9vw,8.1rem);overflow:hidden}
.contact h2{font-family:var(--f-display);font-weight:400;text-transform:uppercase;font-size:clamp(3rem,7.6vw,8.1rem);line-height:.88;margin:0}
.contact-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(1.9rem,6vw,6.25rem);align-items:end}
.form{display:grid;gap:1.4rem}
.form-foot{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.status{margin:0;color:var(--mute);font-size:.9375rem;max-width:34ch}
.status.err{color:var(--error)}
.contact-row{display:flex;justify-content:space-between;gap:1.25rem;flex-wrap:wrap;margin-top:clamp(3.1rem,7vw,6.25rem);border-top:1px solid var(--line);padding-top:1.4rem;color:var(--mute)}
.links{display:flex;gap:1.4rem}
.links a:hover{color:var(--ink)}

@media (max-width:900px){
  /* hero: the circle keeps its size on phones, the black blocks just slide over it */
  .hero-wrap{height:calc(max(100svh,620px) + 45vh)}
  .name{font-size:min(36vw,34svh)}
  .portrait-wrap{height:min(78svh,120vw)}
  .circle-wrap{width:min(60vw,46svh)}
  .hero-copy{max-width:60vw;bottom:13svh}

  /* about */
  .facts{grid-template-columns:minmax(0,1fr)}
  .fact{min-width:0}
  .fact + .fact{padding-left:0;border-left:0;border-top:1px solid var(--line);margin-top:1.4rem}
  .fact.status-card{padding:1.5rem;border-top:0;margin:1.6rem 0 0;min-height:11rem}
  .about-card{border-radius:var(--radius-lg)}

  /* what I do: art sits in the card flow, so it never runs under the text */
  .wbento,.bento{grid-template-columns:minmax(0,1fr)}
  .wt,.tile{min-width:0}
  .wt1,.wt2,.wt3,.wt4,.t1,.t2,.t3,.t4,.t5,.t6{grid-column:auto;grid-row:auto;min-height:15rem}
  .wt .wart,.wt1 .wart{position:relative;right:auto;top:auto;align-self:flex-end;margin:1.25rem 0}
  .wt1 .wart{align-items:flex-end}
  .aa{font-size:clamp(6.5rem,34vw,9rem)}
  .wart.code{width:56%}
  .wart.ease{margin-right:.5rem}
  .wt4{grid-template-columns:1fr}
  .wart.table{display:none}

  /* work tiles: same idea, art in the flow, text keeps clear of the arrow button */
  .tile .art{position:relative;inset:auto;right:auto;top:auto;width:auto;margin:1.1rem 0;align-self:flex-end}
  .tile .info{padding-right:3.6rem}
  .t1 .art{width:min(82%,17rem);aspect-ratio:4/3;align-self:center;transform:rotate(2.5deg)}
  .t2 .art{align-self:stretch;height:7rem;margin:1.1rem 0;border-radius:14px;-webkit-mask-image:radial-gradient(ellipse at 65% 50%,#000 35%,transparent 80%);mask-image:radial-gradient(ellipse at 65% 50%,#000 35%,transparent 80%)}
  .t3 .art{font-size:5.4rem;line-height:.85;margin:.9rem .4rem .6rem 0;transform:rotate(-6deg)}
  .t4 .art.hp{width:100%;right:auto;top:auto;align-self:stretch}
  .t5 .art{font-size:6rem;line-height:.85;margin:.6rem .4rem .8rem 0}
  .tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tools,.curtain{border-radius:28px 28px 0 0;margin-top:-28px}
  .contact-grid{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .track,.pin::after{animation:none}
  .wart.ease i{animation:none;offset-distance:100%}
}