/* Self-hosted. No request leaves the visitor's browser for a third party,
   which removes the Google Fonts privacy question entirely. Variable fonts,
   subset to Latin. Licensed under the SIL Open Font Licence 1.1. */
@font-face{
  font-family:"Newsreader";
  src:url("fonts/newsreader.woff2") format("woff2-variations");
  font-weight:200 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("fonts/newsreader-italic.woff2") format("woff2-variations");
  font-weight:200 800;font-style:italic;font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo.woff2") format("woff2-variations");
  font-weight:100 900;font-style:normal;font-display:swap;
}

/* Peter Hain site styles
   Plain CSS, no build step. Tokens at the top; everything derives from them. */

:root{
  --paper:#e4e0d4;
  --paper-dim:#d5d0c0;
  --paper-deep:#c8c2b0;
  --ink:#15150f;
  --ink-soft:#55554a;
  --spot:#1b5e3f;
  --spot-off:#9c4a34;

  --display:"Newsreader",Georgia,serif;
  --util:"Archivo",Helvetica,Arial,sans-serif;
  --text:"Newsreader",Georgia,serif;

  --gut:clamp(1.25rem,4vw,4rem);
  --rule:1px solid rgba(21,21,15,.22);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--text);
  font-size:clamp(1.02rem,.55vw + .9rem,1.14rem);line-height:1.62;
  background-image:
    repeating-linear-gradient(0deg,rgba(21,21,15,.018) 0 1px,transparent 1px 3px),
    radial-gradient(circle at 15% 8%,rgba(21,21,15,.035),transparent 55%);
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-weight:400}

.skip{position:absolute;left:-9999px;background:var(--ink);color:var(--paper);padding:.7rem 1rem;font-family:var(--util);z-index:99}
.skip:focus{left:0;top:0}
:focus-visible{outline:3px solid var(--spot);outline-offset:3px}

.wrap{max-width:1120px;margin:0 auto;padding:0 var(--gut)}

/* ---------- masthead ---------- */
.masthead{border-bottom:2px solid var(--ink);position:sticky;top:0;z-index:40;
  background:var(--paper);transition:transform .22s ease}
/* on long pages the bar steps out of the way when you read down the page
   and comes back the moment you scroll up */
.js .masthead.is-hidden{transform:translateY(-100%)}
.js .masthead.is-pinned{box-shadow:0 6px 18px -14px rgba(21,21,15,.7)}
@media(prefers-reduced-motion:reduce){
  .masthead{transition:none}
  .js .masthead.is-hidden{transform:none}
}
.masthead .wrap{display:flex;align-items:center;gap:1rem;justify-content:space-between;
  padding-top:.6rem;padding-bottom:.6rem;flex-wrap:wrap}
.wordmark{font-family:var(--display);font-weight:600;font-size:1.24rem;
  letter-spacing:.005em;text-decoration:none;white-space:nowrap;flex:0 0 auto;
  color:var(--ink);position:relative;padding-bottom:.18rem}
.wordmark::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:2px;background:var(--spot);transform:scaleX(0);transform-origin:left;
  transition:transform .18s ease}
.wordmark:hover::after,.wordmark:focus-visible::after{transform:scaleX(1)}

/* the button only exists once JS has confirmed it can do anything */
.menu-btn{display:none}
.html-js .menu-btn,.js .menu-btn{
  display:flex;align-items:center;gap:.5rem;
  background:none;border:0;padding:.35rem 0;cursor:pointer;color:inherit;
  font-family:var(--util);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600}
.bars{position:relative;width:20px;height:2px;background:var(--ink);display:block;
  transition:background .15s}
.bars::before,.bars::after{content:"";position:absolute;left:0;width:20px;height:2px;
  background:var(--ink);transition:transform .18s ease}
.bars::before{top:-6px}
.bars::after{top:6px}
.menu-btn[aria-expanded="true"] .bars{background:transparent}
.menu-btn[aria-expanded="true"] .bars::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .bars::after{transform:translateY(-6px) rotate(-45deg)}

.nav{display:flex;gap:1.1rem;font-family:var(--util);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.14em;font-weight:500}
.nav a{text-decoration:none;white-space:nowrap;padding-bottom:2px;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--spot-off)}

/* mobile: hidden behind the button, opens as a full-width stack */
.js .nav{
  display:none;flex-basis:100%;flex-direction:column;gap:0;
  border-top:var(--rule);margin-top:.6rem}
.js .nav.is-open{display:flex}
.js .nav a{padding:.85rem 0;border-bottom:var(--rule);font-size:.8rem;letter-spacing:.16em}
.js .nav a:last-child{border-bottom:0}
.js .nav a:hover,.js .nav a[aria-current="page"]{border-bottom-color:var(--rule);color:var(--spot)}

@media(min-width:760px){
  .masthead .wrap{align-items:baseline;padding-top:.8rem;padding-bottom:.8rem;flex-wrap:nowrap}
  .wordmark{font-size:1.42rem}
  .js .menu-btn{display:none}
  .nav,.js .nav{display:flex;flex-direction:row;flex-basis:auto;gap:1.4rem;
    border-top:0;margin-top:0;font-size:.72rem;letter-spacing:.16em}
  .js .nav a,.js .nav a:last-child{padding:0 0 2px;
    border-bottom:2px solid transparent;font-size:.72rem}
  .js .nav a:hover,.js .nav a[aria-current="page"]{border-bottom-color:var(--spot-off);color:inherit}
}

.crumb{font-family:var(--util);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);padding-top:1.4rem}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--spot)}

/* ---------- shared type ---------- */
.eyebrow{font-family:var(--util);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--spot);font-weight:600;margin:0 0 1rem}
.page-title{font-family:var(--display);font-weight:500;
  font-size:clamp(2.15rem,5.6vw,3.7rem);line-height:1.02;
  letter-spacing:-.018em;margin:0}
.standfirst{font-size:clamp(1.06rem,1.1vw + .92rem,1.5rem);line-height:1.42;font-weight:300;max-width:38ch;margin:1.4rem 0 0}
.standfirst em{font-style:italic;color:var(--spot)}
.prose{max-width:62ch}
.prose p{margin:0 0 1.15rem}
.prose h3{font-family:var(--display);font-weight:600;font-size:1.22rem;
  letter-spacing:-.005em;margin:2.3rem 0 .8rem;color:var(--spot)}

.band{border-top:2px solid var(--ink);padding:clamp(2.5rem,5vw,4rem) 0}
.band-head{font-family:var(--util);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;margin:0 0 1.8rem;display:flex;gap:1rem;align-items:center}
.band-head::after{content:"";flex:1;height:1px;background:rgba(21,21,15,.28)}

.btn{display:inline-block;font-family:var(--util);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;text-decoration:none;background:var(--ink);color:var(--paper);padding:.85rem 1.5rem;border:2px solid var(--ink);transition:background .16s,color .16s,border-color .16s}
.btn:hover{background:var(--spot);border-color:var(--spot)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.8rem}

.status{display:inline-block;font-family:var(--util);font-weight:600;
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  background:var(--spot);color:var(--paper);padding:.42rem .8rem;
  margin-bottom:1.2rem}

/* ---------- jackets ---------- */
.jacket-wrap{margin:0;max-width:340px}
.jacket-wrap img{width:100%;height:auto;border:1px solid rgba(21,21,15,.25);box-shadow:0 18px 40px -22px rgba(21,21,15,.55)}
.jacket-wrap figcaption{font-family:var(--util);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:.7rem}

.ph{aspect-ratio:2/3;border:1px solid rgba(21,21,15,.35);background:linear-gradient(150deg,var(--paper-deep),var(--paper-dim));display:grid;place-content:center;text-align:center;padding:.75rem;font-family:var(--util);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);position:relative}
.ph::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(48deg,rgba(21,21,15,.05) 0 2px,transparent 2px 7px)}


/* ---------- quotes ---------- */
.quotes{margin:2rem 0 0;padding:0;list-style:none}
.quotes li{border-left:3px solid var(--spot-off);padding:.2rem 0 .2rem 1rem;margin:0 0 1.2rem}
.quotes q{font-style:italic;font-weight:300}
.quotes cite{display:block;font-style:normal;font-family:var(--util);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);margin-top:.45rem}

/* ---------- photo plates ---------- */
.plate{position:relative;aspect-ratio:4/3;background:linear-gradient(160deg,var(--paper-deep),var(--paper-dim) 55%,var(--paper-deep));border:1px solid rgba(21,21,15,.35);display:flex;align-items:flex-end;overflow:hidden}
@media(min-width:900px){.plate-tall{aspect-ratio:4/5}}
.plate::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(48deg,rgba(21,21,15,.05) 0 2px,transparent 2px 7px)}
.plate-note{position:relative;z-index:2;padding:1.1rem 1.2rem;font-family:var(--util);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;line-height:1.6;color:var(--ink-soft);border-top:1px solid rgba(21,21,15,.3);background:rgba(228,224,212,.82);width:100%}
.plate-note b{display:block;color:var(--ink);letter-spacing:.14em}

/* ---------- column grids with rules ---------- */
.cols{display:grid;gap:0;grid-template-columns:minmax(0,1fr)}
.cols > *{border-top:var(--rule);padding:1.4rem 1.4rem 1.7rem 0}
@media(min-width:700px){
  .cols-2,.cols-3,.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols > *{border-left:var(--rule);padding-left:1.4rem}
  .cols-2 > :nth-child(odd),.cols-3 > :nth-child(odd),.cols-4 > :nth-child(odd){border-left:0;padding-left:0}
}
@media(min-width:1050px){
  .cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cols-3 > *,.cols-4 > *{border-left:var(--rule);padding-left:1.4rem}
  .cols-3 > :nth-child(odd),.cols-4 > :nth-child(odd){border-left:var(--rule);padding-left:1.4rem}
  .cols-3 > :nth-child(3n+1),.cols-4 > :nth-child(4n+1){border-left:0;padding-left:0}
}
.cols h3{font-family:var(--display);font-weight:500;font-size:1.34rem;
  letter-spacing:-.008em;line-height:1.18;margin:0 0 .6rem}
.cols h4{font-family:var(--util);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--spot);margin:0 0 .55rem;font-weight:600}
.cols p{margin:0 0 .9rem;font-size:.97rem;line-height:1.52}
.cols p:last-child{margin-bottom:0}
.cols .more{font-family:var(--util);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--spot);font-weight:600}
a.card{text-decoration:none;display:block;transition:background .16s}
a.card:hover{background:rgba(27,94,63,.07)}

/* ---------- year sequence ---------- */
.seq-year{font-family:var(--display);font-weight:600;font-size:2.1rem;
  letter-spacing:-.015em;color:var(--spot);line-height:1;margin:0 0 .5rem}

/* ---------- writing list ---------- */
.entries{list-style:none;margin:0;padding:0}
.entries li{border-top:var(--rule);padding:1.15rem 0}
.entries li:last-child{border-bottom:var(--rule)}
.entries a{text-decoration:none;display:block}
.entries a:hover .etitle{color:var(--spot)}
.emeta{font-family:var(--util);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 .35rem}
.etitle{font-size:1.12rem;line-height:1.35;margin:0 0 .4rem}
.enote{margin:0;font-size:.95rem;line-height:1.5;color:var(--ink-soft);max-width:64ch}

/* ---------- spec table ---------- */
.spec{width:100%;border-collapse:collapse;font-family:var(--util);font-size:.82rem}
.spec th{text-align:left;font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.66rem;color:var(--ink-soft);padding:.65rem 1.5rem .65rem 0;vertical-align:top;width:34%}
.spec td{padding:.65rem 0;border-bottom:var(--rule)}
.spec tr:first-child td,.spec tr:first-child th{border-top:var(--rule)}

/* ---------- footer + banner ---------- */
.foot{border-top:2px solid var(--ink);padding:2.5rem 0 3.5rem;font-family:var(--util);font-size:.72rem;letter-spacing:.06em;color:var(--ink-soft)}
.foot .wrap{display:flex;gap:1.5rem;justify-content:space-between;flex-wrap:wrap}
.foot a{text-decoration:none}
.foot a:hover{color:var(--spot-off)}
.note{background:var(--ink);color:var(--paper);font-family:var(--util);font-size:.7rem;letter-spacing:.1em;padding:.6rem 0;text-transform:uppercase}
.todo{background:rgba(156,74,52,.12);border-left:3px solid var(--spot-off);padding:.9rem 1rem;font-family:var(--util);font-size:.78rem;line-height:1.5;margin:1.5rem 0}

.lic{font-family:var(--util);font-size:.66rem;letter-spacing:.05em;
  color:var(--ink-soft);margin:1.6rem 0 0;line-height:1.6}
.todo code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.92em;background:rgba(21,21,15,.07);padding:.1em .35em}

/* imported archive bodies */
.archive-body{max-width:64ch}
.archive-body p{margin:0 0 1.15rem}
.archive-body h3{font-family:var(--display);font-weight:600;font-size:1.18rem;
  margin:2.1rem 0 .75rem;color:var(--spot)}
.archive-body img{margin:1.5rem 0;border:1px solid rgba(21,21,15,.25)}
.archive-body blockquote{margin:1.5rem 0;padding-left:1.1rem;
  border-left:3px solid var(--spot-off);font-style:italic;font-weight:300}
.archive-body ul,.archive-body ol{padding-left:1.2rem;margin:0 0 1.15rem}
.archive-body li{margin-bottom:.45rem}
.archive-body a{color:var(--spot)}

.credit{font-family:var(--util);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 1.8rem;
  padding-bottom:1rem;border-bottom:var(--rule)}

.cols h3.subhead{font-family:var(--util);font-weight:600;font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--spot);margin:0 0 .55rem}

.cols h2{font-family:var(--display);font-weight:500;font-size:1.34rem;
  letter-spacing:-.008em;line-height:1.18;margin:0 0 .6rem}
.cols h2.subhead{font-family:var(--util);font-weight:600;font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--spot);margin:0 0 .55rem}
.prose h2{font-family:var(--display);font-weight:600;font-size:1.22rem;
  letter-spacing:-.005em;margin:2.3rem 0 .8rem;color:var(--spot)}
.archive-body h2{font-family:var(--display);font-weight:600;font-size:1.18rem;
  margin:2.1rem 0 .75rem;color:var(--spot)}

.jump{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.6rem 0 0}
.jump a{font-family:var(--util);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;border:1px solid rgba(21,21,15,.3);
  padding:.45rem .75rem;transition:background .15s,color .15s,border-color .15s}
.jump a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
[id]{scroll-margin-top:5rem}

.pager{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  align-items:center;margin-top:2.6rem;padding-top:1.4rem;border-top:var(--rule);
  font-family:var(--util);font-size:.7rem;letter-spacing:.1em}
.pager a{text-decoration:none;max-width:22ch}
.pager a:hover{color:var(--spot)}
.pager .pager-next{text-align:right;margin-left:auto}

.cap{font-family:var(--util);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:.6rem}

/* ---------- section colour ----------
   Each part of the site gets its own accent. The page head carries a tinted
   band and a solid rule; everything below stays on paper so the sections read
   as one site rather than several. */
:root{--accent:#1b5e3f;--accent-tint:#dcdfd4}

.page-head{
  background:var(--accent-tint);
  border-top:5px solid var(--accent);
  border-bottom:1px solid rgba(21,21,15,.16);
  padding:clamp(1.6rem,4vw,2.8rem) 0 clamp(1.6rem,4vw,2.6rem);
  margin-bottom:0;
}
.page-head .crumb{padding-top:0;margin-bottom:1rem}
.page-head .eyebrow{color:var(--accent)}
.page-head .standfirst em{color:var(--accent)}
.band-head::before{
  content:"";width:1.6rem;height:3px;background:var(--accent);
  display:inline-block;flex:0 0 auto
}
.status{background:var(--accent)}
.prose h2,.prose h3,.archive-body h2{color:var(--accent)}
.cols h2.subhead,.cols h3.subhead{color:var(--accent)}
.cols .more{color:var(--accent)}
a.card:hover{background:var(--accent-tint)}
.entries a:hover .etitle{color:var(--accent)}
.btn:hover{background:var(--accent);border-color:var(--accent)}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--accent)}
.wordmark::after{background:var(--accent)}
.quotes li{border-left-color:var(--accent)}
.seq-year{color:var(--accent)}

/* ---------- images: nothing may exceed its column ---------- */
img{max-width:100%;height:auto}

.portrait-wrap{margin:0;max-width:340px}
.portrait-wrap img{width:100%;height:auto;border:1px solid rgba(21,21,15,.25);
  box-shadow:0 14px 34px -22px rgba(21,21,15,.5)}
.portrait-wrap figcaption{font-family:var(--util);font-size:.64rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:.7rem}

/* grid tracks must never be forced open by their contents */
.hero-two,.who-grid,.sk-grid,.lead-book{min-width:0}
.hero-two > *,.who-grid > *,.sk-grid > *,.lead-book > *{min-width:0}
.cols > *,.shelf > *,.entries li{min-width:0}

/* long slugs and URLs inside imported archive pieces */
.archive-body{overflow-wrap:anywhere}
.archive-body a{overflow-wrap:anywhere}
.entries a{overflow-wrap:anywhere}

/* below the two-column breakpoint the figures centre rather than stretch */
@media(max-width:859px){
  .jacket-wrap,.portrait-wrap{max-width:min(300px,72vw);margin-left:auto;margin-right:auto}
  .jacket-wrap figcaption,.portrait-wrap figcaption{text-align:center}
}

/* photograph plates: equal boxes, images cropped to fit rather than stretched */
.plates{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:620px){.plates{grid-template-columns:repeat(3,minmax(0,1fr))}}
.plates figure{margin:0;min-width:0}
.plates img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 22%;
  border:1px solid rgba(21,21,15,.3);background:var(--paper-dim)}


/* ---------- book shelf ----------
   Jackets arrive at every shape imaginable, so each sits in a fixed box and is
   contained rather than cropped. Nothing is cut off and every cell is the same
   height, which is what stops the rows breaking up as the window narrows. */
.shelf{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:1.6rem 1.4rem;
  align-items:start;
}
@media(min-width:520px){
  .shelf{grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
}
.shelf > a{
  text-decoration:none;display:flex;flex-direction:column;min-width:0;
}
.shelf .cover{
  width:100%;aspect-ratio:2/3;
  background:var(--paper-dim);
  border:1px solid rgba(21,21,15,.28);
  display:flex;align-items:center;justify-content:center;
  padding:.4rem;overflow:hidden;
  transition:border-color .16s;
}
.shelf .cover img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block;
  box-shadow:0 6px 16px -12px rgba(21,21,15,.8);
}
.shelf > a:hover .cover{border-color:var(--accent)}
.shelf h3.shelf-title{
  font-family:var(--util);font-weight:600;font-size:.79rem;line-height:1.3;
  margin:.7rem 0 .2rem;letter-spacing:0;text-transform:none;color:var(--ink);
}
.shelf p{
  font-family:var(--util);font-size:.64rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-soft);margin:0;
}

.entries li.unlinked{color:var(--ink)}
.entries li.unlinked .etitle{color:var(--ink)}

/* covers montage: the recent jackets are vivid, so let them run together */
.montage{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  margin:2.2rem 0 2.4rem;max-width:62ch;align-items:end}
.montage a{display:block;min-width:0;transition:transform .18s ease}
.montage a:hover{transform:translateY(-4px)}
.montage img{width:100%;height:auto;border:1px solid rgba(21,21,15,.28);
  box-shadow:0 10px 22px -16px rgba(21,21,15,.85)}
@media(prefers-reduced-motion:reduce){.montage a:hover{transform:none}}