/* ═══════════════════════════════════════════════════════════════
   Home page. Loaded after styles.css (which the posts share).

   CRAP, applied (Williams, The Non-Designer's Design Book):
   CONTRAST    one dominant element per screen; the name is ~7x body
               size; one blue accent for action, marker red only for
               the two hand-written notes; dark bands for the flagship
               project and the contact block.
   REPETITION  one section header (number, kicker, title, aside), one
               card anatomy (media, meta line, title, text, figures),
               one pill, one link style, every screenshot in the same
               browser frame.
   ALIGNMENT   one 1240px column; every block snaps to its edges or to
               a 7/5 split; figures pinned to the foot of their cards
               so rows line up; timeline years in one ruled column.
   PROXIMITY   writing together, projects grouped by role, the jobs
               filed under the chapter they belong to; tight inside a
               unit, wide between units.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --marker:#D6353B;
  --marker-lt:#FF8A80;
  --gut:24px;
  --r-lg:22px;
  --sec-y:clamp(3.6rem,6.6vw,5.9rem);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

.home{background:var(--bg)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

/* reveal: visible by default, animated only when JS is present */
html.js .rv{opacity:0;transform:translateY(18px)}
html.js .rv.in{opacity:1;transform:none;transition:opacity .75s var(--ease-out) var(--d,0ms),transform .75s var(--ease-out) var(--d,0ms)}
/* the hero is painted on the first frame (first impressions form in ~50 ms,
   Lindgaard et al. 2006); it only rises into place, it never fades in */
html.js .hero .rv{opacity:1;transform:none;animation:rise .8s var(--ease-out) both;animation-delay:var(--d,0ms)}
@keyframes rise{from{transform:translateY(14px)}to{transform:none}}

/* ── nav: "you are here" ────────────────────────────────── */

/* ── shared bits ────────────────────────────────────────── */
.mline{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem 0;font-size:.84rem;color:var(--muted);line-height:1.4}
.mline span + span::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--line-2);margin:0 .6rem;vertical-align:middle;position:relative;top:-1px}
.mline__lead{color:var(--accent);font-weight:500}

.link{display:inline-flex;align-items:center;gap:.4rem;font-weight:500;font-size:.95rem;color:var(--ink);padding-bottom:2px;border-bottom:1px solid var(--line-2);transition:color .2s,border-color .2s,gap .25s var(--ease)}
.link:hover{color:var(--accent);border-color:var(--accent);gap:.6rem}
.link--quiet{color:var(--muted);border-bottom-color:transparent}
.link--quiet:hover{color:var(--ink);border-color:var(--ink)}

.hand{font-family:'Caveat','Segoe Print',cursive;font-weight:600;color:var(--marker);line-height:1.05;letter-spacing:.005em}
.hand-arrow{fill:none;stroke:var(--marker);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ═══ HERO ═══════════════════════════════════════════════ */

.hero{padding:clamp(7rem,15vh,9.5rem) 0 clamp(2.6rem,5vw,3.6rem)}
.hero::before{background:radial-gradient(42% 52% at 82% 22%,rgba(29,78,216,.10),transparent 72%)}
.hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}

.pill{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .95rem .42rem .75rem;border:1px solid var(--line);background:var(--surface);border-radius:999px;font-size:.85rem;color:var(--muted);box-shadow:var(--sh-1)}
.pill .ico{color:var(--accent)}

.hero__name{margin-top:1.4rem;font-size:clamp(3.5rem,8.7vw,7.9rem);font-weight:700;letter-spacing:-.058em;line-height:.88;color:var(--ink)}
.hero__name span{display:block}
.hero__name span + span{margin-left:.04em}

@media (max-width:640px){.br-wide{display:none}}
.hero__line{margin-top:1.35rem;font-family:var(--h);font-weight:500;font-size:clamp(1.45rem,2.7vw,2.3rem);letter-spacing:-.032em;line-height:1.15;color:var(--ink-2)}
.mk{position:relative;display:inline-block;color:var(--ink);white-space:nowrap}
.mk__u{position:absolute;left:-3%;bottom:-.34em;width:106%;height:.6em;overflow:visible;pointer-events:none}
.mk__u path{fill:none;stroke:var(--marker);stroke-width:3.2;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.mk__u path + path{stroke-width:2.2;opacity:.75}
html.js .mk__u path{stroke-dashoffset:1}
html.js.ready .mk__u path{animation:draw .9s .75s var(--ease-out) forwards}
html.js.ready .mk__u path + path{animation-delay:1.15s}
@keyframes draw{to{stroke-dashoffset:0}}

.hero__lede{margin-top:1.5rem;max-width:34em;font-size:clamp(1.02rem,1.25vw,1.14rem);line-height:1.7;color:var(--muted)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}

.hero__pic{position:relative;justify-self:end;width:100%;max-width:450px;margin:0}
.hero__frame{position:relative;aspect-ratio:3/4;border-radius:30px;overflow:hidden;background:var(--surface-2);box-shadow:0 50px 90px -45px rgba(11,13,18,.55),0 0 0 1px rgba(11,13,18,.06)}
.hero__frame img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.hero__frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);pointer-events:none}

.avail{position:absolute;left:-1.6rem;bottom:2.2rem;display:inline-flex;align-items:center;gap:.6rem;padding:.72rem 1.1rem;border-radius:999px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);box-shadow:var(--sh-2);font-size:.9rem;font-weight:500;color:var(--ink);white-space:nowrap}
.avail__dot{position:relative;width:9px;height:9px;border-radius:50%;background:#16A34A;flex:none}
.avail__dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(22,163,74,.35);animation:ping 2.4s var(--ease-out) infinite}
@keyframes ping{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.8);opacity:0}}

/* summary bar: four facts as one unit */
.facts{margin-top:clamp(2.6rem,5vw,3.6rem);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden}
.fact{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:.95rem;align-content:start;align-items:start;padding:1.2rem 1.35rem}
.fact + .fact{border-left:1px solid var(--line)}
.fact__i{grid-row:1/4;align-self:start;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent)}
.fact__k{font-size:.8rem;color:var(--muted)}
.fact__v{font-family:var(--h);font-weight:600;font-size:1rem;letter-spacing:-.015em;line-height:1.25;color:var(--ink)}
.fact__s{font-size:.84rem;color:var(--muted)}

/* ═══ SECTION HEADER (the one repeated pattern) ═══════════ */

.sec{padding:var(--sec-y) 0}
.shead{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:1.4rem clamp(2rem,5vw,4.5rem);align-items:end;margin-bottom:clamp(2rem,4vw,3.2rem)}
.shead__k{display:flex;align-items:center;gap:.6rem;font-size:.95rem;font-weight:500;color:var(--accent)}
.shead__k--solo{margin-bottom:1.2rem}
.shead__n{display:inline-grid;place-items:center;height:1.6rem;padding:0 .55rem;border-radius:999px;background:var(--accent);color:#fff;font-size:.74rem;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.shead__t{margin-top:.9rem;font-size:clamp(2.3rem,4.9vw,4rem);font-weight:700;letter-spacing:-.048em;line-height:.98;color:var(--ink)}
.shead__side{display:grid;gap:1rem;justify-items:start;padding-bottom:.4rem}
.shead__p{color:var(--muted);font-size:1.03rem;line-height:1.65;max-width:42ch}

/* ═══ 01 WRITING ═════════════════════════════════════════ */

.feat,.post,.proj,.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .3s}
.feat:hover,.post:hover,.proj:hover,.tile:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--line-2)}

.feat{position:relative;overflow:hidden}
.feat__img{display:block;aspect-ratio:1600/553;overflow:hidden;background:#0B0D12}
.feat__img img,.post__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.feat:hover .feat__img img,.post:hover .post__img img{transform:scale(1.025)}
.feat__tag{position:absolute;top:1rem;right:1rem;padding:.38rem .8rem;border-radius:999px;background:rgba(255,255,255,.94);font-size:.78rem;font-weight:600;color:var(--ink);box-shadow:var(--sh-1)}
.feat__body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.6rem,4vw,3.5rem);padding:clamp(1.6rem,3.2vw,2.6rem)}
.feat__t{margin-top:.8rem;font-size:clamp(1.65rem,2.8vw,2.35rem);font-weight:700;letter-spacing:-.038em;line-height:1.06;color:var(--ink)}
.feat__t a,.post__t a{transition:color .2s}
.feat__t a:hover,.post__t a:hover{color:var(--accent)}
.feat__d{margin-top:.95rem;color:var(--muted);line-height:1.7;max-width:60ch}
.feat .link{margin-top:1.4rem}

.figs{display:grid;align-content:start}
.figs li{padding:1rem 0;border-top:1px solid var(--line)}
.figs b{display:block;font-family:var(--h);font-weight:700;font-size:1.6rem;letter-spacing:-.04em;line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums}
.figs span{display:block;margin-top:.3rem;font-size:.86rem;color:var(--muted);line-height:1.45}
.figs--feat{padding-left:clamp(1.4rem,3vw,2.6rem);border-left:1px solid var(--line)}
.figs--feat li:first-child{border-top:0;padding-top:.2rem}
.figs--feat b{font-size:clamp(1.8rem,2.6vw,2.2rem)}

.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut);margin-top:var(--gut)}
.post{display:flex;flex-direction:column;overflow:hidden}
.post__img{display:block;aspect-ratio:2/1;overflow:hidden;background:#0B0D12}
.post__b{display:flex;flex-direction:column;flex:1;padding:1.5rem 1.6rem 1.6rem}
.post__t{margin-top:.7rem;font-size:clamp(1.3rem,1.9vw,1.55rem);font-weight:700;letter-spacing:-.032em;line-height:1.12;color:var(--ink)}
.post__d{margin-top:.7rem;color:var(--muted);font-size:.96rem;line-height:1.65}
.post .figs{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.4rem;margin-top:auto;padding-top:1.4rem}

/* ═══ 02 PROJECTS ════════════════════════════════════════ */

/* the flagship band */
.nf{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,4.5vw,4rem);align-items:stretch;padding:clamp(2rem,4.6vw,3.8rem);border-radius:30px;background:radial-gradient(85% 120% at 100% 0%,#1B2A52 0%,#0E1220 48%,#0B0D12 100%);color:#fff;overflow:hidden;box-shadow:0 50px 100px -55px rgba(11,13,18,.8)}
.nf::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:36px 36px;-webkit-mask-image:radial-gradient(70% 90% at 78% 30%,#000 10%,transparent 75%);mask-image:radial-gradient(70% 90% at 78% 30%,#000 10%,transparent 75%)}
.nf__text{position:relative;z-index:1}
.nf__k{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .7rem;font-size:.86rem;color:rgba(255,255,255,.62)}
.nf__k span + span::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.3);margin-right:.7rem;vertical-align:middle;position:relative;top:-1px}
.nf__badge{padding:.32rem .75rem;border-radius:999px;background:var(--accent);color:#fff !important;font-weight:600;font-size:.76rem}
.nf__badge + span::before{display:none !important}
.nf__t{margin-top:1.1rem;font-size:clamp(2.3rem,4.2vw,3.5rem);font-weight:700;letter-spacing:-.05em;line-height:.98;color:#fff}
.nf__d{margin-top:1rem;font-size:1.08rem;line-height:1.6;color:rgba(255,255,255,.74);max-width:36ch}
.nf__stats{margin-top:1.9rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.14)}
.nf__stats li{padding:1rem 1rem 1rem 0}
.nf__stats li:nth-child(even){padding-left:1.1rem;border-left:1px solid rgba(255,255,255,.14)}
.nf__stats li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)}
.nf__stats b{display:block;font-family:var(--h);font-weight:700;font-size:clamp(1.5rem,2.4vw,2.05rem);letter-spacing:-.04em;line-height:1.05;font-variant-numeric:tabular-nums;color:#fff}
.nf__stats span{display:block;margin-top:.3rem;font-size:.82rem;color:rgba(255,255,255,.62);line-height:1.4}
.nf__src{margin-top:.95rem;font-size:.76rem;color:rgba(255,255,255,.44)}
.nf__cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.7rem}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{background:var(--accent);color:#fff;transform:translateY(-2px)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.26)}
.btn--ghost:hover{border-color:#fff;transform:translateY(-2px)}
.nf__note{display:flex;align-items:center;gap:.45rem;margin-top:.95rem;font-size:.8rem;color:rgba(255,255,255,.46)}

.nf__vis{position:relative;z-index:1;min-height:30rem}
.win{position:relative;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -28px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.08)}
.win__bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#F3F4F6;border-bottom:1px solid #E3E5EA}
.win__bar i{width:10px;height:10px;border-radius:50%;background:#DADDE3}
.win__bar i:nth-child(1){background:#F26B63}
.win__bar i:nth-child(2){background:#F5BF4F}
.win__bar i:nth-child(3){background:#61C454}
.win__url{margin-left:12px;flex:0 1 auto;min-width:0;max-width:62%;height:19px;padding:0 10px;border-radius:6px;background:#fff;border:1px solid #E3E5EA;font:500 10.5px/17px var(--b);color:#6B7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win__view{line-height:0;background:#fff}
.win__view img{width:100%;height:auto}
.win--front{position:absolute;right:0;bottom:0;width:86%;z-index:1}
.win--back{position:absolute;left:0;top:3.6rem;width:76%;z-index:2}
.nf__hand{position:absolute;right:0;top:0;z-index:3;font-size:clamp(1.3rem,1.9vw,1.65rem);color:var(--marker-lt);transform:rotate(-6deg)}
.nf__arrow{position:absolute;right:23%;top:.9rem;width:52px;height:44px;z-index:3;stroke:var(--marker-lt);transform:scaleX(-1)}

/* security & code */
.sub{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 2rem;margin:clamp(3.2rem,6vw,4.6rem) 0 1.5rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.sub__t{font-size:clamp(1.35rem,2vw,1.65rem);font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.sub__p{color:var(--muted);font-size:.98rem}

.code{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
.proj{display:flex;flex-direction:column;overflow:hidden}
.proj__shot{display:block;padding:1.15rem 1.15rem 0;background:linear-gradient(180deg,var(--tint),var(--surface) 85%)}
.win--card{border-radius:12px 12px 0 0;box-shadow:0 18px 40px -26px rgba(11,13,18,.5),0 0 0 1px var(--line)}
.win--card .win__bar{height:24px;padding:0 10px}
.win--card .win__bar i{width:8px;height:8px}
.win--card .win__url{height:15px;font-size:9.5px;line-height:13px}
.win--card .win__view{aspect-ratio:16/10;overflow:hidden;background:#0d1117}
.win--card .win__view img{height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.proj:hover .win--card .win__view img{transform:scale(1.03)}
.proj__b{display:flex;flex-direction:column;flex:1;padding:1.25rem 1.35rem 1.35rem;border-top:1px solid var(--line)}
.proj__t{font-family:var(--h);margin:.55rem 0 0;font-size:1.3rem;font-weight:700;letter-spacing:-.028em;color:var(--ink)}
.proj__d{margin-top:.4rem;color:var(--muted);font-size:.94rem;line-height:1.6}
.proj .bar{margin-top:1.1rem}
.proj .legend{margin-top:.65rem;gap:.35rem 1rem}
.proj .legend li{font-size:.78rem}
.proj__a{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.3rem;margin-top:auto;padding-top:1.25rem}

.also{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut);margin-top:var(--gut)}
.tile{position:relative;display:grid;grid-template-columns:132px minmax(0,1fr) auto;gap:1.2rem;align-items:center;padding:1rem 1.3rem 1rem 1rem}
.tile__art{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.tile__art .cover__art{position:absolute;inset:0;width:100%;height:100%}
.tile__t{font-family:var(--h);margin:.35rem 0 0;font-size:1.15rem;font-weight:700;letter-spacing:-.022em;color:var(--ink)}
.tile__btn{font:inherit;color:inherit;letter-spacing:inherit;text-align:left;padding:0}
.tile__btn::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg)}
.tile__btn:focus-visible{outline:none}
.tile:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.tile__d{margin-top:.25rem;color:var(--muted);font-size:.9rem;line-height:1.5}
.tile__go{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);color:var(--muted);transition:background .25s,border-color .25s,color .25s,transform .25s var(--ease)}
.tile:hover .tile__go{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateX(2px)}

/* ═══ 03 PATH ════════════════════════════════════════════ */

.sec--path{background:var(--tint);border-top:1px solid var(--line)}
.tl{--yw:7.5rem;--rail:3.6rem;position:relative;display:grid;gap:clamp(1.1rem,2vw,1.5rem)}
.tl::before{content:"";position:absolute;left:calc(var(--yw) + var(--rail) / 2 - 1px);top:.8rem;bottom:1.2rem;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--line-2),var(--accent) 55%,var(--line-2))}
.tl__i{position:relative;display:grid;grid-template-columns:var(--yw) var(--rail) minmax(0,1fr);align-items:start}
.tl__y{padding:.1rem 1.1rem 0 0;text-align:right;font-family:var(--h);font-weight:700;font-size:clamp(1.45rem,2.3vw,1.95rem);letter-spacing:-.045em;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.tl__i--role .tl__y,.tl__i--next .tl__y{color:var(--muted)}
.tl__dot{position:relative;z-index:1;justify-self:center;margin-top:.55rem;width:14px;height:14px;border-radius:50%;background:var(--tint);border:2px solid var(--line-2)}
.tl__i--ch .tl__dot{display:grid;place-items:center;width:42px;height:42px;margin-top:-.15rem;border:0;background:var(--accent);color:#fff;box-shadow:0 0 0 6px var(--tint),0 10px 24px -10px rgba(29,78,216,.7)}
.tl__i--ch .tl__dot .ico{width:20px;height:20px}
.tl__i--next .tl__dot{display:grid;place-items:center;width:34px;height:34px;margin-top:-.05rem;border:2px dashed var(--accent);color:var(--accent);background:var(--tint)}
.tl__i--next .tl__dot .ico{width:16px;height:16px}
.tl__c{min-width:0;padding-left:.4rem}
.tl__i--role .tl__c{padding-top:.2rem;padding-bottom:.4rem}

.chap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.35rem,2.6vw,2rem);box-shadow:var(--sh-1)}
.chap__k{font-size:.85rem;font-weight:500;color:var(--accent)}
.chap__t{margin-top:.35rem;font-size:clamp(1.35rem,2.2vw,1.8rem);font-weight:700;letter-spacing:-.034em;line-height:1.12;color:var(--ink)}
.chap__b{margin-top:.85rem;color:var(--ink-2);line-height:1.75;max-width:70ch}
.chap .tags{margin-top:1.1rem}
.chap .tags li{background:var(--surface-2)}

.role{display:grid;grid-template-columns:52px minmax(0,1fr);gap:1rem;align-items:start}
.role--sm{margin-top:1.3rem;padding-top:1.2rem;border-top:1px dashed var(--line-2)}
.role__logo{display:grid;place-items:center;width:52px;height:52px;padding:6px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.role__logo img{width:100%;height:100%;object-fit:contain}
.role__logo--none{color:var(--muted)}
.role__w{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums;margin-bottom:.1rem}
.role__t{font-family:var(--h);font-weight:600;font-size:1.08rem;letter-spacing:-.018em;line-height:1.3;color:var(--ink)}
.role__t span{display:block;font-family:var(--b);font-weight:400;font-size:.9rem;color:var(--accent);margin-top:.1rem}
.role__n{margin-top:.4rem;color:var(--muted);font-size:.93rem;line-height:1.6;max-width:62ch}
.chap__now{margin-top:1.3rem;padding-top:1.1rem;border-top:1px dashed var(--line-2)}
.chap__nk{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:600;color:#15803D}
.chap__nk::before{content:"";width:7px;height:7px;border-radius:50%;background:#16A34A}
.chap__now .role--sm{margin-top:.9rem;padding-top:0;border-top:0}

.next{padding-top:.25rem}
.next b{display:block;font-family:var(--h);font-weight:700;font-size:1.3rem;letter-spacing:-.025em;color:var(--ink)}
.next span{color:var(--muted)}
.tl__hand{margin-top:.3rem;font-size:1.5rem;transform:rotate(-4deg);transform-origin:left}

/* ═══ 04 CONTACT ═════════════════════════════════════════ */

.foot{padding:clamp(4.5rem,9vw,7.5rem) 0 2rem}
.shead__k--light{color:rgba(255,255,255,.72)}
.foot__h{margin-top:.9rem;font-size:clamp(3.4rem,9.4vw,8rem);font-weight:700;letter-spacing:-.06em;line-height:.9;color:#fff}
.foot__lede{margin-top:1.3rem;margin-bottom:0;font-size:clamp(1.02rem,1.3vw,1.15rem);line-height:1.65;color:rgba(255,255,255,.64);max-width:44ch}
.foot .links{margin-top:clamp(2.2rem,4vw,3rem);grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
.foot .links__k{font-size:.8rem;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.52)}
.foot__end{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:clamp(3rem,6vw,4.5rem);padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.1);font-size:.85rem;color:rgba(255,255,255,.45)}
.foot__top{display:inline-flex;align-items:center;gap:.35rem;color:rgba(255,255,255,.72);transition:color .2s}
.foot__top:hover{color:#fff}

/* ═══ DETAIL SHEET (screenshots) ══════════════════════════ */

.sheet__cover--shot{position:relative;overflow:hidden;background:#0d1117;border-bottom:1px solid var(--line)}
.sheet__cover--shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.sheet .meta{margin-bottom:1.6rem}
.sheet .meta dt,.sheet__cat,.blk__h{letter-spacing:0;text-transform:none}
.sheet .meta dt{font-size:.8rem}
.blk__h{font-size:.85rem;color:var(--muted)}
.sheet__cat{font-size:.85rem}

/* ═══ RESPONSIVE ═════════════════════════════════════════ */

/* short laptop screens: keep the top of the Nightfall band close to the first view */
@media (min-width:881px) and (max-height:820px){
  .hero{padding-top:6rem;padding-bottom:2rem}
  .hero__name{font-size:clamp(3.2rem,6.4vw,5.9rem);margin-top:1rem}
  .hero__line{margin-top:1rem}
  .hero__lede{margin-top:1.1rem}
  .hero__cta{margin-top:1.5rem}
  .hero__pic{max-width:380px}
  .facts{margin-top:2rem}
  .fact{padding:.95rem 1.2rem}
  .sec--work{padding-top:3rem}
}

@media (max-width:1100px){
  .nf{grid-template-columns:minmax(0,1fr)}
  .nf__vis{max-width:760px;width:100%;justify-self:center;min-height:0;aspect-ratio:10/8.4}
  .code{grid-template-columns:repeat(2,minmax(0,1fr))}
  .code .proj:last-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .code .proj:last-child .proj__shot{padding-bottom:1.15rem}
  .code .proj:last-child .win--card{border-radius:12px}
  .code .proj:last-child .proj__b{border-top:0;border-left:1px solid var(--line)}
}

@media (max-width:880px){
  .nav__n{display:none}
  .hero__grid{grid-template-columns:1fr;gap:2.4rem}
  .hero__pic{justify-self:stretch;max-width:520px;width:100%}
  .hero__pic::before{display:none}
  .hero__frame{aspect-ratio:4/5}
  .avail{left:1rem;bottom:1rem}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fact:nth-child(3){border-left:0}
  .fact:nth-child(n+3){border-top:1px solid var(--line)}
  .shead{grid-template-columns:1fr;align-items:start}
  .feat__body{grid-template-columns:1fr}
  .figs--feat{padding-left:0;border-left:0;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:1.2rem}
  .figs--feat li,.figs--feat li:first-child{border-top:1px solid var(--line);padding-top:.9rem}
  .posts,.also{grid-template-columns:1fr}
  .code{grid-template-columns:1fr}
  .code .proj:last-child{display:flex}
  .code .proj:last-child .proj__shot{padding-bottom:0}
  .code .proj:last-child .win--card{border-radius:12px 12px 0 0}
  .code .proj:last-child .proj__b{border-left:0;border-top:1px solid var(--line)}
  .foot .links{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:640px){
  .hero{padding-top:6.2rem}
  .hero__frame{aspect-ratio:1/1}
  .hero__frame img{object-position:50% 12%}
  .hero__lede{font-size:1rem}
  .hero__name{font-size:clamp(3.2rem,16vw,4.4rem)}
  .hero__line{font-size:1.45rem}
  .hero__cta .btn{flex:1 1 auto}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fact{grid-template-columns:1fr;padding:.95rem 1rem}
  .fact__i{display:none}
  .fact__v{font-size:.95rem}
  .fact__s{font-size:.8rem}
  .feat__img{aspect-ratio:16/9}
  .feat__img img{object-position:12% 50%}
  .feat__d,.post__d{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
  .figs--feat{grid-template-columns:1fr}
  .figs li,.figs--feat li,.figs--feat li:first-child{display:flex;align-items:baseline;gap:.7rem;padding:.7rem 0}
  .figs b,.figs--feat b{flex:none;font-size:1.3rem}
  .figs span{margin-top:0;font-size:.82rem}
  .post .figs{grid-template-columns:1fr}
  .feat .mline span:nth-child(2),.feat .mline span:nth-child(4),.post .mline span:nth-child(2),.post .mline span:nth-child(4){display:none}
  .code{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--pad) * -1);padding:0 var(--pad) 6px;scrollbar-width:none}
  .code::-webkit-scrollbar{display:none}
  .code .proj{flex:0 0 84%;scroll-snap-align:start}
  .code .proj:hover{transform:none}
  .nf__cta .btn{flex:1 1 0}
  .nf{padding:1.6rem 1.25rem;border-radius:24px}
  .nf__stats{grid-template-columns:1fr}
  .nf__stats li,.nf__stats li:nth-child(even),.nf__stats li:nth-child(n+3){padding:.8rem 0;border-left:0;border-top:1px solid rgba(255,255,255,.14)}
  .nf__stats li:first-child{border-top:0}
  .nf__stats b{display:inline;font-size:1.5rem;margin-right:.5rem}
  .nf__stats span{display:inline}
  .nf__vis{aspect-ratio:auto;min-height:0}
  .win--back{display:none}
  .win--front{position:relative;width:100%}
  .nf__hand{position:static;margin-top:.8rem;text-align:left;transform:rotate(-3deg)}
  .nf__arrow{display:none}
  .tile{grid-template-columns:96px minmax(0,1fr);padding:.9rem}
  .tile__go{display:none}
  .tl{--yw:0rem;--rail:2.6rem}
  .tl::before{left:calc(1.3rem - 1px)}
  .tl__i{grid-template-columns:var(--rail) minmax(0,1fr);row-gap:.4rem}
  .tl__y{grid-column:2;grid-row:1;padding:0;text-align:left;font-size:1.35rem}
  .tl__dot{grid-column:1;grid-row:1/3;margin-top:.2rem}
  .tl__c{grid-column:2;grid-row:2;padding-left:0}
  .tl__i--ch .tl__dot{width:34px;height:34px}
  .tl__i--ch .tl__dot .ico{width:17px;height:17px}
  .tl__i--next .tl__dot{width:28px;height:28px}
  .chap{padding:1.2rem}
  .role{grid-template-columns:44px minmax(0,1fr);gap:.85rem}
  .role__logo{width:44px;height:44px;border-radius:12px}
  .foot .links{grid-template-columns:1fr}
  .foot__end{flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  html.js .rv{opacity:1;transform:none;transition:none}
  html.js .hero .rv{animation:none}
  html.js .mk__u path{stroke-dashoffset:0;animation:none}
  .avail__dot::after{animation:none}
}