/* ===========================================================
   RSAI Blog — Newspaper Editorial Design
   Shared styles extracted from car-free.html, the new design
   direction for article/post pages. Load after main.css.
   =========================================================== */

  :root{
    --paper:#F2F1EC;
    --paper-deep:#E8E6DE;
    --ink:#000000;
    --ink-soft:#3A3830;
    --rule:#A9A79C;
    --blue:#002868;
    --red:#BF0A30;
    --measure:34rem;
  }

  *{box-sizing:border-box;}

  html{-webkit-text-size-adjust:100%;}

  body{
    margin:0;
    background:
      repeating-linear-gradient(0deg, rgba(0,0,0,.012) 0 1px, transparent 1px 3px),
      var(--paper);
    color:var(--ink);
    font-family:"Newsreader",Georgia,serif;
    font-optical-sizing:auto;
    font-size:19px;
    line-height:1.52;
  }

  .sheet{
    max-width:1180px;
    margin:0 auto;
    padding:28px 26px 0;
  }

  /* ---------- nameplate ---------- */

  .nameplate{
    border-top:3px solid var(--ink);
    border-bottom:1px solid var(--ink);
    padding:16px 0 10px;
    text-align:center;
  }
  .nameplate h1{
    margin:0;
    font-family:"Newsreader",Georgia,serif;
    font-weight:800;
    font-size:clamp(1.7rem,5.2vw,3.1rem);
    letter-spacing:.055em;
    text-transform:uppercase;
    line-height:1;
  }
  .nameplate .plate-sub{
    margin:9px 0 0;
    font-family:"Archivo Narrow",Arial,sans-serif;
    font-size:.72rem;
    letter-spacing:.32em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }

  .folio-strip{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    border-bottom:3px double var(--ink);
    font-family:"Archivo Narrow",Arial,sans-serif;
    font-size:.74rem;
    letter-spacing:.14em;
    text-transform:uppercase;
  }
  .folio-strip span{padding:7px 10px;}
  .folio-strip span+span{border-left:1px solid var(--rule);}
  .folio-strip span:last-child{text-align:right;}

  /* ---------- headline block ---------- */

  header.lead{
    padding:34px 0 22px;
    text-align:center;
    border-bottom:1px solid var(--rule);
  }
  .kicker{
    font-family:"Archivo Narrow",Arial,sans-serif;
    font-weight:700;
    font-size:.8rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--red);
    margin:0 0 14px;
  }
  header.lead h2{
    margin:0 auto;
    max-width:19ch;
    font-weight:800;
    font-size:clamp(2.6rem,9vw,5.6rem);
    line-height:.94;
    letter-spacing:-.02em;
  }
  .deck{
    margin:20px auto 0;
    max-width:42ch;
    font-size:clamp(1.05rem,2.4vw,1.4rem);
    font-weight:300;
    font-style:italic;
    line-height:1.4;
    color:var(--ink-soft);
  }
  .byline{
    margin:22px auto 0;
    font-family:"Archivo Narrow",Arial,sans-serif;
    font-size:.78rem;
    letter-spacing:.16em;
    text-transform:uppercase;
  }
  .byline em{font-style:normal;color:var(--ink-soft);}

  /* ---------- figures ---------- */

  figure{margin:0 0 26px;}
  figure img{
    display:block;
    width:100%;
    height:auto;
    border:1px solid var(--ink);
    filter:saturate(.94) contrast(1.02);
  }
  figcaption{
    font-family:"Archivo Narrow",Arial,sans-serif;
    font-size:.82rem;
    line-height:1.4;
    padding-top:7px;
    color:var(--ink-soft);
    border-bottom:1px solid var(--rule);
    padding-bottom:8px;
  }
  figcaption b{
    color:var(--ink);
    font-weight:700;
  }

  .hero{margin:26px 0 30px;}
  .hero img{max-height:72vh;object-fit:cover;object-position:center 38%;}

  /* in-column figure: sits at the width of a single column */
  .story figure{margin:.4em 0 1.2em;}
  .story figure img{filter:saturate(.94) contrast(1.02);}

  /* two-up plate across the full page */
  .pair{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
    margin:6px 0 28px;
  }
  .pair figure{margin:0;}

  /* ---------- body columns ---------- */

  .story{
    columns:3;
    column-gap:34px;
    column-rule:1px solid var(--rule);
    padding-bottom:10px;
  }
  .story > *{break-inside:avoid-column;}
  .story p{
    margin:0 0 1.05em;
    text-align:justify;
    hyphens:auto;
    break-inside:auto;
  }
  .story p.lede::first-letter{
    float:left;
    font-size:4.55em;
    line-height:.78;
    font-weight:600;
    padding:.06em .09em 0 0;
    margin-top:.04em;
  }
  .story p.lede{text-align:left;}

  .story h3{
    margin:1.5em 0 .5em;
    font-size:1.16rem;
    font-weight:700;
    line-height:1.2;
    letter-spacing:.01em;
    border-top:2px solid var(--ink);
    padding-top:.45em;
  }
  .story h3:first-child{margin-top:0;}

  .span{
    column-span:all;
    break-inside:avoid;
  }

  .standout{
    padding:22px 0 4px;
    border-top:1px solid var(--rule);
    text-align:center;
  }
  .standout h3{
    border:0;
    padding:0;
    margin:0 0 .35em;
    font-size:1.35rem;
  }
  .standout p{
    text-align:center;
    hyphens:none;
    margin:0 auto;
    max-width:56ch;
    font-size:1.08rem;
    line-height:1.5;
  }

  /* ---------- pull quote ---------- */

  .quote{
    margin:14px 0 30px;
    padding:26px 0;
    border-top:4px solid var(--ink);
    border-bottom:4px solid var(--ink);
    text-align:center;
  }
  .quote p{
    text-align:center;
    hyphens:none;
    margin:0 auto;
    max-width:26ch;
    font-size:clamp(1.5rem,4.2vw,2.35rem);
    font-weight:600;
    line-height:1.16;
    letter-spacing:-.01em;
  }
  .quote .attrib{
    text-align:center;
    margin-top:16px;
    font-family:"Archivo Narrow",Arial,sans-serif;
    font-size:.76rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--ink-soft);
    font-weight:400;
    max-width:none;
  }

  /* ---------- boxed sidebar ---------- */

  .box{
    border:1px solid var(--ink);
    border-top:7px solid var(--blue);
    background:var(--paper-deep);
    padding:18px 19px 16px;
    margin:0 0 26px;
  }
  .box h4{
    margin:0 0 4px;
    font-size:1.12rem;
    font-weight:700;
    line-height:1.15;
  }
  .box .box-note{
    margin:0 0 12px;
    font-family:"Archivo Narrow",Arial,sans-serif;
    font-size:.8rem;
    color:var(--ink-soft);
  }
  .box ul{
    margin:0;
    padding:0;
    list-style:none;
    font-size:.97rem;
  }
  .box li{
    padding:7px 0;
    border-top:1px solid var(--rule);
    line-height:1.35;
  }
  .box li span{
    display:block;
    font-family:"Archivo Narrow",Arial,sans-serif;
    font-size:.8rem;
    color:var(--ink-soft);
  }

  /* ---------- closing / contact ---------- */

  .closer{
    margin:8px 0 0;
    border-top:3px double var(--ink);
    padding-top:24px;
    display:grid;
    grid-template-columns:1.55fr 1fr;
    gap:34px;
    align-items:start;
  }
  .closer h3{
    margin:0 0 .45em;
    font-size:1.45rem;
    font-weight:700;
    line-height:1.15;
  }
  .closer p{margin:0 0 1em;max-width:var(--measure);}
  .closer .sign{
    font-style:italic;
    font-size:1.18rem;
    line-height:1.35;
    border-left:3px solid var(--red);
    padding-left:14px;
    color:var(--ink);
  }
  .contact{
    border:1px solid var(--ink);
    padding:18px 19px;
    font-family:"Archivo Narrow",Arial,sans-serif;
    font-size:.92rem;
    line-height:1.5;
  }
  .contact h4{
    margin:0 0 8px;
    font-family:"Newsreader",Georgia,serif;
    font-size:1.1rem;
    font-weight:700;
  }
  .contact a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;}
  .contact a:hover{background:var(--blue);color:var(--paper);text-decoration:none;}

  footer.folio{
    margin-top:34px;
    border-top:1px solid var(--ink);
    border-bottom:6px solid var(--ink);
    padding:12px 0 16px;
    font-family:"Archivo Narrow",Arial,sans-serif;
    font-size:.76rem;
    line-height:1.5;
    color:var(--ink-soft);
    display:grid;
    grid-template-columns:1fr auto;
    gap:16px;
    align-items:end;
  }
  footer.folio p{margin:0;max-width:60ch;}
  footer.folio .page{
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--ink);
  }

  a:focus-visible,button:focus-visible{
    outline:3px solid var(--blue);
    outline-offset:2px;
  }

  /* ---------- responsive ---------- */

  @media (max-width:980px){
    .story{columns:2;column-gap:28px;}
    .closer{grid-template-columns:1fr;gap:24px;}
  }
  @media (max-width:640px){
    body{font-size:18px;}
    .sheet{padding:18px 16px 0;}
    .story{columns:1;column-rule:none;}
    .pair{grid-template-columns:1fr;gap:18px;}
    .story p{text-align:left;hyphens:none;}
    .folio-strip{grid-template-columns:1fr;}
    .folio-strip span+span{border-left:none;border-top:1px solid var(--rule);}
    .folio-strip span:last-child{text-align:left;}
    .hero img{max-height:60vh;}
    header.lead{padding:26px 0 18px;}
  }

  @media print{
    body{background:#fff;font-size:10.5pt;}
    .sheet{max-width:none;padding:0;}
    figure img{filter:none;}
  }