/*
Theme Name: Brooding Jay
Theme URI: https://broodingjay.com/
Author: Brooding Jay
Author URI: https://broodingjay.com/
Description: Block theme for broodingjay.com, the Brooding Jay company site.
Version: 0.3.10
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: broodingjay
*/

/* ══ Tokens ══ */
:root{
  --paper:var(--wp--preset--color--paper);
  --ink:var(--wp--preset--color--ink);
  --ink-soft:var(--wp--preset--color--ink-soft);
  --mute:var(--wp--preset--color--mute);
  --accent:var(--wp--preset--color--accent);
  --band:#f6f6f6;
  --hair:var(--wp--custom--hair);
  --hair-2:var(--wp--custom--hair-2);
  --hair-inv:var(--wp--custom--hairinv);

  --mast-h:104px;
  --wp--preset--font-size--lede:clamp(1.18rem, 1.121rem + 0.247vw, 1.32rem);

  --gut:var(--wp--custom--gut);
  --margin-col:var(--wp--custom--margincol);
  --sheet:var(--wp--custom--sheet);
  --sec-y:var(--wp--custom--secy);
}

/* ══ Base ══ */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--mast-h) + 1px + clamp(20px,2.4vw,34px));}
html:has(.admin-bar){scroll-padding-top:calc(var(--mast-h) + 33px + clamp(20px,2.4vw,34px));}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}
body{
  margin:0;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"kern" 1;
}
img{max-width:100%;display:block;}
figure{margin:0;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.spread-ink :focus-visible{outline-color:var(--paper);}
:where(.is-layout-flow > *){margin-block-start:0;margin-block-end:0;}
:where(.wp-site-blocks > *){margin-block-start:0;margin-block-end:0;}

/* ══ Sheet and grid ══ */
.sheet{max-width:var(--sheet);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut);}
.row{display:grid;grid-template-columns:minmax(0,1fr);}
.col{min-width:0;}
.measure{max-width:60ch;}

.sec{padding-top:calc(var(--sec-y) * .52);padding-bottom:var(--sec-y);}
.sec + .sec{border-top:1px solid var(--hair);}
.spread-ink + .sec,.sec.spread-ink{border-top:0;}
/* ══ Masthead ══ */
.mast{position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:1px solid var(--hair);}
.admin-bar .mast{top:32px;}
@media (max-width:782px){.admin-bar .mast{top:46px;}}
.mast-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:20px;height:var(--mast-h);}
.jay{width:52px;height:52px;justify-self:start;flex:none;border-radius:50%;
  border:1px solid var(--ink);
  background:var(--paper) url("img/mark.png") no-repeat;
  background-size:150% auto;background-position:46% 45%;}
.nameplate{justify-self:center;text-decoration:none;white-space:nowrap;
  font-family:var(--wp--preset--font-family--display);font-weight:700;
  font-size:42px;line-height:1;text-transform:lowercase;
  letter-spacing:-0.042em;word-spacing:0.05em;
  transform:translateY(-0.105em);}
.mast-links{margin:0;max-width:none;justify-self:end;display:flex;align-items:center;gap:22px;
  font-size:14.5px;font-weight:500;}
.mast-links a{text-decoration:none;color:var(--ink-soft);}
.mast-links a:hover{color:var(--ink);}
.mast-links a.now{color:var(--ink);}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:10px 16px;z-index:100;text-decoration:none;font-weight:500;}
.skip:focus{left:0;}

/* ══ Hero ══ the headline sets on one line and a hairline picks up where it
   stops and runs to the edge of the sheet. The rule is an ::after, not markup,
   so the page content stays a plain editable sentence.

   MEASURED BUGS THIS FIXES (headless Chrome, real archivo-700.woff2):
   1. min-width:24px on the rule turned "no room left" into OVERFLOW — the hero
      ran 39px past the sheet at 1440 and 49px at 1512/1920, i.e. on the two
      commonest Mac widths. min-width:0 makes the failure mode "the rule shrinks
      to nothing" instead of "the line escapes the page".
   2. 24px was also almost exactly Archivo 700's hyphen ink width at this size
      (24.05px), so the floor rendered as a minus sign after "subtraction." — a
      hairline accidentally carrying meaning, which this site's law forbids.
   3. Sizing by vw inside a fixed-width sheet is the root cause: the sheet stops
      growing at 1120px, 6.6vw keeps going. Sized against the container instead,
      so the rule is a constant ~98px at every width >=1280. */
.sec-hero{
  padding-top:clamp(54px,7.6vw,116px);
  padding-bottom:clamp(48px,6.4vw,100px);
}
.sec-hero .col{ container-type:inline-size; }

.sec-hero .h1{
  display:flex;
  align-items:center;
  gap:clamp(16px,2.4vw,34px);
  margin:0;
  max-width:none;
  white-space:nowrap;
  font-size:clamp(1.5rem,8.4cqi,5.25rem);
  line-height:1;
  letter-spacing:-.046em;
}
.sec-hero .h1::after{
  content:"";
  flex:1 1 auto;
  min-width:0;
  height:1px;
  background:var(--ink);
  /* align-items:center centres the margin box, so this lifts the rule onto the
     cap-height axis (1.1px below optical centre at 95px) */
  margin-bottom:.023em;
  /* the period's right side bearing leaves 3.3px of dead air the declared gap
     doesn't account for; cancel it so the gap renders as specified */
  margin-left:-.035em;
}

.sec-hero .lede{
  margin:clamp(20px,2.6vw,36px) 0 0;
  max-width:34ch;
  font-size:clamp(1.05rem,1.9vw,1.6rem);
  line-height:1.4;
  color:var(--ink-soft);
}

@media (max-width:860px){
  .sec-hero .h1{
    display:block;
    white-space:normal;
    font-size:clamp(2.05rem,8.6vw,3.4rem);
    line-height:1.04;
    max-width:14ch;
  }
  /* the h1 is capped at 14ch here, so width:100% would be 100% OF THAT — the
     rule landed 110-285px short of the sheet edge, aligned to nothing. 100cqi
     is the container's width, which is what "full width" was supposed to mean.
     The flex-item margins above must also be zeroed: this branch is a block. */
  .sec-hero .h1::after{
    display:block;
    width:100cqi;
    margin:clamp(18px,3vw,26px) 0 0 0;
  }
}

/* a cover meets the masthead with no band of paper above it */


/* ══ Folio ══ */
.folio,.is-style-folio{display:flex;align-items:baseline;gap:10px;
  font-family:var(--wp--preset--font-family--data);font-weight:500;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin:0;max-width:none;padding-top:.55em;}
.folio .num{color:var(--accent);}
.spread-ink .folio{color:var(--mute);}
.spread-ink .folio .num{color:var(--paper);}

/* ══ Type roles ══ */
.h1,.h2{font-family:var(--wp--preset--font-family--display);font-weight:700;
  margin:0;text-wrap:balance;}
.h1{font-size:var(--wp--preset--font-size--display);line-height:1.02;letter-spacing:-0.033em;}
.h2{font-size:var(--wp--preset--font-size--heading);line-height:1.1;letter-spacing:-0.028em;}
.lede,.is-style-lede{font-size:var(--wp--preset--font-size--lede);line-height:1.45;margin:20px 0 22px;max-width:42ch;}
.lede:last-child,.is-style-lede:last-child{margin-bottom:0;}
.lede + .lede,.lede + .is-style-lede{margin-top:0;}
p{margin:0 0 16px;max-width:60ch;}
p:last-child{margin-bottom:0;}
.after-h2{margin-top:26px;}
.fine,.is-style-fine{font-size:var(--wp--preset--font-size--fine);line-height:1.55;color:var(--ink-soft);}

/* ══ Buttons ══ */
.btn,.cta-row .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--wp--preset--font-family--body);font-weight:500;font-size:15.5px;
  padding:13px 24px;text-decoration:none;cursor:pointer;
  border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  border-radius:0;transition:background .12s ease,color .12s ease;}
.btn:hover,.cta-row .wp-block-button__link:hover{background:var(--paper);color:var(--ink);}
.btn-line{background:transparent;color:var(--ink);}
.btn-line:hover{background:var(--ink);color:var(--paper);}
.cta-row .is-style-outline .wp-block-button__link{background:transparent;color:var(--ink);}
.cta-row .is-style-outline .wp-block-button__link:hover{background:var(--ink);color:var(--paper);}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;}
.cta-row .wp-block-button{margin:0;}
.spread-ink .cta-row .wp-block-button__link{border-color:var(--paper);background:var(--paper);color:var(--ink);}
.spread-ink .cta-row .wp-block-button__link:hover{background:transparent;color:var(--paper);}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;}

/* ══ App mark ══ */
.appmark{display:flex;align-items:center;gap:15px;margin-bottom:20px;}
.appmark img{width:60px;height:60px;display:block;border-radius:13px;
  box-shadow:0 1px 2px rgba(17,17,17,.10),0 10px 22px -12px rgba(11,69,201,.45);}
.appmark .nm{font-family:var(--wp--preset--font-family--data);font-weight:500;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:0;max-width:none;}

/* ══ Videos ══ */
.videos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.4vw,28px);margin-top:34px;}
.vid{margin:0;min-width:0;}
.vid .slot{position:relative;aspect-ratio:16/9;border:1px solid var(--hair-2);
  border-radius:10px;overflow:hidden;background:var(--paper);display:grid;place-items:center;}
.vid .slot::after{content:"";width:0;height:0;margin-left:4px;
  border-left:15px solid var(--accent);border-top:10px solid transparent;border-bottom:10px solid transparent;}
.vid .slot iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.vid .slot:has(iframe)::after{display:none;}
.vid .cap{margin-top:12px;}
@media (max-width:820px){.videos{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.videos{grid-template-columns:minmax(0,1fr);}}

/* ══ Reading ══ a post is read start to finish, so it gets its own measure,
   a looser setting than the marketing sections, and a centred column */
body.single-post main .sheet{ max-width:820px; }
/* the archive is a list, not a reading column, so it gets more room */
body.blog main .sheet,
body.archive main .sheet{ max-width:1000px; }

.prose p,.prose li{
  font-size:18.5px;
  line-height:1.75;
  letter-spacing:-0.002em;
  max-width:64ch;
}
.prose p{ margin:0 0 26px; }
.prose > :last-child{ margin-bottom:0; }
.prose :is(h2,h3){ margin-top:44px; }

/* a display-size title needs more beneath it than the 26px section rhythm,
   especially at line-height 1.02 where there is almost no descender space */
body.single-post main .prose.after-h2{ margin-top:clamp(26px,3.2vw,44px); }
body.single-post main .meta{ margin-bottom:clamp(14px,1.6vw,22px); }

/* the cover is a cover: it meets the masthead with no band of paper above it */
body.single-post main.sec:has(.lede-img):not(.cover-wide):not(.cover-inset){ padding-top:0; }

/* ══ Cover treatments ══ three per-post options, chosen from the editor's
   Template dropdown. The default template is the full-bleed cover; these two
   are registered in theme.json as "Post — wide cover" / "Post — inset cover".
   Each is one class on <main>, so the templates are otherwise identical and a
   post can be moved between them without touching its content. !important is
   needed on the img rules because WordPress prints height/object-fit inline. */

/* WIDE — breaks the reading column out to the sheet, still inset from the edges */
main.cover-wide .lede-img{
  width:min(var(--sheet), calc(100vw - 2 * var(--gut)));
  max-width:none;
  margin:0 0 clamp(28px,3.6vw,44px);
  position:relative;left:50%;transform:translateX(-50%);
}
main.cover-wide .lede-img img{
  width:100%;
  height:clamp(260px,40vh,470px) !important;
  object-fit:cover !important;
  aspect-ratio:auto !important;
  display:block;border:0;
}

/* INSET — stays on the reading measure at the image's own ratio, framed */
main.cover-inset .lede-img{
  width:100%;max-width:none;
  margin:0 0 clamp(26px,3.2vw,38px);
}
main.cover-inset .lede-img img{
  width:100%;
  height:auto !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  display:block;border:1px solid var(--hair);
}

/* ══ Featured images ══ */
/* the cover breaks the sheet and runs edge to edge; overflow-x:clip keeps the
   100vw trick from producing a horizontal scrollbar, and unlike hidden it does
   not create a scroll container, so the sticky masthead still works */
html,body{ overflow-x:clip; }
main:not(.cover-wide):not(.cover-inset) .lede-img{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-bottom:clamp(30px,4vw,48px);
}
.lede-img img{
  width:100%;
  /* !important because WordPress prints height/object-fit inline on the img,
     and an inline style beats any stylesheet rule */
  height:clamp(300px,48vh,560px) !important;
  object-fit:cover !important;
  aspect-ratio:auto !important;
  display:block;
  border:0;
}
.entry-img{ margin:0 0 16px; }
.entry-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  border:1px solid var(--hair);
}
.entry-img a{ display:block; }
/* An entry with a picture is two columns: the photograph beside the excerpt,
   not above it. Scoped with :has() so entries WITHOUT one stay a plain stack
   rather than sitting in an empty first column. */
.entries > li:has(.entry-img){
  padding-top:30px;
  display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);
  column-gap:clamp(22px,2.6vw,36px);align-items:start;
}
.entries > li:has(.entry-img) > .entry-img{grid-column:1;grid-row:1 / span 3;margin:0;}
.entries > li:has(.entry-img) > :not(.entry-img){grid-column:2;}
.entries > li:has(.entry-img) > .wp-block-post-date{margin-top:0;}
@media (max-width:640px){
  .entries > li:has(.entry-img){grid-template-columns:minmax(0,1fr);}
  .entries > li:has(.entry-img) > .entry-img{grid-column:1;grid-row:auto;margin-bottom:16px;}
  .entries > li:has(.entry-img) > :not(.entry-img){grid-column:1;}
}
.entries .wp-block-post-excerpt p{ font-size:16.5px;line-height:1.65; }

/* the archive earns a little more air now that each entry carries a picture */
.entries > li{ padding:30px 0 34px; }
.pager{
  display:flex;gap:18px;align-items:center;margin-top:34px;
  font-family:var(--wp--preset--font-family--data);font-weight:500;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
}

/* ══ Editor canvas ══ the editor renders post content with no .sheet wrapper,
   so the gutters and measure that single.html supplies have to be restated here */
.is-root-container{
  max-width:var(--sheet);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.is-root-container > *{max-width:100%;}
/* the post title renders outside the root container, so it needs the same gutter */
.editor-visual-editor__post-title-wrapper,
.edit-post-visual-editor__post-title-wrapper{
  max-width:var(--sheet);
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* single.html wraps post content in .prose; the editor does not, so the prose
   rules are re-pointed at the editor root to keep writing and publishing aligned */
.is-root-container :is(h1,h2,h3,h4,h5,h6){
  margin:32px 0 12px;line-height:1.2;letter-spacing:-0.025em;
  max-width:36ch;text-wrap:balance;
}
.is-root-container h1{font-size:var(--wp--preset--font-size--heading);}
.is-root-container h2{font-size:1.45rem;}
.is-root-container h3{font-size:1.18rem;}
.is-root-container :is(ul,ol){margin:0 0 16px;padding-left:1.2em;max-width:60ch;}
.is-root-container li{margin-bottom:6px;}
.is-root-container blockquote{
  margin:28px 0;padding-left:20px;border-left:2px solid var(--hair-2);max-width:60ch;
}
.is-root-container :is(pre,code,samp){font-family:var(--wp--preset--font-family--data);font-weight:500;}
.is-root-container :is(hr,.wp-block-separator){margin:36px 0;border:0;border-top:1px solid var(--hair);}

/* ══ Feeds band ══ the Feeds section reads as its own panel. #f6f6f6 is a
   neutral grey (zero red-over-blue) a touch lighter than the old warm tint —
   Matt: "too tan… prefer a lean toward whiter and cleaner gray."

   The lighter ground is what lets the band-scoped colour overrides go: the
   ORIGINAL icon-sampled accent #0b45c9 measures 7.17:1 here and --ink-soft
   7.06:1, both clearing the site's 7:1 AAA floor. So there is once again ONE
   accent value site-wide, which is what three separate reviewers expected to
   find and did not. */
#feeds{ background:var(--band); }
/* the ink-terminal rule paints the LAST section's text in paper colour. #feeds
   now sets its own light background, and an ID outranks that rule's selector —
   so if Feeds ever became the last section its text would be paper-on-#f6f6f6,
   i.e. invisible. Pin the colours here so section order can never do that. */
#feeds,
#feeds :is(h1,h2,h3,p,li,dt,dd,a){ color:var(--ink); }
#feeds .fine,#feeds .cap{ color:var(--ink-soft); }
#feeds .appmark .nm,#feeds .hang.spec .t{ color:var(--accent); }
#feeds a:not(.wp-block-button__link){ color:var(--accent); }
#feeds .wp-block-button__link{ color:var(--paper); }
#feeds .is-style-outline .wp-block-button__link{ color:var(--ink); }

/* ══ Signup ══ */
.signup{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
.signup input[type=email]{
  font-family:inherit;font-size:15.5px;font-weight:400;color:var(--ink);
  background:var(--paper);border:1px solid var(--ink);border-radius:0;
  padding:13px 15px;flex:1 1 280px;max-width:340px;min-width:0;}
.signup input[type=email]::placeholder{color:var(--ink-soft);opacity:1;}
.signup input[type=email]:focus{outline:2px solid var(--accent);outline-offset:2px;}
.signup + .fine{margin-top:16px;}
main section.sec:last-of-type .signup input[type=email]{
  background:transparent;border-color:var(--paper);color:var(--paper);}
main section.sec:last-of-type .signup input[type=email]::placeholder{color:var(--mute);}

/* ══ Plates ══ */
.plate-wrap{margin-top:clamp(38px,5vw,62px);}
.plate,.is-style-plate{border:1px solid var(--hair-2);overflow:hidden;border-radius:10px;
  box-shadow:0 1px 2px rgba(17,17,17,.05),0 26px 54px -28px rgba(17,17,17,.32);}
.plate img,.is-style-plate img{width:100%;height:auto;display:block;}

/* ══ Split ══ */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.76fr);
  gap:clamp(22px,3.4vw,44px);align-items:start;margin-top:28px;}
.split > *{min-width:0;}
.split .shot{margin:0;}
.split .shot img{width:100%;height:auto;display:block;border-radius:8px;
  border:1px solid var(--hair-2);
  box-shadow:0 1px 2px rgba(17,17,17,.05),0 16px 34px -22px rgba(17,17,17,.30);}
.split .hang{margin-top:24px;}
.split .hang.spec .r{grid-template-columns:104px minmax(0,1fr);padding:11px 0;}
.split .cta-row{margin-top:22px;}
.split p{max-width:52ch;}
@media (min-width:821px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,.86fr);align-items:center;}
}
@media (max-width:820px){
  .split{grid-template-columns:minmax(0,1fr);row-gap:30px;}
  .split .shot{max-width:520px;}
}

/* ══ Two-up ══ */
.duo{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(20px,3vw,42px);align-items:start;}
.duo > *{min-width:0;margin:0;}
.duo img,.is-style-capture img{width:100%;height:auto;display:block;border-radius:10px;
  box-shadow:0 1px 3px rgba(17,17,17,.06),0 18px 40px -26px rgba(17,17,17,.34);}
@media (max-width:760px){.duo{grid-template-columns:1fr;}}
.cap,.is-style-cap{margin:14px 0 0;font-family:var(--wp--preset--font-family--body);font-weight:400;
  font-size:13.5px;letter-spacing:0;line-height:1.5;color:var(--ink-soft);
  max-width:60ch;}
.cap b,.is-style-cap b{color:var(--ink);font-weight:500;}

/* ══ Hanging lists ══ */
.hang{margin:34px 0 0;padding:0;}
.hang .r{display:grid;grid-template-columns:220px minmax(0,1fr);
  column-gap:clamp(20px,3vw,40px);padding:17px 0;border-top:1px solid var(--hair);}
.hang .r:last-child{border-bottom:1px solid var(--hair);}
.hang .t{font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:16px;
  letter-spacing:-0.02em;line-height:1.4;display:flex;align-items:center;gap:10px;margin:0;max-width:none;}
.hang .d{margin:0;color:var(--ink-soft);font-size:15.5px;line-height:1.55;max-width:56ch;}
.hang .d a,.prose a,.faq .a a,section p a{color:var(--accent);}
.hang.spec .t{font-family:var(--wp--preset--font-family--data);font-weight:500;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  line-height:1.9;}
.hang.spec .d{color:var(--ink);font-weight:500;font-size:16px;}
.hang.spec .r{grid-template-columns:150px minmax(0,1fr);padding:13px 0;}
.hang.push{margin-top:38px;}

/* ══ The shelf ══ */
.shelf{margin:34px 0 0;padding:0;}
.shelf .a{display:grid;grid-template-columns:minmax(0,1fr) auto;
  column-gap:clamp(18px,3vw,36px);align-items:baseline;
  padding:21px 0;border-top:1px solid var(--hair);}
.shelf .a:last-child{border-bottom:1px solid var(--hair);}
.shelf .nm{font-family:var(--wp--preset--font-family--display);font-weight:700;
  font-size:1.28rem;letter-spacing:-0.025em;line-height:1.25;margin:0;max-width:none;}
.shelf .nm a{text-decoration:none;border-bottom:1px solid var(--hair-2);padding-bottom:2px;}
.shelf .nm a:hover{border-bottom-color:var(--ink);}
.shelf .st{font-family:var(--wp--preset--font-family--data);font-weight:500;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  margin:0;max-width:none;white-space:nowrap;text-align:right;}
.shelf .st.live{color:var(--ink);}
.shelf .d{grid-column:1 / -1;margin:7px 0 0;color:var(--ink-soft);
  font-size:15.5px;line-height:1.55;max-width:58ch;}
.shelf .w{grid-column:1 / -1;margin:9px 0 0;font-family:var(--wp--preset--font-family--data);
  font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);max-width:none;}
.shelf .w a{border-bottom:1px solid var(--hair-2);padding-bottom:1px;text-decoration:none;}
.shelf .w a:hover{border-bottom-color:var(--ink);}
@media (max-width:520px){
  .shelf .a{grid-template-columns:minmax(0,1fr);row-gap:5px;}
  .shelf .st{text-align:left;}
}

/* ══ The ink spread ══ */
.spread-ink{background:var(--ink);color:var(--paper);}
.spread-ink .h2{color:var(--paper);}
.spread-ink .lede{color:var(--mute);}
.spread-ink .fine{color:var(--mute);}
.spread-ink a{color:var(--paper);}
.nones{margin:34px 0 0;padding:0;}
.nones .nr{padding:19px 0;border-top:1px solid var(--hair-inv);}
.nones .nr:last-child{border-bottom:1px solid var(--hair-inv);}
.nones .what{font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:1.28rem;
  letter-spacing:-0.025em;line-height:1.25;margin:0;max-width:none;}
.nones .gloss{font-family:var(--wp--preset--font-family--body);font-style:normal;
  font-weight:400;font-size:15.5px;letter-spacing:0;line-height:1.55;
  color:var(--mute);margin:7px 0 0;max-width:56ch;}

/* ══ Ink terminal ══ the last section of a sheet is the sheet's end */
main section.sec:last-of-type{ background:var(--ink); color:var(--paper); border-top:0; }
main section.sec:last-of-type .h2{ color:var(--paper); }

/* quiet type → mute (7.46:1 on ink); ink-soft would be 2.48:1 */
main section.sec:last-of-type :is(.lede,.fine,.cap,.meta,.appmark .nm,.hang .t,.hang .d,
  .hang.spec .t,.entries .wp-block-post-date,.entries .wp-block-post-excerpt p,
  .shelf .st,.shelf .d,.shelf .w,.faq .a,.prose th,.index .st){ color:var(--mute); }

/* links and values → paper (18.26:1); accent on ink is 2.44:1 and must never win here */
main section.sec:last-of-type :is(a,.hang.spec .d,.faq summary){ color:var(--paper); }

main section.sec:last-of-type :is(.hang .r,.entries > li,.shelf .a,.faq,.faq details,
  .turn,.index li,.split .shot img,.plate){ border-color:var(--hair-inv); }

main section.sec:last-of-type :focus-visible{ outline-color:var(--paper); }
main section.sec:last-of-type .cta-row .wp-block-button__link{
  border-color:var(--paper); background:var(--paper); color:var(--ink); }
main section.sec:last-of-type .cta-row .wp-block-button__link:hover{
  background:transparent; color:var(--paper); }

/* an ink rule under a black band is redundant — let the band's edge be the transition */
main:has(section.sec:last-of-type) + .colophon{ border-top-width:0; }

/* ══ Questions ══ */
.faq{margin-top:30px;border-top:1px solid var(--hair);max-width:62ch;}
.faq details{border-bottom:1px solid var(--hair);margin:0;}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;display:flex;gap:20px;
  align-items:baseline;font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:17px;
  letter-spacing:-0.02em;line-height:1.35;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";margin-left:auto;font-family:var(--wp--preset--font-family--data);
  font-weight:500;font-size:17px;line-height:1;color:var(--ink-soft);flex:none;}
.faq details[open] summary::after{content:"–";}
.faq .a{padding:0 0 20px;margin:0;color:var(--ink-soft);font-size:15.5px;}
.faq .a a{color:var(--ink);text-underline-offset:3px;}

/* ══ Colophon ══ */
.colophon{border-top:2px solid var(--ink);}
.colophon .sheet{padding-top:clamp(44px,5vw,64px);padding-bottom:34px;}
.cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:clamp(24px,3.4vw,52px);row-gap:44px;}
.cols > *{border-top:1px solid var(--hair);padding-top:18px;}
.cols h2{font-family:var(--wp--preset--font-family--data);font-weight:500;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
  margin:0 0 16px;}
.imprint .rt:only-child{margin-left:0;}
.cols ul{list-style:none;margin:0;padding:0;font-size:15px;line-height:1.5;}
.cols li{margin-bottom:9px;}
.cols a{text-decoration:none;border-bottom:1px solid var(--hair-2);
  padding-bottom:1px;}
.cols a:hover{border-bottom-color:var(--ink);}
.cols p{font-size:14.5px;color:var(--ink-soft);margin:14px 0 12px;max-width:34ch;}

.index{list-style:none;margin:0;padding:0;}
.index li{display:flex;align-items:baseline;gap:10px;padding:8px 0;
  border-top:1px solid var(--hair);font-size:15px;}
.index li:first-child{border-top:0;padding-top:0;}
.index .nm{font-weight:500;}
.index .st{margin-left:auto;font-family:var(--wp--preset--font-family--data);font-weight:500;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);white-space:nowrap;}
.index .st.here{color:var(--ink);}
.index a{border-bottom:0;}
.index a .nm{border-bottom:1px solid var(--hair-2);padding-bottom:1px;}
.index a:hover .nm{border-bottom-color:var(--ink);}

.imprint{margin-top:clamp(44px,5vw,64px);padding-top:22px;
  border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 30px;
  font-size:13.5px;color:var(--ink-soft);}
.imprint p{margin:0;font-size:13.5px;max-width:none;}
.imprint .rt{margin-left:auto;}
.imprint a{color:var(--ink);}

/* ══ Search field ══ */
.wp-block-search{margin-top:30px;}
.wp-block-search .wp-block-search__label:not(.screen-reader-text){display:block;margin-bottom:10px;
  font-family:var(--wp--preset--font-family--data);font-weight:500;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}
.wp-block-search .wp-block-search__inside-wrapper{display:flex;flex-wrap:wrap;gap:10px;}
.wp-block-search .wp-block-search__input{font-family:inherit;font-size:15.5px;font-weight:400;
  color:var(--ink);background:var(--paper);border:1px solid var(--ink);border-radius:0;
  padding:13px 15px;flex:1 1 280px;max-width:340px;min-width:0;}
.wp-block-search .wp-block-search__input::placeholder{color:var(--ink-soft);opacity:1;}
.wp-block-search .wp-block-search__button{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--wp--preset--font-family--body);font-weight:500;font-size:15.5px;
  padding:13px 24px;margin:0;text-decoration:none;cursor:pointer;
  border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  border-radius:0;transition:background .12s ease,color .12s ease;}
.wp-block-search .wp-block-search__button:hover{background:var(--paper);color:var(--ink);}

/* ══ Entry lists ══ */
.col > .wp-block-query{margin-top:clamp(30px,3.6vw,44px);}
.entries{margin:0;padding:0;list-style:none;}
.entries .wp-block-post-title a:hover{color:var(--accent);}
.entries > li{padding:22px 0;border-top:1px solid var(--hair);}
.entries > li:last-child{border-bottom:1px solid var(--hair);}
.entries .wp-block-post-date{font-family:var(--wp--preset--font-family--data);font-weight:500;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  margin:0 0 7px;}
.entries .wp-block-post-title{font-family:var(--wp--preset--font-family--display);font-weight:700;
  font-size:1.28rem;letter-spacing:-0.025em;line-height:1.25;margin:0;max-width:38ch;}
.entries .wp-block-post-title a{text-decoration:none;}
.entries .wp-block-post-title a:hover{text-decoration:underline;text-underline-offset:4px;}
.entries .wp-block-post-excerpt{margin:8px 0 0;}
.entries .wp-block-post-excerpt p{margin:0;color:var(--ink-soft);font-size:15.5px;
  line-height:1.55;max-width:56ch;}

.pager{margin-top:36px;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 24px;
  font-size:14.5px;}
.pager .wp-block-query-pagination-numbers{display:flex;flex-wrap:wrap;gap:14px;}
.pager a{text-decoration:none;border-bottom:1px solid var(--hair-2);padding-bottom:1px;}
.pager a:hover{border-bottom-color:var(--ink);}
.pager .page-numbers.current{font-weight:500;}
.pager .wp-block-query-pagination-next{margin-left:auto;}

.meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 20px;
  font-family:var(--wp--preset--font-family--data);font-weight:500;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}
.meta > *{margin:0;max-width:none;}
.meta a{text-decoration:none;border-bottom:1px solid var(--hair-2);}
.meta a:hover{border-bottom-color:var(--ink);}

.turn{margin-top:46px;padding-top:22px;border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:12px 30px;font-size:14.5px;}
.turn .wp-block-post-navigation-link{margin:0;}
.turn a{text-decoration:none;border-bottom:1px solid var(--hair-2);padding-bottom:1px;}
.turn a:hover{border-bottom-color:var(--ink);}
.turn .post-navigation-link-next{margin-left:auto;}

/* ══ Prose ══ */
.prose :is(h1,h2,h3,h4,h5,h6){margin:32px 0 12px;line-height:1.2;letter-spacing:-0.025em;
  max-width:36ch;text-wrap:balance;}
.prose > :is(h1,h2,h3,h4,h5,h6):first-child,
.prose > * > :is(h1,h2,h3,h4,h5,h6):first-child{margin-top:0;}
.prose h1{font-size:var(--wp--preset--font-size--heading);}
.prose h2{font-size:1.45rem;}
.prose h3{font-size:1.18rem;}
.prose :is(h4,h5,h6){font-size:1.02rem;}
.prose :is(ul,ol){margin:0 0 16px;padding-left:1.2em;max-width:60ch;}
.prose li{margin-bottom:6px;}
.prose a{text-underline-offset:3px;}
.prose figure{margin:28px 0;}
.prose blockquote{margin:28px 0;padding-left:20px;border-left:2px solid var(--hair-2);
  max-width:60ch;}
.prose blockquote cite{display:block;margin-top:10px;font-style:normal;
  font-family:var(--wp--preset--font-family--data);font-weight:500;font-size:11.5px;
  letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft);}
.prose :is(pre,code,samp){font-family:var(--wp--preset--font-family--data);font-weight:500;}
.prose code{font-size:.92em;}
.prose pre{margin:0 0 16px;padding:16px 18px;overflow-x:auto;font-size:13.5px;line-height:1.6;
  border:1px solid var(--hair);}
.prose table{width:100%;border-collapse:collapse;font-size:15.5px;}
.prose :is(th,td){text-align:left;padding:11px 14px 11px 0;border-bottom:1px solid var(--hair);}
.prose th{font-family:var(--wp--preset--font-family--data);font-weight:500;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}
.prose :is(hr,.wp-block-separator){margin:36px 0;border:0;border-top:1px solid var(--hair);}

/* ══ Record ══ */
.prose .record{margin:0;padding:30px 0 0;border-top:1px solid var(--hair);}
.prose .record + .record{margin-top:30px;}
.prose .record .when{font-family:var(--wp--preset--font-family--data);font-weight:500;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  margin:0 0 15px;max-width:none;}
.prose .record .said{font-size:clamp(1.14rem,1.9vw,1.4rem);line-height:1.5;
  letter-spacing:-0.006em;margin:0;max-width:44ch;color:var(--ink);}
.prose .record:last-of-type{border-bottom:1px solid var(--hair);padding-bottom:34px;}

/* ══ Responsive ══ */
@media (max-width:900px){
  :root{--mast-h:84px;}
  .mast-in{gap:14px;}
  .jay{width:44px;height:44px;}
  .nameplate{font-size:34px;}
  .mast-links{gap:16px;font-size:13.5px;}
  .folio{padding-top:0;margin-bottom:18px;}
  .folio-run{display:none;}
  .cols{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:38px;}
  .hang .r{grid-template-columns:minmax(0,1fr);row-gap:5px;}
  .hang.spec .r{grid-template-columns:150px minmax(0,1fr);row-gap:0;}
}
@media (max-width:640px){
  :root{--mast-h:70px;}
  .cols{grid-template-columns:minmax(0,1fr);row-gap:34px;}
  .imprint .rt{margin-left:0;}
  .mast-in{gap:10px;}
  .jay{width:38px;height:38px;}
  .nameplate{font-size:27px;letter-spacing:-0.038em;}
  .mast-links a:not(.now){display:none;}
}
@media (max-width:400px){
  .nameplate{font-size:23px;letter-spacing:-0.034em;}
  .mast-links{font-size:12.5px;}
}

/* ══ The accent is the data face's colour ══ 7.50:1 on paper; uppercase tracked labels only.
   NEVER .cap, blockquote cite, or any sentence — those are prose set in the mono face. */
.appmark .nm,.hang.spec .t,.cols h2,.entries .wp-block-post-date,.meta,
.shelf .st,.index .st,.prose th{ color:var(--accent); }

/* the only unambiguously systemic home for a colour: keyboard focus.
   the existing outline-offset:3px is load-bearing — it keeps the ring off ink fills,
   where accent would collapse to 2.44:1 */
:focus-visible{ outline-color:var(--accent); }

/* claim the selection colour */
::selection{ background:var(--accent); color:var(--paper); }          /* 7.50:1 */
main section.sec:last-of-type ::selection{ background:var(--paper); color:var(--ink); }  /* 18.26:1 */

/* the page has no dark mode — tell the browser, and take back the search field's accent */
:root{ color-scheme:light; accent-color:var(--accent); caret-color:var(--ink); }

/* the only tinted shadow on a page whose law permits shadows on screenshots only */
.appmark img{ box-shadow:0 1px 2px rgba(17,17,17,.10); }

/* ══ Frame ══ */
/* current page comes from the body class, not from hand-typed markup */
.mast-links a.now{ color:var(--ink-soft); }
body.home .mast-links a[href="/#feeds"]{ color:var(--ink); }
body:not(.home) .mast-links a[href="/updates/"]{ color:var(--ink); }

@media (max-width:640px){
  .mast-links a:not(.now){ display:inline; }   /* neutralises line 412 at equal specificity */
  .mast{ position:relative; }                  /* was sticky — give the phone its bar back */
  :root{ --mast-h:0px; }                       /* nothing overlays, so no anchor offset */
  .mast-in{ grid-template-columns:auto minmax(0,1fr); height:auto;
            row-gap:10px; padding-top:14px; padding-bottom:16px; }
  .nameplate{ justify-self:start; }
  .mast-links{ grid-column:1 / -1; justify-self:start; gap:20px; }
}