/* ===================================================================
   contact.css · the contact page is the About section of the homepage
   (portrait, hand-drawn marks, experience boxes) plus the social links.
   Same look as #about in landing.css; motion is CSS only and plays on
   load, since the page needs no scroll choreography. Needs tokens.css
   and site.css first.
   =================================================================== */

.about{padding:clamp(132px,13vw,184px) 0 var(--section-y);overflow-x:clip}
.about__grid{display:grid;grid-template-columns:428px minmax(0,470px);justify-content:start;gap:clamp(48px,7vw,100px);align-items:start}

/* portrait in a circle, with the crimson pencil loop and crosshair */
.about__media{position:relative;margin:26px 0 0;aspect-ratio:428/454}
.about__photo{position:absolute;inset:0;overflow:hidden;background-color:var(--white)}
.about__photo img{display:block;width:100%;height:100%;object-fit:contain;transition:transform 1.2s var(--ease)}
.about__marks{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;fill:none}
.about__loop{stroke:var(--crimson);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.about__cross{stroke:var(--crimson);stroke-width:1.2;transform-box:view-box;transform-origin:416px 1px;transition:transform .9s var(--ease)}
@media (hover:hover){
  .about__media:hover .about__photo img{transform:scale(1.02)}
  .about__media:hover .about__cross{transform:rotate(90deg)}
}

/* text */
.about__kicker{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--crimson-deep);margin-bottom:14px}
.about__text h1{font-size:clamp(44px,4.9vw,70px);font-weight:900;line-height:1.04;letter-spacing:-.035em}
.about__rule{position:relative;display:block;height:1px;margin:22px 0 28px;background:var(--line-l);transform-origin:left}
.about__rule::after{content:"";position:absolute;left:0;top:-.5px;width:51px;height:2px;border-radius:2px;background:var(--crimson)}
.about__text p:not(.about__kicker){font-size:var(--fs-small);line-height:1.6;color:var(--fg)}
.about__text p+p{margin-top:16px}
.about__text p a{color:var(--crimson-deep);text-underline-offset:3px}

/* social links: the original site icons on their own, no buttons */
.about__icons{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:28px 0 0 -10px}
.about__icons a{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:var(--charcoal);transition:color .35s var(--ease),transform .45s var(--ease)}
.about__icon{width:30px;height:30px;fill:currentColor}
.about__icon--ring{width:38px;height:38px}
@media (hover:hover){ .about__icons a:hover{color:var(--crimson-deep);transform:translateY(-3px)} }

.about__ridge{display:block;width:180px;height:auto;margin-top:44px;overflow:visible}
.about__line{fill:none;stroke:var(--charcoal);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
/* the climber: a crimson dot that climbs the ridge and stops on the summit ledge of the higher peak.
   Without motion-path support it simply sits on the summit (the transform attribute). */
.about__dot{fill:var(--crimson)}
@supports (offset-path:path("M0 0")){
  .about__climber{transform:none;offset-path:path("M0 56C14 52 22 46 32 40C40 35 46 30 54 22C58 18 62 18 66 22L78 34C84 30 90 26 98 18C102.32 13.68 106.64 10.42 110.96 10.4");offset-rotate:auto;offset-distance:var(--climb,100%)}
}

/* events: where to meet me next. Cards like the experience boxes; the title link covers the card.
   Past events are removed by a small script on the page (without JS all are listed); the studio card always stays. */
.events{margin-top:clamp(72px,8vw,112px);scroll-margin-top:110px}
.events h2{font-size:var(--fs-h3l);max-width:none;margin-bottom:28px}
.ev__list{display:grid;gap:16px}
.ev{position:relative;display:grid;grid-template-columns:88px minmax(0,1fr) 44px;gap:28px;align-items:start;padding:28px 24px 28px 28px;border-radius:var(--r-sm);border:1px solid var(--line-l);transition:border-color .6s var(--ease),background .6s var(--ease)}
.ev__date{max-width:none}
.ev__date time{display:flex;flex-direction:column;align-items:flex-start;line-height:1;color:var(--charcoal)}
.ev__date b{font-size:44px;font-weight:900;letter-spacing:-.03em;margin:6px 0 4px}
.ev__date span{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.ev__date .ev__wd{color:var(--crimson-deep)}
/* the studio: always listed, last; a drawn pin stands in for the date */
.ev--studio .ev__date{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.ev--studio .ev__wd{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.ev__pin{width:30px;height:38px;fill:none;stroke:var(--charcoal);stroke-width:1.6;stroke-linejoin:round}
.ev__pin circle{fill:var(--crimson);stroke:none}
.ev__body h3{font-size:clamp(20px,1.8vw,24px);line-height:1.2;letter-spacing:-.015em}
.ev__body h3 a{text-decoration:none}
.ev__body h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.ev__body p{font-size:var(--fs-caption);line-height:1.5;color:var(--ink-2);max-width:60ch}
.ev__body p+p{margin-top:10px}
.ev__meta{margin-top:6px;font-weight:700;color:var(--charcoal)!important}
.ev__why b{display:block;margin-bottom:2px;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--crimson-deep)}
.ev__go{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-l);color:var(--charcoal);transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease)}
.ev__go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}
.ev:focus-within{border-color:var(--charcoal)}
.ev h3 a:focus-visible{outline:none}
.ev:has(a:focus-visible){outline:2px solid var(--crimson-deep);outline-offset:4px}
@media (hover:hover){
  .ev:hover{border-color:var(--charcoal);background:var(--sand-light)}
  .ev:hover .ev__go{background:var(--crimson);border-color:var(--crimson);color:var(--white)}
  .ev:hover .ev__go svg{transform:translate(2px,-2px)}
}

/* experience boxes */
.xp__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:clamp(56px,7vw,96px)}
.xp__box{display:flex;flex-direction:column;gap:8px;min-height:128px;padding:28px 24px 24px;border-radius:var(--r-sm);border:1px solid var(--line-l);transition:border-color .6s var(--ease),background .6s var(--ease)}
.xp__box b{font-size:15px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--charcoal)}
.xp__box span{font-size:var(--fs-caption);line-height:1.45;color:var(--ink-2)}
.xp__box:hover{border-color:var(--charcoal);background:var(--sand-light)}

/* ------------------------------------------------------------------
   Entrance, in the homepage order: the portrait opens in its circle,
   kicker and rule follow, the pencil loop draws, the crosshair pops,
   then the ridge draws and the dot climbs to the summit.
   ------------------------------------------------------------------ */
.about__photo{animation:c-open 1.6s cubic-bezier(.87,0,.13,1) .1s both}
.about__kicker,.about__text h1,.about__text > p,.about__icons{animation:c-rise .9s var(--ease) both}
.about__kicker{animation-delay:.3s}
.about__text h1{animation-delay:.4s}
.about__text > p:nth-of-type(2){animation-delay:.7s}
.about__text > p:nth-of-type(3){animation-delay:.8s}
.about__icons{animation-delay:.95s}
.about__rule{animation:c-rule 1.1s cubic-bezier(.87,0,.13,1) .6s both}
.about__loop{animation:c-draw 1.4s cubic-bezier(.45,0,.55,1) 1.1s both}
.about__cross{animation:c-pop .9s cubic-bezier(.34,1.8,.64,1) 1.6s both}
.about__line{animation:c-draw 1.8s cubic-bezier(.45,0,.55,1) 1.3s both}
.about__climber{animation:c-climb 2.8s cubic-bezier(.45,0,.55,1) 2.6s both}
.xp__box{animation:c-rise 1.2s var(--ease) both}
.xp__box:nth-child(1){animation-delay:1.1s}.xp__box:nth-child(2){animation-delay:1.24s}.xp__box:nth-child(3){animation-delay:1.38s}.xp__box:nth-child(4){animation-delay:1.52s}

@keyframes c-open{from{clip-path:circle(0% at 53% 44%)}to{clip-path:circle(75% at 53% 44%)}}
@keyframes c-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes c-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes c-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes c-pop{from{transform:scale(0) rotate(-90deg)}to{transform:none}}
@keyframes c-climb{from{offset-distance:0%}to{offset-distance:100%}}

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */
@media (max-width:1260px){
  .about__grid{grid-template-columns:minmax(0,.95fr) minmax(0,1fr)}
}
@media (max-width:960px){
  .about__grid{grid-template-columns:1fr}
  .about__media{width:min(100% - 48px,400px);margin:12px 0 0}
  .xp__row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .xp__row{grid-template-columns:1fr}
  .ev{grid-template-columns:minmax(0,1fr) 44px;gap:16px 20px;padding:24px 20px}
  .ev__date{grid-row:1;grid-column:1;align-self:center}
  .ev__date time{flex-direction:row;align-items:baseline;gap:8px}
  .ev__date b{font-size:28px;margin:0}
  .ev--studio .ev__date{flex-direction:row;align-items:center}
  .ev__pin{width:22px;height:28px}
  .ev__go{grid-row:1;grid-column:2}
  .ev__body{grid-column:1 / -1}
}

/* the page opens on white, so the nav bar takes the denser compact fill (Glass 86%) to stay charcoal */
.nav .nav__bar{background:rgba(25,28,35,.86)}