/* =============================================================================
   Blog post (main-article) — owned surface, on the bs-chrome token set.
   Light store palette, deck type scale, bevel corners, Roman-only weights.

   Layout: one reading measure with the post's metadata hanging in the left
   margin. The rail and the prose open on the same hairline, so the top of the
   article reads as a single line broken by the gutter — the rail is annotation,
   the prose is the page, and both share that axis.

   Measure: 820px. The old layout ran the copy in 6 of 12 grid columns (~725px,
   ~60ch at 24px), under the 65-75ch band DESIGN.md sets for reading. The grid
   could only offer 6 columns (60ch) or 8 (80ch), so the measure is stated
   directly instead of derived from columns.

   Frame: --desktopMaxWidth, the measure the nav pill and the blog index grid
   use, so the rail's hairline opens on the same left edge as the logo and the
   first card — index and post share one left axis. It stops growing at
   --bsa-frame: the width where the rail's void on the left and an empty void of
   the same size on the right put the reading column exactly on the page centre.
   Past that only the outer margins grow, never the composition.
   ============================================================================= */

article.article-template {
  --bsa-measure: 820px;   /* ~68ch at 24px body */
  /* 160, the scale token above 120: at 140 the longest English date
     ("September 22, 2025") measured 142px and wrapped */
  --bsa-rail: 160px;
  --bsa-gutter: 32px;
  --bsa-frame: calc(
    var(--bsa-rail) + var(--bsa-gutter) + var(--bsa-measure) +
    var(--bsa-gutter) + var(--bsa-rail) + 32px
  );

  box-sizing: border-box;
  width: 100%;
  max-width: min(var(--desktopMaxWidth), var(--bsa-frame));
  margin: 0 auto !important;
  padding: 0 16px;

  /* [rail] [prose], flush left inside the frame, so the metadata column lands on
     the store's left axis at every width; the prose track shrinks rather than
     overflowing once the frame is narrower than the pair. No third track for the
     right-hand void — an empty 1fr would still take a 32px gutter with it. */
  display: grid !important;
  grid-template-columns: var(--bsa-rail) minmax(0, var(--bsa-measure));
  column-gap: var(--bsa-gutter);
  /* sticky needs an item shorter than its row; stretch would pin it */
  align-items: start;
}

/* The featured image never renders: every post opens with its own image inside
   the body copy, so a hero would print the same asset twice. Hiding the whole
   container, not just the media inside it (the old rule), keeps it out of the
   grid — as an empty item it still claimed a cell. */
.article-template__hero-container { display: none; }

/* Share is off for now — the rail carries the post's metadata instead. */
article div.article-template__social-sharing { display: none; }

/* The rail is the one item placed by row as well as column: it takes the margin
   column and the prose's row, so the two hairlines land on one line and the
   masthead keeps the row above. Everything else only names its column and falls
   into rows in DOM order, so reordering the blocks in the customizer still
   reorders the page. */
.bsa-rail { grid-column: 1 / 2; grid-row: 2; }
.bsa-head,
article div.article-template__content,
.bsa-adjacent,
article div.article-template__back,
article div.article-template__comment-wrapper,
/* app blocks (a review or signup embed) render inside a .page-width wrapper */
article.article-template > .page-width { grid-column: 2 / 3; }

/* =============================================================================
   1. MASTHEAD
   ============================================================================= */
.bsa-head {
  margin: 80px 0 56px;
  letter-spacing: 0;
}
.bsa-title {
  margin: 0 !important;
  font-family: var(--font-display);
  font-style: normal;
  /* 400, and the aliased family — the "- 55 Roman" family has a single 400 face,
     so asking it for 500 leaves the browser one step from synthesising weight */
  font-weight: 400;
  /* Display, the page's one line at this scale (DESIGN.md §3). 6vw so the title
     reaches its 72px cap by ~1200 and stays clear of the body headings below it
     through the tablet range. */
  font-size: clamp(42px, 6vw, 72px);
  /* 1.12, tighter than the deck's 72/88: post titles run to three lines here
     (the longest is 52 characters) and at 88 the lines stop reading as one
     sentence */
  line-height: 1.12;
  letter-spacing: -.01em;
  color: #000;
}
/* Manual excerpt only — see the section comment. Subhead scale in the secondary
   grey, so it reads as a lede and not as the first paragraph. */
.bsa-lede {
  margin: 24px 0 0 !important;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0;
  color: #70777A;
}

/* =============================================================================
   2. METADATA RAIL
   Same construction as the product page's .bss-spec: a hairline, then the data
   under it. Mono and uppercase, because these are readouts, not prose
   (The Caliper Rule). 12px, the blog index's card-meta size — at 13 the longest
   month names ran to 141px and wrapped the date onto two lines.
   ============================================================================= */
.bsa-rail {
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  /* sticks under the chrome (pill 18+76, marquee to 128) while the post scrolls */
  position: sticky;
  top: 144px;
}
.bsa-rail__line {
  display: block;
  margin: 0 0 12px !important;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #70777A;
}
.bsa-rail__line:last-child { margin-bottom: 0 !important; }
/* the date is the one value that leads, so it takes the ink */
.bsa-rail__line--date { color: #000; }
a.bsa-rail__topic {
  text-decoration: none;
  transition: color var(--dur);
}
a.bsa-rail__topic:hover { color: var(--brand); }

/* =============================================================================
   3. PROSE
   ============================================================================= */
article div.article-template__content {
  max-width: none;
  width: 100%;
  margin: 0 !important;
  /* the rail's hairline, continued across the gutter */
  padding-top: 40px;
  border-top: 1px solid var(--hairline);
  letter-spacing: 0;
}
article div.article-template__content > *:first-child { margin-top: 0 !important; }
article div.article-template__content > *:last-child { margin-bottom: 0 !important; }

/* Copy pasted from Docs/Word arrives with an inline white highlight on every
   run of text. Invisible on the white page, but on any tinted surface (the
   blockquote plate) it renders as a white box hugging each line. Kill inline
   backgrounds wherever they landed in the prose. */
article div.article-template__content [style] {
  background: transparent !important;
}

article div.article-template__content p {
  color: #000 !important;
  /* 32px, was 48: at a 32px leading, 48 read as separate blocks rather than as
     one argument running down the page */
  margin: 0 0 32px !important;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0 !important;
}

/* ---- Links ---- */
article div.article-template__content a {
  color: var(--brand) !important;
  text-decoration: underline;
  /* 1px on a 4px offset: the old 0.2rem rule drew a 2px bar tight under the
     text and swallowed the descenders */
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--dur);
  letter-spacing: 0 !important;
}
article div.article-template__content a:hover { color: #000 !important; }
/* linked images: the underline would draw a violet bar across the plate */
article div.article-template__content a:has(img) {
  display: block;
  text-decoration: none;
}

/* ---- Author emphasis ----
   <strong> and <b> from the rich-text editor arrive as weight 700 against a
   family whose only face is 400, so the browser draws synthetic bold. Point
   them at a real heavier cut at weight 400 instead: bold an author typed in
   the editor still reads as bold in the copy, and nothing is faux.

   That cut is 65 Medium — blog bold is 65 Medium, not 75 Bold (Max, Aug 2026;
   Bold shipped for a day and read too heavy) — declared in
   sections/main-article.liquid. The "…- Medium" family this rule used to name
   is an alias for the ROMAN file (header.liquid), which made author bold
   render as regular; hence the distinct "- 65 Medium" name. Zen Kaku Medium
   follows for JP glyphs the Haas file doesn't cover.

   In BODY copy only. The thick cut never goes in a headline (Max, July 2026) —
   see the next rule, which is not optional: the editor wraps some subheads in
   <strong> (h3 "In-stock and shipping fast" in the holiday post), so without it
   this rule lands the medium cut in a 48px headline. */
article div.article-template__content strong,
article div.article-template__content b {
  font-family: "Neue Haas Grotesk Display Pro - 65 Medium", "Zen Kaku Gothic New - Medium", var(--font-display);
  font-weight: 400;
}
/* Headings take the heading's own face, whatever the editor wrapped them in —
   inherit rather than a named family, so a <strong> inside the mono h5/h6 label
   stays mono. 400 keeps the browser from synthesising what it can't find. */
article div.article-template__content :is(h1, h2, h3, h4, h5, h6) strong,
article div.article-template__content :is(h1, h2, h3, h4, h5, h6) b {
  font-family: inherit;
  font-weight: 400;
}
article div.article-template__content em,
article div.article-template__content i { font-style: italic; }

/* ---- Headings ----
   Deck scale, one step under the masthead, and each one binds to the copy
   beneath it: the space above a heading is always larger than the space below.
   ---- */
article div.article-template__content h1,
article div.article-template__content h2,
article div.article-template__content h3,
article div.article-template__content h4,
article div.article-template__content h5,
article div.article-template__content h6 {
  color: #000 !important;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0 !important;
}
/* The ramp keeps the shipped 64/48 pair for h2/h3 — most posts here use h3 as
   their top-level section heading and never open an h2 at all, so shrinking h3
   flattened whole articles into one voice. What changed instead is the title
   above them: at its 72px cap it leads the ramp rather than losing to it. */
article div.article-template__content h1 {
  margin: 80px 0 24px !important;
  font-size: 72px; line-height: 88px; letter-spacing: -.01em !important;
}
article div.article-template__content h2 {
  margin: 80px 0 24px !important;
  font-size: 64px; line-height: 72px;
}
article div.article-template__content h3 {
  margin: 56px 0 16px !important;
  font-size: 48px; line-height: 56px;
}
article div.article-template__content h4 {
  margin: 40px 0 12px !important;
  font-size: 32px; line-height: 40px;
}
/* the deepest levels drop to the Label voice — at body size they were
   indistinguishable from the paragraph under them */
article div.article-template__content h5,
article div.article-template__content h6 {
  margin: 40px 0 16px !important;
  font-family: var(--font-mono);
  font-size: 15px; line-height: 16px;
  letter-spacing: .04em !important;
  text-transform: uppercase;
  color: #70777A !important;
}

/* ---- Pull quote ----
   Dawn ships blockquote as an italic, grey, left-bordered block; the border is
   the side stripe DESIGN.md rules out. Reset it and lift the quote onto the
   store's own frame tone instead: at 32/40 against 24/32 copy the type alone is
   only one step up, so with no plate it read as a section heading rather than
   as quoted material. A bare slash kicker was tried here first and orphaned —
   the "/ LABEL" system needs its label, and one violet glyph on its own line
   reads as a character that failed to render. The opening quote mark below
   works where the slash didn't because it explains itself; keep it at text
   size — a giant serif mark is the editorial register DESIGN.md rules out. */
article div.article-template__content blockquote {
  margin: 56px 0 !important;
  padding: 32px 40px !important;
  background: #F4F3F3;
  border: 0 !important;
  border-radius: 3px 3px 24px 3px;
  corner-shape: round round bevel round;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0 !important;
  color: #000 !important;
}
article div.article-template__content blockquote::before {
  content: "\201C";
  display: block;
  /* the glyph sits high in its em box; pull the first text line up under it */
  margin-bottom: -8px;
  font-family: var(--font-display);
  font-size: inherit;
  line-height: inherit;
  color: var(--brand);
}
article div.article-template__content blockquote p {
  margin: 0 !important;
  font-size: inherit;
  line-height: inherit;
  color: inherit !important;
}
article div.article-template__content blockquote p + p { margin-top: 24px !important; }

/* ---- Lists ---- */
article div.article-template__content ul,
article div.article-template__content ol {
  margin: 0 0 32px !important;
  /* px, not 1.2em: the list inherits the wrapper's 16px, so an em indent sizes
     itself off 16 and hangs the marker 19px from 24px copy */
  padding-left: 28px;
}
article div.article-template__content ul { list-style-type: disc; }
article div.article-template__content ol { list-style-type: decimal; }
article div.article-template__content li {
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  color: #000;
  letter-spacing: 0 !important;
}
article div.article-template__content li:last-child { margin-bottom: 0; }
article div.article-template__content li > ul,
article div.article-template__content li > ol { margin: 12px 0 0 !important; }
article div.article-template__content li p { margin: 0 !important; }

/* ---- Images ----
   Block, not inline: one legacy post opens with an image and its first sentence
   inside the same paragraph, and as an inline box it sat on the text baseline.
   16px of its own air on each side, so an image alone in a paragraph clears
   48px top and bottom while an image followed by copy still has a gap. */
article div.article-template__content img {
  display: block;
  width: 100%;
  height: auto;
  border: none !important;
  /* bevel corner language, band-media scale — matches .bss-media in bs-product.css */
  border-radius: 3px 3px 18px 3px !important;
  corner-shape: round round bevel round;
  box-shadow: none !important;
  margin: 16px 0 !important;
}

/* ---- Code, rules, tables ---- */
article div.article-template__content code,
article div.article-template__content kbd {
  padding: 2px 6px;
  background: var(--off-white);
  font-family: var(--font-mono);
  font-size: .8em;
  border-radius: 2px 2px 6px 2px;
  corner-shape: round round bevel round;
}
article div.article-template__content pre {
  margin: 32px 0 !important;
  padding: 24px;
  overflow-x: auto;
  background: var(--off-white);
  font-family: var(--font-mono);
  font-size: 15px; line-height: 24px;
  border-radius: 3px 3px 14px 3px;
  corner-shape: round round bevel round;
}
article div.article-template__content pre code { padding: 0; background: none; font-size: inherit; }
article div.article-template__content hr {
  margin: 56px 0 !important;
  border: 0;
  border-top: 1px solid var(--hairline);
}
article div.article-template__content table {
  width: 100%;
  margin: 32px 0 !important;
  border-collapse: collapse;
}
article div.article-template__content th,
article div.article-template__content td {
  padding: 12px 16px 12px 0;
  border-top: 1px solid var(--hairline);
  text-align: left;
  vertical-align: top;
  font-size: 18px;
  line-height: 24px;
}
article div.article-template__content th {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #70777A;
}

/* =============================================================================
   4. WHAT'S NEXT — the two neighbouring posts, in the blog's own order
   ============================================================================= */
.bsa-adjacent {
  margin-top: 120px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.bsa-adjacent__item {
  grid-column: 1;
  display: block;
  color: #000;
  text-decoration: none;
}
/* each side keeps its column even when the other post doesn't exist: on the
   newest post there is nothing newer, and the gap says so */
.bsa-adjacent__item--older { grid-column: 2; text-align: right; }
.bsa-adjacent__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #70777A;
}
.bsa-adjacent__label svg {
  flex: 0 0 auto;
  color: var(--brand);
  transition: transform var(--dur) var(--ease-signature);
}
.bsa-adjacent__item--newer .bsa-adjacent__label svg { transform: scaleX(-1); }
.bsa-adjacent__item--newer:hover .bsa-adjacent__label svg { transform: scaleX(-1) translateX(4px); }
.bsa-adjacent__item--older:hover .bsa-adjacent__label svg { transform: translateX(4px); }
.bsa-adjacent__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0;
  color: #000;
  transition: color var(--dur);
}
.bsa-adjacent__item:hover .bsa-adjacent__title { color: var(--brand); }

/* =============================================================================
   5. BACK TO BLOG — same affordance as the blog index's .bsb-back
   ============================================================================= */
article div.article-template__back {
  width: 100%;
  margin: 56px 0 160px !important;
  text-align: left;
  letter-spacing: 0;
}
article div.article-template__back a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  text-decoration: none;
  color: #000;
  letter-spacing: 0 !important;
  transition: color var(--dur);
}
article div.article-template__back a svg {
  flex: 0 0 auto;
  width: 17px !important;
  height: 17px;
  color: var(--brand);
  transform: scaleX(-1);
  transition: transform var(--dur) var(--ease-signature);
}
article div.article-template__back a:hover { color: var(--brand); }
article div.article-template__back a:hover svg { transform: scaleX(-1) translateX(4px); }

/* Comments are off on this blog; if they come back, keep them on the measure —
   Dawn's own .page-width would inset them a second time. */
article div.article-template__comment-wrapper .page-width {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* =============================================================================
   6. UNDER 1400px — the frame (75vw) can no longer hold the rail, the gutter and
   the full measure, and shrinking the copy to keep a margin column would be
   paying for the annotation with the reading line. So the rail becomes a single
   row above the title and the measure gets the whole frame. Every item drops
   into one centred column, in DOM order (rail, masthead, prose, next, back).
   ============================================================================= */
@media only screen and (max-width: 1399px) {
  article.article-template {
    grid-template-columns: minmax(0, var(--bsa-measure));
    justify-content: center;
  }
  .bsa-rail,
  .bsa-head,
  article div.article-template__content,
  .bsa-adjacent,
  article div.article-template__back,
  article div.article-template__comment-wrapper,
  article.article-template > .page-width {
    grid-column: 1 / 2;
    grid-row: auto;
  }
  .bsa-rail {
    position: static;
    margin-top: 80px;
    padding-top: 0;
    border-top: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 24px;
    row-gap: 8px;
  }
  /* the row-gap owns the spacing now, not the stacked line's margin */
  .bsa-rail__line { margin: 0 !important; }
  .bsa-head { margin: 24px 0 56px; }
}

/*- TABLET headings -------------------------------------------------------------
   The copy is still 24/32 here but the title is on its way down to the clamp
   floor, so the whole ramp steps down one token to stay under it. -*/
@media only screen and (min-width: 641px) and (max-width: 991.98px) {
  .bsa-lede { font-size: 24px; line-height: 32px; }
  article div.article-template__content h1 { margin: 56px 0 16px !important; font-size: 48px; line-height: 56px; }
  article div.article-template__content h2 { margin: 56px 0 16px !important; font-size: 42px; line-height: 48px; }
  article div.article-template__content h3 { margin: 56px 0 16px !important; font-size: 36px; line-height: 42px; }
  article div.article-template__content h4 { margin: 40px 0 12px !important; font-size: 26px; line-height: 32px; }
  article div.article-template__content blockquote { margin: 40px 0 !important; padding: 24px 32px !important; font-size: 24px; line-height: 32px; }
}

/*- MOBILE -*/
@media only screen and (max-width: 640.98px) {
  article.article-template { padding: 0 12px; }

  .bsa-rail { margin-top: 56px; column-gap: 16px; }
  .bsa-rail__line { font-size: 12px; }
  .bsa-head { margin: 20px 0 40px; }
  .bsa-lede { margin-top: 16px !important; font-size: 22px; line-height: 30px; }

  article div.article-template__content { padding-top: 32px; }
  article div.article-template__content p { margin: 0 0 24px !important; font-size: 18px; line-height: 24px; }
  article div.article-template__content li { font-size: 18px; line-height: 24px; }
  article div.article-template__content ul,
  article div.article-template__content ol { margin-bottom: 24px !important; padding-left: 24px; }
  /* copy is 18/24 here, so the ramp steps down again — same 1.4-1.8x jump from
     body to section heading the desktop ramp keeps */
  article div.article-template__content h1 { margin: 56px 0 16px !important; font-size: 42px; line-height: 48px; }
  article div.article-template__content h2 { margin: 56px 0 16px !important; font-size: 36px; line-height: 42px; }
  article div.article-template__content h3 { margin: 40px 0 12px !important; font-size: 32px; line-height: 40px; }
  article div.article-template__content h4 { margin: 32px 0 8px !important; font-size: 22px; line-height: 30px; }
  article div.article-template__content blockquote {
    margin: 40px 0 !important;
    padding: 24px !important;
    border-radius: 3px 3px 12px 3px;
    font-size: 22px; line-height: 30px;
  }
  article div.article-template__content img {
    margin: 12px 0 !important;
    border-radius: 3px 3px 12px 3px !important;
  }

  .bsa-adjacent {
    margin-top: 80px;
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .bsa-adjacent__item,
  .bsa-adjacent__item--older { grid-column: 1; text-align: left; }
  .bsa-adjacent__title { font-size: 22px; line-height: 30px; }

  article div.article-template__back { margin: 40px 0 120px !important; }
}

/* ---- Bevel fallback — no corner-shape support (Safari/iOS, Firefox): the
   bevel radius would render as a fat curve. Fill surfaces get the real cut
   via clip-path; convention and polygon template in bs-chrome.css
   ("BEVEL FALLBACK"). Inline code/kbd stay on the quiet corner — clip-path
   on line-wrapping inline boxes clips per fragment and mangles. ---- */
@supports not (corner-shape: round round bevel round) {
  article div.article-template__content blockquote {
    border-radius: 3px;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 24px), calc(100% - 24px) 100%, -80px calc(100% + 80px));
  }
  article div.article-template__content pre {
    border-radius: 3px;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 14px), calc(100% - 14px) 100%, -80px calc(100% + 80px));
  }
  article div.article-template__content img {
    border-radius: 3px !important;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 18px), calc(100% - 18px) 100%, -80px calc(100% + 80px));
  }
  article div.article-template__content code,
  article div.article-template__content kbd { border-radius: 2px; }
}