/* austin.css — Austin 1031 shared design system
   "Barton Springs" — spring-fed palette, limestone ledges, and a waterline.
   Literata (display) + Source Serif 4 (text). Two serifs, no sans. Every page.

   Color rule: teal is the interactive color (links, buttons, active states);
   coral is the emphasis color (accent words, key numerals, card hovers). */

:root{
  /* above the water */
  --spring-50:#F8FAF8; --spring-100:#EFF6F2; --spring-150:#DCEBE5; --spring-200:#C3DED4;
  /* in the water */
  --pool:#17403C; --pool-700:#123330; --pool-900:#0C2523;
  --teal:#2E7D72; --teal-600:#23655C; --teal-300:#7FBDB2; --teal-100:#A9DCD0;
  /* warm counterpoints */
  --coral:#E5714E; --coral-600:#CF5B39; --ledge:#D8C48F; --ledge-deep:#BFA76D;
  /* coral is too light for small text on paper — this is the text-safe shade (AA) */
  --coral-ink:#B34A2C;
  /* text + lines */
  /* No --ink-50: a 55% ink wash tops out at 3.1:1 on --spring-50 and cannot
     clear AA at any size. Muted text is --ink-70 (6.7:1). */
  --ink:#17403C; --ink-70:#3D5F5A;
  --line:rgba(23,64,60,0.13);
  --paper:#F8FAF8; --paper-dim:rgba(248,250,248,0.90); --paper-faint:rgba(248,250,248,0.75);

  /* Two serifs, no sans. --display carries headings, the wordmark and the big
     numerals; --serif carries everything read or clicked — body, leads, buttons,
     nav, and the small labels.
     Literata is loaded at a single pinned optical size (opsz 48) — display-
     leaning, but low-contrast and sturdy enough to hold down to 18px. Below
     that use --serif. Only the roman is loaded; italics come from --serif
     (see .accent). It sets wide and large, so display sizes run a little
     smaller and tighter here than the text serif would want.
     Source Serif 4 is deliberately not Newsreader — that is Mesa's display face,
     and sharing it would tie the two sites together. */
  --display:"Literata",Georgia,serif;
  --serif:"Source Serif 4","Source Serif Pro",Georgia,serif;
  --pad:clamp(24px,5vw,72px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--spring-50);color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased;}
a{color:inherit;}
h1,h2,h3,h4{margin:0;}
img{max-width:100%;display:block;}
::selection{background:var(--spring-200);color:var(--pool);}

a:focus-visible,button:focus-visible,summary:focus-visible,details:focus-visible{
  outline:2px solid var(--teal);outline-offset:3px;border-radius:2px;}

.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--pool);color:var(--paper);
  padding:12px 20px;font-family:var(--serif);font-size:14px;text-decoration:none;}
.skip-link:focus{left:0;}

/* ── shared bits ── */
.wrap{max-width:1240px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
/* Nothing opens a section but the heading itself. The small uppercase kickers
   that used to sit above each one were dropped for restating the heading below
   them; the short rule that briefly replaced them went too. Section starts are
   carried by band padding and the headings' own weight — do not reintroduce a
   decorative element here. */
/* Only the Literata roman is loaded, so italics come from the text serif. At the
   one place they meet — the homepage hero, set in --serif — they match. */
.accent{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--coral-600);}
.on-dark .accent{color:var(--ledge);}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--serif);
  font-size:16.5px;font-weight:600;letter-spacing:.005em;padding:14px 28px;border-radius:999px;
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:background .16s,color .16s,border-color .16s,transform .16s;}
.btn-solid{background:var(--teal);color:var(--paper);}
.btn-solid:hover{background:var(--teal-600);transform:translateY(-2px);}
.btn-outline{border-color:var(--teal-600);color:var(--teal-600);background:transparent;}
.btn-outline:hover{background:var(--teal);color:var(--paper);}
.btn-coral{background:var(--coral);color:#3A1408;}
.btn-coral:hover{background:var(--coral-600);color:var(--paper);transform:translateY(-2px);}
.btn-ghost{border-color:rgba(248,250,248,0.35);color:var(--paper);background:transparent;}
.btn-ghost:hover{background:rgba(248,250,248,0.12);border-color:var(--paper);}

.link-underline{display:inline-block;text-decoration:none;color:var(--teal-600);font-weight:600;
  border-bottom:1.5px solid var(--teal-300);padding-bottom:3px;transition:border-color .16s,color .16s;}
.link-underline:hover{color:var(--pool);border-bottom-color:var(--teal-600);}
.link-arrow{text-decoration:none;color:var(--ink-70);font-weight:600;border-bottom:1.5px solid var(--line);
  padding-bottom:3px;transition:border-color .16s,color .16s;}
.link-arrow:hover{color:var(--teal-600);border-bottom-color:var(--teal-600);}

/* ── the waterline (signature) ──
   A wavy surface rule. Water sits on the fill side; .flipped puts it above. */
.waterline{display:block;width:100%;height:clamp(22px,3vw,40px);}
.waterline.flipped{transform:scaleY(-1);}

/* ── header: the surface you read beneath ── */
header{position:sticky;top:0;z-index:30;background:var(--spring-150);}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:17px;padding-bottom:17px;}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;}
.brand .word{font-family:var(--display);font-weight:700;font-size:20.5px;letter-spacing:-0.012em;color:var(--pool);}
.brand .word b{font-weight:400;color:var(--teal-600);}
.nav-links{display:flex;align-items:center;gap:30px;}
.nav-links a{font-size:15px;font-weight:500;color:var(--ink-70);text-decoration:none;position:relative;
  padding-bottom:3px;transition:color .16s;white-space:nowrap;}
.nav-links a:hover{color:var(--teal-600);}
.nav-links a.active{color:var(--pool);}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--coral);}
/* The phone number is set as a number, not as a button: Literata at masthead
   size with tabular figures, over a teal rule. A firm whose pitch is that it
   answers the phone gains more from the number reading as information than
   from a coloured lozenge in the corner.
   The rule is --teal rather than the lighter --teal-300 that .link-underline
   uses on paper, and that difference is load-bearing. There is no pill and the
   digits are --pool, the same ink as body copy, so the underline is the only
   thing marking this as interactive — it has to clear the 3:1 floor for a
   non-text affordance, which --teal does at 3.97 and --teal-300 does not at
   1.74. Hover darkens both to --teal-600.
   19px keeps it above the 18px floor Literata's pinned optical size can hold;
   don't shrink it below that without moving to --serif. */
.nav-phone{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-0.014em;
  font-variant-numeric:tabular-nums;color:var(--pool);text-decoration:none;white-space:nowrap;
  padding-bottom:4px;border-bottom:2px solid var(--teal);
  transition:color .16s,border-color .16s;}
.nav-phone:hover{color:var(--teal-600);border-bottom-color:var(--teal-600);}

/* ── hero: above the water, then below it ── */
/* overflow:hidden is kept as a backstop for anything absolutely positioned in
   the hero widening the document above the 920px breakpoint — the old .ripples
   bled past the gutter and did exactly that. */
.hero{position:relative;overflow:hidden;}
/* .hero-top is the headline column. It only ever appears inside .hero-photo,
   which positions and pads it — everything structural lives there. */
.hero-top .inner{position:relative;z-index:1;}
/* The homepage hero is the one heading set in --serif rather than --display, so
   the opening line reads as text at scale rather than as a display headline. It
   is also the only heading carrying .accent, and since Literata ships roman-only
   here, keeping the line in --serif is what lets the italic match its own roman.
   At display size the text serif wants a lighter weight and looser tracking. */
.hero-top h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,4.4vw,60px);
  line-height:1.12;letter-spacing:-0.018em;color:var(--pool);}
.hero-top .lead{font-size:clamp(17px,1.35vw,19.5px);line-height:1.6;color:var(--ink-70);margin:22px 0 0;}
.hero-cta{display:flex;align-items:center;gap:22px;margin-top:36px;flex-wrap:wrap;}

/* ── hero: the photograph behind the headline ──
   Below 920px this is plain austin_tree (see the <picture> in index.html) at
   its native 1.7 ratio — no synthetic content at that size, since there's no
   full-bleed benefit to it and every extra pixel of width would have to come
   out of the skyline or the oak instead. At 920px and up it's austin_tree_wide
   (see _tools/extend-hero-canvas.py), full-bleed, with the headline overlaid
   on top. Two things do the muting: a
   saturate/brightness filter on the image itself (the actual pixels read
   quieter), plus a pool-coloured wash raking in from the left, darkest under
   the text and fading out toward the oak on the right so the art is still
   legible there. aspect-ratio matches the wide canvas exactly (2.172, vs. the
   drawing's native 1.7), so object-fit:cover only ever needs to crop
   top/bottom, never the sides. The extra width comes from stretching the
   empty valley between the skyline and the oak, plus a mirrored pad on the
   left edge — nothing is added past the right edge, so the oak stays cropped
   by the frame the way the artwork draws it rather than being sliced off
   mid-picture with landscape running on past it.
   The text, not the picture, is what sets the height here, and that ordering
   is load-bearing. The figure used to size the box (aspect-ratio) with the
   text centred on top of it absolutely — but the headline column is taller
   than 46vw of picture across the whole desktop range, so the overflow split
   evenly top and bottom and slid the first line up underneath the sticky
   header. Now min-height carries the picture's proportions as a FLOOR (the
   same 1288x593 ratio, expressed against the full-bleed width) while the box
   is free to grow past it whenever the words need more room, so there is
   nothing to overflow. The figure is absolute behind that, filling whatever
   height results.
   When the box does grow taller than the picture's ratio, object-fit:cover
   has to trim width instead of height — and object-position pins it right, so
   what gets trimmed is the mirrored pad on the left edge, which exists to be
   sacrificed. The oak on the right edge is never touched. */
.hero-photo-wrap{position:relative;display:flex;flex-direction:column;justify-content:center;
  min-height:calc(100vw * 593 / 1288);}
.hero-photo-figure{margin:0;position:absolute;inset:0;overflow:hidden;}
.hero-photo-figure picture{display:block;width:100%;height:100%;}
.hero-photo-figure img{display:block;width:100%;height:100%;object-fit:cover;border:0;
  object-position:100% 50%;
  filter:saturate(.55) brightness(.86);}
/* The scrim's strong zone runs to 60% rather than fading out by 58%, and that
   is about the narrow end of the desktop range rather than the wide end. The
   fade is a percentage of the picture but the text column is a fixed 440px, so
   the words cover 52% of the width at 944px and only 27% at 1900px — tuned to
   the wide case, the text at 944px ran off the end of the dark part and
   measured 2.06 against white. Held to 60% it measures 6.09. Past 80% it drops
   away fast, which is what keeps the oak out of the murk. */
.hero-photo-figure::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(12,37,35,.92) 0%,rgba(12,37,35,.86) 35%,
    rgba(12,37,35,.58) 60%,rgba(12,37,35,.14) 80%,rgba(12,37,35,0) 93%);}
/* the extension is real drawn content now, not a blur wash, so it holds up
   sharp at ordinary desktop widths with no help. Only past ~1700px — wider
   than the image's own 1288px derivative, so it's already being upscaled a
   little — does it get a second, very light darkening at the outer edges on
   top of the scrim above, easing whatever softness that upscale adds right
   where the synthetic margins are. Listed first so it layers above the scrim. */
/* NB: this restates the scrim underneath, so the two must be kept in step —
   editing the gradient above and not this one silently drops the fix at
   1700px and wider. */
@media (min-width:1700px){
  .hero-photo-figure::after{background:
    linear-gradient(90deg,rgba(12,37,35,.25) 0%,transparent 6%,transparent 94%,rgba(12,37,35,.25) 100%),
    linear-gradient(100deg,rgba(12,37,35,.92) 0%,rgba(12,37,35,.86) 35%,
      rgba(12,37,35,.58) 60%,rgba(12,37,35,.14) 80%,rgba(12,37,35,0) 93%);}
}
/* the text column keeps the site's usual max-width and gutter, just applied
   directly here instead of via .wrap — it sits in normal flow as the wrap's
   only flex child, so its height is the hero's height whenever that exceeds
   the picture's own proportions */
.hero-photo .hero-top{position:relative;z-index:1;width:100%;
  max-width:1240px;margin:0 auto;box-sizing:border-box;
  padding:clamp(28px,4vw,56px) var(--pad);
  /* reserves room below the text for the water section's occlusion overlap
     (see .hero-photo .hero-water below) so the CTA row is never the thing
     that gets cut off */
  padding-bottom:clamp(120px,15vw,230px);}
/* min-width:0 overrides the flex default of min-width:auto — without it a
   single flex child is floored at its content's un-wrapped width, which is
   what let the CTA row push .inner past the viewport edge on narrow screens
   instead of wrapping. */
.hero-photo .hero-top .inner{max-width:440px;width:100%;min-width:0;}
.hero-photo .hero-top h1{color:var(--paper);}
.hero-photo .hero-top .lead{color:var(--paper-dim);}
/* pulls the waterline + the dark band below it up into the photo, so the
   wave's own transparent-above/filled-below shape is what crops the image
   instead of a flat rectangle — "the wave border occludes the image" rather
   than just sitting flush beneath it. Scales with viewport like the
   waterline's own height does, so the proportion holds at any width. */
.hero-photo .hero-water{margin-top:clamp(-190px,-13vw,-80px);position:relative;z-index:0;}

.hero-water{position:relative;}
/* Every water band holds its top colour flat before it starts darkening, and
   that hold is not cosmetic. The waterline strip above is a flat fill of the
   same colour; if the gradient begins descending at 0% the rate of change jumps
   at the seam and the eye reads a hard line straight across the band. Holding
   the colour, then ramping through the mid tone, keeps the join invisible.
   Match the first stop to the fill passed to waterline.html. */
/* margin-top:-1px laps this band over the waterline above it. Same rule as the
   header wave: a waterline box and the band under it land on fractional pixel
   positions, so if they merely touch, each gets an antialiased edge on the
   same row, neither covers it, and a hairline shows across the full width.
   Whether it is visible depends on where the fraction happens to land at a
   given width and device pixel ratio, so it cannot be checked at one size —
   overlap structurally instead. The waterline's bottom row is solid water
   colour across the whole width, so the overlap costs nothing visually. */
.hero-deep{position:relative;overflow:hidden;margin-top:-1px;
  background:linear-gradient(180deg,var(--pool) 0%,var(--pool) 26%,var(--pool-700) 62%,var(--pool-900) 100%);
  padding-top:clamp(34px,4.5vw,52px);padding-bottom:clamp(64px,8.5vw,108px);}
/* Each shelf is a filled shape, so its top edge is crisp — and a crisp edge run
   across the full width is exactly what reads as a horizontal stripe rather than
   as stone. The mask dissolves those top edges into the water and leaves the
   solid floor at the bottom. */
.ledges{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(72px,10vw,132px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 62%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 62%);}

/* submerged depth markers — the two clocks
   These used to carry a straight border-top rule each, meant to read as marks on
   a pool wall. In a band whose whole language is wavy they just read as two
   horizontal lines starting partway across for no reason, so they are gone; the
   numerals are large enough to anchor the columns on their own. */
.depth-marks{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr 1fr 1fr;
  gap:clamp(26px,4vw,56px);align-items:start;}
.depth-note{font-family:var(--serif);font-size:clamp(20px,2.2vw,27px);font-weight:400;line-height:1.3;
  color:var(--paper-dim);margin:0;max-width:24ch;}
.depth-note .sub{display:block;font-family:var(--serif);font-size:14px;line-height:1.5;
  color:var(--paper-faint);margin-top:12px;max-width:30ch;}
.depth{padding-top:4px;}
.depth .d-num{display:block;font-family:var(--display);font-weight:500;font-size:clamp(50px,6.7vw,78px);
  line-height:.98;letter-spacing:-0.03em;color:var(--teal-100);}
.depth .d-unit{font-family:var(--serif);font-size:16px;font-style:italic;
  color:var(--ledge);display:block;margin-top:6px;}
.depth .d-lab{display:block;font-size:14.5px;line-height:1.5;color:var(--paper-dim);margin-top:7px;max-width:22ch;}

/* ── section scaffolding ── */
main{display:block;}
section{scroll-margin-top:88px;}
.band{padding-top:clamp(60px,7.5vw,96px);padding-bottom:clamp(60px,7.5vw,96px);}
.band-shallow{background:var(--spring-100);}
/* a band that follows a page-banner already has the banner's bottom padding
   above it, so it starts flush */
.band-flush{padding-top:0;}
/* a section whose last child is a figure, so the photo is not flush to the fold */
.band-figure-end{padding-bottom:clamp(64px,8vw,96px);}
/* a "see the full page" link trailing a card grid */
.more-link{margin-top:32px;}
.band-water{background:var(--spring-150);}
.sec-title{font-family:var(--display);font-weight:600;font-size:clamp(28px,3.6vw,42px);line-height:1.17;
  letter-spacing:-0.024em;color:var(--pool);}
.sec-intro{font-size:clamp(17px,1.6vw,20px);line-height:1.6;color:var(--ink-70);max-width:640px;margin:22px 0 0;}

/* ── interior page banner ── */
.page-banner{padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(40px,5vw,68px);}
.page-banner h1{font-family:var(--display);font-weight:600;font-size:clamp(34px,4.5vw,59px);line-height:1.13;
  letter-spacing:-0.026em;color:var(--pool);max-width:19ch;}
.page-banner .sec-intro{margin-top:24px;}

/* ── statement: the "what is a 1031" editorial split ── */
.statement{max-width:1000px;}
.statement .big{font-family:var(--serif);font-weight:400;font-size:clamp(25px,3.2vw,40px);line-height:1.3;
  letter-spacing:-0.02em;color:var(--pool);margin:0;}
.statement-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(32px,5vw,72px);
  margin-top:clamp(32px,4vw,52px);align-items:start;}
.statement-cols .body{font-size:16.5px;line-height:1.75;color:var(--ink-70);margin:0 0 18px;}
.glance{border-left:2px solid var(--ledge);padding-left:22px;}
.glance dt{font-family:var(--serif);font-size:15.5px;font-style:italic;color:var(--ink-70);}
.glance dd{margin:6px 0 20px;font-family:var(--serif);font-size:19.5px;font-weight:500;
  line-height:1.35;color:var(--pool);}
.glance dd:last-child{margin-bottom:0;}

/* ── limestone-course cards (values) ── */
.courses{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.7vw,22px);margin-top:clamp(36px,4vw,52px);}
.course{background:var(--spring-100);border:1px solid var(--line);border-top:3px solid var(--ledge);
  padding:28px 24px 30px;transition:transform .18s,box-shadow .18s,border-top-color .18s;}
.course:nth-child(2){border-top-color:var(--ledge-deep);}
.course:nth-child(3){border-top-color:var(--teal-300);}
.course:nth-child(4){border-top-color:var(--teal);}
.course:hover{transform:translateY(-4px);box-shadow:0 16px 34px -22px rgba(23,64,60,.55);border-top-color:var(--coral);}
.course h3{font-family:var(--display);font-weight:600;font-size:clamp(19px,1.8vw,21.5px);letter-spacing:-0.012em;
  line-height:1.32;color:var(--pool);}
.course p{font-size:15.5px;line-height:1.65;color:var(--ink-70);margin:12px 0 0;}
.band-shallow .course{background:var(--spring-50);}

/* ── the flow: process steps down a spring channel ── */
.flow{position:relative;margin-top:clamp(36px,4vw,52px);}
.flow::before{content:"";position:absolute;left:17px;top:10px;bottom:24px;width:2px;
  background:linear-gradient(180deg,var(--teal-300),var(--teal) 45%,var(--pool));}
.fstep{position:relative;padding-left:62px;padding-bottom:clamp(26px,3vw,38px);}
.fstep:last-child{padding-bottom:0;}
.fnode{position:absolute;left:0;top:-1px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:var(--spring-50);border:1.5px solid var(--teal-300);font-family:var(--serif);font-weight:600;font-size:13.5px;
  color:var(--teal-600);transition:border-color .18s,background .18s,color .18s;}
.fstep:hover .fnode{background:var(--teal);border-color:var(--teal);color:var(--paper);}
.fbody{display:grid;grid-template-columns:0.85fr 1.55fr;gap:clamp(16px,3vw,44px);align-items:baseline;}
.fbody h3{font-family:var(--display);font-weight:600;font-size:clamp(19px,1.8vw,22.5px);letter-spacing:-0.012em;
  color:var(--pool);}
.fbody p{font-size:16px;line-height:1.7;color:var(--ink-70);margin:0;max-width:58ch;}
.band-shallow .fnode{background:var(--spring-100);}

/* ── exchange type cards ── */
.pill{display:inline-block;font-family:var(--serif);font-size:14.5px;font-weight:500;
  color:var(--teal-600);background:var(--spring-150);border-radius:999px;padding:4px 15px 5px;}
.types{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,26px);margin-top:clamp(36px,4vw,52px);}
.tcard{background:var(--spring-100);border:1px solid var(--line);padding:clamp(26px,3vw,36px);
  transition:transform .18s,box-shadow .18s;}
.band-shallow .tcard{background:var(--spring-50);}
.tcard:hover{transform:translateY(-4px);box-shadow:0 16px 34px -22px rgba(23,64,60,.5);}
.tcard h3{font-family:var(--display);font-weight:600;font-size:clamp(21px,2vw,25px);letter-spacing:-0.016em;
  color:var(--pool);margin-top:14px;}
.tcard p{font-size:16px;line-height:1.65;color:var(--ink-70);margin:12px 0 0;}
.band-shallow .pill{background:var(--spring-200);}

/* ── exchange type detail cards (Types page) ── */
.tdetails{display:grid;gap:clamp(20px,2.5vw,32px);}
.tdetail{border:1px solid var(--line);background:var(--spring-100);overflow:hidden;}
.td-head{background:var(--spring-150);padding:clamp(22px,2.6vw,30px) clamp(24px,3vw,38px);
  border-bottom:1px solid var(--line);}
.td-head .pill{background:var(--spring-50);}
.td-head h2{font-family:var(--display);font-weight:600;font-size:clamp(23px,2.7vw,33px);letter-spacing:-0.018em;
  line-height:1.18;color:var(--pool);margin-top:12px;}
.td-body{padding:clamp(24px,3vw,38px);}
.td-lead{font-size:17px;line-height:1.75;color:var(--ink);margin:0;max-width:70ch;}
.td-metas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.5vw,52px);margin-top:clamp(24px,3vw,34px);
  padding-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--line);}
.td-metas h3{font-family:var(--serif);font-size:16px;font-weight:400;font-style:italic;color:var(--ink-70);}
.td-metas p{font-size:15.5px;line-height:1.65;color:var(--ink-70);margin:10px 0 0;}

/* ── prose + rules ── */
.prose p{font-size:17px;line-height:1.78;color:var(--ink-70);margin:0 0 18px;max-width:66ch;}
.prose p strong{color:var(--pool);font-weight:700;}
.prose .link-underline{margin-top:8px;}
.rules{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.5vw,44px);margin-top:clamp(32px,4vw,44px);}
.rule{border-left:2px solid var(--ledge);padding:2px 0 2px 22px;}
.rule:nth-child(2){border-left-color:var(--ledge-deep);}
.rule:nth-child(3){border-left-color:var(--teal-300);}
.rule:nth-child(4){border-left-color:var(--teal);}
.rule h3{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-0.012em;line-height:1.35;color:var(--pool);}
.rule p{font-size:15.5px;line-height:1.68;color:var(--ink-70);margin:10px 0 0;}

/* ── deadlines strip (interior pages) ── */
.deadlines{position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--pool-700) 0%,var(--pool-700) 26%,var(--pool-900) 100%);
  color:var(--paper);}
.deadlines .inner{position:relative;z-index:1;padding-top:clamp(48px,6vw,72px);padding-bottom:clamp(48px,6vw,72px);}

/* ── FAQ ── */
.faq{display:grid;gap:12px;margin-top:clamp(28px,3.5vw,40px);}
.faq details{background:var(--spring-100);border:1px solid var(--line);transition:border-color .16s;}
.band-shallow .faq details{background:var(--spring-50);}
.faq details[open]{border-color:var(--spring-200);}
.faq summary{list-style:none;cursor:pointer;padding:20px clamp(20px,2.4vw,28px);display:flex;
  justify-content:space-between;gap:24px;align-items:center;font-family:var(--display);
  font-size:clamp(17.5px,1.8vw,21px);font-weight:500;letter-spacing:-0.01em;color:var(--pool);}
.faq summary::-webkit-details-marker{display:none;}
.faq .mk{position:relative;width:18px;height:18px;flex:0 0 auto;}
.faq .mk::before,.faq .mk::after{content:"";position:absolute;background:var(--coral);transition:transform .22s ease;}
.faq .mk::before{left:0;right:0;top:8px;height:2px;}
.faq .mk::after{top:0;bottom:0;left:8px;width:2px;}
.faq details[open] .mk::after{transform:scaleY(0);}
.faq .ans{font-size:16px;line-height:1.75;color:var(--ink-70);margin:0;max-width:72ch;
  padding:0 clamp(20px,2.4vw,28px) 24px;}

/* ── team: ripple-ring portraits ── */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,34px);margin-top:clamp(36px,4vw,52px);}
.member{background:var(--spring-100);border:1px solid var(--line);padding:clamp(28px,3vw,38px) clamp(22px,2.4vw,30px) 32px;
  text-align:center;}
.band-shallow .member{background:var(--spring-50);}
.member .photo{position:relative;width:min(178px,62%);aspect-ratio:1;margin:0 auto;border-radius:50%;
  overflow:hidden;background:var(--spring-150);box-shadow:0 0 0 2px var(--teal-300),0 0 0 9px rgba(46,125,114,0.10);}
.member .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* Stands in for a portrait. It fills the same ring at the same size, so a card
   without a photo keeps its place in the row instead of pulling its name up out
   of line with the cards that have one. --teal-600 clears AA on --spring-150. */
.member .photo .monogram{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--display);font-weight:500;font-size:clamp(30px,3.4vw,40px);
  letter-spacing:.03em;color:var(--teal-600);}
.member h2{font-family:var(--display);font-weight:600;font-size:21.5px;letter-spacing:-0.014em;color:var(--pool);margin-top:24px;}
.member .role{font-family:var(--serif);font-size:16px;font-style:italic;
  color:var(--coral-ink);margin-top:5px;}
.member .member-contact{margin-top:14px;font-size:14.5px;line-height:1.75;color:var(--ink-70);}
.member .member-contact a{color:var(--teal-600);text-decoration:none;}
.member .member-contact a:hover{text-decoration:underline;}
.member .bio{font-size:15.5px;line-height:1.7;color:var(--ink-70);margin:16px 0 0;text-align:left;}

/* ── contact ── */
.contact-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:clamp(32px,5vw,72px);align-items:start;}
.pool-card{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--pool),var(--pool-900));
  color:var(--paper);padding:clamp(30px,3.4vw,44px);}
.pool-card .pc-inner{position:relative;z-index:1;}
/* a hairline between blocks does the separating the uppercase labels used to do */
.info-block{margin-bottom:22px;padding-top:22px;border-top:1px solid rgba(169,220,208,0.24);}
.info-block:first-child{padding-top:0;border-top:none;}
.info-block:last-child{margin-bottom:0;}
.info-block h2{font-family:var(--serif);font-size:15.5px;font-weight:400;
  color:var(--teal-100);margin:0 0 5px;}
.info-block a,.info-block p{font-family:var(--display);font-size:clamp(17.5px,1.7vw,20px);font-weight:500;
  line-height:1.4;color:var(--paper);text-decoration:none;margin:0;letter-spacing:-0.008em;}
.info-block a:hover{color:var(--ledge);}

/* ── photography ──
   Photos are always cropped by the browser via object-fit, so the CSS height is
   the authority on how tall a band is; the img width/height attributes only exist
   to reserve space before load. */
.photo-band{margin:0;}
.photo-band picture{display:block;}
.photo-band img{display:block;width:100%;height:clamp(230px,30vw,430px);object-fit:cover;}
.photo-caption{display:block;font-family:var(--serif);font-size:15px;font-style:italic;
  color:var(--ink-70);padding-top:14px;}

.figure-split{display:grid;grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);
  gap:clamp(28px,4.5vw,64px);align-items:start;}
.figure-split .prose{margin-top:22px;}
.fig-tall{margin:0;}
.fig-tall picture{display:block;}
.fig-tall img{display:block;width:100%;height:auto;border:1px solid var(--line);}

/* the framed photo that closes the contact page */
.photo-panel{margin:0;}
.photo-panel picture{display:block;border:1px solid var(--line);overflow:hidden;}
.photo-panel img{display:block;width:100%;height:clamp(250px,32vw,450px);object-fit:cover;}

/* ── CTA: underwater ── */
/* the strip a waterline sits on, painted to match the band above it */
/* the -1px margins lap the strip into the bands on both sides — see .hero-deep.
   Above: the strip is painted to match that band, so the overlap is invisible.
   Below: the waterline fill covering that row is the water colour either way. */
.surface{background:var(--spring-50);line-height:0;margin-top:-1px;margin-bottom:-1px;}
.surface.on-shallow{background:var(--spring-100);}
.surface.on-water{background:var(--spring-150);}
.cta{position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--pool) 0%,var(--pool) 26%,var(--pool-700) 62%,var(--pool-900) 100%);
  color:var(--paper);text-align:center;}
/* padding-bottom is deliberately smaller than padding-top. The CTA gradient
   ends on --pool-900, the footer colour, so the two read as one dark area and
   there is no band edge for symmetric padding to balance — it just left a gap. */
.cta .inner{position:relative;z-index:1;padding-top:clamp(72px,9vw,112px);padding-bottom:clamp(46px,5.2vw,66px);}
.cta h2{font-family:var(--display);font-weight:600;font-size:clamp(30px,4vw,48px);letter-spacing:-0.024em;
  line-height:1.15;max-width:820px;margin:0 auto;}
.cta .lead{font-size:clamp(16.5px,1.5vw,19px);line-height:1.6;color:var(--paper-dim);max-width:540px;margin:20px auto 0;}
.cta-row{display:flex;justify-content:center;gap:16px;margin-top:36px;flex-wrap:wrap;}
/* was an uppercase kicker above the heading; it carries real information, so it
   became a plain closing line under the buttons instead of losing it */
.cta-note{font-size:15.5px;font-style:italic;color:var(--paper-faint);margin:24px 0 0;}

/* ── 404 ── */
/* Its own heading rule: the 404 line is display-scale like a hero but has no
   band around it, so it takes --display directly rather than .page-banner. */
.error-page{min-height:56vh;display:flex;flex-direction:column;justify-content:center;}
.error-page h1{font-family:var(--display);font-weight:500;font-size:clamp(38px,6vw,72px);
  line-height:1.1;letter-spacing:-0.028em;color:var(--pool);}

/* ── footer ── */
footer{background:var(--pool-900);color:var(--paper-dim);}
.foot{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:36px;
  border-top:1px solid rgba(248,250,248,0.13);padding-top:40px;}
.foot .word{font-family:var(--display);font-weight:700;font-size:20px;color:var(--paper);letter-spacing:-0.012em;}
.foot .word b{font-weight:400;color:var(--teal-300);}
.foot .blurb{font-size:14px;line-height:1.65;color:var(--paper-faint);margin:16px 0 0;max-width:310px;}
.foot-cols{display:flex;gap:clamp(36px,6vw,72px);flex-wrap:wrap;}
.foot-col h2{font-family:var(--serif);font-size:15.5px;font-weight:400;
  color:var(--teal-300);margin:0 0 6px;padding-bottom:10px;border-bottom:1px solid rgba(127,189,178,0.28);}
.foot-col a,.foot-col div{font-size:15px;line-height:1.5;margin-bottom:11px;color:var(--paper-dim);
  text-decoration:none;display:block;}
.foot-col a:hover{color:var(--ledge);}
.foot-base{border-top:1px solid rgba(248,250,248,0.13);margin-top:48px;padding-top:26px;padding-bottom:56px;
  font-size:13px;color:var(--paper-faint);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;}

/* ── responsive ── */
@media (max-width:920px){
  .nav{flex-wrap:wrap;row-gap:14px;}
  .brand{order:1;} .nav-phone{order:2;}
  .nav-links{order:3;flex-basis:100%;gap:22px;overflow-x:auto;padding-bottom:2px;}
  /* below this breakpoint the <picture> in index.html
     has already switched to the plain austin_tree original (see austin.css's
     .hero-photo-figure comment above) rather than the wide canvas, so there's
     no synthetic content to worry about cropping into. At native ratio the
     box still gets too short for the headline once it's the full column
     width, so this trades the exact ratio for a taller crop — close to
     top/bottom-only near the top of this range, tipping into a real (but
     modest) trim off both sides at the narrowest phone widths — and
     rebalances the wash top-to-bottom for a full-width block of text instead
     of a left-aligned column. */
  .hero-photo-wrap{min-height:clamp(380px,86vw,540px);justify-content:flex-end;}
  /* the narrow source is the plain original, whose skyline and oak both sit
     hard against their frame edges, so the side-trim has to come off evenly
     rather than being pinned right the way the padded wide canvas can be */
  .hero-photo-figure img{object-position:50% 50%;
    /* darker still than the desktop .86: the text is full-width here, so it
       has to stay legible over the pale sky and the limestone both, not just
       over the dark left third. Measured against white this takes the worst
       spot under the headline from 2.87 to 6.75. */
    filter:saturate(.55) brightness(.80);}
  .hero-photo-figure::after{background:linear-gradient(180deg,rgba(12,37,35,.34) 0%,
    rgba(12,37,35,.68) 32%,rgba(12,37,35,.88) 68%,rgba(12,37,35,.93) 100%);}
  /* padding-bottom still has to clear the water section's occlusion overlap
     (.hero-photo .hero-water's negative margin scales the same way), or the
     bottom-anchored CTA row would sit in the zone the wave covers. */
  .hero-photo .hero-top{padding-bottom:clamp(110px,17vw,160px);}
  .hero-photo .hero-top .inner{max-width:100%;}
  .depth-marks{grid-template-columns:1fr 1fr;}
  .depth-note{grid-column:1 / -1;}
  .statement-cols,.contact-grid{grid-template-columns:1fr;}
  .courses{grid-template-columns:1fr 1fr;}
  .types,.rules,.td-metas{grid-template-columns:1fr;}
  .fbody{grid-template-columns:1fr;gap:10px;}
  .team-grid{grid-template-columns:1fr 1fr;}
  .figure-split{grid-template-columns:minmax(0,1fr);}
  /* a portrait at full width gets very tall on a phone — crop it to a band */
  .fig-tall img{height:clamp(300px,58vh,460px);object-fit:cover;}
}
@media (max-width:560px){
  /* the brand and the phone number together come to 314px, which is 2px more
     than a 360px screen has between the gutters — at the default 20px gap the
     number drops to a row of its own and the sticky header grows to 164px.
     Tightening the gap buys back those pixels and keeps it a two-row header. */
  .nav{gap:14px;}
  .nav-links{gap:18px;} .nav-links a{font-size:14px;}
  .depth-marks{grid-template-columns:1fr;gap:26px;}
  .courses,.team-grid{grid-template-columns:1fr;}
  .hero-cta{gap:16px;}
  .member .photo{width:min(160px,54%);}
}

/* ── motion preferences ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition-duration:.01ms !important;}
  .btn:hover,.course:hover,.tcard:hover{transform:none;}
}