/* CHAPRA & CO. — off-white/off-black institutional system
   Type scale: 13 caps kicker · 16 eyebrow/nav · 19 body · 21 CTA · 22 lead · 26 h2 · 40 h1. Georgia wordmark, Source Serif 4 for everything else, no accent color. */
:root{--bg:#FAF8F4;--ink:#141414;--ink-rgb:20,20,20;--sec:#5C5C5C;--rule:#DEDAD1;--rail:64px;
--serif:Georgia,'PT Serif',serif;--sans:'Source Serif 4',var(--serif);--body-serif:'Source Serif 4',var(--serif)}
html,body{overflow-x:hidden}
/* an in-page link travels rather than jumps. The House Research pages have read this
   way since paper.css was written; the rest of the site simply joins them. */
html{scroll-behavior:smooth}
/* the highlight was declared for dark mode alone, which left a light page
   selecting in the browser's blue — the one colour the system does not own */
::selection{background:rgba(var(--ink-rgb),.15)}
/* the UA's default 8px body margin was shifting all page content right while
   the fixed rail stayed put, so the two could never line up */
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:19px;line-height:1.65;-webkit-font-smoothing:antialiased;padding-top:76px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px 0 calc(16px + var(--rail));position:relative}
/* scroll indicator: fixed line in the left rail, marker tracks scroll position */
.scroller{position:fixed;left:calc(var(--rail) / 2 + 12px);top:76px;bottom:0;width:1px;background:var(--ink);z-index:30}
.scroller-mark{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.scroller-mark svg{width:22px;height:22px}
@media(max-width:900px){.scroller{display:none}.wrap{padding:0 16px}}
.skip{position:absolute;left:-9999px;background:var(--ink);color:var(--bg);padding:8px 14px;z-index:99}.skip:focus{left:12px;top:10px}
/* type system */
h1{font-family:var(--body-serif);font-weight:500;font-size:clamp(30px,3.6vw,40px);line-height:1.15;letter-spacing:-.3px}
h2{font-family:var(--body-serif);font-weight:500;font-size:26px;line-height:1.25;letter-spacing:-.2px}
h3{font-family:var(--body-serif);font-weight:500;font-size:19px;line-height:1.3}
.lead{font-size:22px;line-height:1.5;color:var(--ink)}
.body,p{font-size:19px}
.k{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.meta{font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.03em}
.lnk{font-size:16px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:1px}
.lnk:hover{opacity:.6}
/* the page's calls to action, kept a step above the 19px body copy they follow */
.arrow-link{display:inline-flex;align-items:center;gap:10px;font-size:21px;font-weight:500;color:var(--ink)}
.arrow-link .arrow{display:inline-block;transition:transform .15s ease}
.arrow-link:hover{opacity:.6}
.arrow-link:hover .arrow{transform:translateX(6px)}
/* header */
header.site{border-bottom:1px solid var(--rule);background:var(--bg);position:fixed;top:0;left:0;right:0;width:100%;z-index:50}
header.site .in{display:flex;justify-content:space-between;align-items:center;height:76px;max-width:none;margin:0;padding:0 32px}
.brand{font-family:var(--serif);font-weight:700;letter-spacing:.18em;font-size:16px}
/* the descriptor sits under the wordmark as a colophon line would, small enough
   that the two together still stand inside the header's fixed 76px band — that
   height is depended on by body's top padding and by the scroller's origin */
.brand-sub{display:none}
@media(min-width:901px){
  .brand{display:block;line-height:1.1}
  .brand-sub{display:block;font-family:var(--sans);font-weight:600;font-size:10px;
    letter-spacing:.2em;text-transform:uppercase;color:var(--sec);margin-top:5px}
}
nav.main{display:flex;gap:32px;align-items:center}
nav.main a{font-size:16px;color:var(--ink);padding:2px 0;border-bottom:1px solid transparent}
/* the links are already ink, so the rule under them is what marks current/hover */
nav.main a:hover,nav.main a.here{border-color:var(--ink)}
/* burger: three hairlines at the same 1px weight as every other rule on the
   site. The word "Menu" is gone, so the button carries its name in aria-label.
   44px box keeps the tap target honest while the mark itself stays small. */
.burger{display:none;align-items:center;justify-content:flex-end;width:44px;height:44px;
  padding:0;background:none;border:none;cursor:pointer;color:var(--ink)}
.burger .bars{position:relative;display:block;width:22px;height:1px;background:currentColor}
.burger .bars::before,.burger .bars::after{content:"";position:absolute;left:0;
  width:22px;height:1px;background:currentColor;transition:transform .2s ease,top .2s ease}
.burger .bars::before{top:-6px}
.burger .bars::after{top:6px}
/* open: the middle rule clears and the outer two cross */
.burger[aria-expanded="true"] .bars{background:transparent}
.burger[aria-expanded="true"] .bars::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] .bars::after{top:0;transform:rotate(-45deg)}
/* the mobile nav is declared once, in the max-width:900px block at the foot of
   this sheet — the burger arrives on that line, so the panel has to as well.
   A separate 760px copy used to state it a second time; the two have been
   folded together rather than left to drift apart. */
/* sections */
section{padding:72px 0}

/* jaali wash across the whole document body. Applied to <main> rather than to
   alternating sections, so the header and footer stay plain and the texture
   reads as the ground the page is printed on. */
main.jaali .wrap{max-width:1500px}
/* The wash begins at the scroller rail rather than the viewport edge, and runs
   the full height of <main> so it meets the footer's rule with no cream gap.
   isolation:isolate keeps the z-index:-1 layer inside main's stacking context,
   so it sits above the page ground but below the content. */
main.jaali{position:relative;isolation:isolate}
main.jaali::before{content:"";position:absolute;pointer-events:none;z-index:-1;
  top:0;right:0;bottom:0;left:calc(var(--rail) / 2 + 12px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 0L16 16M16 0L0 16' fill='none' stroke='%23141414' stroke-opacity='0.075' stroke-width='0.8'/%3E%3C/svg%3E")}
/* scoped to the textured page so interior pages keep their footer spacing */
main.jaali + footer.site{margin-top:0}
@media(max-width:900px){main.jaali::before{left:0}}
/* The page body is set one browser-zoom step below the chrome: the header and
   footer stay full size, while <main> and everything in it — type, spacing and
   the column's own measure — render at 90%, the proportion the page was signed
   off at. Scoped to .jaali so the research paper, which has its own sidebar
   layout, is left alone.
   The scroller rail is a fixed sibling outside the zoom, so main's left insets
   are divided back out: 90% of (x / .9) is x, and the wash and the text column
   stay aligned to the rail where they were. */
main.jaali{zoom:.9}
main.jaali::before{left:calc((var(--rail) / 2 + 12px) / .9)}
main.jaali .wrap{padding-left:calc((16px + var(--rail)) / .9)}
@media(max-width:900px){
  main.jaali::before{left:0}
  main.jaali .wrap{padding-left:16px}
}

/* two-column editorial layout: the numeral and label hang in the left margin,
   content takes the right. The open left column is the point — it gives the
   eyebrow somewhere to live and lets the text block sit off-centre. */
/* the label column is sized to the label: once the body copy gained a visible
   card edge, a .4fr column left a gulf of texture between the two */
.lay{display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,1fr);
     column-gap:44px;align-items:start}
/* the section label sits at the vertical middle of the content it labels,
   so it reads as belonging to the whole block rather than to its first line */
.lay > .eyebrow{grid-column:1;align-self:center}
.lay > .lay-body{grid-column:2;min-width:0}
/* reading card: the jaali wash runs behind the whole of <main>, which put a
   crosshatch under every line of body copy. The text column now sits on a card
   that blocks it, so prose reads on clean ground and the texture stays in the
   margins where it belongs. Every card is capped at the same width, so their
   edges make one line down the page. */
.lay-body,.lay-hero > .lay-head{max-width:880px;box-sizing:border-box;
  background:var(--bg);border:1px solid var(--rule);padding:38px 44px}
/* the hero's headline and its standfirst are separate grid items on adjacent
   rows; dropping the edge they share fuses the two into a single card */
.lay-hero > .lay-head{border-bottom:none;padding-bottom:0;margin-bottom:0}
.lay-hero > .lay-body{border-top:none;padding-top:20px}
/* the eyebrow sits beside the standfirst, so it clears the card's top padding */
.lay-hero > .eyebrow{padding-top:20px}
/* the card's padding sets the inset on its own — a first child's top margin or
   a last child's bottom margin would stack on top of it and throw the card
   off balance, which showed up as every card sitting top-heavy */
.lay-body > :first-child{margin-top:0}
.lay-body > :last-child{margin-bottom:0}
/* the card is wide enough to carry the list rows; the prose measure is not */
.lay-body .lead{max-width:70ch}
.lay-body > p{max-width:74ch}
/* rows run to the card's inner edges — the card supplies the frame, so the
   first and last no longer need padding or a rule against it */
.lay-body .item,.lay-body .mrow,.lay-body .sub-frame{max-width:none;box-sizing:border-box}
/* .sub-frame is inline-block by default, which would shrink it to its contents */
.lay-body .sub-frame{display:block}
/* the 200px label column became a gulf once the card framed it; the label
   needs only enough room for its longest word */
.lay-body .mrow{grid-template-columns:150px 1fr;gap:28px}
.lay-body > .item:first-child,.lay-body > .mrow:first-child{padding-top:0}
.lay-body > .item:last-child,.lay-body > .mrow:last-child{padding-bottom:0;border-bottom:none}
/* the two work cards sit on the section card now, so they need no ground of
   their own — the hairline between them is enough. They run to the card's
   inner edges rather than sitting inset inside its padding. */
.lay-body .cards{background:var(--rule);gap:1px}
.lay-body .cards > .card{padding:0 30px}
.lay-body .cards > .card:first-child{padding-left:0}
.lay-body .cards > .card:last-child{padding-right:0}
/* fine print: legible, but clearly subordinate to the field it governs */
.fine{margin-top:20px;font-size:15px;line-height:1.65;color:var(--ink)}
.fine .lnk{font-size:inherit}
.eyebrow{display:flex;gap:14px;align-items:flex-start}
.eyebrow .tick{flex:none;width:30px;height:1px;background:var(--sec);margin-top:.66em}
/* the eyebrow doubles as the section heading, so it may be an h2 — reset the
   heading's default margin without changing how it looks */
/* the eyebrow reads at 16px; .k stays 12px everywhere else it is used, so the
   research list's category tags keep their caption scale */
.eyebrow .k{font-size:16px;color:var(--sec);max-width:15em;line-height:1.55;margin:0;font-weight:600}
/* hero variant: the headline runs alone on the first row so it reads at full
   width, and the label drops to sit beside the standfirst, not the headline.
   The gap that used to separate headline from standfirst is now the card's
   own padding — leaving it here would tear the hero card in two. */
.lay-hero > .lay-head{grid-column:2;grid-row:1;margin:0}
.lay-hero > .eyebrow{grid-row:2;align-self:start}
.lay-hero > .lay-body{grid-row:2}
@media(max-width:900px){
  .lay{display:block}
  .eyebrow{margin-bottom:16px}
  .eyebrow .k{max-width:none}
  /* the eyebrow stacks above the card here, so it needs neither the offset
     that aligned it with the standfirst nor a cap on its measure */
  .lay-hero > .eyebrow{padding-top:0}
  .lay-body,.lay-hero > .lay-head{max-width:none;padding:26px 22px}
  .lay-hero > .lay-head{margin-bottom:0}
  .lay-hero > .lay-body{padding-top:16px}
}

/* section rhythm: faint jaali texture wash on alternating sections — no rule lines, no new color */
.tex{position:relative}
.tex::before{content:"";position:absolute;top:0;right:0;bottom:0;left:var(--rail);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0L16 8L8 16L0 8Z' fill='none' stroke='%23141414' stroke-opacity='0.045'/%3E%3C/svg%3E");background-repeat:repeat;pointer-events:none}
@media(max-width:900px){.tex::before{left:0}}
.banner{min-height:calc(100vh - 76px);display:grid;align-content:center;padding:60px 0}
/* .wrap centres itself with auto side margins, and auto side margins suppress
   the stretch a grid or flex item would otherwise get — so inside the banner it
   collapsed to its own content width (1284px against 1440px elsewhere). That
   narrowed the layout grid and pushed the hero card ~40px right of every card
   below it. An explicit border-box width restores the fill; the max-width is
   .wrap's own content cap plus its padding, so the hero and the sections below
   still measure the same on very wide screens. Scoped through main.jaali so it
   outranks that rule's own max-width. */
main.jaali .banner > .wrap{width:100%;box-sizing:border-box;
  max-width:calc(1500px + 32px + var(--rail))}
/* Home page only — .banner exists on no other page. Stacked, the hero card falls
   short of the forced full-viewport min-height, and align-content:center split the
   leftover ~75px above AND below it; that dead space plus 60px of banner padding
   and section 02's own 72px made the gap between the two cards ~248px. Dropping
   the min-height removes the slack, and the trimmed paddings close the rest.
   Placed after the .banner rule above, or that later declaration would win. */
@media(max-width:900px){
  .banner{min-height:0;padding:36px 0 28px}
  .banner + section{padding-top:36px}
}
.section-title{font-family:var(--body-serif);font-weight:500;font-size:clamp(24px,3vw,30px);line-height:1.2;letter-spacing:-.2px;margin-bottom:30px}
.section-sub{font-size:15px;color:var(--ink);margin-bottom:30px}
/* Mohatta Palace motifs: medallion, jaali frieze — line-only, off-black, used sparingly */
.medallion{width:20px;height:20px;color:var(--ink);flex:none}
.frieze{display:block;width:100%;height:16px;color:var(--ink);opacity:.35}
/* feature cards */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule)}
.card{background:var(--bg);padding:36px 32px;display:flex;flex-direction:column;gap:14px}
/* the flex gap sets the rhythm; browser default h3/p margins were adding
   ~50px on top of it, so a heading sat 74px off its own paragraph */
.card h3{font-size:20px;margin:0}
.card p{margin:0}
.card p{color:var(--ink);font-size:17px;line-height:1.6}
/* the two paragraphs differ in length, so the link is pushed to the foot of the
   column and the pair sits on one line regardless of the copy above it */
.card .arrow-link{margin-top:auto;padding-top:4px}
@media(max-width:640px){.cards{grid-template-columns:1fr}
/* stacked, the hairline runs horizontally, so the side padding that separated
   the two columns becomes vertical padding between the rows */
.lay-body .cards > .card{padding:22px 0}
.lay-body .cards > .card:first-child{padding-top:0}
.lay-body .cards > .card:last-child{padding-bottom:0}}
/* standing disclosure under the two cards: set in the secondary tone at kicker
   size so it reads as a footnote to the pair, and run to the card's own edges
   rather than to a measure of its own, so it spans both columns */
.cards-note{margin:26px 0 0;font-size:13px;line-height:1.7;color:var(--sec)}
.lay-body > .cards-note{max-width:none}
/* correspondence: the statement runs the full width of the card and carries it
   as a title; the two routes in — distribution, then direct contact — sit side
   by side beneath, divided by a hairline down the gutter between them */
.corr{display:grid;grid-template-columns:1fr;gap:clamp(26px,3.2vw,38px)}
.corr-left h2{margin-bottom:0}
/* set at section-heading scale now that it holds the box on its own */
.corr-left p{margin:0;max-width:none;font-family:var(--body-serif);font-weight:500;
  font-size:clamp(22px,2.6vw,30px);line-height:1.25;letter-spacing:-.2px}
.corr-left > :first-child{margin-top:0}
/* gap:0 — the columns' own padding makes the gutter, so the rule sits centred
   in it rather than hard against the second column */
.corr-right{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:start;
  padding:clamp(20px,3.2vw,38px);border:1px solid var(--rule)}
.corr-right .blk{padding-right:clamp(26px,3.6vw,50px)}
.corr-right .blk + .blk{margin-top:0;padding-top:0;border-top:none;
  padding-right:0;padding-left:clamp(26px,3.6vw,50px);border-left:1px solid var(--rule)}
.corr-right .blk p{font-size:17px;line-height:1.6;margin:14px 0 0;max-width:38ch}
.corr-right .arrow-link{margin-top:18px;font-size:19px}
.corr-right .arrow-link .u{border-bottom:1px solid var(--rule);padding-bottom:1px}
.corr-right .arrow-link:hover .u{border-bottom-color:var(--ink)}
@media(max-width:760px){
  /* stacked, the divider goes back to running across the two blocks */
  .corr{gap:28px}
  .corr-right{grid-template-columns:1fr}
  .corr-right .blk{padding-right:0}
  .corr-right .blk + .blk{padding-left:0;border-left:none;
    margin-top:26px;padding-top:26px;border-top:1px solid var(--rule)}
  .corr-left p,.corr-right .blk p{max-width:none}
}
/* asymmetric label/content grid */
.grid{display:grid;grid-template-columns:200px 1fr;gap:32px}
@media(max-width:640px){.grid{grid-template-columns:1fr;gap:6px}}
/* editorial list rows (no boxes) */
.item{display:block;padding:26px 0;border-bottom:1px solid var(--rule)}
.item .im{display:flex;justify-content:space-between;gap:16px}
.item h3{margin:8px 0 6px;max-width:30em}
a.item:hover h3,a.item:focus-within h3{text-decoration:underline}
/* the arrow at the foot of the row travels the 6px every other call to action
   on the site travels, and the standing head comes up to full ink — the row
   answers as one object rather than leaving its title to answer alone.
   focus-within is stated alongside :hover throughout, so a reader arriving on
   the keyboard is told exactly what a reader arriving on the pointer is told. */
.item .ft .arrow{display:inline-block;transition:transform .15s ease}
a.item:hover .ft .arrow,a.item:focus-within .ft .arrow{transform:translateX(6px)}
.item .im .k{transition:color .18s ease}
a.item:hover .im .k,a.item:focus-within .im .k{color:var(--ink)}
.item p{color:var(--ink);font-size:17px;line-height:1.6;max-width:60ch}
/* ── THE HOME PAGE'S SHELF ─────────────────────────────────────────────────
   The register entry on the home page turns by hand. Unlike the research
   plate's rotator — which is a desktop instrument inside a fixed stage — this
   one is the .item row itself, and it is carried at every width: the section
   has nothing else in it, and a shelf that vanished on a phone would leave the
   heading standing over an empty card.

   Every slide is laid into one grid cell rather than positioned absolutely, so
   the stage is exactly as tall as its tallest paper and takes that height from
   the copy rather than from a number written here. Nothing resizes as the
   reader turns it, and nothing has to be measured to keep that true. */
.lrot-stage{display:grid}
.lrot-stage > .item{grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .45s ease,visibility .45s}
.lrot-stage > .item.on{opacity:1;visibility:visible;pointer-events:auto}
/* the card sat flush in the section card as its only child, closing rule and
   all — inside a stage it is no longer that child, so the two rules that gave
   it the flush edges are restated here */
.lrot .item{padding:0;border-bottom:none}
/* no paper may set the height of the stack on its own: the standfirst is held
   to three lines, and the break lands on a line with an ellipsis */
.lrot .item p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  overflow:hidden}
/* the controls: the numerals on the left, the arrows on the right, over the
   hairline that closes the card — the same arrangement the research shelf uses */
.lrot-nav{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  margin-top:22px;padding-top:16px;border-top:1px solid var(--rule)}
.lrot-index{display:flex;gap:16px}
.lrot-dot,.lrot-arrow{background:none;border:none;padding:0;margin:0;cursor:pointer;
  font-family:var(--sans);color:var(--sec);font-variant-numeric:tabular-nums}
.lrot-dot{font-size:13px;font-weight:600;letter-spacing:.14em;
  border-bottom:1px solid transparent;padding-bottom:2px}
.lrot-dot.on{color:var(--ink);border-bottom-color:var(--ink)}
.lrot-dot:hover,.lrot-arrow:hover{color:var(--ink);opacity:1}
.lrot-dot:active,.lrot-arrow:active{opacity:.5;transform:translateY(1px)}
.lrot-arrows{display:flex;gap:18px}
.lrot-arrow{font-size:17px}
@media(prefers-reduced-motion:reduce){.lrot-stage > .item{transition:none}}
.item .ft{margin-top:10px;font-size:15px;color:var(--ink)}
.item .ft b{color:var(--ink);font-weight:600}
/* research index — the listing is the page, so it runs at its own scale rather
   than the home page's. The card stops being a column inside the grid and
   becomes the full measure: a fixed label rail on the left, everything else
   filling the shell. Type steps up to match — the papers are the content here,
   not one section among several. No new families: the same two vars throughout. */
.rpage .lay{grid-template-columns:190px minmax(0,1fr);column-gap:34px}
/* wider than the home page's 880px column, but still short of the shell — the
   rows need room for the meta head and the action, the prose does not */
.rpage .lay-body{max-width:1040px;padding:38px 56px}
/* Latest research.
   The stage fills the column and every slide is laid over it, so the card cannot
   resize or reflow as the reader moves between papers however long a standfirst
   runs — the size and the orientation are fixed by the plate, not by the copy.
   The shelf turns on its own on a dwell, and the crossfade below is the whole of
   that movement — it is the same fade the arrows and the numerals make, so the
   paper is never swept away, only replaced. The turn holds while the pointer or
   the keyboard is on the block, and reduced motion stops it entirely.
   One paper renders as a static block with the controls suppressed. */
.rot{display:none}
@media(min-width:901px){
  /* the whole block — label, stage, controls — is centred in the column rather
     than stretched across it. The stage takes a fixed height so the card stays
     locked whichever paper is showing. */
  .rot{display:flex;flex-direction:column;justify-content:center;min-height:0;
    grid-column:2;grid-row:1;padding-left:clamp(30px,2.6vw,48px)}
  .rot-label{color:var(--sec)}
  /* The slides are laid over the stage, so the stage must carry an explicit
     height — absolutely positioned children contribute none. It is sized to the
     tallest slide rather than told to grow: growing pushed the standing head to
     the top of the column and the controls to the bottom, stranding both far
     from the paper they belong to. The group now sits together, centred. */
  /* the floor is set by the tallest slide the register actually carries: a
     three-line title plus the clamped three-line standfirst measures 279px, so
     270 left the read link 4px short of the stage and the plate clipped it.
     Raising the floor costs the plate nothing — the plate's height comes from
     the section's min-height, and this column has room to spare. */
  .rot-stage{position:relative;flex:0 0 auto;height:clamp(290px,30vh,320px);
    margin-top:18px}
  .rot-slide{position:absolute;inset:0;display:flex;flex-direction:column;
    justify-content:center;opacity:0;visibility:hidden;
    transition:opacity .45s ease,visibility .45s}
  .rot-slide.on{opacity:1;visibility:visible}
  .rot-meta{font-family:var(--sans);font-size:13px;letter-spacing:.1em;
    line-height:1.6;text-transform:uppercase;color:var(--sec)}
  /* the standing head and the title are different voices; they need air between
     them, not the single line the body rhythm would give */
  .rot-title{font-family:var(--body-serif);font-weight:500;font-size:26px;
    line-height:1.22;letter-spacing:-.2px;margin:22px 0 0;max-width:18em}
  .rot-title a:hover{text-decoration:underline;text-underline-offset:4px}
  /* the standfirst is held to a fixed number of lines so no paper can push the
     slide past the stage it shares with the others.
     The wrapper is what makes that true. -webkit-line-clamp only acts on a
     -webkit-box, and a flex item's display is blockified — so while the
     paragraph sat directly in the slide the clamp was inert, and the cut was
     made instead by flex-shrink squeezing the only child that could give way.
     That put the break at whatever height the title happened to leave: 2.66
     lines here, a different fraction on the next paper, always mid-line.
     Inside a wrapper the paragraph is an ordinary block, so the clamp applies
     and the break lands on a line with an ellipsis. flex:none stops the wrapper
     absorbing the slack, so the height is set by the clamp and by nothing else.
     The title is deliberately left unclamped — it is the paper's name. */
  .rot-standwrap{flex:none;margin:14px 0 0}
  .rot-stand{margin:0;font-size:17px;line-height:1.55;color:var(--ink);
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
    overflow:hidden}
  .rot-read{display:inline-flex;align-items:center;gap:10px;margin-top:20px;
    font-family:var(--sans);font-size:15px;font-weight:600;
    border-bottom:1px solid var(--ink);padding-bottom:2px;align-self:flex-start}
  .rot-read:hover{opacity:.6}
  .rot-nav{display:flex;justify-content:space-between;align-items:baseline;
    gap:20px;margin-top:18px;padding-top:16px;border-top:1px solid var(--rule)}
  .rot-index{display:flex;gap:16px}
  .rot-dot,.rot-arrow{background:none;border:none;padding:0;margin:0;cursor:pointer;
    font-family:var(--sans);color:var(--sec);font-variant-numeric:tabular-nums}
  .rot-dot{font-size:13px;font-weight:600;letter-spacing:.14em;
    border-bottom:1px solid transparent;padding-bottom:2px}
  .rot-dot.on{color:var(--ink);border-bottom-color:var(--ink)}
  .rot-dot:hover,.rot-arrow:hover{color:var(--ink);opacity:1}
  /* the press, which on a touch screen is the only state either of them has */
  .rot-dot:active,.rot-arrow:active{opacity:.5;transform:translateY(1px)}
  .rot-arrows{display:flex;gap:18px}
  .rot-arrow{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.rot-slide{transition:none}}
/* Home title page: the contents and the colophon.
   The list is the way into the document — numeral, section, rule — and reads as
   index matter rather than navigation. The colophon along the foot of the plate
   is what gives a title page its weight. Desktop only: stacked, the plate is a
   plain card and neither device has room to work. */
.ptoc,.pfoot,.plate-mark{display:none}
@media(min-width:901px){
  .ptoc{display:block;grid-column:2;grid-row:1;align-self:center;
    padding-left:clamp(30px,2.6vw,48px)}
  .ptoc a{display:grid;grid-template-columns:auto 1fr auto;gap:18px;
    align-items:baseline;padding:14px 0;border-bottom:1px solid var(--rule)}
  .ptoc a:first-child{padding-top:0}
  /* tabular figures so the numerals stack in a true column */
  .ptoc .n{font-family:var(--sans);font-size:13px;font-weight:600;
    letter-spacing:.14em;color:var(--sec);font-variant-numeric:tabular-nums}
  .ptoc .t{font-family:var(--body-serif);font-size:19px;line-height:1.3;
    color:var(--ink)}
  .ptoc .arrow{font-size:17px;color:var(--sec);opacity:0;
    transform:translateX(-6px);transition:opacity .18s ease,transform .18s ease}
  .ptoc a:hover .arrow{opacity:1;transform:none}
  .ptoc a:hover .t{text-decoration:underline;text-underline-offset:4px}
  /* the colophon runs the width of the plate, under everything it describes */
  .pfoot{display:flex;gap:26px;flex-wrap:wrap;grid-column:1 / -1;grid-row:2;
    align-self:end;margin-top:clamp(28px,3vw,44px);padding-top:20px;
    border-top:1px solid var(--rule);font-family:var(--sans);font-size:11px;
    font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--sec)}
  /* the plate carries a second row for that band */
  .banner .plate{grid-template-rows:1fr auto}
  /* THE WATERMARK — both hero plates.
     The emblem at plate scale: it sits behind the type at the wash's own weight
     and runs off the bottom-left corner, so the plate crops it rather than
     containing it — a mark the page is printed over, not an ornament set down
     on it. Home carries a colophon band at the foot and research a rotator in
     the second column, but the plate is the same grid on both, so one rule
     serves each.
     position + overflow make the plate the containing block that places the
     mark and the edge that crops it. Neither changes a dimension. */
  .banner .plate,.rhero .plate{position:relative;overflow:hidden}
  /* non-scaling-stroke is what keeps it a hairline. The medallion is drawn on a
     32-unit viewBox, so at 420px an ordinary stroke would render thirteen times
     too heavy and the figure would read as a blot. */
  .banner .plate-mark,.rhero .plate-mark{display:block;position:absolute;
    z-index:0;bottom:-92px;left:-74px;width:420px;height:auto;
    color:var(--ink);opacity:.07;pointer-events:none}
  /* the grid items are lifted clear of the watermark. position:relative with no
     offsets moves nothing — it only buys them a z-index. */
  .banner .plate > .plate-body,
  .banner .plate > .ptoc,
  .banner .plate > .pfoot,
  .rhero .plate > .plate-body,
  .rhero .plate > .rot{position:relative;z-index:1}
  .banner .plate-body{grid-row:1}
}
/* Home sections 02–04: the cards are given more of the page than the shared
   layout allows — the label column is narrowed and the card runs wider — and the
   type inside steps up with them, so the blocks read at the scale of the plate
   above rather than shrinking away from it. Scoped to the home page, and to the
   desktop, where there is width to give. */
@media(min-width:901px){
  .wide .lay{grid-template-columns:minmax(0,.22fr) minmax(0,1fr);column-gap:36px}
  .wide .lay-body,.wide.rpage .lay-body{max-width:1180px;padding:44px 54px}
  .wide .section-title{font-size:clamp(26px,3.2vw,34px);margin-bottom:34px}
  .wide .card{padding:38px 34px}
  .wide .card h3{font-size:22px}
  .wide .card p{font-size:18px}
  .wide .item p,.wide .corr-right .blk p{font-size:18px}
  .wide .item h3{font-size:22px}
  .wide .cards-note{font-size:14px}
  .wide .corr-left p{font-size:clamp(24px,2.8vw,32px)}
}
/* theme filter: a quiet row of switches over the register. All stands first and
   is the state the page loads in, so nothing is hidden from a reader who never
   touches it. Rendered hidden and revealed by script — without JS the buttons
   would be decoration that does nothing, so they are simply not shown. */
.rfilter{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:baseline;
  margin:0 0 28px;padding-bottom:20px;border-bottom:1px solid var(--rule)}
.rfilter .rf{font-family:var(--sans);font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sec);
  background:none;border:none;border-bottom:1px solid transparent;
  padding:0 0 3px;margin:0;cursor:pointer;letter-spacing:.14em}
.rfilter .rf:hover{color:var(--ink);opacity:1}
.rfilter .rf:active{opacity:.5;transform:translateY(1px)}
.rfilter .rf.on{color:var(--ink);border-bottom-color:var(--ink)}
/* the tally. Pressing a filter used to change the list silently — this states
   what the press did, in the same caps kicker the filters themselves use, and
   sits hard right so it reads as the bar's own answer rather than a filter. */
.rfilter .rf-count{margin-left:auto;font-family:var(--sans);font-size:13px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sec);
  /* the bar is baseline-aligned, so anything with a taller line box than the
     filters raises it. A button's line-height is normal rather than the body's
     1.65, and the chips clear their baseline by 3px of padding over a 1px rule
     — the count states both, and so occupies exactly the box they do. */
  line-height:normal;padding-bottom:4px}
/* the list dips while the rows are swapped, so the change reads as a change
   rather than as a page that was always this way */
.rlist{transition:opacity .12s ease}
.rlist.swapping{opacity:0}
/* it cannot happen today — the filters are derived from the papers present —
   but a bar that can be pressed should never answer with nothing at all */
.rlist-empty{padding:30px 0;color:var(--sec)}
/* .ritem is display:grid, which outranks the hidden attribute's own display:none */
.ritem[hidden]{display:none}
/* the way back into the years the register no longer carries */
.rarchive{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  margin-top:30px;padding-top:22px;border-top:1px solid var(--rule)}
.rarchive .k{color:var(--sec)}
.rarchive a{font-size:17px;border-bottom:1px solid var(--rule);padding-bottom:1px;
  font-variant-numeric:tabular-nums}
.rarchive a:hover{border-bottom-color:var(--ink)}
/* research list rows
   The entry states itself before it names itself: series, number and date sit
   in the caps kicker across the top of the row, and the title reads directly
   beneath them. The action hangs at the right edge, where the eye lands last.
   Hairlines between rows are the only structure — no boxes. */
.rlist{border-top:1px solid var(--rule)}
.lay-body > .rlist{margin-top:0}
.ritem{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:14px 30px;
  padding:31px 0 34px;border-bottom:1px solid var(--rule);align-items:start}
/* the card supplies the outer frame, so the first row needs no rule above it
   and the last none below */
.lay-body > .rlist:first-child{border-top:none}
.lay-body > .rlist > .ritem:first-child{padding-top:0}
.lay-body > .rlist > .ritem:last-child{padding-bottom:0;border-bottom:none}
/* the standing head runs the full width of the row, above the title it labels */
.ritem .rmeta{grid-column:1 / -1;font-family:var(--sans);font-size:13px;
  line-height:1.75;letter-spacing:.1em;text-transform:uppercase;color:var(--sec)}
.ritem h3{margin:0;font-size:34px;line-height:1.13;letter-spacing:-.012em;max-width:18em}
.ritem .stand{margin:14px 0 0;font-size:17px;line-height:1.57;color:var(--ink);max-width:780px}
/* the paper's physical facts — length, exhibits — sit under the standfirst in
   the secondary tone so they read as a note on the entry, not part of it */
.ritem .facts{margin-top:12px;font-size:15px;color:var(--sec)}
.ritem .read{justify-self:end;white-space:nowrap;font-family:var(--sans);
  font-size:15px;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--ink);padding-bottom:3px}
/* an unpublished paper keeps the column's alignment but drops the rule, so the
   row reads as an entry with nowhere yet to go */
.ritem .read.off{color:var(--sec);border-bottom-color:transparent}
/* published and forthcoming papers sit in one list, so the difference between
   them has to be carried by the rows themselves: an entry that cannot yet be
   read drops to the secondary tone throughout */
.ritem.pending h3,.ritem.pending .stand{color:var(--sec)}
a.ritem:hover h3,a.ritem:focus-within h3{text-decoration:underline;text-underline-offset:5px}
/* the action moves and the standing head comes up to full ink. No fill and no
   frame: the register is built from hairlines, so the row reacts in the terms
   it is drawn in. */
.ritem .read .arrow{display:inline-block;transition:transform .15s ease}
a.ritem:hover .read .arrow,a.ritem:focus-within .read .arrow{transform:translateX(6px)}
.ritem .rmeta{transition:color .18s ease}
a.ritem:hover .rmeta,a.ritem:focus-within .rmeta{color:var(--ink)}
@media(max-width:1000px){
  /* the action moves under the copy it belongs to rather than being squeezed
     against the right edge of a narrowing column */
  .ritem{grid-template-columns:minmax(0,1fr);gap:12px}
  .ritem .read{justify-self:start;margin-top:4px}
  .ritem h3{font-size:29px}
}
@media(max-width:900px){
  /* stacked, the card is the page width and the outsized padding would eat it */
  .rpage .lay-body{padding:26px 22px}
}
@media(max-width:560px){
  .ritem{gap:10px;padding:24px 0 26px}
  .ritem .read{margin-top:2px}
}
/* LEGAL NOTICES — /privacy/, and /disclosures/ when it is written.
   A long-form document set inside the same section card as every other page,
   so a notice reads as part of the site rather than as a page pasted into it.
   The card supplies the frame; these rules only give the running prose, the
   lists and the schedules a rhythm the rest of the site never needed. */
.ldoc p{margin:0 0 15px;line-height:1.75;max-width:74ch}
.ldoc > :last-child{margin-bottom:0}
.ldoc ul{margin:0 0 15px;padding-left:20px;max-width:74ch}
.ldoc li{font-size:19px;line-height:1.7;margin:0 0 11px}
/* the marker is structure, not content, so it drops to the secondary tone */
.ldoc li::marker{color:var(--sec)}
.ldoc li:last-child{margin-bottom:0}
.ldoc b{font-weight:600}
/* the label rows sit against the prose above and below them, so they take the
   card's own hairline as their divider and need no rule under the last of a run */
.ldoc .mrow{padding:18px 0}
.ldoc .mrow p{margin:0;max-width:none}
.ldoc .mrow + p{margin-top:0}
/* ONE-CARD VARIANT — the notice set as a single sheet rather than as a column
   of cards down the page. The card keeps the hero card's own measure and sits
   in the same grid column, so the page opens where every other page opens; the
   section labels move inside it, each standing on top of the passage it names,
   with a hairline dividing one from the next. */
.ldoc-one > .eyebrow{margin-bottom:20px}
.ldoc-title{margin:0 0 18px}
/* the date line is a single record, not prose — the reading measure broke it
   across two lines with the address left hanging */
.ldoc-one > .meta{max-width:none}
/* the labels are headings here rather than marginalia, so they run their own
   length instead of being folded into the narrow measure the rail gave them */
.ldoc-one .eyebrow .k{max-width:none}
/* and the passages run the sheet's own width. Everywhere else on the site prose
   is held to 74ch, because a card of body copy sitting in a column wants a
   reading measure; a notice does not. Set on one sheet the cap stopped a third
   of the way short of the card's edge, so every paragraph ended in a column of
   empty ground and the sheet read as half-filled rather than as measured. The
   schedules and the label rows already ran the full width — the prose and the
   lists now join them, and the card's own padding is the margin. */
.ldoc-one p,.ldoc-one ul,.ldoc-one .lead{max-width:none}
/* A notice carries no marginal label, so the grid's left column stood empty and
   pushed the sheet off to the right of its own page. On the notice pages the
   layout drops to a single column and the sheet centres itself instead, between
   the scroller rail and the right edge of the page — the same span the jaali
   wash occupies. The two negative margins do the arithmetic: .wrap insets its
   content 40px past the rail on the left and 16px from the page edge on the
   right (both inside main's .9 zoom, where the rail's 44px reads as 48.89px),
   so giving those back leaves a box whose centre is the span's centre. When
   .wrap is capped at its 1500px measure its auto side margins are equal, so
   they fall out of the centring and the sheet lands in the same place. The
   padding is symmetric, so it does not move that centre — it only stops the
   sheet meeting the rail and the screen edge on a narrow desktop, where the
   span is shorter than the sheet's own measure. */
@media(min-width:901px){
  .ldoc-page .lay{display:block;margin-left:-40px;margin-right:-16px;
    padding-left:22px;padding-right:22px}
  .ldoc-page .lay-body{margin-left:auto;margin-right:auto}
}
/* these are <section> elements inside the card, so the site-wide section
   padding has to be written out rather than only topped up */
.ldoc-sec{margin-top:40px;padding:34px 0 0;border-top:1px solid var(--rule)}
.ldoc-sec > .eyebrow{margin-bottom:20px}
.ldoc-sec > :last-child{margin-bottom:0}
/* A .mrow closing a section would set its own bottom rule a row's padding above
   the next section's top rule, reading as a doubled hairline. site.css's reset
   for that only reaches a .mrow parented straight to .lay-body, which is no
   longer the case once the rows sit inside the card's sections. */
.ldoc-sec > .mrow:last-child{padding-bottom:0;border-bottom:none}
/* THE STANDING NOTICE — the block that used to sit in every page's footer.
   It opens the sheet, above the lead, because it is the operative summary of
   what 01, 02 and 05 then set out in full. Hairlines above and below rather
   than a box: the sheet has none, and the rules are the same device .ldoc-sec
   uses to divide one passage from the next. The measure runs uncapped so the
   three statements settle as a short block instead of a narrow column. */
.ldoc-standing{margin:22px 0 24px;padding:17px 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.ldoc-standing p{font-size:14px;line-height:1.6;margin:0;max-width:none}
/* the colophon and the standing disclaimer close the sheet */
.ldoc-foot{margin-top:40px;padding-top:26px;border-top:1px solid var(--rule)}
.ldoc-foot .meta{max-width:none;margin:0}
.ldoc-foot .fine{margin-top:14px}
@media(max-width:900px){
  .ldoc-sec{margin-top:30px;padding-top:26px}
  .ldoc-foot{margin-top:30px}
}
/* SCHEDULES — the lawful bases and the retention periods.
   Set as real tables so each row reads across, with hairlines doing all of the
   work: the head is the site's caps kicker over a single ink rule, the rows are
   divided by the same rule used everywhere else, and no cell is filled. */
.ltab{width:100%;border-collapse:collapse;font-size:17px}
/* auto layout gave the first column everything and left the lawful basis so
   narrow that an article reference broke across two lines. The tracks are set
   from the head row instead: a wide first column, a wide last, and whatever is
   between them for the middle. The second rule takes only the two-column
   schedule, where the last cell is also the second. */
.ltab th:first-child{width:34%}
.ltab th:nth-child(2):last-child{width:66%}
.ltab th:nth-child(3){width:40%}
.ltab th{text-align:left;font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sec);
  padding:0 26px 11px 0;border-bottom:1px solid var(--ink);vertical-align:bottom}
.ltab td{padding:17px 26px 17px 0;border-bottom:1px solid var(--rule);
  vertical-align:top;line-height:1.6}
/* the card's edge closes the table, so the last row needs no rule of its own */
.ltab tr:last-child td{border-bottom:none;padding-bottom:0}
.ltab th:last-child,.ltab td:last-child{padding-right:0}
@media(max-width:760px){
  /* three columns cannot hold a phone's width without either scrolling sideways
     or breaking mid-word, so each row becomes a block and every cell carries the
     column heading it lost */
  .ltab,.ltab tbody,.ltab tr,.ltab td{display:block;width:auto}
  .ltab thead{display:none}
  .ltab tr{padding:18px 0;border-bottom:1px solid var(--rule)}
  .ltab tr:first-child{padding-top:0}
  .ltab tr:last-child{padding-bottom:0;border-bottom:none}
  .ltab td{padding:0;border-bottom:none}
  .ltab td + td{margin-top:12px}
  .ltab td::before{content:attr(data-l);display:block;font-family:var(--sans);
    font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:var(--sec);margin-bottom:4px}
}
/* method rows (asymmetric label + text) */
.mrow{display:grid;grid-template-columns:200px 1fr;gap:32px;padding:20px 0;border-bottom:1px solid var(--rule);font-size:17px}
.mrow .mk{font-size:13px;font-weight:600;letter-spacing:.12em;color:var(--ink);text-transform:uppercase;padding-top:2px}
.mrow p{color:var(--ink);max-width:56ch}.mrow b{color:var(--ink);font-weight:600}
/* .lay-body .mrow outranks a bare .mrow, so the stacked form is restated here */
@media(max-width:640px){.mrow,.lay-body .mrow{grid-template-columns:1fr;gap:4px}}
/* long-form / justified body copy (research pages) */
.doc p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
/* forms */
input,textarea{font-family:var(--sans);font-size:19px;padding:12px 0;border:none;border-bottom:1px solid var(--rule);background:transparent;width:100%;color:var(--ink);border-radius:0}
input:focus,textarea:focus{outline:none;border-bottom-color:var(--ink)}
::placeholder{color:var(--sec)}
button{font-family:var(--sans);font-size:17px;font-weight:500;padding:14px 34px;background:var(--ink);color:var(--bg);border:none;cursor:pointer;letter-spacing:.02em}
button:hover{opacity:.85}
/* a button that is working, or has finished, says so and stops taking presses.
   The tone drop is the same one the press uses, held rather than momentary. */
button[disabled]{opacity:.55;cursor:default}
button[disabled]:hover{opacity:.55}
/* the objection is stated under the field it belongs to, in place of the
   browser's bubble — which floats over the page and is gone at the next click.
   :user-invalid, not :invalid: a field is not wrong before it has been filled.
   The rule thickens by shadow rather than by border, so nothing below it moves. */
input:user-invalid,textarea:user-invalid,select:user-invalid{
  box-shadow:inset 0 -2px 0 var(--ink)}
.ferr{margin:6px 0 0;font-family:var(--sans);font-size:13px;line-height:1.4;
  color:var(--ink)}
.ferr:empty{display:none}
/* on the correspondence page the objection is set inside the field it belongs to,
   on the line the answer would occupy and hard right: six of them arriving at once
   — which is what an empty submit produces — would otherwise push the button off a
   screen the form has just been made to fit. It sits below the label rather than
   beside it, because a label as long as "Nature of enquiry" leaves no room on that
   line; and it is set in the secondary tone, so an empty field still reads as
   empty. Only the labelled fields take it — the consent line has no field to sit
   in, and its objection stays in the flow beneath it. */
@media(min-width:901px){
  #cf .ffield{position:relative}
  #cf .ffield .ferr{position:absolute;right:0;bottom:14px;margin:0;max-width:62%;
    text-align:right;color:var(--sec)}
  /* the select draws its own caret at the right edge; its objection stops short
     of it rather than running underneath */
  #cf .ffield:has(select) .ferr{right:26px;max-width:56%}
}
/* the two answers a form panel can give. Both are laid out before they are
   revealed, so they arrive rather than appear. */
.form-msg{margin-top:12px;opacity:0;transform:translateY(-4px);
  transition:opacity .3s ease,transform .3s ease}
.form-msg.on{opacity:1;transform:none}
/* labelled fields: the label stands above the rule it governs, in the caps
   kicker used for every other label on the site, so the form reads as a record
   to be completed rather than a stack of placeholder text */
.ffield{display:block}
.flabel{display:block;font-family:var(--sans);font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:4px}
/* the obligation is marked, but quietly — it is not part of the label's name */
.flabel .req{color:var(--sec);font-weight:400}
/* the select is given the same hairline underline as the text inputs, and its
   caret is drawn here rather than left to the platform, which would otherwise
   render a chrome-heavy control in the middle of a row of plain rules */
select{font-family:var(--sans);font-size:19px;padding:12px 0;border:none;
  border-bottom:1px solid var(--rule);background:transparent;width:100%;
  color:var(--ink);border-radius:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1L7 7L13 1' fill='none' stroke='%23141414' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center}
select:focus{outline:none;border-bottom-color:var(--ink)}
/* nothing has been chosen yet, so the prompt reads as placeholder, not answer */
select:invalid{color:var(--sec)}
/* standing caution under the message field */
.fnote{margin:0;font-size:15px;line-height:1.65;color:var(--sec)}
/* consent sits on its own line with the box beside the sentence it confirms */
.fcheck{display:flex;align-items:flex-start;gap:11px;font-size:15px;line-height:1.55}
.fcheck input{width:auto;flex:none;margin:5px 0 0;padding:0}
/* the acknowledgement is the same card turned over: form and confirmation share
   one frame, one width and one height, so when the message is sent nothing on
   the page moves or resizes — the card simply shows its other face. The two
   faces are stacked in the same box, each hiding its own back. */
/* after the card turns, the line that introduced the form goes with it */
body.sent .contact-lead{display:none}
.flip{perspective:1600px}
/* height is animated alongside the turn, so the tall form contracts to the
   short acknowledgement as it goes rather than leaving a card full of air */
.flip-inner{position:relative;transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.2,.75,.25,1),
             height .8s cubic-bezier(.2,.75,.25,1)}
.flip.done .flip-inner{transform:rotateY(180deg)}
.flip-face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* the front sits in flow and sets the card's opening height. The reverse is
   laid over it, pre-turned, pinned on three sides only — leaving its height to
   its own copy, which is what the script measures to shrink the card to. */
.flip-back{position:absolute;top:0;left:0;right:0;transform:rotateY(180deg);
  background:var(--bg);display:flex;flex-direction:column;gap:24px}
.lay-body .flip{margin:18px 0 0}
.lay-body .flip .form-frame{margin:0;max-width:none}
.rc-head{font-family:var(--body-serif);font-weight:500;margin:0;
  font-size:clamp(24px,3vw,30px);line-height:1.2;letter-spacing:-.2px}
.rc-copy{margin:18px 0 0;font-size:17px;line-height:1.65;max-width:46ch}
@media(prefers-reduced-motion:reduce){.flip-inner{transition:none}}
/* ── THE SUBSCRIPTION BOX ───────────────────────────────────────────────────
   The subscribe box answers the way the correspondence card does: on success
   the form gives way to its acknowledgement in the same space, rather than
   staying on screen with its button relabelled. Front and back are stacked in
   one box — the front in flow, setting the opening height; the back laid over
   it — and the box's height is animated to the confirmation as the two faces
   cross-fade, so nothing on the page jumps. */
.sub-swap{position:relative;transition:height .6s cubic-bezier(.2,.75,.25,1)}
.sub-face{transition:opacity .4s ease}
.sub-back{position:absolute;top:0;left:0;right:0;opacity:0;pointer-events:none}
.sub-swap.done .sub-front{opacity:0;pointer-events:none}
.sub-swap.done .sub-back{opacity:1;pointer-events:auto}
.sub-done .k{margin:0}
.sub-done .rc-copy{margin-top:10px}
.sub-done:focus{outline:none}
@media(prefers-reduced-motion:reduce){.sub-swap,.sub-face{transition:none}}
/* ── THE CORRESPONDENCE PAGE ───────────────────────────────────────────────
   The contact panel is deliberately narrower than the editorial cards. Its
   added vertical inset gives the form a calmer, more considered proportion and
   keeps the footer below the opening viewport. */
#request{box-sizing:border-box;min-height:calc((100svh - 76px) / .9 + 70px);padding:52px 0 76px}
#request .lay-body{max-width:720px;padding:48px 46px}
/* the sentence is set as the note it always was — the secondary tone and the
   16px it had in the rail — not at the 22px .lead would give it. At the card's
   measure it holds one line, so it costs the column a single line of height. */
.lay-body > .contact-lead{margin:0;font-size:16px;line-height:1.55;
  color:var(--sec);max-width:none}
.contact-lead + .flip{margin-top:12px}
#cf{display:grid;gap:12px}
/* A compact message field keeps the form focused on an initial enquiry. */
#msg{height:72px}
.fnote{margin:2px 0 0}
@media(min-width:901px){
  /* Name beside Organisation, Email beside Nature of enquiry — the four short
     answers pair off, and the three that need the full measure keep it. */
  #cf{grid-template-columns:1fr 1fr;column-gap:26px;row-gap:10px}
  #cf > :nth-child(n+5){grid-column:1 / -1}
}
@media(max-width:900px){
  #request{min-height:0;padding:32px 0 40px}
  /* the fields close up rather than the type coming down: the label sits nearer
     the rule it governs, and the rule nearer the answer above it. Scoped to this
     form — the same input rule is the subscribe box's and the paper gate's. */
  #cf input,#cf textarea{padding:8px 0}
  #cf .flabel{margin-bottom:2px}
  #msg{height:64px}
  /* the two shortest answers pair off here as well. They hold their labels at
     this width; the select and the three long answers keep the full measure,
     where a half column would break "Please select" or a subject line. */
  #cf{grid-template-columns:1fr 1fr;column-gap:18px}
  #cf > :nth-child(n+3){grid-column:1 / -1}
  /* stacked, the card is the whole width of the screen and the standfirst is
     the line that opens it, set a step down as it was in the rail */
  .lay-body > .contact-lead{font-size:15px}
  .fnote{font-size:14px;line-height:1.5}
}
/* plain frame around the contact form; matches .sub-frame below so the site's
   two form panels read as the same object */
.form-frame{border:1px solid var(--ink);padding:24px 26px;margin:0 auto;max-width:640px;box-sizing:border-box}
/* on the contact page it sits inside the section card, so it runs to the card's
   own measure rather than being centred on a narrower column of its own */
.lay-body .form-frame{max-width:none;margin:18px 0 0}
@media(max-width:560px){.form-frame{padding:20px 18px}}
/* the subscribe box: same plain frame, scaled down to hug a single input row */
.sub-frame{display:inline-block;border:1px solid var(--ink);padding:24px 26px}
@media(max-width:560px){.sub-frame{display:block;padding:18px 16px}}
/* the research page's email row. The button used to be dropped to the middle of
   the card as well as inset from its edge: at the full register measure the
   card was a wide band with the form in one corner, and the button read as
   pinned to it. The card is now held to 640px, which takes that away — and the
   drop with it, since at this width the notice runs the full measure and the
   button came down on top of the line. The inset stays: the row keeps its
   distance from the card's inner edge, and the button sits with the field it
   submits, which is where a form this size puts it. */
@media(min-width:901px){
  /* and the panel itself is held to the width of the thing it contains rather
     than to the register's measure. The card runs the full column everywhere
     else on the page because rows of research need that width; a single field
     and its notice do not, and at 1062px the box read as a band with a form
     dropped into one corner of it. The id is on the section rather than a
     :has() on the card, so the rule states which panel it means.
     Desktop only — on a phone the card is already the width of the screen.
     640px held the field and its notice with nothing to spare; the panel is
     given another 60px of run to the right, which inside main's .9 zoom lands
     as about a centimetre and a half on the page. */
  #subscribe .lay-body{max-width:700px}
  #sf{padding-right:24px}
}
/* footer
   Three columns across the top — the firm's identity, then two link columns —
   then the boilerplate, then a baseline row. The column tracks are weighted so
   the two nav columns sit at roughly the two-fifths and three-quarters marks
   rather than being pushed hard to the right edge. */
footer.site{border-top:1px solid var(--rule);padding:18px 0 14px;margin-top:28px}
/* make footer content full-bleed: override .wrap inside footer */
/* content-box meant width:100% plus 48px of padding overflowed the viewport by
   48px; harmless on desktop, but on a phone it pushed the address and the legal
   band off the right edge, where overflow-x:hidden clipped them mid-word */
footer.site .wrap{max-width:none;margin:0;padding:10px 24px;width:100%;box-sizing:border-box}
footer.site .fr{display:grid;grid-template-columns:1.45fr 1.25fr 1fr;gap:25px;
  padding-bottom:20px;border-bottom:1px solid var(--rule)}
footer.site .fb{font-family:var(--serif);font-weight:700;letter-spacing:.18em;
  font-size:12.5px;color:var(--ink)}
/* the descriptor sits between the wordmark and the address, in the secondary
   tone so the two black blocks it separates stay distinct */
footer.site .ftag{font-size:13.5px;color:var(--sec);margin-top:8px;line-height:1.35}
footer.site .faddr{font-size:13.5px;color:var(--ink);margin-top:11px;line-height:1.4}
footer.site .fmail{display:inline-flex;align-items:baseline;gap:13px;
  margin-top:12px;font-size:13.5px;color:var(--ink)}
footer.site .fmail .u{border-bottom:1px solid var(--rule);padding-bottom:1px}
footer.site .fmail:hover .u{border-bottom-color:var(--ink)}
footer.site .fmail .arrow{font-size:14px}
/* nav headings reuse the .k caps kicker so they read as the same label device
   used in the section eyebrows; links carry the address block's hairline rule */
footer.site .fh{font-family:var(--sans);font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
footer.site .fnav{display:contents}
footer.site .fnav ul{list-style:none;margin:10px 0 0;padding:0;
  display:flex;flex-direction:column;gap:8px}
footer.site .fnav a{font-size:13.5px;color:var(--ink);
  border-bottom:1px solid var(--rule);padding-bottom:1px}
footer.site .fnav a:hover{border-bottom-color:var(--ink)}
footer.site .fbot{display:flex;justify-content:space-between;align-items:baseline;
  gap:24px;flex-wrap:wrap;margin-top:16px;padding-top:0;
  border-top:none;font-size:12px;color:var(--ink)}
footer.site .flinks{display:flex;align-items:baseline;gap:18px}
footer.site .flinks a{border-bottom:1px solid var(--rule);padding-bottom:1px}
footer.site .flinks a:hover{border-bottom-color:var(--ink)}
footer.site .flinks .sep{color:var(--sec)}
/* the nav is one column now. It stays in the third track, where The Firm has
   always sat, so removing the Research column moves nothing that remains — and
   brand-left / links-right reads as the header and the baseline row do. */
footer.site .fnav .fcol{grid-column:3}
@media(max-width:820px){
  footer.site .fr{grid-template-columns:1fr 1fr;gap:18px 24px}
  footer.site .fbrand{grid-column:1 / -1}
  footer.site .fnav .fcol{grid-column:auto}
}
@media(max-width:520px){footer.site .fr{grid-template-columns:1fr}}
/* the header is fixed, so in-page targets need to clear it when jumped to */
section[id]{scroll-margin-top:96px}
/* ...and having arrived, the section says so. The eyebrow's tick redraws itself
   — the same mark the mobile reveal already draws in, borrowed here as the
   acknowledgement that the link landed where it said it would. Nothing moves:
   the tick occupies its 30px throughout, and the width is animated inside it. */
@keyframes cc-land{0%{width:0;background:var(--ink)}
  60%{width:30px;background:var(--ink)}
  100%{width:30px;background:var(--sec)}}
section[id]:target .eyebrow .tick{animation:cc-land .7s cubic-bezier(.2,.7,.2,1)}
/* the subscribe box is a form, not a section, so it answers in its own terms:
   the field's rule darkens to the weight it takes under focus, and releases */
@keyframes cc-land-field{0%,60%{border-bottom-color:var(--ink)}
  100%{border-bottom-color:var(--rule)}}
#sf:target input{animation:cc-land-field .9s ease}
/* intro splash */
#intro{position:fixed;inset:0;background:#FAF8F4;color:#141414;z-index:200;cursor:pointer;transition:opacity .8s ease,visibility .8s ease;touch-action:none}
#intro[hidden]{display:none}
#intro.hide{opacity:0;visibility:hidden;pointer-events:none}
#intro canvas{display:block;width:100%;height:100%}
.intro-skip{position:absolute;right:clamp(24px,4vw,64px);bottom:clamp(24px,4vw,48px);display:inline-flex;align-items:center;gap:12px;min-height:44px;border:0;background:transparent;color:#5C5C5C;font:500 14px/1.4 var(--serif);letter-spacing:.02em;padding:10px 4px;cursor:pointer}
.intro-skip-label{border-bottom:1px solid #DEDAD1;padding-bottom:2px;transition:border-color .2s ease}
.intro-skip-arrow{display:inline-block;transition:transform .2s ease}
.intro-skip:hover{color:#141414;opacity:1}
.intro-skip:hover .intro-skip-label{border-color:#141414}
.intro-skip:hover .intro-skip-arrow{transform:translateX(4px)}
.intro-skip:focus-visible{outline:none;color:#141414}
.intro-skip:focus-visible .intro-skip-label{border-bottom:2px solid #141414;padding-bottom:1px}
@media(prefers-reduced-motion:reduce){.intro-skip-label,.intro-skip-arrow{transition:none}.intro-skip:hover .intro-skip-arrow{transform:none}}
@media(prefers-reduced-motion:reduce){#intro{transition:none}}
/* HERO PLATE — home and /research
   The opening of each page is a full-height plate running from the label line to
   the right edge of the screen: the front of a document rather than the first of
   several sections. Its label sits inside the top-left corner as a running head,
   its content settles on the floor, and the field between them is left empty —
   the authority is in the space, not in the size of the type.

   The plate and the block inside it swap roles at the breakpoint, which is what
   keeps the phone exactly as it was: below 901px the plate is a bare wrapper and
   .plate-body is the bordered card sitting under the label, which is the layout
   that is there today. Every desktop rule lives in the min-width block, so there
   is no path by which this reaches a narrow screen. */
/* the research hero's section padding, carried over from the inline style it
   replaces so the stacked view keeps the spacing it has today */
.rhero{padding:104px 0 72px}
.plate-head{margin-bottom:16px}
.plate-body{max-width:none;box-sizing:border-box;background:var(--bg);
  border:1px solid var(--rule);padding:26px 22px}
.plate-body > h1{margin:0 0 16px}
/* the second paragraph carried its size inline; held at 19px here so the
   stacked view keeps the type it has today */
.rhero .plate-leads > p + p{font-size:19px}
@media(min-width:901px){
  /* Home: the plate is centred in the washed field rather than running to any
     edge of it — the same margin on all four sides, so the jaali shows evenly
     around the whole card. The left inset is that margin plus the rail's own
     offset, since the wash begins at the scroller and the plate must never cross
     to its left. The /.9 undoes main's zoom, as everywhere else. */
  .banner,.rhero{--g:clamp(28px,3vw,60px);
    display:flex;box-sizing:border-box;min-height:calc((100vh - 76px) / .9);
    padding:var(--g) var(--g) var(--g)
      calc((var(--rail) / 2 + 12px) / .9 + var(--g))}
  main.jaali .banner > .wrap-bleed,main.jaali .rhero > .wrap-bleed{
    width:100%;max-width:none;padding:0;display:flex;flex-direction:column}
  /* the plate takes exactly what the section's padding leaves it — a min-height
     of its own would overflow the padded box and eat the bottom margin */
  .banner .plate,.rhero .plate{flex:1;min-height:0}
  /* flush right: the only inset that stays is the left one, which already clears
     the scroller rail. The plate must never cross to the rail's left. */

  /* the /.9 undoes main's zoom, so the plate fills the real viewport rather than
     nine tenths of it — the same correction the jaali wash makes for the rail */
  .plate{box-sizing:border-box;background:var(--bg);border:1px solid var(--rule);
    padding:clamp(38px,3.6vw,54px) clamp(40px,4vw,60px)}
  /* inside the plate the card falls away: the plate is the card now */
  .plate-body{border:none;background:none;padding:0}
  /* the copy runs to the plate's own right margin; nothing is capped short of it */
  .plate-leads > p{max-width:none}
  /* RESEARCH — the plate. The label holds the top, the headline sits beneath it
     and the copy on the floor, so the opening occupies the page rather than
     collecting in a band at the top of it. */
  /* the statement holds the left, the rotator the right, both the plate's height */
  .rhero .plate{display:grid;grid-template-columns:1.55fr 1fr;
    column-gap:clamp(40px,4.5vw,80px);align-items:stretch}
  .rhero .plate-body{grid-column:1;grid-row:1;display:flex;flex-direction:column;
    justify-content:center;margin-top:0}
  /* the copy follows its headline rather than being thrown to the floor of the
     plate; the open ground below it is the margin of the title page */
  .rhero .plate-body > h1{margin:0;max-width:20em}
  .rhero .plate-leads{margin-top:clamp(22px,2.2vw,32px)}
  /* one size for the whole standfirst */
  .rhero .plate-leads > p + p{font-size:22px;line-height:1.5}
  /* HOME — the ledger. The plate is the grid: the statement holds the left, the
     contents list the right, and both columns run its full height so the rule
     between them divides the whole page rather than a band of it. */
  .banner .plate{display:grid;grid-template-columns:1.55fr 1fr;
    column-gap:clamp(40px,4.5vw,80px);align-items:stretch}
  /* the copy occupies the plate rather than sitting tight on its floor: the
     headline takes the top, the paragraphs the bottom, the space between them
     is the page */
  /* no measure cap: the column runs to the rule, and the grid track is what sets
     the line length */
  .banner .plate-body{grid-column:1;grid-row:1;display:flex;flex-direction:column;
    justify-content:center}
  /* the standfirst follows its headline rather than being thrown to the floor */
  .banner .plate-leads{margin-top:clamp(20px,2vw,30px)}
  .banner .plate-body > h1{margin:0;max-width:none}
  /* the contents column: stretched so its rule runs the full height, its list
     held at the top where the reader starts */
  /* the contents list sits on the middle of the plate, level with the statement
     it belongs to. No rule between them — the column gap is the division */
  .banner .plate-head{grid-column:2;grid-row:1;margin:0;align-self:stretch;
    display:flex;flex-direction:column;justify-content:center;
    padding-left:clamp(30px,2.6vw,48px)}
  /* the hero's call to action belongs to the phone, where it is the only one;
     on the plate the contents list is the way in */
  .plate-cta{display:none}
}
body.intro-active{overflow:hidden}
/* ── THE PRESS ─────────────────────────────────────────────────────────────
   Hover is a pointer's privilege. On a phone nothing acknowledged a tap at all:
   the finger went down, and the page waited in silence for the next document.
   Every control now answers with the same gesture — a 1px sink, held for as
   long as the press lasts — and the platform's own grey flash is turned off so
   it cannot fight the state underneath it.

   This sits below the hover rules on purpose: :active and :hover carry equal
   specificity, so on a desktop press it is source order that decides which of
   the two the reader sees. */
button,nav.main a,.arrow-link,.lnk,a.item,a.ritem,
footer.site a,.rot-title a,.rot-read,.ptoc a{-webkit-tap-highlight-color:transparent}
button:active{transform:translateY(1px);opacity:.7}
/* the links take the sink alone. Their hover already spends the opacity, and
   spending it twice on the way down reads as a flicker rather than a press. */
nav.main a:active,.arrow-link:active,a.item:active,a.ritem:active,
.rot-read:active,.ptoc a:active{transform:translateY(1px)}
/* an inline link cannot be moved — transform does not apply to it — so the two
   that run inside copy answer with tone instead */
.lnk:active,footer.site a:active{opacity:.45}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:2px}
/* transition:none does not reach an animation, and neither reaches the
   scroller — a reader who asked for stillness gets the plain jump back */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE — everything from here down is scoped to max-width:900px.

   Desktop is locked. No rule below this line can reach a wide screen, and
   nothing above it was edited to build any of it. The one exception is the
   dark-mode block at the very foot of this file, which adds a state the site
   did not have rather than changing the one it did: in daylight, at every
   width, the page is byte-for-byte what it was.
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:900px){

  /* ── THE TITLE PAGE ──────────────────────────────────────────────────────
     The hero used to be left at content height. Desktop gives it
     min-height:calc((100vh - 76px)/.9); the mobile block above cancelled that
     to min-height:0, because align-content:center was splitting the leftover
     height above AND below the card and opening a ~248px gap.

     Content height landed the home hero's floor 715px down the document. Every
     iPhone shows more than that at first paint, so the next section's eyebrow
     (747px) and the top edge of its card (784px) sat under the hero, severed —
     an accident, and the thing that made the page read as unfinished.

     The height is restored, and the slack is spent deliberately this time:
     flex-end puts the copy on the plate's floor and gives the whole remainder
     to the field above it, which is how a title page is set.

     100dvh is the LIVE viewport — whatever the reader can see at this instant.
     It was 100svh, the small viewport, which is the screen with Safari's
     toolbar expanded: that guarantees no overflow at first paint, but the
     moment the toolbar retracts the viewport grows ~145px and a hero frozen at
     the small height stops reaching the bottom of the screen. That is the
     under-fill. 100vh has the opposite fault — it is the toolbar-RETRACTED
     height, so it overflows before the toolbar moves. Only dvh is right at
     every moment, at the price of the hero resizing as the toolbar animates,
     which is why the copy is centred rather than pinned to the floor: centring
     halves the travel. The 100vh line before it is the fallback for anything
     that predates the unit.

     The /.9 undoes main.jaali's zoom, exactly as the desktop rule does — the
     viewport unit is measured against the real screen and then scaled down by
     the zoom, so it has to be divided back out or the plate falls 10% short. */
  .banner,.rhero{
    display:flex;flex-direction:column;box-sizing:border-box;
    min-height:calc((100vh - 76px) / .9);
    min-height:calc((100dvh - 76px) / .9);
    padding:14px 0 12px}
  main.jaali .banner > .wrap,main.jaali .rhero > .wrap{
    flex:1;min-height:0;display:flex;flex-direction:column}
  /* the plate is a bare wrapper at this width — .plate's border and ground are
     declared inside the min-width block — so it is free to become the column
     the card grows inside */
  .banner .plate,.rhero .plate{
    flex:1;min-height:0;display:flex;flex-direction:column}
  /* THE CARD IS THE SCREEN.
     It used to be a short card hugging the section's floor with the jaali wash
     filling everything above it. The section was full height, but what a reader
     saw was a band of texture and a card at the bottom — which reads as a page
     that failed to fill rather than as a title page. The card now takes the
     height itself and the copy is centred in it, which is what the desktop
     plate does: the open ground is inside the frame, where it reads as the
     margin of a title page instead of as a gap. */
  .banner .plate-body,.rhero .plate-body{
    flex:1;min-height:0;margin:0;
    display:flex;flex-direction:column;justify-content:center;
    /* the 40px on the floor is the scroll cue's old box — an 18px margin over
       a 22px line. The cue itself is gone (it only restated the eyebrow of the
       section directly beneath it), but the open ground it stood on is part of
       how the title page is set, so the padding holds the copy where the cue
       had it rather than letting centring drift it down. */
    padding:32px 24px 72px}

  /* The second standfirst paragraph is 250 of the hero's 450px of copy. Left
     in, filling the screen only buys a fuller wall of text — the empty field
     the title page depends on never appears. It stays in the HTML, so desktop
     and every crawler read the hero entire; only the phone is spared it. */
  .plate-leads > p + p{display:none}
  .banner .plate-body > h1,.rhero .plate-body > h1{margin:0 0 18px}
  .banner .plate-leads,.rhero .plate-leads{margin:0}

  /* ── THE HERO SETTLE ─────────────────────────────────────────────────────
     Runs once, on the first paint the reader actually sees — which on the home
     page is the moment the intro splash is dismissed, not load. The headline
     arrives, the standfirst follows it. */
  .m-hero .plate-body > h1,
  .m-hero .plate-leads{opacity:0;transform:translateY(16px);
    transition:opacity .8s cubic-bezier(.2,.7,.2,1),
               transform .8s cubic-bezier(.2,.7,.2,1)}
  .m-hero .plate-leads{transition-delay:.12s}
  body.m-hero-in .m-hero .plate-body > h1,
  body.m-hero-in .m-hero .plate-leads{opacity:1;transform:none}

  /* ── SECTION REVEAL ──────────────────────────────────────────────────────
     The device the research papers already use (.reveal in paper.css), brought
     across so the marketing pages and the notes stop having two personalities.
     The eyebrow and the card it labels are staggered by 90ms, so the label
     lands first and the block it names follows — the reading order, in time.
     Scoped inside the query so landscape, which crosses the breakpoint, shows
     everything outright instead of stranding it at opacity:0. */
  .m-rev{opacity:0;transform:translateY(14px);
    transition:opacity .7s cubic-bezier(.2,.7,.2,1),
               transform .7s cubic-bezier(.2,.7,.2,1)}
  .m-rev.in{opacity:1;transform:none}
  /* the eyebrow's 30px hairline draws itself as the section arrives */
  .m-rev .tick{width:0;transition:width .75s cubic-bezier(.2,.7,.2,1) .1s}
  .m-rev.in .tick{width:30px}

  /* ── PROGRESS HAIRLINE ───────────────────────────────────────────────────
     One ink rule along the foot of the fixed header, at the same 1px weight as
     every other rule on the site. The House Research pages have had .progress since
     they were written; this is the same instrument for the rest of the pages.
     scaleX rather than width, so it is composited and never lays out. */
  .m-prog{position:absolute;left:0;right:0;bottom:-1px;height:1px;
    background:var(--ink);transform:scaleX(0);transform-origin:0 50%;
    will-change:transform;pointer-events:none}

  /* ── FOOTER ──────────────────────────────────────────────────────────────
     705px on every page — 87% of a phone screen, and read as unfinished for
     the same reason the hero did. The two nav columns are short enough to sit
     side by side at this width; only the brand block needs the full row. */
  footer.site{margin-top:22px;padding:14px 0 12px}
  footer.site .wrap{padding:8px 20px}
  /* one nav column, so the row is simply a stack — the side-by-side rule this
     replaced existed only to pair Research with The Firm */
  footer.site .fr{grid-template-columns:1fr;gap:22px;padding-bottom:16px}
  footer.site .fnav .fcol{grid-column:auto}
  footer.site .faddr{margin-top:9px;line-height:1.35}
  footer.site .fmail{margin-top:10px}
  /* the three links run as one line rather than a stack. Stacked, a column of
     three short items spent a third of the footer's height restating what the
     header menu already lists; set side by side they read as one row of the
     baseline furniture. They wrap only if the measure genuinely runs out. */
  footer.site .fnav ul{margin-top:8px;
    flex-direction:row;flex-wrap:wrap;justify-content:space-between;
    gap:7px 10px}
  /* The three links measure 311px of text, so with the 10px minimum gap the
     row needs 372px of screen. Above that space-between sets it edge to edge,
     which is the .fbot idiom one block down. Below it the row has to wrap, and
     space-between would then strand The Practice against the right margin with
     a hole beside it — so the narrow case packs left and reads as a list. */
  @media(max-width:374px){
    footer.site .fnav ul{justify-content:flex-start;gap:7px 18px}}
  footer.site .fbot{margin-top:13px}

  /* ── THE DEAD ZONE, 761–900 ──────────────────────────────────────────────
     The layout stacked at 900 and the scroller went with it, but the burger
     did not arrive until 760 — so a 780px screen was served a fully stacked
     page under a full horizontal desktop nav. The nav now turns over on the
     same line as everything else, and mobile is one coherent state. */
  /* display cannot be animated, so the panel is laid out at this width whether
     it is open or not and hidden by visibility instead. It draws down from
     under the header on the same .2s the burger takes to cross into an X, so
     the two halves of the one gesture keep time with each other. */
  nav.main{display:flex;position:absolute;top:76px;left:0;right:0;
    flex-direction:column;gap:0;background:var(--bg);
    border-bottom:1px solid var(--rule);align-items:stretch;z-index:40;
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s}
  nav.main.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  nav.main a{padding:16px 24px;border-top:1px solid var(--rule);border-bottom:none}
  .burger{display:flex}
}

/* ══ DARK MODE, SITE-WIDE ══════════════════════════════════════════════════
   The tokens were written for the House Research pages and lived in paper.css, which
   is the one sheet the article pages load — so a phone set to dark got a dark
   note and a cream everything-else. They are declared here instead, on the
   sheet every page loads, and paper.css keeps only the overrides that are
   particular to an article.

   This is an added state, not an altered one: nothing here applies unless the
   reader's OS or their stored choice puts the page in dark, so the light
   rendering at every width is untouched.

   No colour enters the system. The two inks trade places, and every surface is
   the off-white laid over the off-black at low opacity. */
:root{--paper-rgb:250,248,244}
:root[data-theme="dark"]{
  /* native controls, scrollbars and the form checkboxes follow the page */
  color-scheme:dark;
  --bg:#141414;
  /* held under full strength: #FAF8F4 at 100% haloes over long serif passages
     on this ground. The rest of the scale is spaced off it so the hierarchy
     that letterspacing and size carry in daylight still reads. */
  --ink:rgba(var(--paper-rgb),.88);
  --navy:rgba(var(--paper-rgb),.96);
  --blue:rgba(var(--paper-rgb),.63);
  --muted:rgba(var(--paper-rgb),.78);
  --sec:rgba(var(--paper-rgb),.60);
  --line:rgba(var(--paper-rgb),.17);
  --rule:rgba(var(--paper-rgb),.17);
  --soft:rgba(var(--paper-rgb),.07);
  --soft2:rgba(var(--paper-rgb),.035)
}
/* The jaali washes are SVG data URIs with the ink stroked into them, so they
   cannot follow a token — black on black would simply vanish. Each is restated
   at the paper colour, a little under the daylight opacity because a light
   line on a dark ground reads heavier than the reverse. */
:root[data-theme="dark"] main.jaali::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 0L16 16M16 0L0 16' fill='none' stroke='%23FAF8F4' stroke-opacity='0.055' stroke-width='0.8'/%3E%3C/svg%3E")}
:root[data-theme="dark"] .tex::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0L16 8L8 16L0 8Z' fill='none' stroke='%23FAF8F4' stroke-opacity='0.035'/%3E%3C/svg%3E")}
/* the select's caret is drawn here rather than by the platform, so it is the
   one other mark that carries the ink as a literal value */
:root[data-theme="dark"] select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1L7 7L13 1' fill='none' stroke='%23FAF8F4' stroke-width='1.2' stroke-opacity='0.88'/%3E%3C/svg%3E")}
/* the emblem behind the hero plate is stroked in currentColor, so it follows
   the token — but .07 of an off-white on off-black is nearly invisible */
:root[data-theme="dark"] .banner .plate-mark,
:root[data-theme="dark"] .rhero .plate-mark{opacity:.11}
:root[data-theme="dark"] ::selection{background:rgba(var(--paper-rgb),.22)}

/* The theme toggle. Both marks sit in one 44px box and trade places, so
   changing mode does not reflow the header. It lives outside nav.main so it
   stays reachable when the nav collapses to the burger.
   Moved here from paper.css with the palette: the control has to exist
   wherever the state does, and the state is now every page. */
.theme{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;background:none;border:none;
  cursor:pointer;color:var(--ink);
  /* the header is space-between; auto here collapses the free space ahead of
     the toggle so it and the nav travel to the right edge together, leaving the
     links exactly where they sat before the toggle existed */
  margin-left:auto;margin-right:20px}
/* both marks are laid over each other in the one box and trade opacity, so the
   change of mode is a dissolve rather than a cut. Stacking them is also what
   keeps the 44px box from resizing as they swap. */
.theme{position:relative}
.theme svg{display:block;width:18px;height:18px;transition:opacity .18s ease}
.theme .i-sun,.theme .i-moon{position:absolute;top:50%;left:50%;
  margin:-9px 0 0 -9px}
.theme:hover{opacity:.6}
.theme:active{opacity:.4;transform:translateY(1px)}
.theme .i-sun{opacity:0}
:root[data-theme="dark"] .theme .i-sun{opacity:1}
:root[data-theme="dark"] .theme .i-moon{opacity:0}
/* the surfaces that carry a token cross with it, so the page turns over rather
   than cutting. A named list, not a wildcard: a transition on every element on
   the page is paid for on every scroll, not just on the two frames that use it. */
body,header.site,footer.site,.lay-body,.plate,.card,.form-frame,.sub-frame,
.ritem,.rfilter,.rlist,button,input,textarea,select{
  transition:background-color .18s ease,color .18s ease,border-color .18s ease}
@media(max-width:900px){
  /* nav.main is out of flow at this width; the toggle keeps its auto margin
     and simply closes up against the burger */
  .theme{margin-right:4px}
}