/* ═══════════════════════════════════════════════════════════
   BLOG
   Prod's structure, rendered in the relaunch language. Chosen over
   a straight port and over an index layout.

   The move is inverting the ground. Prod's blog is navy on navy,
   which is why an image-less feature panel disappears. v2 is cream
   with dark bands and one signature: Sunny Side Up is a fried egg,
   Northcoast is the white and Romeo is the yolk, so every card is a
   yolk on the white. That gives the missing covers somewhere to go.
   ═══════════════════════════════════════════════════════════ */
.blog{background:var(--northcoast);color:var(--elgouna)}

/* ── hero ─────────────────────────────────────────────────────
   The same sticky label column every other section on the site
   uses, so the blog opens like a section of this site rather than
   a different property. */
/* Block flow, not the --col split. The markup keeps the label inside
   the headline's own div (A's hero needs them together), so a label
   column would take the 156px and leave the headline one word wide.
   Stacked, this is the same shape every service page hero uses. */
.blog .blog-hero{
  /* Same clearance and opening gap as every other hero. It was on its
     own 78px + 40/6vw/90 pair, which put the headline ~20px lower than
     the service pages at a wide viewport. */
  padding:calc(var(--nav-clear) + var(--hero-gap)) var(--pad-x) clamp(40px,5vw,64px);
}
.blog .hero-label{
  font-weight:700;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--medford);margin-bottom:18px;
}
/* No font-size here on purpose. site.css sets every h1 on the site to
   --t-h1 and warns that page-level overrides are exactly what let three
   different scales drift in. This was carrying --t-mega, the homepage
   hero size, which is why it read as oversized against the rest. */
.blog .hero-h1{color:var(--elgouna);max-width:20ch}
/* Richie. Clears 4.59:1 on the #FAFAFA band, well past the 3:1 floor
   this size needs. It also ties the page to the nav above it, where the
   blog bar ends on Ahmed teal and the services bar on Richie, so the
   magenta is already in the section's vocabulary. */
.blog .hero-h1 .accent{color:var(--richie)}
.blog .hero-sub{
  font-size:var(--t-lead);line-height:1.5;color:var(--ink-2);
  max-width:46ch;margin-top:clamp(18px,2vw,26px);
}

/* ── filters ──────────────────────────────────────────────────
   The site's pill vocabulary rather than prod's square chips.
   Active is the navy fill the buttons use, not a tinted outline. */
/* Gutters on the bar, measure on the inner, exactly as every other
   section on the site does it. The old form capped the padded box at
   1400, which put this row's left edge 80px inside the feed below it. */
.blog .filter-bar{
  padding:clamp(28px,3.4vw,48px) var(--pad-x) clamp(22px,2.6vw,32px);
}
.blog .filters{
  max-width:var(--measure);margin-inline:auto;
}
.blog .filters{display:flex;gap:8px;flex-wrap:wrap}
/* Scoped to the filter bar. Unscoped, this caught the reviews band's
   <p class="tag"> eyebrow too and dressed it up as a clickable pill. */
.blog .filters .tag{
  font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:8px 16px;border-radius:999px;
  border:1.5px solid var(--rule);background:none;color:var(--ink-2);
  cursor:pointer;transition:color .22s,border-color .22s,background .22s;
}
.blog .filters .tag:hover{color:var(--elgouna);border-color:var(--elgouna)}
.blog .filters .tag.active{background:var(--elgouna);border-color:var(--elgouna);color:var(--northcoast)}

/* ── the feed ─────────────────────────────────────────────────
   Same 2fr 1fr alternating rhythm, but the tiles are detached now.
   Prod butts every panel against its neighbour and relies on hairlines
   to say where one ends. Once they are separated by real space, the
   rules have nothing left to do, so every border comes off and the gap
   does the dividing. One --gap drives the space between columns,
   between stacked rows, and between the row blocks, so nothing can
   drift out of step. */
.blog .articles{
  --gap:clamp(10px,1.1vw,16px);
  padding:0 var(--pad-x) clamp(56px,7vw,96px);
  max-width:var(--frame);margin:0 auto;
  display:flex;flex-direction:column;gap:var(--gap);
}
.blog .article-row{
  display:grid;grid-template-columns:2fr 1fr;gap:var(--gap);
  border:0;
}
.blog .article-row.flip{grid-template-columns:1fr 2fr}
.blog .article-row.flip .feature-panel{order:2}
/* Leftover rows carry no feature panel. Without this they drop their cards
   into the empty 2fr feature column and strand them beside dead space; span
   the row full width and tile the cards as a responsive grid instead. */
.blog .article-row.overflow{grid-template-columns:1fr}
.blog .article-row.overflow .list-panel{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:var(--gap);
}
/* Must follow the overflow rule above: same specificity, so order decides. */
/* The latest strip: the 1 to 3 newest posts left over when the total is not a
   multiple of four, split evenly across the full width (--n set per build). */
.blog .article-row.strip .list-panel{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}

/* Every tile is a rounded, borderless block. --r is the same radius the
   yolk cards and the score tile use on the homepage. */
.blog .feature-panel,
.blog .list-item{
  border:0;border-radius:var(--r);overflow:hidden;
  text-decoration:none;
}

.blog .feature-panel{
  position:relative;isolation:isolate;
  padding:clamp(28px,3vw,40px);
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:clamp(300px,32vw,420px);
  color:var(--elgouna);
  background-size:cover;background-position:center;
}

/* No cover, so it becomes a yolk. This is the whole reason the
   variant works: on prod these panels are navy on navy and vanish,
   here the six posts with no cover art become the loudest thing on
   the page instead of the emptiest. No new images required. */
.blog .feature-panel:not(.has-cover){
  background:radial-gradient(130% 110% at 74% 6%, #FFE071 0%, var(--romeo) 52%, #F7BE12 100%);
}
.blog .feature-panel:not(.has-cover) .feature-tag,
.blog .feature-panel:not(.has-cover) .feature-date{color:var(--elgouna);opacity:.62}

/* With a cover, the navy scrim comes back, because the type has to
   sit on a photograph and nothing else will hold it.

   Not a top-to-bottom ramp. That put the scrim's weight where the panel
   is empty and its lightest part where the title is, which was both too
   dark to see the picture and too light to read: measured across the
   four covers, the title band sat at 2.56 to 3.19 against the 3:1 large
   text needs, while the bottom ran 5.5 to 8.8, far past it.

   The panel is justify-content:space-between, so the type is at the two
   ends and the middle is empty. The scrim holds a plateau over each end
   and opens up between them. The title band needs alpha .54 on the
   worst cover for 3:1 and gets .56; the bottom needs .66 and gets .69,
   down from .85. Mean alpha over the panel falls from .62 to .44, which
   is the part that reads as lighter. */
/* White, not Northcoast. This is the one place on the site where type
   sits on a photograph at display size, so it takes the most contrast
   available rather than the warm off-white the rest of the palette
   uses. Measured over the four covers it moves the title from 3.20-3.92
   to 3.74-4.58, which clears AA large on all four and full AA on two.

   --grain-z, because .grain puts its texture at z-index 2, over the
   type. Grain belongs in the photograph, not on the words. At -1 it
   paints above the panel's own background and below its content, and
   since the scrim is also at -1 the two order by their pseudo: ::before
   scrim first, then ::after grain, then the type on top of both. */
.blog .feature-panel.has-cover{color:#fff;--grain-z:-1}
.blog .feature-panel.has-cover::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    rgba(39,52,71,.56) 0%,
    rgba(39,52,71,.56) 36%,
    rgba(39,52,71,.16) 56%,
    rgba(39,52,71,.16) 76%,
    rgba(39,52,71,.68) 88%,
    rgba(39,52,71,.70) 100%);
  transition:opacity .45s var(--ease);
}
.blog .feature-panel.has-cover:hover::before{opacity:.8}
.blog .feature-panel.has-cover .feature-tag{color:var(--romeo)}
.blog .feature-panel.has-cover .feature-date{color:rgba(255,255,255,.78)}

.blog .feature-tag{
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--deveney-ink);margin-bottom:22px;display:block;
}
.blog .feature-title{
  --track:-.024em;
  font-size:clamp(24px,2.6vw,34px);font-weight:700;
  letter-spacing:var(--track);word-spacing:calc(-1 * var(--track));
  line-height:1.1;flex:1;max-width:20ch;
}
.blog .feature-bottom{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-top:30px;
}
.blog .feature-date{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--medford)}

.blog .list-panel{display:flex;flex-direction:column;gap:var(--gap);border:0}
.blog .list-item{
  padding:clamp(20px,2vw,28px) clamp(22px,2.2vw,32px);
  display:flex;flex-direction:column;justify-content:space-between;flex:1;
  color:var(--elgouna);background:#fff;
  transition:background .3s var(--ease);
}
.blog .list-item:hover{background:var(--malek)}
.blog .list-tag{
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--deveney-ink);display:block;margin-bottom:12px;
}
.blog .list-title{font-size:16px;font-weight:700;line-height:1.25;letter-spacing:-.02em}
.blog .list-meta{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-top:20px;
}
.blog .list-date{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--medford)}

/* ── the CTA ──────────────────────────────────────────────────
   One treatment on both sizes. The small tiles used to carry a bare
   oversized arrow and the large ones "Read" plus a small one, which
   were two answers to the same question. This is the second, applied
   everywhere: Deveney on the white tiles, and it inherits on the
   yolk and photo tiles where pink would fight the ground. */
.blog .card-read{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:currentColor;
}
.blog .list-item .card-read{color:var(--deveney-ink)}
.blog .feature-panel:not(.has-cover) .card-read{color:var(--elgouna)}
.blog .feature-panel.has-cover .card-read{color:var(--romeo)}
.blog .card-read .arw{font-style:normal;font-size:13px;line-height:1}

/* ── filtered ─────────────────────────────────────────────────
   Same reasoning as A: an arbitrary subset cannot hold the wide
   panel plus three narrow ones, so it collapses to one stream. */
.blog .articles.is-filtered .article-row{display:flex;flex-direction:column}
.blog .articles.is-filtered .feature-panel{order:0;min-height:220px}
.blog .articles.is-filtered .list-panel{border:0}
.blog .articles.is-filtered .list-item{border-bottom:1px solid var(--rule)}
.blog .article-row[hidden]{display:none}
.blog .no-results{
  padding:clamp(56px,8vw,100px) var(--pad-x);color:var(--ink-2);font-size:15px;
}

@media (max-width:900px){
  .blog .blog-hero{grid-template-columns:1fr;gap:16px}
  .blog .article-row,
  .blog .article-row.flip{grid-template-columns:1fr}
  .blog .article-row.flip .feature-panel{order:0}
  .blog .list-panel,
  .blog .article-row.flip .list-panel{border:0}
  .blog .feature-panel{min-height:240px}
  .blog .article-row.strip .list-panel{grid-template-columns:1fr}
}


/* ── BLOG: the hero band ──────────────────────────────────────
   #FAFAFA runs the full window while the copy stays on the site's
   measure, which is why the section needed an inner. The eyebrow, the
   headline and the sub all sit inside it, so the band ends where the
   writing ends rather than partway through it.

   Bottom padding matches the rest of the site's band rhythm rather
   than the hero's own tighter value: this is a ground change now, and a
   colour boundary needs more air under it than a text block does. */
/* Lives here, not in site.css: blog.css loads after it and its own
   .blog-hero rules would otherwise win. */
.blog .blog-hero{
  background:var(--offwhite);
  /* The band is full bleed and carries the gutters; the inner carries
     the measure. Setting padding on both double-inset the headline and
     pushed it 80px right of everything under it. */
  padding-bottom:clamp(48px,6vw,88px);
}
.blog .blog-hero-in{
  max-width:var(--measure);
  margin-inline:auto;
}
/* Everything under the band is white, not the blog's cream. */
.blog{background:#fff}

/* Nav ink is white here, not Northcoast. The bar runs a deep navy into
   Ahmed teal, and the brand off-white reads warm and slightly dim
   against it where pure white stays crisp the whole way across. */

/* ── the tiles, on white ──────────────────────────────────────
   The feed used to sit on cream, where a white card separated on its
   own. On white it needs the shadow to exist at all, so this is doing
   structural work rather than decoration.

   Two passes, the same shape as the shadows already on the site: a
   tight contact edge and one wide ambient pool, both Elgouna at low
   alpha rather than black, which is what keeps them from going grey on
   a warm ground. Same family as the nav panel's 0 24px 60px -24px and
   the yolk card's pair, so the page reads as one system.

   No border. A stroke plus a shadow reads as two different attempts at
   the same job. */
.blog .feature-panel,
.blog .list-item{
  box-shadow:
    0 1px 2px rgba(var(--elgouna-rgb),.04),
    0 18px 40px -24px rgba(var(--elgouna-rgb),.28);
  transition:box-shadow .35s var(--ease),transform .35s var(--ease);
}
/* Lift on hover: the shadow deepens and widens rather than the card
   growing, so nothing in the grid shifts under the pointer. */
.blog .feature-panel:hover,
.blog .list-item:hover{
  box-shadow:
    0 2px 4px rgba(var(--elgouna-rgb),.05),
    0 28px 60px -26px rgba(var(--elgouna-rgb),.36);
}
/* The filtered stream sets its own bottom rule on list items, which
   fights the shadow. On white the shadow is doing that job already. */
.blog .articles.is-filtered .list-item{border-bottom:none}