/* ============================================================
   EXPLORE HARNESS — structural stylesheet (theme-agnostic)
   All themeable values come from CSS vars set by theme-*.css.
   Add a new direction = one new theme file, no markup changes.
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scrollbar-gutter:stable; }
body{
  font-family:var(--font-sans); font-size:16px; line-height:1.6;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .3s ease, color .3s ease;
  /* sticky footer: short pages (e.g. contact) still push the footer to the
     viewport bottom instead of leaving a gap of body background beneath it */
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
}
body > main{ flex:1 0 auto; }
a{ color:inherit; text-decoration:none; }

/* Consistent keyboard focus ring (token-based, on-brand). Only shows for
   keyboard/AT focus (:focus-visible), never on mouse click. The accent meets
   the 3:1 non-text-contrast bar in both themes. */
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

/* Animated text-link underline — a 3px ink underline that simply FADES in on
   hover and out on hover-out (no directional wipe). Built with text-decoration
   so it hugs the text (not the box width), underlines every wrapped line, and
   keeps a consistent baseline-relative gap via text-underline-offset regardless
   of the element's line-height. The fade animates text-decoration-color
   (transparent <-> currentColor). Timing: --dur-base. Reusable: add
   `.link-underline` to any inline text link, or use the grouped selectors. */
.link-underline,
.cs-section__body p a,
.about__bio p a,
.contact__intro a{
  text-decoration:underline;
  text-decoration-thickness:3px;
  text-underline-offset:4px;
  text-decoration-color:transparent;
  transition:text-decoration-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.link-underline:hover,
.cs-section__body p a:hover,
.about__bio p a:hover,
.contact__intro a:hover{
  text-decoration-color:currentColor;
}

/* Click-to-copy email — replaces mailto: links (never use mailto:, see CLAUDE.md).
   Reads as an in-context text link (inherits surrounding color + the underline
   group above); on click it copies the address (landing.js) and shows a
   transient .copy-toast popover that auto-dismisses after 3s. */
.copy-email{
  font:inherit; color:inherit; background:none; border:0; padding:0; margin:0;
  cursor:pointer; position:relative; transition:color var(--dur-base) var(--ease-out);
}
.copy-email:hover{ color:var(--accent); }            /* inline (e.g. contact intro): ink -> accent */
.foot__meta .copy-email{ color:var(--ink-soft); }     /* footer: matches the other foot links */
.foot__meta .copy-email:hover{ color:var(--ink); }
.copy-toast{
  position:absolute; bottom:calc(100% + var(--space-2)); left:50%;
  transform:translateX(-50%) translateY(4px);
  background:var(--surface); color:var(--ink);
  border:var(--border-w) solid var(--line-strong); border-radius:var(--radius-btn);
  padding:var(--space-1) var(--space-3);
  font-family:var(--font-meta); font-size:var(--text-xs); font-weight:var(--weight-label);
  letter-spacing:0.01em; white-space:nowrap; text-decoration:none;
  box-shadow:var(--card-hover-shadow);
  opacity:0; pointer-events:none; z-index:20;
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.copy-toast.is-visible{ opacity:1; transform:translateX(-50%) translateY(0); }
::selection{ background:var(--ink); color:var(--bg); }

.ambient{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:var(--ambient,transparent);
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{ from{ transform:translate3d(-2%,-1%,0);} to{ transform:translate3d(3%,2%,0);} }

.wrap{ position:relative; z-index:1; max-width:1140px; margin:0 auto; padding:0 var(--space-8); }

/* NAV */
.nav{ position:sticky; top:0; z-index:20; background:var(--nav-bg); backdrop-filter:saturate(140%) blur(10px); -webkit-backdrop-filter:saturate(140%) blur(10px); border-bottom:var(--border-w) solid var(--line); }
.nav__inner{ max-width:1140px; margin:0 auto; padding:18px var(--space-8); display:flex; align-items:center; justify-content:space-between; }
/* brand = logo lockup (mark + Newsreader wordmark), locked across skins, theme-aware via vars */
.brand{ display:inline-flex; align-items:center; gap:11px; color:var(--ink); }
.brand__mark{ height:28px; width:auto; flex-shrink:0; display:block; }
.brand__mark .dot{ fill:var(--accent, currentColor); }
.brand__mark .bar{ fill:currentColor; }
.brand__name{ font-family:'Newsreader',Georgia,serif; font-weight:500; font-size:20px; letter-spacing:-0.01em; line-height:1; }
.nav__right{ display:flex; align-items:center; gap:28px; }
.nav__links{ display:flex; gap:30px; list-style:none; }
.nav__links a{ font-size:14px; color:var(--ink-soft); text-transform:var(--nav-transform,none); letter-spacing:var(--nav-ls,0); transition:color var(--dur-base) var(--ease-out); }
.nav__links a:hover{ color:var(--ink); }
.nav__cta{ font-size:var(--text-sm); font-weight:var(--weight-label); color:var(--btn-ink); background:var(--btn-bg); padding:9px var(--space-4); border-radius:var(--radius-btn); text-transform:var(--btn-transform,none); letter-spacing:var(--btn-ls,0); transition:transform .15s, background var(--dur-base); }
.nav__cta:hover{ background:var(--btn-hover); }
.nav__cta:active{ transform:scale(.98); }

/* HERO */
.hero{ padding:110px 0 var(--space-24); }
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:var(--space-14); align-items:center; }
.status{ display:inline-flex; align-items:center; gap:var(--space-2); font-family:var(--font-meta,var(--font-sans)); font-size:12px; font-weight:var(--weight-label); letter-spacing:.04em; text-transform:uppercase; color:var(--status-ink); background:var(--status-bg); padding:7px 13px; border-radius:var(--radius-pill,9999px); margin-bottom:30px; }
.status .dot{ width:7px; height:7px; border-radius:50%; background:var(--status-ink); box-shadow:0 0 0 3px var(--status-halo,transparent); }
.hero h1{ font-family:var(--font-display); font-weight:var(--display-weight); font-size:var(--display-size); line-height:var(--display-lh); letter-spacing:var(--display-ls); text-transform:var(--display-transform,none); color:var(--ink); }
.hero h1 em{ font-style:var(--em-style,normal); font-weight:var(--em-weight,inherit); }
.hero__sub{ margin-top:var(--space-6); font-size:18px; line-height:1.6; color:var(--muted); max-width:40ch; }
.hero__actions{ margin-top:36px; display:flex; gap:var(--space-3); flex-wrap:wrap; }
.btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-sans); font-size:15px; font-weight:var(--weight-label); padding:13px 22px; border-radius:var(--radius-btn); text-transform:var(--btn-transform,none); letter-spacing:var(--btn-ls,0); transition:transform .15s, background var(--dur-base), border-color var(--dur-base); }
.btn svg{ width:16px; height:16px; }
.btn--solid{ background:var(--btn-bg); color:var(--btn-ink); }
.btn--solid:hover{ background:var(--btn-hover); }
.btn--ghost{ border:var(--border-w) solid var(--line); color:var(--ink); background:var(--surface); }
.btn--ghost:hover{ border-color:var(--muted); }
.btn:active{ transform:scale(.98); }

/* hero dot lattice — scattered dots (logo DNA) assemble into a structured grid.
   Generated by landing.js: plays once on load, replays on hover. The dots are
   pointer-events:none so the scatter can sweep over the headline/buttons purely
   visually, never intercepting clicks. */
.hero__lattice{ position:relative; display:grid; width:100%; max-width:460px; margin-inline:auto; aspect-ratio:1; }
/* dots: transform + opacity driven per-frame by landing.js (assemble + life + magnetic) */
.hero__lattice .dot{ width:11px; height:11px; border-radius:50%; background:var(--accent); place-self:center; position:relative; z-index:1; pointer-events:none; opacity:0; will-change:transform,opacity; }
/* solid, fully-connected lines that fade in together once JS adds .mesh-in */
.hero__lattice .mesh{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0; opacity:0; transition: opacity var(--dur-slow) var(--ease-out); }
.hero__lattice.mesh-in .mesh{ opacity:1; }
.hero__lattice .mesh line{ stroke:var(--accent); stroke-width:1; vector-effect:non-scaling-stroke; opacity:.26; }
@media (prefers-reduced-motion:reduce){
  .hero__lattice .mesh{ transition:none; }
}

/* SECTION */
.section{ padding:var(--space-10) 0 var(--space-24); }
.section__head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-4); margin-bottom:36px; border-bottom:var(--head-rule,0) solid var(--line); padding-bottom:var(--head-rule-pad,0); }
.section__title{ font-family:var(--font-display); font-weight:var(--display-weight); font-size:30px; letter-spacing:var(--display-ls); text-transform:var(--display-transform,none); }
.section__meta{ font-family:var(--font-meta,var(--font-mono)); font-size:12px; color:var(--muted); text-transform:var(--meta-transform,none); }

/* WORK BENTO */
/* align-content:start so the reserved min-height (set in landing.js to stop
   filter-induced layout jumps) becomes empty space below the cards rather than
   stretching the rows to fill it */
.bento{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--bento-gap,18px); align-content:start; }
.work{ grid-column:span 6; position:relative; display:flex; flex-direction:column; gap:var(--space-4); background:var(--surface); border:var(--border-w) solid var(--line); border-radius:var(--radius-card); padding:34px 34px 30px; min-height:230px; transition:box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.work:hover{ box-shadow:var(--card-hover-shadow,none); transform:translateY(-3px); border-color:var(--line-strong,var(--line)); }
.work.span7{ grid-column:span 7; }
.work.span5{ grid-column:span 5; }
.work__top{ display:flex; align-items:center; justify-content:space-between; }
.work__co{ font-family:var(--font-meta,var(--font-mono)); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.work__idx{ font-family:var(--font-meta,var(--font-mono)); font-size:11px; color:var(--accent); margin-left:auto; }
.work__title{ font-family:var(--font-display); font-weight:var(--display-weight); font-size:25px; line-height:1.15; letter-spacing:var(--display-ls); color:var(--ink); text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:4px; text-decoration-color:transparent; transition:text-decoration-color var(--dur-base) var(--ease-out); }
.work:hover .work__title{ text-decoration-color:var(--accent); }
.work__go{ display:inline-flex; align-items:center; margin-left:var(--space-2); color:var(--accent); opacity:0; transform:translateX(-6px); transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.work__go svg{ width:20px; height:20px; }
.work:hover .work__go{ opacity:1; transform:none; }
.work__desc{ font-size:15px; line-height:1.55; color:var(--muted); flex:1; }
.tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; }
.tag{ font-family:var(--font-meta,var(--font-sans)); font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); background:var(--surface-2); border:var(--border-w) solid var(--line); padding:4px 9px; border-radius:var(--radius-pill,9999px); }

/* FILTER CHIPS */
.filters{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:30px; }
.chip{ font-family:var(--font-sans); font-size:13px; font-weight:500; letter-spacing:var(--btn-ls,0); text-transform:var(--btn-transform,none); color:var(--ink-soft); background:var(--surface-2); border:var(--border-w) solid var(--line); border-radius:var(--radius-pill,9999px); padding:8px 14px; cursor:pointer; transition:background .18s, color .18s, border-color .18s, transform .12s; }
.chip:hover{ color:var(--ink); border-color:var(--line-strong,var(--muted)); }
.chip[aria-pressed="true"]{ background:var(--btn-bg); color:var(--btn-ink); border-color:var(--btn-bg); }
.chip:active{ transform:scale(.96); }
.filters__clear{ font-family:var(--font-sans); font-size:12.5px; font-weight:600; color:var(--muted); background:none; border:0; cursor:pointer; padding:8px 8px; letter-spacing:.02em; text-transform:var(--btn-transform,none); }
.filters__clear:hover{ color:var(--ink); }
.filters__clear[hidden]{ display:none; }
.work.is-hidden{ display:none; }

/* FOOTER */
.foot{ border-top:var(--border-w) solid var(--line); }
.foot__inner{ max-width:1140px; margin:0 auto; padding:28px var(--space-8); display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; }
.foot__brand{ font-family:var(--font-brand); font-size:16px; text-transform:var(--brand-transform,none); letter-spacing:var(--brand-ls); }
.foot__meta{ font-family:var(--font-meta,var(--font-mono)); font-size:12px; color:var(--muted); display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.foot__meta a{ color:var(--ink-soft); } .foot__meta a:hover{ color:var(--ink); }
.foot__top{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-meta,var(--font-mono)); font-size:12px; color:var(--ink-soft); background:none; border:0; cursor:pointer; padding:0; transition:color var(--dur-base); }
.foot__top:hover{ color:var(--ink); }
.foot__top svg{ width:13px; height:13px; transition:transform var(--dur-base) var(--ease-out); }
.foot__top:hover svg{ transform:translateY(-3px); }

/* reveal */
.reveal{ opacity:0; transform:translateY(12px); transition:opacity var(--dur-xslow) var(--ease-out), transform var(--dur-xslow) var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }

@media (max-width:900px){
  .hero__grid{ grid-template-columns:1fr; gap:var(--space-6); }
  /* Lattice flows full-width below the hero copy on single-column. */
  .hero__lattice{ margin-top:var(--space-6); max-width:340px; }
  .work,.work.span7,.work.span5{ grid-column:span 12; }
  .section__title{ font-size:26px; }
}
@media (max-width:560px){
  .wrap,.nav__inner,.foot__inner{ padding-left:var(--space-5); padding-right:var(--space-5); }
  .hero{ padding:var(--space-16) 0; }
  /* keep the three nav links visible on phones — tighten spacing/size so they fit */
  .nav__right{ gap:var(--space-4); }
  .nav__links{ gap:var(--space-4); }
  .nav__links a{ font-size:var(--text-sm); }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ============================================================
   THEME TOGGLE (light/dark — orthogonal to the skin picker)
   ============================================================ */
.theme-toggle{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:9999px; border:var(--border-w) solid var(--line); background:var(--surface-2); color:var(--ink-soft); cursor:pointer; transition:color var(--dur-base), background var(--dur-base), border-color var(--dur-base); }
/* expand the touch target to 44x44 (best practice) without growing the 36px
   visual circle — a transparent inset overlay carries the extra hit area */
.theme-toggle::before,.nav__toggle::before{ content:""; position:absolute; inset:-4px; }
.theme-toggle:hover{ color:var(--ink); }
.theme-toggle svg{ width:17px; height:17px; }
.theme-toggle .moon{ display:none; }
html[data-theme="dark"] .theme-toggle .sun{ display:none; }
html[data-theme="dark"] .theme-toggle .moon{ display:inline; }
.nav__links a.active{ color:var(--ink); }

/* ============================================================
   MOBILE NAV (hamburger -> full-screen overlay, <=600px)
   Built by landing.js; the .nav-ready flag is added once JS has
   wired it up, so the inline links stay (never a dead hamburger)
   if JS is absent.
   ============================================================ */
.nav__toggle{
  display:none; /* desktop uses the inline links instead */
  position:relative;
  width:36px; height:36px; padding:0; align-items:center; justify-content:center;
  background:var(--surface-2); border:var(--border-w) solid var(--line); border-radius:9999px;
  color:var(--ink-soft); cursor:pointer;
  transition:color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.nav__toggle:hover{ color:var(--ink); }
.nav__toggle-box{ position:relative; display:block; width:16px; height:12px; }
.nav__toggle-bar{
  position:absolute; left:0; width:100%; height:2px; border-radius:2px; background:currentColor;
  transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav__toggle-bar:nth-child(1){ top:0; }
.nav__toggle-bar:nth-child(2){ bottom:0; }
/* open: the two bars cross into an X */
html.nav-open .nav__toggle-bar:nth-child(1){ transform:translateY(5px) rotate(45deg); }
html.nav-open .nav__toggle-bar:nth-child(2){ transform:translateY(-5px) rotate(-45deg); }

/* lock background scroll while the overlay is open */
html.nav-open{ overflow:hidden; }

/* full-screen overlay sits BELOW the nav bar (z-index 20) so the bar —
   theme toggle + the close (X) — stays visible and usable while open */
.nav__overlay{
  position:fixed; inset:0; z-index:15;
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--space-24) var(--space-8) var(--space-12);
  background:var(--bg);
  opacity:0; visibility:hidden;
  transition:opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.nav__overlay:focus{ outline:none; } /* dialog container is focused on open; no visible ring */
.nav__overlay.is-open{ opacity:1; visibility:visible; transition:opacity var(--dur-slow) var(--ease-out); }
.nav__overlay-links{ list-style:none; display:flex; flex-direction:column; gap:var(--space-6); }
.nav__overlay-links a{
  display:inline-block;
  font-family:var(--font-display); font-size:var(--text-4xl); font-weight:var(--display-weight);
  letter-spacing:var(--display-ls); line-height:1.1; color:var(--ink-soft);
  opacity:0; transform:translateY(16px);
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.nav__overlay-links a:hover,
.nav__overlay-links a.active{ color:var(--ink); }
.nav__overlay.is-open .nav__overlay-links a{ opacity:1; transform:none; }
/* staggered reveal of the links */
.nav__overlay.is-open .nav__overlay-links li:nth-child(1) a{ transition-delay:80ms; }
.nav__overlay.is-open .nav__overlay-links li:nth-child(2) a{ transition-delay:140ms; }
.nav__overlay.is-open .nav__overlay-links li:nth-child(3) a{ transition-delay:200ms; }
.nav__overlay.is-open .nav__overlay-links li:nth-child(4) a{ transition-delay:260ms; }

/* show the hamburger / hide the inline links only once JS is ready, at <=600 */
@media (max-width:600px){
  html.nav-ready .nav__links{ display:none; }
  html.nav-ready .nav__toggle{ display:inline-flex; }
}
/* never expose the overlay above the breakpoint (e.g. if resized while open) */
@media (min-width:601px){
  .nav__overlay{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .nav__overlay-links a{ transition-delay:0ms !important; transform:none; }
}

/* ============================================================
   ABOUT (inline section)
   ============================================================ */
.about{ padding:clamp(60px,9vw,110px) 0; }
.about__top{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(36px,5vw,64px); align-items:start; }
/* right column stacks portrait -> Experience -> Focus areas; the left column
   holds just the bio, so the tall bio never pushes the panels into a void */
.about__copy{ display:flex; flex-direction:column; }
.about__aside{ display:flex; flex-direction:column; gap:var(--space-12); }
.about__title{ font-family:var(--font-display); font-weight:var(--display-weight); font-size:clamp(28px,4vw,46px); line-height:1.06; letter-spacing:var(--display-ls); text-transform:var(--display-transform,none); color:var(--ink); margin-bottom:22px; }
.about__title em{ font-style:var(--em-style,normal); font-weight:var(--em-weight,inherit); }
.about__bio{ display:flex; flex-direction:column; gap:15px; max-width:44ch; }
/* note: clamp() spacing/type above kept as literals — fluid, not on the fixed scale */
.about__bio p{ font-size:16.5px; line-height:1.66; color:var(--muted); }
.about__bio strong{ color:var(--ink); font-weight:var(--weight-label); }
.about__portrait{ width:100%; max-width:360px; aspect-ratio:1/1; margin-inline:auto; border-radius:50%; overflow:hidden; border:var(--border-w) solid var(--line); box-shadow:var(--tile-shadow,none); }
.about__portrait img{ width:100%; height:100%; object-fit:cover; display:block; }

/* About: experience + focus panels (balanced two-up below the bio/portrait row) */
.about__panel-title{ font-family:var(--font-meta); font-size:var(--text-xs); font-weight:var(--weight-label); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--space-4); }
.about__experience{ list-style:none; display:flex; flex-direction:column; gap:var(--space-3); }
.about__role{ font-size:var(--text-base); line-height:1.5; color:var(--muted); }
.about__role-co{ color:var(--ink); font-weight:var(--weight-label); }
.about__focus{ list-style:none; display:flex; flex-wrap:wrap; gap:var(--space-2); }
.about__focus-tag{ font-family:var(--font-meta,var(--font-sans)); font-size:10.5px; font-weight:var(--weight-label); letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); background:var(--surface-2); border:var(--border-w) solid var(--line); padding:var(--space-1) 9px; border-radius:var(--radius-pill,9999px); }

/* ============================================================
   CONTACT (inline section + Formspree form)
   ============================================================ */
.contact{ padding:clamp(40px,6vw,70px) 0 clamp(80px,12vw,130px); }
.contact__title{ font-family:var(--font-display); font-weight:var(--display-weight); font-size:clamp(28px,4vw,46px); line-height:1.05; letter-spacing:var(--display-ls); text-transform:var(--display-transform,none); color:var(--ink); margin-bottom:14px; }
.contact__intro{ color:var(--muted); font-size:16.5px; line-height:1.6; margin-bottom:34px; max-width:48ch; }
.contact__intro a{ color:var(--ink); }
.form{ max-width:600px; display:flex; flex-direction:column; gap:var(--space-5); }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form__field{ display:flex; flex-direction:column; gap:var(--space-2); }
.form__label{ font-family:var(--font-meta,var(--font-sans)); font-size:11px; font-weight:var(--weight-label); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.form__input,.form__textarea{ font-family:var(--font-sans); font-size:15px; color:var(--ink); background:var(--surface); border:var(--border-w) solid var(--line); border-radius:var(--radius-btn); padding:13px 15px; width:100%; outline:none; -webkit-appearance:none; transition:border-color .18s, box-shadow .18s; }
.form__input::placeholder,.form__textarea::placeholder{ color:var(--muted); opacity:.85; }
.form__input:focus,.form__textarea:focus{ border-color:var(--ink); box-shadow:0 0 0 3px var(--status-halo,rgba(0,0,0,.08)); }
.form__textarea{ resize:vertical; min-height:150px; line-height:1.6; }
.form__submit{ align-self:flex-start; }
.form__submit:disabled{ opacity:.5; cursor:not-allowed; }
.form-status{ display:none; padding:14px 18px; border-radius:var(--radius-btn); font-size:14px; line-height:1.5; background:var(--status-bg); color:var(--status-ink); }
.form-status.is-visible{ display:block; }
.form-status a{ color:var(--status-ink); text-decoration:underline; }

@media (max-width:900px){
  /* single column: portrait first, then bio + experience, then focus areas.
     display:contents lets the aside's children reorder against the copy block */
  .about__top{ display:flex; flex-direction:column; gap:30px; }
  .about__aside{ display:contents; }
  .about__portrait{ order:-1; max-width:230px; }
}
/* note: .form-status, .contact__intro, .about__bio p line literals (15/16.5px, .18s) kept — not exact scale matches */
@media (max-width:600px){
  .form__row{ grid-template-columns:1fr; }
  .form__submit{ width:100%; justify-content:center; }
}