/* 512 Capital Partners: shared styles for every page.
   Design record: design/DESIGN.md. Tokens first; components below derive from them. */

@font-face{font-family:"Source Serif Display";src:url("/fonts/source-serif-4-display.v1.woff2") format("woff2");font-weight:320 440;font-display:swap}
@font-face{font-family:"Source Serif Text";src:url("/fonts/source-serif-4-text.v1.woff2") format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"Source Sans";src:url("/fonts/source-sans-3.v1.woff2") format("woff2");font-weight:400 600;font-display:swap}

:root{
  /* color */
  --night:#0B1622; --deep:#0F1E2C;
  --text:#E7E9E7; --text-2:#A3B0BA;
  --ice:#8FBEDF; --ice-strong:#C3DDEF;
  --hair:rgba(143,190,223,.16); --neat:rgba(143,190,223,.38);
  --field:rgba(143,190,223,.06);
  --paper:#F2F2EF; --ink-2:#4A5664; --link-ink:#1D4F75;  /* the light reading surface: neutral, never cream */
  --granite:#C9806A;   /* the Texas Capitol's sunset red granite; survey red on the map, and the one button */
  /* type */
  --display:"Source Serif Display","Source Serif Text",Georgia,serif;
  --serif:"Source Serif Text",Georgia,serif;
  --sans:"Source Sans","Source Sans 3",system-ui,sans-serif;
  --t-0:.8125rem;                                   /* 13  map lettering, captions */
  --t-1:.9375rem;                                   /* 15  UI, small caps labels */
  --t-2:1.125rem;                                   /* 18  body */
  --t-3:1.375rem;                                   /* 22  lead, entry titles */
  --t-4:clamp(1.75rem,1.2rem + 1.6vw,2.5rem);       /* 28–40 section heads */
  --t-lg:clamp(2.25rem,1.2rem + 3.4vw,4rem);        /* 36–64 the sector list */
  --t-h:clamp(2.5rem,1.4rem + 3.6vw,4.5rem);        /* 40–72 section heads */
  --t-5:clamp(2.75rem,1.35rem + 4.7vw,5.5rem);      /* 44–88 page title */
  /* space: 4px base */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem;
  --s-7:3rem; --s-8:4rem; --s-9:6rem; --s-10:8rem;
  --gut:max(clamp(1.25rem,4.5vw,4rem),env(safe-area-inset-left));
  --max:77.5rem;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --halo:0 0 1px var(--night),0 0 2px var(--night),0 0 3px var(--night),0 0 4px var(--night),0 0 6px var(--night);  /* map lettering over contours */
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--s-6);scrollbar-gutter:stable}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--night);color:var(--text);font-family:var(--serif);font-size:var(--t-2);line-height:1.6;
  font-variant-numeric:oldstyle-nums proportional-nums;font-kerning:normal;-webkit-font-smoothing:antialiased;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-weight:inherit;text-wrap:balance}
p,li,dd,figcaption{text-wrap:pretty}
img,svg{display:block;max-width:100%}
::selection{background:#33648B;color:#fff}

a{color:var(--ice);text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.2em;
  text-decoration-color:color-mix(in oklab,var(--ice) 45%,transparent);transition:color .15s ease,text-decoration-color .15s ease}
@media (hover:hover) and (pointer:fine){a:hover{color:var(--ice-strong);text-decoration-color:currentColor}}
:focus-visible{outline:2px solid var(--ice);outline-offset:3px;border-radius:2px}

.wrap{max-width:calc(var(--max) + 2*var(--gut));margin-inline:auto;padding-inline:var(--gut)}
/* One 12-column grid for every two-column layout. Lines used: 1, 5, 7, 9 (side column 1–4, halves at 7,
   the map sheet 1–8). Collapses to one column on phones, so no numbered placement survives below 40rem. */
.grid,.foot .wrap,.doc .blk{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s-7)}
.grid > *{grid-column:1 / -1}
.split > :first-child,.foot .wrap > :first-child,.doc .blk > :first-child{grid-column:1 / 5}
.split > :last-child,.foot .wrap > :last-child,.doc .blk > :last-child{grid-column:5 / -1}
@media (max-width:64rem){.grid,.foot .wrap,.doc .blk{column-gap:var(--s-6)}}
@media (max-width:52rem){
  .split > :first-child,.split > :last-child,.foot .wrap > *,.doc .blk > *{grid-column:1 / -1}
}
@media (max-width:40rem){.grid,.foot .wrap,.doc .blk{grid-template-columns:minmax(0,1fr);column-gap:0}}
.skip{position:absolute;left:var(--s-3);top:-100px;z-index:10;background:var(--text);color:var(--night);padding:var(--s-2) var(--s-4);font-family:var(--sans);font-size:var(--t-1)}
.skip:focus{top:var(--s-3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* shared type roles */
.sc{font-variant-caps:all-small-caps;font-variant-numeric:lining-nums;letter-spacing:.04em}
.label{font-family:var(--serif);font-size:var(--t-1);line-height:1.3;color:var(--text-2);font-variant-caps:all-small-caps;
  font-variant-numeric:lining-nums;letter-spacing:.04em}
.fig{font-variant-numeric:lining-nums tabular-nums}
.ui{font-family:var(--sans);font-size:var(--t-1);line-height:1.4}
.nobr{white-space:nowrap}
.nm{font-variant-numeric:lining-nums}  /* "512" in running text keeps the wordmark's lining figures */
.nav a,.menu-btn,.skip,.map-cap,.field,.err,.formnote,.status,button.send,.status-page .next{font-variant-numeric:lining-nums}

/* ---------- masthead ---------- */
.mast{view-transition-name:masthead;padding-block:var(--s-5)}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5)}
.wordmark{font-family:var(--serif);font-weight:600;font-size:var(--t-2);letter-spacing:.01em;color:var(--text);text-decoration:none;
  font-variant-caps:small-caps;font-variant-numeric:lining-nums;padding-block:var(--s-2)}
.wordmark:hover{color:var(--text)}
.nav{display:flex;gap:var(--s-2);position:static;inset:auto;margin:0;padding:0;border:0;background:none;color:inherit;overflow:visible;width:auto;height:auto}
.nav a,.menu-btn{font-family:var(--sans);font-size:var(--t-1);color:var(--text-2);text-decoration:none;padding:var(--s-2) var(--s-3);border-radius:2px}
@media (hover:hover) and (pointer:fine){.nav a:hover{color:var(--ice-strong)}}
.nav a[aria-current="page"]{color:var(--text)}
.menu-btn{display:none;background:none;border:1px solid var(--hair);color:var(--text);cursor:pointer;min-height:44px;padding-inline:var(--s-4)}
@media (max-width:52rem){
  .menu-btn{display:inline-block}
  .nav{display:none}
  .nav:popover-open{display:flex;flex-direction:column;gap:0;position:fixed;inset:calc(44px + 2*var(--s-5)) var(--gut) auto auto;margin:0;
    min-width:14rem;padding:var(--s-3);background:var(--deep);border:1px solid var(--neat);color:var(--text);
    box-shadow:0 24px 60px -20px rgba(3,8,13,.7);transition:opacity .18s var(--ease-out),transform .18s var(--ease-out)}
  .nav:popover-open a{padding:var(--s-3) var(--s-4);min-height:44px;color:var(--text);font-size:var(--t-2)}
  @starting-style{.nav:popover-open{opacity:0;transform:translateY(-6px)}}
  .nav::backdrop{background:rgba(5,10,16,.55)}
}

/* ---------- hero: page title + map sheet ---------- */
.hero{padding-block:var(--s-7) var(--s-9)}
.title{font-family:var(--display);font-weight:360;font-size:var(--t-5);line-height:1.02;letter-spacing:-.015em;max-width:15em;
  font-variant-numeric:lining-nums}
.title .cont{display:block;font-weight:340;font-size:var(--t-4);line-height:1.2;letter-spacing:-.005em;margin-top:.45em;color:var(--text);max-width:min(22em,66%)}
/* The sheet: the sub sits beside the title's second line; the map takes columns 1–8; the title block
   takes 9–12 and its foot lands on the neatline (the figure is a subgrid: row 2 map, row 3 caption). */
.sheet .title{grid-row:1}
.sheet .sub{grid-column:9 / -1;grid-row:1;align-self:last baseline;color:var(--text-2);font-size:var(--t-2);line-height:1.55}
.sheet figure{grid-column:1 / 9;grid-row:2 / span 3;display:grid;grid-template-rows:subgrid;row-gap:0;margin-top:var(--s-8)}
.sheet .legend{grid-column:9 / -1;grid-row:2;align-self:end}
@media (max-width:72rem){
  .sheet .sub{grid-column:1 / 9;grid-row:2;align-self:start;margin-top:var(--s-6)}
  .sheet figure{grid-row:3 / span 3;margin-top:var(--s-6)}
  .sheet .legend{grid-row:3}
}
@media (max-width:64rem){
  .title .cont{max-width:22em}
  .sheet figure{grid-column:1 / -1;grid-row:2;display:block;margin-top:var(--s-7)}
  .sheet .sub{grid-column:1 / 7;grid-row:3}
  .sheet .legend{grid-column:7 / -1;grid-row:3;align-self:start;margin-top:var(--s-6)}
}
@media (max-width:40rem){
  .sheet .sub,.sheet figure,.sheet .legend{grid-column:1 / -1;grid-row:auto}
  .sheet .sub{margin-top:var(--s-5)}
  .sheet figure{margin-top:var(--s-6)}
  .sheet .legend{margin-top:var(--s-5)}
}

/* map crop, in contour-SVG units (viewBox 1536 x 950). Label positions derive from the crop. */
.map{--x0:0;--y0:36;--w:1536;--h:878;position:relative;aspect-ratio:1536 / 878;border:1px solid var(--neat);margin-top:var(--s-5)}
.map-art,.map-water{position:absolute;inset:0;background:url("/assets/contours.v1.svg") no-repeat;background-size:100% auto;background-position:0 50%;
  --bx:63.37%;--by:60.02%}
.map-water{background-image:url("/assets/water.v1.svg")}  /* Lake Austin and Lady Bird Lake, traced from the same DEM */
@media (max-width:40rem){
  .map{--x0:700;--y0:300;--w:520;--h:470;aspect-ratio:520 / 470}
  .map-art,.map-water{background-size:295.38% auto;background-position:68.9% 62.5%;--bx:52.56%;--by:55.96%}
}
.tick{position:absolute;font-family:var(--sans);font-size:var(--t-0);line-height:1;color:var(--text-2);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.tick.lon{top:0;left:calc((var(--x) - var(--x0)) / var(--w) * 100%);transform:translate(-50%,calc(-100% - 10px))}
/* latitude reads up the left collar, outside the neatline, as on a USGS quad */
.tick.lat{right:calc(100% + 10px);top:calc((var(--y) - var(--y0)) / var(--h) * 100%);transform:translateY(-50%);writing-mode:vertical-rl;writing-mode:sideways-lr}
.tick::after{content:"";position:absolute;background:var(--neat)}
.tick.lon::after{left:50%;top:calc(100% + 3px);width:1px;height:7px}
.tick.lat::after{top:50%;left:calc(100% + 3px);width:7px;height:1px}
.tick .deg{display:none}
@media (max-width:40rem){
  /* no collar room at phone width: latitude goes back inside the neatline, and each shown tick carries its full value */
  .tick.lat{right:auto;left:14px;writing-mode:horizontal-tb;text-shadow:var(--halo)}
  .tick.lat::after{left:-15px;width:8px}
  .tick .deg{display:inline}
}
.feat{position:absolute;left:calc((var(--x) - var(--x0)) / var(--w) * 100%);top:calc((var(--y) - var(--y0)) / var(--h) * 100%);
  transform:translate(-50%,-50%) rotate(var(--rot,0deg));line-height:1;white-space:nowrap;pointer-events:none;
  text-shadow:var(--halo)}
.feat{font-family:var(--sans);font-size:var(--t-0)}
.feat.water{color:var(--ice)}
.feat.land{color:var(--text-2)}
.f-la{--x:548;--y:104;--rot:-50deg}
.f-lbl{--x:838;--y:572;--rot:26deg}
.f-esc{--x:868;--y:262;--rot:-90deg}  /* clear of the A–A′ line at y 397.8 */
@media (max-width:40rem){.f-esc{--x:862;--y:420}}
.x1{--x:205}.x2{--x:447.9}.x3{--x:690.3}.x4{--x:933.1}.x5{--x:1176}.x6{--x:1418.4}
.y1{--y:117.3}.y2{--y:397.8}.y3{--y:679}
.cross{position:absolute;width:11px;height:11px;transform:translate(-50%,-50%);left:calc((var(--x) - var(--x0)) / var(--w) * 100%);top:calc((var(--y) - var(--y0)) / var(--h) * 100%);opacity:.55}
.cross::before,.cross::after{content:"";position:absolute;background:var(--text-2)}
.cross::before{left:5px;top:0;width:1px;height:11px}
.cross::after{top:5px;left:0;height:1px;width:11px}
.off{display:none}
@media (max-width:40rem){.m-off{display:none}}
.bench{position:absolute;left:var(--bx-pos,63.37%);top:var(--by-pos,60.02%);transform:translate(-6px,-50%);display:flex;align-items:center;gap:6px;
  font-family:var(--sans);font-size:var(--t-1);font-weight:600;color:var(--text);
  text-shadow:var(--halo)}
.bench svg{width:12px;height:11px;flex:none}
@media (max-width:40rem){.bench{--bx-pos:52.56%;--by-pos:55.96%}}
.map-cap{font-family:var(--sans);font-size:var(--t-0);line-height:1.45;color:var(--text-2);margin-top:var(--s-3);max-width:62ch}

/* The line of section A–A′ on the map: the 30°17′30″N parallel, dashed as on a geologic sheet. */
.aa{position:absolute;left:0;right:0;height:0;top:calc((var(--y) - var(--y0)) / var(--h) * 100%);border-top:1px dashed var(--granite);pointer-events:none}
.aa-end{position:absolute;top:calc((397.8 - var(--y0)) / var(--h) * 100%);transform:translateY(calc(-100% - 5px));
  font-family:var(--sans);font-size:var(--t-1);font-weight:600;line-height:1;color:var(--granite);font-variant-numeric:lining-nums;
  text-shadow:var(--halo)}
.aa-end.a{left:var(--s-3)}
.aa-end.a2{right:var(--s-3)}
/* The phone crop shows neither end of the line, and its latitude tick sits on it: the tick names the parallel there. */
@media (max-width:40rem){.aa{display:none}}

/* Section A–A′: elevation along that parallel (design/section.py, checked against USGS point elevations).
   Same horizontal scale as the map, so the river's dip sits under the river. The drawing is 1536 x 172 units at
   15x vertical exaggeration with its floor on the 400 ft datum; on phones it is stretched to 1536 x 344 (30x), so the
   caption gives no number. On phones it stays the whole line rather than the map's crop: the crop starts east of
   the escarpment, and a section without the Hill Country would lose the one thing it shows. */
.xsec{position:relative;aspect-ratio:1536 / 172;margin-top:var(--s-6);margin-bottom:calc(var(--s-4) + 1em);
  background:url("/assets/section.v1.svg") no-repeat;background-size:100% 100%;border-bottom:1px solid var(--neat)}
.xsec::before,.xsec::after{position:absolute;top:0;transform:translateY(-100%);font-family:var(--sans);font-size:var(--t-1);font-weight:600;line-height:1;color:var(--granite);padding-bottom:var(--s-1)}
.xsec::before{content:"A";left:0}
.xsec::after{content:"A′";right:0}
.xs-l{position:absolute;top:calc(100% + var(--s-2));transform:translateX(-50%);font-family:var(--sans);font-size:var(--t-0);line-height:1;color:var(--text-2);white-space:nowrap}
.xs-l.hc{left:calc(250 / 1536 * 100%)}
.xs-l.rv{left:calc(711 / 1536 * 100%);color:var(--ice)}
.xs-l.bp{left:calc(1230 / 1536 * 100%)}
.xs-t{position:absolute;left:calc(100% + 8px);transform:translateY(-50%);font-family:var(--sans);font-size:var(--t-0);line-height:1;color:var(--text-2);
  font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.xs-t.t10{top:calc(5.7 / 172 * 100%)}.xs-t.t8{top:calc(61.2 / 172 * 100%)}.xs-t.t6{top:calc(116.6 / 172 * 100%)}.xs-t.t4{top:100%}
/* Once the map is full width there is no right collar (the gutter can be narrower than "1,000 ft"): the elevation
   labels move inside, over the empty sky above the low eastern end, and the datum label (inside the hatching) drops. */
@media (max-width:64rem){
  .xs-t{left:auto;right:var(--s-4);text-shadow:var(--halo)}
  .xs-t.t4{display:none}
}
@media (max-width:40rem){
  .xsec{aspect-ratio:1536 / 344}
  .xs-t.t6{display:none}   /* at 30x the eastern ground reaches 600 ft under the label */
  .xs-l.hc{left:0;transform:none}               /* three labels across ~280px at 320 wide: ends pinned, river centred */
  .xs-l.bp{left:auto;right:0;transform:none}
}
/* The figure subgrid keeps row-gap 0: a subgrid gap unlike the parent's is added to its items as margin,
   and the title block would then miss the neatline. */

/* the one moment: contours drawn outward from the benchmark, once per session */
@property --r{syntax:"<percentage>";inherits:false;initial-value:104%}
html[data-reveal] :is(.map-art,.map-water){-webkit-mask-image:radial-gradient(circle at var(--bx) var(--by),#000 var(--r),transparent calc(var(--r) + 14%));
  mask-image:radial-gradient(circle at var(--bx) var(--by),#000 var(--r),transparent calc(var(--r) + 14%));
  animation:reveal 2.4s cubic-bezier(.77,0,.175,1) .2s both}
/* 104% = farthest corner (about 88% on desktop, 76% on the phone crop) plus the 14% feather */
@keyframes reveal{from{--r:0%}to{--r:104%}}
/* the A–A′ line is drawn onto the finished terrain, as the last beat of the same moment */
html[data-reveal] :is(.aa,.aa-end){animation:aa-in .4s var(--ease-out) 2.5s both}
@keyframes aa-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){html[data-reveal] :is(.map-art,.map-water){animation:none;-webkit-mask-image:none;mask-image:none}}

/* title block */
.legend{border:1px solid var(--neat);font-variant-numeric:lining-nums tabular-nums}
.legend div{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s-4);align-items:baseline;padding:var(--s-3) var(--s-4);border-top:1px solid var(--hair)}
.legend div:first-child{border-top:0}
.legend dt{font-size:var(--t-1);color:var(--text-2);font-variant-caps:all-small-caps;letter-spacing:.04em}
.legend dd{font-size:var(--t-2)}
.legend dd a{color:var(--text)}
.legend .range{display:block;padding-block:var(--s-4)}
.legend .range dt{margin-bottom:var(--s-2)}
.scale{display:flex;justify-content:space-between;font-size:var(--t-3);line-height:1.2}
.scale-bar{display:block;width:100%;height:14px;margin-top:var(--s-2)}
.scale-bar line{stroke:var(--ice);stroke-width:1.25;vector-effect:non-scaling-stroke}
.legend .note{display:block;font-family:var(--sans);font-size:var(--t-0);color:var(--text-2);padding-block:var(--s-2)}
@media (max-width:40rem){.legend dd{font-size:var(--t-2)}}

/* ---------- sections ---------- */
.sec{padding-block:clamp(var(--s-8),7vw,var(--s-9))}
#services,#news{padding-block:var(--s-8)}
#sectors{padding-block:clamp(var(--s-8),10vw,var(--s-10))}
.band{background:var(--deep)}
/* Light reading surface. The category's rhythm is dark anchors (map, principal, proof, contact) with light
   reading sections between them; components read the same tokens, redefined here, so nothing else changes.
   The tombstone cards use it too: printed card on the deep band, as deal tombstones sit on a desk. */
.light,.stone-card{--text:var(--night);--text-2:var(--ink-2);--ice:var(--link-ink);--ice-strong:var(--night);
  --hair:rgba(11,22,34,.14);--neat:rgba(11,22,34,.36);--field:rgba(11,22,34,.04);
  background:var(--paper);color:var(--text);color-scheme:light}
.sec-h{font-family:var(--display);font-weight:340;font-size:var(--t-h);line-height:1.02;letter-spacing:-.015em}
/* Two heading voices, so the page isn't six identical blocks: large and light where the section is about
   one thing (the principal, the proof), mid and firmer where the content beneath is itself set large
   (sectors, headlines, the phone number) or is a dense ledger. */
.sec-h.mid{font-weight:440;font-size:var(--t-4);line-height:1.1;letter-spacing:-.005em}
.split{row-gap:var(--s-6)}
#services .sec-h{padding-top:var(--s-4)}  /* cap height level with the first ruled row beside it */
@media (max-width:52rem){#services .sec-h{padding-top:0}}

/* What we do: a legend, dense */
.terms div{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--s-6);row-gap:var(--s-2);padding-block:var(--s-5);border-top:1px solid var(--hair)}
.terms div:last-child{border-bottom:1px solid var(--hair)}
.terms dt{font-family:var(--display);font-weight:400;font-size:var(--t-3);line-height:1.3}
.terms dd{color:var(--text-2);max-width:48ch}
@media (max-width:40rem){.terms div{grid-template-columns:1fr}}

/* Sectors: airy, set large */
.sectors{margin-top:var(--s-5);border-bottom:1px solid var(--hair)}
@media (max-width:64rem){.sectors{column-gap:var(--s-6)}}
.sectors li{font-family:var(--display);font-weight:320;font-size:var(--t-lg);line-height:1.12;letter-spacing:-.005em;
  padding-block:var(--s-4) var(--s-5);border-top:1px solid var(--hair)}
.kicker{grid-column:1 / 7;margin-top:var(--s-7);max-width:60ch;color:var(--text-2)}
@media (max-width:52rem){.sectors{columns:1}.kicker{grid-column:1 / -1}}

/* Engagements: tombstones */
.stones{display:grid;grid-template-columns:subgrid;row-gap:var(--s-7);margin-top:var(--s-7)}
.stone:nth-child(odd){grid-column:1 / 7}
.stone:nth-child(even){grid-column:7 / -1}
@media (max-width:52rem){.stone:nth-child(n){grid-column:1 / -1}}
.stone-card{padding:var(--s-6) var(--s-5);text-align:center;display:grid;gap:var(--s-3);align-content:center;min-height:11rem}
.stone-card h3{font-family:var(--display);font-weight:400;font-size:var(--t-3);line-height:1.3;max-width:26ch;margin-inline:auto}
.stone > p{margin-top:var(--s-5);max-width:60ch}
.after{margin-top:var(--s-7);color:var(--text-2)}
.stone .coverage{margin-top:var(--s-3);font-family:var(--sans);font-size:var(--t-1);font-variant-numeric:lining-nums}

/* In the news */
.press li{border-top:1px solid var(--hair)}
.press li:last-child{border-bottom:1px solid var(--hair)}
#news .note{margin-top:var(--s-4);max-width:52ch;color:var(--text-2);font-size:var(--t-1);line-height:1.5}
.news .press{margin-top:var(--s-7)}
@media (min-width:40.01rem){
  .news .press,.news .press li,.news .press a{display:grid;grid-template-columns:subgrid;grid-column:1 / -1}
  .news .press .pub{grid-column:1 / 5}
  .news .press .hl{grid-column:5 / 12}
  .news .press .out{grid-column:12;justify-self:end}
}
.news .press a{padding-block:var(--s-6)}
.news .press .hl{font-family:var(--display);font-weight:340;font-size:var(--t-4);line-height:1.15;letter-spacing:-.005em}
.press a{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr) auto;gap:var(--s-5);align-items:baseline;padding-block:var(--s-5);color:var(--text);text-decoration:none}
.press .pub{font-size:var(--t-1);color:var(--text-2);font-variant-caps:all-small-caps;letter-spacing:.04em}
.press .hl{font-size:var(--t-3);line-height:1.35;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:transparent;transition:text-decoration-color .15s ease}
.press .out{width:12px;height:12px;color:var(--ice);align-self:center}
@media (hover:hover) and (pointer:fine){.press a:hover .hl{text-decoration-color:var(--ice)}}
.press a:focus-visible{outline-offset:6px}
@media (max-width:40rem){.press a{grid-template-columns:1fr auto;row-gap:var(--s-1)}.press .pub{grid-column:1 / -1}}

/* Principal: a letter-like column in the one deep band */
.statement{margin-top:var(--s-6);max-width:30em;font-family:var(--display);font-weight:340;font-size:var(--t-4);line-height:1.22;letter-spacing:-.005em}
.principal .statement{grid-column:1 / 11}
/* No portrait until the commissioned one exists (a placeholder frame read as unfinished). The markup for it is
   commented in index.html; these rules already place it in columns 1–4 beside the signature. */
.principal .portrait{grid-column:1 / 5;margin-top:var(--s-8)}
.principal .portrait img{width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover;border:1px solid var(--neat)}
.principal .signed{grid-column:1 / 9;margin-top:var(--s-8);align-self:end;max-width:44rem}
.principal .portrait + .signed{grid-column:5 / -1}
@media (max-width:52rem){.principal .statement,.principal .portrait,.principal .signed{grid-column:1 / -1}
  .principal .portrait{max-width:20rem}}
.signed{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--hair);display:grid;gap:var(--s-4)}
.signed > div{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-1) var(--s-4)}
.signed h3{font:600 var(--t-3)/1.3 var(--serif)}

.signed .bio{color:var(--text-2)}

/* Contact */
/* The page ends on the number: 512 is Austin's area code as well as the firm's name, and the line reaches
   Pete Aman, so it is the last display line on the page, larger than the section's heading. */
.contact .call{margin-top:var(--s-6)}
.contact h3{font-family:var(--display);font-weight:400;font-size:var(--t-3);line-height:1.3;color:var(--text-2)}
.direct{margin-top:var(--s-2);font-variant-numeric:lining-nums}
.direct .tel{font-family:var(--display);font-weight:340;font-size:var(--t-5);line-height:1.05;letter-spacing:-.015em;color:var(--text);
  white-space:nowrap;text-decoration:none}   /* an underline cut through the parentheses; set alone at this size it reads as the link */
@media (hover:hover) and (pointer:fine){.direct .tel:hover{color:var(--ice-strong)}}
.contact .write{grid-column:1 / 5;margin-top:var(--s-8);color:var(--text-2);max-width:24em}
.contact .write a{overflow-wrap:anywhere}
.contact form{grid-column:5 / -1;margin-top:var(--s-8);max-width:44rem}
@media (max-width:52rem){.contact .write,.contact form{grid-column:1 / -1}.contact form{margin-top:var(--s-6)}}
form{display:grid;gap:var(--s-5)}
.field{display:grid;gap:var(--s-2)}
.field label{font-family:var(--sans);font-size:var(--t-1);color:var(--text-2)}
.field input,.field textarea{font:inherit;font-family:var(--sans);font-size:max(1rem,var(--t-2));color:var(--text);background:var(--field);
  border:1px solid var(--hair);border-radius:2px;padding:var(--s-3) var(--s-4);width:100%;transition:border-color .15s ease}
.field textarea{min-height:8.5rem;field-sizing:content;resize:vertical}
.field input:focus-visible,.field textarea:focus-visible{outline-offset:1px;border-color:var(--ice)}
.field [aria-invalid="true"]{border-color:#E8A3A3}
.err{font-family:var(--sans);font-size:var(--t-1);color:#F0B8B8}
.err:empty{display:none}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-5)}
button.send{font-family:var(--sans);font-size:var(--t-2);font-weight:600;color:var(--night);background:var(--granite);border:0;border-radius:2px;
  padding:var(--s-3) var(--s-6);min-height:48px;cursor:pointer;transition:background-color .15s ease,transform .12s var(--ease-out)}
@media (hover:hover) and (pointer:fine){button.send:hover{background:color-mix(in oklab,var(--granite) 78%,#fff)}}
button.send:active{transform:scale(.98)}
button.send[disabled]{opacity:.7;cursor:progress}
.formnote{font-family:var(--sans);font-size:var(--t-1);color:var(--text-2)}
.status{font-family:var(--sans);font-size:var(--t-1);color:var(--text)}
.status:empty{display:none}
.status.ok{color:var(--ice-strong)}

/* ---------- photograph: full bleed, graded to the night palette (design/grade.py) ---------- */
.photo-band{margin:0;background:var(--night)}
.photo-band img{display:block;width:100%;height:clamp(16rem,44vw,40rem);object-fit:cover;object-position:50% 45%}
.photo-band figcaption{padding-block:var(--s-3) 0;font-family:var(--sans);font-size:var(--t-0);line-height:1.45;color:var(--text-2);font-variant-numeric:lining-nums}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--hair);padding-block:var(--s-8) var(--s-7);color:var(--text-2);font-size:var(--t-1);line-height:1.55}
.foot .wrap{row-gap:var(--s-4)}
.foot .wordmark{font-size:var(--t-2);padding:0}
.foot p{max-width:70ch;font-variant-numeric:lining-nums}
.foot ul{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-1) var(--s-5);margin-top:var(--s-2)}
.foot ul a{display:inline-block;padding-block:var(--s-2)}

/* ---------- document pages (press, legal, status pages) ---------- */
.doc-head{padding-block:var(--s-7) var(--s-8);border-bottom:1px solid var(--hair)}
.doc-head .title{font-size:clamp(2.5rem,1.6rem + 3vw,4.25rem)}
.doc-head .meta{margin-top:var(--s-4)}
.doc-head .intro{margin-top:var(--s-5);max-width:60ch;color:var(--text-2);font-size:var(--t-3);line-height:1.5}
.doc{padding-block:var(--s-8) var(--s-9)}
.doc .blk{row-gap:var(--s-4);padding-block:var(--s-7)}
.doc .blk:first-child{padding-top:0}
.doc .blk > h2{font-family:var(--display);font-weight:380;font-size:var(--t-4);line-height:1.15}
.doc .body{display:grid;gap:var(--s-4);max-width:66ch}
.doc .body h3{font-family:var(--display);font-weight:400;font-size:var(--t-3);line-height:1.3;margin-top:var(--s-3)}
.doc .body h3:first-child{margin-top:0}

.quote .label{display:block;margin-bottom:var(--s-2)}
.callout{border:1px solid var(--neat);padding:var(--s-5);display:grid;gap:var(--s-4)}
.pending{color:var(--text-2)}
.pending b{display:block;color:var(--text);font-weight:600;margin-bottom:var(--s-1)}
.facts{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);font-variant-numeric:lining-nums}
.facts dt,.facts dd{padding-block:var(--s-3);border-top:1px solid var(--hair)}
.facts dt{font-size:var(--t-1);color:var(--text-2);font-variant-caps:all-small-caps;letter-spacing:.04em;padding-right:var(--s-4);line-height:1.9}
@media (max-width:40rem){.facts{grid-template-columns:1fr}.facts dd{border-top:0;padding-top:0}}
.status-page{padding-block:var(--s-9) var(--s-10);min-height:62vh}
.status-page .title{font-size:clamp(2.5rem,1.6rem + 3vw,4.25rem)}
.status-page p:not(.label){margin-top:var(--s-5);max-width:52ch;font-size:var(--t-3);line-height:1.5;color:var(--text-2)}
.status-page .next{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-6);margin-top:var(--s-7);font-family:var(--sans)}
.status-page .next a{display:inline-block;padding-block:var(--s-2)}

/* ---------- page transitions (Chromium, Safari; others just navigate) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s;animation-timing-function:var(--ease-out)}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}}

/* ---------- print: letterhead, not a screenshot ---------- */
@media print{
  :root{--text:#111;--text-2:#444;--ice:#1d4f75;--hair:#bbb;--neat:#888}
  @page{margin:18mm 16mm}
  body{background:#fff;color:#111;font-size:11pt;line-height:1.45}
  .skip,.menu-btn,.nav,.map-art,.map-water,.feat,.cross,.bench,.aa,.aa-end,.xsec,form,.formnote,.status,.photo-band{display:none !important}
  .contact .write{margin-top:var(--s-4)}
  .legend .ci{display:none}   /* the map it describes doesn't print */
  .map{border:0;aspect-ratio:auto;height:0;margin:0}
  .tick,.map-cap{display:none}
  .band,.light,.stone-card{background:none}
  .stone-card{border:1px solid #888}
  .contact .side{position:static}
  .sec,.hero,.doc{padding-block:10mm}
  .sec,.blk,.stone,.press li,.terms div{break-inside:avoid}
  a{color:#111;text-decoration:none}
  .sheet{display:block}
  .press a::after{grid-column:2 / -1}
  .press a::after,.doc .body a[href^="http"]::after{content:" (" attr(href) ")";font-family:var(--sans);font-size:8.5pt;color:#555;word-break:break-all}
  .direct a[href^="mailto"]::after,.direct a[href^="tel"]::after{content:""}
  .sheet{margin-top:6mm}
  .legend{border-color:#888}
}