/* ============================================================
   pokmanyiu.com — design system

   Deliberately low-key and text-first. No hero, no display type, no
   calls to action. Typography does the work.

   Ported from the mockups that were reviewed and signed off; the class
   names and structures here are the same ones those pages used, so the
   live site and the approved mockups render identically.

   The token values below are mirrored in theme.json so the block editor
   offers the same palette and type scale. If you change a colour here,
   change it there too.
   ============================================================ */

:root {
  /* palette — warm, paper-like, one restrained accent */
  --ink:        #12100E;
  --ink-soft:   #332F2C;
  --muted:      #6B6560;
  --muted-2:    #948D86;
  --paper:      #FBFAF8;
  --paper-2:    #F4F1EC;
  --hairline:   #E4E0DA;
  --accent:     #1E4B3C;

  /* latin + CJK stacks.
     CJK is system-only, because a self-hosted Traditional Chinese webfont
     costs 2-6MB per weight. The CJK stack is deliberately SANS: PingFang TC
     (macOS/iOS) and Microsoft JhengHei (Windows) are both humanist sans and
     render very similarly, whereas a serif stack would give macOS users
     Songti and Windows users a fallback — the same page looking like two
     different designs. */
  --serif: 'Fraunces', 'Iowan Old Style', Palatino, Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --cjk:        'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', 'Heiti TC', sans-serif;
  --body: var(--sans), var(--cjk);

  --wide:  1080px;
  --prose: 680px;
  --gut:   clamp(1.25rem, 5vw, 4rem);

  /* fluid type scale — nothing above ~2rem: this site does not shout */
  --t-micro: 0.688rem;
  --t-small: clamp(0.813rem, 0.78rem + 0.12vw, 0.875rem);
  --t-base:  clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  /* leads sit slightly BELOW body size: hierarchy comes from colour and
     measure, not from shouting. Applies to the homepage quote, the reading
     intro and the About bio alike. */
  --t-lead:  clamp(0.9375rem, 0.92rem + 0.1vw, 1rem);
  --t-h3:    clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
  --t-h2:    clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --t-h1:    clamp(1.625rem, 1.4rem + 1.1vw, 2.25rem);
  --t-name:  1.125rem;   /* the author's name: deliberately near body size */

  --rule: 1px solid var(--hairline);

  /* ---------- motion ----------
     One curve and two durations, used by everything that moves. Motion is
     meant to be felt rather than watched: nothing here travels more than a
     few pixels, and nothing uses a colour flash. A page where every element
     animates differently reads as busy; a page where everything moves on the
     same curve reads as considered. */
  --ease:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-1:  200ms;   /* small things: underlines, colour, opacity */
  --dur-2:  700ms;   /* large things: images */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.62;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* the card grids hide filtered-out items by attribute, and several of those
   items set their own display, which would otherwise win over [hidden] */
[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--serif), var(--cjk);
  font-weight: 400;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  letter-spacing: -0.015em;
  line-height: 1.18;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* screen-reader text, and the skip link */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 80;
  padding: 0.6rem 1rem; background: var(--ink); color: var(--paper);
  font-family: var(--sans); font-size: var(--t-small);
}
.skip:focus { left: 0; }

/* ============================================================
   MOTION

   The whole hover vocabulary, defined once. Three gestures and no more:
   a rule that draws in from the left, a small horizontal shift on a title,
   and a slow short zoom on an image.
   ============================================================ */

/* a rule that draws in from the left — used on links, titles and rows */
.draw { position: relative; }
.draw::after {
  content: '';
  position: absolute; left: 0; right: 100%; bottom: -0.15rem;
  height: 1px; background: currentColor;
  transition: right var(--dur-1) var(--ease);
}
.draw:hover::after,
.draw:focus-visible::after { right: 0; }

/* links in running prose: the underline thickens and drops a hair, rather
   than the colour changing. A colour-only hover is the tell of a template. */
.essay-body a,
.prose a {
  text-decoration: underline;
  text-decoration-color: var(--muted-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-1) var(--ease),
              text-decoration-thickness var(--dur-1) var(--ease),
              text-underline-offset var(--dur-1) var(--ease);
}
.essay-body a:hover,
.prose a:hover,
.essay-body a:focus-visible,
.prose a:focus-visible {
  text-decoration-color: var(--ink);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* somebody who has asked their system for less motion gets a still page */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .mosaic__cell:hover img,
  .crop:hover img { transform: none !important; }
}

/* ---------- layout ---------- */

.wrap        { max-width: var(--wide);  margin-inline: auto; padding-inline: var(--gut); }
.wrap--prose { max-width: var(--prose); margin-inline: auto; padding-inline: var(--gut); }
.section     { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.section--tight { padding-block: clamp(1.75rem, 3.5vw, 3rem); }
.rule { border-top: var(--rule); }

/* small letterspaced label — the only ornament on the page */
.label {
  position: relative;
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 1.25rem;
}
/* the hairline under a label extends to its full width on hover */
.label::after {
  content: '';
  position: absolute; left: 0; bottom: -0.4rem;
  height: 1px; width: 1.15rem; background: var(--hairline);
  transition: width var(--dur-1) var(--ease);
}
.label:hover::after { width: 100%; }

.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; }
.muted { color: var(--muted); }

/* CJK body text — Chinese needs materially more leading than latin.
   The Latin face must stay FIRST: leading with the CJK font makes the
   browser render U+2019 and friends from the Chinese face, where they are
   full-width, so every apostrophe gains a phantom space. Inter first, CJK
   as the fallback for glyphs Inter has none of. */
.cjk, .essay-body {
  font-family: var(--body);
  line-height: 1.9;
  letter-spacing: 0.01em;
  text-wrap: pretty;
}

/* ---------- buttons: kept only for the forms; no CTAs on this site ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 500;
  padding: 0.625rem 1.25rem;
  border-radius: 2px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}
.btn:hover { background: var(--accent); border-color: var(--accent); }

/* ============================================================
   HEADER — the name sits here at near-body size, not as a hero
   ============================================================ */

.site-head { border-bottom: var(--rule); }
.site-head__inner {
  max-width: var(--wide);
  margin-inline: auto;
  padding: 1.375rem var(--gut);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.wordmark {
  font-family: var(--serif), var(--cjk);
  font-size: var(--t-name);   /* deliberately not display-sized */
  letter-spacing: -0.005em;
}
.nav {
  display: flex;
  gap: 1.75rem;
  font-family: var(--sans);
  font-size: var(--t-small);
  color: var(--ink-soft);
}
.nav a { position: relative; padding-block: 0.15rem; }
.nav a::after {
  content: '';
  position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--ink);
  transition: right var(--dur-1) var(--ease);
}
.nav a:hover::after, .nav a[aria-current]::after { right: 0; }

/* ============================================================
   AUTHOR BLOCK — portrait beside the quote, nothing else.
   No role, no employer, no location, no buttons.
   ============================================================ */

.author {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  padding-block: clamp(2rem, 4vw, 3.25rem);
}
.author__photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-2);
  border-radius: 2px;
}
.author__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* zoom to the face; origin tuned to the subject's position in the frame */
  transform: scale(2.55);
  transform-origin: 20% 28%;
  filter: contrast(1.04) saturate(0.92);
}

/* ============================================================
   QUOTE — one quote, drawn at random from the quotes store on each
   page load. Managed from wp-admin, not by editing templates.
   ============================================================ */

.quote {
  font-family: var(--serif), var(--cjk);
  font-style: italic;
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 38ch;
  align-self: center;
}
.quote footer {
  font-family: var(--sans);
  font-style: normal;
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: 0.85rem;
}

/* ============================================================
   SQUARE CROP — a window cut out of a printed magazine page

   Thumbnails are the work itself rather than the magazine front. The whole
   page is scaled up inside a square frame and offset so the chosen window
   fills it; the theme supplies width/left/top as inline percentages.

   The desaturation is what makes a shelf of them look like one shelf: the
   pages were photographed under different light, and pulling the colour back
   leaves the magazine's red as the single thread running through them. Full
   colour returns on hover.
   ============================================================ */

.crop {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  background: var(--paper-2);
}
.crop img {
  position: absolute;
  height: auto;
  /* the global `img { max-width: 100% }` would clamp the scaled-up page */
  max-width: none;
  filter: saturate(0.62) contrast(1.05) brightness(1.02);
  transition: filter var(--dur-1) var(--ease), transform var(--dur-2) var(--ease);
}
.crop:hover img { filter: none; transform: scale(1.03); }
/* fallback for the articles with no printed pages: their featured image */
.crop .crop__whole {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* fills a card that is already square (the homepage latest grid) */
.crop--fill { position: absolute; inset: 0; }

/* ============================================================
   ESSAY LIST — the essay index
   ============================================================ */

.essays { border-top: var(--rule); }
.essay-row {
  position: relative;
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: baseline;
  padding-block: 1.125rem;
  border-bottom: var(--rule);
}
/* the row's own rule draws in beneath it, so the whole row responds */
.essay-row::after {
  content: '';
  position: absolute; left: 0; right: 100%; bottom: -1px;
  height: 1px; background: var(--ink);
  transition: right var(--dur-1) var(--ease);
}
.essay-row:hover::after, .essay-row:focus-within::after { right: 0; }
.essay-row__date {
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  white-space: nowrap;
}
.essay-row__t {
  font-family: var(--serif), var(--cjk);
  font-size: var(--t-h3);
  line-height: 1.3;
  transition: transform var(--dur-1) var(--ease);
}
.essay-row:hover .essay-row__t,
.essay-row:focus-within .essay-row__t { transform: translateX(3px); }

/* ============================================================
   SINGLE ESSAY
   ============================================================ */

.essay-head { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem); }
.essay-head__meta {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 1rem;
}
.essay-head h1 { font-size: var(--t-h1); }
.essay-body { font-size: var(--t-base); }
.essay-body p { margin-bottom: 1.5em; }
.essay-body h2 { font-size: var(--t-h2); margin: 2.5em 0 0.75em; }
.essay-body h3 { font-size: var(--t-h3); margin: 2em 0 0.6em; }
.essay-body ul, .essay-body ol { padding-left: 1.25rem; margin: 0 0 1.5em; }
.essay-body li { margin-bottom: 0.4em; }
.essay-body blockquote {
  margin: 1.75em 0;
  padding-left: 1.15rem;
  border-left: 2px solid var(--hairline);
  color: var(--ink-soft);
  font-family: var(--serif), var(--cjk);
  font-style: italic;
}
.essay-body img { margin: 2em 0; border-radius: 2px; }
.essay-body figcaption {
  font-family: var(--sans);
  font-size: var(--t-micro);
  color: var(--muted);
  margin-top: 0.6rem;
}
.essay-body hr { border: 0; border-top: var(--rule); margin: 2.5em 0; }
/* the image sets that replaced the old slideshow blocks */
.essay-body .wp-block-gallery { margin: 2em 0; }
.essay-body .wp-block-image { margin: 2em 0; }

.essay-nav {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.75rem;
  border-top: var(--rule);
  margin-top: 3rem;
  font-size: var(--t-small);
  color: var(--muted);
}

/* hashtags at the foot of an article */
.hashtags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  font-family: var(--sans);
  font-size: var(--t-small);
  color: var(--muted);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: var(--rule);
}
.hashtags a { color: var(--muted); }
.hashtags a:hover { color: var(--ink); }

/* ============================================================
   ARTICLE — title, cover, standfirst, the printed pages, body
   ============================================================ */

.article__standfirst {
  font-size: var(--t-lead);
  color: var(--ink-soft);
  line-height: 1.62;
  margin: 1.5rem 0 2rem;
}
.article__cover { margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem); }
.article__cover img {
  width: 100%;
  max-width: 420px;
  border-radius: 2px;
  background: var(--paper-2);
}
.article__cover figcaption,
.plate figcaption {
  font-family: var(--sans);
  font-size: var(--t-micro);
  color: var(--muted);
  margin-top: 0.6rem;
}

/* The scanned pages of the column.

   These get the full width of the page rather than the prose measure: they
   are the column as it was printed, and at 680px wide a newspaper page is
   too small to read. They are also the way in to the lightbox, so they lift
   slightly and offer a prompt on hover. */
.plates-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1.5rem;
  margin-bottom: 1rem;
}
.plates-head .label { margin: 0; }
.plates-head .label::after { display: none; }
.plates-hint { font-family: var(--sans); font-size: var(--t-small); color: var(--muted-2); }

.plates {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.plate { margin: 0; }
.plate__open {
  display: block;
  position: relative;
  cursor: zoom-in;
  border-radius: 2px;
}
.plate img {
  width: 100%;
  border-radius: 2px;
  border: 1px solid var(--hairline);
  background: var(--paper-2);
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.plate__open:hover img,
.plate__open:focus-visible img {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px -16px rgba(18,16,14,0.34);
}
/* the prompt sits over the page rather than under it, so the grid stays tight */
.plate__zoom {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: rgba(12,11,10,0.82);
  color: #fff;
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-1) var(--ease);
}
.plate__open:hover .plate__zoom,
.plate__open:focus-visible .plate__zoom { opacity: 1; }
@media (min-width: 780px) { .plates { grid-template-columns: 1fr 1fr; } }

/* ---------- lightbox ---------- */

/* The scanned page at reading size, on a dark ground. The overlay scrolls
   rather than the page, so a tall newspaper page can be read top to bottom
   without the column behind it moving. */
.lb {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(12,11,10,0.95);
  overflow: auto;
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
  text-align: center;
  -webkit-overflow-scrolling: touch;
}
.lb__img {
  width: auto;
  max-width: min(1020px, 100%);
  margin: 0 auto;
  border-radius: 2px;
  background: var(--paper-2);
}
.lb__cap {
  margin: 1.1rem auto 0;
  max-width: 56ch;
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.62);
}
.lb__btn {
  position: fixed;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 999px;
  background: rgba(12,11,10,0.6);
  color: #fff;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.lb__btn:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.5); }
.lb__close { top: 1rem; right: 1.1rem; }
.lb__prev { left: 0.9rem; top: 50%; margin-top: -1.25rem; }
.lb__next { right: 0.9rem; top: 50%; margin-top: -1.25rem; }
.lb__count {
  position: fixed;
  left: 1.1rem; top: 1.35rem;
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.55);
}

/* ============================================================
   PHOTO BANK — the picture insert of a biography

   A mosaic of small rounded tiles with the caption rising on hover. Square
   cells rather than natural shapes — the photographs arrive in mixed
   orientations and a mosaic only reads as one surface if the cells agree.
   Small and few, so the bank stays an aside to the biography rather than a
   gallery that dominates the page.
   ============================================================ */

.mosaic {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  gap: clamp(0.4rem, 0.8vw, 0.65rem);
}
.mosaic__cell {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: var(--paper-2);
  aspect-ratio: 1 / 1;
}
.mosaic__cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-2) var(--ease);
}
.mosaic__cell:hover img { transform: scale(1.03); }
.mosaic__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.6rem 0.55rem 0.5rem;
  background: linear-gradient(to top, rgba(8,7,6,0.92) 0%, rgba(8,7,6,0.55) 55%, rgba(8,7,6,0) 100%);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.6875rem;
  line-height: 1.35;
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease);
}
.mosaic__cell:hover .mosaic__cap,
.mosaic__cell:focus-visible .mosaic__cap { opacity: 1; }

/* the portrait beside the biography, as on the page this replaces */
.bio-top {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: start;
}
.bio-top__photo {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
  background: var(--paper-2);
}
.bio-top__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
/* the biography runs a step below body size: this is a low-key profile, and
   the portrait should be the largest thing in the block, not the prose */
.bio-top__text { font-size: var(--t-lead); }

/* ============================================================
   READING — book covers
   ============================================================ */

.theme-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: var(--rule);
}
.theme-head h3 { font-size: var(--t-h3); }
.theme-head span {
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  color: var(--muted-2);
}

.bgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: clamp(0.8rem, 1.5vw, 1.25rem);
}
.book {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 1px;
  background: var(--paper-2);
  aspect-ratio: 2 / 3;
  box-shadow: 0 1px 2px rgba(18,16,14,0.10), 0 6px 16px -9px rgba(18,16,14,0.22);
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.book img { width: 100%; height: 100%; object-fit: cover; }
.book:hover, .book:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(18,16,14,0.12), 0 14px 26px -10px rgba(18,16,14,0.30);
}
/* cover-only grid, but titled on hover and via alt text so it stays accessible */
.book__t {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.4rem 0.5rem 0.5rem;
  font-family: var(--sans);
  font-size: 0.625rem;
  line-height: 1.3;
  color: #fff;
  background: linear-gradient(to top, rgba(8,7,6,0.92), rgba(8,7,6,0));
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease);
}
.book:hover .book__t, .book:focus-visible .book__t { opacity: 1; }

/* a small dot marking a five-star book */
.book__badge {
  position: absolute;
  top: 0.42rem;
  left: 0.42rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #E8C468;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.7), 0 1px 3px rgba(0,0,0,0.35);
  z-index: 2;
}

/* the quote that opens the reading page */
.shelfquote {
  font-family: var(--serif), var(--cjk);
  font-style: italic;
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 1.9rem;
  max-width: 36ch;
}
.shelfquote footer {
  font-family: var(--sans);
  font-style: normal;
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: 0.7rem;
}

/* ============================================================
   FILTER — the chips stay folded away until asked for
   ============================================================ */

.filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-bottom: 1.15rem;
}
.filterbtn {
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.filterbtn:hover,
.filterbtn[aria-expanded="true"] { border-color: var(--ink); color: var(--ink); }
.filterbar__note { font-family: var(--sans); font-size: var(--t-small); color: var(--muted-2); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.chip {
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  background: transparent;
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip__n { color: var(--muted-2); margin-left: 0.35rem; }
.chip[aria-pressed="true"] .chip__n { color: rgba(251,250,248,0.6); }

/* ============================================================
   WRITING INDEX — three square crops to a row
   ============================================================ */

.wgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2vw, 1.5rem);
}
.wcard { display: block; }
.wcard .crop { margin-bottom: 0.85rem; }
.wcard__d {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.wcard__t {
  display: block;
  font-family: var(--serif), var(--cjk);
  font-size: var(--t-h3);
  line-height: 1.28;
  margin-top: 0.3rem;
  transition: transform var(--dur-1) var(--ease);
}
.wcard:hover .wcard__t,
.wcard:focus-visible .wcard__t { transform: translateX(3px); }

/* ============================================================
   LATEST — one large square and two smaller ones. Titles live
   inside the squares and fade in on hover, so the section reads
   as three images until you reach for one.

   The side squares are DERIVED from the main one, so the block is a clean
   rectangle at any width and the two smaller squares shrink or grow with the
   large one rather than hanging past its bottom edge.
   ============================================================ */

.latest {
  --gap: clamp(0.75rem, 1.4vw, 1rem);
  --main: clamp(200px, 26vw, 300px);
  --side: calc((var(--main) - var(--gap)) / 2);
  display: grid;
  grid-template-columns: var(--main) var(--side);
  grid-template-rows: var(--side) var(--side);
  gap: var(--gap);
}
.latest__main { position: relative; grid-row: 1 / span 2; }
.latest__main .latest__card { position: absolute; inset: 0; }
/* display:contents lifts the two side cards into the grid itself so they land
   in the right-hand rows rather than forming a column of their own */
.latest__side { display: contents; }

.latest__card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 2px;
  background: var(--paper-2);
  min-width: 0;
  min-height: 0;
}
.latest__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 1rem 0.9rem;
  background: linear-gradient(to top, rgba(8,7,6,0.94) 0%, rgba(8,7,6,0.5) 55%, rgba(8,7,6,0) 100%);
  color: #fff;
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease);
}
.latest__card:hover .latest__cap,
.latest__card:focus-visible .latest__cap { opacity: 1; }
.latest__cap .d {
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.66);
}
.latest__cap .t {
  font-family: var(--serif), var(--cjk);
  font-size: 0.9375rem;
  line-height: 1.25;
  margin-top: 0.3rem;
}
.latest__main .latest__cap .t { font-size: var(--t-h2); }

/* The side squares are small enough that a caption built for the main one
   runs past the top edge and gets clipped — which shows as half a date line
   floating over the image. Tighter padding, a smaller title, and a hard
   three-line limit keep it inside the square. */
.latest__side .latest__cap { padding: 1.4rem 0.55rem 0.55rem; }
.latest__side .latest__cap .d { font-size: 0.625rem; letter-spacing: 0.08em; }
.latest__side .latest__cap .t {
  font-size: 0.78125rem;
  line-height: 1.22;
  margin-top: 0.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.latest__more { margin-top: clamp(1.5rem, 3vw, 2rem); font-size: var(--t-small); }
.latest__more a { border-bottom: 1px solid var(--hairline); padding-bottom: 2px; transition: border-color var(--dur-1) var(--ease); }
.latest__more a:hover { border-color: var(--ink); }

/* ============================================================
   FOOTER — one quiet line.

   The two outward links first, then the two ways to write to him. Each
   field is named outright; the label states the offer and the placeholder
   shows what to type. The copyright is the last and smallest thing on the
   page and doubles as the way in to wp-admin: nothing says "log in", but the
   footer is on every screen.
   ============================================================ */

.site-foot {
  padding-block: clamp(2rem, 4vw, 3rem);
  font-family: var(--sans);
  font-size: var(--t-small);
  color: var(--muted);
}
.site-foot a:hover { color: var(--ink); }

.footbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem 3rem;
}
.footlinks {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.6rem;
  padding-top: 0.55rem;
}
.footlinks a { position: relative; }
.footlinks a::after {
  content: '';
  position: absolute; left: 0; right: 100%; bottom: -0.15rem;
  height: 1px; background: var(--ink);
  transition: right var(--dur-1) var(--ease);
}
.footlinks a:hover::after, .footlinks a:focus-visible::after { right: 0; }

.footools {
  display: grid;
  gap: 0.4rem;
  flex: 1 1 22rem;
  max-width: 30rem;
}
.tool {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.9rem;
}
.tool__lab {
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  white-space: nowrap;
}
.tool input,
.tool textarea {
  width: 100%;
  display: block;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-small);
  padding: 0.3rem 1.3rem 0.35rem 0;
  resize: none;
}
/* one line at rest, a few on focus: a speaking enquiry needs the room, but
   nobody should have to look at an empty message box on every page */
.tool textarea {
  height: 1.85rem;
  line-height: 1.4;
  overflow: hidden;
  transition: height var(--dur-1) var(--ease);
}
.tool textarea:focus { height: 6rem; overflow: auto; }
.tool input::placeholder,
.tool textarea::placeholder { color: var(--muted-2); }
.tool input:focus,
.tool textarea:focus { outline: none; border-bottom-color: var(--ink); }
/* The arrow is the submit button — the design has no other one. It stays out
   of the way, and out of the tab order, until there is something to send; a
   textarea swallows Return, so the message field cannot be sent without it. */
.tool__go {
  position: absolute;
  right: 0.1rem;
  top: 0.2rem;
  font: inherit;
  font-size: var(--t-small);
  line-height: 1.4;
  color: var(--muted-2);
  background: none;
  border: 0;
  padding: 0.1rem 0.15rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.tool input:not(:placeholder-shown) ~ .tool__go,
.tool textarea:not(:placeholder-shown) ~ .tool__go,
.tool__go:focus-visible { opacity: 1; visibility: visible; }
.tool__go:hover { color: var(--ink); }

/* the honeypot: a field only a script would fill, hidden from everyone else */
.tool__trap {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* The disclaimer runs the full width of the page rather than sitting in a
   narrow column that made the whole footer look pushed to the left. */
.disclaimer {
  margin: 2rem 0 0;
  font-family: var(--sans);
  font-size: var(--t-micro);
  line-height: 1.7;
  color: var(--muted-2);
}
.footmark {
  margin: 1.15rem 0 0;
  font-family: var(--sans);
  font-size: var(--t-micro);
  color: var(--muted-2);
}
.footmark a { color: var(--muted-2); }
.footmark a:hover { color: var(--ink); }

/* the confirmation line after one of the footer forms is sent */
.tool__done {
  font-family: var(--sans);
  font-size: var(--t-small);
  color: var(--accent);
  grid-column: 1 / -1;
}
.tool--invalid input,
.tool--invalid textarea { border-bottom-color: #9B2C2C; }
.tool__err {
  grid-column: 1 / -1;
  font-family: var(--sans);
  font-size: var(--t-micro);
  color: #9B2C2C;
}

/* ============================================================
   CONTACT — the standalone message page, kept for the rare case
   ============================================================ */

.form { display: grid; gap: 1.125rem; max-width: 34rem; }
.field { display: grid; gap: 0.4rem; }
.field label {
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.field input, .field textarea {
  font-family: var(--sans);
  font-size: var(--t-small);
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus, .field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: transparent;
}
/* Cloudflare Turnstile mounts here */
.turnstile-slot {
  border: 1px dashed var(--hairline);
  border-radius: 2px;
  padding: 0.85rem 1rem;
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  color: var(--muted-2);
  background: var(--paper-2);
}

/* ============================================================
   responsive
   ============================================================ */

@media (max-width: 820px) {
  .author { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }
  .wgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .bio-top { grid-template-columns: 1fr; }
  .bio-top__photo { max-width: 260px; }
}
@media (max-width: 620px) {
  .author { grid-template-columns: 1fr; }
  .author__photo { max-width: 210px; }
  .quote { margin-top: 0.5rem; }
  .essay-row { grid-template-columns: 1fr; gap: 0.3rem; }
  .bgrid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .site-head__inner { padding-block: 1.1rem; }
  .latest { grid-template-columns: 1fr; grid-template-rows: none; }
  .latest__main { grid-row: auto; aspect-ratio: 3 / 2; }
  .latest__side { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
  .latest__side .latest__card { aspect-ratio: 1 / 1; }
}
@media (max-width: 520px) { .wgrid { grid-template-columns: 1fr; } }