:root{
  --bone:#F5EFE6;
  --ink:#201914;
  --red:#FF0000;
  --rule:#A8A49C;
  --hair:rgba(32,25,20,.16);
  --dim:rgba(32,25,20,.62);
  --tint:#EBE3D6;
  --serif:'DM Serif Display',Georgia,'Times New Roman',serif;
  --sans:'DM Sans','Helvetica Neue',Helvetica,sans-serif;
  --mono:'Space Mono',ui-monospace,Menlo,Consolas,monospace;
  --measure:34rem;
  --gutter:clamp(1rem,5vw,2.5rem);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bone);color:var(--ink);
  font-family:var(--sans);font-size:1.1875rem;line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--red);color:var(--bone)}
img{max-width:100%;height:auto}

a{color:var(--ink);text-decoration:none;border-bottom:2px solid rgba(255,0,0,.45)}
a:hover{border-bottom-color:var(--red)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.wrap{max-width:64rem;margin:0 auto;padding-inline:var(--gutter)}
.measure{max-width:var(--measure);margin-inline:auto}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--bone);padding:.7rem 1rem;border:0;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
}
.skip:focus{left:.5rem;top:.5rem}

#progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--red);z-index:60}

/* ---- masthead -------------------------------------------------------- */
.mast{padding:clamp(2rem,5vw,3rem) 0 clamp(1.1rem,3vw,1.5rem)}
.mast a{display:block;border:0;max-width:30rem;margin:0 auto}
.mast a:hover{border:0}
.mast img,.mast svg{display:block;width:100%;height:auto}

nav.lpp-nav{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
nav.lpp-nav ul{
  list-style:none;margin:0;padding:.8rem 0;
  display:flex;flex-wrap:wrap;gap:.6rem 1.1rem;justify-content:center;
}
nav.lpp-nav a{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  border:0;color:var(--ink);transition:color .14s ease-out;
}
nav.lpp-nav a:hover{border:0;color:var(--red)}
/* brackets live in the markup permanently and are only recoloured, so nothing
   shifts sideways between states */
nav.lpp-nav a::before,nav.lpp-nav a::after{color:transparent;transition:color .14s ease-out}
nav.lpp-nav a::before{content:"[";margin-right:.42em}
nav.lpp-nav a::after{content:"]";margin-left:.42em}
nav.lpp-nav a:hover::before,nav.lpp-nav a:hover::after,
nav.lpp-nav a:focus-visible::before,nav.lpp-nav a:focus-visible::after{color:var(--red)}
/* current page: ink text, red brackets only. Red type here plus red brackets
   plus red kickers down the page is too much red. */
nav.lpp-nav a[aria-current]{color:var(--ink);font-weight:700}
nav.lpp-nav a[aria-current]::before,nav.lpp-nav a[aria-current]::after{color:var(--red)}
@media (prefers-reduced-motion:reduce){
  nav.lpp-nav a,nav.lpp-nav a::before,nav.lpp-nav a::after{transition:none}
}

/* ---- shared type ------------------------------------------------------ */
.kicker{
  display:flex;align-items:center;gap:.75rem;margin:0;
  font-family:var(--mono);font-weight:700;font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--red);
}
.kicker::after{content:"";flex:1;height:1px;background:rgba(255,0,0,.35)}
.k-plain{
  font-family:var(--mono);font-weight:700;font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red);display:block;margin-bottom:.5rem;
}
.meta{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);margin:.7rem 0 0;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;
}
.sq{width:4px;height:4px;background:var(--red);flex:none}

/* ---- feed ------------------------------------------------------------- */
.feed{padding-block:clamp(2rem,5vw,3rem) clamp(3rem,8vw,5rem)}
.storylist{list-style:none;margin:0 auto;padding:0;max-width:var(--measure)}
.storylist li{border-top:1px solid var(--hair)}
.storylist li:last-child{border-bottom:1px solid var(--hair)}
.storylist a{display:block;border:0;padding-block:1.6rem}
.storylist a:hover{border:0}
.frow{display:flex;gap:1.15rem;align-items:flex-start}
.ftxt{flex:1;min-width:0}
.fthumb{width:120px;height:120px;flex:none;display:block;object-fit:cover;background:var(--tint)}
/* animated background-size rather than a border, because a border cannot
   animate its width, and this underlines each wrapped line separately */
.st{
  font-family:var(--serif);font-size:1.42rem;line-height:1.24;text-wrap:pretty;
  display:inline;padding-bottom:2px;
  background-image:linear-gradient(var(--red),var(--red));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;
  transition:background-size .16s ease-out;
}
.storylist a:hover .st,.storylist a:focus-visible .st{background-size:100% 2px}
@media (prefers-reduced-motion:reduce){.st{transition:none}}
@media (max-width:30rem){
  .frow{gap:.85rem}
  .fthumb{width:84px;height:84px}
}
.feed-end{
  max-width:var(--measure);margin:clamp(2.5rem,6vw,3.5rem) auto 0;padding-top:1.4rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);
}
.lpp-pagination{
  max-width:var(--measure);margin:clamp(2rem,5vw,3rem) auto 0;padding-top:1.4rem;
  border-top:1px solid var(--hair);
  display:flex;justify-content:space-between;gap:1rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
}

/* ---- article ---------------------------------------------------------- */
.story{padding-block:clamp(2.25rem,6vw,3.75rem) 0}
.story h1{
  font-family:var(--serif);font-weight:400;line-height:1.03;letter-spacing:-.014em;
  font-size:clamp(2.35rem,6.4vw,4rem);margin:1.05rem 0 0;text-wrap:balance;
}
.byline{
  display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);margin-top:1.6rem;padding-top:.9rem;border-top:1px solid var(--hair);
}
.byline .who{color:var(--ink);font-weight:700}

/* Provisionally box */
.short{margin:clamp(1.75rem,4vw,2.5rem) auto 0;border:1px solid var(--hair);padding:clamp(1.1rem,3vw,1.6rem)}
.short .lab{
  font-family:var(--mono);font-weight:700;font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--red);margin:0 0 .9rem;
}
.short ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.short li{display:flex;gap:.75rem;align-items:flex-start;font-size:1.0625rem;line-height:1.5}
.short li::before{content:"";width:6px;height:6px;background:var(--red);flex:none;margin-top:.62em}

/* lead image */
.lead{margin:clamp(2rem,5vw,3rem) auto 0}
.lead .ph{
  aspect-ratio:16/9;max-width:100%;background:var(--tint);border:1px solid var(--hair);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);
}
.lead .ph img{display:block;width:100%;height:100%;object-fit:cover}
.lead figcaption{
  font-family:var(--mono);font-size:.64rem;line-height:1.65;letter-spacing:.04em;
  color:var(--dim);margin-top:.75rem;
}

/* ---- source chip ------------------------------------------------------ */
.src{
  display:flex;width:100%;align-items:stretch;margin:1.7rem 0;overflow:hidden;
  border:1px solid var(--hair);border-radius:5px;background:none;color:var(--ink);
}
a.src:hover{border-color:var(--rule);background:rgba(32,25,20,.03)}
.src .thumb{width:50px;height:50px;flex:none;display:block;object-fit:cover;background:#DCD2C0}
.src span.thumb{display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--dim)}
.src .body{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 .7rem;gap:.12rem}
.src .dom,.src .ttl{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.src .dom{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.src .dom b{color:var(--red);font-weight:700}
.src .ttl{font-family:var(--sans);font-size:.8rem;line-height:1.3}
.src .arw{flex:none;display:flex;align-items:center;padding-right:.6rem;color:var(--rule);font-size:.75rem}
a.src:hover .arw{color:var(--red)}
/* gone: still on the page, greyed and unlinked. The dead citation is part of
   the record, including the part where it died. */
.src.is-gone{opacity:.62;border-style:dashed}
.src.is-gone .dom b{color:var(--dim)}

/* ---- prose ------------------------------------------------------------ */
.prose{margin-top:clamp(2rem,5vw,2.75rem)}
.prose > .entry-content{display:contents}
.prose p{margin:0 0 1.3em}
.prose > p:first-of-type::first-letter,
.prose > .entry-content > p:first-of-type::first-letter{
  font-family:var(--serif);color:var(--red);
  float:left;font-size:4.6em;line-height:.74;margin:-.06em .085em 0 0;
}
/* scoped to .prose so feed headlines never inherit the brackets */
.prose h2{font-family:var(--serif);font-weight:400;font-size:1.72rem;line-height:1.18;margin:2.7rem 0 .6rem}
.prose h2::before{content:"[ ";color:var(--red)}
.prose h2::after{content:" ]";color:var(--red)}
.prose h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;line-height:1.2;margin:2.2rem 0 .5rem}
.prose ul,.prose ol{padding-left:1.1rem;margin:0 0 1.3em}
.prose li{margin-bottom:.45em}
.prose figure{margin:2rem 0}
.prose figcaption{
  font-family:var(--mono);font-size:.64rem;line-height:1.65;letter-spacing:.04em;
  color:var(--dim);margin-top:.75rem;
}

blockquote{margin:2.2rem 0}
blockquote::before{content:"";display:block;width:3rem;height:4px;background:var(--red);margin-bottom:.85rem}
blockquote p{margin:0;font-family:var(--serif);line-height:1.24;text-wrap:pretty;font-size:clamp(1.18rem,2.6vw,1.45rem)}
blockquote cite{
  display:block;font-family:var(--mono);font-style:normal;font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-top:.8rem;
}

/* ---- END mark --------------------------------------------------------- */
.endmark{
  display:flex;align-items:center;justify-content:center;gap:.12em;
  font-family:var(--serif);color:var(--red);font-size:2em;line-height:1;
  margin-block:clamp(4.5rem,11vw,7.5rem);margin-inline:0;
}
.endmark .brk{font-size:1.6em;line-height:.86;transform:translateY(-.03em)}
.endmark .stack{display:flex;flex-direction:column;align-items:stretch}
/* the negative margin cancels the trailing letter-space so the box ends at the D */
.endmark .e{display:block;color:var(--ink);letter-spacing:.14em;line-height:1;margin-right:-.14em}
/* justified so it stretches to exactly END's width; must stay the narrower of
   the two or it becomes the width-setter and the alignment inverts */
.endmark .fn{
  display:block;color:var(--ink);font-family:var(--mono);font-weight:700;font-size:.42em;
  letter-spacing:.1em;line-height:1;margin-top:-.4em;
  text-align:justify;text-align-last:justify;
}

/* ---- static pages ----------------------------------------------------- */
.page{padding-block:clamp(2.25rem,6vw,3.5rem) clamp(4rem,9vw,6rem)}
.page h1{
  font-family:var(--serif);font-weight:400;font-size:clamp(2rem,5vw,2.9rem);
  line-height:1.06;letter-spacing:-.012em;margin:.6rem 0 0;
}
.page h2{font-family:var(--serif);font-weight:400;font-size:1.4rem;line-height:1.2;margin:2.3rem 0 .5rem}
.page p{margin:0 0 1.25em}
.page p:last-child{margin-bottom:0}
.page .intro{font-size:1.24rem;line-height:1.5;color:var(--dim);margin-top:1.1rem;text-wrap:pretty}
.page ul{padding-left:1.1rem;margin:0 0 1.25em}
.page li{margin-bottom:.5em}
.page .note{
  margin-top:2.5rem;padding-top:1.1rem;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:.64rem;line-height:1.8;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim);
}
.bigmail{
  font-family:var(--serif);font-size:clamp(1.4rem,4vw,2rem);line-height:1.2;
  margin:.4rem 0 0;word-break:break-word;
}
.bigmail a{border-bottom-width:3px}

/* ---- 404 -------------------------------------------------------------- */
.nf{padding-block:clamp(4rem,12vw,8rem);text-align:center}
/* single line on purpose: the stacked END FOR NOW is the article sign-off and
   should stay unique to it */
.nf .mark{
  display:flex;align-items:center;justify-content:center;gap:.2em;
  font-family:var(--serif);color:var(--red);font-size:2.4em;line-height:1;margin:0;
}
.nf .mark .brk{font-size:1.25em;line-height:.86;transform:translateY(-.02em)}
.nf .mark .e{color:var(--ink);letter-spacing:.14em;margin-right:-.14em}
.nf p{max-width:26rem;margin:2rem auto 0;color:var(--dim);text-wrap:pretty}

/* ---- footer ----------------------------------------------------------- */
footer.lpp-footer{border-top:3px solid var(--red);padding-block:2.25rem 3rem;margin-top:auto}
footer.lpp-footer .fmast{display:block;border:0;max-width:14rem;margin-bottom:1.25rem}
footer.lpp-footer .fmast:hover{border:0}
footer.lpp-footer img,footer.lpp-footer svg{display:block;width:100%;height:auto}
.flinks{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin:0 0 1.1rem;padding:0;list-style:none}
.flinks a{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  border-bottom:2px solid transparent;
}
.flinks a:hover{border-bottom-color:var(--red)}
.fine{
  font-family:var(--mono);font-size:.63rem;line-height:1.9;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);margin:0;
}
.fine .spot{color:var(--ink);font-weight:700}
.fine .spot::before{content:"";display:inline-block;width:.6em;height:.6em;background:var(--red);margin-right:.5em}

body{display:flex;flex-direction:column;min-height:100vh}
main{flex:1}

/* ---- editor-inserted core blocks, kept inside the measure ------------- */
.prose > *{max-width:100%}
.alignwide,.alignfull{max-width:100%}
.wp-block-image img{display:block}

/* ---- overrides for core block defaults -------------------------------- */
/* core/quote ships a left border and its own padding, which fights the red
   bar the design calls for */
.prose blockquote.wp-block-quote{
  border-left:0;border:0;padding:0;
  margin:2.2rem 0 !important;
}
.prose blockquote.wp-block-quote > *:last-child{margin-bottom:0}
.prose blockquote cite{margin-top:.8rem}
/* is-layout-flow zeroes the top margin of the element after a block, which
   closes the gap between a pull quote and the paragraph following it */
.prose .entry-content > * + p:not(.endmark){margin-top:1.3em}
.prose .entry-content > blockquote + p{margin-top:2.2rem}
.prose .entry-content > .short + p{margin-top:clamp(2rem,5vw,2.75rem)}
.wp-block-quote.is-style-plain{border:0}

/* The END mark's symmetric space is load-bearing in the design, and two rules
   were eating it: core's is-layout-flow sets margin-block-end:0 on every child,
   and a generic "* + p" rule was applying 1.3em of the endmark's own 2em font
   size as a top margin. Both are beaten deliberately here.
   .prose becomes a flow-root so the bottom margin stays inside the article
   rather than collapsing out through main and landing against the footer. */
.prose{display:flow-root}
.prose .entry-content > p.endmark,
.prose > p.endmark,
p.endmark{
  margin-block:clamp(4.5rem,11vw,7.5rem) !important;
  margin-inline:0 !important;
}

/* Core adds a 24px block gap between top-level sections. Every section here
   sets its own padding, so that gap only ever shows up as an extra 24px
   between the article and the footer rule, which breaks the END mark's
   symmetry. */
.wp-site-blocks > *,
.wp-site-blocks > * + *{margin-block-start:0;margin-block-end:0}
.wp-block-template-part{margin-block:0}