/* /feature's own layout -- the parts of a long-form article that the
 * product-page layer does not and should not describe.
 *
 * WHY THIS FILE EXISTS. /feature was ported to the .pp-* layer on
 * 2026-08-17 with the other three products, but it is the odd one: /daily,
 * /publol and /ctrl-shift are LISTS of stories and /feature is ONE story,
 * told at length. So the layer gives it what it genuinely shares -- the
 * eyebrow and dateline, the missing-hero frame, the chips -- and everything
 * below is what a list page has no equivalent of: an article header, a
 * stats strip, an exhibit table, a methodology box, a webinar CTA.
 *
 * It is a FILE rather than the <style> block it used to be for one reason:
 * a ported page must declare no CSS of its own
 * (tests/test_product_page_shared_rules.py). A page-local block is how the
 * four product pages became four designs, and the fact that these
 * particular rules are legitimately local does not make an inline block a
 * safe place to keep them -- the next rule added there will not be.
 *
 * `style-src 'self'` covers a same-origin stylesheet in BOTH the enforced
 * and the report-only policy (frontend_app/main.py:_build_csp), the same
 * reason edition-states.css, byline.css and article-prose.css are files.
 *
 * WHAT IS DELIBERATELY NOT HERE:
 *   - `.imgcredit`  sized once in base.html (review_notes 102/145)
 *   - `.body h2/h3` article-prose.css, shared with /article (141)
 *   - `.byline .avatar/.name/.role/.date`  byline.css, shared with /article
 *   - the eyebrow, the dateline, the 1200x630 frame and the chips, which
 *     are now .pp-eyebrow, .pp-sub, .pp-heroslot and .pp .chip
 *
 * TWO RULES WERE DROPPED IN THE PORT AND BOTH WERE ALREADY DEAD: `.kicker`,
 * a mono uppercase line the markup stopped rendering when review_notes 15
 * replaced it with the two-line eyebrow/dateline; and `:root{--ivory}`,
 * which base.html already defines. Checked, not assumed.
 *
 * SPACING: 24px IS A LITERAL ON PURPOSE. The scale is 12/14/16/18/20/30,
 * so 24 has no token -- and the first draft of this file tokenised it to
 * var(--space-2xl) anyway, which is 20px, quietly shrinking four margins
 * while the diff read like a pure consolidation. Every value here was
 * re-checked against the rules this file replaced. A token that is CLOSE to
 * the literal is worse than the literal, because the change hides inside
 * something that looks like tidying.
 *
 * A NOTE FOR WHOEVER SHARES THESE NEXT. `blockquote`, `.exhibit` and
 * `.method` almost certainly belong with /article rather than here --
 * both pages render the same editor-authored body field. They are left
 * local because /article's copies are not byte-identical to these, and
 * reconciling two near-identical treatments is a design call, not a
 * consolidation. Same hold, and same reason, as `.byline` in byline.css.
 */

/* ===== THE ARTICLE HEADER ===== */

.artichead{border-bottom:2px solid var(--navy);padding-bottom:var(--space-lg);margin-bottom:var(--space-lg)}
/* id 16 (review_notes): herohead wraps only the sublogo + H1 (the dek sits
   below) so the logo aligns to -- and is sized to match -- the H1 alone,
   instead of centring against the whole header stack. */
.artichead .herohead{display:flex;align-items:center;gap:var(--space-md);margin-bottom:0}
/* 52px is the sublogo PNGs' NATIVE size; 40px here is a deliberate
   down-scale for the article header. Never scale them UP -- there is no
   higher-resolution source yet (Sudeep's own open re-render TODO). */
.artichead .sublogo{height:40px;width:auto;display:block;flex:0 0 auto}
/* review_notes 139/140: this rule used to hand-override base.html's H1 to
   IBM Plex Serif at 300 (Light) while /ctrl-shift let the family fall
   through to the shared Sans SemiBold -- two Stream B mastheads, one shared
   declaration, and only one page using it. The override is gone rather than
   re-pointed, because restating shared values is what let them drift. All
   that survives is margin-bottom:0, which is genuinely local: note 16's
   flex .herohead cannot carry the scale's 16px trailing margin. */
.artichead h1{margin-bottom:0}
/* id 88: the dek runs the full header measure, no `ch` cap. It carried
   max-width:65ch, which at 18px Plex Serif is 702px -- against a 1020px
   column that left the dek 318px short of the H1's right edge on desktop,
   while on mobile the cap never applied and the two already lined up. The
   65ch reading measure still governs the article BODY, where it belongs. */
/* THE STANDFIRST, and it is deliberately NOT snapped to the lead role.
   /article/{slug} renders the SAME FIELD through `.standfirst` at
   IBM Plex Serif 300 / 18px, and this rule is its twin. The lead role is
   400 at clamp(17-19px), so adopting it here alone would have made the one
   piece of editorial copy that appears on both pages look different
   depending on which page you read it on -- a new divergence created BY a
   consolidation, which is the exact failure this whole exercise exists to
   undo. The pair should move to the role together, in a commit that moves
   both and says so; Serif Light at reading size is the same complaint
   review_notes 150/151 raised about `.hero p`, so there is a real case for
   it. Registered in test_type_scale_is_single_source.py's _SIZE_EXCEPTIONS
   with this reason rather than left as a silent literal. */
.artichead .dek{font:300 18px/1.5 var(--serif);color:var(--muted);margin-top:12px}
.artichead .chips{margin-top:14px}

/* ===== THE STATS STRIP ===== */

.statstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:var(--space-2xl);margin:24px 0;padding:var(--space-2xl);
  background:var(--sand);border-radius:8px}
.stat{text-align:center}
.stat .num{font-size:var(--fs-subhead);font-weight:600;color:var(--navy);line-height:1.2;margin-bottom:4px}
.stat .lbl{font:var(--type-label);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}

/* ===== THE BYLINE CONTAINER ===== */

/* The same COMPONENT as /article's, shared through byline.css. `.byline`
   itself stays local: this page is roomier (gap 16 / margin 24 / padding
   16, against /article's 12 / 22 / 14), which may well be deliberate for
   the long-form surface -- a design call, so it is not averaged away. */
.byline{display:flex;align-items:center;gap:var(--space-lg);padding:var(--space-lg) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:24px 0}

/* ===== THE ARTICLE BODY ===== */

/* review_notes 142 removed the whole `.summary` component -- the ivory
   "KEY POINTS" callout and the <ol>/<li>/<p> branching that fed it. The
   standfirst it printed now renders under the headline as `.dek`. */
/* THE READING SURFACE moved to /static/css/article-prose.css on 2026-09-19
   (cp-478). It was right that the leading was "looser than any role's,
   because this is the only place on the site somebody reads a thousand words
   in one go" -- that is now a role of its own, `prose`, at 1.8, rather than a
   local exception on one of the two files that render this content. */

blockquote{background:var(--navy);color:#fff;border-left:4px solid var(--yellow);
  padding:var(--space-lg) var(--space-xl);margin:var(--space-2xl) 0;border-radius:4px;
  font-style:italic;font-size:var(--fs-body);line-height:1.6;max-width:60ch}
blockquote .attr{font:var(--type-caption);font-style:normal;color:#c9ccd6;margin-top:8px}

.exhibit{background:var(--sand);border:1px solid var(--line);border-radius:8px;
  padding:var(--space-lg);margin:var(--space-2xl) 0;overflow-x:auto}
.exhibit table{width:100%;border-collapse:collapse}
.exhibit th{background:var(--navy);color:#fff;padding:10px;text-align:left;
  font:var(--type-caption);font-weight:600}
.exhibit td{padding:10px;border-bottom:1px solid var(--line);
  font:400 14px/1.5 var(--serif)}

.method{background:var(--sand);border:1px solid var(--line);border-radius:8px;
  padding:var(--space-xl);margin:var(--space-2xl) 0}
.method h3{font-size:14px;font-weight:600;margin-bottom:8px;color:var(--navy)}
.method p{font:400 14px/1.6 var(--serif);color:#3a3a38;margin-bottom:8px}
.method p:last-child{margin-bottom:0}

.fwd{background:var(--ivory);border:1px solid var(--yellow);border-radius:8px;
  padding:var(--space-lg);margin:var(--space-2xl) 0}
.fwd h3{font:var(--type-caption);font-weight:600;color:var(--navy);margin-bottom:6px}
.fwd a{color:var(--navy);text-decoration:none;font-weight:600}
.fwd a:hover{text-decoration:underline;text-decoration-color:var(--yellow)}

/* ===== THE CLOSING CTA =====
 *
 * NOT pp-promo, and that is a content difference rather than a styling one.
 * The other three products close by asking a visitor to join or a member to
 * refer; /feature closes by pointing at the webinar that goes with the
 * piece, which is a different offer to a different reader at a different
 * moment. Sharing the box would have meant sharing the pitch. */
.webinar{background:var(--navy);color:#fff;border-radius:8px;
  padding:24px;margin:28px 0;text-align:center}
.webinar h3{font-size:var(--fs-body);margin-bottom:12px}
.webinar a{display:inline-block;background:var(--yellow);color:var(--navy);
  font-weight:600;font-size:14px;text-decoration:none;padding:11px var(--space-2xl);border-radius:8px}
.webinar a:hover{opacity:.9}

@media(max-width:640px){
  /* .artichead h1 and .body overrides removed 2026-09-19 (cp-478). The h1
     one was the larger surprise: it stepped the phone headline down to the
     SUBHEAD role, 21px, while /article/{slug} showed the same headline at
     25px. Both now take --fs-headline's own 26px floor. */
  .statstrip{grid-template-columns:1fr 1fr}
}