/* ═════════════ ABOUT — back to the cream paper ═════════════ */
.about{font-family:var(--sans);position:relative;background:var(--paper);color:var(--ink);padding:clamp(50px,7vw,100px) 0 clamp(80px,10vw,140px);scroll-margin-top:0;overflow-x:clip}
.a-pad{padding:0 var(--pad)}
.a-meta{display:flex;justify-content:space-between;padding:10px 0;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.a-rule{height:1px;background:repeating-linear-gradient(90deg,var(--ink) 0 5px,transparent 5px 10px);opacity:.55}

.a-top{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,90px);align-items:center;padding:clamp(34px,5vw,80px) 0 clamp(50px,7vw,110px)}
.a-title{font-family:var(--serif);font-weight:400;font-size:clamp(52px,8.4vw,150px);line-height:.9;letter-spacing:-.035em}
.a-title em{font-style:italic;position:relative;display:inline-block;isolation:isolate}
.a-title em::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.22em;background:var(--highlight);z-index:-1;transform:skew(-6deg) scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out) .9s}
.a-title.in em::after{transform:skew(-6deg) scaleX(1)}
.al{display:block;overflow:hidden;padding-bottom:.18em;margin-bottom:-.18em}
.al > span{display:inline-block}
.js .al > span{transform:translateY(112%);transition:transform 1.1s var(--ease-out)}
.js .a-title.in .al:nth-child(1) > span{transform:none;transition-delay:.05s}
.js .a-title.in .al:nth-child(2) > span{transform:none;transition-delay:.22s}
.a-lede{margin-top:clamp(22px,2.6vw,38px);font-family:var(--mono);font-size:clamp(14px,1.2vw,17px);line-height:1.7;max-width:50ch}
.a-lede p+p{margin-top:.9em}
.a-lede .a-first{font-family:var(--serif);font-size:clamp(24px,2.4vw,36px);line-height:1.1;letter-spacing:-.01em}
.a-lede .a-last{font-family:var(--hand);font-size:clamp(24px,2.1vw,32px);line-height:1.1;margin-top:.7em}
.a-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.a-tags li{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:7px 12px;border:1px solid var(--ink);border-radius:99px}
.a-tags li:nth-child(odd){background:var(--highlight)}

.a-photo{position:relative;justify-self:center;width:100%;max-width:640px}
.a-card{position:relative;background:var(--highlight);padding:clamp(18px,2.4vw,34px) clamp(14px,2vw,28px) 0;transform:rotate(2.2deg);border:2px solid var(--ink);box-shadow:10px 10px 0 var(--ink);overflow:visible;transition:transform .7s var(--spring)}
.a-photo:hover .a-card{transform:rotate(0deg) scale(1.015)}
.a-card img{display:block;width:100%;height:auto;margin-bottom:-1px}
.a-tape{position:absolute;top:-16px;left:50%;width:120px;height:32px;margin-left:-60px;background:rgba(255,246,214,.7);border:1px dashed rgba(28,24,18,.35);transform:rotate(-4deg);z-index:2}
.a-cap{position:absolute;right:-6px;bottom:-34px;font-family:var(--hand);font-size:clamp(22px,2.2vw,32px);transform:rotate(-4deg);background:var(--paper);padding:2px 10px}

.a-sub{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px clamp(14px,2vw,28px);padding:14px 0;border-top:1px dashed rgba(28,24,18,.55)}
.a-sn{font-family:var(--mono);font-size:12px;letter-spacing:.14em}
.a-st{font-weight:800;text-transform:uppercase;letter-spacing:-.05em;font-size:clamp(28px,4.2vw,64px);line-height:.9}
.a-sd{margin-left:auto;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.8}

/* timeline */
.tl{list-style:none;position:relative;margin-top:clamp(20px,3vw,44px);padding-left:clamp(26px,3vw,44px)}
.tl-line{position:absolute;left:6px;top:8px;bottom:8px;width:0;border-left:2px dashed rgba(28,24,18,.3)}
.tl-line i{position:absolute;left:-2px;top:0;width:2px;height:calc(var(--p,0)*100%);background:var(--ink)}
.tl-row{position:relative;display:grid;grid-template-columns:44px 190px 1.2fr 1.4fr;gap:6px clamp(12px,2vw,30px);align-items:baseline;padding:clamp(16px,2vw,26px) 0;border-bottom:1px dashed rgba(28,24,18,.35);transition:background .3s,padding .4s var(--ease-out)}
.tl-row::before{content:"";position:absolute;left:calc(clamp(26px,3vw,44px)*-1 + 1px);top:calc(clamp(16px,2vw,26px) + .5em);width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);transition:background .35s,transform .35s var(--spring)}
.tl-row.on::before{background:var(--ink);transform:scale(1.15)}
.tl-row:hover{background:rgba(255,226,74,.35);padding-left:14px}
.tl-n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;opacity:.7}
.tl-d{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.tl-r b{font-weight:800;text-transform:uppercase;letter-spacing:-.045em;line-height:.95;font-size:clamp(22px,2.7vw,40px)}
.tl-c{font-family:var(--mono);font-size:clamp(13px,1.1vw,16px);line-height:1.5}
.tl-x{display:block;font-size:12px;letter-spacing:.06em;opacity:.7;margin-top:3px}
.tl-row.brk{background:repeating-linear-gradient(135deg,rgba(255,226,74,.55) 0 12px,rgba(255,226,74,.3) 12px 24px)}
.tl-row.brk .tl-r b{font-family:var(--serif);font-weight:400;font-style:italic;text-transform:none;letter-spacing:-.02em;font-size:clamp(28px,3.3vw,50px)}
.tl-row.now .tl-r b{background:var(--ink);color:var(--paper);padding:2px 10px 4px;display:inline-block}
.tl-row.now .tl-x{opacity:1;font-family:var(--hand);font-size:22px;letter-spacing:0}

/* video */
.a-video{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);flex-wrap:wrap;margin-top:clamp(44px,6vw,90px);padding:clamp(18px,2.4vw,32px) clamp(20px,3vw,44px);
  background:var(--ink);color:var(--paper);border-radius:999px;box-shadow:0 12px 0 var(--highlight);transition:transform .5s var(--spring);outline-offset:6px}
.a-video:hover,.a-video:focus-visible{transform:translateY(-5px) rotate(-.5deg)}
.a-video:focus-visible{outline:3px solid var(--ink)}
.av-play{flex:none;display:grid;place-items:center;width:clamp(54px,6vw,86px);aspect-ratio:1;border-radius:50%;background:var(--highlight);color:var(--ink);position:relative}
.av-play::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--highlight);animation:avPulse 2.2s ease-out infinite}
.av-play svg{width:42%;fill:currentColor;transform:translateX(8%)}
@keyframes avPulse{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.av-txt{display:flex;flex-direction:column;gap:6px;flex:1;min-width:200px}
.av-k{font-family:var(--hand);font-size:clamp(22px,2vw,30px);color:var(--highlight);line-height:1}
.av-t{font-weight:800;text-transform:uppercase;letter-spacing:-.05em;line-height:.9;font-size:clamp(28px,4.4vw,68px)}
.av-go{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--paper);padding:13px 20px;border-radius:99px;display:inline-flex;gap:8px;align-items:center}
.av-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:860px){
  .a-top{grid-template-columns:1fr}
  .a-photo{max-width:520px;margin-bottom:30px}
  .a-sd{margin-left:0;flex-basis:100%}
  .tl-row{grid-template-columns:36px 1fr;grid-template-areas:"n d" ". r" ". c"}
  .tl-n{grid-area:n}.tl-d{grid-area:d}.tl-r{grid-area:r}.tl-c{grid-area:c}
  .a-video{border-radius:34px}
}
@media (prefers-reduced-motion:reduce){.av-play::after{animation:none}}