/* ==========================================================================
   Blog index (/blog)
   The hero and closing CTA belong to the design system. Everything between
   them is defined here and rendered from Models/BlogCatalog.cs:

   1. Page frame        4. Category chapters
   2. Category rail     5. Article entries
   3. Latest band       6. Responsive, motion, print

   Depth comes from layers that travel at different speeds while scrolling.
   Any element with data-ds-parallax="<rate>" receives --ds-parallax-y from
   /assets/js/experience.js; the rail's scroll-spy lives in /assets/js/blog.js.

   Rules are scoped to #calibrum-blog so they outrank the attribute-selector
   defaults in design-system.css. Class names deliberately avoid the suffixes
   those defaults match on (-card, -step, -note, -intro, -icon, -badge…).
   ========================================================================== */

/* 1. Page frame ------------------------------------------------------------ */
/* site.css hides overflow on <main>, which turns it into the scroll container
   for position:sticky. Clipping keeps the same edge without that side effect. */
body[data-route^="/blog"] main.site-main { overflow: clip; }

#calibrum-blog {
  --blog-stick: calc(var(--ds-nav-h) + 1px);
  --blog-rail-h: 57px;
}
#calibrum-blog :is(.blog-latest, .blog-chapter) { scroll-margin-top: calc(var(--blog-rail-h) - 24px); }

/* 2. Category rail ---------------------------------------------------------
   A pane of glass that docks under the header. Plain in-page anchors; blog.js
   marks the category being read and fills the progress hairline. It is pinned
   within .blog-library, so it leaves with the last chapter. */
#calibrum-blog .blog-rail {
  position: sticky;
  top: var(--blog-stick);
  z-index: 40;
  background: var(--ds-glass-bg);
  -webkit-backdrop-filter: var(--ds-glass-filter);
  backdrop-filter: var(--ds-glass-filter);
  border-bottom: 1px solid rgba(10, 37, 64, .08);
  box-shadow: var(--ds-glass-edge);
}
#calibrum-blog .blog-rail-track {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px var(--ds-gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
#calibrum-blog .blog-rail-track::-webkit-scrollbar { display: none; }
#calibrum-blog .blog-rail-title {
  flex: none;
  margin-right: 16px;
  padding-right: 20px;
  border-right: 1px solid var(--ds-stroke);
  color: var(--ds-fg3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
#calibrum-blog .blog-rail a {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--ds-fg2);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--ds-normal) var(--ds-ease), color var(--ds-fast) var(--ds-ease), transform var(--ds-normal) var(--ds-spring);
}
#calibrum-blog .blog-rail a:hover { background: rgba(10, 37, 64, .07); color: var(--ds-fg1); }
#calibrum-blog .blog-rail a:active { transform: scale(.97); }
#calibrum-blog .blog-rail a[aria-current] { background: var(--ds-navy); color: #fff; font-weight: 600; }
#calibrum-blog .blog-rail-count {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(10, 37, 64, .08);
  color: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
#calibrum-blog .blog-rail a[aria-current] .blog-rail-count { background: rgba(255, 255, 255, .2); }
#calibrum-blog .blog-rail-progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--ds-brand);
  transform: scaleX(var(--blog-progress, 0));
  transform-origin: left;
}

/* Shared section opener */
#calibrum-blog .blog-kicker { margin-bottom: 18px; }

/* 3. Latest band -----------------------------------------------------------
   Navy stage, three planes: rings (far), dot lattice (mid, travels the other
   way) and a small constellation (near). Articles sit on panes of glass. */
#calibrum-blog .blog-latest {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--ds-navy);
  color: var(--ds-fg2-on-dark);
}
#calibrum-blog .blog-depth { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
#calibrum-blog .blog-depth > * {
  position: absolute;
  transform: translate3d(0, var(--ds-parallax-y, 0px), 0);
  will-change: transform;
}
#calibrum-blog .blog-depth-rings {
  top: 50%; right: calc(var(--ds-gutter) * .5 - 260px);
  width: 920px; height: 920px;
  margin-top: -460px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 51px, rgba(140, 196, 247, .26) 51px 52px);
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 70%);
  mask-image: radial-gradient(circle, #000 0, transparent 70%);
}
#calibrum-blog .blog-depth-dots {
  inset: -180px 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .22) 1.1px, transparent 1.7px) 0 0 / 30px 30px;
  -webkit-mask-image: linear-gradient(105deg, #000 0, transparent 58%);
  mask-image: linear-gradient(105deg, #000 0, transparent 58%);
}
#calibrum-blog .blog-depth-nodes {
  top: 48px; right: max(24px, calc(var(--ds-gutter) - 40px));
  width: min(520px, 46vw);
  height: auto;
  overflow: visible;
  color: var(--ds-brand-on-dark);
}
#calibrum-blog .blog-depth-nodes line { stroke: currentColor; stroke-width: 1; opacity: .35; }
#calibrum-blog .blog-depth-nodes circle { fill: currentColor; opacity: .8; }
#calibrum-blog .blog-depth-nodes circle.is-ring { fill: none; stroke: currentColor; stroke-width: 1; opacity: .5; }

#calibrum-blog .blog-latest-top { max-width: 720px; }
#calibrum-blog .blog-latest .blog-kicker { color: var(--ds-brand-on-dark); }
#calibrum-blog .blog-latest h2 { margin: 0 0 16px; color: #fff; }
#calibrum-blog .blog-latest-top p { margin: 0; color: var(--ds-fg2-on-dark); font-size: 18px; line-height: 1.6; }
#calibrum-blog .blog-latest-list {
  display: grid;
  gap: 24px;
  margin-top: clamp(36px, 4vw, 56px);
}
#calibrum-blog .blog-latest-side { min-width: 0; }
#calibrum-blog .blog-latest-drift {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

/* 4. Category chapters -----------------------------------------------------
   The category stays pinned beside its articles; its outlined numeral and a
   field of hairline rings drift behind it at their own speeds. */
#calibrum-blog .blog-chapter {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  grid-template-columns: minmax(0, .42fr) minmax(0, 1fr);
  column-gap: clamp(40px, 5.5vw, 96px);
  align-items: start;
  background: #fff;
}
#calibrum-blog .blog-chapter[data-tone="soft"] { background: var(--ds-bg-subtle); }
#calibrum-blog .blog-chapter + .blog-chapter { border-top: 1px solid var(--ds-stroke-subtle); }
#calibrum-blog .blog-chapter::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -140px; left: calc(var(--ds-gutter) - 300px);
  width: 760px; height: 760px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 63px, var(--ds-stroke) 63px 64px);
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 68%);
  mask-image: radial-gradient(circle, #000 0, transparent 68%);
  transform: translate3d(0, var(--ds-parallax-y, 0px), 0);
  will-change: transform;
  pointer-events: none;
}
#calibrum-blog .blog-chapter-aside {
  position: sticky;
  top: calc(var(--blog-stick) + var(--blog-rail-h) + 72px);
  min-width: 0;
}
#calibrum-blog .blog-chapter-numeral {
  position: relative;
  z-index: -1;
  display: block;
  margin: 0 0 .08em -.04em;
  color: transparent;
  font-family: var(--ds-font-display);
  font-size: clamp(104px, 11vw, 184px);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .9;
  -webkit-text-stroke: 1.5px var(--ds-brand-tint-stroke);
  /* Only ever rises, and no further than the gap kept above the pinned column,
     so it never runs into the heading below or the rail above. */
  transform: translate3d(0, clamp(-72px, calc(var(--ds-parallax-y, 0px) - 24px), 0px), 0);
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
}
#calibrum-blog .blog-chapter-aside h2 { margin: 0 0 16px; max-width: 16ch; }
#calibrum-blog .blog-chapter-aside p { margin: 0; max-width: 44ch; color: var(--ds-fg2); font-size: 16px; line-height: 1.65; }
#calibrum-blog .blog-chapter-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  color: var(--ds-fg3);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--ds-fast) var(--ds-ease);
}
#calibrum-blog .blog-chapter-next:hover { color: var(--ds-brand); }
#calibrum-blog .blog-chapter-next svg { width: 14px; height: 14px; transition: transform var(--ds-normal) var(--ds-spring); }
#calibrum-blog .blog-chapter-next:hover svg { transform: translateY(3px); }
#calibrum-blog .blog-chapter-list {
  container: blog-list / inline-size;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

/* 5. Article entries -------------------------------------------------------
   One component, three settings: standard, wide (opens a chapter, or closes
   one that would otherwise end on a lone half-width item) and glass (latest). */
#calibrum-blog .blog-entry {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--ds-stroke);
  border-radius: var(--ds-radius-xl);
  background: #fff;
  box-shadow: var(--ds-shadow-2);
  transition: transform .5s var(--ds-spring), box-shadow var(--ds-normal) var(--ds-ease), border-color var(--ds-normal) var(--ds-ease), background var(--ds-normal) var(--ds-ease);
}
#calibrum-blog .blog-entry:is(:hover, :focus-within) {
  transform: translate3d(0, -6px, 0);
  border-color: var(--ds-brand-tint-stroke);
  box-shadow: var(--ds-shadow-16);
}
#calibrum-blog .blog-entry-main { min-width: 0; }
#calibrum-blog .blog-entry-body { display: flex; flex: 1; flex-direction: column; min-width: 0; }
#calibrum-blog .blog-entry-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
#calibrum-blog .blog-glyph {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--ds-brand-tint);
  color: var(--ds-brand);
  transition: transform .6s var(--ds-spring), background var(--ds-normal) var(--ds-ease), color var(--ds-normal) var(--ds-ease);
}
#calibrum-blog .blog-glyph svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
#calibrum-blog .blog-entry:is(:hover, :focus-within) .blog-glyph { background: var(--ds-brand); color: #fff; transform: scale(1.08) rotate(-6deg); }
#calibrum-blog .blog-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
#calibrum-blog .blog-tag {
  padding: 4px 10px;
  border: 1px solid var(--ds-stroke);
  border-radius: 999px;
  color: var(--ds-fg3);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}
#calibrum-blog .blog-tag.is-new { border-color: var(--ds-brand); background: var(--ds-brand); color: #fff; }
#calibrum-blog .blog-entry-title { margin: 0 0 10px; font-size: 20px; line-height: 1.3; letter-spacing: -.015em; }
#calibrum-blog .blog-entry-title a { color: var(--ds-fg1); font-weight: 700; text-decoration: none; transition: color var(--ds-fast) var(--ds-ease); }
/* The whole entry is the link's hit area. */
#calibrum-blog .blog-entry-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
#calibrum-blog .blog-entry:is(:hover, :focus-within) .blog-entry-title a { color: var(--ds-brand); }
#calibrum-blog .blog-entry-deck { margin: 0; color: var(--ds-fg1); font-size: 15px; font-weight: 500; line-height: 1.5; }
#calibrum-blog .blog-entry-text { margin: 14px 0 0; color: var(--ds-fg2); font-size: 15px; line-height: 1.65; }
#calibrum-blog .blog-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 24px;
  color: var(--ds-brand);
  font-size: 14px;
  font-weight: 600;
}
#calibrum-blog .blog-more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--ds-normal) var(--ds-spring); }
#calibrum-blog .blog-entry:is(:hover, :focus-within) .blog-more svg { transform: translateX(5px); }

/* Wide: splits into headline | summary once the list itself has the room. */
#calibrum-blog .blog-chapter-list > .blog-entry:is(:first-child, :last-child:nth-child(even)) { grid-column: 1 / -1; }
@container blog-list (min-width: 720px) {
  #calibrum-blog .blog-chapter-list > .blog-entry:is(:first-child, :last-child:nth-child(even)) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(28px, 3.5vw, 56px);
    padding: 32px;
  }
  #calibrum-blog .blog-chapter-list > .blog-entry:is(:first-child, :last-child:nth-child(even)) .blog-entry-title { font-size: clamp(22px, 1.9vw, 27px); line-height: 1.22; letter-spacing: -.022em; }
  #calibrum-blog .blog-chapter-list > .blog-entry:is(:first-child, :last-child:nth-child(even)) .blog-entry-text { margin-top: 4px; font-size: 16px; }
}

/* Glass, on navy */
#calibrum-blog .blog-latest .blog-entry {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}
#calibrum-blog .blog-latest .blog-entry:is(:hover, :focus-within) {
  border-color: rgba(140, 196, 247, .6);
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 28px 56px -24px rgba(0, 0, 0, .7);
}
/* Light from the pointer (--blog-mx / --blog-my are set by blog.js). */
#calibrum-blog .blog-latest .blog-entry::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(440px circle at var(--blog-mx, 50%) var(--blog-my, 0%), rgba(140, 196, 247, .2), transparent 62%);
  opacity: 0;
  transition: opacity var(--ds-normal) var(--ds-ease);
  pointer-events: none;
}
#calibrum-blog .blog-latest .blog-entry:hover::before { opacity: 1; }
#calibrum-blog .blog-latest .blog-entry-title a,
#calibrum-blog .blog-latest .blog-entry:is(:hover, :focus-within) .blog-entry-title a { color: #fff; }
#calibrum-blog .blog-latest .blog-entry-deck { color: rgba(255, 255, 255, .92); }
#calibrum-blog .blog-latest .blog-entry-text { color: var(--ds-fg2-on-dark); }
#calibrum-blog .blog-latest .blog-glyph { background: rgba(140, 196, 247, .14); color: var(--ds-brand-on-dark); }
#calibrum-blog .blog-latest .blog-entry:is(:hover, :focus-within) .blog-glyph { background: #fff; color: var(--ds-navy); }
#calibrum-blog .blog-latest .blog-tag { border-color: rgba(255, 255, 255, .24); color: var(--ds-fg2-on-dark); }
#calibrum-blog .blog-latest .blog-tag.is-new { border-color: #fff; background: #fff; color: var(--ds-navy); }
#calibrum-blog .blog-latest .blog-more { color: var(--ds-brand-on-dark); }
#calibrum-blog .blog-latest .blog-entry.is-lead { padding: clamp(28px, 3vw, 44px); }
#calibrum-blog .blog-latest .blog-entry.is-lead .blog-entry-head { margin-bottom: clamp(24px, 2.5vw, 36px); }
#calibrum-blog .blog-latest .blog-entry.is-lead .blog-entry-title { margin-bottom: 14px; font-size: clamp(26px, 2.7vw, 38px); font-weight: 800; line-height: 1.12; letter-spacing: -.03em; }
#calibrum-blog .blog-latest .blog-entry.is-lead .blog-entry-title a { font-weight: 800; }
#calibrum-blog .blog-latest .blog-entry.is-lead .blog-entry-deck { font-size: 17px; }
#calibrum-blog .blog-latest .blog-entry.is-lead .blog-entry-text { font-size: 16px; max-width: 58ch; }
/* Lead, full width: mark and tags run across the top, headline | summary share
   the rows beneath, so the card is only ever as tall as its copy. */
@media (min-width: 1001px) {
  #calibrum-blog .blog-latest .blog-entry.is-lead {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(32px, 4vw, 64px);
  }
  #calibrum-blog .blog-latest .blog-entry.is-lead .blog-entry-main { display: contents; }
  #calibrum-blog .blog-latest .blog-entry.is-lead .blog-entry-head { grid-column: 1 / -1; }
  #calibrum-blog .blog-latest .blog-entry.is-lead :is(.blog-entry-title, .blog-entry-deck) { grid-column: 1; }
  #calibrum-blog .blog-latest .blog-entry.is-lead .blog-entry-body { grid-column: 2; grid-row: 2 / span 2; }
  #calibrum-blog .blog-latest .blog-entry.is-lead .blog-entry-text { margin-top: 0; }
}

/* 6. Responsive, motion, print -------------------------------------------- */
/* Entries set their own transition, so restate the reveal hand-off for them. */
#calibrum-blog [data-ds-reveal="in"] {
  transition: opacity .7s var(--ds-ease) calc(var(--ds-i, 0) * 70ms), transform .9s var(--ds-glide) calc(var(--ds-i, 0) * 70ms);
}

@media (max-width: 1180px) {
  #calibrum-blog .blog-chapter { grid-template-columns: minmax(0, .5fr) minmax(0, 1fr); column-gap: 40px; }
}
@media (max-width: 1000px), (max-height: 640px) {
  #calibrum-blog .blog-chapter { display: block; }
  #calibrum-blog .blog-chapter-aside { position: relative; top: auto; margin-bottom: 40px; }
  #calibrum-blog .blog-chapter-numeral { font-size: clamp(88px, 16vw, 128px); }
  #calibrum-blog .blog-chapter-aside h2 { max-width: 24ch; }
  #calibrum-blog .blog-chapter-aside p { max-width: 64ch; }
  #calibrum-blog .blog-chapter-next { display: none; }
}
@media (max-width: 1000px) {
  #calibrum-blog .blog-depth-nodes { opacity: .6; }
}
@media (max-width: 900px) {
  #calibrum-blog { --blog-rail-h: 53px; }
  #calibrum-blog .blog-rail-title { display: none; }
  #calibrum-blog .blog-rail-track { padding-block: 8px; }
}
@media (max-width: 680px) {
  #calibrum-blog .blog-chapter-list,
  #calibrum-blog .blog-latest-drift { grid-template-columns: 1fr; }
  #calibrum-blog .blog-entry { padding: 24px; }
  #calibrum-blog .blog-latest-top p { font-size: 17px; }
  #calibrum-blog .blog-depth-rings { width: 640px; height: 640px; margin-top: -320px; right: -320px; }
  #calibrum-blog .blog-chapter::before { width: 520px; height: 520px; left: -260px; }
}
@media (hover: none) {
  #calibrum-blog .blog-entry:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* experience.js never sets --ds-parallax-y here, so the layers already rest. */
  #calibrum-blog .blog-entry:is(:hover, :focus-within),
  #calibrum-blog .blog-entry:is(:hover, :focus-within) .blog-glyph { transform: none; }
}
@media print {
  #calibrum-blog :is(.blog-rail, .blog-depth) { display: none !important; }
  #calibrum-blog .blog-latest { background: #fff; }
  #calibrum-blog .blog-latest :is(h2, p, a, span) { color: #000 !important; }
  #calibrum-blog .blog-chapter { display: block; }
  #calibrum-blog .blog-chapter-aside { position: static; }
  #calibrum-blog .blog-entry { break-inside: avoid; box-shadow: none; }
}