/* ── HERO: character sheet ── */
.hero{border-top:0;padding-block:clamp(2.5rem,5vw,4.5rem) clamp(3rem,6vw,5rem);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 80% at 72% 45%,#000,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 70% 80% at 72% 45%,#000,transparent 75%);opacity:.7}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(2rem,5vw,5rem);align-items:center}
h1{font-weight:800;font-size:clamp(3.1rem,8.6vw,7.6rem);line-height:.9;letter-spacing:-.03em;margin:1.2rem 0 0;font-variation-settings:"opsz" 96,"wdth" 92;text-wrap:balance}
h1 .w{display:inline-block;animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
h1 .w:nth-of-type(2){animation-delay:.07s}h1 .w:nth-of-type(3){animation-delay:.14s}h1 .w:nth-of-type(4){animation-delay:.21s}h1 .w:nth-of-type(5){animation-delay:.28s}
@keyframes rise{from{transform:translateY(12%)}to{transform:none}}
.sticker{display:inline-block;font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;font-variation-settings:normal;
  background:var(--accent);color:var(--on-accent);padding:.02em .2em .06em;border-radius:.16em;transform:rotate(-3.5deg);box-shadow:3px 4px 0 var(--ink)}
.lede{font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.4;max-width:30ch;margin:clamp(1.4rem,3vw,2.2rem) 0 0}
.lede span{color:var(--mut)}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(1.4rem,3vw,2.2rem)}
.hint-line{margin:1.4rem 0 0;color:var(--mut)}

.glance-card{perspective:1100px;justify-self:end;width:100%;max-width:430px}
.glance-card-body{position:relative;background:var(--paper);border:1.5px solid var(--ink);border-radius:14px;padding:1.1rem 1.2rem 1.2rem;
  box-shadow:8px 9px 0 var(--ink),0 30px 60px -30px var(--shadow);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out;overflow:hidden}
.glance-card-body::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(260px 200px at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%);opacity:var(--sh,0);transition:opacity .3s}
.glance-header{display:flex;justify-content:space-between;color:var(--mut);padding-bottom:.7rem;border-bottom:1.5px dashed var(--line)}
.glance-identity{display:grid;grid-template-columns:128px minmax(0,1fr);gap:1.1rem;padding-block:1rem;align-items:start}
.glance-photo{position:relative;margin:0;aspect-ratio:3/4;background:var(--bg2);border:1.5px solid var(--ink);border-radius:6px;overflow:hidden}
.glance-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 6%}
.glance-name{font-weight:800;font-size:clamp(1.9rem,3.4vw,2.5rem);line-height:.95;letter-spacing:-.028em;margin:0 0 .8rem;font-variation-settings:"opsz" 60,"wdth" 92}
.glance-meta{margin:0;display:grid;gap:.45rem}
.glance-meta div{display:flex;flex-direction:column}
.glance-meta dt{color:var(--mut);font-size:.7rem}
.glance-meta dd{margin:0;font-family:var(--display);text-transform:none;letter-spacing:0;font-size:.95rem;font-weight:600}
.stats{list-style:none;margin:0;padding:.9rem 0;border-block:1.5px dashed var(--line);display:grid;gap:.7rem}
.stats li{display:grid;grid-template-columns:4.4rem minmax(0,1fr) auto;gap:.7rem;align-items:center}
.stats .stat-label{font-family:var(--mono);font-size:.7rem;font-weight:600;color:var(--mut);letter-spacing:.06em}
.stats .stat-name{font-size:.92rem}
.stats .stat-name small{display:block;color:var(--mut);font-size:.78rem;line-height:1.2}
.stats .stat-value{font-weight:800;font-size:1.5rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-variation-settings:"opsz" 40,"wdth" 92}
.stats .stat-value small{font-size:.8rem;color:var(--mut);font-weight:500;margin-left:.15rem}
.meter{grid-column:2 / -1;height:.5rem;border:1.5px solid var(--ink);border-radius:99px;overflow:hidden;background:var(--bg2);margin-top:-.2rem}
.meter i{display:block;height:100%;background:var(--accent)}
.label-text{color:var(--mut);margin:0 0 .6rem}
.skill-loadout{padding:.9rem 0 .2rem}
.skill-loadout ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem}
.skill-loadout li{border:1.5px solid var(--line);border-radius:6px;padding:.5rem .3rem;text-align:center;font-size:.8rem;font-weight:600;background:var(--bg2);transition:all .2s;cursor:default;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skill-loadout li:hover{border-color:var(--ink);background:var(--paper);transform:translateY(-2px)}
.open-to-work{margin-top:.9rem;padding:.9rem 1rem;border:1.5px solid var(--ink);border-radius:8px;background:var(--bg2);display:grid;gap:.5rem}
.open-to-work p{margin:0}.open-to-work p:not(.label-text){font-size:.95rem}
.open-to-work .button{justify-self:start;margin-top:.2rem;padding:.6rem 1rem}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.glance-card{justify-self:center}h1{font-size:clamp(3rem,13vw,5.5rem)}}
@media (max-width:420px){.glance-identity{grid-template-columns:104px minmax(0,1fr)}}

.peek{position:relative;list-style:none;margin:clamp(2.5rem,5vw,4rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.peek a{display:flex;flex-direction:column;gap:.35rem;height:100%;text-decoration:none;padding:1rem 1.1rem;border:1.5px solid var(--ink);border-radius:10px;background:var(--paper);box-shadow:4px 5px 0 var(--ink);transition:transform .2s,box-shadow .2s}
.peek a:hover{transform:translate(-2px,-3px);box-shadow:6px 8px 0 var(--accent)}
.peek .mono-text{color:var(--accent-text);font-size:.68rem}
.peek b{font-weight:800;font-size:1.3rem;letter-spacing:-.03em;line-height:1.1}
.peek a span:last-child{color:var(--mut);font-size:.92rem}
@media (max-width:760px){.peek{grid-template-columns:1fr}}

.glance-photo img{filter:grayscale(1);transition:filter .9s ease}
.glance-card:hover .glance-photo img{filter:none}
@media (hover:none){.glance-photo img{filter:none}}