/* ========================================================================
   Freight World — NEWS page (page-scoped). Inherits the locked system.
   Consumes shared tokens from styles.css; selectors scoped under .page-news.
   Mobile-first (375). Hero VARIANT: stacked masthead type + wide cinematic
   banner plate (distinct from the home's portrait-left hero), reads secondary.
   This is the working-slice page: the route + quote configurator lives in the
   theme-light section and is driven entirely by the shared app.js (#quoteForm),
   with its .c-route* styling already in styles.css. This sheet adds only the
   page-introduced blocks + the form lead the working slice needs.
   ======================================================================== */

/* ---------------- HERO VARIANT ---------------- */
.page-news .n-hero{
  position:relative;padding:7rem var(--pad) 0;
  display:flex;flex-direction:column;gap:2rem;
}
.page-news .n-hero__head{display:flex;flex-direction:column}
.page-news .n-hero__title{
  font-size:clamp(3.1rem,17vw,7rem);color:var(--ink);margin-bottom:1.4rem;
}
.page-news .n-hero__title span{display:block}
.page-news .n-hero__amp{
  color:var(--accent);font-family:var(--display);margin:0 .12em;
}
.page-news .n-hero__intro{
  font-size:1rem;color:var(--ink-soft);max-width:46ch;line-height:1.55;
}
.page-news .n-hero__intro strong{color:var(--ink)}
.page-news .n-hero__media{position:relative}
.page-news .n-hero__media img{
  width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-flat);
}
.page-news .n-hero__cap{
  font-family:var(--body);font-size:.72rem;letter-spacing:.05em;color:var(--ink-soft);
  position:absolute;right:1rem;bottom:1rem;text-align:right;line-height:1.7;
  background:rgba(19,19,19,.55);padding:.5rem .7rem;backdrop-filter:blur(2px);
}

/* ---------------- SHARED META ROW ---------------- */
.page-news .n-meta{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  font-family:var(--body);font-size:.8rem;color:var(--ink-soft);
  letter-spacing:.02em;margin-bottom:1rem;
}
.page-news .n-meta__tag{
  font-family:var(--sub);font-weight:700;font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);
  border:1px solid var(--accent);padding:.25em .65em;
}
.page-news .n-meta time{text-transform:uppercase;letter-spacing:.04em}

/* ---------------- LEAD / FEATURED ARTICLE ---------------- */
.page-news .n-lead{padding-block:clamp(3rem,9vw,6rem)}
.page-news .n-lead .c-label-paren{display:inline-block;margin-bottom:1.8rem}
.page-news .n-lead__grid{display:grid;gap:2rem}
.page-news .n-lead__media img{
  width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-flat);
}
.page-news .n-lead__head{
  font-size:clamp(1.7rem,7vw,2.8rem);color:var(--ink);margin-bottom:1.2rem;
}
.page-news .n-lead__excerpt{
  color:var(--ink-soft);font-size:1rem;line-height:1.6;max-width:54ch;margin-bottom:1.8rem;
}

/* ---------------- ARTICLE INDEX (numbered editorial list) ---------------- */
.page-news .n-index{padding-block:clamp(2.5rem,8vw,5rem)}
.page-news .n-index__head{margin-bottom:2.4rem}
.page-news .n-index__intro{
  font-size:clamp(1.3rem,5.4vw,2.1rem);max-width:30ch;margin-top:1.1rem;color:var(--ink);
}
.page-news .n-list{list-style:none;display:grid;gap:0}
.page-news .n-item{
  display:grid;gap:.8rem;padding-block:2.2rem;border-top:1px solid var(--line);
  transition:opacity .25s;
}
.page-news .n-item:last-child{border-bottom:1px solid var(--line)}
.page-news .n-item__no{
  font-family:var(--display);color:var(--ink-soft);font-size:1.1rem;line-height:1;
}
.page-news .n-item__head{
  font-size:clamp(1.4rem,6vw,2.1rem);color:var(--ink);margin-bottom:.7rem;
  transition:color .2s;
}
.page-news .n-item:hover .n-item__head{color:var(--accent)}
.page-news .n-item__body{
  color:var(--ink-soft);font-size:.95rem;line-height:1.6;max-width:60ch;
}

/* ---------------- WORKING SLICE: theme-light scene + form lead ----------------
   The .c-network / .c-route styling is shared (styles.css). On this page the
   network headline reframes around the news angle ("A RULE CHANGED? MAP IT.")
   and the form gains a lead line, matching the network page's working slice. */
.page-news .c-route__formlead{
  font-size:1.3rem;color:var(--ink-inverse);margin-bottom:.4rem;
}

/* ---------------- NOTICE / CONTEXT STATEMENT ---------------- */
.page-news .n-note{padding-block:clamp(2.5rem,8vw,5rem)}
.page-news .n-note__line{
  font-size:clamp(1.15rem,4.6vw,1.8rem);max-width:38ch;color:var(--ink-soft);
  font-weight:600;line-height:1.35;
}

/* ---------------- CTA text-only variant ---------------- */
.page-news .n-cta{display:block}
.page-news .n-cta .c-cta__txt{max-width:46ch}

/* ======================= DESKTOP ======================= */
@media (min-width:760px){
  .page-news .n-hero{padding-top:9rem;gap:2.6rem}
  .page-news .n-hero__head{
    display:grid;grid-template-columns:1.1fr .9fr;align-items:end;gap:3rem;
  }
  .page-news .n-hero .c-label{grid-column:1/-1}
  .page-news .n-hero__title{margin-bottom:0;font-size:clamp(4.4rem,11vw,8.5rem)}
  .page-news .n-hero__intro{margin-bottom:.4rem}
  .page-news .n-hero__media img{aspect-ratio:21/9}

  .page-news .n-lead__grid{grid-template-columns:1.05fr .95fr;align-items:center;gap:3.5rem}

  .page-news .n-item{
    grid-template-columns:64px 1fr;align-items:start;gap:2.5rem;
  }
  .page-news .n-item__no{padding-top:.2rem}

  .page-news .n-cta .c-cta__txt{max-width:54ch}
}

@media (min-width:1100px){
  .page-news .n-hero__title{font-size:clamp(5.5rem,9vw,9rem)}
}

/* ======================= REDUCED MOTION (inherits shared reveal reset) ======================= */
@media (prefers-reduced-motion:reduce){
  .page-news .n-item__head{transition:none}
  .page-news [data-reveal]{opacity:1;transform:none;transition:none}
}