:root{
/* GROUND, 19 Sep. There used to be three dark blues: deep #0E2233, navy
   #16324A and lift #1B3A54. Measured in OKLab they span dL 0.093 in total,
   about one Material elevation step, and navy to lift was dL 0.030, smaller
   than the smallest step anyone defines. HSL flattered them (12.7 / 18.8 /
   21.8 percent) but perceptually they were one value with rounding error, so
   the band rhythm was a claim rather than something you could see. Nudging
   them apart does not work: even a 2.5x bigger step only reaches 1.34:1.
   No site that does this well builds structure from adjacent near-dark
   fields. So there is now ONE dark ground, and the paper pair is the only
   change of ground on the page. The three tokens are kept and pointed at it
   so no markup had to change. --lift-band is now a no-op by design.
   THE ONE CHROMATIC EVENT is the spine. See --spine below. */
 --ground:#0E2233;
 --deep:var(--ground);--navy:var(--ground);--lift:var(--ground);
/* THE PEACOCK, ONE COLOUR AT TWO LIGHTNESSES, 19 Sep.
    The brand peacock #0B5570 has enough contrast to work as type on the light
    band, and none at all on the dark one: measured against the ground it is
    APCA Lc 9.3, below the published point of invisibility. So every accent on
    the dark ground used to fall back to a washed slate blue at chroma 0.044,
    and the brand colour appeared on two of seven sections and nowhere else.
    --sky is now the same hue (229) carried up to a lightness that works on the
    dark ground, at 2.3x the chroma. One colour, two grounds, one system. */
 --accent:#0B5570;--sky:#60B7DD;
 /* ONE LIGHT VALUE, 19 Sep. --paper was #FBF8F3 at L 0.98, effectively
    screen-white, and next to a near-black blue that edge glared. It was also
    the only place warmth lived, so warmth and lightness were perfectly
    confounded: the eye read "the light bit", never "the warm bit". Paper is
    now the same value as the type it faces. One dark ground, one light
    ground, and the light ground is the colour of the light type. */
 --bone:#F1EAE0;--paper:var(--bone);--ink:#152C3B;--body-l:#C6D5E0;--mute-l:#AEC0CB;
 --body-d:#3C5061;--mute-d:#2A3B47;--rule-l:rgba(241,234,224,.17);--rule-d:#DFD6C9;
 --sans:'Newsreader',Georgia,serif;--serif:'Newsreader',Georgia,serif;--caps:'SackersGothicMedium',Georgia,serif;
 --fs-body:21px;--lh:1.58;--fs-small:16.5px;
 --fs-lede:clamp(25px,2.9vw,36px);--fs-hero:clamp(28px,3.7vw,50px);--fs-decl:clamp(28px,4vw,53px);
 --s1:16px;--s2:32px;--s3:48px;--s4:64px;--s5:96px;--s6:128px;--s7:176px;
 /* the air at a section break. A band change carries part of the separation
    on its own, so the padding does not have to carry all of it. */
 /* 19 Sep, second pass. 88 each side put 176px between the last line of one
    section and the first line of the next. That was defensible while the
    ground changed colour at the boundary, because the colour was paying for
    the space. Collapsing to one ground removed the thing that was paying, and
    the same air then read as a hole. Down to 56, which is 112 between
    sections: the spine, the label and the rule now mark the boundary and the
    air only has to separate, not announce. */
 --band:48px;
 /* the peacock, the brand colour, at two lightnesses: one that is actually
    visible as a 1px line on the dark ground, and the true brand value for
    the paper band, where the lighter one runs hot. Measured: #0B5570 on the
    old navy was APCA Lc 9.3, below the point of invisibility. The brand
    colour was in the palette and not on the screen. */
 /* ONE VALUE, BOTH GROUNDS. #0A7FA6 measures 3.55 : 1 on the dark and
    3.82 : 1 on the paper, so a single colour reads equally on each. The spine
    used to change value at the seam, which put two changes at one point: the
    ground flipped and the line jumped at the same pixel. Now the line is the
    one thing on the page that never changes. */
 --spine:#0A7FA6;--spine-d:var(--spine);
 /* the rail's floor only does work below 1029px, where 28vw falls under it.
   At 336 it refused to shrink while everything else did, so the text column
   took the whole squeeze: 188px at a 900px window, which broke the name on
   the about page across two lines. 288 gives that back. Above 1029 nothing
   changes at all, and the spine still lands at 154/604 at 1440. */
 --max:940px;--wide:1220px;--rail:clamp(288px,28vw,392px);--gap:clamp(28px,4vw,60px);--pad:clamp(26px,5vw,44px)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:var(--bone);font-family:var(--sans);
 font-size:var(--fs-body);line-height:var(--lh);-webkit-font-smoothing:antialiased;
 text-rendering:optimizeLegibility;font-variant-numeric:oldstyle-num}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad);position:relative}
.container.wide{max-width:var(--wide)}
h1,h2,h3{font-family:var(--serif);font-weight:300;margin:0;letter-spacing:-.01em;color:var(--bone)}
p{margin:0 0 var(--s2)}p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit}
section{padding:var(--band) 0;position:relative}
/* LABEL COLUMN, 20 Sep. THE LABELS WERE NEVER THE SIZE THEY CLAIMED.
   font-variant-caps:all-small-caps renders at roughly the x-height, so a label
   set at 23px put about 11px of ink on the screen. Measured against Inter at
   19px, which puts down 14px, the labels were physically SMALLER than the body
   text they sat beside. Three rounds of raising the declared size (16 to 19 to
   23) moved the real ink from 9px to 11px, which is why every increase felt
   like nothing: the renderer was discarding most of it.

   True uppercase at 19px puts down 15px of ink, which is larger than the body
   text beside it, against 9px for the same 19px in small caps. It is also back
   on the ladder: 21px looked right and the guardrail was correct to reject it.
   Weight goes to 500 because light type on a dark ground optically thins, and
   tracking eases to .11em because real caps need less than small caps do. The
   column was 336px, sized to the longest label (WHERE SPYGLASS COMES IN).
   Brief 49 made the longest WHEN SPYGLASS IS BROUGHT IN, 380px of type, so
   the column now grows to 392px on wide screens and holds every label on one
   line; between 880px and about 1370px that one label takes two lines rather
   than squeezing the body column. The spine moves with the column, so it is
   still at the same x on every page at any given width. */
.label{font-family:var(--serif);text-transform:uppercase;font-size:19px;
 letter-spacing:.11em;color:var(--mute-l);font-weight:500;margin:0;text-wrap:balance}

/* ---------- NAV: transparent over the photograph, solid once you leave it ---------- */
/* the bar arrives rather than appears: .45s linear-ish was a switch you
   could see flip. A longer hold and a proper ease-out, with the blur on
   the same curve so the two do not land at different moments. */
nav.site{position:fixed;top:0;left:0;right:0;z-index:100;background:transparent;
 backdrop-filter:saturate(100%) blur(0px);
 transition:background .62s cubic-bezier(.33,0,.18,1),
  backdrop-filter .62s cubic-bezier(.33,0,.18,1),
  border-color .62s cubic-bezier(.33,0,.18,1);
 border-bottom:1px solid transparent}
nav.site.stuck{background:rgba(14,34,51,.94);backdrop-filter:saturate(180%) blur(12px);
 border-bottom-color:var(--rule-l)}
nav.site .container{display:flex;align-items:center;justify-content:space-between;padding:22px var(--pad)}
.wordmark{font-family:var(--serif);font-size:28px;font-weight:300;letter-spacing:.015em;
 color:var(--bone);text-decoration:none;display:inline-flex;align-items:center}
.wordmark i{color:var(--sky);font-style:italic}
/* NAV, 19 Sep. The three links used to float in the middle of the bar with a
   wide gap either side, because the row was three flex children on
   space-between and the wordmark is far wider than CONTACT. The set is now one
   group pinned to the right, so the bar has two edges and no island: the
   wordmark on the spine at the left, the navigation at the right margin.
   HOME is explicit. Returning by clicking the wordmark is a convention, not a
   signpost, and a visitor should not have to know it. */
.nav-links{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px)}
.nav-links a{font-family:var(--serif);font-variant-caps:all-small-caps;font-size:19px;
 letter-spacing:.1em;text-decoration:none;padding-bottom:2px;color:#A8BECC;
 border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.nav-links a:hover{color:var(--bone);border-bottom-color:var(--sky)}
/* where you are now, stated rather than implied */
.nav-links a.here{color:var(--bone)}
/* the selector has to out-specify .nav-links a, which sets the whole
   border-bottom shorthand and would otherwise reset this back to transparent */
.nav-links a.nav-contact{color:var(--bone);border-bottom-color:rgba(96,183,221,.55);
 margin-left:clamp(6px,1vw,14px)}
.nav-links a.nav-contact:hover{border-bottom-color:var(--bone)}
/* THE MENU, brief 49. Below 960px the bar is the wordmark and MENU, and the
   five links open as a panel under the bar. It used to drop to the wordmark
   and CONTACT alone, which left a phone with no way to reach About at all.
   The threshold came down from 1080px because the labels got shorter:
   measured, the full set clears the wordmark by 100px at 960px. */
.nav-toggle{display:none}
@media(max-width:960px){
 .nav-toggle{display:inline-flex;align-items:center;min-height:44px;background:none;border:0;
  border-bottom:1px solid rgba(96,183,221,.55);border-radius:0;padding:0;cursor:pointer;
  font-family:var(--serif);font-variant-caps:all-small-caps;font-size:19px;letter-spacing:.1em;
  color:var(--bone);-webkit-tap-highlight-color:transparent}
 .nav-links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
  align-items:stretch;gap:0;padding:4px var(--pad) 20px;background:rgb(14,34,51);
  border-bottom:1px solid var(--rule-l)}
 nav.site.open .nav-links{display:flex}
}

/* ---------- HERO: the photograph is the ground. Type in relief in the dark lower band. ---------- */
.hero{min-height:100vh;padding:0;display:flex;flex-direction:column;justify-content:flex-end;
 background-image:url("hero-canyon.jpg");
 background-size:cover;background-position:center 30%;overflow:hidden}
/* THE PHOTOGRAPH DISSOLVES INTO THE PAGE, 20 Sep.
   The veil over the photograph used to stop at 93 per cent opacity at the
   hero's last pixel, so seven per cent of canyon was still showing where the
   solid ground began. Measured down the seam, that left a step: okL 0.227 at
   40px above the boundary against 0.244 below it, with the photograph's own
   texture still running right up to the edge. A boundary you can find is a
   boundary, however small the numbers are.
   The veil now reaches the ground colour EXACTLY, on the same smootherstep
   curve the section seams use, so the photograph does not end -- it runs out.
   The alpha is raised to the power 0.62 so the bed the hero type sits on is
   the same density it has always been (0.546 at two thirds height against
   0.55 before); only the tail below the type is different. */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(to right,rgba(14,34,51,.40) 0%,rgba(14,34,51,.16) 42%,rgba(14,34,51,0) 70%),
  linear-gradient(to bottom,rgba(14,34,51,.62) 0%,rgba(14,34,51,.10) 22%,
  rgba(14,34,51,0) 40%,rgba(14,34,51,0.0378) 45%,rgba(14,34,51,0.1262) 50%,
  rgba(14,34,51,0.2451) 55%,rgba(14,34,51,0.3799) 60%,rgba(14,34,51,0.5185) 65%,
  rgba(14,34,51,0.6507) 70%,rgba(14,34,51,0.7681) 75%,rgba(14,34,51,0.8641) 80%,
  rgba(14,34,51,0.9345) 85%,rgba(14,34,51,0.9778) 90%,rgba(14,34,51,0.9968) 95%,
  rgba(14,34,51,1) 100%)}
.hero .container{width:100%;padding-top:120px;padding-bottom:clamp(44px,6vh,64px);z-index:2}


/* ---------- CONDITIONS: sits on deep navy directly under the photograph ---------- */
.conditions-band{background:var(--deep);padding:var(--s3) 0 var(--s4)}

/* ---------- THE SPINE ---------- */
/* THE SPINE RUNS THROUGH THE BREAKS, 19 Sep.
   The rule used to stop at the last line of a section and start again at the
   first line of the next, so every band change left a gap in it. That is what
   made the air between sections read as dead field rather than as measured
   space: there was nothing carrying the eye across. Extending each section's
   rule through its own padding closes the gaps, and adjacent sections meet
   exactly, so the line runs unbroken from under the photograph to the end of
   the last section and then stops. The two sections whose padding is not
   --band declare their own offsets. */
.spined::before{content:"";position:absolute;
 top:calc(-1 * var(--band));bottom:calc(-1 * var(--band));
 left:calc(var(--pad) + var(--rail));width:1px;background:var(--spine)}
.closing .spined::before{top:calc(-1 * var(--band));bottom:0}
@media(max-width:880px){.spined::before{display:none}}
/* BASELINE, 19 Sep. The label used to carry padding-top:.45em, a constant I
   guessed to make it look level with the text beside it. The thing beside it
   is a different size in every section, so one constant was wrong everywhere:
   measured, the label sat off the neighbouring baseline by -8.5px next to body
   text, -3.5px next to a 28px heading, +3.1px next to the 33px lede and +7.5px
   next to the 40px contact line. Nobody sees six pixels; everybody feels that
   the two columns are not locked. Grid does this properly, as a function of
   whatever is actually there rather than a number typed once. */
.rail{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:var(--gap);
 align-items:baseline}
/* minmax(0,1fr), not 1fr: a grid item defaults to min-width:auto, so the
   column refuses to shrink below its content's intrinsic width and the
   portrait's 760px blew out every narrow screen. */
@media(max-width:880px){.rail{grid-template-columns:minmax(0,1fr);gap:var(--s2)}}
.rail>*{min-width:0}
/* a rail with no label of its own (the body continues the masthead's) keeps
   its empty column on desktop; stacked, the empty label must not add a gap */
@media(max-width:880px){.rail>.label:empty{display:none}}
/* THE MEASURE, 20 Sep. The ch unit is the width of a zero, which runs wide
   in Inter, so 62-66ch was putting 78 characters on a line and filling the
   whole column once the label column widened. Measured back to about 68,
   inside the 45-75 band. */
.body p{color:var(--body-l);max-width:56ch}

/* ---------- THE ONE LIGHT MOMENT. Everything else is dark. ---------- */
.relief{background:var(--paper)}
.relief h1,.relief h2,.relief h3,.relief .lede{color:var(--ink)}
.relief .label{color:var(--mute-d)}
.relief p{color:var(--body-d)}
.relief .beat,.relief .draw::before{background:var(--rule-d);border-color:var(--rule-d)}
.relief .spined::before{background:var(--spine-d)}
.portrait{aspect-ratio:4/5;background:var(--lift);border:1px solid var(--rule-l);
 display:flex;align-items:center;justify-content:center}
.portrait span{font-variant-caps:all-small-caps;font-family:var(--serif);font-size:19px;
 letter-spacing:.14em;color:var(--mute-l)}

footer{background:var(--deep);color:var(--mute-l);padding:var(--band) 0;border-top:1px solid var(--rule-l)}
footer .row{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);flex-wrap:wrap}
footer .fw{font-family:var(--serif);font-size:23px;font-weight:300;color:var(--bone);
 display:inline-flex;align-items:center;gap:0}
footer .fw svg{margin-right:15px}
/* the name is two flex items, so the space between the words is trimmed: put it back as a margin, not a flex gap */
footer .fw i{color:var(--sky);font-style:italic;margin-left:.27em}
footer .meta{font-family:var(--serif);font-variant-caps:all-small-caps;font-size:19px;letter-spacing:.1em}

/* rules draw themselves in, once */
.draw{position:relative}
.draw::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--rule-l);
 transform:scaleX(0);transform-origin:left center;transition:transform .7s cubic-bezier(.22,.7,.28,1)}
.draw.in::before{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.draw::before{transform:scaleX(1)}}
.relief .case h3,.relief .label{color:var(--mute-d)}
.relief .draw::before{background:var(--rule-d)}
.relief .portrait{background:var(--bone);border-color:var(--rule-d)}
.relief .portrait span{color:var(--mute-d)}

/* ---------- NARROW SCREENS ----------
   The space scale is tuned for a 1440 canvas. On a phone the same numbers leave
   dead field between sections, so the whole scale steps down. */
@media(max-width:760px){
 :root{--s4:48px;--s5:64px;--s6:80px;--s7:96px}
 .declare p{max-width:none}
 .hero .container{padding-bottom:clamp(64px,9vh,96px);padding-top:104px}
 .wordmark{font-size:23px}
 /* the bar is only the wordmark and CONTACT here, and at 19px they almost
    touch on a 390px screen */
 .nav-links a{font-size:16px}
 nav.site .container{padding:16px var(--pad)}
}
/* mobile browser chrome makes 100vh taller than the visible window */
@supports(height:100svh){.hero{min-height:100svh}}

/* ---------- BUILD HANDOFF v2 (30 Aug) ----------
   Hero is one claim, alone, in the top fifth. Nothing goes above it.
   No portrait at the top: a face captures the first second and then takes
   attention off the sentence beside it. The portrait lives in About. */
.heroclaim{font-family:var(--serif);font-size:clamp(30px,4.3vw,60px);line-height:1.12;
 font-weight:200;color:var(--bone);margin:0;text-shadow:0 1px 26px rgba(6,18,28,.75)}
/* three beats, each on its own line but set tight so the block reads as one
   statement rather than a list. The periods carry the AND. */
.heroclaim span,.heroclaim b{display:block;font-weight:200}
.heroclaim b{color:var(--sky);font-style:italic}
.drawer{margin:clamp(26px,3.4vh,40px) 0 0;font-size:16px;letter-spacing:.02em;
 color:#A9BECC;text-shadow:0 1px 18px rgba(6,18,28,.7)}

/* ---------- COPY v3 (31 Aug, from index-classic-copy-v2) ---------- */
/* ONE LINE ACROSS THE BASE OF THE PHOTOGRAPH.
   The size is derived, not chosen: the string measures 36.2em, so the type
   is set to (container width / 36.5) and capped at 31px, which is the largest
   size that still clears the 1220px container on a single line. Below 900px
   a single line is not possible at a readable size, so it wraps instead. */
.heroclaim{font-size:min(31px,calc((100vw - 88px) / 36.5));line-height:1.22;max-width:none}

/* ============================================================
   DESIGN SYSTEM · 13 Sep
   ONE SPINE. Every section is .container.wide + .rail, so the label column
   starts at the same x as the wordmark and the body column starts at the
   same x on every section, top to bottom. The hero aligns to the wordmark.

   FIVE TYPE ROLES, and nothing else:
     display  serif 200         hero category, section ledes, contact claim
     set      serif 200/300     the anchors, the five stages
     body     sans              running prose
     label    serif small caps  section labels, stage numerals, place names
     note     serif italic sky  exactly one closing line per section

   GROUND: deep, lift, paper, paper, deep. The two light sections are the
   evidence pair. Everything else is night.
   ============================================================ */

/* ---------- HERO: three levels, bottom left, on rock and not on sky ---------- */
/* the crop is pinned to the bottom of the frame so the star band sits high in
   the picture and the type lands on rock, never on sky */
.hero{min-height:88svh;background-position:50% 100%}
.hero .container{padding-bottom:48px;padding-top:128px}
/* MASTHEAD SCALE. The page had a 3.9:1 range top to bottom, which reads as
   even and therefore forgettable. Two balanced lines at 110px take it to
   6.9:1 without touching anything else. Measured: still lands on rock. */
/* MASTHEAD, 19 Sep. The claim came down a rung and the clause went up one, so
   the two lines read as one statement with a subordinate clause rather than a
   headline with a caption stranded under it. 69/33 is 2.09:1, which is still a
   clear hierarchy: below about 1.6:1 the two lines start to compete. */
.heroclaim{font-family:var(--serif);font-weight:200;color:var(--bone);margin:0;
 font-size:clamp(38px,4.8vw,69px);line-height:1.08;letter-spacing:-.006em;
 text-wrap:balance;
 text-shadow:0 1px 12px rgba(4,12,20,.44)}
/* upright, not italic. Without the period the clause is grammatically a
   continuation of the claim, and roman lets it read as one running sentence.
   The italic turned it into a caption in a softer register than the claim. */
.heroclause{font-family:var(--serif);font-weight:300;font-style:normal;color:var(--sky);
 font-size:clamp(21px,2.3vw,33px);line-height:1.3;
 margin:16px 0 0;text-shadow:0 1px 9px rgba(4,12,20,.40)}
.drawer{margin:clamp(26px,3.4vh,38px) 0 0;font-family:var(--serif);
 font-variant-caps:all-small-caps;letter-spacing:.2em;font-size:19px;color:#A9BECC;
 text-shadow:0 1px 8px rgba(4,12,20,.40)}
@media(max-width:700px){
 .heroclaim{font-size:clamp(27px,8.2vw,42px);line-height:1.12}
 .heroclause{font-size:clamp(18px,4.5vw,22px)}
 /* THE ONE DEFENDED EXCEPTION TO THE LADDER. Letterspaced small caps read
   optically larger than roman at the same size, and at 16px this line wraps
   on a phone and strands EUROPE. 14.5px keeps it on one line. */
 .drawer{font-size:14.5px;letter-spacing:.16em}}

/* ---------- GROUND ---------- */
/* the first band sits directly under the photograph with no colour change to
   separate them, so it opens tighter than a normal section */
.conditions-band{background:var(--deep);padding:var(--band) 0}
/* width:100% matters. Without it the box takes the image's intrinsic width
   (760px) and overflows every narrow screen: the guardrail caught 398px of
   horizontal overflow at 390px. max-width alone does not constrain it. */
/* not #about: the home page's About section carries that id, the about page
   itself does not, so the id-scoped rules never applied there and the image
   rendered at its intrinsic 760px. */
.portrait{aspect-ratio:4/5;width:100%;max-width:var(--rail);margin:0 0 var(--s3);
 background:none;border:0;overflow:hidden}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================
   MULTI-PAGE · 18 Sep
   The photograph belongs to the home page. Every other page is
   typographic: same spine, same ladder, no image weight.
   ============================================================ */
/* THE MASTHEAD HAS TO BE TALL ENOUGH TO HOLD THE DAWN, 20 Sep.
   Once the transitions became structural, every subpage inherited the same
   300px night-side ramp the home page uses -- and measured, the masthead on
   how-an-engagement-works was 357px tall in total. The ramp therefore began
   57px below the navigation bar and the page title sat inside it, so the
   masthead read as fog rather than as ground, and the page opened in a much
   weaker register than the home page's 88svh of photograph.
   600px WAS THE WRONG ANSWER TO THE RIGHT QUESTION. It fixed the title by
   making the section tall enough to hold a 300px ramp with clearance, which
   left about 180px of FLAT dark above the ramp doing nothing at all -- 374px
   between the title and the end of the masthead, most of it not even gradient.
   The right question is not how tall the section is, it is where the type sits
   on the curve. Measured: the page title (#F1EAE0) holds 4.5:1 up to okL
   0.524 and the eyebrow (#AEC0CB) up to 0.420, and the old layout put the
   eyebrow at 0.415 -- under the floor, which is why it read as fog rather than
   as a masthead. With a 192px ramp and the corridor as bottom padding, the
   title sits in the first tenth of the curve at okL 0.258, and the masthead
   needs only enough height to be a masthead. What is left below the title is
   the dawn itself rather than an empty field with a dawn at the bottom of it.
   The about page's masthead is taller than this already, so nothing changes
   there. */
.pagehead{background:var(--deep);padding:clamp(128px,16vh,168px) 0 clamp(56px,7vh,88px);
 display:flex;flex-direction:column}
/* the spine is absolutely positioned inside .container, so it is only as long
   as the container is. Giving the section a min-height without this grew the
   section and left the spine stopping 240px short -- through the dawn, which
   is the one stretch where the line is doing the most work. The container
   takes the slack instead.
   width:100% is not redundant. A flex item with auto margins on the cross
   axis does not stretch -- the auto margins win -- so the container silently
   shrink-wrapped to its content, 950px instead of 1220px, and the whole
   masthead moved 135px right of every other section on the page. */
.pagehead>.container{flex:1 1 auto;width:100%;display:flex;flex-direction:column;
 justify-content:flex-end}
.eyebrow{font-family:var(--serif);font-variant-caps:all-small-caps;letter-spacing:.2em;
 font-size:19px;color:var(--mute-l);margin:0 0 var(--s2)}
.pagetitle{font-family:var(--serif);font-weight:200;color:var(--bone);
 font-size:clamp(28px,3.9vw,40px);line-height:1.14;margin:0;max-width:22ch;text-wrap:balance}
/* ============================================================
   ABOUT MASTHEAD, 19 Sep
   The portrait used to be a 252px block sitting above the prose on the paper
   band, which read as an obligatory headshot. The about page is the one the
   highest-value reader opens: the person who has already agreed to a call and
   is checking before it. So the page gets a masthead of its own, the way the
   home page does, with the portrait at scale on the dark ground beside the
   name. The structure is the point. A properly art-directed photograph drops
   into it without any of this changing.
   ============================================================ */
.pagehead .body.withportrait{display:grid;align-items:start;
 grid-template-columns:minmax(0,1fr) clamp(220px,21vw,292px);
 grid-template-rows:auto auto;gap:clamp(26px,3.2vw,52px) clamp(28px,3.6vw,58px)}
.withportrait .pagetitle{grid-column:1;grid-row:1;align-self:end;margin:0}
/* the claim shares the row with the portrait, so its column is about half
   the width it gets on the other pages. At 28px that measure ran to 26
   characters and the sentence broke four times; a rung down holds it to
   three lines with the breaks falling where the sense does. */
.withportrait .claim{grid-column:1;grid-row:2;align-self:start;margin:0;
 font-size:clamp(20px,1.9vw,23px);max-width:34ch}
.withportrait .portrait{grid-column:2;grid-row:1/3;align-self:center;
 width:100%;max-width:none;margin:0;background:none;border:0;overflow:hidden}
/* the two text rows are uneven, so the image is what sets the block's height;
   below this width it cannot hold a column of its own */
/* The masthead used to stack at 820, which on a tablet dropped the portrait
   under the text and left the whole right half of the screen empty beside a
   420px image: the emptiest rectangle on the site. Two columns hold to 660,
   where the text column would fall under about 300px and the name starts to
   break badly. Below that the portrait takes the full column, which is right
   on a phone. */
@media(max-width:660px){
 .pagehead .body.withportrait{grid-template-columns:minmax(0,1fr)}
 .withportrait .pagetitle,.withportrait .claim{grid-column:1;grid-row:auto}
 .withportrait .portrait{grid-column:1;grid-row:auto;max-width:248px;margin-top:var(--s2)}
}

.claim{font-family:var(--serif);font-weight:300;font-style:italic;color:var(--sky);
 font-size:clamp(21px,2.3vw,28px);line-height:1.38;margin:var(--s3) 0 0;max-width:40ch;
 text-wrap:balance}
.body p.claim{font-size:clamp(21px,2.3vw,28px);line-height:1.38}

/* long-form body: one measure, one rhythm */
/* margins must not stack on top of the section padding at the top and foot
   of a column: .turn carries a 48px top margin that was landing directly
   under 56px of section padding. */
.prose p{font-size:var(--fs-body);line-height:1.58;color:var(--body-l);max-width:54ch;
 margin:0 0 var(--s2)}
.prose p:last-child{margin-bottom:0}
.prose .turn{font-family:var(--serif);font-weight:300;font-style:italic;color:var(--bone);
 font-size:clamp(21px,2.2vw,26px);line-height:1.42;max-width:50ch;margin:var(--s2) 0 var(--s2)}
.prose .close{font-family:var(--serif);font-style:italic;color:var(--sky);
 font-size:clamp(21px,2.2vw,26px);line-height:1.46;max-width:50ch;margin:var(--s3) 0 0}

/* THE RESET HAS TO COME LAST, 20 Sep.
   It used to sit above .prose .turn, which sets its margins with the SHORTHAND
   -- and a shorthand later in the cascade at equal specificity rewrites the
   margin-top this rule had just zeroed. So a .turn that opened a section kept
   its 48px top margin, and the About section on the home page began 48px lower
   than every other one: measured, that made the engagements seam a 192px band
   where every other seam on the site is 144. Nothing about the rule was wrong
   except where it was. */
.body>*:first-child,.prose>*:first-child{margin-top:0}
.body>*:last-child,.prose>*:last-child{margin-bottom:0}

/* a named block: heading plus one paragraph, used by the four movements
   and by the three conditions */
/* the hairline that opens a block sat 8px off the cap of its heading, which
   reads as a mistake rather than as tight setting. The rule now carries 48
   above it and 20 of padding below, so the space plainly belongs to the block
   it opens. The cards get the same relationship, which they had inverted. */
.block{margin:0 0 var(--s3);padding-top:20px}
.block:last-child{margin-bottom:0}
.block h3{font-family:var(--serif);font-weight:300;color:var(--bone);
 font-size:clamp(23px,2.5vw,33px);line-height:1.28;margin:0 0 14px;max-width:34ch;
 text-wrap:balance}
.block p{font-size:var(--fs-body);line-height:1.58;color:var(--body-l);max-width:52ch;margin:0}
.block p+p{margin-top:var(--s1)}
.relief .block h3{color:var(--ink)}
.relief .block p,.relief .prose p{color:var(--body-d)}
.relief .eyebrow{color:var(--mute-d)}
.relief .pagetitle,.relief .prose .turn{color:var(--ink)}
.relief .claim,.relief .prose .close{color:var(--accent)}

/* engagement teasers: a title, one sentence, one link */
.teasers{margin:0}
.teaser{padding:20px 0 0;margin-top:var(--s3)}
.teaser:first-child{margin-top:0}
.teaser h3{font-family:var(--serif);font-weight:300;font-size:clamp(22px,2.4vw,30px);
 line-height:1.3;margin:0 0 14px;max-width:38ch;color:var(--bone);text-wrap:balance}
.relief .teaser h3{color:var(--ink)}
.teaser p{font-size:var(--fs-body);line-height:1.58;color:var(--body-l);max-width:54ch;margin:0}
.relief .teaser p{color:var(--body-d)}
.morelink{font-family:var(--serif);font-variant-caps:all-small-caps;letter-spacing:.14em;
 font-size:19px;color:var(--sky);text-decoration:none;white-space:nowrap;
 border-bottom:1px solid transparent;transition:border-color .18s}
.morelink:hover{border-bottom-color:var(--sky)}
.relief .morelink{color:var(--accent)}
.relief .morelink:hover{border-bottom-color:var(--accent)}
.alllink{margin:var(--s3) 0 0}
.backlink{display:inline-block;margin:var(--s4) 0 0;font-family:var(--serif);
 font-variant-caps:all-small-caps;letter-spacing:.14em;font-size:19px;color:var(--mute-l);
 text-decoration:none;border-bottom:1px solid transparent}
.backlink:hover{border-bottom-color:var(--mute-l)}
.relief .backlink{color:var(--mute-d)}

/* the contact close, repeated on every page */
.closing{background:var(--deep);padding:var(--band) 0}
.closing h2{font-family:var(--serif);font-weight:200;color:var(--bone);
 font-size:clamp(26px,3.1vw,40px);line-height:1.2;max-width:26ch;margin:0 0 var(--s3)}
.body p.reach{font-size:clamp(21px,2.2vw,28px);line-height:1.4}
.reach{font-family:var(--serif);font-weight:300;color:var(--sky);font-size:clamp(21px,2.2vw,28px);
 line-height:1.5;margin:0}
.reach a{color:var(--sky);text-decoration:none;border-bottom:1px solid var(--rule-l);
 padding-bottom:8px}
.reach a:hover{border-bottom-color:var(--sky)}
.reach .sep{color:var(--mute-l);padding:0 10px}
.closing .based{margin:var(--s3) 0 0;font-size:var(--fs-small);line-height:1.66;
 color:var(--mute-l);max-width:52ch}
/* the places carry the same blue as Advisory in the wordmark */
.based .where{color:var(--sky)}
@media(max-width:620px){.reach{font-size:19px}.reach .sep{display:none}
 .reach a{display:block;margin-bottom:14px}}

/* ============================================================
   THE OMBRE, 20 Sep -- rebuilt as one curve
   ============================================================

   WHAT WAS WRONG. The first ombre was two straight ramps stitched at the
   seam: 260px of dark side, then 44px of paper side. Measured on the rendered
   page, that put EIGHTY PER CENT OF THE LIGHTNESS CHANGE INTO 121 PIXELS,
   with the steepest pixel 9.5x steeper than the average. That is not a fade,
   it is an edge with a ramp leading up to it.

   Worse, it crossed neutral in the middle. The ground is blue (oklch hue 246)
   and the paper is warm (hue 77), 169 degrees apart, and interpolating
   between them in oklab passes straight through the achromatic axis: measured
   chroma fell to 0.0035 against 0.0154 at either end, a dip to a fifth, and
   it fell there at okL 0.87 -- the brightest part of the climb. A cold
   near-neutral at that lightness, with saturated blue above it and warm cream
   below, is exactly the bright stripe that kept showing up in screenshots.
   THE WHITE LINE WAS NOT AN ARTEFACT. IT WAS IN THE PIXELS.

   WHAT IT IS NOW. One curve, sampled twice, defined by three functions:

     L   smootherstep across the whole span, so the ramp leaves the ground and
         arrives at the paper with zero slope and there is no visible point at
         which it starts or stops;
     C   a bulge that never falls below either endpoint, so the middle of the
         ramp is MORE coloured than its ends, never less;
     H   held in the brand blue for four fifths of the run, then crossed to the
         paper's warmth at t=0.90 where okL is already 0.931 against paper's
         0.940 -- with chroma pinched for the eight per cent of the ramp the
         crossing takes. Blue and cream cannot be joined without crossing
         somewhere. The crossing is put where the two are nine thousandths of
         a lightness unit apart, which is where nobody can find it.

   THE SEAM IS SAMPLED TWICE, NOT STRADDLED. A lower section cannot paint over
   the section above it, so the curve is painted as two pseudo-elements. The
   first version of this sampled the curve on one uniform grid and split it,
   which left the last stop of the upper half and the first stop of the lower
   half at different points on the curve -- a step of exactly that gap, at the
   one pixel row where it is most visible. Each half now ends, or begins,
   exactly on the seam.

   THE GEOMETRY IS SET BY CONTRAST, NOT BY TASTE. Measured: light body text
   (#B7CAD7) holds 4.5:1 up to a background of okL 0.442, and dark body text
   (#4E6272) needs okL 0.888. So 64 per cent of the lightness change has to
   happen in the empty corridor between the last line of one section and the
   first of the next, and the rest can ride behind text on either side. The
   old corridor was 96px, which is why the old ramp had to be violent. The
   corridor is now 224px: 128 on the night side, 96 on the paper side. That
   space is not padding. It is the transition.

   ONE RULE, EVERY PAGE. These used to be four classes hand-applied to four
   sections of the home page, which is why the home page was the only one with
   a transition at all. They are now structural: any dark section followed by
   the paper band gets the outbound ramp, any paper band followed by a dark
   section gets the return. Nothing is tagged, nothing can be forgotten, and a
   new page gets the behaviour by being built the same way as the others.
   :has() is required for the giving side, so both sides are gated on it
   together -- a browser without it gets the old hard edge rather than half a
   gradient arriving from nowhere. */

/* THE SIZE OF THE TRANSITION, second pass 20 Sep.
   The first numbers came out of the contrast calculation, which says how much
   room the transition NEEDS and nothing at all about how much dead field that
   leaves on the screen. Measured on the built page, 300/240 with a 224px
   corridor put 224px of nothing between the last line of one section and the
   first of the next, and 272px at the engagements seam. That is not a horizon,
   it is a hole with a gradient in it.
   Everything is scaled by 0.64, which reproduces the identical curve smaller:
   the stops are percentages, so both halves keep the same shape and the same
   slope match at the seam, and because the corridor scales with the ramp the
   contrast geometry is preserved. Re-measured rather than assumed -- the
   element margins do not scale, so the check is empirical.
   This is also now the SAME set of numbers on a phone as on a desktop, which
   is one fewer thing that can drift. */
:root{--seam-night:52px;--seam-paper:40px;--ramp-night:150px;--ramp-paper:120px}

@supports selector(:has(*)){

 /* --- the corridor ------------------------------------------------ */
 section:not(.relief):has(+ .relief){padding-bottom:var(--seam-night)}
 section:not(.relief) + .relief{padding-top:var(--seam-paper)}
 .relief:has(+ section:not(.relief)){padding-bottom:var(--seam-paper)}
 .relief + section:not(.relief){padding-top:var(--seam-night)}

 /* neither of these is a ground change either */
 .relief:has(+ .relief){padding-bottom:var(--s2)}
 .relief + .relief{padding-top:var(--s2)}

 /* the spine bridges whatever the padding happens to be, so it has to be
    told about the wider corridor or it stops short of the seam */
 section:not(.relief):has(+ .relief) .spined::before{bottom:calc(-1 * var(--seam-night))}
 section:not(.relief) + .relief .spined::before{top:calc(-1 * var(--seam-paper))}
 .relief:has(+ section:not(.relief)) .spined::before{bottom:calc(-1 * var(--seam-paper))}
 .relief + section:not(.relief) .spined::before{top:calc(-1 * var(--seam-night))}

 /* --- the ramp ---------------------------------------------------- */
 section:not(.relief):has(+ .relief)::after,
 section:not(.relief) + .relief::before,
 .relief:has(+ section:not(.relief))::after,
 .relief + section:not(.relief)::before{
  content:'';position:absolute;left:0;right:0;pointer-events:none;z-index:0}

 section:not(.relief):has(+ .relief)::after{bottom:0;height:var(--ramp-night);
  background:linear-gradient(to bottom in oklab,#0E2233 0%,#0E2233 7.143%,#0E2334 14.29%,#0F2536 21.43%,#122839 28.57%,#152C3E 35.71%,#1B3244 42.86%,#223A4C 50%,#2B4456 57.14%,#364F61 64.29%,#425C6E 71.43%,#506A7C 78.57%,#5F798A 85.71%,#6F8899 92.86%,#7F97A7 100%)}
 section:not(.relief) + .relief::before{top:0;height:var(--ramp-paper);
  background:linear-gradient(to bottom in oklab,#7F97A7 0%,#8EA5B4 8.333%,#9DB3C0 16.67%,#AABFCB 25%,#B7CBD5 33.33%,#C2D5DD 41.67%,#CDDDE4 50%,#D7E2E8 58.33%,#E0E7E7 66.67%,#E7E9E8 75%,#EAEBE8 83.33%,#EEEAE5 91.67%,#F0EAE2 100%)}
 .relief:has(+ section:not(.relief))::after{bottom:0;height:var(--ramp-paper);
  background:linear-gradient(to bottom in oklab,#F0EAE2 0%,#EEEAE5 8.333%,#EAEBE8 16.67%,#E7E9E8 25%,#E0E7E7 33.33%,#D7E2E8 41.67%,#CDDDE4 50%,#C2D5DD 58.33%,#B7CBD5 66.67%,#AABFCB 75%,#9DB3C0 83.33%,#8EA5B4 91.67%,#7F97A7 100%)}
 .relief + section:not(.relief)::before{top:0;height:var(--ramp-night);
  background:linear-gradient(to bottom in oklab,#7F97A7 0%,#6F8899 7.143%,#5F798A 14.29%,#506A7C 21.43%,#425C6E 28.57%,#364F61 35.71%,#2B4456 42.86%,#223A4C 50%,#1B3244 57.14%,#152C3E 64.29%,#122839 71.43%,#0F2536 78.57%,#0E2334 85.71%,#0E2233 92.86%,#0E2233 100%)}

 /* everything real sits above the wash */
 section:not(.relief):has(+ .relief)>*,
 section:not(.relief) + .relief>*,
 .relief:has(+ section:not(.relief))>*,
 .relief + section:not(.relief)>*{position:relative;z-index:1}
}

/* bands used by the multi-page build */
.lift-band{background:var(--lift)}
.prose-lead{font-family:var(--serif);font-weight:300;color:var(--bone);
 font-size:clamp(23px,2.5vw,28px);line-height:1.34;margin:0 0 var(--s3);max-width:34ch;
 text-wrap:balance}
/* the font round's `.body p` rule outranks .prose-lead on specificity and was
   flattening the lead to body size, leaving a 200-weight paragraph the same
   size as the text under it: same family, visibly different colour of ink.
   22 Sep: the lead takes its own size back and sits at 300, one weight off
   the body rather than two. */
.body p.prose-lead{font-size:clamp(23px,2.5vw,28px);line-height:1.34}
.relief .prose-lead{color:var(--ink)}
/* on a page with no photograph behind it the bar is solid from the first pixel */
body.sub nav.site{background:rgba(14,34,51,.94);backdrop-filter:saturate(180%) blur(12px);
 border-bottom:1px solid var(--rule-l)}

/* ============================================================
   THE PHONE, 20 Sep
   ============================================================
   Most of this site was tuned on a 1440 canvas and then checked on a phone
   only for horizontal overflow, which is a test that a page can pass while
   still being unpleasant to use. This block is the pass that was missing.
   Every number here was measured on a 390x844 and a 320x568 render.
   ============================================================ */

/* --- THE TRANSITION SCALES WITH THE SCREEN -----------------------------
   The ramp is 540px of curve and 224px of corridor. On a 1440 canvas that is
   a horizon. On a 390x844 phone it is two thirds of everything you can see at
   once, and the empty part of the corridor becomes a long scroll through
   nothing. Both numbers are scaled by the same factor, which matters: the
   gradient stops are percentages, so scaling both halves equally reproduces
   the identical curve at a smaller size, with no change of slope at the seam
   and -- because the type positions are set by the corridor, which scales
   with it -- no change to any contrast ratio either. */


/* --- THE PORTRAIT TAKES THE COLUMN ------------------------------------
   248px was set for the tablet width, where the text column is 700px and a
   248px image reads as a considered element within it. On a 390px phone the
   column is 338px, and the same 248px reads as an image that failed to load
   at full size. It takes the column. */
@media(max-width:560px){
 .withportrait .portrait{max-width:100%}
}
@media(max-width:660px) and (min-width:561px){
 .withportrait .portrait{max-width:var(--rail)}
}

/* --- TAP TARGETS -------------------------------------------------------
   Measured: CONTACT in the bar was a 30px-high target, and the engagement
   links and the two contact lines were the height of their own text. The
   published minimum is 44px, and it is a floor rather than a target. The
   padding is vertical only and the links are inline-block, so nothing moves
   horizontally and no underline gets longer than its word. */
@media(max-width:880px){
 .nav-links a{display:inline-flex;align-items:center;min-height:44px}
 .morelink,.backlink{display:inline-flex;align-items:center;min-height:44px}
 .alllink{margin-top:var(--s2)}
}
/* the reach lines used to go display:block on a phone, which stretched each
   one's underline the full width of the screen and made an email address look
   like an empty form field */
@media(max-width:620px){
 .reach a{display:inline-flex;align-items:center;min-height:44px;width:auto}
}

/* --- THE BAR ON A SMALL PHONE ------------------------------------------
   Measured across the real sizes: at 390 the wordmark and CONTACT together
   are 310px against 338px of room, which fits; at 375 -- an iPhone SE and a
   13 mini -- they are 310 against 323 and the wordmark wraps to two lines,
   which breaks the bar in half. It had never been checked below 390.
   The wordmark takes a smaller setting below 400, and below 340 the gutters
   and CONTACT come in as well. The mark scales with the type rather than
   being dropped: it is the thing that makes the bar look like a mark rather
   than a line of text. 14.5px is the letterspaced-small-caps exception the
   type ladder already documents. */
.wordmark span{white-space:nowrap}
@media(max-width:400px){
 .wordmark{font-size:19px}
 .wordmark svg{width:27px;height:27px;margin-right:11px!important}
}
@media(max-width:340px){
 :root{--pad:20px}
 .nav-links a.nav-contact{font-size:14.5px}
}

/* THE ENGAGEMENT CARDS LEAD WITH THE DIAGNOSIS, 21 Sep.
   Each home-page card now opens with the same line its full case opens with,
   set the way the case page sets it -- serif italic in the brand peacock -- so
   the card and the page it links to read as one thing. The role sentence under
   it stays in body type: the diagnosis is what a skimming reader takes away,
   the role sentence is what tells them it was done. */
.teaser .diag{font-family:var(--serif);font-style:italic;font-weight:300;font-size:21px;
 line-height:1.5;color:var(--sky);max-width:58ch;margin:0 0 12px}
.relief .teaser .diag{color:var(--accent)}

/* the menu panel, set last so it outranks the phone sizes above */
@media(max-width:960px){
 .nav-links a,.nav-links a.nav-contact{display:flex;align-items:center;min-height:52px;margin:0;
  padding:0;font-size:19px;border-bottom:1px solid var(--rule-l)}
 .nav-links a:last-child{border-bottom:0}
 .nav-links a.nav-contact{color:#A8BECC}
 .nav-links a.here{color:var(--bone)}
}
@media(max-width:700px){.nav-toggle{font-size:16px}}
@media(max-width:340px){.nav-toggle{font-size:14.5px}}

/* HERO, 21 Sep, Jennifer's call after brief 49. The category is the headline,
   on one line, in the sky blue; the direction of travel is the tagline under
   it, bone and italic. The headline measures 20.5em, so its size is derived
   from the width it has, capped at 55px, which is the largest that holds one
   line in the 1220px container. Below 880px one line would mean type too
   small to carry a hero, so it wraps instead. */
.hero .heroclaim{color:var(--sky);font-weight:300;font-style:normal;white-space:nowrap;
 font-size:min(55px,calc((min(100vw,1220px) - 2 * var(--pad)) / 20.7));line-height:1.1;letter-spacing:0}
.hero .heroclause{color:var(--bone);font-weight:200;font-style:italic;
 font-size:clamp(28px,2.8vw,40px);line-height:1.25;margin:16px 0 0}
@media(max-width:880px){
 .hero .heroclaim{white-space:normal;font-size:clamp(30px,6.6vw,44px);line-height:1.14}
 .hero .heroclause{font-size:23px;font-weight:300;margin-top:14px}
}

/* eyebrow segments break at the dots, never inside a segment */
@media(min-width:700px){.eyebrow span{white-space:nowrap}}

/* ============================================================
   PHONE TYPE, 22 Sep. Measured at 390px, almost every role had
   collapsed onto 19px: body, labels, eyebrow, links, the turn and
   close lines, with card and block headings only a pixel or two
   above it. Nothing led. On a phone the body steps down one rung to
   16px (the iOS reading size), labels and small caps step down with
   it, and headings step up one rung, so the ladder reads again:
   16 body and small caps, 19 serif accents, 23 headings and claims,
   28 page titles, 30 hero.
   ============================================================ */
@media(max-width:620px){
 :root{--fs-body:19px}
 .label{font-size:16px;letter-spacing:.12em}
 .block h3,.teaser h3{font-size:23px;line-height:1.28;margin-bottom:12px}
 .teaser .diag{margin-bottom:10px}
 .claim,.withportrait .claim{font-size:23px;line-height:1.34}
 .prose .turn,.prose .close{font-size:23px}
 .prose .turn{margin:var(--s2) 0 var(--s2)}
 /* the eyebrow was four ragged lines with a dot starting one of them:
    one segment per line, separators dropped */
 .body .eyebrow{font-size:0;max-width:none;margin-bottom:var(--s3)}
 .eyebrow span{display:block;font-size:16px;line-height:1.7;letter-spacing:.16em}
 .morelink,.backlink{font-size:16px}
 .closing .based{font-size:16px}
 footer .meta{font-size:16px}
 /* the email, phone and location had 70px of air between them */
 .reach a{margin-bottom:0}
 .closing .based{margin-top:var(--s2)}
}

/* ============================================================
   22 Sep, second pass on the field
   The transition was carrying 144px of empty band at every seam and the
   masthead was holding the first paragraph 96px below the tagline. The curve
   is the same curve, scaled: corridor 52/40 against 80/64, ramps 150/120
   against 192/154. Measured, contrast at the seam is unchanged.
   ============================================================ */
.hero .container{padding-bottom:clamp(26px,3vh,34px)}
.hero .heroclause{margin-top:10px}
/* the first section under the photograph starts sooner */
/* SPACE AUDIT, 22 Sep. Measured ink to ink, a section change where the ground
   does NOT change was costing 116px against 68 between blocks inside a
   section: 48 of padding each side plus the block's own 20. The reader sees
   no transition there, so it was paying an ombre's price for nothing. Those
   seams come to 64. The two real ombre seams are untouched, because the
   gradient is painted inside that padding and cutting it squashes the
   transition. The hero already ends in 700px of sky, so its 96 comes to 64. */
.hero + section,.hero + span + section{padding-top:var(--s4)}
.conditions-band{padding-bottom:var(--s2)}
.lift-band{padding-top:var(--s2)}
/* the three recognition blocks were 64px apart, which read as three pages */
.block{margin:0 0 var(--s3)}
/* THE CASE CARD TITLES ran to 38 characters and broke in two on a laptop for
   no reason: the body column is wider than that. They take the column. */
/* 23px, not 26: at 26 the longest title measures 730px against a 682px
   column, so every card broke in two on a laptop. */
/* one line per card title on a laptop was the point of max-width:none. The
   23px pin here predates the 22 Sep type round and was quietly holding the
   card titles a rung below the section headings; 28 restores the step. The
   longest title now takes two lines, which is what a 69-character title
   should do. */
.teaser h3{max-width:none;text-wrap:pretty;font-size:28px;line-height:1.3;margin-bottom:14px}
@media(max-width:880px){.teaser h3{text-wrap:balance}}

/* THE FILING LINE, moved. The place and discipline line used to sit above the
   case title, where it was the first thing read and the least important. It
   now closes the case, under a rule, spaced as a set rather than a sentence. */
.prose + .eyebrow.filed{margin:var(--s5) 0 0;padding-top:var(--s2);max-width:none;
 border-top:1px solid var(--rule-d);display:flex;flex-wrap:wrap;
 gap:10px clamp(22px,3vw,44px);font-size:0;color:var(--mute-d)}
/* the separators are dropped: the gaps do that job now, and as flex items the
   dots were stranding themselves at the ends of lines */
.eyebrow.filed span{white-space:nowrap;font-size:16px;letter-spacing:.18em;line-height:1.6}
@media(max-width:620px){
 .prose + .eyebrow.filed{font-size:0;gap:4px 0;flex-direction:column;margin-top:var(--s4)}
 .eyebrow.filed span{white-space:normal}
}

/* ============================================================
   THE TYPE, 22 Sep 2026
   Two faces, the way the business card works: one engraved capital face
   doing one job, one serif doing everything else.

   SACKERS GOTHIC MEDIUM, licensed from Monotype for this domain, self
   hosted, carries the wordmark, the section labels and the navigation.
   Nothing else. On the card it sets the name and nothing else.

   NEWSREADER replaces Literata and Inter, both of them. It was drawn for
   reading on screens, it is an old-style serif in the same family as the
   card's Bembo, and unlike Bembo it holds its weight reversed out on the
   navy, which is half of this site. One family everywhere ends the
   switching between a serif and a sans.
   ============================================================ */
@font-face{font-family:'SackersGothicMedium';font-display:swap;
 src:url('fonts/sackers-gothic-medium.woff2') format('woff2'),
     url('fonts/sackers-gothic-medium.woff') format('woff')}

/* the logotype is drawn to its own optical spec, not to the text ladder.
   SPYGLASS loses tracking (.14 to .09) so the two words share a texture, and
   Advisory comes up to 26 against the 23 beside it. The pair reads as one
   object rather than a label with a caption. Any future letterhead or og
   image follows these numbers. */
.wordmark span{font-family:var(--caps);text-transform:uppercase;letter-spacing:.09em;
 font-size:23px;font-weight:400}
/* the card sets Advisory a shade smaller than SPYGLASS, not larger: its cap
   is 0.91 of the cap above it. Matching sizes in px lands at 0.95, which is
   the nearest rung and reads right. The old .22em plus the trailing letter-
   space after SPYGLASS made a gap of about 10px where a word space wanted 6. */
.wordmark span i{font-family:var(--serif);font-style:italic;text-transform:none;
 letter-spacing:.01em;font-size:26px;margin-left:.02em;font-weight:500}
footer .fw{font-family:var(--caps);text-transform:uppercase;letter-spacing:.09em;font-size:19px}
/* The mark is centred by flex, which put the bottom of the open circle about
   8px below the baseline of SPYGLASS at every size. Translating it up 22.5%
   of its own height sits the ink on the baseline: measured at -22 on the
   masthead, -23.5 and -23 at the two phone steps and -22 in the footer, so
   one value is inside half a pixel everywhere. Transform only, so nothing
   in the bar moves. */
/* A round mark beside caps centres on the midline of the letters, not on the
   baseline: the circle overshoots the cap height, so sitting it on the
   baseline floats the whole mark above the word. Measured against the cap
   midline the nudge is -7.8 on the masthead and -5.3 / -6.1 at the two phone
   steps, so -7 is inside half a pixel there; the footer mark is a different
   size against a different text size and wants -11. */
.wordmark svg{transform:translateY(-7%)}
footer .fw svg{transform:translateY(-11%)}
footer .fw i{font-family:var(--serif);text-transform:none;letter-spacing:.01em;font-size:21px;margin-left:.02em;font-weight:500}
.label{font-family:var(--caps);text-transform:uppercase;font-variant-caps:normal;
 letter-spacing:.105em;font-size:16px;font-weight:400;padding-right:20px}
.nav-links a,.nav-toggle{font-family:var(--caps);font-variant-caps:normal;
 text-transform:uppercase;letter-spacing:.12em;font-size:16px}
/* Newsreader sets smaller than Inter at the same size and the right-hand
   column was reading thin at 19. 21 is a rung the ladder did not have; it is
   deliberate and the only one, added 22 Sep so the body holds its own beside
   33px headings. Phones stay on the ladder at 19. */
/* 22 Sep: the body takes Newsreader's 300 cut, the same weight as the
   opening lead. At 400 the two sat side by side and read as two different
   faces; the colours lift a notch to hold the same optical weight at 300. */
.prose p,.block p,.teaser p,.body p{font-size:21px;line-height:1.58;font-weight:300}
@media(max-width:620px){
 .prose p,.block p,.teaser p,.body p{font-size:19px;line-height:1.58;font-weight:400}
 .prose-lead,.body p.prose-lead,.claim,.withportrait .claim,
 .prose .turn,.prose .close,.teaser .diag,.reach,.body p.reach{font-weight:400}
 .wordmark span{font-size:16px}
 .wordmark span i{font-size:19px}
 .wordmark svg{width:28px;height:28px;margin-right:11px}
 footer .fw{font-size:16px}
 footer .fw i{font-size:19px}
 footer .fw svg{width:22px;height:22px}
 /* letterspaced capitals read optically larger: the phone labels take the
    same 14.5px exception the ladder already documents */
 .label,.nav-toggle{font-size:14.5px;letter-spacing:.12em}
}

@media(max-width:360px){
 .wordmark span{font-size:14.5px;letter-spacing:.08em}
 .wordmark span i{font-size:16px}
 .wordmark svg{width:24px;height:24px;margin-right:9px}
}

/* the 28px card title belongs to the laptop; the phone block sets 23 and
   sits earlier in the file, so it needs saying again after that rule. */
@media(max-width:620px){
 .teaser h3{font-size:23px;line-height:1.28;margin-bottom:12px}
}