@charset "UTF-8";

/* ==========================================================================
   Packaging Insiders — main stylesheet

   The visual language comes from packaging dielines. Two kinds of line do all
   the structural work on this site:

     cut rule     1px solid   var(--ink)      separates one thing from another
     crease rule  1px dashed  var(--crease)   divides the inside of one thing

   If you are adding something new, reach for one of those two before you reach
   for a shadow or a background color.

   Contents
     01  Fonts
     02  Tokens
     03  Reset and base
     04  Layout helpers
     05  Header and navigation
     06  Search form
     07  Buttons and pills
     08  Hero
     09  Sections and grid
     10  Card
     11  Latest list
     12  Resources
     13  Contributors
     14  Newsletter
     15  Page head and archives
     16  Single post
     17  Table of contents
     18  Article typography
     19  Author box
     20  Comments
     21  Pagination
     22  Footer
     23  Responsive
     24  Motion and print
   ========================================================================== */


/* 01  Fonts
   Self hosted. If the woff2 files are not in assets/fonts yet, the fallback
   stacks in the tokens below keep the site readable in the meantime.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/* 02  Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Color
     The page is unbleached recycled board, not bleached paper. Panels sit on
     a lighter liner tone. Text is the warm near-black that black ink actually
     becomes once it soaks into uncoated fiber. One spot ink, a muted moss,
     and nothing else. */
  --substrate: #dad7cd;   /* the board the whole site is printed on */
  --liner: #eae7de;       /* lighter liner, for panels and input fields */
  --board: #b8b1a0;       /* soft cut rules */
  --crease: #aea694;      /* dashed crease rules */
  --ink: #23201a;
  --ink-soft: #4a452f;
  --ink-faint: #625c4a;
  --spot: #4a5b33;        /* the single spot ink */
  --spot-deep: #37431f;

  /* Type */
  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Newsreader", Georgia, "Times New Roman", serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.1875rem;
  --fs-lg: 1.4375rem;
  --fs-xl: 1.875rem;
  --fs-hero: clamp(1.875rem, 3.3vw, 2.625rem);

  /* Space */
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.5rem;
  --s5: 4rem;
  --s6: 6rem;

  /* Layout */
  --wrap: 1140px;
  --wrap-narrow: 760px;
  --gutter: clamp(20px, 5vw, 40px);

  /* Lines */
  --cut: 1px solid var(--ink);
  --cut-soft: 1px solid var(--board);
  --frame: 1px solid var(--ink);     /* image frame, same rule as the logo box */
  --crease-rule: 1px dashed var(--crease);
}


/* 03  Reset and base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

/* The grain is a single inline SVG noise tile, about 300 bytes, held at very
   low opacity. It is what stops a flat fill from reading as bleached paper.
   Keep the opacity where it is: any higher and small text starts to fight it. */
body {
  margin: 0;
  background-color: var(--substrate);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.07'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
}

p { margin: 0 0 var(--s2); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--spot);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
a:hover { color: var(--spot-deep); }

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol { margin: 0; padding: 0; }

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--spot);
  outline-offset: 3px;
}

::selection {
  background: var(--spot);
  color: var(--liner);
}


/* 04  Layout helpers
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: calc(var(--wrap-narrow) + var(--gutter) * 2); }

.site-main {
  display: block;
  padding-bottom: var(--s6);
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--liner);
  padding: 12px 18px;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
  color: var(--liner);
}

.empty {
  padding: var(--s5) 0;
  color: var(--ink-soft);
  font-size: var(--fs-md);
}


/* 05  Header and navigation
   -------------------------------------------------------------------------- */

.site-header {
  border-bottom: var(--cut);
  background: var(--substrate);
  background-image: inherit;
  position: sticky;
  top: 0;
  z-index: 40;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 66px;
}

.site-header__brand { margin-right: auto; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
}

/* The brand mark is the logo mark itself: a carton dieline seen flat. It
   strokes in currentColor so it follows the link color without a second rule.
   No CSS border here, because the mark already draws its own cut rule. */
.brand__mark {
  width: 24px;
  height: 24px;
  display: block;
  flex: none;
}
.brand__mark svg {
  width: 24px;
  height: 24px;
  display: block;
  fill: currentColor;
  stroke: currentColor;
}

.custom-logo-link { display: inline-block; }
.custom-logo { max-height: 40px; width: auto; }

.site-nav { display: flex; align-items: center; gap: var(--s3); }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--s3);
  list-style: none;
}

.site-nav__list a {
  color: var(--ink);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
.site-nav__list a:hover,
.site-nav__list .current-menu-item > a {
  border-bottom-color: var(--ink);
  color: var(--ink);
}

.site-nav__empty {
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  margin: 0;
}

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  background: none;
  border: var(--cut);
  padding: 0;
  place-items: center;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 16px;
  height: 1px;
  background: var(--ink);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle__bars::before { top: -5px; }
.nav-toggle__bars::after { top: 5px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }


/* 06  Search form
   -------------------------------------------------------------------------- */

.search-form {
  display: flex;
  align-items: stretch;
  border: var(--cut-soft);
  background: var(--liner);
}

.search-form__field {
  border: 0;
  background: none;
  padding: 8px 12px;
  font-size: var(--fs-sm);
  width: 190px;
  min-width: 0;
}
.search-form__field::placeholder { color: var(--ink-faint); }
.search-form__field:focus { outline: none; }
.search-form:focus-within { border-color: var(--ink); }

.search-form__submit {
  border: 0;
  border-left: var(--cut-soft);
  background: none;
  padding: 0 12px;
  display: grid;
  place-items: center;
}

/* Magnifier drawn in CSS so the theme ships no icon font and no SVG sprite. */
.search-form__icon {
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--ink-soft);
  border-radius: 50%;
  position: relative;
  display: block;
}
.search-form__icon::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -3px;
  width: 6px;
  height: 1.5px;
  background: var(--ink-soft);
  transform: rotate(45deg);
}
.search-form__submit:hover .search-form__icon,
.search-form__submit:hover .search-form__icon::after {
  border-color: var(--ink);
  background-color: var(--ink);
}
.search-form__submit:hover .search-form__icon { background: none; }

.page-head__form .search-form__field { width: 100%; }
.page-head__form { max-width: 420px; margin-top: var(--s3); }


/* 07  Buttons and pills
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  background: var(--ink);
  color: var(--liner);
  border: 1px solid var(--ink);
  padding: 11px 22px;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn:hover {
  background: transparent;
  color: var(--ink);
}

.pill {
  display: inline-block;
  border: var(--cut-soft);
  padding: 3px 10px;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  line-height: 1.5;
}
a.pill:hover {
  border-color: var(--spot);
  color: var(--spot);
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pill--lg {
  padding: 8px 14px;
  font-size: var(--fs-sm);
  color: var(--ink);
}

.pill__count {
  color: var(--ink-faint);
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
}

.pill--tag { margin: 0 6px 6px 0; }


/* 08  Hero
   The lead article, drawn as a dieline panel: solid cut border, two corner
   marks, and a dashed crease between the text and the image.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  border: var(--cut);
  padding: clamp(24px, 3.4vw, 44px);
  margin: var(--s5) 0 var(--s6);
}

.hero__mark {
  position: absolute;
  width: 9px;
  height: 9px;
  border: var(--cut);
  background: var(--substrate);
}
.hero__mark--tl { top: -5px; left: -5px; }
.hero__mark--br { bottom: -5px; right: -5px; }

.hero__inner {
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: clamp(20px, 2.6vw, 36px);
  align-items: stretch;
}

/* The text column is its own container, which is what lets the headline size
   itself against this column rather than against the whole viewport. A title
   sized in vw goes wrong the moment the column and the screen disagree. */
.hero__text {
  min-width: 0;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* The stamp and the category sit on one row. They need a wrapper because
   .hero__text is a flex column, and in a flex column every child takes its own
   line no matter what display value it carries. */
.hero__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--s3);
}

/* Stamped, the way a grade or content mark is stamped onto board. This is the
   one place on the homepage that carries a hard border around type. */
.hero__kicker {
  display: inline-block;
  border: 1px solid var(--ink);
  padding: 4px 10px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

/* The pill sits next to the stamp, so their heights have to agree. */
.hero__tags .pill {
  padding: 4px 10px;
  line-height: 1.5;
}

.hero__title {
  font-size: clamp(1.5rem, 10.5cqw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: var(--s2) 0 var(--s2);
}

/* Browsers without container query support fall back to the old viewport
   scale, which still behaves sensibly. */
@supports not (container-type: inline-size) {
  .hero__title { font-size: var(--fs-hero); }
}
.hero__title a {
  color: var(--ink);
  text-decoration: none;
}
.hero__title a:hover { color: var(--spot-deep); }

.hero__excerpt {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: var(--s3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero__media {
  min-width: 0;
  padding-left: clamp(20px, 2.6vw, 36px);
  border-left: var(--crease-rule);
  display: flex;
  align-items: center;
}
.hero__media a { display: block; width: 100%; }
.hero__media img { width: 100%; }

.hero__media-blank,
.card__media-blank {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--liner);
  border: var(--cut-soft);
}


/* 09  Sections and grid
   -------------------------------------------------------------------------- */

.section { margin-bottom: var(--s6); }
.section--tight { margin-bottom: var(--s5); }

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding-bottom: 12px;
  border-bottom: var(--cut);
  margin-bottom: var(--s4);
  position: relative;
}

/* A short run of the spot ink at the start of every section rule. It is the
   only place color appears without being asked for, and it costs one line. */
.section__head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 56px;
  border-bottom: 2px solid var(--spot);
}

.section__title {
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}

.section__link {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--board);
  white-space: nowrap;
}
.section__link:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.grid { display: grid; gap: var(--s4) var(--s3); }

.grid--cards {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}


/* 10  Card
   -------------------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.card__media {
  display: block;
  margin-bottom: 14px;
}
.card__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.card__media-blank { border: 0; }

.card__body { display: flex; flex-direction: column; gap: 10px; }

.card__title {
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}
.card__title a {
  color: var(--ink);
  text-decoration: none;
}
.card__title a:hover { color: var(--spot-deep); }

.card__excerpt {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}


/* Byline, shared by the hero, cards and single posts. */
.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 14px;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}
.meta__item { position: relative; }
.meta__item + .meta__item { padding-left: 15px; }
.meta__item + .meta__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  border-top: 1px solid var(--crease);
}
.meta a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--board);
}
.meta a:hover { color: var(--ink); border-bottom-color: var(--ink); }


/* 10a  Image frame
   Every uploaded image is framed the way the logo is: the same solid cut rule,
   with the register dot sitting on the top left corner.

   The dot is a pseudo element on the wrapper, not on the image, because an img
   is a replaced element and cannot carry ::before at all. Anywhere the theme
   wraps an image in a link or a figure, the dot appears. A bare img with no
   wrapper still gets the frame, just not the dot.
   -------------------------------------------------------------------------- */

.hero__media a,
.card__media,
.postlist__media,
.latest__thumb,
.post__figure,
.entry-content figure,
.entry-content .wp-block-image {
  position: relative;
  display: block;
}

.hero__media a::before,
.card__media::before,
.postlist__media::before,
.latest__thumb::before,
.post__figure::before,
.entry-content figure::before,
.entry-content .wp-block-image::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  width: 8px;
  height: 8px;
  background: var(--ink);
  z-index: 1;
}

/* A figure with no image in it should not sprout a dot on its own. */
.entry-content figure:not(:has(img))::before { content: none; }

.hero__media img,
.card__media img,
.postlist__media img,
.latest__thumb img,
.post__figure img,
.entry-content figure img,
.entry-content > img,
.hero__media-blank,
.card__media-blank,
.postlist__media-blank,
.latest__thumb-blank {
  border: var(--frame);
}

/* Avatars stay round and unframed. A dieline frame on a face looks wrong. */
.author-box__avatar img,
.people__avatar img,
.comments__list .comment-author img {
  border: 0;
}


/* 10b  Post list
   Image left, then title, a little of the text, then date and category.
   The same thin-rule byline used everywhere else carries the last line.
   -------------------------------------------------------------------------- */

.postlist { list-style: none; }

.postlist__row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--s3);
  align-items: start;
  padding: var(--s3) 0;
  border-bottom: var(--crease-rule);
}
.postlist__row:first-child { padding-top: 0; }
.postlist__row:last-child { border-bottom: 0; padding-bottom: 0; }

.postlist__media { display: block; }
.postlist__media img,
.postlist__media-blank {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.postlist__media-blank { background: var(--liner); }

.postlist__body { min-width: 0; }

.postlist__title {
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.28;
  margin: 0 0 6px;
}
.postlist__title a { color: var(--ink); text-decoration: none; }
.postlist__title a:hover { color: var(--spot-deep); }

.postlist__excerpt {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 0 0 10px;
}


/* 11  Latest list
   -------------------------------------------------------------------------- */

.latest { list-style: none; }

.latest__row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 120px;
  gap: var(--s3);
  align-items: center;
  padding: var(--s3) 0;
  border-bottom: var(--crease-rule);
}
.latest__row:first-child { padding-top: 0; }
.latest__row:last-child { border-bottom: 0; padding-bottom: 0; }

.latest__date {
  display: block;
  text-align: center;
  border: var(--cut-soft);
  padding: 6px 0;
  font-variant-numeric: tabular-nums;
}
.latest__day {
  display: block;
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1;
}
.latest__month {
  display: block;
  font-size: 0.6875rem;
  color: var(--ink-faint);
  margin-top: 2px;
}

.latest__title {
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 5px;
}
.latest__title a { color: var(--ink); text-decoration: none; }
.latest__title a:hover { color: var(--spot-deep); }

.latest__meta {
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  margin: 0;
}

.latest__thumb { display: block; }
.latest__thumb img,
.latest__thumb-blank {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.latest__thumb-blank { background: var(--liner); }


/* 12  Resources
   -------------------------------------------------------------------------- */

.resources { list-style: none; }

.resources__row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--s3);
  align-items: start;
  padding: var(--s3) 0;
  border-bottom: var(--crease-rule);
}
.resources__row:first-child { padding-top: 0; }
.resources__row:last-child { border-bottom: 0; padding-bottom: 0; }

.resources__glyph {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: var(--cut);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1;
}

.resources__title {
  font-size: var(--fs-base);
  font-weight: 600;
  margin: 0 0 4px;
}
.resources__title a { color: var(--ink); text-decoration: none; }
.resources__title a:hover { color: var(--spot-deep); }

.resources__desc {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  margin: 0;
}


/* 13  Contributors
   -------------------------------------------------------------------------- */

.people {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--s3);
}

.people__link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  border: var(--cut-soft);
  padding: 12px;
}
.people__link:hover { border-color: var(--ink); }

.people__avatar img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.people__text { display: block; min-width: 0; }

.people__name {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}

.people__count {
  display: block;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}


/* 14  Newsletter
   -------------------------------------------------------------------------- */

/* No fill here on purpose. On a real recycled pack you would not flood a
   panel with ink just to mark it off. The cut border and corner marks do it. */
.newsletter {
  position: relative;
  border: var(--cut);
  padding: clamp(24px, 3.4vw, 44px);
  margin-bottom: var(--s5);
}

.newsletter__mark {
  position: absolute;
  width: 9px;
  height: 9px;
  border: var(--cut);
  background: var(--substrate);
}
.newsletter__mark--tl { top: -5px; left: -5px; }
.newsletter__mark--br { bottom: -5px; right: -5px; }

.newsletter__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s4);
  align-items: center;
}

.newsletter__title {
  font-size: var(--fs-lg);
  margin: 0 0 8px;
}

.newsletter__desc {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0;
}

.newsletter__form { display: flex; }

.newsletter__input {
  border: var(--cut);
  border-right: 0;
  background: var(--liner);
  padding: 10px 14px;
  font-size: var(--fs-sm);
  width: 240px;
  min-width: 0;
}
.newsletter__input:focus { outline: none; }
.newsletter__form:focus-within { outline: 2px solid var(--spot); outline-offset: 2px; }

.newsletter__setup {
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  max-width: 30ch;
  margin: 0;
}


/* 15  Page head and archives
   -------------------------------------------------------------------------- */

.page-head {
  padding: var(--s5) 0 var(--s4);
  border-bottom: var(--cut);
  margin-bottom: var(--s5);
}

.page-head__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-faint);
  margin: 0 0 10px;
}

.page-head__title {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 22ch;
}

.page-head__desc {
  font-family: var(--font-body);
  color: var(--ink-soft);
  max-width: 60ch;
  margin-top: var(--s2);
}


/* 16  Single post
   -------------------------------------------------------------------------- */

.post__header { padding: var(--s5) 0 var(--s3); max-width: 760px; }

.crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  margin-bottom: var(--s3);
}
.crumbs a {
  color: var(--ink-soft);
  text-decoration: none;
}
.crumbs a:hover { color: var(--ink); }
.crumbs__sep {
  width: 10px;
  border-top: 1px solid var(--crease);
}

.post__title {
  font-size: clamp(1.875rem, 4vw, 2.875rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0 0 var(--s3);
  max-width: 20ch;
}

.post__standfirst {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 58ch;
  margin-bottom: var(--s3);
}

.post__figure {
  margin: var(--s5) auto 0;
}
.post__figure img { width: 100%; }
.post__figure figcaption {
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  padding-top: 10px;
  border-top: var(--crease-rule);
  margin-top: 10px;
}

/* One grid holds the header, the contents rail, the article and the author box.
   On narrow screens it is a single stacked column. On wide screens the rail
   moves into the right margin and everything else keeps the same left edge. */
.post__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--s3);
  align-items: start;
}

.post__content { min-width: 0; }

.post__foot { min-width: 0; padding-top: var(--s5); }

/* When there is a lead image, the header does not also need a big top gap. */
.post__figure + .post__layout .post__header { padding-top: var(--s4); }

.post__tags {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: var(--crease-rule);
}


/* 17  Table of contents
   -------------------------------------------------------------------------- */

.toc {
  border: var(--cut-soft);
  padding: 16px 18px;
}

.toc__heading {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-faint);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: var(--crease-rule);
}

.toc__list { list-style: none; }

.toc__item { margin-bottom: 9px; }
.toc__item:last-child { margin-bottom: 0; }
.toc__item--h3 { padding-left: 14px; }

.toc__link {
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--ink-soft);
  text-decoration: none;
  display: block;
  border-left: 2px solid transparent;
  padding-left: 10px;
  margin-left: -12px;
}
.toc__link:hover { color: var(--ink); }
.toc__link.is-current {
  color: var(--ink);
  font-weight: 600;
  border-left-color: var(--spot);
}


/* 18  Article typography
   This block styles whatever the block editor outputs inside a post or page.
   -------------------------------------------------------------------------- */

.entry-content {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.72;
  color: var(--ink);
  max-width: 68ch;
}

.entry-content > * { margin-bottom: var(--s3); }
.entry-content > *:last-child { margin-bottom: 0; }

.entry-content h2 {
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-top: var(--s5);
  margin-bottom: var(--s2);
  padding-top: var(--s2);
  border-top: var(--cut-soft);
}

.entry-content h3 {
  font-size: var(--fs-lg);
  font-weight: 600;
  margin-top: var(--s4);
  margin-bottom: var(--s2);
}

.entry-content h4 {
  font-size: var(--fs-md);
  font-weight: 600;
  margin-top: var(--s3);
  margin-bottom: var(--s1);
}

.entry-content ul,
.entry-content ol { padding-left: 1.35em; }
.entry-content li { margin-bottom: 0.5em; }
.entry-content ul { list-style: square; }

.entry-content blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: 4px 0 4px var(--s3);
  border-left: 2px solid var(--ink);
  font-size: var(--fs-lg);
  line-height: 1.5;
}
.entry-content blockquote cite {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-style: normal;
  color: var(--ink-faint);
  margin-top: var(--s2);
}

.entry-content figure { margin-left: 0; margin-right: 0; }
.entry-content > img { display: block; }

.entry-content figcaption {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  padding-top: 8px;
  margin-top: 8px;
  border-top: var(--crease-rule);
}

/* Tables carry a full grid rather than open rules, and nothing inside a table
   is ever centred. Centred cells make a column impossible to scan down. */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  border: var(--cut);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin: var(--s3) 0 var(--s4);
}
.entry-content th,
.entry-content td {
  text-align: left;
  padding: 11px 14px;
  border: var(--cut-soft);
  vertical-align: top;
}
.entry-content th {
  font-weight: 600;
  color: var(--ink);
  background: var(--liner);
  border-bottom: var(--cut);
}
.entry-content thead th { border-bottom: var(--cut); }

.entry-content code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--liner);
  padding: 2px 5px;
}
.entry-content pre {
  background: var(--liner);
  border-left: 2px solid var(--ink);
  padding: var(--s3);
  overflow-x: auto;
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.entry-content pre code { background: none; padding: 0; }

.entry-content hr {
  border: 0;
  border-top: var(--crease-rule);
  margin: var(--s5) 0;
}

/* Wide blocks stay inside the article column. The post grid is left aligned
   with a rail beside it, so a real breakout would run off the right edge. */
.entry-content .alignwide,
.entry-content .alignfull {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.entry-content .wp-block-image,
.entry-content .wp-block-embed { margin-bottom: var(--s4); }

.page-links {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  padding-top: var(--s3);
  border-top: var(--crease-rule);
  margin-top: var(--s4);
}


/* 18b  Page components
   Styles for the static pages: about, contact, resources, editorial standards,
   privacy and disclaimer. These live here rather than inline in the page so
   that the HTML you paste into WordPress stays short and easy to edit.
   -------------------------------------------------------------------------- */

/* Opening paragraph of a page. One moss rule down the side and nothing else. */
.entry-content .pi-lead {
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--ink);
  padding-left: var(--s3);
  border-left: 3px solid var(--spot);
  margin-bottom: var(--s4);
}

/* Bordered panel. Add pi-box--fill for the lighter liner background. */
.entry-content .pi-box {
  border: var(--cut);
  padding: var(--s3) var(--s4);
  margin: var(--s4) 0;
  font-size: var(--fs-base);
  line-height: 1.66;
}
.entry-content .pi-box--fill {
  border-color: var(--board);
  background: var(--liner);
}
.entry-content .pi-box > p { margin-bottom: 14px; }
.entry-content .pi-box > p:last-child { margin-bottom: 0; }

.entry-content .pi-label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--spot);
  margin-bottom: 14px;
}

/* Rows separated by crease rules. Used for lists of short statements where a
   bullet would look fussy. */
.entry-content .pi-rows > p {
  padding: 14px 0;
  border-bottom: var(--crease-rule);
  margin: 0;
}
.entry-content .pi-rows > p:first-of-type { padding-top: 0; }
.entry-content .pi-rows > p:last-child { border-bottom: 0; padding-bottom: 0; }

/* Two column table where the left side names a thing and the right explains it. */
.entry-content .pi-def {
  width: 100%;
  border-collapse: collapse;
  border: var(--cut);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin: var(--s3) 0 var(--s4);
}
.entry-content .pi-def th {
  width: 34%;
  text-align: left;
  font-weight: 600;
  color: var(--ink);
  background: var(--liner);
  padding: 14px 16px;
  border: var(--cut-soft);
  vertical-align: top;
}
.entry-content .pi-def td {
  text-align: left;
  padding: 14px 16px;
  border: var(--cut-soft);
  vertical-align: top;
  color: var(--ink-soft);
}

/* The email address on the contact page. Set large enough to be the obvious
   thing on that page, because it is the only action the page asks for. */
.entry-content .pi-email {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  word-break: break-word;
}
.entry-content .pi-email a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--spot);
}
.entry-content .pi-email a:hover { color: var(--spot-deep); }

/* A line the author has to replace before the page goes live. Deliberately
   loud, so that it cannot be published by accident. */
.entry-content .pi-todo {
  border-left: 3px solid var(--spot-deep);
  background: var(--liner);
  padding: 14px 18px;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--ink);
  margin: var(--s3) 0;
}

@media (max-width: 620px) {
  .entry-content .pi-box { padding: var(--s3); }
  .entry-content .pi-def th {
    width: auto;
    display: block;
    border: 0;
    border-bottom: var(--crease-rule);
    padding-bottom: 8px;
  }
  .entry-content .pi-def td {
    display: block;
    border: 0;
    border-bottom: var(--cut-soft);
  }
  .entry-content .pi-def tr:last-child td { border-bottom: 0; }
}


/* 19  Author box
   -------------------------------------------------------------------------- */

.author-box {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  border: var(--cut);
  padding: var(--s3);
  margin: 0;
}

.author-box__avatar img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.author-box__label {
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  margin: 0 0 4px;
}

.author-box__name {
  font-size: var(--fs-md);
  margin: 0 0 8px;
}
.author-box__name a { color: var(--ink); text-decoration: none; }
.author-box__name a:hover { color: var(--spot-deep); }

.author-box__bio {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  max-width: 58ch;
  margin: 0;
}


/* 20  Comments
   -------------------------------------------------------------------------- */

.comments {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: var(--cut);
}

.comments__title {
  font-size: var(--fs-lg);
  margin-bottom: var(--s4);
}

.comments__list,
.comments__list .children {
  list-style: none;
  padding: 0;
}
.comments__list .children {
  padding-left: var(--s3);
  border-left: var(--crease-rule);
  margin-top: var(--s3);
}

.comments__list li.comment { margin-bottom: var(--s4); }

.comments__list .comment-body {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.65;
}

.comments__list .comment-author {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: 6px;
}
.comments__list .comment-author img { border-radius: 50%; }
.comments__list .comment-author .says { display: none; }

.comments__list .comment-metadata,
.comments__list .reply {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
}
.comments__list .comment-metadata { color: var(--ink-faint); margin-bottom: 10px; }
.comments__list .comment-metadata a { color: var(--ink-faint); text-decoration: none; }

.comments__closed {
  font-size: var(--fs-sm);
  color: var(--ink-faint);
}

.comment-respond { margin-top: var(--s5); }

.comment-reply-title {
  font-size: var(--fs-lg);
  margin-bottom: var(--s3);
}

.comment-form label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 5px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  border: var(--cut-soft);
  background: var(--liner);
  padding: 10px 12px;
  font-size: var(--fs-sm);
}
.comment-form input:focus,
.comment-form textarea:focus { border-color: var(--ink); outline: none; }

.comment-form p { margin-bottom: var(--s3); }
.comment-form .form-submit { margin-bottom: 0; }


/* 21  Pagination
   -------------------------------------------------------------------------- */

.pagination {
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: var(--cut);
}

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.pagination .page-numbers {
  display: inline-block;
  min-width: 38px;
  text-align: center;
  padding: 7px 10px;
  border: var(--cut-soft);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  text-decoration: none;
}
.pagination a.page-numbers:hover { border-color: var(--ink); color: var(--ink); }
.pagination .page-numbers.current {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--liner);
}
.pagination .page-numbers.dots { border: 0; }


/* 22  Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: var(--cut);
  padding: var(--s4) 0 var(--s4);
}

.site-footer__widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s4);
  padding-bottom: var(--s4);
  border-bottom: var(--crease-rule);
  margin-bottom: var(--s3);
}

.footer-widget__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: 10px;
}
.footer-widget ul { list-style: none; }
.footer-widget li { margin-bottom: 6px; font-size: var(--fs-sm); }
.footer-widget a { color: var(--ink-soft); text-decoration: none; }
.footer-widget a:hover { color: var(--ink); }

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  align-items: center;
  justify-content: space-between;
}

.site-footer__credit {
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.site-footer__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  list-style: none;
}
.site-footer__list a {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  text-decoration: none;
}
.site-footer__list a:hover { color: var(--ink); }


/* 23  Responsive
   Only three breakpoints. The grids use auto-fit and minmax, so most of the
   layout adapts on its own without a media query telling it to.
   -------------------------------------------------------------------------- */

/* Table of contents becomes a sticky rail once there is room beside the text.
   The article column stays where it was, so nothing shifts sideways when the
   rail appears. Everything on the left edge stays aligned with the image above. */
@media (min-width: 1000px) {
  .post__layout {
    grid-template-columns: minmax(0, 760px) 220px;
    justify-content: start;
    column-gap: var(--s5);
    row-gap: 0;
  }

  .post__content { padding-top: var(--s2); }

  .post__header  { grid-column: 1; grid-row: 1; }
  .post__content { grid-column: 1; grid-row: 2; }
  .post__foot    { grid-column: 1; grid-row: 3; }

  .post__rail {
    grid-column: 2;
    grid-row: 2;
    position: sticky;
    top: 90px;
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
}

@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__text { order: 2; }
  .hero__media {
    order: 1;
    display: block;
    padding-left: 0;
    padding-bottom: var(--s3);
    border-left: 0;
    border-bottom: var(--crease-rule);
  }
  .hero__text { container-type: normal; }
  .hero__title { font-size: clamp(1.75rem, 6vw, 2.375rem); }
  .hero__title { max-width: none; }

  .newsletter__inner { grid-template-columns: 1fr; gap: var(--s3); }

  .nav-toggle { display: grid; }

  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--substrate);
    background-image: inherit;
    border-bottom: var(--cut);
    padding: var(--s2) var(--gutter) var(--s3);
  }
  .site-nav.is-open { display: flex; }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .site-nav__list li { border-bottom: var(--crease-rule); }
  .site-nav__list a {
    display: block;
    padding: 12px 0;
    font-size: var(--fs-base);
    border-bottom: 0;
  }

  .site-nav__search { margin-top: var(--s2); }
  .site-nav__search .search-form__field { width: 100%; }
}

@media (max-width: 620px) {
  .postlist__row { grid-template-columns: 96px minmax(0, 1fr); gap: var(--s2); }
  .postlist__title { font-size: var(--fs-base); }
  .postlist__excerpt { display: none; }

  .latest__row { grid-template-columns: 46px minmax(0, 1fr); }
  .latest__thumb { display: none; }

  .newsletter__form { flex-direction: column; gap: 10px; }
  .newsletter__input { width: 100%; border-right: var(--cut); }
  .newsletter__form .btn { width: 100%; }

  .author-box { flex-direction: column; }

  .post__title,
  .page-head__title { max-width: none; }
}


/* 24  Motion and print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .site-header,
  .site-footer,
  .toc,
  .related,
  .newsletter,
  .comments,
  .pagination { display: none; }

  body { font-size: 11pt; }
  .post__layout { grid-template-columns: 1fr; }
  .entry-content { max-width: none; }
  a { text-decoration: none; color: inherit; }
}