/* =============================================================================
   page-blog.css — /blog/ ONLY
   -----------------------------------------------------------------------------
   Everything shared (container, bands, buttons, arrowlink, cards, marquee, head,
   foot, type scale) lives in site.css and is used here by its existing class
   names. This file holds only the geometry that is unique to the Blog page.

   Every number is from notes/spec-blog.md (mockup 3204px wide = @2x, so raw
   pixels are halved). Section map, CSS px:
       header          0     – 112
       hero            112   – 532    (h 420)
       marquee         532   – 578    (h 46)
       featured-post   578   – 1003.5 (h 425.5; card 1168×361.5 at y642)
       [empty band]    1003.5– 2194   ← unfinished comp, filled — see blog.html
       footer          2194  – 2552.5
   ========================================================================== */

/* ------------------------------------------------------------------ hero --- *
   Ink targets (mockup CSS px): script 197.0→225.0 · "The" 255.0→320.0 ·
   "Journal." 339.0→404.5 (pitch 84) · intro 448.5→463.5 · marquee top rule 532.

   H1 SIZE — re-solved against Young Serif, three independent ways:
     cap('T') ink        61.00 CSS ÷ 0.764 (YS cap ratio)      = 79.8px
     ink width "The"     153.50 ÷ 1.920 (YS ink/px @100)       = 79.9px
     ink width "Journal." 325.00 ÷ 4.063                       = 80.0px
   -> 80px / 84px / letter-spacing 0.  It is NOT .t-display-l (68/72): that tier
   was measured off Services. The old 88px came from Fraunces' 0.70 cap ratio;
   Young Serif's is 0.764, which is the whole drift. Weight is 400 — Young Serif
   ships ONE weight and `font-weight: 700` was synthesising a fake bold.
   Paddings below are solved, not tuned: YS strut = 1.05em asc / 0.37em desc, so
   at 80/84 the first ink row sits boxTop + 5.2 and the second boxTop + 89.2. */
.blog-hero { padding: 84.3px 0 63.8px; }

.blog-hero__eyebrow { margin: 0; }

.blog-hero__title {
  margin: 14.5px 0 0;
  font-size: clamp(42px, 5vw, 80px);
  line-height: 84px;
  letter-spacing: 0;
}

/* inherits the shared 14px/27px body — the old 16px-era override is gone */
.blog-hero__intro {
  margin: 23.4px 0 0;
  max-width: 620px;
  color: var(--body);
}

/* CONTENT PASS — the approved copy's page title line and its two intro
   paragraphs. Both use the existing scale: the deck is .t-display-sm (the
   measured 23px display step) and the paragraphs are the shared 14/27 body on
   the same 620px measure as the comp's intro line. No new type, no new colour. */
.blog-hero__deck {
  margin: var(--sp-5) 0 0;
  max-width: 620px;
}
.blog-hero__lede {
  margin: var(--sp-3) 0 0;
  max-width: 620px;
  color: var(--body);
}

/* -------------------------------------------------------- featured post --- *
   Card: 1168 × 361.5, 1px #D8C2A8, radius 0, transparent fill.
   Columns: photo 583 · gutter 48.5 · copy (48px padding on the text side).
   The card now lives inside .blog-latest as that section's first post — see
   blog.html. Its own geometry is unchanged. */

.blog-featured__card {
  display: grid;
  grid-template-columns: 583px minmax(0, 1fr);
  column-gap: 48.5px;
  border: 1px solid var(--tan);
}

/* align-self:start is what reproduces the comp's 32px cream strip under the
   photo — the image keeps its 1166×656 aspect instead of covering the card. */
.blog-featured__media { align-self: start; }
.blog-featured__media img { height: auto; }

/* Paddings are SOLVED from the mockup's ink rows, not guessed:
     top    46.6 -> date ink 692.5–700.2   (mockup 692.5–700.0)
     right  48   -> measure 486.5, which is the value that forces the comp's
                    exact 3-line break (see .blog-featured__title below)
     bottom 46.2 -> card bottom 1003.5     (mockup 1003.5)
   line-height 1.2 is INHERITED CONTEXT for .arrowlink's line box; every other
   child sets its own. */
.blog-featured__body { padding: 46.6px 48px 46.2px 0; line-height: 1.2; }

/* mono 10px confirmed on ink width: "PLANNING" 46.78 + 7x0.5 tracking = 50.28
   vs mockup 50.0; "March 12, 2026" 83.02 vs mockup 83.0 at zero tracking. */
.blog-featured__meta {
  margin: 0 0 15.2px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 10px;
  line-height: 13px;
}
.blog-featured__cat  { color: var(--burgundy); letter-spacing: .05em; text-transform: uppercase; }
/* 14.5, not the 17 the spec quotes: 17 is the INK gap, and "PLANNING" carries a
   trailing 0.5px letter-space plus a 0.5px left bearing on the date. */
.blog-featured__date { color: var(--body); margin-left: 14.5px; }

/* 35.25px, not .t-display-s (44/52). Solved on ink width against Young Serif:
     "How to Choose the Right"  427.50 CSS / 12.147 = 35.19px
     "Wedding Videographer for" 461.00 CSS / 13.086 = 35.23px
   Line pitch measured cap-top to cap-top 724.8 -> 810.0 over 2 lines = 42.6.
   The spec's 38px came from the old 0.70 cap ratio and is superseded.
   No max-width: the 48px right padding gives 486.5, and "…Right Wedding" (593.5)
   and "…for Your" (555.2) both overflow it, so the comp's break is forced. */
.blog-featured__title {
  margin: 0;
  font-size: clamp(26px, 2.3vw, 35.25px);
  line-height: 42.5px;
  letter-spacing: 0;
}
.blog-featured__title a { text-decoration: none; }
.blog-featured__title a:hover { color: var(--burgundy); }

/* 14px at ls 0 reproduces both mockup lines to within 0.5px:
   L1 460.5 vs 461.0 · L2 411.8 vs 412.0. Leading is 26 here, not the site's 27
   — measured ink-top to ink-top 867.0 -> 893.0. */
.blog-featured__excerpt {
  margin: 14.8px 0 0;
  max-width: 487px;              /* measured text measure — longest line reaches x1311 */
  line-height: 26px;
  color: var(--body);
}

.blog-featured__body .arrowlink { margin-top: 24.9px; }

/* site.css now carries `.arrowlink--muted { border-bottom-color: rgba(91,13,26,.25) }`
   (= the measured #D0BABA on cream), so only the hover remains page-local.
   SHARED-LIBRARY REQUEST: lift this one line next to it — see report. */
.arrowlink--muted:hover { border-bottom-color: var(--burgundy); }

/* ======================================================================== *
   Below here: the sections that fill the comp's 1190.5px empty band.
   Copy from notes/content/blog.md; components from site.css.
   ======================================================================== */

/* Everything below inherits the shared 14px/27px body. The explicit
   `font-size:14px; line-height:26px` these blocks used to carry was a
   compensation for the old 16px body and has been removed throughout. */

/* --------------------------------------------------- section headings --- */
.blog-sechead { max-width: 760px; margin: 0 0 var(--sp-6); }
.blog-sechead__lede { margin: var(--sp-3) 0 0; }

/* -------------------------------------------------------- latest posts --- *
   64px top keeps the comp's marquee->card gap on the section; the heading pair
   sits in that space. 96px bottom is the page's section rhythm. */
.blog-latest { padding: 64px 0 96px; }

.blog-postlist { margin-top: var(--sp-6); border-top: 1px solid var(--rule-light); }
.blog-post {
  padding: 40px 0;
  border-bottom: 1px solid var(--rule-light);
}
/* Same component as the featured card's title, so the same measured tier —
   35.25/42.5 — not .t-display-s. One post-title size on the page. */
.blog-post__title {
  margin: 0;
  max-width: 860px;
  font-size: clamp(26px, 2.3vw, 35.25px);
  line-height: 42.5px;
  letter-spacing: 0;
}
.blog-post__title a { text-decoration: none; }
.blog-post__title a:hover { color: var(--burgundy); }
.blog-post__summary {
  margin: 14.8px 0 0;
  max-width: 720px;
  line-height: 26px;
  color: var(--body);
}
/* same inherited-line-height context as .blog-featured__body — see note above */
.blog-post { line-height: 1.2; }
.blog-post .arrowlink { margin-top: 23px; }

/* -------------------------------------------------------------- topics --- */
.blog-topics { padding: 0 0 96px; }
.blog-topics__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 72px;
}
.blog-topic__title { margin: 0 0 var(--sp-3); }
.blog-topic__label { margin: 0 0 var(--sp-2); }

.blog-topic__list { margin: 0 0 27px; }
.blog-topic__list li {
  position: relative;
  padding-left: 28px;
  color: var(--body);
}
.blog-topic__list li + li { margin-top: 12px; }
.blog-topic__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13.5px;                   /* mid of the first 27px line box */
  width: 14px;
  height: 1px;
  background: var(--burgundy);
}

/* ------------------------------------------------------- email capture --- */
.blog-signup { padding: 88px 0; }
.blog-signup__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 72px;
  align-items: start;
}
.blog-signup__copy p {
  margin: var(--sp-3) 0 0;
  max-width: 480px;
}

/* The approved copy runs the "No spam" line straight on from the invitation, so
   it sits in the copy column under that paragraph rather than under the field. */
.blog-signup__note {
  margin: var(--sp-2) 0 0;
  max-width: 480px;
  font-size: 12px;
  line-height: 22px;
  color: var(--body-on-burg);
}

.blog-signup__form { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }
.blog-signup__input {
  flex: 1 1 240px;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid rgba(247, 244, 239, .35);
  border-radius: 0;
  background: transparent;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: .06em;
}
.blog-signup__input::placeholder { color: var(--body-on-burg); opacity: 1; }
.blog-signup__input:focus-visible { outline: 1px solid var(--cream); outline-offset: 2px; }

/* ----------------------------------------------------------- closing cta --- */
.blog-cta { padding: 96px 0 112px; }
.blog-cta__body {
  margin: var(--sp-3) 0 0;
  max-width: 620px;
}
.blog-cta__or { margin-top: var(--sp-5); }
.blog-cta__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: var(--sp-5);
  line-height: 1.2;              /* .arrowlink context — see note above */
}
/* the second action follows its own connecting line, so it sits closer to it */
.blog-cta__actions--tight { margin-top: var(--sp-4); }

/* ============================================================== responsive ===
   No tablet/mobile comps exist; these follow the site-wide 1200/900/600 steps.
   ========================================================================== */
@media (max-width: 1200px) {
  .blog-featured__card { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); }
  .blog-topics__grid { gap: 56px; }
}

@media (max-width: 900px) {
  .blog-hero { padding: 48px 0; }
  .blog-hero__title { margin-top: 12px; }
  /* Mobile (Patrick, 24 Jul): drop the forced "The / Journal." line break. On the wide desktop
     h1 the <br> is a deliberate two-line stack, but at the mobile size it opened a ~59px gap
     between the words. Suppressing the <br> lets the title sit on one line with normal leading. */
  .blog-hero__title br { display: none; }
  .blog-hero__intro { margin-top: 24px; }
  .blog-hero__deck  { margin-top: var(--sp-4); }

  .blog-featured__card { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .blog-featured__media { align-self: stretch; }
  .blog-featured__body { padding: 32px; }
  .blog-featured__excerpt { max-width: none; }

  .blog-latest  { padding: 48px 0 72px; }
  .blog-topics  { padding-bottom: 72px; }
  .blog-topics__grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }

  .blog-signup { padding: 64px 0; }
  .blog-signup__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }

  .blog-cta { padding: 72px 0 88px; }
}

@media (max-width: 600px) {
  /* site.css already lifts body to 15/25 here; these two only need their
     page-local 26px leading released back to it. */
  .blog-featured__excerpt,
  .blog-post__summary { font-size: 15px; line-height: 25px; }

  .blog-featured__body { padding: 24px; }
  .blog-post { padding: 28px 0; }
  .blog-cta__actions { gap: 24px; }
  .blog-signup__form { flex-direction: column; align-items: stretch; }
}