/* ==========================================================================
   Sanctuary Insurance v2, news family page skin (Round-24, 2026-08-22).
   Covers TWO pages with one file: news.html (the index) and the article pages
   copied from news/_template.html. Extends the FROZEN foundation (styles.css);
   nothing here overrides a shared component, it only styles page-scoped
   classes. Every value traces to design/brands/sanctuary.md (the kit) or to
   the ref scale already encoded in styles.css.
   Shape law held throughout: flat filled cards, radius 32, border NONE,
   shadow NONE, hierarchy by SIZE at weight 400, Onest everywhere.
   This page family runs NO per-page JS, so nothing here is gated on
   html.js-reveal and nothing is hidden at rest: the page is fully readable
   with JS off, which is also its reduced-motion state.
   House rule: no em or en dashes anywhere in this file.
   ========================================================================== */

/* ---- Page hero (calm, centered; same fingerprint as services.html) ---- */
.page-hero {
  padding: 60px 48px 64px;   /* kit: page gutter 48; hands off to the list at a 64 step */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.page-eyebrow {
  font-size: 24px;           /* ref hero eyebrow 24 (same token as .hero-eyebrow in styles.css) */
  font-weight: 400;
  opacity: .82;              /* ref: eyebrow sits quieter than the h1 */
}
.page-hero h1 {
  font-size: 80px;           /* ref h1 80px, weight 400, hierarchy by size */
  line-height: 88px;         /* ref 88px */
  letter-spacing: -2px;      /* ref -2px */
  font-weight: 400;
  max-width: 900px;
  margin-top: 20px;
}
.page-lede {
  margin-top: 24px;
  font-size: 24px;           /* ref trust-line scale 24 (styles.css .trust-line) */
  line-height: 1.4;
  color: var(--muted-ink);   /* kit: muted ink role from the foundation */
  max-width: 620px;
}

/* ==========================================================================
   THE LIST (news.html)
   One column of wide flat cards. The fill rotates off the card's position in
   the list, so staff paste the same markup every time and never pick a
   colour by hand (see the crib in news.html).
   ========================================================================== */
.news-sec { padding: 0 48px; }            /* kit: page gutter 48 */
.news-list {
  list-style: none;
  max-width: 1080px;                       /* derived: wide reading rows inside the ref 1344 content box */
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;                               /* kit: spacing base 16 */
}
.news-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  border-radius: 32px;                     /* ref card radius 32, flat filled, border NONE, shadow NONE */
  padding: 40px 44px;                      /* derived: a step above the ref 32 card pad, this is a reading row */
  color: var(--ink);
  background: var(--card-cream);           /* default fill; the rotation below overrides it */
  transition: background-color .2s ease, transform .2s var(--ease-house);
}
/* palette rotation by position: cream, blush, sand, coral, then repeat */
.news-card:nth-child(4n + 1) .news-link { background: var(--card-cream); }
.news-card:nth-child(4n + 2) .news-link { background: var(--card-blush); }
.news-card:nth-child(4n + 3) .news-link { background: var(--card-sand); }
.news-card:nth-child(4n + 4) .news-link { background: var(--card-coral); }
.news-link:hover,
.news-link:focus-visible { transform: translateY(-2px); }
.news-date {
  font-size: 14px;                         /* ref legal-row scale 14 */
  letter-spacing: .02em;
  color: var(--muted-ink);
}
.news-title {
  font-size: 34px;                         /* derived: reading-row title between the ref card caption 26 and the 48 section head */
  font-weight: 400;                        /* kit: hierarchy by SIZE at 400, never bold */
  line-height: 1.15;
  letter-spacing: -0.85px;                 /* ref display tracking ratio at 34px */
  max-width: 22ch;
}
.news-excerpt {
  font-size: 16px;                         /* ref body 16/400 */
  line-height: 1.6;
  color: var(--muted-ink);
  max-width: 62ch;                         /* comfortable measure for a two sentence standfirst */
}
.news-more {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: var(--ink);
}
.news-more svg { transition: transform .2s var(--ease-house); }
.news-link:hover .news-more svg,
.news-link:focus-visible .news-more svg { transform: translate(3px, -3px); }

/* ---- The designed empty state ------------------------------------------
        This client has ZERO published news at launch (research SSOT: no news,
        blog, press or article content anywhere), so the list ships empty and
        this is what a visitor meets. It has to read as a finished room with
        nothing in it yet, never as a page that failed to load: one cream
        card, the mascot glyph as the single figure, one honest line, and a
        way onward to the documents that DO exist.
        The :has() rule is a safety net. The moment a real card lands in the
        list, browsers that support :has() retire the empty state even if
        staff forget to delete it. ---- */
.news-empty {
  background: var(--card-cream);           /* kit: pastel card 4 = the cream surface */
  border-radius: 32px;                     /* ref card radius 32 */
  padding: 96px 48px 88px;                 /* kit section pad member 96: the emptiness is deliberate, give it room */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.news-empty .mascot-slot {
  /* the shared slot runs inline at 150x124 inside display headlines; here it is
     the card's one figure, so it centres as a block and sits a step larger */
  width: 168px;
  height: 139px;
  vertical-align: baseline;
  margin-bottom: 8px;
}
.news-empty-line {
  font-size: 28px;                         /* derived: one honest line, read at the ref card caption 26 plus a step */
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.6px;
  max-width: 30ch;
}
.news-empty-rule {
  width: 40px;
  height: 2px;
  border-radius: 2px;                      /* kit radius scale member 2 */
  background: var(--accent);               /* kit: the exact logo red as a small mark, never a large fill */
  margin: 28px 0 24px;
}
.news-empty-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity .15s ease;
}
.news-empty-link:hover { opacity: .7; }
.news-list:has(.news-card) .news-empty { display: none; }

/* ==========================================================================
   LATEST PUBLISHED DOCUMENTS (news.html)
   Real files only. Keeps the page useful while the list is empty.
   Card grammar echoes the faq.html download cards so the site reads as one
   system, re-cut here as a two line card (name plus a real description).
   ========================================================================== */
.docs-band { padding: 128px 48px 32px; }   /* kit: section pad member 128 */
.docs-intro {
  max-width: 1080px;
  margin: 0 auto 40px;
}
.docs-intro h2 {
  font-size: 48px;                         /* matches the services.html section head step */
  font-weight: 400;
  letter-spacing: -1.2px;                  /* ref display tracking ratio at 48px */
  line-height: 1.1;
}
.docs-lede {
  margin-top: 12px;
  font-size: 16px;                         /* ref body 16 */
  line-height: 1.6;
  color: var(--muted-ink);
  max-width: 60ch;
}
/* group label: who published the documents underneath it. Two publishers sit in
   this band (Sanctuary and IPEC) and on a regulated insurer's site the reader
   must never have to guess which is which. Same muted label role as the faq
   download groups and the footer column heads. */
.docs-group {
  max-width: 1080px;
  margin: 0 auto 16px;                     /* kit: spacing base 16 down to the grid */
  font-size: 16px;                         /* ref body 16 */
  line-height: 1.5;
  color: var(--muted-ink);
}
.docs-grid + .docs-group { margin-top: 40px; } /* a publisher change is a bigger break than a card gap */
.docs-group a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);    /* kit: accent as a small mark */
  text-underline-offset: 3px;
}
.docs-grid {
  list-style: none;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;                               /* kit: spacing base 16 */
}
.doc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: 176px;
  border-radius: 32px;                     /* ref card radius 32 */
  padding: 28px 32px;                      /* ref card pad 32 */
  color: var(--ink);
  transition: background-color .2s ease, transform .2s var(--ease-house);
}
.doc-card:hover,
.doc-card:focus-visible { transform: translateY(-2px); }
.doc-kind {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 96px;                     /* kit: pill radius 96 */
  background: var(--surface);              /* kit: the light surface as the tag fill on pastel cards */
  color: var(--muted-ink);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.doc-card.card-cream .doc-kind { background: var(--line); } /* the cream card and the surface are one value: swap in the line fill so the tag still reads */
.doc-name {
  margin-top: 6px;
  font-size: 22px;                         /* derived: card title under the ref 26 caption, hierarchy by size at 400 */
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.4px;
  max-width: 24ch;
  padding-right: 36px;                     /* clears the arrow parked top right */
}
.doc-note {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted-ink);
  max-width: 42ch;
}
.doc-arrow {
  position: absolute;
  top: 28px;
  right: 30px;
  display: inline-flex;
  color: var(--ink);
}
.doc-arrow svg { transition: transform .2s var(--ease-house); }
.doc-card:hover .doc-arrow svg,
.doc-card:focus-visible .doc-arrow svg { transform: translate(3px, -3px); }
/* the lead document sits alone in its grid, so auto-fit hands it the full row;
   its title steps up to match that width instead of floating in empty card */
.doc-card-lead { min-height: 168px; padding: 32px 36px; }
.doc-card-lead .doc-name { font-size: 28px; letter-spacing: -0.6px; max-width: 30ch; }
.doc-card-lead .doc-note { font-size: 16px; max-width: 52ch; }

/* the way out of the band: one quiet line to the full documents page. The row
   holds the 1080 column so the link itself stays only as wide as its words and
   the underline never runs off across empty space. */
.docs-all-row {
  max-width: 1080px;
  margin: 32px auto 0;
}
.docs-all {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity .15s ease;
}
.docs-all svg { transition: transform .2s var(--ease-house); }
.docs-all:hover { opacity: .7; }
.docs-all:hover svg { transform: translateX(3px); }

/* ==========================================================================
   THE ARTICLE PAGE (news/_template.html and every article copied from it)
   Calm hero, then one measured column. The whole point of this half of the
   file is the reading: ~65ch measure, a vertical rhythm that never fights
   the eye, and two set pieces (pull quote, figure) that step out of the
   column just enough to feel composed.
   ========================================================================== */
.article-hero {
  padding: 72px 48px 48px;                 /* kit: page gutter 48 */
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.article-hero .mascot-slot {
  /* the mascot as the article's one identity mark (kit: mascot is the identity
     glue). Block and centred here, a step under the inline headline slot, so it
     reads as a mark above the eyebrow rather than a word inside a sentence.
     Live since 2026-08-22: app.js resolves mascot JSON against its own script
     src, so the fetch works from the news/ subdirectory. */
  display: block;
  width: 88px;
  height: 73px;
  vertical-align: baseline;
  margin: 0 auto 6px;
}
.article-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--muted-ink);
}
.article-date {
  display: block;
  margin-top: 20px;
  font-size: 14px;                         /* ref legal-row scale 14 */
  letter-spacing: .02em;
  color: var(--muted-ink);
}
.article-hero h1 {
  margin-top: 14px;
  font-size: 56px;                         /* derived: an article title reads under the 80 page h1 and over the 48 section head */
  font-weight: 400;                        /* kit: hierarchy by SIZE at 400 */
  line-height: 1.1;
  letter-spacing: -1.4px;                  /* ref display tracking ratio at 56px */
  text-wrap: balance;
}
.article-standfirst {
  margin: 24px auto 0;
  max-width: 60ch;
  font-size: 21px;                         /* derived: standfirst between the ref lede 24 and body 16 */
  line-height: 1.5;
  color: var(--muted-ink);
}

.article-sec { padding: 0 48px 96px; }     /* kit: section pad member 96 closes the page */
.article-body {
  max-width: 65ch;                         /* the measure: ~65 characters, the readable line */
  margin: 0 auto;
  font-size: 18px;                         /* derived: long form reading step above the ref body 16 */
  line-height: 1.72;                       /* calm rhythm: ~31px leading on 18px type */
}
.article-body > * + * { margin-top: 26px; }             /* one rhythm unit between every block */
.article-body h2 {
  margin-top: 56px;                        /* a section break is two rhythm units plus a breath */
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.7px;
}
.article-body h2 + * { margin-top: 14px; }              /* the heading holds its paragraph close */
.article-body h3 {
  margin-top: 40px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.3px;
}
.article-body h3 + * { margin-top: 10px; }
.article-body a {
  color: var(--ink);                       /* kit: the exact accent never carries body text */
  text-decoration: underline;
  text-decoration-color: var(--accent);    /* kit: accent as a small mark */
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color .15s ease;
}
.article-body a:hover { color: var(--accent-cta); }
.article-body ul,
.article-body ol { padding-left: 24px; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-top: 8px; }
.article-body li::marker { color: var(--accent); }      /* kit: small saturated moment */
.article-body strong { font-weight: 500; }              /* kit: Onest ships 400 to 500, no heavier weight exists */
.article-body hr {
  border: 0;
  height: 2px;
  width: 40px;
  border-radius: 2px;
  background: var(--line);
  margin: 44px auto;
}

/* ---- Pull quote: a flat pastel block, not a ruled indent. Steps 32px out of
        the measure on either side so it reads as a set piece while the
        column stays honest. ---- */
.pull-quote {
  margin-top: 44px;
  margin-bottom: 44px;
  background: var(--card-blush);           /* kit: pastel card 1 */
  border-radius: 32px;                     /* ref card radius 32, border NONE, shadow NONE */
  padding: 40px 44px;
  width: calc(100% + 64px);
  margin-left: -32px;                      /* the modest breakout */
  font-size: 27px;
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -0.6px;
  color: var(--ink);
}
.pull-quote p { margin: 0; }
.pull-quote cite {
  display: block;
  margin-top: 18px;
  font-size: 15px;
  font-style: normal;
  line-height: 1.45;
  color: var(--muted-ink);
}

/* ---- Figure: same breakout as the pull quote, image clipped to the card
        radius, caption quiet underneath. ---- */
.article-fig {
  margin-top: 44px;
  margin-bottom: 44px;
  width: calc(100% + 64px);
  margin-left: -32px;
}
.article-fig img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 32px;                     /* ref card radius 32 */
  background: var(--line);                 /* the line fill shows while the image loads */
}
.article-fig figcaption {
  margin-top: 14px;
  padding: 0 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted-ink);
}

/* ---- Article foot: back to the index, nothing louder ---- */
.article-foot {
  max-width: 65ch;
  margin: 64px auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--line);       /* kit: line in its hairline role, as on the stat strip */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.article-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  transition: opacity .15s ease;
}
.article-back:hover { opacity: .7; }
.article-back svg { transition: transform .2s var(--ease-house); }
.article-back:hover svg { transform: translateX(-3px); }
.article-foot-note { font-size: 14px; color: var(--muted-ink); }

/* ==========================================================================
   Tablet: the docs grid drops to one column before the cards get cramped.
   ========================================================================== */
@media (max-width: 1024px) {
  .docs-grid { grid-template-columns: 1fr; }
  .article-hero h1 { font-size: 46px; letter-spacing: -1.15px; }
}

/* ==========================================================================
   Mobile (the frozen 820 breakpoint, so 375 and 768 both land here)
   ========================================================================== */
@media (max-width: 820px) {
  .page-hero { padding: 32px 20px 40px; }  /* ref mobile page gutter 20 */
  .page-eyebrow { font-size: 16px; }       /* ref mobile eyebrow 16 */
  .page-hero h1 {
    font-size: 28.125px;                   /* ref mobile h1 fingerprint */
    line-height: 30.9375px;
    letter-spacing: -0.703125px;
    max-width: 320px;
    margin-top: 12px;
  }
  .page-lede { font-size: 16px; margin-top: 16px; max-width: 335px; }

  .news-sec { padding: 0 20px; }
  .news-list { gap: 12px; }
  .news-link { padding: 24px; border-radius: 24px; gap: 8px; } /* ref mobile card pad 24, radius steps to 24 */
  .news-title { font-size: 22px; letter-spacing: -0.4px; max-width: none; }
  .news-excerpt { font-size: 15px; }

  .news-empty { padding: 56px 24px 52px; border-radius: 24px; }
  .news-empty .mascot-slot { width: 112px; height: 93px; }
  .news-empty-line { font-size: 20px; letter-spacing: -0.3px; }
  .news-empty-rule { margin: 22px 0 18px; }

  .docs-band { padding: 76px 20px 16px; }  /* kit: section pad member 76 on mobile */
  .docs-intro { margin-bottom: 24px; }
  .docs-intro h2 { font-size: 32px; letter-spacing: -0.8px; } /* ref mobile display 32/-0.8 */
  .docs-group { font-size: 15px; margin-bottom: 12px; }
  .docs-grid + .docs-group { margin-top: 28px; }
  .docs-grid { gap: 12px; }
  .doc-card { padding: 22px 24px; border-radius: 24px; min-height: 0; }
  .doc-card-lead { padding: 22px 24px; min-height: 0; }
  .doc-card-lead .doc-name { font-size: 20px; letter-spacing: -0.35px; max-width: none; }
  .doc-card-lead .doc-note { font-size: 14px; max-width: none; }
  .doc-name { font-size: 18px; padding-right: 30px; max-width: none; }
  .doc-note { font-size: 14px; max-width: none; }
  .doc-arrow { top: 22px; right: 22px; }
  .docs-all-row { margin-top: 24px; }

  .article-hero { padding: 36px 20px 28px; }
  .article-hero .mascot-slot { width: 64px; height: 53px; margin-bottom: 4px; }
  .article-hero h1 { font-size: 30px; letter-spacing: -0.75px; margin-top: 10px; }
  .article-standfirst { font-size: 17px; margin-top: 16px; }
  .article-sec { padding: 0 20px 64px; }
  .article-body { font-size: 16.5px; line-height: 1.68; max-width: none; }
  .article-body > * + * { margin-top: 22px; }
  .article-body h2 { font-size: 24px; margin-top: 40px; letter-spacing: -0.5px; }
  .article-body h3 { font-size: 19px; margin-top: 30px; }
  /* the breakout is a desktop move only: on mobile the gutter IS the margin */
  .pull-quote,
  .article-fig { width: 100%; margin-left: 0; }
  .pull-quote { padding: 24px; border-radius: 24px; font-size: 20px; letter-spacing: -0.3px; margin-top: 32px; margin-bottom: 32px; }
  .pull-quote cite { font-size: 14px; margin-top: 14px; }
  .article-fig { margin-top: 32px; margin-bottom: 32px; }
  .article-fig img { border-radius: 24px; }
  .article-foot { max-width: none; margin-top: 44px; }
}

/* ---- catalog 058 Hover Text Highlight on the shared footer link columns:
        mirrors the treatment carried by every other page so the accent
        underline wipe (scaleX from the leading edge, house ease) is live
        here too. ---- */
.hl-links a { position: relative; }
.hl-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s var(--ease-house);
}
.hl-links a:hover::after,
.hl-links a:focus-visible::after { transform: scaleX(1); }

/* ---- Reduced motion: every transition on this page family dies here
        (build law). Nothing was hidden at rest, so nothing needs revealing. ---- */
@media (prefers-reduced-motion: reduce) {
  .news-link,
  .doc-card,
  .news-more svg,
  .doc-arrow svg,
  .docs-all,
  .docs-all svg,
  .article-back svg,
  .news-empty-link,
  .article-body a,
  .hl-links a::after { transition: none; }
  .news-link:hover,
  .news-link:focus-visible,
  .doc-card:hover,
  .doc-card:focus-visible { transform: none; }
  .news-link:hover .news-more svg,
  .news-link:focus-visible .news-more svg,
  .doc-card:hover .doc-arrow svg,
  .doc-card:focus-visible .doc-arrow svg,
  .docs-all:hover svg,
  .article-back:hover svg { transform: none; }
}