/* Self-hosted so the site satisfies font-src 'self'. Latin subsets only. */
@font-face{font-family:"Lato";font-style:italic;font-weight:400;font-display:swap;src:url("/font/lato-italic-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Lato";font-style:italic;font-weight:400;font-display:swap;src:url("/font/lato-italic-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Lato";font-style:normal;font-weight:300;font-display:swap;src:url("/font/lato-normal-300-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Lato";font-style:normal;font-weight:300;font-display:swap;src:url("/font/lato-normal-300-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Lato";font-style:normal;font-weight:400;font-display:swap;src:url("/font/lato-normal-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Lato";font-style:normal;font-weight:400;font-display:swap;src:url("/font/lato-normal-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Lato";font-style:normal;font-weight:700;font-display:swap;src:url("/font/lato-normal-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Lato";font-style:normal;font-weight:700;font-display:swap;src:url("/font/lato-normal-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Lato";font-style:normal;font-weight:900;font-display:swap;src:url("/font/lato-normal-900-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Lato";font-style:normal;font-weight:900;font-display:swap;src:url("/font/lato-normal-900-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400 600;font-display:swap;src:url("/font/playfair-display-italic-400-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400 600;font-display:swap;src:url("/font/playfair-display-italic-400-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 700;font-display:swap;src:url("/font/playfair-display-normal-400-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 700;font-display:swap;src:url("/font/playfair-display-normal-400-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}


/* ── colors ── */
:root{
  /* ── Brand palette (source values, do not alter) ── */
  --olive-600:#606C38;
  --olive-900:#283618;
  --cream-050:#FEFAE0;
  --rust-600:#9E2A2B;
  --rust-900:#540B0E;

  /* ── Derived olive ramp ── */
  --olive-050:oklch(97% 0.022 118);
  --olive-100:oklch(94% 0.035 118);
  --olive-200:oklch(88% 0.048 118);
  --olive-300:oklch(78% 0.062 118);
  --olive-400:oklch(68% 0.070 118);
  --olive-500:oklch(58% 0.072 118);
  --olive-700:oklch(42% 0.058 122);
  --olive-800:oklch(34% 0.050 124);

  /* ── Derived rust ramp ── */
  --rust-100:oklch(93% 0.030 25);
  --rust-300:oklch(76% 0.090 26);
  --rust-500:oklch(52% 0.150 26);
  --rust-700:oklch(38% 0.130 25);

  /* ── Paper neutrals (warm, never grey) ── */
  --paper-000:#FFFDF3;
  --paper-100:var(--cream-050);
  --paper-200:oklch(96% 0.026 96);
  --paper-300:oklch(92% 0.024 96);
  --paper-400:oklch(86% 0.020 96);
  --ink-500:oklch(52% 0.018 120);
  --ink-700:oklch(38% 0.022 122);
  --ink-900:var(--olive-900);

  /* ── Semantic surfaces ── */
  --surface-page:var(--paper-100);
  --surface-raised:var(--paper-000);
  --surface-card:var(--paper-000);
  --surface-sunken:var(--paper-200);
  --surface-inverse:var(--olive-900);
  --surface-accent:var(--olive-600);
  --surface-signal:var(--rust-600);

  /* ── Semantic text ── */
  --text-body:var(--ink-700);
  --text-heading:var(--ink-900);
  --text-muted:var(--ink-500);
  --text-inverse:var(--cream-050);
  --text-accent:var(--olive-700);
  --text-signal:var(--rust-900);
  --text-link:var(--rust-600);
  --text-link-hover:var(--rust-900);

  /* ── Lines ── */
  --line-hairline:oklch(86% 0.020 96);
  --line-strong:var(--olive-900);
  --line-accent:var(--olive-600);
  --line-inverse:oklch(45% 0.040 122);

  /* ── Status (used sparingly: form validation only) ── */
  --status-error:var(--rust-600);
  --status-error-surface:var(--rust-100);
  --status-ok:var(--olive-600);
  --status-ok-surface:var(--olive-100);

  /* ── Focus ── */
  --focus-ring:var(--rust-600);
}

/* ── typography ── */
:root{
  --font-serif-display:"Playfair Display","Playfair Display Local",Georgia,"Times New Roman",serif;
  --font-sans-text:"Lato","Lato Local","Helvetica Neue",Helvetica,sans-serif;
  --font-mono-data:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; /* @kind font */

  /* Roles */
  --text-display:var(--font-serif-display);
  --text-heading-family:var(--font-serif-display);
  --text-body-family:var(--font-sans-text);
  --text-data-family:var(--font-mono-data);

  /* Scale — 1.25 ratio off a 17px body */
  --fs-100:0.6875rem; /* 11px  eyebrow / label */
  --fs-200:0.8125rem; /* 13px  caption, table data */
  --fs-300:0.9375rem; /* 15px  small body, UI */
  --fs-400:1.0625rem; /* 17px  body */
  --fs-500:1.3125rem; /* 21px  lede, h4 */
  --fs-600:1.625rem;  /* 26px  h3 */
  --fs-700:2.125rem;  /* 34px  h2 */
  --fs-800:2.875rem;  /* 46px  h1 */
  --fs-900:4rem;      /* 64px  hero */

  /* Weights — Lato 300/400/700/900, Playfair 400/500/700 */
  --fw-light:300; /* @kind other */
  --fw-regular:400; /* @kind other */
  --fw-medium:500; /* @kind other */
  --fw-bold:700; /* @kind other */
  --fw-black:900; /* @kind other */

  /* Line heights */
  --lh-tight:1.06; /* @kind other */
  --lh-heading:1.18; /* @kind other */
  --lh-snug:1.4; /* @kind other */
  --lh-body:1.62; /* @kind other */
  --lh-loose:1.8; /* @kind other */

  /* Tracking */
  --ls-display:-0.015em; /* @kind other */
  --ls-tight:-0.005em; /* @kind other */
  --ls-normal:0; /* @kind other */
  --ls-label:0.14em; /* @kind other */ /* small-caps eyebrows */
  --ls-wide:0.05em; /* @kind other */

  /* Measure */
  --measure-prose:66ch; /* @kind other */
  --measure-narrow:52ch; /* @kind other */
}

/* ── spacing ── */
:root{
  /* 4px base, hand-tuned at the top end for editorial whitespace */
  --sp-0:0; /* @kind spacing */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:24px;
  --sp-6:32px;
  --sp-7:48px;
  --sp-8:64px;
  --sp-9:96px;
  --sp-10:128px;

  /* Layout */
  --container-max:1180px; /* @kind spacing */
  --container-prose:720px; /* @kind spacing */
  --gutter:var(--sp-5);
  --gutter-lg:var(--sp-7);
  --section-y:var(--sp-9);
  --section-y-tight:var(--sp-8);
  --grid-columns:12; /* @kind spacing */
  --grid-gap:var(--sp-5);
  --header-h:72px; /* @kind spacing */
}

/* ── borders ── */
:root{
  /* Radii — near-square. Print, drafting sheets, not app chrome. */
  --radius-0:0;
  --radius-1:2px;
  --radius-2:3px;
  --radius-pill:999px;

  /* Widths */
  --bw-hairline:1px; /* @kind other */
  --bw-medium:2px; /* @kind other */
  --bw-rule:3px; /* @kind other */ /* section rule under headings */

  /* Composed borders */
  --border-hairline:var(--bw-hairline) solid var(--line-hairline); /* @kind other */
  --border-strong:var(--bw-hairline) solid var(--line-strong); /* @kind other */
  --border-accent:var(--bw-medium) solid var(--line-accent); /* @kind other */
  --border-inverse:var(--bw-hairline) solid var(--line-inverse); /* @kind other */
}

/* ── elevation ── */
:root{
  /* Elevation is carried by hairlines and paper tone, not by soft shadows.
     Shadows are warm, tight, and used only on overlays. */
  --shadow-none:none;
  --shadow-lift:0 1px 0 0 oklch(86% 0.020 96);
  --shadow-card:0 1px 2px oklch(38% 0.022 122 / 0.06),0 0 0 1px oklch(86% 0.020 96);
  --shadow-overlay:0 12px 32px -8px oklch(38% 0.022 122 / 0.22),0 0 0 1px oklch(86% 0.020 96);
  --shadow-inset-well:inset 0 1px 0 oklch(86% 0.020 96);
  --focus-shadow:0 0 0 2px var(--surface-page),0 0 0 4px var(--focus-ring);
}

/* ── motion ── */
:root{
  --dur-fast:120ms; /* @kind other */
  --dur-base:180ms; /* @kind other */
  --dur-slow:320ms; /* @kind other */
  --ease-standard:cubic-bezier(0.2,0,0.2,1); /* @kind other */
  --ease-out:cubic-bezier(0,0,0.2,1); /* @kind other */
  --ease-in-out:cubic-bezier(0.4,0,0.2,1); /* @kind other */
  --transition-color:color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard); /* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{
  --dur-fast:0ms; /* @kind other */
  --dur-base:0ms; /* @kind other */
  --dur-slow:0ms; /* @kind other */
}}

/* ── base ── */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--text-body-family);font-size:var(--fs-400);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--text-heading-family);color:var(--text-heading);font-weight:var(--fw-bold);line-height:var(--lh-heading);letter-spacing:var(--ls-tight);margin:0 0 var(--sp-4)}
h1{font-size:var(--fs-800);line-height:var(--lh-tight);letter-spacing:var(--ls-display)}
h2{font-size:var(--fs-700)}
h3{font-size:var(--fs-600)}
h4{font-size:var(--fs-500);font-weight:var(--fw-medium)}
p{margin:0 0 var(--sp-4);max-width:var(--measure-prose)}
a{color:var(--text-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:var(--transition-color)}
a:hover{color:var(--text-link-hover);text-decoration-thickness:2px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--focus-shadow);border-radius:var(--radius-1)}
small{font-size:var(--fs-200)}
hr{border:0;border-top:var(--border-hairline);margin:var(--sp-6) 0}
.eyebrow{font-family:var(--text-body-family);font-size:var(--fs-100);font-weight:var(--fw-bold);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-accent)}
.prose{max-width:var(--measure-prose)}

/* ── page ── */
html { scroll-behavior: smooth; }
:root { --frame-w: 20px; --frame-w-b: 12px;
        --banner-full: calc((100vw - 56px) * 0.3335);
        --banner-h: min(calc(var(--banner-full) * 0.60), 46vh);
        --banner-h-peak: min(calc(var(--banner-h) + var(--banner-full) * 0.40),
                             var(--banner-full)); }
.sheet { border: var(--frame-w) solid var(--line-strong); border-top-width: 0; border-bottom-width: var(--frame-w-b); }
/* the top band rides with the sticky nav so the frame never opens up */
.sheet > header { border-top: var(--frame-w) solid var(--line-strong); }
body { margin: 0; padding: 0; background: var(--surface-page); color: var(--text-body); font-family: var(--text-body-family); font-size: var(--fs-400); line-height: var(--lh-body); }
a { color: var(--text-link); text-decoration: none; border-bottom: 1px solid var(--rust-300); transition: var(--transition-color); }
a:hover { color: var(--text-link-hover); border-bottom-width: 2px; }
h1, h2, h3, h4 { font-family: var(--text-heading-family); color: var(--text-heading); letter-spacing: var(--ls-tight); line-height: var(--lh-heading); }
p { text-wrap: pretty; }
/* <picture> wraps the banner for art direction; keep it laying out
   exactly as the bare <img> did. */
#about picture { display: block; }

/* The banner opens up as you scroll, revealing more of the frame rather than
   magnifying it — the crop is already tight vertically, so zooming in would
   only cost detail. Animating height means the image below it shifts down a
   little as the banner grows; that is inherent to expanding the crop.
   Scroll-driven, so no JavaScript is involved (production CSP allows exactly
   one hash-pinned inline script). Browsers without animation-timeline, and
   anyone asking for reduced motion, get the banner at its resting height. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    @keyframes banner-reveal {
      from { height: var(--banner-h); }
      50%  { height: var(--banner-h-peak); }
      to   { height: var(--banner-h); }
    }
    img[src$="banner.webp"] {
      animation: banner-reveal linear both;
      /* Driven by page scroll, not the banner's own view() range: the banner
         sits high enough that view() is already mid-range at scroll 0, so the
         page would load already expanded and only ever contract. */
      animation-timeline: scroll(root block);
      /* It clears the top of the viewport at roughly 0.8 viewport heights, so
         the cycle has to finish inside that or the closing half is unseen. */
      animation-range: 0 86vh;
    }
  }
}

/* 96 classes lifted out of inline styles */
.se1ffc5dd{background: var(--surface-page); min-height: 100vh;}
.s9eb582cb{position: absolute;}
.s26cdf7d7{position: sticky; top: 0px; z-index: 20; background: color-mix(in oklab, var(--surface-page) 92%, transparent); backdrop-filter: saturate(140%) blur(6px); border-bottom: var(--border-hairline);}
.s68336c44{max-width: var(--container-max); margin: 0px auto; min-height: var(--header-h); padding: 0 var(--gutter); display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-5);}
.sb35f69a0{display: flex; align-items: center; gap: var(--sp-6);}
.sc74da741{font-size: var(--fs-200); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; text-decoration: none; padding-bottom: 3px; color: var(--text-muted); border-bottom: 2px solid transparent; transition: var(--transition-color);}
.s4193ac80{border-bottom: var(--border-hairline);}
.sc72a0a42{max-width: var(--container-max); margin: 0px auto; padding: clamp(var(--sp-5), 5vh, var(--sp-9)) var(--gutter) clamp(var(--sp-4), 4vh, var(--sp-8)); text-align: center; min-height: calc(100vh - var(--header-h) - var(--banner-h)); display: grid; place-items: center;}
.se8bfe09a{font-size: clamp(var(--fs-700), min(4.6vw, 7vh), var(--fs-900)); margin: 0px auto; max-width: 24ch; text-wrap: balance;}
.s8840991e{margin-bottom: var(--sp-7);}
.s955c7df1{display: block; width: 100%; height: var(--banner-h); object-fit: cover; object-position: 50% 100%; filter: url("#duotone");}
.sb7169f2d{max-width: var(--container-max); margin: 0px auto; padding: 0 var(--gutter) var(--sp-8); display: flex; flex-wrap: wrap; gap: var(--sp-8); align-items: flex-start;}
.s8118912e{flex: 1 1 460px; min-width: 0px;}
.s23cc097d{font-size: var(--fs-500); font-weight: var(--fw-light); line-height: var(--lh-snug); max-width: 48ch; margin: 0px;}
.sb914764c{display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6);}
.s3f8e2434{display: inline-flex; width: auto; align-items: center; justify-content: center; gap: var(--sp-2); padding: 11px 20px; font-family: var(--text-body-family); font-size: var(--fs-300); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: 1; border-radius: var(--radius-1); text-decoration: none; cursor: pointer; opacity: 1; transition: var(--transition-color); background: var(--surface-accent); color: var(--cream-050); border: 1px solid var(--surface-accent);}
.scd497be0{display: inline-flex; width: auto; align-items: center; justify-content: center; gap: var(--sp-2); padding: 11px 20px; font-family: var(--text-body-family); font-size: var(--fs-300); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: 1; border-radius: var(--radius-1); text-decoration: none; cursor: pointer; opacity: 1; transition: var(--transition-color); background: transparent; color: var(--text-heading); border: 1px solid var(--line-strong);}
.s60bd07f2{flex: 1 1 300px; min-width: 0px;}
.s4e3cc268{display: block; width: 100%; max-width: 180px; height: auto; margin-bottom: var(--sp-5);}
.s0c72d000{font-size: var(--fs-100); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-accent); margin-bottom: var(--sp-3);}
.s72d6c8e2{margin: 0px; border-top: var(--border-hairline);}
.s3a762a9c{display: grid; grid-template-columns: minmax(0px, 0.45fr) minmax(0px, 1fr); gap: var(--sp-4); padding: 11px 0px; border-bottom: var(--border-hairline);}
.s469c99c3{font-size: var(--fs-200); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted);}
.s32c9ffb4{margin: 0px; font-family: var(--text-body-family); font-size: var(--fs-200); color: var(--text-heading);}
.s0f679c7a{background: var(--surface-sunken); border-bottom: var(--border-hairline);}
.sd8e3e2cd{max-width: var(--container-max); margin: 0px auto; padding: var(--sp-8) var(--gutter); display: flex; flex-wrap: wrap; gap: var(--sp-8); align-items: flex-start;}
.s58fe8770{flex: 1 1 240px; min-width: 0px;}
.s1ac19a7d{display: flex; flex-direction: column; gap: var(--sp-3); text-align: left; align-items: flex-start; margin-bottom: var(--sp-6);}
.s08e4a403{display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: var(--sp-5);}
.sab71420e{margin: 0px; font-family: var(--text-heading-family); font-size: var(--fs-700); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); color: var(--text-heading);}
.s7130b507{display: block; width: 56px; height: var(--bw-rule); background: var(--surface-accent);}
.sab6b9901{flex: 3 1 480px; min-width: 0px;}
.se192455d{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--sp-5);}
.s55984785{background: var(--surface-card); border: var(--border-hairline); border-radius: var(--radius-2); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3);}
.s18df765f{display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);}
.s4ed1c821{display: inline-block; width: 22px; height: 22px; flex: 0 0 auto; background: currentcolor; mask-image: url("/images/icons/stamp.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain; vertical-align: middle;}
.sb951b518{font-family: var(--text-data-family); font-size: var(--fs-200); letter-spacing: var(--ls-wide); color: var(--text-muted);}
.s9164e451{margin: 0px; font-size: var(--fs-600);}
.scaea3ac0{margin: 0px; font-size: var(--fs-300); color: var(--text-body);}
.s21b97c68{margin-top: auto; padding-top: var(--sp-3); border-top: var(--border-hairline); font-family: var(--text-data-family); font-size: var(--fs-200); color: var(--text-muted);}
.s088f7fc2{display: inline-block; width: 22px; height: 22px; flex: 0 0 auto; background: currentcolor; mask-image: url("/images/icons/clipboard-check.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain; vertical-align: middle;}
.scc19b85e{max-width: var(--container-max); margin: 0px auto; padding: var(--sp-8) var(--gutter);}
.s0b66e57a{font-size: var(--fs-100); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-accent);}
.s397448c6{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--sp-5) var(--sp-6);}
.s702444bc{border-top: var(--bw-rule) solid var(--surface-accent); padding-top: var(--sp-4);}
.s7ad46a3e{display: inline-block; width: 20px; height: 20px; flex: 0 0 auto; background: currentcolor; mask-image: url("/images/icons/search.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain; vertical-align: middle;}
.se1f93cd8{margin: var(--sp-3) 0 var(--sp-2); font-size: var(--fs-500);}
.s10cd38b3{margin: 0px; font-size: var(--fs-300);}
.sdbc3a25c{display: inline-block; width: 20px; height: 20px; flex: 0 0 auto; background: currentcolor; mask-image: url("/images/icons/gauge.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain; vertical-align: middle;}
.sc727df21{display: inline-block; width: 20px; height: 20px; flex: 0 0 auto; background: currentcolor; mask-image: url("/images/icons/file-text.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain; vertical-align: middle;}
.sa414fe43{display: inline-block; width: 20px; height: 20px; flex: 0 0 auto; background: currentcolor; mask-image: url("/images/icons/wrench.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain; vertical-align: middle;}
.s0caf413f{display: inline-block; width: 20px; height: 20px; flex: 0 0 auto; background: currentcolor; mask-image: url("/images/icons/ruler.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain; vertical-align: middle;}
.sa89d6c45{display: inline-block; width: 20px; height: 20px; flex: 0 0 auto; background: currentcolor; mask-image: url("/images/icons/shield.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain; vertical-align: middle;}
.sc22eaac7{display: inline-block; width: 20px; height: 20px; flex: 0 0 auto; background: currentcolor; mask-image: url("/images/icons/clipboard-list.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain; vertical-align: middle;}
.sce8c06b2{display: inline-block; width: 20px; height: 20px; flex: 0 0 auto; background: currentcolor; mask-image: url("/images/icons/ship.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain; vertical-align: middle;}
.s73ea2213{margin-top: var(--sp-8); border-top: var(--border-hairline); padding-top: var(--sp-6);}
.s1bebde41{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--sp-5); margin-top: var(--sp-5);}
.sd7ba8f1e{border-left: var(--bw-rule) solid var(--olive-300); padding-left: var(--sp-4);}
.sf71f9c59{margin: 0 0 var(--sp-2); font-size: var(--fs-500);}
.saf699d5a{background: var(--surface-sunken); border-top: var(--border-hairline); border-bottom: var(--border-hairline);}
.sc99de493{max-width: var(--container-max); margin: 0px auto; padding: var(--sp-8) var(--gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--sp-8);}
.s8cc8cd93{min-width: 0px;}
.sa8f38cd3{display: flex; flex-direction: column; gap: var(--sp-6);}
.s6a8fe464{display: grid; grid-template-columns: 64px minmax(0px, 1fr); gap: var(--sp-4); border-top: var(--border-hairline); padding-top: var(--sp-4);}
.sa64bf414{font-family: var(--text-data-family); font-size: var(--fs-200); color: var(--text-accent);}
.s855c8ccc{margin: 0px; font-size: var(--fs-500);}
.sab5d41b5{font-size: var(--fs-200); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); margin: var(--sp-2) 0 var(--sp-3);}
.scf69ebd5{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--sp-7);}
.s6442fdca{min-width: 0px; display: flex; flex-direction: column; gap: var(--sp-5);}
.s2eb66fd1{border: var(--border-hairline); border-radius: var(--radius-2); overflow: hidden; line-height: 0;}
.s4b00cf8e{width: 100%; height: 260px; border: 0px; display: block; filter: saturate(0.75);}
.sc2d04a08{margin: 0px; font-family: var(--text-data-family); font-size: var(--fs-200); color: var(--text-heading);}
.sc546fe5b{display: flex; flex-wrap: wrap; gap: var(--sp-4);}
.sf8a03f66{display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-300);}
.s2f6fe791{display: inline-block; width: 16px; height: 16px; flex: 0 0 auto; background: currentcolor; mask-image: url("/images/icons/mail.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain; vertical-align: middle;}
.s74af9dda{display: inline-block; width: 16px; height: 16px; flex: 0 0 auto; background: currentcolor; mask-image: url("/images/icons/linkedin.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain; vertical-align: middle;}
.sb724c5a2{min-width: 0px; background: var(--surface-sunken); border: var(--border-hairline); border-radius: var(--radius-2); padding: var(--sp-6);}
.s78669d05{display: flex; flex-direction: column; gap: var(--sp-4);}
.s4fb01cef{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--sp-4);}
.s9808a214{display: flex; flex-direction: column; gap: 6px;}
.sd768fd9a{font-size: var(--fs-100); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted);}
.s73e42fd4{color: var(--status-error);}
.s21a77b9f{padding: 10px 12px; font-family: var(--text-body-family); font-size: var(--fs-300); color: var(--text-heading); background: var(--surface-raised); border: 1px solid var(--line-hairline); border-radius: var(--radius-1); outline: none; transition: var(--transition-color);}
.s1957ce58{padding: 10px 12px; font-family: var(--text-body-family); font-size: var(--fs-300); line-height: var(--lh-snug); color: var(--text-heading); background: var(--surface-raised); border: 1px solid var(--line-hairline); border-radius: var(--radius-1); outline: none; resize: vertical; transition: var(--transition-color);}
.scc7f77fa{display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;}
.sa916ab39{font-size: var(--fs-200); color: var(--text-muted);}
.s7ca9d991{background: var(--surface-inverse); color: var(--text-inverse); padding: var(--sp-6) 0 var(--sp-5);}
.sb3e9eab5{max-width: var(--container-max); margin: 0px auto; padding: 0 var(--gutter);}
.se6a3fa10{display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-5); align-items: start;}
.sd234f192{display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: 0px;}
.s3df5ede6{display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-300); color: var(--cream-050); text-decoration: none;}
.sb47f844b{border-bottom: 1px solid var(--line-inverse);}
.sd87411c1{display: inline-block; width: 16px; height: 16px; flex: 0 0 auto; background: currentcolor; mask-image: url("/images/icons/download.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain; vertical-align: middle;}
.s89c8e996{list-style: none; margin: 0px; padding: 0px; display: flex; flex-wrap: wrap; gap: var(--sp-5);}
.s0c15e811{font-size: var(--fs-300); color: var(--paper-300); text-decoration: none;}
.sec619246{margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: var(--border-inverse); display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-200); color: var(--olive-300);}

/* ── mobile (<=700px) ── */
@media (max-width: 700px) {
  /* Five uppercase links measure 508px and cannot fit a phone line; they were
     overflowing 67px off the left edge, clipped rather than scrollable, which
     made ABOUT and CREDENTIALS unreachable. Wrap and centre them instead. */
  header > div { justify-content: center; padding: var(--sp-3) var(--sp-4); }
  header nav { flex-wrap: wrap; justify-content: center; row-gap: var(--sp-2); column-gap: var(--sp-4); }
  header nav a { font-size: var(--fs-100); }

  /* Sizing the hero to the viewport is a desktop device — it buys the banner's
     bottom edge landing at the fold. On a phone it bought 340px of empty cream
     out of a 540px block, so drop it and let the hero be its own height. */
  #about > div:has(> h1) { min-height: 0; padding: var(--sp-7) var(--gutter) var(--sp-6); }
  #about h1 { font-size: clamp(var(--fs-600), 7.4vw, var(--fs-800)); max-width: 20ch; }

  /* The <picture> swaps in the 800x667 crop below this same breakpoint, so the
     photo's full render height is a different ratio. Everything downstream
     (rest, peak, the reveal) is derived from it and keeps working unchanged. */
  :root { --banner-full: calc((100vw - 56px) * 0.8337); }

  /* The face was 1552px down the page, behind the whole bio. Put the rail
     first and centre the portrait. */
  #about > div:has(img[src$="portrait.webp"]) { gap: var(--sp-6); }
  #about > div > div:has(> img[src$="portrait.webp"]) { order: -1; }
  #about img[src$="portrait.webp"] { margin-left: auto; margin-right: auto; max-width: 200px; }
}