/* Practice site styles. "Settle": one grotesk, graphite and mono, a settling-wave signature (BF-551;
   Direction A "Editorial" before 2026-10-17).
   Tokens first; every color comes from a token so light and dark stay in step.
   Breakpoints (custom properties can't be used in media queries): 45em (720px), 64em (1024px). */

/* ---------- Fonts: self-hosted, latin subset, OFL (licenses in /fonts) ---------- */
@font-face{
  font-family:"IBM Plex Sans";
  src:url("fonts/ibm-plex-sans-var-latin.woff2") format("woff2");
  font-weight:100 700; font-style:normal; font-display:swap;
  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:"IBM Plex Mono";
  src:url("fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
  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;
}

/* Metric-matched fallbacks: hold layout while the webfonts swap in (no network request). */
@font-face{font-family:"IBM Plex Sans Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans"),local("Arimo");
  font-weight:400;font-style:normal;size-adjust:101.57%;ascent-override:100.92%;descent-override:27.07%;line-gap-override:0%;}
@font-face{font-family:"IBM Plex Sans Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold"),local("Arimo Bold");
  font-weight:600;font-style:normal;size-adjust:98%;ascent-override:104.59%;descent-override:28.06%;line-gap-override:0%;}
/* 500 (labels, closing line, contact heading, checks): without its own face, 500 falls back to Arial Regular. */
@font-face{font-family:"IBM Plex Sans Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans"),local("Arimo");
  font-weight:500;font-style:normal;size-adjust:103.5%;ascent-override:99.03%;descent-override:26.57%;line-gap-override:0%;}

/* ---------- Tokens (light) ----------
   The two theme-color values in index.html and 404.html mirror --band (light #16181B, dark #0A0B0D).
   Neutrals sit at hue 210-220 with low saturation; the accent is the ink itself (mono), so the only
   color on the page is graphite, white and the placeholder orange before launch. */
:root{
  color-scheme:light;
  --bg:#FFFFFF; --surface:#F4F5F6; --ink:#121417; --body-text:#383C42; --muted:#5C6168;
  --rule:#DEE0E3; --rule-strong:#868B92;
  --accent:#121417; --accent-hover:#2B2F35; --accent-on:#FFFFFF; --check-fill:#FFFFFF;
  --band:#16181B; --band-surface:#212428; --band-ink:#FFFFFF; --band-body:#C5C9CE; --band-muted:#9CA1A8;
  --band-rule:#2F3338; --band-link:#FFFFFF; --band-link-hover:#D7DBE0; --band-link-active:#B9BFC6;
  --slot:#A84E1B;
  --sans:"IBM Plex Sans", "IBM Plex Sans Fallback", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --display:var(--sans);
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --display-weight:600; --h1-track:-0.025em; --h-track:-0.015em; --radius:2px;
  --btn-bg:var(--accent); --btn-ink:var(--accent-on); --btn-hover:var(--accent-hover); --node-bg:var(--check-fill);
  --btn-active:#3A4048; --motion-fast:150ms; --ease-out:cubic-bezier(.2,0,0,1);

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem; --space-10:8rem;
  --container:68rem; --gutter:var(--space-4); --cols:4; --grid-gap:var(--space-4);
  --stack-gap:var(--space-6); --section-pad:var(--space-8); --hero-pad:var(--space-8);
  --measure:42.5rem; --measure-lede:40rem;

  --step-h1:clamp(2.25rem, 1.875rem + 1.875vw, 3.375rem);
  --step-h2:clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
  --step-h3:clamp(1.125rem, 1.06rem + .3vw, 1.3125rem);
  --step-lede:clamp(1.125rem, 1.04rem + .38vw, 1.375rem);
  --step-body:clamp(1rem, .96rem + .2vw, 1.125rem);
  --step-small:clamp(.875rem, .85rem + .1vw, .9375rem);
  --step-label:.75rem;
  --step-statement:clamp(1.375rem, 1.21rem + .83vw, 1.875rem);
}
/* Dark: system setting, unless a host page forces light */
@media screen and (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0F1113; --surface:#171A1D; --ink:#ECEEF0; --body-text:#C2C6CB; --muted:#959AA1;
    --rule:#272A2F; --rule-strong:#6A7078;
    --accent:#FFFFFF; --accent-hover:#D7DBE0; --accent-on:#0F1113; --check-fill:#1D2024;
    --band:#0A0B0D; --band-surface:#181A1E; --band-rule:#24272C; --slot:#F0A070; --btn-active:#B9BFC6;
  }
}
/* Dark: explicit toggle (used by the claude.ai editor view) */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0F1113; --surface:#171A1D; --ink:#ECEEF0; --body-text:#C2C6CB; --muted:#959AA1;
  --rule:#272A2F; --rule-strong:#6A7078;
  --accent:#FFFFFF; --accent-hover:#D7DBE0; --accent-on:#0F1113; --check-fill:#1D2024;
  --band:#0A0B0D; --band-surface:#181A1E; --band-rule:#24272C; --slot:#F0A070; --btn-active:#B9BFC6;
}
@media (min-width:45em){:root{
  --gutter:var(--space-5); --cols:8; --grid-gap:var(--space-5);
  --stack-gap:var(--space-7); --section-pad:var(--space-9); --hero-pad:var(--space-9);
}}
/* No rules between sections: spacing separates them, so desktop gets more room. */
@media (min-width:64em){:root{
  --gutter:var(--space-6); --cols:12; --grid-gap:var(--space-6); --section-pad:var(--space-10);
}}

/* ---------- Dark band (header + hero): tokens re-pointed so children follow ---------- */
@media screen{ .band{
  background:var(--band);
  --ink:var(--band-ink); --body-text:var(--band-body); --muted:var(--band-muted);
  --rule:var(--band-rule); --rule-strong:var(--band-muted); --accent:var(--band-link);
  --surface:var(--band-surface); --check-fill:var(--band-surface); --node-bg:var(--band-surface); --accent-on:var(--band);
  --btn-bg:var(--band-link); --btn-ink:var(--band); --btn-hover:var(--band-link-hover); --btn-active:var(--band-link-active);
  color:var(--band-body);
} }

/* ---------- Base ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:auto;}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth;}}
body{margin:0;background:var(--bg);color:var(--body-text);font-family:var(--sans);font-size:var(--step-body);
  line-height:1.6;font-kerning:normal;-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;}
[hidden]{display:none !important;}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0;}
h1,h2{font-family:var(--display);font-weight:var(--display-weight);color:var(--ink);text-wrap:balance;}
h3{font-family:var(--sans);font-weight:600;font-size:var(--step-h3);line-height:1.3;letter-spacing:-0.005em;color:var(--ink);text-wrap:balance;}
p,li{text-wrap:pretty;}
a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;}
@media (hover:hover){a:hover{text-decoration-thickness:2px;}}
a:focus-visible{text-decoration-thickness:2px;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
section[id]{scroll-margin-top:var(--space-7);}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
/* Quiet sentence-case labels: no uppercase micro-type anywhere on the page. */
.label{font-family:var(--sans);font-size:var(--step-small);font-weight:500;line-height:1.4;color:var(--muted);}

.container{width:min(100% - 2*var(--gutter), var(--container));margin-inline:auto;}
.grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--grid-gap);row-gap:var(--stack-gap);}
.grid > *{grid-column:1 / -1;}

/* ---------- Buttons and links ---------- */
.button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:var(--space-3) var(--space-5);
  border-radius:var(--radius);background:var(--btn-bg);color:var(--btn-ink);font-weight:600;font-size:var(--step-small);
  letter-spacing:.01em;line-height:1.25;text-decoration:none;white-space:nowrap;}
@media (hover:hover){.button:hover{background:var(--btn-hover);color:var(--btn-ink);}}
.button:focus-visible{background:var(--btn-hover);}
.button:active{background:var(--btn-active);transition-duration:0s;}
@media (prefers-reduced-motion:no-preference){.button{transition:background-color var(--motion-fast) var(--ease-out);}}
@media (forced-colors:active){
  .button{border:1px solid ButtonText;}
  /* High contrast replaces the fill, so the hover and focus change would vanish: underline instead. */
  .button:focus-visible{text-decoration:underline;}
  @media (hover:hover){.button:hover{text-decoration:underline;}}
}
.button--small{min-height:2.75rem;padding:var(--space-2) var(--space-4);}
.text-link{color:var(--ink);font-weight:600;font-size:var(--step-small);}
.text-link,.contact__email{text-decoration-color:var(--rule-strong);}
@media (hover:hover){.text-link:hover,.contact__email:hover{text-decoration-color:currentColor;text-decoration-thickness:2px;}}
.text-link:focus-visible,.contact__email:focus-visible{text-decoration-color:currentColor;text-decoration-thickness:2px;}
/* "See the work" is the one link that doesn't say where it goes: a drawn down-arrow (not announced). */
/* Fixed 8x12px box (px, not rem, so the polygon stays centered at any root size) so the 2px stem lands on whole pixels; the same drawn arrow as the flow connectors. */
.text-link::after{content:"";display:inline-block;width:8px;height:12px;margin-left:.375em;vertical-align:-.1em;background:currentColor;
  clip-path:polygon(3px 0,5px 0,5px calc(100% - 7px),100% calc(100% - 7px),50% 100%,0 calc(100% - 7px),3px calc(100% - 7px));}
@media (prefers-reduced-motion:no-preference){
  .text-link,.contact__email{transition:text-decoration-color var(--motion-fast) var(--ease-out),text-decoration-thickness var(--motion-fast) var(--ease-out);}
  .text-link::after{transition:transform var(--motion-fast) var(--ease-out);}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.text-link:hover::after{transform:translateY(2px);}}
@media (prefers-reduced-motion:no-preference){.text-link:focus-visible::after{transform:translateY(2px);}}
@media (forced-colors:active){.text-link::after{background:LinkText;forced-color-adjust:none;}}
/* A down-arrow promises an in-page scroll; a link to another page (the 404's "See the work") drops it. */
.text-link:not([href^="#"])::after{display:none;}

/* ---------- Header ---------- */
.site-header__inner{display:flex;align-items:center;gap:var(--space-4);min-height:4.5rem;}
.site-header .button--small{padding-inline:var(--space-3);}
/* Two-weight lockup from the existing spans: "Risoluto" 600, "Consulting" 400 muted. */
.wordmark{margin-right:auto;font-family:var(--display);font-weight:var(--display-weight);font-size:1.125rem;line-height:1.2;
  letter-spacing:-0.01em;color:var(--ink);text-decoration:none;}
.wordmark span + span{font-weight:400;color:var(--muted);}
.site-nav{display:none;}
.site-nav ul{display:flex;gap:var(--space-6);list-style:none;padding:0;margin:0;}
.site-nav a{color:var(--body-text);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.35em;
  font-size:var(--step-small);display:inline-flex;align-items:center;min-height:2.75rem;}
@media (hover:hover){.site-nav a:hover{color:var(--ink);text-decoration-color:currentColor;text-decoration-thickness:1px;}}
.site-nav a:focus-visible{color:var(--ink);text-decoration-color:currentColor;text-decoration-thickness:1px;}
@media (prefers-reduced-motion:no-preference){.site-nav a{transition:color var(--motion-fast) var(--ease-out),text-decoration-color var(--motion-fast) var(--ease-out);}}
@media (min-width:45em){
  .site-nav{display:block;}
  .site-header__inner{gap:var(--space-5);}
  .site-header .button--small{padding-inline:var(--space-4);}
}

/* ---------- Hero ---------- */
.hero{padding-block:var(--hero-pad) var(--space-6);}
.hero h1{font-size:var(--step-h1);line-height:1.05;letter-spacing:var(--h1-track);}
.hero h1 span{display:block;}
.hero__text{display:flex;flex-direction:column;gap:var(--space-6);}
.lede{font-size:var(--step-lede);line-height:1.55;max-width:var(--measure-lede);}
/* Two hero paragraphs (what I offer, then my background) sit closer than the hero's other blocks. */
.hero__lede{display:grid;gap:var(--space-4);}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-6);}
/* The address as text under the buttons: a mailto click does nothing on a machine with no mail app. */
.hero__email{flex-basis:100%;}
.hero__email .contact__email{font-size:var(--step-small);}
.note{font-size:var(--step-small);color:var(--muted);}
@media (min-width:64em){
  .hero h1{grid-column:1 / span 10;}
  .hero .hero__text{grid-column:1 / span 8;}
}
/* Signature: a damped wave settling into a straight rule, once, at the foot of the hero band. "Risoluto"
   means resolute; the line resolves. Decorative pseudo-element, nothing announced. The mask reads alpha
   only; the color is --accent (white inside the band). Also on the favicon, the Apple touch icon and og-3.png; nowhere else. */
.hero > .container::after{
  --settle-w:12rem;
  content:"";grid-column:1 / -1;height:3rem;margin-top:var(--space-4);
  background:var(--accent);
  /* One layer: settle-2.svg draws the wave and the straight run (1920 units, 6x the wave's 320), sized so the
     wave keeps its --settle-w width and the line always runs past the box. */
  -webkit-mask:url("img/settle-2.svg") left center / calc(var(--settle-w) * 6) 3rem no-repeat;
          mask:url("img/settle-2.svg") left center / calc(var(--settle-w) * 6) 3rem no-repeat;
}
@media (min-width:45em){.hero > .container::after{--settle-w:20rem;}}
@media (min-width:64em){.hero > .container::after{margin-top:var(--space-6);}}
@media (forced-colors:active){.hero > .container::after{background:CanvasText;forced-color-adjust:none;}}
/* A browser with no mask support would paint a solid 3rem bar: show nothing instead. */
@supports not ((mask-size:1px) or (-webkit-mask-size:1px)){.hero > .container::after{display:none;}}

/* ---------- Credentials strip: three equal columns on the page grid (Brian, 2026-10-18); no rules ---------- */
.creds{padding-top:var(--space-7);}
.creds__list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  column-gap:var(--grid-gap);row-gap:var(--space-6);}
.creds__item{grid-column:1 / -1;display:grid;gap:var(--space-2);align-content:start;}
/* Box headings are phrases, not figures: display sans 600, sized between h3 and h2. */
.creds__fig{font-family:var(--display);font-weight:var(--display-weight);font-size:clamp(1.1875rem, 1.1rem + .4vw, 1.4375rem);
  line-height:1.25;letter-spacing:-0.01em;color:var(--ink);text-wrap:balance;}
.creds__text{font-size:var(--step-small);line-height:1.5;color:var(--body-text);max-width:60ch;}
@media (min-width:45em){
  .creds{padding-top:var(--space-8);}
  .creds__list{row-gap:var(--space-7);}
  .creds__item:nth-child(2){grid-column:1 / span 4;}
  .creds__item:nth-child(3){grid-column:5 / -1;}
}
@media (min-width:64em){
  .creds__item:nth-child(1){grid-column:1 / span 4;}
  .creds__item:nth-child(2){grid-column:5 / span 4;}
  .creds__item:nth-child(3){grid-column:9 / -1;}
}

/* ---------- Sections: spacing separates them; each section picks its own layout ---------- */
.section{padding-block:var(--section-pad);}
.section + .section{padding-top:0;}
.section + .section--system{padding-top:var(--section-pad);}
.section--system + .section{margin-top:var(--section-pad);}   /* margin, so an #about jump lands on the h2 */
.section + .contact{margin-top:var(--space-8);}
.section h2{font-size:var(--step-h2);line-height:1.12;letter-spacing:var(--h-track);max-width:20ch;}
.section__body > p{max-width:var(--measure);}
/* Work: the page's one side-head */
@media (min-width:45em){
  [id="work"] .section__head{grid-column:1 / span 3;}
  [id="work"] .section__body{grid-column:4 / -1;}
}
@media (min-width:64em){
  [id="work"] .section__head{grid-column:1 / span 4;}
  [id="work"] .section__body{grid-column:5 / -1;}
}
.ruled{list-style:none;padding:0;margin:0;display:grid;row-gap:var(--space-7);}
.ruled > li,.ruled > article{display:grid;gap:var(--space-3);justify-items:start;align-content:start;}
.ruled p{max-width:var(--measure);}
/* Work: one hairline between case studies, the only rule left on the page */
.section__body.ruled > * + *{padding-top:var(--space-7);border-top:1px solid var(--rule);}
/* What I do: 2x2 from 45em */
@media (min-width:45em){.section__body > .ruled{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--grid-gap);}}
/* What I do: a 2px ink line over each card (Brian, 2026-10-18), the same weight as the hero wave. */
.section__body > .ruled > li{padding-top:var(--space-4);border-top:2px solid var(--accent);}
/* A status is data, so the tag stays mono; sentence case, no tracking. */
.tag{display:inline-flex;align-items:center;padding:.2rem .5rem;border:1px solid var(--rule-strong);border-radius:var(--radius);
  font-family:var(--mono);font-size:var(--step-label);font-weight:500;letter-spacing:0;color:var(--muted);line-height:1.4;}
.row-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-4);}
.case__quote{justify-self:stretch;margin:var(--space-2) 0 0;display:grid;gap:var(--space-2);max-width:var(--measure);}
.case__quote blockquote{margin:0;font-size:var(--step-lede);font-weight:500;line-height:1.45;color:var(--ink);}
.case__quote figcaption{font-size:var(--step-small);color:var(--muted);}

/* How I work: a real sequence, so numbered. The numeral sits right beside its step; heading and detail
   share one size and one left edge, the heading in 600 (Brian, 2026-10-18: the old three-column ledger
   spread them apart). Steps and the closing line share the reading measure. */
.steps{list-style:none;padding:0;margin:0;counter-reset:step;display:grid;row-gap:var(--space-6);max-width:var(--measure);}
.steps li{counter-increment:step;display:grid;grid-template-columns:2ch minmax(0,1fr);
  column-gap:var(--space-3);row-gap:var(--space-1);align-items:baseline;}
.steps li::before{content:counter(step) ".";grid-column:1;grid-row:1;font-family:var(--sans);font-weight:600;
  font-size:var(--step-lede);line-height:1.4;color:var(--muted);font-variant-numeric:tabular-nums;}
.steps h3{grid-column:2;grid-row:1;font-size:var(--step-lede);line-height:1.4;}
.steps p{grid-column:2;grid-row:2;font-size:var(--step-lede);line-height:1.5;}
.closing{margin-top:var(--space-7);font-family:var(--display);font-weight:500;font-size:var(--step-statement);
  line-height:1.3;letter-spacing:-0.01em;color:var(--ink);max-width:var(--measure);text-wrap:pretty;}

/* System: the one --surface section; stacked head, diagram at full container width (horizontal from 64em) */
.section--system{background:var(--surface);}
.system__note{margin-top:var(--space-5);font-size:var(--step-small);color:var(--muted);}

/* Flow diagram: semantic list, CSS connectors (vertical on phone and tablet, horizontal from 64em) */
.flow{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--space-5);max-width:28rem;}
.flow__step{position:relative;}
.flow__node,.flow__check{display:flex;align-items:center;justify-content:center;text-align:center;overflow-wrap:anywhere;line-height:1.3;}
.flow__node{min-height:3rem;padding:var(--space-2) var(--space-3);border:1px solid var(--rule-strong);border-radius:var(--radius);
  background:var(--node-bg);color:var(--ink);font-weight:600;font-size:.9375rem;}
.flow__node--ready{gap:var(--space-2);padding:calc(var(--space-2) - 1px) calc(var(--space-3) - 1px);border:2px solid var(--accent);}
/* Passed state: a 2px ink outline and a drawn check, so it can't read as the filled button. */
.flow__node--ready::before{content:"";flex:none;width:12px;height:9px;background:currentColor;
  clip-path:polygon(.79px 4.86px,2.21px 3.44px,4.5px 5.74px,9.79px .44px,11.21px 1.86px,4.5px 8.56px);}
.flow__node--record{border-style:dashed;font-weight:500;color:var(--body-text);}
.flow__step--checks{border:1px solid var(--rule);border-radius:var(--radius);padding:var(--space-4);}
.flow__label{margin:0 0 var(--space-3);text-align:center;}
.flow__checks{list-style:none;padding:0;margin:0;display:grid;row-gap:var(--space-2);position:relative;}
.flow__check{position:relative;min-height:2.5rem;padding:var(--space-2) var(--space-3);border:1px solid var(--rule-strong);
  border-radius:var(--radius);background:var(--check-fill);color:var(--ink);
  font-size:.875rem;font-weight:500;justify-content:flex-start;text-align:left;}
.flow__step:not(:last-child)::after{content:"";position:absolute;top:100%;left:calc(50% - 4px);left:round(down,50% - 4px,1px);width:8px;height:var(--space-5);
  background:var(--rule-strong);
  clip-path:polygon(3px 0,5px 0,5px calc(100% - 7px),100% calc(100% - 7px),50% 100%,0 calc(100% - 7px),3px calc(100% - 7px));}
.arrow-in,.arrow-out{display:none;}
@media (min-width:64em){
  .flow{max-width:none;padding-top:var(--space-6);row-gap:0;column-gap:var(--space-6);align-items:center;
    grid-template-columns:minmax(0,.8fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);}
  .flow__node{min-height:3.5rem;}
  .flow__step:not(:last-child)::after{top:calc(50% - 4px);top:round(down,50% - 4px,1px);left:100%;width:var(--space-6);height:8px;
    clip-path:polygon(0 3px,calc(100% - 7px) 3px,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,calc(100% - 7px) 5px,0 5px);}
  .flow__step--fanout::after{top:calc(50% - 1px);top:round(down,50% - 1px,1px);width:calc(var(--space-6)/2);height:2px;clip-path:none;}
  .flow__step--checks{border:0;padding:0;}
  .flow__label{position:absolute;bottom:100%;left:0;right:0;margin:0 0 var(--space-2);}
  .flow__step--checks::after{left:calc(100% + var(--space-6)/2);width:calc(var(--space-6)/2);}
  /* The bus lines end at the first and last check's center: 1.25rem half-height + padding + 1px border. */
  .flow__checks::before,.flow__checks::after{content:"";position:absolute;top:calc(1.25rem + var(--space-2) + 1px);bottom:calc(1.25rem + var(--space-2) + 1px);width:2px;background:var(--rule-strong);}
  .flow__checks::before{left:calc(var(--space-6)/-2 - 1px);}
  .flow__checks::after{right:calc(var(--space-6)/-2 - 1px);}
  /* Offsets rounded to whole pixels (round() with a calc() fallback) so 2px strokes never straddle a pixel. */
  .arrow-in,.arrow-out{display:block;position:absolute;background:var(--rule-strong);}
  .arrow-in{top:calc(50% - 4px);top:round(down,50% - 4px,1px);right:calc(100% + 1px);width:calc(var(--space-6)/2);height:8px;
    clip-path:polygon(0 3px,calc(100% - 7px) 3px,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,calc(100% - 7px) 5px,0 5px);}
  .arrow-out{top:calc(50% - 1px);top:round(down,50% - 1px,1px);left:100%;width:calc(var(--space-6)/2 + 1px);height:2px;}
}
@media (forced-colors:active){.flow ::after,.flow ::before,.flow .arrow-in,.flow .arrow-out{background:CanvasText;forced-color-adjust:none;}}

/* About */
.about__photo{width:min(100%,14rem);margin-top:var(--space-6);}
/* About: text first, photo on the right from 45em (display:contents puts the h2 and photo on the outer grid). */
@media (min-width:45em){
  [id="about"] > .grid{grid-template-rows:auto 1fr;}
  [id="about"] .section__head{display:contents;}
  [id="about"] h2,[id="about"] .section__body{grid-column:1 / span 5;}
  [id="about"] h2{grid-row:1;}
  [id="about"] .section__body{grid-row:2;}
  .about__photo{grid-column:6 / -1;grid-row:1 / span 2;align-self:start;width:100%;margin-top:0;}
}
.about__photo img,.about__photo .ph{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);}
.about__photo img{background:var(--surface);}   /* fills the reserved box while the photo decodes */
@media (min-width:64em){
  [id="about"] h2,[id="about"] .section__body{grid-column:1 / span 7;}
  .about__photo{grid-column:9 / -1;}
}

/* Contact */
/* Contact: a large left-aligned statement on the page background */
.contact h2{font-size:var(--step-h2);font-weight:500;line-height:1.2;max-width:26ch;}
.contact__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-6);margin-top:var(--space-6);}
.contact__email{font-family:var(--mono);font-size:var(--step-body);font-weight:500;overflow-wrap:anywhere;color:var(--ink);}
@media (min-width:45em){
  .contact .section__head{grid-column:1 / span 7;}
  .contact__actions{margin-top:var(--space-7);}
}
@media (min-width:64em){.contact .section__head{grid-column:1 / span 9;}}

/* Footer */
.site-footer__inner{display:flex;flex-direction:column;gap:var(--space-2);padding-block:var(--space-6);
  font-size:var(--step-small);color:var(--muted);}
@media (min-width:45em){.site-footer__inner{flex-direction:row;flex-wrap:wrap;gap:var(--space-2) var(--space-6);}
  .site-footer__inner .privacy{flex-basis:100%;}}

/* ---------- Placeholders: visible until filled; CI blocks a production deploy while any remain ---------- */
.slot{color:var(--slot);font-weight:600;}
.ph{display:grid;place-items:center;padding:var(--space-4);border:1.5px dashed var(--slot);border-radius:var(--radius);
  color:var(--slot);font-size:var(--step-small);font-weight:600;text-align:center;}

/* ---------- Print: light tokens (dark mode and bands are screen-only), no buttons or nav ---------- */
@media print{
  @page{margin:18mm 16mm;}
  .site-nav,.site-header .button,.hero__actions,.contact__actions .button{display:none;}
  .site-header__inner{min-height:0;}
  .hero{padding-block:var(--space-5) 0;}
  .creds{padding-top:var(--space-6);}
  .section,.section + .section--system{padding-block:var(--space-6);}
  .section--system + .section,.section + .contact{margin-top:0;}
  .creds__item,.ruled > *,.steps li,.flow,.about__photo{break-inside:avoid;}
  h2,h3,.row-head,.flow__label{break-after:avoid;}
  .hero > .container::after{display:none;}
  /* The connectors are background-painted clip-path shapes: keep them, or the diagram prints as loose boxes. */
  .flow{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}