/* Page-level layout lifted from the handoff's inline <style> block. */
.hero{display:flex;flex-direction:column;justify-content:flex-start;padding:var(--s8) 0 0}
.hero h1{font-size:clamp(56px,9.5vw,128px)}
.hero h1 i{font-style:italic;color:var(--muted)}
.hero .lead{margin-top:var(--s5)}
.cue{margin-top:var(--s6);display:flex;flex-direction:row;align-items:center;gap:var(--s3);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.cue i{display:block;width:1px;height:38px;background:linear-gradient(180deg,var(--signal),transparent);animation:slide 2.6s infinite var(--ease)}
@keyframes slide{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(9px);opacity:1}}
.hero-wrap{position:relative}
.word{display:inline-block;opacity:0;transform:translateY(.34em);animation:rise 1.3s var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.intro{padding-top:var(--s7)}
.work{padding-top:var(--s9)}
.contact{padding-top:var(--s9)}
.contact h2{font-size:clamp(38px,6vw,66px);max-width:16ch}
.also{margin-top:var(--s8)}
.also-group{display:grid;grid-template-columns:150px 1fr;gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--line);align-items:start}
.also-group:first-of-type{border-top:1px solid var(--line)}
.also-group>h4{font-family:var(--font-mono);font-weight:400;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding-top:5px}
.also-list{display:flex;flex-direction:column;gap:var(--s2)}
.also-list div{display:flex;justify-content:space-between;gap:var(--s4);font-size:14.5px;color:var(--text);max-width:44ch;transition:color .35s var(--ease)}
.also-entry{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
/* min-width:0 lets a long entry wrap instead of overflowing the column —
   flex items default to min-width:auto and refuse to shrink below their text. */
.also-label{min-width:0}
/* Replaces the old row-wide hover: the link is the only interactive part. */
.also-view{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);border-bottom:1px solid transparent;padding-bottom:1px;transition:color .3s var(--ease),border-color .3s var(--ease)}
.also-view:hover{color:var(--signal);border-color:var(--signal)}
.also-view svg{flex:none;transform:translateY(-.5px)}
.also-list time{font-family:var(--font-mono);font-size:11px;color:var(--faint)}
@media (max-width:900px){.also-group{grid-template-columns:1fr}}

/* Staged hero reveal — reuses the `rise` keyframes above. Each element
   carries its own animation-delay, computed in hero.blade.php so the
   cascade adapts to however many words the headline has. */
.hero-reveal{opacity:0;transform:translateY(16px);animation:rise 1.1s var(--ease) forwards}

/* ── hero portrait ──────────────────────────────── */
.hero-grid{display:grid;grid-template-columns:1fr auto;gap:var(--s6);align-items:end}
/* The portrait is the tallest grid item, so bottom-alignment puts its top
   flush against the headline. The margin buys back the clearance. */
.portrait{width:210px;justify-self:end;margin:var(--s5) 0 0}
.portrait-frame{width:100%;aspect-ratio:4/5;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){
  /* Most visitors arrive from LinkedIn on a phone, so the portrait stays.
     The left column is flattened with display:contents so the lead, portrait
     and cue become sibling grid items and can be ordered independently —
     that keeps the visual order identical to the reveal order. */
  .hero-grid{grid-template-columns:1fr;gap:var(--s5)}
  .hero-grid>div{display:contents}
  .lead{order:1}
  .portrait{order:2;width:128px;justify-self:start;margin:0}
  .cue{order:3;margin-top:var(--s2)}
}
}

.p-link{color:var(--muted);border-bottom:1px solid var(--line-strong);padding-bottom:2px;transition:color .3s var(--ease),border-color .3s var(--ease)}
.p-link:hover{color:var(--signal);border-color:var(--signal)}

/* Contact form states — added for the live form. */
.form-error{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:#c98a7d;margin-top:var(--s1)}
.form-note{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--signal);margin-top:var(--s4)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#c98a7d}
.submit[disabled]{opacity:.5;cursor:progress}