/* About and Contact (round 1, 2026-10-30). Loaded after site.css and the rhythm sheets by these two pages only, so
   the approved pages are untouched. Built by build_about and build_contact in build_service.py. */

/* About hero: Cam's photo in a circle, a larger version of the one under Book a Call on the homepage (same crop, violet
   ring and glow), standing where a service page holds its glass object with the hero's light around it. Round 1 cut him
   out of the backdrop and round 2 framed the whole photo; Cam asked for this one (2026-10-30) */
.portrait{position:relative;width:min(380px,28vw);aspect-ratio:1;border-radius:50%;overflow:hidden;
  border:3px solid var(--violet);box-shadow:0 0 0 8px rgba(5,8,15,.6),0 0 70px -8px rgba(168,85,255,.75)}
.portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%}

/* The career timeline: years, a dot on one line, then the stop. The light flows down through the dots (flow shape) */
.tl{list-style:none;position:relative;display:grid;gap:46px;max-width:980px}
.tl::before{content:"";position:absolute;left:calc(150px + 26px + 29px);top:28px;bottom:28px;width:2px;margin-left:-1px;border-radius:1px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bar) 55%,transparent),color-mix(in srgb,var(--bar) 18%,transparent))}
.tl-item{position:relative;display:grid;grid-template-columns:150px 58px minmax(0,1fr);gap:0 26px;align-items:start}
.tl-when{padding-top:16px;text-align:right;font-size:1.02rem;font-weight:700;color:var(--snow);font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:0 0 14px var(--void)}
.tl-dot{position:relative;width:58px;height:58px;border-radius:50%;background:var(--void);border:1px solid var(--bar);
  box-shadow:0 0 0 6px rgba(5,8,15,.9),0 0 34px -6px var(--bar)}
.tl-dot::after{content:"";position:absolute;inset:21px;border-radius:50%;background:var(--bar);box-shadow:0 0 14px var(--bar)}
.tl-body{padding-top:10px;max-width:640px}
.tl-body h3{font-size:clamp(1.4rem,2vw,1.7rem);line-height:1.1;letter-spacing:-.009em;margin-bottom:10px}
.tl-body p{font-size:1.06rem;line-height:1.6;color:var(--body);text-wrap:pretty;text-shadow:0 0 12px var(--void)}
.tl-more{display:flex;width:max-content;align-items:center;gap:6px;min-height:44px;margin-top:4px;font-weight:700;color:var(--amber);white-space:nowrap}
.tl-more:hover{text-decoration:underline;text-underline-offset:4px}

/* What the name means: set like a dictionary entry beside the story */
.name-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px 64px;align-items:start}
.name-grid .sec-head{margin-bottom:0}
.entry{margin-top:34px;padding:24px 26px 26px;border:1px solid rgba(150,180,255,.17);border-radius:20px;background:rgba(30,48,82,.5);max-width:420px}
.entry-word{font-size:clamp(2rem,3vw,2.6rem);font-weight:800;line-height:1;letter-spacing:-.012em}
.entry-say{margin-top:10px;font-size:1.12rem;color:var(--mist)}
.entry-parts{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:18px;padding-top:16px;border-top:1px solid var(--edge);font-size:1.02rem;color:var(--body)}
.entry-parts b{color:var(--snow);font-weight:700;margin-right:4px}
.name-grid .prose{padding-top:6px}

/* Contact: the booking is the first screen. The copy on the left, the live calendar on the right in a card the light
   runs around. Cal.com sets the times beside the dates only when the calendar is about 780 px wide or more, so the
   calendar keeps 800 px on a laptop and the copy takes what is left */
.contact-hero{padding:120px 0 88px}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) 800px;gap:32px 52px;align-items:start}
.contact-copy{padding-top:8px}
.contact-copy h1{font-size:clamp(2.3rem,3vw,2.75rem);line-height:1.05}
.on-call{margin-top:34px;padding-top:26px;border-top:1px solid var(--edge)}
.on-call h2{font-size:1.18rem;letter-spacing:-.004em;margin-bottom:14px}
.on-call ol{list-style:none;display:grid;gap:12px;counter-reset:oc}
.on-call li{position:relative;padding-left:40px;font-size:1.04rem;line-height:1.5;color:var(--body);text-wrap:pretty;counter-increment:oc}
.on-call li::before{content:counter(oc);position:absolute;left:0;top:-1px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-size:.86rem;font-weight:800;color:var(--snow);border:1px solid var(--bar);background:color-mix(in srgb,var(--bar) 12%,transparent)}
.call-note{margin-top:22px;font-size:.96rem;line-height:1.5;color:var(--mist)}
.cal-card{position:relative;border-radius:24px;border:1px solid color-mix(in srgb,var(--bar) 38%,transparent);background:#0c1729;
  box-shadow:0 30px 80px -40px rgba(0,0,0,.9),0 0 60px -30px var(--bar);overflow:hidden;min-height:560px}
.cal-slot{position:relative;z-index:1;width:100%;min-height:560px}
.cal-wait{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;font-size:.98rem;color:var(--mist);z-index:0}
.cal-wait a{color:var(--snow);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--bar)}
.cal-card.ready .cal-wait{display:none}

/* Prefer to write: the direct routes on the left, the form on the right */
.write-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px 64px;align-items:start}
.reach{list-style:none;display:grid;gap:18px;margin-top:4px}
.reach li{display:grid;gap:2px}
.reach span{font-size:.92rem;font-weight:600;color:var(--mist)}
.reach a{justify-self:start;display:inline-flex;align-items:center;min-height:44px;font-size:1.1rem;font-weight:700;color:var(--snow);text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--bar)}
.reach a:hover{color:var(--bar)}
.reach p{font-size:1.04rem;line-height:1.5;color:var(--body)}
.msg{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:28px;border-radius:22px;border:1px solid rgba(150,180,255,.17);background:rgba(30,48,82,.5)}
.mf{display:grid;gap:8px}
.mf.full{grid-column:1/-1}
.mf span{font-size:.94rem;font-weight:600;color:var(--snow)}
.mf input,.mf textarea{width:100%;min-height:50px;padding:13px 15px;border-radius:12px;border:1px solid rgba(150,180,255,.24);background:rgba(5,8,15,.55);
  color:var(--snow);font:inherit;font-size:1rem;line-height:1.4;transition:border-color .2s ease,box-shadow .2s ease}
.mf textarea{resize:vertical;min-height:150px}
.mf input::placeholder{color:var(--dim)}
.mf input:focus,.mf textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(168,85,255,.3)}
.msg .book{grid-column:1/-1;justify-self:start;--bc:var(--violet)}
.msg-note{grid-column:1/-1;font-size:.98rem;line-height:1.5;color:var(--snow);padding:12px 14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--violet) 40%,transparent);background:color-mix(in srgb,var(--violet) 10%,transparent)}

@media (max-width:1100px){
  .about-hero .hero-glass{align-self:auto;margin:0 auto 34px}
  .portrait{width:min(300px,56vw)}
  .contact-grid,.write-grid{grid-template-columns:minmax(0,1fr)}
  /* stacked, the calendar comes straight after the headline; what happens on the call follows it */
  .contact-copy{display:contents}
  .contact-copy > *{max-width:720px}
  .cal-card{order:1}
  .on-call{order:2;margin-top:34px;padding-top:0;border-top:0}
  .call-note{order:3;margin-top:18px}
  .contact-grid{row-gap:0}
  .contact-copy .lede{margin-bottom:30px}
}
@media (max-width:720px){
  .about-hero .hero-inner{padding-top:96px}
  .portrait{width:min(220px,58vw)}
  .tl{gap:34px}
  .tl::before{left:22px}
  .tl-item{grid-template-columns:44px minmax(0,1fr);gap:0 18px}
  .tl-dot{grid-row:1/3;grid-column:1;width:44px;height:44px;box-shadow:0 0 0 5px rgba(5,8,15,.9),0 0 26px -6px var(--bar)}
  .tl-dot::after{inset:15px}
  .tl-when{grid-column:2;grid-row:1;padding-top:0;text-align:left;font-size:.96rem;color:var(--amber)}
  .tl-body{grid-column:2;padding-top:4px}
  .name-grid{grid-template-columns:1fr}
  .entry{margin-top:26px;padding:20px}
  .contact-hero{padding:104px 0 64px}
  .contact-copy h1{font-size:2.45rem}
  .cal-card{border-radius:20px;margin:0 -6px}
  .msg{grid-template-columns:1fr;padding:20px}
  .msg .book{justify-self:stretch;justify-content:center}
}