/* =====================================================================
   article-flow.css — centered editorial article layout (Option B).
   Loads on top of article-page.css. Only the content block + the grow /
   reversed-bloom behaviour differ; hero, header, footer stay as designed.
   ===================================================================== */

#stage{ height:1970px; }   /* JS overrides to 1970 + delta */

/* keep the panel background identical at baseline (light -> navy by 990px),
   then hold navy below so long articles stay readable. Height grows via JS. */
.ar-panel{ background-image:linear-gradient(180deg,#a3b1c1 0, #203148 990px); }

/* ---- centered content ---- */
.ar-content{ position:absolute; left:0; top:632px; width:1280px; z-index:3; }
.ar-wrap{ width:720px; margin:0 auto; text-align:center; }

.ar-kicker{
  font-family:'Inter',sans-serif; font-weight:600; font-size:14px;
  letter-spacing:2.5px; text-transform:uppercase; color:#7a111c; margin:0 0 16px;
}
.ar-title{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:46px;
  line-height:1.06; text-transform:uppercase; color:#ffffff;
  text-shadow:0 2px 14px rgba(0,0,0,0.28); margin:0 0 22px;
  overflow-wrap:break-word; word-break:break-word;
}
.ar-rule{ width:64px; height:3px; border-radius:2px; background:#80121d; margin:0 auto 34px; }

.ar-lead{
  font-family:'Inter',sans-serif; font-weight:400; font-size:22px; line-height:1.62;
  color:#ffffff; text-shadow:0 1px 3px rgba(0,0,0,0.30); margin:0 auto 40px; max-width:660px;
  overflow-wrap:break-word; word-break:break-word;
}

.ar-feature{ margin:0 auto 42px; width:512px; max-width:100%; }
.ar-feature img{ display:block; width:100%; height:auto; border-radius:18px; box-shadow:0 26px 64px rgba(0,0,0,0.48); }
.ar-feature figcaption{
  font-family:'Inter',sans-serif; font-weight:400; font-size:13px; letter-spacing:0.2px;
  color:rgba(255,255,255,0.62); margin-top:14px;
}

.ar-p{
  font-family:'Inter',sans-serif; font-weight:300; font-size:20px; line-height:1.78;
  color:rgba(255,255,255,0.94); text-shadow:0 1px 3px rgba(0,0,0,0.30);
  margin:0 auto 28px; max-width:680px;
}

.ar-quote{ margin:14px auto 40px; max-width:600px; }
.ar-quote p{
  font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:27px; line-height:1.36;
  color:#ffffff; margin:0; text-shadow:0 2px 10px rgba(0,0,0,0.25);
}
.ar-quote .mark{ display:block; font-size:56px; line-height:0.2; color:#80121d; margin-bottom:22px; }

.ar-end{ width:38px; height:3px; background:rgba(255,255,255,0.5); border-radius:2px; margin:20px auto 0; }

/* rich body from the editor (headings, lists, quotes, links, bold, alignment) */
.ar-richtext{ max-width:680px; margin:0 auto; text-align:left;
  font-family:'Inter',sans-serif; font-weight:300; font-size:20px; line-height:1.78;
  color:rgba(255,255,255,0.94); text-shadow:0 1px 3px rgba(0,0,0,0.30);
  /* same reason as the project body: an unbroken string has no break
     opportunity, so it overflows the column AND keeps the element one line
     tall, which stops the page height calculation from growing */
  overflow-wrap:break-word; word-break:break-word; }
.ar-richtext *{ overflow-wrap:break-word; word-break:break-word; max-width:100%; }
/* div is in this list because the admin's rich-text editor is a
   contenteditable, and browsers wrap each line in a <div>, not a <p>. Without
   it the body copy fell back to the default black on the dark panel and was
   effectively unreadable - the <h2> was styled and white, every line under it
   was black. Anything typed or pasted into the editor produces divs. */
.ar-richtext p,.ar-richtext div,.ar-richtext.ar-p,.ar-richtext .ar-p{
  font-family:'Inter',sans-serif; font-weight:300; font-size:20px; line-height:1.78;
  color:rgba(255,255,255,0.94); text-shadow:0 1px 3px rgba(0,0,0,0.30); margin:0 0 22px;
}
.ar-richtext h2{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:30px; color:#fff; margin:10px 0 14px; }
.ar-richtext h3{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:23px; color:#fff; margin:8px 0 12px; }
.ar-richtext ul,.ar-richtext ol{ margin:0 0 22px 1.4em; color:rgba(255,255,255,0.94); }
.ar-richtext span{ color:inherit; }
.ar-richtext li{ font-family:'Inter',sans-serif; font-weight:300; font-size:20px; line-height:1.7; margin-bottom:6px; text-shadow:0 1px 3px rgba(0,0,0,0.30); }
.ar-richtext blockquote{ border-left:3px solid #80121d; margin:0 0 22px; padding:4px 0 4px 20px; font-family:'Space Grotesk',sans-serif; font-size:22px; color:#fff; text-align:left; }
.ar-richtext a{ color:#e6949c; text-decoration:underline; }
.ar-richtext b,.ar-richtext strong{ font-weight:600; color:#fff; }

/* soft reversed bloom (dark -> light -> dark) between text & footer */
.ar-tail{
  position:absolute; left:0; width:1280px; z-index:2; pointer-events:none;
  background-image:linear-gradient(180deg,
    rgba(163,177,193,0)    0%,
    rgba(163,177,193,0.14) 40%,
    rgba(163,177,193,0.26) 55%,
    rgba(163,177,193,0.12) 74%,
    rgba(163,177,193,0)    100%);
}