/*
Theme Name: Franky and Me
Theme URI: https://frankyand.me
Author: Gabriel Ellis with Claude Code
Description: An editorial block theme for a filmmaking lab notebook. A magazine grid — a left-set text measure, figures that break out to the full field, marginalia that hang into the right-hand space — set on a dark ground. Ported from the MovieStudio report house style.
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.0
Version: 1.1.9
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: frankyandme
Tags: blog, one-column, block-patterns, full-site-editing, editor-style, custom-colors, custom-menu
*/

/* ==========================================================================
   Everything here is a component the tokens in theme.json cannot express:
   the vertical rhythm, the breakout devices, the marginalia float, the
   drop cap, and the data-table treatment. Colour and type come from
   theme.json presets and are referenced, never redeclared.

   The design commits to a dark ground. That is a choice, not an omission:
   the subject is a screening room. Every colour is painted explicitly so
   nothing borrows a value from the browser.
   ========================================================================== */

:root{
  --fm-serif: var(--wp--preset--font-family--serif);
  --fm-sans:  var(--wp--preset--font-family--sans);
  --fm-mono:  var(--wp--preset--font-family--mono);
  --fm-void:   var(--wp--preset--color--void);
  --fm-panel:  var(--wp--preset--color--panel);
  --fm-panel2: var(--wp--preset--color--panel-2);
  --fm-rule:   var(--wp--preset--color--rule);
  --fm-rule2:  var(--wp--preset--color--rule-2);
  --fm-ink:    var(--wp--preset--color--ink);
  --fm-mute:   var(--wp--preset--color--mute);
  --fm-dim:    var(--wp--preset--color--dim);
  --fm-ice:    var(--wp--preset--color--ice);
  --fm-signal: var(--wp--preset--color--signal);
  --fm-good:   var(--wp--preset--color--good);
  --fm-bad:    var(--wp--preset--color--bad);
}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{ background:var(--fm-void); color:var(--fm-ink); overflow-x:hidden }
*{ box-sizing:border-box }

/* --------------------------------------------------------- vertical rhythm */
/* The artifact sets space with top margins so a section head can carry its own
   air without doubling against the block before it. blockGap handles the
   ordinary paragraph step; these rules handle the deliberate jumps. */

.entry-content > h2,
.entry-content > .wp-block-heading.is-h2{ margin-top:104px }
.entry-content > h3,
.entry-content > .wp-block-heading.is-h3{ margin-top:56px; max-width:26ch }
.entry-content > h4{ margin-top:40px }
.entry-content > h2 + *{ margin-top:19px }
.entry-content > figure{ margin-top:66px }
.entry-content > .wp-block-separator{ margin-top:70px; margin-bottom:0 }

h1,h2{ text-wrap:balance }
h2{ max-width:20ch }

/* strong / em keyed to the palette, as in the source */
.entry-content strong{ color:#fff; font-weight:640 }
.entry-content em{ color:var(--fm-ice); font-style:italic }

/* the first paragraph after a section head gets a drop cap */
.entry-content > h2 + p:first-letter{
  float:left; font:400 4.15em/.78 var(--fm-serif); color:#fff;
  padding:.05em .12em 0 0; margin:.02em 0 -.06em 0;
}
@media (max-width:680px){
  .entry-content > h2 + p:first-letter{ font-size:3.4em }
}

/* list markers pick up the warm accent */
.entry-content ul li::marker,
.entry-content ol li::marker{ color:var(--fm-signal) }
.entry-content li{ margin-top:10px }

/* ------------------------------------------------------------ inline code */
:where(.entry-content) code:not(.hljs){
  font-family:var(--fm-mono); font-size:14px; line-height:1.5;
  background:var(--fm-panel2); border:1px solid var(--fm-rule2);
  border-radius:2px; padding:1.5px 5px; color:var(--fm-ice);
  overflow-wrap:anywhere;
}
.wp-block-code{ border-left-width:2px; border-left-color:var(--fm-rule); overflow-x:auto }
.wp-block-code code{ background:none; border:0; padding:0; white-space:pre; overflow-wrap:normal }

/* ======================================================== label components */

/* An eyebrow: the mono, letterspaced, uppercase line that dates a piece. */
.is-style-eyebrow{
  font-family:var(--fm-mono); font-size:11px; line-height:1; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; color:var(--fm-signal);
  margin:0;
}

/* A kicker sits above a section head and numbers it. */
.is-style-kicker{
  font-family:var(--fm-mono); font-size:10.5px; line-height:1; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--fm-signal);
  margin-bottom:19px;
}
.entry-content > .is-style-kicker{ margin-top:104px }
.entry-content > .is-style-kicker + h2,
.entry-content > .is-style-kicker + .wp-block-heading{ margin-top:0 }

/* A standfirst: the serif intro paragraph, wider leading, ice-toned. */
.is-style-standfirst{
  font-family:var(--fm-serif); color:var(--fm-ice);
  font-size:clamp(18px,2vw,21px); line-height:1.62;
  max-width:672px; margin-top:38px;
}
.is-style-standfirst strong{ color:#fff; font-weight:600 }

/* A section rule that ramps from white to nothing, marking a part break. */
.is-style-ramp{
  height:2px; border:0; margin:150px 0 0; opacity:1;
  background:linear-gradient(90deg,#fff 0%,#8b93a2 34%,#2a3242 70%,var(--fm-void) 100%);
}
.is-style-ramp + p, .is-style-ramp + .is-style-part-label{
  font-family:var(--fm-mono); font-size:11.5px; line-height:1; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase; color:var(--fm-signal);
  margin-top:24px;
}

/* ==================================================== breakout components */

/* A band: full-measure tinted conclusion, warm rule on top. */
.is-style-band{
  background:var(--fm-panel); border-top:2px solid var(--fm-signal);
  padding:36px 42px; margin-top:58px;
}
.is-style-band > *:first-child{ margin-top:0 }
.is-style-band p{ font-size:19px; line-height:1.6; max-width:900px }
.is-style-band p:first-child{ color:#fff; font-weight:600 }
.is-style-band.is-tone-ice{ border-top-color:var(--fm-ice) }
.is-style-band.is-tone-bad{ border-top-color:var(--fm-bad) }
.is-style-band.is-tone-good{ border-top-color:var(--fm-good) }

/* Marginalia: hangs into the right-hand space beside the text. */
.is-style-note{
  float:right; width:298px; clear:right;
  margin:12px 0 32px 52px; padding:18px 20px;
  background:var(--fm-panel); border:1px solid var(--fm-rule2);
  font-size:14px; line-height:1.6; color:var(--fm-mute);
}
.is-style-note > *:first-child{ margin-top:0 }
.is-style-note strong{ color:var(--fm-ice); font-weight:640 }
.is-style-note h4{ margin:0 0 10px }
@media (max-width:1180px){
  .is-style-note{ float:none; width:auto; margin:32px 0 }
}

/* A definition card — a term explained without breaking the argument. */
.is-style-term{
  font-family:var(--fm-sans); font-size:15.5px; line-height:1.62;
  color:var(--fm-mute); background:var(--fm-panel);
  border:1px solid var(--fm-rule2); border-left:2px solid var(--fm-ice);
  border-radius:0 3px 3px 0; padding:20px 24px; margin-top:32px;
}
.is-style-term strong{ color:var(--fm-ice); font-weight:640 }
.is-style-term em{ color:var(--fm-ink); font-style:normal }

/* A pull quote that breaks the measure and is set large. */
.wp-block-pullquote{
  margin:76px 0; padding:0; border:0; text-align:left;
}
.wp-block-pullquote blockquote{ border:0; padding:0; margin:0 }
.wp-block-pullquote p{
  font-family:var(--fm-serif); font-size:clamp(25px,3.2vw,40px);
  line-height:1.2; letter-spacing:-.017em; color:#fff;
  text-wrap:balance; margin:0;
}
.wp-block-pullquote p strong{ color:var(--fm-signal); font-weight:400 }
.wp-block-pullquote cite{
  display:block; margin-top:22px; font-family:var(--fm-sans);
  font-size:16px; line-height:1.6; color:var(--fm-mute);
  font-style:normal; text-transform:none; letter-spacing:0; max-width:640px;
}

/* ================================================================= figures */
figure{ margin-left:0; margin-right:0 }
.wp-block-image img,
.wp-block-video video{
  display:block; width:100%; height:auto;
  border:1px solid var(--fm-rule2); background:#000;
}
.wp-block-image figcaption,
.wp-block-video figcaption,
.wp-block-table figcaption{
  margin-top:16px; max-width:640px;
  font-family:var(--fm-sans); font-size:14px; line-height:1.6; color:var(--fm-dim);
}
figcaption strong{ color:var(--fm-ice); font-weight:600 }
figcaption em{ color:var(--fm-mute); font-style:normal }

/* Inline SVG diagrams sit flush and scale. */
.entry-content svg{ display:block; width:100%; height:auto }

/* A strip of stills, and a chain of process steps. */
.is-style-strip{ --fm-min:200px }
.is-style-chain{ --fm-min:230px }
.is-style-strip, .is-style-chain{
  display:grid; gap:20px; margin-top:66px;
  grid-template-columns:repeat(auto-fit,minmax(var(--fm-min),1fr));
}
.is-style-strip figure, .is-style-chain figure{ margin:0 }
.is-style-strip img{ aspect-ratio:3/4; object-fit:cover }
.is-style-chain img, .is-style-chain video, .is-style-chain svg{ aspect-ratio:16/9; object-fit:cover }
.is-style-strip figcaption, .is-style-chain figcaption{ margin-top:12px; font-size:12.5px; max-width:none }
.is-style-chain figcaption strong{
  display:block; color:#fff; font-family:var(--fm-mono); font-size:10.5px;
  line-height:1; letter-spacing:.16em; text-transform:uppercase; margin-bottom:7px;
}

/* =================================================================== stats */
/* A row of figures, hairline-separated, tabular. */
.is-style-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:1px; background:var(--fm-rule2);
  border-top:1px solid var(--fm-rule2); border-bottom:1px solid var(--fm-rule2);
  margin-top:60px;
}
.is-style-stats > *{ background:var(--fm-void); padding:22px; margin:0 }
.is-style-stats dt, .is-style-stats .fm-stat-label{
  font-family:var(--fm-mono); font-size:10px; line-height:1.3; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--fm-dim); margin:0;
}
.is-style-stats dd, .is-style-stats .fm-stat-value{
  margin:12px 0 0; font-family:var(--fm-serif); font-size:30px; line-height:1.05;
  color:var(--fm-ice); font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}

/* ============================================================ index / toc */
.is-style-toc{
  display:grid; gap:1px; margin-top:50px;
  grid-template-columns:repeat(auto-fit,minmax(256px,1fr));
  background:var(--fm-rule2); border:1px solid var(--fm-rule2);
}
.is-style-toc a, .is-style-toc li{
  display:flex; gap:12px; align-items:baseline; background:var(--fm-void);
  padding:14px 16px; text-decoration:none; color:var(--fm-mute); font-size:14px;
  margin:0; list-style:none; transition:background .12s, color .12s;
}
.is-style-toc a:hover, .is-style-toc a:focus-visible{ background:var(--fm-panel); color:#fff }

/* ================================================================== tables */
/* Data gets its own horizontal scroll so the page body never moves sideways. */
.wp-block-table{ margin-top:42px; overflow-x:auto }
.wp-block-table table{
  border-collapse:collapse; width:100%; min-width:580px; background:transparent;
  font-family:var(--fm-sans); font-size:14.5px; line-height:1.6;
}
.wp-block-table th{
  background:transparent; text-align:left; padding:0 18px 13px 0;
  border-bottom:1px solid var(--fm-rule);
  font-family:var(--fm-mono); font-size:10px; line-height:1.3; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--fm-dim);
}
.wp-block-table td{
  padding:14px 18px 14px 0; border-bottom:1px solid var(--fm-rule2);
  vertical-align:top; font-variant-numeric:tabular-nums;
}
.wp-block-table tbody tr:last-child td{ border-bottom:0 }
.wp-block-table td:first-child{ color:var(--fm-ice) }
.wp-block-table td strong, .wp-block-table th strong{ color:#fff }
.wp-block-table code{ font-size:12.5px }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd){ background:transparent }
/* Core's stripes style puts a pale border-bottom on the FIGURE, which lands
   under the caption and draws a rule through the last line of it. Found by
   looking at a screenshot, not by reading this file. */
.wp-block-table.is-style-stripes{ border-bottom:0 }

/* ================================================================ masthead */
.fm-masthead{
  border-bottom:1px solid var(--fm-rule2);
  padding-top:22px; padding-bottom:22px;
}
.fm-masthead .wp-block-site-title a{ text-decoration:none; color:#fff }
.fm-masthead .wp-block-site-title a:hover{ color:var(--fm-ice) }
.fm-masthead .wp-block-navigation a{
  text-decoration:none; color:var(--fm-mute);
  font-family:var(--fm-mono); font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  transition:color .12s;
}
.fm-masthead .wp-block-navigation a:hover,
.fm-masthead .wp-block-navigation .current-menu-item a{ color:var(--fm-signal) }
.fm-tagline{
  font-family:var(--fm-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fm-dim); margin:0;
}

/* ================================================================ colophon */
.fm-colophon{
  margin-top:140px; padding-top:34px; border-top:1px solid var(--fm-rule2);
  color:var(--fm-dim); font-size:14px;
}
.fm-colophon a{ color:var(--fm-mute) }

/* ============================================================= post lists */
/* An index entry: the date as a mono label, the title in the display serif. */
.fm-index-entry{
  padding:34px 0; border-bottom:1px solid var(--fm-rule2);
}
.fm-index-entry:first-child{ padding-top:0 }
.fm-index-entry .wp-block-post-title{
  font-family:var(--fm-serif); font-size:clamp(25px,3.1vw,36px);
  line-height:1.12; letter-spacing:-.019em; margin:14px 0 0; max-width:26ch;
}
.fm-index-entry .wp-block-post-title a{ text-decoration:none; color:#fff }
.fm-index-entry .wp-block-post-title a:hover{ color:var(--fm-ice) }
.fm-index-entry .wp-block-post-excerpt__excerpt{
  color:var(--fm-mute); font-size:16px; line-height:1.65; margin-top:14px; max-width:64ch;
}
.fm-index-entry .wp-block-read-more{
  display:inline-block; margin-top:16px; text-decoration:none;
  font-family:var(--fm-mono); font-size:10.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--fm-signal);
}
.fm-index-entry .wp-block-read-more:hover{ color:#fff }
.fm-meta-row{ display:flex; flex-wrap:wrap; gap:18px; align-items:baseline }

/* the archive intro block */
.fm-archive-head{ padding-top:76px }
.fm-archive-head .wp-block-query-title{
  font-family:var(--fm-serif); font-weight:400; color:#fff;
  font-size:clamp(30px,4.6vw,54px); line-height:1.06; letter-spacing:-.02em;
}

/* single-post header */
.fm-post-head{ padding-top:82px }
.fm-post-head .wp-block-post-title{ margin-top:30px; max-width:16em }

/* ================================================================ pagination */
.wp-block-query-pagination{ margin-top:70px; gap:20px }
.wp-block-query-pagination a,
.wp-block-query-pagination .wp-block-query-pagination-numbers span{
  text-decoration:none; font-family:var(--fm-mono); font-size:11px;
  font-weight:600; letter-spacing:.16em; text-transform:uppercase;
}

/* ================================================================ a11y etc */
:focus-visible{ outline:2px solid var(--fm-ice); outline-offset:3px }
::selection{ background:var(--fm-ice); color:var(--fm-void) }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important }
}

/* --------------------------------------------------------------- narrower */
@media (max-width:680px){
  .is-style-band{ padding:26px 22px }
  .entry-content > h2, .entry-content > .is-style-kicker{ margin-top:72px }
  .entry-content > figure{ margin-top:46px }
  .is-style-ramp{ margin-top:96px }
  .fm-post-head{ padding-top:52px }
}

/* =========================================== the measure, left-set in the field */
/* The reference stylesheet sets a 1340px field and lets running text reach only
   700px inside it, flush left. Everything else — figures, tables, data rows —
   takes the whole field. That asymmetry IS the layout: it leaves a right-hand
   column standing free, which is where marginalia hang. Centring the measure
   instead makes the page read as symmetrical and empty. */

/* Core's constrained layout centres children with `margin-inline:auto !important`,
   so left-setting them requires !important in turn. There is no lower-specificity
   way round it short of abandoning constrained layout and losing alignwide. */
.entry-content > :is(p,h1,h2,h3,h4,h5,h6,ul,ol,dl,blockquote,pre,
  .wp-block-code,.wp-block-quote,.wp-block-list,.wp-block-details,.wp-block-search),
.fm-set > :is(p,h1,h2,h3,h4,h5,h6,ul,ol,dl,blockquote,
  .wp-block-post-title,.wp-block-post-excerpt,.wp-block-query-title,.wp-block-search){
  max-width:700px;
  margin-left:0 !important;
  margin-right:auto !important;
}

/* breakouts take the whole field */
.entry-content > :is(figure,.wp-block-image,.wp-block-video,.wp-block-table,
  .wp-block-embed,.wp-block-columns,.wp-block-gallery,.wp-block-separator,
  .is-style-stats,.is-style-toc,.is-style-strip,.is-style-chain,.is-style-band){
  max-width:none;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* the pull quote breaks the measure without filling the field */
.entry-content > .wp-block-pullquote{ max-width:1040px; margin-left:0 !important }

/* marginalia is floated, so it ignores the measure and lands in the right column */
.entry-content > .is-style-note{ max-width:none }

/* an index entry keeps its rule short of the full field, or it reads as a table */
.fm-index-entry{ max-width:1040px }

/* the ramp spans the field, as a part break should */
.entry-content > .wp-block-separator.is-style-ramp,
.fm-set > .wp-block-separator.is-style-ramp{ max-width:none; width:100% }

/* ================================================================== colophon */
.fm-colophon{ margin-top:150px; padding-top:0; border-top:0 }
.fm-colophon-top{
  border-top:1px solid var(--fm-rule2);
  padding-top:40px; padding-bottom:40px;
  display:grid; gap:40px;
  grid-template-columns:minmax(280px,1fr) auto;
  align-items:start;
}
.fm-colophon-top p{ margin:0 }
.fm-colophon-blurb{ max-width:480px; font-size:15px; line-height:1.68; color:var(--fm-mute) }
.fm-colophon-blurb strong{ color:var(--fm-ice); font-weight:640 }
.fm-powered{
  margin-top:14px !important;
  font-family:var(--fm-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fm-dim);
}
/* The footer is the site's complete index — every section, in two named groups,
   so a reader who cannot find something in the six-item masthead finds it here.
   Two columns, not one eleven-deep list. */
.fm-colophon-links{ display:grid; grid-template-columns:repeat(2,auto); gap:10px 46px }
.fm-colophon-group{ display:flex; flex-direction:column; gap:10px }
.fm-colophon-group-head{
  margin:0 0 4px !important;
  font-family:var(--fm-mono); font-size:10.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--fm-dim);
}
.fm-colophon-links a{
  text-decoration:none; color:var(--fm-mute);
  font-family:var(--fm-mono); font-size:10.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
}
.fm-colophon-links a:hover{ color:var(--fm-signal) }
.fm-colophon-base{
  border-top:1px solid var(--fm-rule2); padding:22px 0 0;
  display:flex; flex-wrap:wrap; gap:10px 32px; align-items:baseline;
}
.fm-colophon-base p{
  margin:0; font-family:var(--fm-mono); font-size:10.5px;
  letter-spacing:.11em; color:var(--fm-dim);
}
.fm-heart{ color:var(--fm-bad); font-style:normal }
@media (max-width:780px){
  .fm-colophon-top{ grid-template-columns:1fr }
}
@media (max-width:520px){
  .fm-colophon-links{ grid-template-columns:1fr; gap:22px }
}

/* ============================================================ small screens */
/* Two things break a block theme on a phone. Nested constrained groups each
   apply the root padding, so it stacks; and grid or flex children default to
   min-width:auto, so a long unbreakable label can push a track wider than the
   viewport. Both are fixed here rather than by narrowing the design. */

@media (max-width:820px){
  .has-global-padding{
    padding-left:20px !important;
    padding-right:20px !important;
  }
  /* the inner one has already been paid for by its parent */
  .has-global-padding .has-global-padding{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* the measure cannot exceed the screen */
  .entry-content > *,
  .fm-set > *{ max-width:100% !important }

  /* grid and flex children must be allowed to shrink below their content */
  .is-style-stats > *,
  .is-style-strip > *,
  .is-style-chain > *,
  .is-style-toc > *,
  .fm-meta-row > *,
  .fm-colophon-top > *,
  .wp-block-columns > *{ min-width:0 }

  .is-style-stats{ grid-template-columns:repeat(auto-fit,minmax(132px,1fr)) }
  .is-style-stats > *{ padding:16px 14px }
  .is-style-stats dd,
  .is-style-stats .fm-stat-value{ font-size:26px }

  .is-style-strip, .is-style-chain{ grid-template-columns:1fr; gap:28px }

  .is-style-band{ padding:24px 20px }
  .is-style-band p{ font-size:17px }

  .entry-content p,
  .entry-content li,
  .fm-set p{ overflow-wrap:break-word }

  /* the masthead stacks rather than squeezing */
  .fm-masthead .wp-block-navigation a{ font-size:10px; letter-spacing:.12em }
}

@media (max-width:520px){
  .is-style-stats{ grid-template-columns:1fr 1fr }
  .fm-colophon-base{ flex-direction:column; gap:8px }
}

/* ===================================================== media, unconditionally */
/* The rules above only reached images inside core image blocks. Any <img> or
   <video> authored inside a raw HTML block — which is how the strips and the
   chains are built — rendered at its intrinsic width and pushed the document
   past the viewport. Caught by measuring scrollWidth, not by looking. */

.entry-content img,
.entry-content video,
.entry-content svg,
.fm-set img,
.fm-set video{
  max-width:100%;
  height:auto;
}
.is-style-strip img,
.is-style-chain img,
.is-style-chain video,
.is-style-strip video{ width:100%; display:block }

/* ==================================================================== search */
.wp-block-search__label{
  font-family:var(--fm-mono); font-size:10.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--fm-dim);
  margin-bottom:12px; display:block;
}
.wp-block-search__input{
  background:var(--fm-panel); color:var(--fm-ink);
  border:1px solid var(--fm-rule); border-radius:0;
  padding:12px 14px; font-family:var(--fm-sans); font-size:15px;
}
.wp-block-search__input::placeholder{ color:var(--fm-dim) }
.wp-block-search__button{
  background:var(--fm-panel-2,#161e2c); color:var(--fm-ice);
  border:1px solid var(--fm-rule); border-left:0; border-radius:0;
  padding:12px 22px; cursor:pointer;
  font-family:var(--fm-mono); font-size:10.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  transition:background .12s, color .12s;
}
.wp-block-search__button:hover{ background:var(--fm-rule); color:#fff }

/* ============================================ index entries, with a thumbnail */
/* The measure leaves a right-hand column standing empty on the index, which is
   exactly where a still belongs — same idiom as the marginalia, so the page
   reads as one system rather than two. */

/* ⛔ The entry is a GRID, not a float, and this is why. The entry carries `fm-set`
   as well, so the measure rule caps the title at 700px — but only 517px is free
   beside a 290px thumbnail. A capped block that will not fit beside a float CLEARS
   it, so every entry on every listing put the title BELOW the picture with the
   picture's height standing empty above it. Measured at 1440 before the fix:
   title box 44→744, float 561→851, title height 254px for two 40px lines.
   A grid track cannot do that, whatever the measure rule says. */
.fm-index-entry{
  display:grid;
  grid-template-columns:minmax(0,1fr) 290px;
  column-gap:44px;
  row-gap:0;
  align-content:start;
}
.fm-index-entry > *{ grid-column:1 }
/* ⛔ Core's constrained layout puts `margin-inline:auto !important` on children, and
   on a GRID ITEM that centres it in its track — the same trap as capping a width,
   one container type along. The meta row measured l=184 instead of 44 the moment
   the float became a grid, so column 1 is left-set explicitly. */
.fm-index-entry > .fm-meta-row{ margin-left:0 !important; margin-right:auto !important }
.fm-index-entry > .wp-block-post-featured-image{
  grid-column:2;
  grid-row:1 / span 20;   /* safe only with row-gap:0 — empty implicit rows are 0 tall */
  width:290px;
  margin:6px 0 18px 0;
  align-self:start;
}
.fm-index-entry .wp-block-post-featured-image img{
  display:block; width:100%; height:auto;
  aspect-ratio:16/10; object-fit:cover;
  border:1px solid var(--fm-rule2); background:#000;
  filter:saturate(.92);
  transition:filter .18s, border-color .18s;
}
.fm-index-entry:hover .wp-block-post-featured-image img{
  filter:saturate(1.05); border-color:var(--fm-rule);
}
/* no clearfix — there is no float to clear, and a ::after on a grid container
   becomes a grid item and takes a cell */

/* a post's own hero, at the top of the article */
.wp-block-post-featured-image{ margin-top:0 }
.wp-block-post-featured-image img{
  border:1px solid var(--fm-rule2); background:#000;
  display:block; width:100%; height:auto;
}

@media (max-width:820px){
  /* one column, picture first — collapse the grid rather than un-float it */
  .fm-index-entry{ grid-template-columns:minmax(0,1fr); column-gap:0 }
  .fm-index-entry > *{ grid-column:1 }
  /* ⛔ `wp:post-featured-image {"width":"290px"}` writes an INLINE style on the figure,
     so the old `width:100%` here never applied and the thumbnail rendered as a centred
     290px block on every narrow screen — measured l=100 r=390 in a 489px viewport.
     Only `!important` beats an inline style from a stylesheet. */
  .fm-index-entry > .wp-block-post-featured-image{
    grid-column:1; grid-row:auto;
    width:100% !important;
    margin:0 0 20px 0 !important;
  }
}

/* a hero is a letterbox, not a full-height photograph */
.fm-post-hero .wp-block-post-featured-image img,
body:not(.blog) .entry-content ~ * .wp-block-post-featured-image img{ }
main > .wp-block-post-featured-image img,
main > figure.wp-block-post-featured-image img{
  aspect-ratio:21/9;
  object-fit:cover;
}
@media (max-width:820px){
  main > .wp-block-post-featured-image img,
  main > figure.wp-block-post-featured-image img{ aspect-ratio:16/9 }
}

/* =============================================== the masthead holds its place */
/* STICKY-MASTHEAD-S034
   The title, the tagline and the nav stay at the top of the window while the
   reader scrolls. Three things this depends on, none of them obvious:

   1. The rule goes on the TEMPLATE PART, not on .fm-masthead. A sticky element
      travels inside its own parent's box, and .fm-masthead's parent is exactly
      as tall as .fm-masthead — so sticking it there would do nothing at all.
      The template part is a direct child of .wp-site-blocks, whose box is the
      whole document, which is the travel the rule needs.
   2. body carried overflow-x:hidden (added to stop wide figures pushing the
      page sideways). An overflow value other than visible makes an element a
      scroll container, and a sticky descendant then sticks to THAT box instead
      of to the window. overflow-x:clip clips exactly the same way but creates
      no scroll container. The hidden declaration stays first as the fallback
      for browsers without clip — they lose the stickiness, not the layout.
   3. The bar must be opaque, or the article scrolls visibly through it. */

body{ overflow-x:hidden; overflow-x:clip }

/* an in-page anchor should not land underneath the bar */
html{ scroll-padding-top:112px }

.wp-site-blocks > header.wp-block-template-part{
  position:sticky; top:0; z-index:60;
  background:var(--fm-void);
}

/* Where the browser can blur, the bar reads as glass over the page rather than
   as a lid on it — the rule below the masthead still marks the boundary. */
@supports (backdrop-filter:blur(12px)) or (-webkit-backdrop-filter:blur(12px)){
  .wp-site-blocks > header.wp-block-template-part{
    background:color-mix(in srgb, var(--fm-void) 82%, transparent);
    -webkit-backdrop-filter:blur(14px) saturate(150%);
    backdrop-filter:blur(14px) saturate(150%);
  }
}

/* the admin bar is fixed above everything at desktop widths */
.admin-bar .wp-site-blocks > header.wp-block-template-part{ top:32px }
@media screen and (max-width:782px){
  .admin-bar .wp-site-blocks > header.wp-block-template-part{ top:46px }
}
@media screen and (max-width:600px){
  /* below 600px the admin bar scrolls away with the page */
  .admin-bar .wp-site-blocks > header.wp-block-template-part{ top:0 }
}

/* A bar that is always present has to cost less height than one that scrolls
   away, so it gives back some of its air on a short or narrow window. */
@media (max-width:820px), (max-height:620px){
  .fm-masthead{ padding-top:14px; padding-bottom:14px }
  html{ scroll-padding-top:88px }
}

/* ================================================= the front page, two ways in */
/* HOME-RAIL-S033B
   The front page used to be the twelve OLDEST posts, ascending, so a returning
   reader saw nothing new and the newest work sat on page two. It now answers
   both questions at once: the main column is everything, newest first, and the
   rail is the diary from its first day for anyone arriving cold. */

.fm-home-split{ align-items:flex-start }

/* The rail is a quiet column, not a second article: hairline rule, no boxes. */
.fm-rail{ border-left:1px solid var(--fm-rule2); padding-left:34px }

.fm-rail-inner{ position:sticky; top:124px }

.fm-rail-head{ margin:0; color:var(--fm-signal) }

.fm-rail-blurb{
  color:var(--fm-dim); font-size:14.5px; line-height:1.6;
  margin:16px 0 0; max-width:34ch;
  /* the rail is a constrained group, so a max-width narrower than it gets
     margin-inline:auto from core and the paragraph indents itself */
  margin-left:0 !important; margin-right:auto !important;
}

/* The list numbers itself, because "in order" is the whole point of it. */
.fm-rail-list .wp-block-post-template{
  counter-reset:fm-rail;
  margin-top:26px; padding:0; list-style:none;
}

.fm-rail-entry{
  counter-increment:fm-rail;
  display:grid; grid-template-columns:26px 104px 1fr; gap:0 14px;
  align-items:start;
  padding:16px 0; border-top:1px solid var(--fm-rule2);
}

.fm-rail-entry::before{
  content:counter(fm-rail,decimal-leading-zero);
  font-family:var(--fm-mono); font-size:10.5px; font-weight:600;
  letter-spacing:.14em; color:var(--fm-dim);
  padding-top:3px;
}

.fm-rail-entry .wp-block-post-featured-image{ margin:0 }
.fm-rail-entry .wp-block-post-featured-image img{
  width:104px; height:65px; object-fit:cover; display:block;
  border:1px solid var(--fm-rule2); background:#000;
}

.fm-rail-entry .wp-block-post-title{
  margin:0; font-family:var(--fm-serif); font-weight:400;
  font-size:16px; line-height:1.25; letter-spacing:-.012em;
}
.fm-rail-entry .wp-block-post-title a{ text-decoration:none; color:var(--fm-ink) }
.fm-rail-entry .wp-block-post-title a:hover{ color:var(--fm-ice) }

.fm-rail-more{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--fm-rule2);
  font-family:var(--fm-mono); font-size:10.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
}
.fm-rail-more a{ text-decoration:none; color:var(--fm-signal) }
.fm-rail-more a:hover{ color:#fff }

/* Stacked, the rail is just another section — the rule and the offset that made
   it a margin would only be clutter. */
@media (max-width:781px){
  .fm-rail{ border-left:0; padding-left:0; border-top:1px solid var(--fm-rule2); padding-top:40px }
  .fm-rail-inner{ position:static }
}
@media (max-width:420px){
  .fm-rail-entry{ grid-template-columns:26px 1fr; gap:0 12px }
  .fm-rail-entry .wp-block-post-featured-image{ display:none }
}

/* =========================================================== search, findable */
.fm-colophon-search{ margin-top:26px; max-width:330px }
.fm-colophon-search .wp-block-search__label{ margin-bottom:10px }

/* The rail entry is a grid, so core's constrained-layout rules — which push
   auto margins and a content-size max-width onto every child — have to be told
   to keep out, or the numeral and the thumbnail drift inside their cells. */
.fm-rail-entry > *{ margin-left:0 !important; margin-right:0 !important; margin-block:0; max-width:none }


/* ================================================ the desktop measure, audited */
/* MEASURE-PASS-2026-08-17
   Found by measuring the geometry of live pages element by element, not by
   reading this file. Four things were running the full 1321px field that are
   running text and should sit on the 700px measure, and the colophon's search
   box was centred in a column of its own dead space.

   The rule underneath all of it: anything a reader reads as sentences takes the
   measure. Only pictures, tables and data rows take the field. */

/* 1 · CAPTIONS.
   .wp-block-image / -video / -table figcaption were already capped. A raw
   <figure> written inside a wp:html block — which is how every hand-built
   figure and every inline diagram on this site is made — matched none of those
   selectors and ran the whole field: about 180 characters to the line. */
.entry-content figure > figcaption,
.entry-content figure > .wp-element-caption,
.fm-set figure > figcaption,
.fm-set figure > .wp-element-caption,
main figure > figcaption,
main figure > .wp-element-caption{
  max-width:700px;
  margin-top:16px;
  font-family:var(--fm-sans); font-size:14px; line-height:1.6;
  color:var(--fm-dim);
}
main figure > figcaption strong{ color:var(--fm-ice); font-weight:600 }
main figure > figcaption em{ color:var(--fm-mute); font-style:normal }

/* the two set-piece rows caption each panel, so those captions are scoped to
   their own column and keep the smaller setting */
/* a row's summarising caption needs air, or it reads as a third panel label */
.entry-content .is-style-chain + figcaption,
.entry-content .is-style-strip + figcaption,
.fm-set .is-style-chain + figcaption,
.fm-set .is-style-strip + figcaption{ margin-top:28px }

.entry-content .is-style-strip figcaption,
.entry-content .is-style-chain figcaption,
.fm-set .is-style-strip figcaption,
.fm-set .is-style-chain figcaption{
  max-width:none; font-size:12.5px; margin-top:12px;
}

/* the existing capped captions move from 640 to the measure, so every caption
   on the site now ends on the same vertical line as the body text */
.wp-block-image figcaption,
.wp-block-video figcaption,
.wp-block-table figcaption{ max-width:700px; margin-left:0; margin-right:auto }

/* 2 · A CATEGORY DESCRIPTION is running text as well, and it introduces a page
   whose entries are all set to the measure below it. */
.wp-block-term-description,
.fm-archive-intro{
  max-width:700px;
  margin-left:0 !important; margin-right:auto !important;
}

/* 3 · THE POST TITLE had max-width:16em, which at its own 86px is 1376px —
   wider than the field it sits in, so it was not a measure at all. A display
   line wants about twenty characters. */
.fm-post-head .wp-block-post-title{
  max-width:20ch;
  margin-left:0 !important; margin-right:auto !important;
}

/* 4 · THE HERO. A forced 21/9 crop cut the ends off the site's own house
   pattern for a featured image — a two-panel comparison at about 3.6:1, whose
   whole point is that you can see both panels. Let a picture keep its shape and
   bound its height instead; the crop then only bites on something unusually
   tall, which is the case it was written for. */
main > .wp-block-post-featured-image img,
main > figure.wp-block-post-featured-image img{
  aspect-ratio:auto;
  max-height:min(74vh, 760px);
  object-fit:cover;
}
@media (max-width:820px){
  main > .wp-block-post-featured-image img,
  main > figure.wp-block-post-featured-image img{ aspect-ratio:auto; max-height:none }
}

/* 5 · THE COLOPHON. The search block is a core block sitting directly in the
   constrained footer group, so core centred it — leaving it stranded in the
   middle of a 120px band of nothing, the only centred element on the site.
   It belongs on the same left edge as everything else. */
.fm-colophon > .wp-block-search{
  max-width:340px;
  margin:0 !important;
  padding-bottom:36px;
}
.fm-colophon-top{ padding-bottom:30px }
.fm-colophon-search .wp-block-search__inside-wrapper{ max-width:340px }

/* the link column is a list, so it reads better as a list: left-aligned inside
   its own track, sitting on the same baseline as the blurb beside it */
.fm-colophon-links{ gap:11px }

/* 6 · The meta row's terms and date share a baseline but not a rhythm; give the
   separator between them some air so "16 August 2026 Findings, Sessions" does
   not read as one string. */
.fm-meta-row{ gap:20px }