/* Three voices, which is what a file of records has: a serif for the things
   somebody decided, a grotesk for the things somebody wrote, and a typewriter
   for the things that were recorded.

   Spectral is the serif, and until now it drew twelve letters -- the wordmark
   -- while --display quietly pointed at the same sans as the body, so every
   heading on the site was the body face in bold. One variable file covers
   every weight the sans sets. Courier Prime runs small next to the text face,
   so size-adjust brings a reference set in it back to the size of the words
   around it. */
@font-face{font-family:Grotesk;font-weight:400 700;font-style:normal;font-display:swap;
  src:url(/assets/fonts/sg-var.woff2) format("woff2")}
@font-face{font-family:Typewriter;font-weight:400;font-style:normal;font-display:swap;
  size-adjust:110%;src:url(/assets/fonts/courierprime-400.woff2) format("woff2")}
@font-face{font-family:Typewriter;font-weight:700;font-style:normal;font-display:swap;
  size-adjust:110%;src:url(/assets/fonts/courierprime-700.woff2) format("woff2")}
@font-face{font-family:Spectral;font-weight:600;font-style:normal;font-display:swap;
  src:url(/assets/fonts/spectral-600.woff2) format("woff2")}
@font-face{font-family:Spectral;font-weight:700;font-style:normal;font-display:swap;
  src:url(/assets/fonts/spectral-700.woff2) format("woff2")}

:root{
  /* The navy is the cabinet and the red is the loss. Nothing else on this
     site is allowed to be either of those two colours. */
  --forest:#0B1F3A; --forest-deep:#071628;
  --brass:#0A56A3; --brass-pale:#A9CFF5; --brass-deep:#084A8C;
  --clay:#A81C22; --clay-lift:#F2888C;
  --btn:#0B1F3A; --btn-lift:#071628; --btn-go:#A81C22; --btn-go-lift:#8E1219;
  --field:#7B8797; --rule:#DEE5EE; --margin:#E8B9BC;
  /* The fixed navy does not flip with the theme, so what is written
     on it cannot either. Four pale blues lived as literals in nine
     different rules; they are a palette and now they look like one. */
  --on-navy:#A9CFF5; --on-navy-2:#C9D8EA;
  --on-navy-3:#B7CAE2; --on-navy-4:#93AACA;
  /* The type scale. Fifty sizes lived here before, five of them
     between 14.2 and 14.8, which is a stylesheet sized by eye one
     rule at a time. Collapsing them moved nothing by more than a
     pixel, which is what proves they were never choices. */
  --t-micro:   10.5px;
  --t-label:   11.5px;
  --t-cap:     12.5px;
  --t-fine:    13.5px;
  --t-aux:     14.5px;
  --t-sm:      15.5px;
  --t-base:    16.5px;
  --t-lede:    17.5px;
  --t-lg:      19px;
  --t-xl:      21px;
  --t-xxl:     23px;
  --t-head:    26px;
  --t-display: 30px;
  --t-huge:    44px;
  --writeon:rgba(11,31,58,.055); --writeon-2:rgba(11,31,58,.10);
  --paper:#FFFFFF; --paper-2:#F2F6FA; --card:#FFFFFF;
  --ink:#0B1F3A; --body:#2F3A4A; --stone:#4D5866; --faint:#5F6B7A;
  --line:#E4EAF1; --line-2:#C9D4E0;
  --display:Spectral,Georgia,"Times New Roman",serif;
  --sans:Grotesk,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:Typewriter,ui-monospace,SFMono-Regular,Menlo,monospace;
  --lockup:Spectral,Georgia,"Times New Roman",serif;
  --s1:6px; --s2:12px; --s3:20px; --s4:32px; --s5:56px; --s6:84px;
  /* The page is as wide as the screen, less an inset that grows with it.
     Nothing is centred in a column any more; what keeps a paragraph
     readable is a cap on the paragraph, not on the page. */
  --wrap:1800px; --pad:clamp(22px,5.5vw,110px);
  --inset:calc(max((100% - var(--wrap)) / 2, 0px) + var(--pad));
  color-scheme:light;
}
/* One theme, on purpose. The site is a paper file: white stock, navy ink,
   red where a loss is. It carried a dark palette as well until September
   2026, which meant every drawn plate, every stamp and every rule had to be
   right twice, and the second one nobody at the desk ever looked at. A
   business reading a policy wording at nine at night is reading white paper;
   the site now matches, and color-scheme says so, so the browser paints its
   own furniture -- scrollbars, form controls, the space behind the page --
   to match rather than against it. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* A drawing that leans off its plate, or a stamp landing from 1.55, must
   never turn into sideways scroll. clip, not hidden: hidden would make a
   scroll container of the page and the masthead would stop sticking. */
html,body{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--body);
     font:var(--t-base)/1.62 var(--sans);-webkit-font-smoothing:antialiased}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
/* Left, not centred: a page whose body floats into the middle of the
   screen breaks the margin the opener above it just ruled. */
.narrow > *{max-width:760px}
h1,h2,h3,h4{color:var(--ink);margin:0;text-wrap:balance}
h1{font:700 clamp(var(--t-display),4.8vw,46px)/1.08 var(--display);letter-spacing:-.025em}
h2{font:700 clamp(var(--t-xxl),3vw,33px)/1.14 var(--display);letter-spacing:-.02em}
h3,h2.sub{font:700 var(--t-lg)/1.3 var(--display);letter-spacing:-.01em}
p{margin:0 0 var(--s2);max-width:68ch}
a{color:var(--brass);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
b,strong{color:var(--ink);font-weight:700}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.lede{font-size:var(--t-lg);line-height:1.6;color:var(--body);max-width:58ch}
/* Labels moved off the typewriter and onto the text face. The typewriter now
   means one thing -- this is a record: a reference, a figure number, a stamp,
   a phone number, a sum -- instead of meaning "small". */
.eyebrow{font:600 var(--t-label)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
     color:var(--brass-deep);margin-bottom:var(--s3);display:block}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s2);top:var(--s2);z-index:99;background:var(--forest);
     color:#FFFFFF;padding:10px 16px}

/* ------------------------------------------------------- the top of the page */
/* Two bars. The thin navy one carries the two things somebody arriving in the
   middle of a bad morning actually wants -- a number to ring and the way into
   their own file -- so neither has to compete with the navigation. The white
   one below it is the masthead and one red button. */
.util{background:var(--forest);color:var(--on-navy-3);font:var(--t-cap)/1.2 var(--sans)}
.util .wrap{display:flex;align-items:center;justify-content:space-between;
     gap:5px 24px;min-height:38px;flex-wrap:wrap}
.util a{color:#FFFFFF;text-decoration:none}
.util a:hover{text-decoration:underline;text-underline-offset:3px}
.util .u-tel{font-weight:700;letter-spacing:.02em;margin-left:7px}
.util .u-links{display:flex;align-items:center}
.util .u-links > *{padding:0 14px;border-left:1px solid rgba(183,202,226,.28);line-height:1}
.util .u-links > :first-child{border-left:0;padding-left:0}
.util .u-links > :last-child{padding-right:0}
.util .u-place{color:var(--on-navy-4)}
.util .u-short{display:none}
@media(max-width:760px){.util{font-size:var(--t-cap)}
  .util .u-long,.util .u-place,.util .u-wa{display:none}.util .u-short{display:inline}
  .util .u-links > *{padding:0;border-left:0}}

header.top{background:var(--paper);border-bottom:1px solid var(--line)}
.top .bar{display:flex;align-items:center;gap:28px;padding:18px 0;flex-wrap:nowrap}
.top .dnav{display:flex;gap:22px;margin-left:auto;align-items:center;flex-wrap:nowrap}
.top .dnav a{color:var(--body);text-decoration:none;font-size:var(--t-aux);font-weight:500;
     padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.top .dnav a:hover,.top .dnav a[aria-current]{color:var(--ink);
     border-bottom-color:var(--brass)}
.top .cta{margin-left:4px;white-space:nowrap}
/* The menu opens with no script at all. A details element is a disclosure
   widget to a screen reader and a keyboard, which is exactly what this is. */
.mnav{display:none;position:relative}
.mnav summary{list-style:none;cursor:pointer;font:700 var(--t-fine)/1 var(--sans);
     color:var(--ink);border:1px solid var(--field);padding:10px 13px}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.mnav[open] summary{background:var(--paper-2)}
.mnav nav{position:absolute;right:0;top:calc(100% + 8px);z-index:30;
     background:var(--card);border:1px solid var(--line-2);min-width:238px;
     box-shadow:0 18px 40px -18px rgba(11,31,58,.38);padding:6px 0;
     display:flex;flex-direction:column}
.mnav nav a{display:block;padding:12px 18px;color:var(--ink);font-size:var(--t-aux);
     text-decoration:none}
.mnav nav a:hover{background:var(--paper-2)}
@media(max-width:980px){.top .dnav{gap:15px}.top .dnav a{font-size:var(--t-fine)}
  .top .bar{gap:18px}}
@media(max-width:760px){.top .dnav{display:none}.mnav{display:block}
  .top .bar{gap:8px;padding:12px 0}.top .lk{--w:16px!important}
  .top .cta{margin-left:auto;padding:10px 12px;font-size:var(--t-fine)}
  .mnav summary{padding:10px 11px;font-size:var(--t-fine)}}
/* Under about 430px the wordmark, the button and the word "Menu" stop fitting
   on one line, so the menu becomes three rules and keeps its word for anyone
   who is listening to the page rather than looking at it. */
@media(max-width:430px){.top .lk{--w:14px!important}.top .bar{gap:6px}
  .top .cta{padding:10px;font-size:var(--t-cap)}
  .mnav summary{position:relative;width:38px;height:36px;padding:0;font-size:0}
  .mnav summary::before{content:"";position:absolute;left:10px;right:10px;top:11px;
    height:2px;background:var(--ink);box-shadow:0 6px 0 var(--ink),0 12px 0 var(--ink)}}

/* -------------------------------------------------------- the three deadlines */
/* In claims, time is what kills, so the deadlines are on every page that could
   be read after a loss. They used to run as a strip directly under the
   masthead, where they read as a second header or as an error message. They
   are now a card: inside the page on a claim page, and in a band before the
   footer everywhere else. */
.dlcard{border:0;border-top:3px solid var(--ink);background:transparent;
     padding:14px 0 0}
.dlcard .dl-lbl{display:block;font:700 var(--t-label)/1 var(--sans);letter-spacing:.13em;
     text-transform:uppercase;color:var(--clay);margin-bottom:8px}
.dlcard ul{list-style:none;margin:0;padding:0}
.dlcard li{padding:10px 0;border-top:1px solid var(--line);font-size:var(--t-aux);
     line-height:1.5;color:var(--body)}
.dlcard li:first-child{border-top:0}
.dlcard li b{color:var(--ink)}
section.dlband{background:var(--paper-2);border-top:1px solid var(--line);
     padding:var(--s4) 0}
.dlband .dlcard{border:0;background:transparent;padding:0;
     display:grid;grid-template-columns:auto 1fr;gap:6px var(--s4);align-items:start}
.dlband .dlcard .dl-lbl{margin:3px 0 0;max-width:12ch;line-height:1.4}
.dlband .dlcard ul{display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--s4)}
.dlband .dlcard li{border-top:0;border-left:1px solid var(--line-2);padding:2px 0 2px 16px}
@media(max-width:820px){.dlband .dlcard{grid-template-columns:1fr}
  .dlband .dlcard ul{grid-template-columns:1fr}
  .dlband .dlcard li{border-left:0;border-top:1px solid var(--line-2);padding:9px 0}
  .dlband .dlcard li:first-child{border-top:0}}

/* --------------------------------------------------------------- blocks */
section{padding:var(--s5) 0}
section.tight{padding:var(--s4) 0}
/* The front door. A pale ground rather than a slab of navy: the navy is spent
   once further down the page, where it is arguing, and a reader who has just
   had a fire does not need to be shouted at on arrival. */
.hero{background:var(--paper-2);border-bottom:1px solid var(--line);
     padding:var(--s5) 0}
.hero .lede{line-height:28px}
.hero h1{max-width:17ch}
.hero .lede{margin-top:var(--s3);max-width:56ch}
.hero .eyebrow{color:var(--brass)}

/* The side note reads as an eyebrow above the heading rather than a caption
   floated to its right, where at two lines it used to sit level with nothing. */
/* ------------------------------------------------------------- ruled paper */
/* A loss is first written down in a field book, and the file it opens is a
   register: rules at a fixed pitch with the margin ruled twice in red.

   The rules are in the INSETS, not under the words. Run across the whole band
   they put the headline on lined paper, which reads as a notebook rather than
   a register and fights every line of type it crosses. Ruled at both edges and
   clean where the writing goes, the sheet reads as what it is. The mask is
   written in the same terms as the page's own inset, so the ruling always ends
   exactly where the writing starts, at any width.

   Under 900px the inset is a thumb's width and there is no margin to rule, so
   a phone gets plain paper. The fallback is the correct design, not a broken
   version of this one. */
.hero,section.open{position:relative;--band-top:var(--s5); --band-bottom:var(--s4)}
.hero{--band-bottom:var(--s5)}
.hero.front{--band-top:var(--s6)}
.hero::before,section.open::before{content:"";position:absolute;inset:0;z-index:0;
  pointer-events:none;
  background-image:repeating-linear-gradient(to bottom,
    transparent 0 27px, var(--rule) 27px 28px);
  background-position:0 3px;
  -webkit-mask-image:linear-gradient(to right, #000 0,
    #000 calc(var(--inset) - 18px), transparent calc(var(--inset) + 4px),
    transparent calc(100% - var(--inset) - 4px),
    #000 calc(100% - var(--inset) + 18px), #000 100%);
  mask-image:linear-gradient(to right, #000 0,
    #000 calc(var(--inset) - 18px), transparent calc(var(--inset) + 4px),
    transparent calc(100% - var(--inset) - 4px),
    #000 calc(100% - var(--inset) + 18px), #000 100%)}
@media(max-width:900px){.hero::before,section.open::before{display:none}}
.hero > .wrap,section.open > .wrap{position:relative;z-index:1}
.hero > .wrap::before,section.open > .wrap::before{content:"";position:absolute;
  left:calc(var(--pad) - 17px);width:4px;
  top:calc(var(--band-top) * -1);bottom:calc(var(--band-bottom) * -1);
  border-left:1px solid var(--margin);border-right:1px solid var(--margin)}
@media(max-width:600px){.hero > .wrap::before,section.open > .wrap::before{
  left:calc(var(--pad) - 12px)}}
@media print{.hero::before,section.open::before{display:none}
  .hero > .wrap::before,section.open > .wrap::before{display:none}}

/* ------------------------------------------------------------ the divider */
/* A rule across the page with a tab hanging off it, the way a divider card
   sits in a drawer. It replaced a floated caption that, at two lines, lined up
   with nothing at all. */
.rulehead{display:flex;flex-direction:column-reverse;align-items:flex-start;
     gap:0;margin-bottom:var(--s4);border-top:2px solid var(--ink);padding-top:0}
.rulehead h2{max-width:26ch;margin-top:var(--s3)}
.rulehead .side{display:inline-block;background:var(--ink);color:var(--paper);
     font:700 var(--t-micro)/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;
     padding:7px 18px 8px 13px;
     clip-path:polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%)}
.navyband .rulehead{border-top-color:var(--on-navy)}
.navyband .rulehead .side{background:var(--on-navy);color:var(--forest)}

.card{background:transparent;border:0;border-top:1px solid var(--line-2);
     padding:var(--s3) 0 0}
.card + .card{margin-top:var(--s3)}
.grid > .card + .card,.two > .card + .card{margin-top:0}
.card h2{margin-bottom:var(--s1)}
.card p{max-width:66ch}
.card p:last-child{margin-bottom:0}
/* A reference list -- a glossary, a set of questions -- hangs its term in the
   margin and runs the answer beside it, the way a reference book does. */
.entry{display:grid;grid-template-columns:minmax(0,15.5rem) minmax(0,1fr);
     gap:4px var(--s5);border-top:1px solid var(--line-2);padding:var(--s3) 0 var(--s3)}
.entry > h2{grid-column:1;margin:0;font-size:var(--t-lede);line-height:1.32}
.entry > :not(h2){grid-column:2}
.entry p{margin:0 0 var(--s2);max-width:64ch}
.entry p:last-child{margin-bottom:0}
@media(max-width:760px){.entry{grid-template-columns:1fr;gap:var(--s1)}
  .entry > :not(h2){grid-column:1}}
.grid{display:grid;gap:var(--s3) var(--s5)}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.g3{grid-template-columns:1fr 1fr}}
@media(max-width:800px){.g2,.g3{grid-template-columns:1fr}}

/* the two tracks -- the thing the business actually is. Rules and a stamp,
   not two more bordered boxes: the stamp says which of the two a reader is,
   which is the only question this section answers. */
.track{display:flex;flex-direction:column;border-top:3px solid var(--ink);
       padding:16px 0 0}
.track.eng{border-top-color:var(--brass)}
.track .wstamp{display:block;margin:0 0 13px -2px}
.track h2{font-size:var(--t-xl);margin-bottom:10px}
.track p{font-size:var(--t-sm);line-height:1.62}
.track .price{font:700 var(--t-aux)/1.5 var(--sans);color:var(--ink);margin:var(--s2) 0 0;
     padding-top:var(--s2);border-top:1px dashed var(--line-2)}

/* steps and checklists */
ol.steps{list-style:none;padding:0;margin:0;counter-reset:s}
ol.steps li{counter-increment:s;padding:var(--s3) 0 var(--s3) 54px;
     position:relative;border-top:1px solid var(--line-2)}
ol.steps li::before{content:counter(s);position:absolute;left:0;
     top:var(--s3);font:700 var(--t-xl)/1 var(--mono);color:var(--brass-deep);
     font-variant-numeric:tabular-nums}
ol.steps b{display:block;color:var(--ink);font-weight:600;margin-bottom:3px}
ol.steps span{font-size:var(--t-sm);line-height:1.58;display:block}
ol.steps .when{font:700 var(--t-micro)/1 var(--sans);color:var(--clay);letter-spacing:.12em;
     text-transform:uppercase;margin-top:7px;display:block}

ul.check{list-style:none;padding:0;margin:0}
ul.check li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:11px;
     align-items:start;padding:9px 0;border-bottom:1px solid var(--line);
     font-size:var(--t-sm);line-height:1.55}
ul.check li:last-child{border-bottom:0}
ul.check .tickbox{width:22px;height:22px;margin-top:-1px;color:var(--brass-deep)}

/* A note in the margin, which is what a file carries instead of a callout.
   There used to be two of these -- .note with a blue bar and .warnbox with a
   red one, the same shape in two colours, twenty-four times over. The bar is
   the tell: it is the admonition block every generated page ships with. Here
   the keyword is written out where the ruling is and the sentence keeps its
   own measure beside it, the way a clerk glosses a ledger. The indent is the
   emphasis; there is no bar, no ground and no border. Red survives only on
   the ones that carry a deadline or a limit. */
/* A hanging indent, not a grid. In a grid container every inline child is a
   grid item of its own, so a link in the middle of a gloss was cutting the
   sentence into three rows. */
.gloss{position:relative;margin:var(--s3) 0;max-width:88ch;
      padding-left:calc(15ch + var(--s3));min-height:2.2em;
      font-size:var(--t-sm);line-height:1.6;color:var(--body)}
.gloss > b{position:absolute;left:0;top:4px;width:15ch;
      font:700 var(--t-label)/1.55 var(--mono);letter-spacing:.13em;
      text-transform:uppercase;color:var(--stone)}
.gloss.warn > b{color:var(--clay)}
.gloss p{margin:0}
.gloss p + p{margin-top:var(--s2)}
@media(max-width:760px){.gloss{padding-left:0;min-height:0}
      .gloss > b{position:static;display:block;width:auto;margin-bottom:5px}}

/* When the outside world was last read against this page. Small, at the foot,
   and never dressed up: it is a fact about the page, not a claim about the
   desk. */
.checked{display:grid;grid-template-columns:minmax(0,15ch) minmax(0,1fr);
     gap:2px var(--s3);margin:0;max-width:88ch;
     font-size:var(--t-aux);line-height:1.6;color:var(--stone)}
.checked > span{font:700 var(--t-label)/1.55 var(--mono);letter-spacing:.13em;
     text-transform:uppercase;color:var(--stone);padding-top:3px}
.checked b{color:var(--ink);font-weight:700}
@media(max-width:760px){.checked{grid-template-columns:minmax(0,1fr);gap:4px}}

/* ------------------------------------------------- the other half of it */
/* Claims Desk is the claims arm of an advisory practice, and this band says so
   at the foot of a page. It is a colophon and not an advertisement: no box,
   no panel, no button. A rule, the mark out in the margin where every other
   label on this site lives, and a sentence. The one place the sister brand
   is allowed to appear in the body of a page. */
.house{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);
     gap:var(--s3) var(--s5);align-items:start;
     border-top:2px solid var(--ink);padding-top:var(--s4)}
.house-mark img{display:block;width:132px;height:auto}
.house-mark .lbl{display:block;margin-top:var(--s2);color:var(--stone)}
.house-say h2{margin:0;max-width:46ch}
.house-say p{margin:var(--s2) 0 0;max-width:66ch;color:var(--body)}
.house-say .more{margin-top:var(--s3)}
/* Under 760 the margin stops being a margin: the mark goes above the words
   at the size it would be in a letterhead, not a 164px column squeezed. */
@media(max-width:760px){.house{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
     .house-mark img{width:108px}
     .house-mark .lbl{margin-top:var(--s1)}}

/* ---------------------------------------------------- the public record */
/* One claim somebody else had, as it was reported. The facts run down the
   left the way a headnote does; what decided it is the part that travels and
   it sits where the eye ends up. The source line is small and last, because
   it is a footnote, but it is never optional. */
article.rec{display:grid;grid-template-columns:minmax(0,26ch) minmax(0,1fr);
     gap:var(--s3) var(--s5);align-items:start;padding:var(--s4) 0;
     border-top:1px solid var(--line)}
article.rec:first-of-type{border-top:2px solid var(--ink)}
article.rec:last-of-type{border-bottom:1px solid var(--line)}
.rec-head .lbl{color:var(--brass-deep)}
.rec-head h2{margin:6px 0 4px;max-width:24ch}
.rec-when{margin:0;font:var(--t-cap)/1.5 var(--mono);color:var(--stone)}
.rec-fact{display:grid;grid-template-columns:minmax(0,17ch) minmax(0,1fr);
     gap:2px var(--s3);padding:8px 0;border-top:1px solid var(--line)}
.rec-fact:first-child{border-top:0;padding-top:0}
.rec-fact > span{font:700 var(--t-label)/1.5 var(--mono);letter-spacing:.12em;
     text-transform:uppercase;color:var(--stone)}
.rec-fact > b{font-weight:500;font-size:var(--t-sm);line-height:1.55;
     color:var(--ink);max-width:64ch}
/* The holding, which is the only part of somebody else's claim that travels
   to yours. A law report sets it off with one word and no rule; fifteen
   identical labelled boxes down one page would have read as a form. The word
   itself says what kind of record this is. */
.rec-held{margin:var(--s3) 0 0;font-size:var(--t-sm);line-height:1.6;
     color:var(--ink);max-width:64ch}
.rec-held > b{font:700 var(--t-label)/1.5 var(--mono);letter-spacing:.12em;
     text-transform:uppercase;color:var(--brass-deep);margin-right:.6em;
     white-space:nowrap}
.rec-src{margin:var(--s3) 0 0;font:var(--t-fine)/1.5 var(--mono);
     color:var(--stone)}
.rec-src a{color:var(--brass-deep)}
@media(max-width:900px){article.rec{grid-template-columns:minmax(0,1fr);
     gap:var(--s2)}
     .rec-head h2{max-width:none}}
@media(max-width:560px){.rec-fact{grid-template-columns:minmax(0,1fr);gap:1px}}

/* ------------------------------------------------------------- a schedule */
/* What a file has instead of a grid of cards. Each item is a full-width row:
   what it is on the left, what it means on the right, a hairline between, the
   way a contents page or a policy schedule is set. It reads DOWN, which a
   checkerboard of equal rectangles does not, and it does not care whether
   there are two items or nine.

   The cards it replaced had had their borders taken off in an earlier round,
   which changed nothing: a grid of equal rectangles with a heading and a
   paragraph in each is the shape, not the border. */
.sched{display:block}
.sched > *{display:grid;grid-template-columns:minmax(0,23ch) minmax(0,1fr);
      gap:3px var(--s4);align-items:start;padding:var(--s3) 0;
      border-top:1px solid var(--line)}
.sched > :first-child{border-top:2px solid var(--ink)}
.sched > :last-child{border-bottom:1px solid var(--line)}
.sched h2,.sched h3{font:600 var(--t-lede)/1.3 var(--display);margin:0;
      max-width:22ch;letter-spacing:-.005em;text-wrap:balance}
/* Some schedules key on a phrase rather than a word: "a percentage of the sum
   insured, subject to a minimum" is not a label and will not sit in 23ch. */
.sched.wide > *{grid-template-columns:minmax(0,34ch) minmax(0,1fr)}
.sched.wide h2,.sched.wide h3{max-width:33ch}
.sched h2 a,.sched h3 a{color:var(--ink);text-decoration:none;
      border-bottom:2px solid var(--brass);padding-bottom:1px}
.sched h2 a:hover,.sched h3 a:hover{color:var(--brass-deep);
      border-bottom-color:var(--brass-deep)}
.sched p{margin:0;font-size:var(--t-sm);line-height:1.6;max-width:68ch}
.sched p + p{margin-top:var(--s2)}
.sched .killer{margin-top:10px}
@media(max-width:760px){.sched > *,.sched.wide > *{grid-template-columns:1fr;gap:7px}
      .sched h2,.sched h3,.sched.wide h2,.sched.wide h3{max-width:none}}

/* The two things that cannot be undone get the thing an office actually
   reaches for. Struck once, crooked, in the one red the site allows. */
/* Ink for the drawings that land on the page rather than on a plate. A plate
   is warm paper in both themes and may keep a fixed colour; the page is not,
   and #0B1F3A on the dark ground is 1.12:1. */
svg.struck.clay{color:var(--clay)}
svg.wstamp.ink{color:var(--ink)}
svg.wstamp.brass{color:var(--brass)}
svg.tickbox.done{color:var(--brass-deep)}
.dontsign{display:flex;gap:var(--s3);align-items:flex-start;max-width:70ch}
.dontsign svg.struck{flex:0 0 auto;width:156px;height:auto;margin-top:2px}
.dontsign p{margin:0;font-size:var(--t-sm);line-height:1.6;max-width:52ch}
@media(max-width:560px){.dontsign{flex-direction:column;gap:var(--s2)}
      .dontsign svg.struck{width:140px}}

/* Navy is the ordinary solid button -- send, open, save. Red is reserved for
   the one button that reports a loss, and .go is set from the href so it
   cannot drift onto anything else. */
.btn{display:inline-block;background:var(--btn);color:#FFFFFF;font-weight:700;
     padding:13px 24px;text-decoration:none;font-size:var(--t-sm);border:0;cursor:pointer;
     font-family:var(--sans);line-height:1.25}
.btn:hover{background:var(--btn-lift)}
.btn.go{background:var(--btn-go)}
.btn.go:hover{background:var(--btn-go-lift)}
.btn.quiet{background:transparent;color:var(--ink);border:0;
     border-bottom:2px solid var(--ink);padding:11px 2px 7px}
.btn.quiet:hover{background:transparent;color:var(--brass);border-bottom-color:var(--brass)}
.btn.quiet.sm{padding:7px 2px 5px}
.btn.big{padding:16px 30px;font-size:var(--t-base)}
/* On the navy band the quiet button inherits ink, which is invisible there. */
.navyband .btn.quiet{color:#FFFFFF;border-bottom-color:var(--on-navy)}
.navyband .btn.quiet:hover{background:transparent;color:var(--on-navy)}

/* -------------------------------------------------------------- the form */
form.intake{background:transparent;border:0;border-top:2px solid var(--ink);
     padding:var(--s4) 0 0}
.field{margin-bottom:var(--s3)}
.field label{display:block;font-weight:700;color:var(--ink);font-size:var(--t-sm);
     margin-bottom:2px}
.field .hint{display:block;font-size:var(--t-fine);color:var(--stone);margin-bottom:4px;
     line-height:1.5}
optgroup{font:600 var(--t-cap) var(--sans);color:var(--stone)}
option{font-weight:400;color:var(--ink)}
.field input,.field select{width:100%;padding:9px 10px 10px;border:0;
     border-bottom:2px solid var(--field);background:transparent;color:var(--ink);
     font:var(--t-base)/1.5 var(--sans);border-radius:0}
.field select{padding-right:0}
/* The faint wash a ruled form has where you are meant to write. It is not a
   border: there is no line at the top or the sides, and it is two per cent of
   the ink. It is the difference between "a rule" and "a rule you can see is
   for you". */
.field input,.field select,.field textarea{background:var(--writeon);
     transition:background .14s ease,border-color .14s ease}
.field input:hover,.field select:hover,.field textarea:hover{
     border-bottom-color:var(--stone);background:var(--writeon-2)}
.field input:focus,.field select:focus,.field textarea:focus{
     border-bottom-color:var(--ink);background:var(--writeon-2)}
.field input.mono,.field textarea.mono{font-family:var(--mono)}
/* What happened is written on the lines, so the box it is written in has them.
   The pitch is the page's own 28px, and the text is set to it, so the words
   sit ON the rules the way handwriting does. */
.field textarea{width:100%;min-height:140px;resize:vertical;border:0;
     border-bottom:2px solid var(--field);padding:1px 2px 6px;color:var(--ink);
     font:var(--t-base)/28px var(--sans);border-radius:0;
     background-image:repeating-linear-gradient(to bottom,
       transparent 0 27px, var(--rule) 27px 28px);
     background-position:0 2px;background-attachment:local}
.choice{display:flex;gap:8px;flex-wrap:wrap}
/* The rule goes UNDER the option, not over it: over it, the first rule sat
   directly beneath the question and read as an underline on the question. */
.choice{gap:16px var(--s4);margin-top:var(--s2)}
.choice label{flex:1 1 210px;border:0;border-bottom:2px solid var(--line-2);
     padding:0 0 11px;cursor:pointer;background:transparent;font-weight:400;
     display:flex;gap:10px;align-items:flex-start;margin:0;min-height:58px;
     transition:border-bottom-color .15s ease}
.choice label:hover{border-bottom-color:var(--stone)}
.choice label:has(input:checked){border-bottom-color:var(--ink)}
.choice label:has(input:checked) b{color:var(--clay)}
.choice label b{display:block}
.choice label span{display:block;font-size:var(--t-fine);color:var(--stone);line-height:1.45}
.choice input{width:auto;margin-top:3px;flex:0 0 auto;accent-color:var(--forest)}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:var(--t-aux);line-height:1.55;
     border-top:1px solid var(--line);padding:var(--s3) 0 0;margin-bottom:var(--s3);
     max-width:78ch}
.consent input{width:auto;margin-top:3px;flex:0 0 auto;accent-color:var(--forest)}
.err{background:transparent;border:0;border-top:3px solid var(--clay);
     padding:13px 0 0;margin-bottom:var(--s3);font-size:var(--t-aux);color:var(--ink)}
.err b{display:block;margin-bottom:4px}
.err ul{margin:6px 0 0;padding-left:19px}

/* ---------------------------------------------------------------- footer */
footer.foot{background:var(--forest);color:var(--on-navy-4);padding:var(--s5) 0 var(--s4);
     margin-top:0}
.foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s4);
     margin-bottom:var(--s4)}
@media(max-width:800px){.foot .cols{grid-template-columns:1fr;gap:var(--s3)}}
.foot h2{color:var(--on-navy);font:600 var(--t-label)/1 var(--sans);letter-spacing:.14em;
     text-transform:uppercase;margin-bottom:13px}
.foot a{color:var(--on-navy-2);text-decoration:none;display:block;padding:3px 0;font-size:var(--t-aux)}
.foot a:hover{color:#FFFFFF;text-decoration:underline;text-underline-offset:3px}
.foot .fine{border-top:1px solid rgba(169,207,245,.25);padding-top:var(--s3);
     font:var(--t-cap)/1.7 var(--sans);color:var(--on-navy-4)}
.foot .fine b{color:var(--on-navy-2);font-weight:700}
.foot .lk{display:inline-flex;margin-bottom:var(--s3)}

/* the calculator result */
.result{border:0;border-top:4px solid;background:transparent;padding:var(--s3) 0 0;
        margin-bottom:var(--s4)}
.result.ok{border-top-color:var(--brass)}
.result.bad{border-top-color:var(--clay)}
.result .tag{font:700 var(--t-label)/1 var(--sans);letter-spacing:.13em;
     text-transform:uppercase;display:block;margin-bottom:12px}
.result.ok .tag{color:var(--brass)}
.result.bad .tag{color:var(--clay)}
.result h2{font-size:var(--t-lg);margin-bottom:var(--s2)}
.result .tbl{margin:var(--s3) 0}
.result .small{font-size:var(--t-fine);line-height:1.6;color:var(--stone);margin:0}
td.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;
       white-space:nowrap}
td.num.bad{color:var(--clay)}
td.num.good{color:var(--brass)}
/* --------------------------------------------------------------- a claim file */
/* The one page about one business. Everything is computed on the server, so it
   arrives complete on a bad connection at a loss site. */
.bigclock{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 16px;
  background:var(--forest);color:var(--on-navy-2);padding:26px 30px;margin-bottom:var(--s3)}
.bigclock .d{font:700 clamp(var(--t-huge),8.6vw,72px)/1 var(--mono);color:#FFFFFF;
  font-variant-numeric:tabular-nums}
.bigclock .l{font:700 var(--t-lg)/1.2 var(--sans);color:#FFFFFF}
.bigclock .s{flex:1 0 100%;margin-top:12px;font-size:var(--t-aux);line-height:1.6;
  color:var(--on-navy-3);max-width:60ch}
.bigclock .s b{color:var(--brass-pale);font-weight:500}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:0 var(--s4);border-top:2px solid var(--ink)}
.facts div{padding:13px 0 15px;border-bottom:1px solid var(--line)}
.facts span{display:block;font:700 var(--t-micro)/1 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--stone);margin-bottom:6px}
.facts b{font:500 var(--t-sm)/1.35 var(--sans);color:var(--ink);word-break:break-word}

/* Where the claim stands, said properly. The rail alone answered "which of
   seven words" and never "what does that mean, and what can I do", which is
   the only question anybody opens this page with. */
.standing{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
     gap:var(--s3) var(--s5);align-items:start;margin-bottom:var(--s4);
     padding-bottom:var(--s4);border-bottom:1px solid var(--line)}
.standing .st-head h2{font:700 clamp(var(--t-head),3.4vw,34px)/1.1 var(--display);
     letter-spacing:-.02em;margin:6px 0 var(--s2);color:var(--ink)}
.standing .st-doing{margin:0;font-size:var(--t-base);line-height:1.6;max-width:52ch}
.standing .st-side{display:grid;gap:var(--s3)}
.standing .st-side .gloss{margin:0;max-width:none;padding-left:calc(12ch + 16px)}
.standing .st-side .gloss > b{width:12ch}
@media(max-width:900px){.standing{grid-template-columns:1fr;gap:var(--s3)}}
@media(max-width:760px){.standing .st-side .gloss{padding-left:0}
     .standing .st-side .gloss > b{width:auto}}

ol.rail{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(7,1fr);gap:0}
@media(max-width:900px){ol.rail{grid-template-columns:1fr}}
ol.rail li{position:relative;padding:26px 12px 0 0}
ol.rail li::before{content:"";position:absolute;left:0;right:0;top:7px;height:3px;
  background:var(--line-2)}
ol.rail li.done::before,ol.rail li.now::before{background:var(--brass)}
ol.rail li:last-child::before{right:12px}
.rail .dot{position:absolute;left:0;top:1px;width:15px;height:15px;
  border:3px solid var(--line-2);background:var(--paper);border-radius:50%}
.rail li.done .dot{display:none}
.rail li.done svg.tickbox{position:absolute;left:-4px;top:-7px;width:25px;
     height:25px;color:var(--brass);background:var(--paper);border-radius:50%}
.rail li.now .dot{background:var(--clay);border-color:var(--clay);
  box-shadow:0 0 0 4px rgba(168,28,34,.18)}
.rail li b{display:block;font:700 var(--t-aux)/1.3 var(--sans);color:var(--ink)}
.rail li span:not(.dot){display:block;font-size:var(--t-cap);line-height:1.45;
  color:var(--stone);margin-top:4px}
.rail li.todo b,.rail li.todo span:not(.dot){color:var(--faint)}
@media(max-width:900px){
  ol.rail li{padding:0 0 0 30px;margin-bottom:14px}
  ol.rail li::before{left:7px;right:auto;top:0;bottom:-14px;width:3px;height:auto}
  .rail .dot{top:2px}}

form + .asks{margin-top:var(--s4)}
/* A panel opens on a rule across the top, the way the deadline card does.
   It used to hang off a bar down its left side, which is the admonition
   shape; the label already says what the panel is, so the bar was saying it
   a second time in colour. */
.asks{border:0;border-top:3px solid var(--clay);background:transparent;
  padding:12px 0 var(--s2);margin-bottom:var(--s4)}
.asks.ok{border-top-color:var(--brass)}
.asks.done{border-top-color:var(--line-2)}
.asks ul{list-style:none;margin:10px 0 0;padding:0}
.asks li{display:flex;gap:13px;align-items:flex-start;padding:11px 0;
  border-top:1px solid var(--line)}
.asks li:first-child{border-top:0}
.asks li b{display:block;color:var(--ink);font:500 var(--t-sm)/1.5 var(--sans)}
.asks li span:not(.box){display:block;font:var(--t-cap)/1.5 var(--mono);color:var(--stone);
  margin-top:4px}
.asks li.late b{color:var(--clay)}
.asks .tickbox{margin-top:1px;color:var(--brass-deep)}
.asks .tickbox.done{color:var(--stone)}
.asks p{margin:8px 0 0;font-size:var(--t-sm)}

form.upload{border:0;border-top:3px solid var(--brass);padding:13px 0 0}
form.upload h2{font:600 var(--t-lede)/1.3 var(--display);margin:0 0 6px}
.uphint{font-size:var(--t-aux);line-height:1.58;color:var(--stone);margin:0 0 var(--s3);
  max-width:60ch}
.field input[type=file]{padding:11px 10px;background:transparent;border:0;
  border-bottom:2px dashed var(--field);font:var(--t-aux) var(--sans);cursor:pointer}
.sentok,.senterr{background:transparent;border:0;padding:13px 0 0;
  margin-bottom:var(--s3);font-size:var(--t-sm);line-height:1.55}
.sentok{border-top:3px solid var(--brass)}
.senterr{border-top:3px solid var(--clay)}
.sentok b,.senterr b{display:block;color:var(--ink)}
ul.sentfiles li{align-items:center}
.ft{flex:0 0 auto;font:700 var(--t-micro)/1 var(--mono);letter-spacing:.08em;
  color:var(--brass-deep);padding:5px 0;min-width:40px}

ol.log{list-style:none;margin:0;padding:0}
ol.log li{display:grid;grid-template-columns:74px 1fr;gap:16px;padding:12px 0;
  border-bottom:1px solid var(--line);align-items:baseline}
ol.log li:last-child{border-bottom:0}
ol.log .when{font-size:var(--t-cap);color:var(--brass-deep);letter-spacing:.04em}
ol.log .what{font-size:var(--t-sm);line-height:1.58}
ol.log li.you .what{color:var(--ink)}
ol.log li.you .when{color:var(--stone)}

/* ------------------------------------------------------------- long-form pages */
/* Numbered, hung, and separated by rules rather than stacked as cards. A
   nine-item argument set as nine bordered boxes reads as a list of features;
   set as a numbered sequence with the number in the margin it reads as
   something written. */
p.standfirst{font:500 var(--t-lg)/1.58 var(--sans);color:var(--ink);max-width:60ch;
     margin:0 0 var(--s5);letter-spacing:-.008em}
article.cause{display:grid;grid-template-columns:112px 1fr;gap:var(--s4);
     padding:var(--s4) 0;border-top:1px solid var(--line-2)}
article.cause:first-of-type{border-top:2px solid var(--ink)}
@media(max-width:760px){article.cause{grid-template-columns:1fr;gap:var(--s2)}}
.cause .cn span{display:block;font:700 var(--t-display)/1 var(--mono);color:var(--brass-deep);
     font-variant-numeric:tabular-nums}
.cause .cn em{display:block;font:700 var(--t-label)/1.5 var(--sans);letter-spacing:.12em;
     text-transform:uppercase;color:var(--stone);font-style:normal;margin-top:8px}
.cause .cb h2{font:600 var(--t-lg)/1.28 var(--display);margin-bottom:10px;max-width:30ch}
.cause .cb > p{font-size:var(--t-base);line-height:1.62;max-width:62ch;margin:0 0 var(--s3)}
.two2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3) var(--s4);
     padding-top:var(--s2);border-top:1px dashed var(--line-2)}
@media(max-width:760px){.two2{grid-template-columns:1fr}}
.two2 p{margin:0;font-size:var(--t-aux);line-height:1.6}
.lbl{display:block;font:700 var(--t-label)/1 var(--sans);letter-spacing:.13em;
     text-transform:uppercase;color:var(--brass-deep);margin-bottom:8px}
.lbl.clay{color:var(--clay)}
.lbl.ink{color:var(--ink)}
p.more{margin:var(--s3) 0 0;font-size:var(--t-aux)}
p.thetest{margin:var(--s3) 0 0;padding-top:var(--s2);
     border-top:1px dashed var(--line-2);font:500 var(--t-sm)/1.55 var(--sans);
     color:var(--ink);max-width:56ch}
p.more a{font-weight:600}

/* the paragraph that turns the argument on ourselves */
.own{border-left:4px solid var(--clay);padding:var(--s2) 0 var(--s2) var(--s3);
     max-width:66ch}
.own h2{font:600 var(--t-xl)/1.3 var(--display);margin:0 0 var(--s2)}
.own p{font-size:var(--t-base);line-height:1.64;margin:0 0 var(--s2)}
.own p:last-child{margin-bottom:0;color:var(--stone)}

ol.ask{counter-reset:q;list-style:none;padding:0;margin:0;max-width:66ch}
ol.ask li{counter-increment:q;position:relative;padding:14px 0 14px 46px;
     border-bottom:1px solid var(--line);font:500 var(--t-base)/1.55 var(--sans);
     color:var(--ink)}
ol.ask li:last-child{border-bottom:0}
ol.ask li::before{content:counter(q);position:absolute;left:0;top:15px;
     font:500 var(--t-cap)/1 var(--mono);color:var(--brass-deep)}

/* --------------------------------------------------- the other kind of opening */
/* Sixty-seven pages opening on the same forest slab was the loudest thing
   making this site look machine-made. The slab is now the front door only.
   Everything else opens the way a file opens: a docket line saying where in
   the cabinet you are, then the words. */
section.open{padding:var(--s5) 0 var(--s4);border-bottom:1px solid var(--line);
     background:var(--paper-2)}
section.open .lede{line-height:28px}
.opener{display:flex;gap:var(--s4);align-items:flex-start}
.opener .optext{flex:1 1 auto;min-width:0}
/* The docket used to be a thin line above the title, which left the whole
   right-hand half of the opening band empty on seventy-two pages. It is the
   one thing on a page that is about position, so it goes where the position
   is: out in that space, stacked, the way a divider card reads down a
   drawer. */
/* A filing tab, not two stranded lines. With four levels it read as a tab
   already; with two -- thirteen pages -- it was small type hanging off the
   right edge. It opens on a rule, the way every other panel here does. */
.opener > .docket{flex:0 0 auto;margin:10px 0 0;width:30ch;max-width:38%;
     flex-direction:column;align-items:flex-end;text-align:right;gap:5px;
     border-top:2px solid var(--ink);padding:13px 0 0}
.opener > .docket i{display:none}
.opener > .docket span{display:block;position:relative;padding-right:13px}
.opener > .docket span::after{content:"";position:absolute;right:0;top:.55em;
     width:7px;height:1px;background:var(--line-2)}
.opener > .docket span:last-child::after{background:var(--brass-deep);width:11px}
@media(max-width:980px){
  .opener{flex-wrap:wrap}
  .opener > .docket{order:-1;width:100%;max-width:none;flex-direction:row;
       align-items:center;text-align:left;border-top:0;padding:0;margin:0 0 12px}
  .opener > .docket span{padding-right:0}
  .opener > .docket span::after{display:none}
  .opener > .docket i{display:inline}}
.opener h1{font-size:clamp(26px,3.7vw,35px);max-width:21ch;margin-bottom:var(--s2)}
.opener .lede{max-width:60ch;font-size:var(--t-lede)}
.opstamp{flex:0 0 auto;margin-top:9px}
@media(max-width:720px){.opener{flex-direction:column-reverse;gap:var(--s2)}
  .opstamp{margin-top:0}
  /* column-reverse already reads the DOM backwards, so the order:-1 that
     pulls the docket to the front above this width would push it to the
     bottom below it. */
  .opener > .docket{order:0;margin-bottom:0}}
.docket{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px;
     font:500 var(--t-label)/1.5 var(--mono);letter-spacing:.13em;text-transform:uppercase;
     color:var(--stone)}
.docket i{font-style:normal;color:var(--faint)}
.docket a{color:var(--brass-deep);text-decoration:none}
.docket a:hover{text-decoration:underline}
.docket span:first-child{color:var(--ink)}

/* the stamp */
/* How a claim family is marked. Not a badge and not a box: the word it is
   filed under, on a rule, which is how every other label on this site is set.
   One ink, because red here means trouble and a family is not trouble. */
.fam{display:inline-block;font:700 var(--t-micro)/1 var(--mono);letter-spacing:.13em;
     color:var(--ink);border-bottom:2px solid var(--ink);padding-bottom:5px;
     white-space:nowrap}
.fam.big{font-size:var(--t-fine);letter-spacing:.15em;border-bottom-width:3px;
     padding-bottom:7px}
.stampword{font:700 var(--t-aux) var(--mono);letter-spacing:1.6px}
svg.struck{display:block;width:100%;height:auto}
.struckline{font:700 var(--t-sm) var(--mono);letter-spacing:1.1px}
.struckline.sm{font-size:var(--t-micro);letter-spacing:1.8px}
.ghead .gi{flex:0 0 auto;margin-right:2px}

/* rules and space instead of another bordered box */
/* One column gap for every full-width two-column device. They used to be
   56, 58 and 52, so the right-hand column started at 748, 746 and 745 on
   the same page and jogged as you scrolled from the hero into the index.
   Nobody could name it and everybody could see it. */
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s5);
     margin-bottom:var(--s3)}
@media(max-width:820px){.two{grid-template-columns:1fr;gap:var(--s3)}}
/* text-wrap:balance is right for a heading and wrong for a label: it balances
   "What actually goes wrong" onto two lines and shrinks the rule under it.
   This one became an h2 when the heading order was fixed, and inherited it. */
.plain .plainhead{max-width:none;text-wrap:wrap;
     font:700 var(--t-label)/1 var(--sans);letter-spacing:.13em;
     text-transform:uppercase;color:var(--brass-deep);margin-bottom:12px;
     padding-bottom:9px;border-bottom:1px solid var(--ink)}
.plain ul{list-style:none;margin:0;padding:0}
.plain li{padding:9px 0;border-bottom:1px solid var(--line);font-size:var(--t-sm);
     line-height:1.58}
.plain li:last-child{border-bottom:0}

.firstcol{display:grid;gap:var(--s3);align-content:start}
.firstcol p.first{margin:0}

/* a section on a tint, for the one that is an aside rather than an argument */
section.tint{background:var(--paper-2);border-top:1px solid var(--line);
     border-bottom:1px solid var(--line)}

/* the urgent line, hung rather than boxed */
p.first{border-left:3px solid var(--clay);padding:2px 0 2px 18px;max-width:64ch;
     margin:0 0 var(--s4);font-size:var(--t-base);line-height:1.6;color:var(--ink)}
p.first span{display:block;font:500 var(--t-label)/1 var(--mono);letter-spacing:.14em;
     text-transform:uppercase;color:var(--clay);margin-bottom:6px}

/* the quiet close */
p.signoff{border-top:1px solid var(--line-2);padding-top:var(--s3);margin:0;
     font-size:var(--t-sm);color:var(--stone);max-width:64ch}
p.signoff a{color:var(--brass)}

/* --------------------------------------------------------------- the drawing */
/* Every image on this site is drawn, not photographed. It recolours with the
   theme because it is inline SVG using the same tokens as the type. */
.ghead .gi{flex:0 0 auto}
.ghead{align-items:center}

/* the narrowing bar -- drawn from the visitor's own numbers */
figure.narrow{margin:0 0 var(--s3)}
.barwrap{background:transparent;border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);padding:var(--s3) 0}
svg.bar{display:block;width:100%;height:84px}
.barend{font:500 var(--t-aux) var(--mono);fill:var(--stone)}
svg.bar .barend{fill:var(--stone)}
.barlab{font:500 var(--t-base) var(--mono)}
figure.narrow figcaption{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:11px;
  font:var(--t-cap)/1.5 var(--mono);color:var(--stone)}
.lg{display:flex;align-items:center;gap:7px}
.lg i{width:12px;height:12px;display:inline-block;flex:0 0 auto}
.lg b{color:var(--ink);font-weight:500}

/* the playbook timeline */
figure.tline{margin:0 0 var(--s3);background:transparent;
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  padding:var(--s3) 0}
figure.tline svg{display:block;width:100%;height:62px}
.tlnum{font:500 var(--t-cap) var(--mono)}
.tlwhen{font:500 var(--t-micro) var(--mono);letter-spacing:.08em}
figure.tline figcaption{margin-top:9px;font:var(--t-cap)/1.5 var(--mono);color:var(--stone)}

/* the escalation ladder */
figure.ladder{margin:0 0 var(--s3);background:transparent;
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  padding:var(--s3) 0;color:var(--ink)}
figure.ladder svg{display:block;width:100%;max-width:620px;height:auto}
.rung{font:700 var(--t-lg) var(--sans)}

/* ------------------------------------------------------- the claims gallery */
.gsec{margin-bottom:var(--s5)}
.gsec:last-child{margin-bottom:0}
.ghead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
       padding-bottom:9px;margin-bottom:12px;border-bottom:1px solid var(--line-2)}
.ghead h2{font:600 var(--t-base)/1.3 var(--display)}
.ghead span{font-size:var(--t-aux);color:var(--stone)}
.ghead em{margin-left:auto;font-style:normal;font:700 var(--t-label)/1 var(--sans);
          letter-spacing:.12em;color:var(--brass-deep)}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s5)}
@media(max-width:820px){.gallery{grid-template-columns:1fr}}
.gcard{display:flex;flex-direction:column;gap:3px;text-decoration:none;
       background:transparent;border:0;border-bottom:1px solid var(--line);
       padding:13px 0 15px;transition:background .16s ease}
.gallery > .gcard:nth-child(1),.gallery > .gcard:nth-child(2){
       border-top:2px solid var(--ink)}
@media(max-width:820px){.gallery > .gcard:nth-child(2){border-top:0}}
.gcard:hover{background:var(--paper-2)}
.gcard:hover b{text-decoration:underline;text-underline-offset:3px}
.gcard b{color:var(--ink);font:700 var(--t-sm)/1.3 var(--sans)}
.gcard span{font-size:var(--t-aux);line-height:1.5;color:var(--stone)}
.gcard .also{margin:4px 0 0;font:var(--t-label)/1.45 var(--mono);color:var(--faint);
             letter-spacing:.01em}
/* Anchored sections need room under the sticky-feeling header when jumped to. */
section.anchor{scroll-margin-top:12px}

/* The alternate names read as a line of text under the standfirst. As pills
   they were both another row of boxes and, once the hero went, pale on pale. */
p.alsoline{margin:var(--s3) 0 0;max-width:64ch;font:var(--t-cap)/1.7 var(--mono);
     color:var(--stone);letter-spacing:.01em}
p.alsoline span{display:block;font-size:var(--t-label);letter-spacing:.14em;
     text-transform:uppercase;color:var(--brass-deep);margin-bottom:3px}
/* a letter template, shown as the letter it is */
.letter{border:1px solid #E7E0D4;background:#FBF7F0}
/* The letterhead on a template sheet: the mark, what the letter is, and when
   it is sent. The sheet is ours; the words inside it are the reader's. */
.letter .lhead .lk{flex:0 0 auto;margin-right:auto}
.letter .lhead .l-what{font:700 var(--t-sm)/1.3 var(--sans);color:var(--ink)}
.letter .lhead .l-when{font:var(--t-cap)/1.4 var(--mono);color:#635A4C;
     flex:0 0 100%;border-top:1px solid #E7E0D4;padding-top:9px;margin-top:2px}
.letter .lfoot{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
     padding:11px 18px;border-top:1px solid #E7E0D4;background:#F4EFE5;
     font:var(--t-fine)/1.5 var(--mono);color:#635A4C}
.letter .l-down{margin:0 0 0 auto}
.letter .lhead{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
     padding:12px 18px;border-bottom:1px solid #E7E0D4;background:#F4EFE5;
     font:700 var(--t-label)/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;
     color:#635A4C}
.letter .lhead .btn{margin-left:auto;padding:8px 14px;font-size:var(--t-fine);
     letter-spacing:0;text-transform:none}
.letter pre{margin:0;padding:26px 28px;overflow-x:auto;white-space:pre-wrap;
     font:var(--t-aux)/1.72 var(--mono);color:#2A2118;tab-size:2}
ul.fields{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
ul.fields li{border-bottom:1px solid var(--line-2);padding:3px 0}
ul.fields .mono{font-size:var(--t-cap);color:var(--brass-deep)}

.killer{font-size:var(--t-fine);line-height:1.55;color:var(--stone);
        border-top:1px dashed var(--line-2);padding-top:10px;margin-top:12px}

.tbl{overflow-x:auto;border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2)}
table{width:100%;border-collapse:collapse;font-size:var(--t-aux);background:transparent}
th{text-align:left;font:700 var(--t-label)/1.3 var(--sans);letter-spacing:.11em;
   text-transform:uppercase;color:var(--stone);padding:11px 15px 11px 0;
   border-bottom:1px solid var(--line-2);white-space:nowrap}
td{padding:11px 15px 11px 0;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}

/* ------------------------------------------------------------ the plates */
/* Engravings of the loss, drawn rather than photographed, served as files so
   they are fetched once. A plate keeps its own paper ground in both themes,
   the way a printed plate is still a printed plate in a dim room. */
figure.plate{margin:0;background:#FBF7F0;border:1px solid #E7E0D4}
figure.plate img{display:block;width:100%;height:auto}
figure.plate figcaption{padding:8px 12px;font:var(--t-cap)/1.5 var(--mono);color:#635A4C;
  background:#F4EFE5;border-top:1px solid #E7E0D4}
.two.plated{align-items:start}
.plates3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin-bottom:var(--s4);align-items:start}
@media(max-width:800px){.plates3{grid-template-columns:1fr}}
img.gthumb{display:block;flex:0 0 auto;width:150px;height:auto;
  border:1px solid #E7E0D4;background:#FBF7F0}
@media(max-width:600px){img.gthumb{width:112px}}

/* -------------------------------------------------------------- the doors */
.door{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--s4) var(--s5);align-items:start}
@media(max-width:860px){.door{grid-template-columns:1fr}}
.door h1{font-size:clamp(26px,3.7vw,35px);margin-bottom:var(--s2)}
.door form.intake{margin:var(--s3) 0}
.door figure.plate{margin-top:6px}
.minor{font-size:var(--t-aux);line-height:1.58;color:var(--stone)}
.codebox{border:0;border-top:3px solid var(--ink);border-bottom:1px solid var(--line-2);
  background:transparent;padding:16px 0;margin:0 0 var(--s3)}
.codebox > .lbl{margin-bottom:14px}
.codepair{display:flex;gap:10px var(--s5);flex-wrap:wrap;align-items:flex-end}
.codebox .code,.codebox .ref{display:block;font:500 clamp(var(--t-xl),4.2vw,32px)/1.15 var(--mono);
  letter-spacing:.06em;color:var(--ink);font-variant-numeric:tabular-nums}
.codebox p{margin:12px 0 0;font-size:var(--t-aux);line-height:1.58;max-width:66ch}
code.linkline{display:block;padding:9px 0;border-top:1px dashed var(--line-2);
  border-bottom:1px dashed var(--line-2);font-size:var(--t-fine);word-break:break-all;
  color:var(--ink)}
.btn.sm{padding:8px 14px;font-size:var(--t-fine)}
.act-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.act-row form{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

/* --------------------------------------------------------------- the desk */
.staffbar{background:var(--forest-deep);border-bottom:1px solid rgba(169,207,245,.3)}
.staffbar .wrap{display:flex;gap:6px var(--s3);align-items:center;flex-wrap:wrap;
  padding-top:9px;padding-bottom:9px;font-size:var(--t-fine)}
.staffbar .sb-who{color:var(--on-navy-3);margin-right:auto}
.staffbar .sb-who b{color:#FFFFFF;font-weight:700}
.staffbar a{color:#D6E3F2;text-decoration:none;border-bottom:1px solid transparent;
  padding:3px 0}
.staffbar a:hover,.staffbar a[aria-current]{color:#FFFFFF;border-bottom-color:var(--on-navy)}
.staffbar form{margin:0}
.staffbar .sb-out{background:transparent;color:#D6E3F2;
  border:1px solid rgba(169,207,245,.5);padding:5px 12px;font:var(--t-fine) var(--sans);
  cursor:pointer}
.staffbar .sb-out:hover{color:#FFFFFF;border-color:var(--on-navy)}
table.desk td{font-size:var(--t-aux)}
table.desk td a{font-weight:600}
table.desk th.num{text-align:right}
.sub{font-size:var(--t-cap);color:var(--stone)}
table.desk td > .sub{display:block}
table.desk tr.hot td:first-child{box-shadow:inset 3px 0 0 var(--clay)}
.pill{display:inline-block;font:700 var(--t-micro)/1 var(--sans);letter-spacing:.1em;
  text-transform:uppercase;padding:5px 0;color:var(--stone);white-space:nowrap}
.pill.dis{color:var(--clay)}
b.late{color:var(--clay)}
.staffgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4)}
@media(max-width:860px){.staffgrid{grid-template-columns:1fr}}
form.intake.act{padding:18px 20px;margin-bottom:10px}
form.intake.act .field{margin-bottom:12px}
.asks li > div{flex:1 1 auto;min-width:0}
.asks li form{margin:0;flex:0 0 auto}
ol.log.wide li{grid-template-columns:150px 1fr}
ol.log.wide .when{white-space:nowrap}
.qr{background:#FFFFFF;border:1px solid var(--line);padding:14px;max-width:250px;
  margin:14px 0}
.qr svg{display:block;width:100%;height:auto}

@media print{
  header.top,footer.foot,.util,.mnav,section.dlband,.btn{display:none}
  body{background:#fff;font-size:11pt}
  .card{border:0;border-top:1px solid #999;break-inside:avoid}
}

/* ------------------------------------------------------------- the front door */
/* The home page, and only the home page. A visitor arrives here in one of two
   states -- something has just happened, or they are reading before anything
   has -- so the page has to answer both without asking which. */
.hero.front{padding:var(--s6) 0 var(--s5)}
/* A hero that carries a plate. The front door has had one from the start and
   the other ten opened on an empty right-hand half, which reads as a layout
   that stopped rather than one that chose. The measure does not change: the
   drawing takes the space the words were never going to use. */
.herogrid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
     gap:var(--s4) var(--s5);align-items:center}
.herogrid > div{min-width:0}
.herogrid h1{max-width:15ch}
.herogrid .lede{max-width:48ch}
.herogrid figure.plate{margin:0}
@media(max-width:900px){.herogrid{grid-template-columns:1fr;gap:26px}
     .herogrid h1,.herogrid .lede{max-width:none}
     .herogrid figure.plate{max-width:560px}}
.doorgrid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
     gap:var(--s4) var(--s5);align-items:center}
.doorgrid h1{font-size:clamp(34px,5.3vw,58px);line-height:1.02;
     letter-spacing:-.032em;max-width:15ch;margin-bottom:var(--s3)}
.doorgrid .lede{margin:0 0 var(--s4)}
.dooract{display:flex;align-items:center;gap:14px 26px;flex-wrap:wrap}
.doorcall{font-size:var(--t-fine);line-height:1.35;color:var(--stone)}
.doorcall a{display:inline-block;font:700 var(--t-lede)/1.2 var(--mono);color:var(--ink);
     text-decoration:none;margin-top:6px;padding:0 6px 5px 2px;
     border-bottom:1.5px solid var(--field);font-variant-numeric:tabular-nums}
.doorcall a:hover{text-decoration:underline;text-underline-offset:3px}
.dooralt{margin:var(--s3) 0 0;font-size:var(--t-aux);color:var(--stone)}
.dooralt a{font-weight:700;margin-left:5px}
/* The one drawing that had no paper under it. The page ground flips and the
   engraving's inks do not, so in the dark theme half of it disappeared. A
   plate is warm in both themes, which is the whole reason plates exist. */
figure.hart{margin:0;position:relative;background:#FBF7F0;
     border:1px solid #E7E0D4}
figure.hart img{display:block;width:100%;height:auto;
     filter:drop-shadow(0 18px 26px rgba(11,31,58,.10))}
figure.hart figcaption{margin:0;padding:8px 12px;background:#F4EFE5;
     border-top:1px solid #E7E0D4;font:var(--t-cap)/1.5 var(--mono);color:#635A4C}
/* struck across the corner of the sketch, the way a desk stamps a file it has
   taken in. Navy, because the two reds on this page are already spoken for. */
.hart .struck{position:absolute;z-index:2;left:-12px;top:26px;width:158px;
     transform:rotate(-6deg);pointer-events:none}
@media(max-width:880px){.hart .struck{left:auto;right:2px;top:-8px;width:136px}}
@media(max-width:880px){.doorgrid{grid-template-columns:1fr}
     .hero.front{padding:var(--s5) 0 var(--s4)}figure.hart{max-width:520px}}

/* A hand-drawn stroke under the last three words of the headline. It is the
   one gesture on the site that is not ruled, which is why there is only one. */
.marked{position:relative;white-space:nowrap}
.marked .pen{position:absolute;left:-1%;bottom:-.18em;width:102%;height:.4em;
     overflow:visible;color:var(--clay);pointer-events:none}

/* the four standing facts, under the door */
.proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 34px}
.proof > div{border-top:2px solid var(--ink);padding-top:13px}
svg.tickbox{display:block;flex:0 0 auto;width:22px;height:22px;color:var(--stone)}
.proof .tickbox{width:30px;height:30px;margin:0 0 8px -3px}
.proof b{display:block;font:700 var(--t-base)/1.3 var(--sans);color:var(--ink);margin-bottom:7px}
.proof p{margin:0;font-size:var(--t-aux);line-height:1.55;color:var(--stone)}
@media(max-width:900px){.proof{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.proof{grid-template-columns:1fr}}

/* ------------------------------------------------------------- the navy band */
/* One section of the site is set on the navy, and it is the one making the
   argument the whole desk exists for. Spending it twice would spend it. */
section.navyband{background:var(--forest);color:var(--on-navy-2);padding:var(--s6) 0}
.navyband .nb-head{max-width:800px;margin-bottom:var(--s5)}
.navyband .rulehead{margin-bottom:var(--s3)}
.navyband .rulehead h2{margin-top:var(--s3)}
.navyband h2{color:#FFFFFF}
.navyband .rulehead h2{max-width:24ch}
.navyband .nb-stand{font:var(--t-lede)/1.62 var(--sans);color:var(--on-navy-2);margin:0;max-width:68ch}
.navyband .plain .plainhead{color:var(--on-navy);border-bottom-color:rgba(169,207,245,.4)}
.navyband .plain li{color:#FFFFFF;border-bottom-color:rgba(169,207,245,.16);
     position:relative;padding-left:28px}
.navyband .plain li:last-child{border-bottom:1px solid rgba(169,207,245,.16)}
.navyband .plain.wrong li::before{content:"";position:absolute;left:2px;top:22px;
     width:12px;height:2px;background:var(--clay-lift)}
.navyband .plain.right li::before{content:"";position:absolute;left:2px;top:16px;
     width:11px;height:6px;border-left:2px solid var(--on-navy);border-bottom:2px solid var(--on-navy);
     transform:rotate(-45deg)}
.navyband p.more a,.navyband a{color:#FFFFFF;font-weight:700}
.navyband .two{margin-bottom:0}

/* ------------------------------------------------------------ the first day */
/* Five steps that genuinely happen in this order, so they are numbered. */
ol.tl{list-style:none;margin:var(--s1) 0 0;padding:0;position:relative;
     display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 24px}
ol.tl::before{content:"";position:absolute;left:0;right:0;top:17px;
     border-top:2px dashed var(--line-2)}
ol.tl li{position:relative;padding-top:54px}
ol.tl .n{position:absolute;top:0;left:0;width:36px;height:36px;background:var(--paper);
     border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;
     font:700 var(--t-aux)/1 var(--mono);color:var(--ink)}
ol.tl li:first-child .n{background:var(--ink);color:var(--paper)}
ol.tl .step{display:block;font:700 var(--t-micro)/1 var(--sans);letter-spacing:.13em;
     text-transform:uppercase;color:var(--brass);margin-bottom:9px}
ol.tl b{display:block;font:700 var(--t-base)/1.3 var(--sans);color:var(--ink);margin-bottom:7px}
ol.tl p{margin:0;font-size:var(--t-aux);line-height:1.55;color:var(--stone)}
@media(max-width:900px){ol.tl{grid-template-columns:1fr;gap:0}
     ol.tl::before{left:17px;right:auto;top:0;bottom:0;border-top:0;
       border-left:2px dashed var(--line-2)}
     ol.tl li{padding:0 0 26px 58px}}
.dayfoot{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;
     margin-top:var(--s4);align-items:stretch}
a.daydoor{display:flex;flex-direction:column;justify-content:center;
     border:0;border-top:3px solid var(--brass);padding:14px 0 0;
     text-decoration:none;color:var(--ink);font:700 var(--t-base)/1.35 var(--sans)}
a.daydoor span{font:700 var(--t-micro)/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;
     color:var(--brass);margin-bottom:9px}
a.daydoor:hover{border-top-color:var(--ink)}
a.daydoor:hover span + *,a.daydoor:hover{text-decoration:none}
@media(max-width:900px){.dayfoot{grid-template-columns:1fr}}

/* --------------------------------------------------------------- the index */
/* A library index, not a wall of cards: the stamp, the name, one line of what
   it covers, in two columns that a reader can run an eye down. */
.ix{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s5)}
@media(max-width:780px){.ix{grid-template-columns:1fr}}
a.ixrow{display:grid;grid-template-columns:92px minmax(0,1fr) 16px;gap:16px;
     align-items:center;padding:13px 0;border-bottom:1px solid var(--line);
     text-decoration:none;color:inherit}
@media(max-width:420px){a.ixrow{grid-template-columns:minmax(0,1fr) 16px;gap:5px 12px}
     a.ixrow > :first-child{grid-column:1/-1}}
.ix > div > a.ixrow:first-child{border-top:2px solid var(--ink)}
a.ixrow:hover .fam{color:var(--brass-deep);border-bottom-color:var(--brass-deep)}
.ixrow b{display:block;color:var(--ink);font:700 var(--t-sm)/1.3 var(--sans)}
.ixrow span.what{display:block;font-size:var(--t-aux);line-height:1.5;color:var(--stone);
     margin-top:2px}
.ixrow .arrow{color:var(--brass);font:700 var(--t-sm)/1 var(--mono)}
a.ixrow:hover b{text-decoration:underline;text-underline-offset:3px}
a.ixrow:hover{background:var(--paper-2)}

/* ---------------------------------------------------------------- the close */
.closebox{display:grid;grid-template-columns:1fr 1fr;border-top:3px solid var(--ink);
     border-bottom:1px solid var(--line-2)}
.closebox > div{padding:var(--s3) var(--s4) var(--s4) 0}
.closebox > div + div{padding-left:var(--s4);border-left:1px solid var(--line-2)}
.closebox h2{font-size:var(--t-xl);line-height:1.3;margin:4px 0 8px;max-width:27ch}
.closebox p{font-size:var(--t-sm);margin:0}
.closebox .act{display:flex;gap:18px;align-items:center;flex-wrap:wrap;
     margin-top:var(--s3)!important}
.closebox .act a.mono{font-size:var(--t-sm);color:var(--ink);text-decoration:none;
     border-bottom:1px solid var(--line-2);font-weight:700}
@media(max-width:780px){.closebox{grid-template-columns:1fr}
     .closebox > div{padding-right:0}
     .closebox > div + div{padding-left:0;border-left:0;border-top:1px solid var(--line-2);
       padding-top:var(--s3)}}
p.signed{margin:var(--s3) 0 0;font:var(--t-aux)/1.5 var(--mono);color:var(--stone);
     display:flex;align-items:center;gap:11px}
p.signed svg{width:28px;height:19px;color:var(--brass);flex:0 0 auto}

/* ------------------------------------------------------- into the margins */
/* On a wide screen the drawings lean out past the text column and into the
   ruled margin, the way a plate laid on a register sheet overlaps it. Only
   drawings do this, and only by less than the gutter is wide, so nothing a
   reader needs ever sits where the screen might cut it. Their captions stay
   inside the column with the words. */
@media(min-width:1200px){
  .doorgrid figure.hart{margin-right:-40px}
  .plates3{margin-left:-30px;margin-right:-30px}
  .two.plated figure.plate{margin-right:-30px}
}
@media(min-width:1500px){
  .doorgrid figure.hart{margin-right:-58px}
  .plates3{margin-left:-46px;margin-right:-46px}
  .two.plated figure.plate{margin-right:-46px}
}

/* ----------------------------------------------------------- the measure */
/* The page stopped being a column, so nothing is holding a line in any more.
   Everything below carries prose inside something that is not a paragraph --
   a list item, a cell, a label -- and on a wide screen each of them ran to
   ninety-odd characters, which is past the width anybody reads comfortably.
   The cap is on the words, not on the page: that is the whole trade that
   makes an edge-to-edge layout readable. */
.plain li,.gcard span,.ixrow .what,ol.log .what,.dlcard li,
ul.check li > span,.asks li > div,.facts b,.trk p,.proof p{max-width:64ch}
.entry > :not(h2){max-width:66ch}
.letter pre{max-width:96ch}
.nb-lists li,.two2 p{max-width:58ch}
p.standfirst{max-width:58ch}

/* ------------------------------------------------------------------ motion */
/* Motion here has one job: to show a thing happening that the reader would
   otherwise have to infer. The bar segments arrive in the order the cuts are
   applied, and content settles as it comes into view. Nothing loops, nothing
   pulses for attention, and all of it is off for anyone who has asked for
   less. */
@keyframes cut{from{transform:scaleX(0)}to{transform:scaleX(1)}}
svg.bar rect{transform-origin:left center;animation:cut .5s cubic-bezier(.2,.7,.3,1) both}
svg.bar rect:nth-of-type(1){animation-delay:.05s}
svg.bar rect:nth-of-type(2){animation-delay:.2s}
svg.bar rect:nth-of-type(3){animation-delay:.32s}
svg.bar rect:nth-of-type(4){animation-delay:.44s}
figure.narrow figcaption,.barend{animation:settle .5s .55s both}
figure.tline circle{animation:settle .4s both}
figure.tline circle:nth-of-type(n+2){animation-delay:.06s}

/* ---------------------------------------------------- the front door lands */
/* One orchestrated moment, on the one page somebody reads before they have
   decided anything: the headline arrives, the hand draws the line under it,
   and the desk stamps the file. It runs once, it takes under two seconds, and
   the page is fully readable at every frame of it -- nothing is hidden waiting
   for an animation to finish, because a reader on a bad connection at a loss
   site may never see the animation at all. */
@keyframes ink{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
@keyframes land{from{opacity:0;transform:rotate(-15deg) scale(1.55)}
                55%{opacity:1}
                to{opacity:1;transform:rotate(-6deg) scale(1)}}
@keyframes settle{from{opacity:0;transform:translateY(14px)}
                  to{opacity:1;transform:none}}
@keyframes land-dot{from{opacity:0;transform:scale(1.9)}
                    to{opacity:1;transform:none}}

/* The rail runs to where the claim is, and stops. Each reached segment is
   drawn in turn, the current dot lands on the end of it, and the stages
   already finished carry the desk's own tick. This one is above the fold, so
   it runs on load rather than on scroll. */
@media (prefers-reduced-motion:no-preference){
  ol.rail li.done::before,ol.rail li.now::before{transform-origin:left center;
    animation:cut .42s cubic-bezier(.2,.75,.3,1) both}
  ol.rail li:nth-child(1)::before{animation-delay:.20s}
  ol.rail li:nth-child(2)::before{animation-delay:.38s}
  ol.rail li:nth-child(3)::before{animation-delay:.56s}
  ol.rail li:nth-child(4)::before{animation-delay:.74s}
  ol.rail li:nth-child(5)::before{animation-delay:.92s}
  ol.rail li:nth-child(6)::before{animation-delay:1.10s}
  ol.rail li:nth-child(7)::before{animation-delay:1.28s}
  ol.rail li.now .dot{animation:land-dot .34s cubic-bezier(.2,1.4,.4,1) both;
    animation-delay:calc(.30s + var(--reached,0) * .18s)}
  ol.rail li.done svg.tickbox g path{--len:52;stroke-dasharray:var(--len);
    animation:ink .4s linear both}
  ol.rail li:nth-child(1) svg.tickbox g path{animation-delay:.30s}
  ol.rail li:nth-child(2) svg.tickbox g path{animation-delay:.48s}
  ol.rail li:nth-child(3) svg.tickbox g path{animation-delay:.66s}
  ol.rail li:nth-child(4) svg.tickbox g path{animation-delay:.84s}
  ol.rail li:nth-child(5) svg.tickbox g path{animation-delay:1.02s}
  ol.rail li:nth-child(6) svg.tickbox g path{animation-delay:1.20s}
}


@media (prefers-reduced-motion:no-preference){
  /* The headline is deliberately NOT animated. It is the largest thing on the
     page, so it is what a browser measures its own paint against, and fading
     it in delays that for nothing a reader gains. It is there on the first
     frame; the rest of the page arrives around it. */
  .hero.front .eyebrow{animation:settle .42s both}
  .hero.front .lede{animation:settle .5s .1s both}
  .hero.front .dooract,.hero.front .dooralt{animation:settle .5s .2s both}
  .hero.front figure.hart img{animation:settle .6s .12s both}

  /* the hand, drawing */
  .marked .pen path{--len:330;stroke-dasharray:var(--len);
    animation:ink .8s .55s cubic-bezier(.35,.1,.25,1) both}
  .marked .pen path:nth-child(2){--len:300;animation-duration:.5s;animation-delay:.85s}

  /* and the stamp, landing on it */
  .hart .struck{animation:land .45s 1.15s cubic-bezier(.2,1.5,.4,1) both}
}

/* ------------------------------------------------------- as it comes into view */
/* Scroll-driven, with no JavaScript at all. Browsers without it simply show
   the content, which is the correct fallback. Each of these shows something
   the reader would otherwise have to infer: a box being ticked, a sequence
   running left to right, a claim narrowing. */
/* ------------------------------------------------------------ on paper */
/* People print a claim letter and a document checklist and take them to a
   meeting. Without these rules they printed the masthead, the utility bar,
   the footer and the whole navigation with them, and the letter came out on
   page two. */
@media print{
  .util,header.top,footer.foot,.skip,.dlband,form.fillform,
  .closing,.signoff,.l-down,.checked,.more{display:none!important}
  html,body{background:#FFFFFF;color:#000000}
  section{padding:0!important;margin:0 0 12pt}
  .wrap{max-width:none;padding:0}
  .hero::before,section.open::before,.hero > .wrap::before{display:none!important}
  h1{font-size:20pt;margin:0 0 8pt}
  h2,h2.sub{font-size:13pt}
  p,li,td{font-size:10.5pt;line-height:1.45}
  .letter{border:1px solid #999;background:#FFFFFF;break-inside:avoid}
  .letter pre{font-size:10.5pt;line-height:1.55;white-space:pre-wrap}
  .letter .lfoot{background:#FFFFFF}
  ul.check li{break-inside:avoid;padding:5pt 0}
  figure.plate,svg.struck,.gthumb{display:none!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt;color:#555}
  a[href^="/"]::after,a[href^="#"]::after,a[href^="tel"]::after,
  a[href^="mailto"]::after{content:""}
  .sched > *,article.rec,.entry{break-inside:avoid}
}

/* --------------------------------------------------- between two pages */
/* One page becomes the next. The masthead, the utility bar and the footer are
   named, so they are held still across the transition and only the paper
   underneath them changes -- which is what turning a page in a file looks
   like. No script: this is the whole implementation. */
@view-transition{navigation:auto}
header.top{view-transition-name:masthead}
.util{view-transition-name:utility}
footer.foot{view-transition-name:foot}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}}
::view-transition-old(root),::view-transition-new(root){
  animation-duration:.26s;animation-timing-function:cubic-bezier(.3,0,.2,1)}
::view-transition-group(masthead),::view-transition-group(utility),
::view-transition-group(foot){animation-duration:.001s}

/* --------------------------------------------------- arriving on a page */
/* A cross-document transition builds its pseudo-elements in the document
   being ENTERED, so what an arrival looks like is written in the stylesheet
   of the page you land on. That is the whole mechanism, and it is the only
   one available: the CSP forbids script, so nothing here can know which link
   was clicked. What a page can know is where it sits.

   So the file moves the way a file moves. A claim type, a playbook, an office
   -- anything opened out of a list -- comes in from the right, the way a
   folder is drawn out. A list comes back from the left, the way one is put
   away. Everything else settles.

   Neither arrival touches opacity, and that is deliberate twice over. A page
   that fades up from nothing flashes the ground colour first, and if a
   browser ever resolved the timeline differently the reader would be looking
   at a blank page rather than a late one. And the browser cross-fades the
   outgoing page under a plus-lighter blend that assumes the incoming one is
   fading up to meet it: an arrival that is both translucent AND moving sums
   to more than one and washes out for a frame. So the new page arrives
   opaque and simply covers the old one, which is what a sheet of paper does
   anyway. */
html.a-deep::view-transition-new(root){
  animation:arrive-in .34s cubic-bezier(.22,0,0,1) both}
html.a-back::view-transition-new(root){
  animation:arrive-back .3s cubic-bezier(.22,0,0,1) both}
@keyframes arrive-in{from{transform:translate3d(30px,6px,0)}
  to{transform:none}}
@keyframes arrive-back{from{transform:translate3d(-22px,0,0)}
  to{transform:none}}

/* ------------------------------------------------- the moment of the tap */
/* Between tapping a link on a phone and the next page painting there is dead
   time, and dead time is what makes somebody tap a second time and report
   their loss twice. There is no script here to spin a wheel in that gap, so
   the answer is that every surface answers the finger at once and the press
   itself is the acknowledgement: it fires in no time at all, because nothing
   has to be fetched to show it.

   Eighty milliseconds, and a millimetre of travel. Long enough to be felt,
   short enough that a fast connection never shows it at all. */
.btn,a.gcard,a.ixrow,a.daydoor,article.rec,.sched > *{
  transition:transform .08s ease,background .16s ease,box-shadow .16s ease}
.btn:active{transform:translateY(1px) scale(.99)}
a.gcard:active,a.ixrow:active,article.rec:active,.sched > *:active{
  transform:translateY(1px);background:var(--paper-2)}
a.ixrow:active .fam{transform:translateX(5px)}
/* A drawn plate is a door on the pages where it is inside a link. */
a:active > figure.plate{transform:translateY(1px) scale(.996)}

/* -------------------------------------------- a drawing on its way here */
/* The figure already reserves the drawing's exact width and height, so the
   page never jumps. This is what stands in that space until the file lands:
   the same warm ground the drawing itself paints, ruled, and moving slowly
   enough to read as paper being drawn on rather than as a progress bar.

   It sits behind the image and the image is opaque, so there is nothing to
   switch off when the drawing arrives -- it simply covers this. Six passes
   and it stops: a loop that runs for as long as the tab is open is a battery
   cost and a distraction, and by eleven seconds the answer is not "wait" but
   "this is not coming". The ruling ends where it started, so it settles
   rather than snapping. */
/* On its own pseudo-element, not on the figure. The figure already carries a
   scroll-driven settle, and a second animation declaration on the same
   selector does not merge with the first -- it replaces it. Written directly
   on figure.plate this ruling silently never ran and the settle silently
   stopped, which is the kind of bug a stylesheet does not report. */
/* A plate has three layers and they are numbered here, once, because the
   loading ruling introduced the second one and broke the third: the stamp on
   the front door was painted behind the drawing for a day, which is the kind
   of thing a stylesheet does not report.

     0  the ruling, drawn while the file is still arriving
     1  the drawing itself, and its caption, both opaque
     2  anything struck across it -- the stamp, and whatever comes next

   Anything absolutely positioned inside a plate belongs on layer 2. */
figure.plate{position:relative}
figure.plate > img,figure.plate > figcaption{position:relative;z-index:1}
/* Note the two rules, not one. Naming .hart .struck here as well set its
   position to relative -- same specificity as its own rule, later in the
   file, so it won -- and the stamp dropped out of the corner of the plate
   and into the flow underneath it. The generic rule gives an overlay a
   stacking context; an overlay that already has one keeps its own. */
figure.plate > :not(img):not(figcaption){position:relative;z-index:2}
@media (prefers-reduced-motion:no-preference){
  figure.plate::before{content:"";position:absolute;inset:0;z-index:0;
    background:repeating-linear-gradient(
      180deg,rgba(31,68,104,.07) 0 1px,transparent 1px 9px);
    animation:ruling 1.9s linear 6 both}
  figure.plate > img{background:#FBF7F0}
}
@keyframes ruling{from{background-position:0 0}to{background-position:0 9px}}

/* ------------------------------------------------------- under the cursor */
/* A row you can open should say so before it is clicked, and it should say it
   by moving the way paper moves: the mark slides a little, the rule under the
   name darkens, nothing jumps. */
.sched > *{transition:background .16s ease}
.sched > *:hover{background:var(--paper-2)}
.sched h2 a,.sched h3 a{transition:border-color .16s ease,color .16s ease}
a.ixrow .fam,a.ixrow b{transition:transform .16s ease,color .16s ease}
a.ixrow:hover .fam{transform:translateX(3px)}
article.rec{transition:background .16s ease}
article.rec:hover{background:var(--paper-2)}
.rec-src a{transition:border-color .16s ease}
figure.plate{transition:box-shadow .22s ease,transform .22s ease}
a:hover > figure.plate,figure.plate:hover{
  box-shadow:0 18px 40px -26px rgba(11,31,58,.34)}

/* ------------------------------------------------------ the keyboard half */
/* Everything above happens on hover, which is the half that only works with a
   mouse. This is the other half, and it is one rule so it cannot drift. */
a:focus-visible,button:focus-visible,summary:focus-visible,
[tabindex]:focus-visible{outline:3px solid var(--brass);outline-offset:3px;
  border-radius:2px}
.field input:focus-visible,.field select:focus-visible,
.field textarea:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
a.ixrow:focus-visible,a.gcard:focus-visible,a.daydoor:focus-visible{
  outline-offset:6px;background:var(--paper-2)}

/* --------------------------------------------------------- the phone menu */
/* It opens rather than appearing. ::details-content is the modern way and
   degrades to an instant open where it is not understood. */
.mnav::details-content{block-size:0;overflow:clip;
  transition:block-size .22s cubic-bezier(.2,.8,.3,1),content-visibility .22s allow-discrete;
  content-visibility:hidden}
.mnav[open]::details-content{block-size:auto;content-visibility:visible}

/* ----------------------------------------------------------- the gestures */
/* Three, and only three. A line is ruled, a mark is written, a thing is set
   down. Anything that does not read as one of those does not get to move. */
@keyframes slidein{from{transform:translateY(9px)}to{transform:none}}

@media (prefers-reduced-motion:no-preference){
  /* ---- the front door, on load: the file is opened and worked on -------- */
  /* The docket is read first, then the heading holds still -- it is what the
     browser measures its own paint against and is never animated -- then the
     plate is set down, then the stamp lands on it. */
  .hero.front .eyebrow{animation:settle .5s .04s both}
  .hero.front figure.hart{animation:settle .62s .10s cubic-bezier(.2,.8,.3,1) both}

  /* ---- the divider tab is pushed into place along its rule -------------- */
  /* The rule itself is a border and cannot be drawn; the tab hanging off it
     is the thing that arrives, which is also what a divider card does. */
  .rulehead .side{transform-origin:left center;
    animation:cut .45s cubic-bezier(.2,.9,.3,1) both;
    animation-timeline:view();animation-range:entry 2% entry 26%}

  /* ---- a document checklist is worked down, a line at a time ------------ */
  /* Transform only: a list that fades from nothing is a list that is not
     there at all if the timeline never resolves, and this one is the
     documents an insurer will ask for. */
  ul.check li{animation:slidein .4s linear both;animation-timeline:view();
    animation-range:entry 5% entry 32%}

  /* ---- the library index arrives a row at a time ------------------------ */
  a.ixrow{animation:slidein .42s linear both;animation-timeline:view();
    animation-range:entry 3% entry 30%}

  /* ---- the numbered causes count themselves in -------------------------- */
  article.cause .cn span{animation:settle .45s linear both;
    animation-timeline:view();animation-range:entry 6% entry 34%}

  /* ---- a stamp is struck, never faded ----------------------------------- */
  .dontsign svg.struck{animation:land .5s cubic-bezier(.2,1.3,.4,1) both;
    animation-timeline:view();animation-range:entry 8% entry 40%}

  /* ---- and a plate on a claim page is set down, not faded in ------------ */
  .herogrid figure.plate{animation:settle .6s .08s cubic-bezier(.2,.8,.3,1) both}
}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .gcard,ol.steps li,.track,.result,.entry,article.cause{
      animation:settle linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 30%}

    /* the four standing terms get ticked as you reach them */
    .proof .tickbox.done g path{--len:52;stroke-dasharray:var(--len);
      animation:ink linear both;animation-timeline:view();
      animation-range:entry 18% entry 60%}

    /* the first day runs in the order it happens */
    ol.tl::before{transform-origin:left center;animation:cut linear both;
      animation-timeline:view();animation-range:entry 8% entry 46%}
    ol.tl li{animation:settle linear both;animation-timeline:view()}
    ol.tl li:nth-child(1){animation-range:entry 6% entry 28%}
    ol.tl li:nth-child(2){animation-range:entry 11% entry 33%}
    ol.tl li:nth-child(3){animation-range:entry 16% entry 38%}
    ol.tl li:nth-child(4){animation-range:entry 21% entry 43%}
    ol.tl li:nth-child(5){animation-range:entry 26% entry 48%}

    /* A schedule is written a row at a time. The rule arrives first and the
       row settles onto it, which is the order somebody actually fills one
       in, and it gives the page a reading direction that a grid of equal
       rectangles never had. */
    .sched > *{animation:slidein linear both;animation-timeline:view();
      animation-range:entry 4% entry 34%}
    .sched > * > h2,.sched > * > h3{animation:cut linear both;
      transform-origin:left center;animation-timeline:view();
      animation-range:entry 6% entry 30%}

    /* The file reference counts itself down the levels of the cabinet. */
    .opener > .docket span{animation:settle linear both;
      animation-timeline:view();animation-range:entry 2% entry 26%}
    .opener > .docket span:nth-child(2){animation-range:entry 5% entry 29%}
    .opener > .docket span:nth-child(3){animation-range:entry 8% entry 32%}
    .opener > .docket span:nth-child(4){animation-range:entry 11% entry 35%}


    /* A plate is set down on the desk, not faded in. */
    figure.plate{animation:settle linear both;animation-timeline:view();
      animation-range:entry 0% entry 26%}
  }
}
/* --------------------------------------------------------- the sticky masthead */
/* A claims library page is two thousand pixels of reference. The one thing a
   reader may suddenly need -- the way to report a loss -- should not be two
   thousand pixels behind them. The thin navy bar scrolls away; the masthead
   stays. Not on a phone, where the screen is the scarce thing. */
@media(min-width:900px){
  header.top{position:sticky;top:0;z-index:40}
  section.anchor{scroll-margin-top:92px}
  h1[id],h2[id],section[id]{scroll-margin-top:92px}
}
@supports (animation-timeline: scroll()){
  @media(min-width:900px) and (prefers-reduced-motion:no-preference){
    header.top{animation:lift linear both;animation-timeline:scroll(root);
      animation-range:0 90px}
  }
}
@keyframes lift{from{box-shadow:0 0 0 0 rgba(11,31,58,0)}
                to{box-shadow:0 10px 26px -20px rgba(11,31,58,.55)}}

/* what a row does when you point at it */
a.ixrow,.gcard,a.daydoor{transition:background .16s ease}
a.ixrow .arrow{display:inline-block;transition:transform .16s ease}
a.ixrow:hover .arrow{transform:translateX(5px)}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  svg.bar rect{transform:none!important}
  .marked .pen path,.proof .tickbox.done g path{stroke-dasharray:none!important;
    stroke-dashoffset:0!important}
  .hart .struck{transform:rotate(-6deg)!important;opacity:1!important}
  ol.tl::before{transform:none!important}
}

.lk{display:inline-flex;align-items:center;gap:calc(var(--w) * .68);
    text-decoration:none;line-height:1}
.lk .mk{flex:0 0 auto;display:block;
        width:calc(var(--w) * 1.95);height:calc(var(--w) * 1.95);
        /* The mark's ink runs y19.60 to y88.00 in its 100-box, centre 53.80,
           so it is pulled up 3.80% to put the centre of the INK on the centre
           of the text block. Measured by rasterising the mark, not read off
           the path. */
        transform:translateY(-3.8%);
        /* The box carries 9.5 units of empty space on its right before the ink
           begins; at 1.95w that is .185w, so a gap set at .68w would render at
           .87w. Cancel it and the number set is the distance seen. */
        margin-right:calc(var(--w) * -.185)}
.lk .txt{display:flex;flex-direction:column;align-items:stretch}
.lk .word{font-family:var(--lockup);font-weight:600;font-size:var(--w);
          line-height:1;letter-spacing:.13em;text-transform:uppercase;
          white-space:nowrap;color:var(--ink);
          /* Tracking leaves a letter-space after the final K that is invisible
             and still occupies .13em, dragging every centred lockup left. */
          margin-right:-.13em}
.lk .byline{display:flex;align-items:baseline;justify-content:flex-end;
            gap:calc(var(--w) * .24);width:100%;margin-top:calc(var(--w) * .30)}
.lk .by{font-family:var(--lockup);font-weight:600;
        font-size:calc(var(--w) * .6303);line-height:1;letter-spacing:.16em;
        text-transform:uppercase;color:var(--ink);white-space:nowrap;
        flex:0 0 auto;margin-right:-.16em}
.lk .rfs{display:block;flex:0 0 auto;
         height:calc(var(--w) * .56);width:calc(var(--w) * 1.376);
         background:url(/assets/brand/rfs.png) no-repeat left bottom/contain}
/* Literal, not var(--paper). The forest ground is fixed in both themes, but
   --paper flips to near-black in dark -- which would put a black wordmark on a
   dark green header. Anything painted on the fixed ground uses fixed colours. */
.lk .mk .rule{stroke:var(--brass)}
.lk .mk .tick{stroke:var(--ink)}
.lk .mk .heel{stroke:var(--clay)}
.lk.rev .word{color:#FFFFFF}
.lk.rev .mk .rule{stroke:#A9CFF5;opacity:.7}
.lk.rev .mk .tick{stroke:#FFFFFF}
.lk.rev .mk .heel{stroke:#F2888C}
.lk.rev .by{color:var(--brass-pale)}
.lk.rev .rfs{background-image:url(/assets/brand/rfs-white.png)}