/* Self-hosted OFL webfonts: Newsreader, IBM Plex Sans, IBM Plex Mono */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 400;
  font-display: swap;
  src: url(fonts/newsreader-0ea71c37.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 400;
  font-display: swap;
  src: url(fonts/newsreader-c6ccfc69.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 500;
  font-display: swap;
  src: url(fonts/newsreader-997f7492.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 500;
  font-display: swap;
  src: url(fonts/newsreader-4aa9bb70.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibmplexsans-effb1ea2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibmplexsans-f6667783.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibmplexsans-effb1ea2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibmplexsans-f6667783.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibmplexmono-7963a16e.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibmplexmono-bc87d8e0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibmplexmono-25040cb4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibmplexmono-a80b2cab.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Chrome for the standalone landing pages (currently the workshop page).
   These carry their own self-contained design under .mdm, which assumes a
   16px root, so this file deliberately does NOT scale the root with the
   viewport the way site.css does. */

:root{
  --ink: #1A191E;
  --ink-faint: #6E6A76;
  --rule: rgba(26,25,30,.14);
  --accent: #8A6C2C;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gutter: clamp(1.25rem, 5vw, 4rem);
}

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

html{ font-size: 16px; -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--serif);
}

img{ display: block; max-width: 100%; }
a{ color: inherit; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

.topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: 76rem;
  margin-inline: auto;
  padding: 1.5rem var(--gutter);
  border-bottom: 1px solid var(--rule);
}

.topbar__home{
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.125rem;
}
.topbar__home img{ width: 2rem; height: auto; }

.topbar__nav{
  display: flex;
  gap: 1.5rem;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.topbar__nav a{ text-decoration: none; }
.topbar__nav a:hover{ color: var(--accent); }

.sitefoot{
  display: flex;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  max-width: 76rem;
  margin-inline: auto;
  padding: 2rem var(--gutter) 3rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sitefoot a{ text-decoration: none; }
.sitefoot a:hover{ color: var(--accent); }

/* The page's own design paints everything inside .mdm; give the figures that
   sit outside .wrap a sane max width so full-bleed plates stay full-bleed. */
.mdm > figure{ margin: 0; }

/* Press quotes in the workshop page band. */
.mdm .pressq{ margin: 0 0 1.75rem; padding: 0 0 0 1.25rem; border-left: 2px solid var(--rule); }
.mdm .pressq p{
  margin: 0 0 .45rem;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem);
  line-height: 1.45;
  font-weight: 300;
  color: var(--ink);
}
.mdm .pressq cite{
  display: block;
  font-style: normal;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .08em;
  color: var(--ink-faint);
}
.mdm .pressq cite a{ color: var(--ink-faint); }
.mdm .pressq cite a:hover{ color: var(--accent); }

/* Fixed-ratio plates — these replace the striped placeholder blocks the page
   shipped with. The ratios are the ones the layout was designed around, and
   the images crop from the centre, so pick frames that survive that. */
.mdm .plate{ display: block; width: 100%; }
.mdm .plate img{ width: 100%; height: 100%; object-fit: cover; }
.mdm .plate--hero{ aspect-ratio: 21 / 9; }
.mdm .plate--wide{ aspect-ratio: 16 / 7; }
.mdm .plate--lead,
.mdm .plate--square{ aspect-ratio: 1 / 1; }

/* Very narrow screens: the 21:9 opening plate becomes a letterbox slot with
   nothing readable in it, so give it more height. */
@media (max-width: 40rem){
  .mdm .plate--hero{ aspect-ratio: 3 / 2; }
  .mdm .plate--wide{ aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   JOURNAL
   Long-form reading, so a real measure (~34rem) rather than the full 76rem
   the landing page uses.
   ========================================================================== */
.post{
  /* Centres and pads itself. The .wrap helper is scoped to .mdm in the
     workshop page's own stylesheet, so it does nothing here. */
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(3rem, 7vw, 5.5rem) var(--gutter) clamp(3rem, 6vw, 5rem);
}
.post .eyebrow{
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.5rem;
}
.post h1{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -.018em;
  text-wrap: balance;
  margin: 0 0 1.75rem;
}
.post h2{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem);
  line-height: 1.2;
  margin: 2.75rem 0 .85rem;
}
.post h3{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 2rem 0 .6rem;
}
.post p{
  margin: 0 0 1.15rem;
  font-size: 1.0625rem;
  line-height: 1.68;
  color: var(--ink);
}
.post .lede{
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  line-height: 1.45;
  font-weight: 300;
  margin-bottom: 1.75rem;
}
.post strong{ font-weight: 500; }
.post em{ font-style: italic; }
.post a{ color: var(--accent); text-decoration: underline; text-underline-offset: .18em; }
.post a:hover{ color: var(--ink); }

.post .related-note{
  margin-top: 2.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: .9375rem;
  color: var(--ink-muted);
}
.post__back{
  margin-top: 2.5rem;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Link list in the further-reading band. */
.mdm ul.lineated{ list-style: none; margin: .5rem 0 0; padding: 0; }
.mdm ul.lineated li{ padding-block: .55rem; border-bottom: 1px solid var(--rule); }
.mdm ul.lineated a{ text-decoration: none; color: var(--ink); }
.mdm ul.lineated a:hover{ color: var(--accent); text-decoration: underline; }

/* Photographs inside a journal article. Full width of the text measure, with
   a caption crediting the project the frame comes from. */
.post figure{
  margin: 2.5rem 0;
}
.post figure picture,
.post figure img{ width: 100%; height: auto; display: block; }
.post figcaption{
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .06em;
  color: var(--ink-faint);
  padding-top: .7rem;
  line-height: 1.6;
}
.post figcaption a{ color: var(--ink-faint); text-decoration: underline; text-underline-offset: .15em; }
.post figcaption a:hover{ color: var(--accent); }

.postlist{ list-style: none; margin: 2.5rem 0 0; padding: 0; }
.postlist__item{ padding-block: 1.75rem; border-top: 1px solid var(--rule); }
.postlist__item h2{ margin: 0 0 .5rem; font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); }
.postlist__item h2 a{ color: var(--ink); text-decoration: none; }
.postlist__item h2 a:hover{ color: var(--accent); }
.postlist__item p{ margin: 0; color: var(--ink-muted); font-size: .9375rem; line-height: 1.6; }

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}