/* edition.css — the digest body and the workflow node graph.

   Layout, placement and typographic hierarchy follow the owner's reference template.
   Colour does NOT: every value here is one of our own tokens, one accent (var(--accent)),
   0.5px hairlines instead of the template's box-shadows, and no second hue. The template's
   orange second lane is carried by weight and label here, never by a new colour.

   Loaded after mystyle.css and before mobile.css. Rules at or below 767px belong in
   mobile.css, inside its single media query — the 900px block below is the tablet seam. */

:root{
  /* The value already appears three times in mystyle.css; naming it makes the editorial
     serif a token rather than a repeated literal. */
  --f-serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
}

/* ---------- the shared shell: lead strip + masthead ----------
   The two things the owner's daily and weekly mockups have in common, so all three
   surfaces (/briefings, /weekly, the standalone) paint the same markup. */
.wke-hero{
  position:relative; display:grid; grid-template-columns:1.55fr 1fr;
  min-height:224px; margin:0 0 6px;
  background:var(--ink); color:var(--ink-text);
  border-radius:var(--r-lg); overflow:hidden;
}
.wke-hero-copy{ padding:30px 26px; display:flex; flex-direction:column; gap:12px; }
.wke-hero-eyebrow{
  margin:0; color:var(--ink-text-2);
  font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
}
.wke-hero-h{
  max-width:620px; margin:0; font-family:var(--f-display);
  font-size:clamp(26px,3.6vw,46px); line-height:1.03; letter-spacing:-.04em; font-weight:700;
}
.wke-hero-h a:hover{ color:var(--accent-on-dark); }
.wke-hero-dek{
  max-width:56ch; margin:0; color:var(--ink-text-2); font-size:16px; line-height:1.5;
}
.wke-hero-media{ position:relative; min-height:224px; margin:0; background:var(--ink-2); }
.wke-hero-media img{ width:100%; height:100%; object-fit:cover; }
.wke-hero-credit{
  position:absolute; right:10px; bottom:9px; padding:4px 8px;
  border-radius:var(--r-xs); background:rgba(255,255,255,.9); color:#45464a; font-size:12px;
}
.wke-hero-credit a{ text-decoration:underline; }

/* The weekly's bleed hero: the top story's picture fills the whole strip and the copy sits
   over it on the left. The fade is a legibility scrim over a photograph, requested by the
   owner's mock - not decoration. Its stops are --ink (#1c1c1f) as literal channels, because
   rgba() needs them. The daily's brand hero bleeds the same way when it has a picture. */
.wke-hero--bleed{ display:block; min-height:340px; }
.wke-hero--bleed .wke-hero-media{ position:absolute; inset:0; min-height:0; }
.wke-hero--bleed .wke-hero-media img{ object-position:72% 22%; }   /* a wide strip crops the top off a face at 50% (owner, 2026-09-30) */
.wke-hero--bleed .wke-hero-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(28,28,31,.97) 0%, rgba(28,28,31,.9) 36%, rgba(28,28,31,.45) 56%, rgba(28,28,31,0) 74%);
}
.wke-hero--bleed .wke-hero-copy{ position:relative; z-index:1; max-width:700px; padding:34px 30px 48px; }
.wke-hero--bleed .wke-hero-h{ max-width:680px; }   /* two lines at 1440, as in the mock */
.wke-hero--bleed .wke-hero-credit{ z-index:1; background:rgba(28,28,31,.72); color:rgba(255,255,255,.86); }
.wke-hero--bleed .wke-hero-credit a{ color:inherit; }
/* The daily's brand copy (eyebrow, tagline, dek, top story) over the same bleed. */
.wke-hero--brand.wke-hero--bleed .wke-hero-copy{ max-width:720px; padding:34px 30px 48px; }

/* The edition crumbs ARE the site's floating pill: the nav carries .dash-float-crumbs and
   mystyle.css paints the capsule, the hairline separators and the ink current item. This
   sheet only places it straddling the hero's bottom edge. Nothing here may style the items:
   this file loads after mystyle.css, so any a/span rule would outrank the site's. */
.wke-crumbs.wke-crumbs--float{
  position:relative; z-index:2; display:flex; width:fit-content;   /* block-level: an inline box's negative margin is lost to the line box */
  margin:-22px 0 22px 24px;
}
.wke-crumbs ol{ display:flex; align-items:center; gap:2px; margin:0; padding:0; list-style:none; }
.wke-crumbs li{ display:inline-flex; align-items:center; gap:2px; }

.wke-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding:20px 2px 14px; }
.wke-mast{
  margin:0; font-family:var(--f-display); font-weight:700;
  font-size:clamp(34px,5.4vw,64px); line-height:.92; letter-spacing:-.05em; text-transform:uppercase;
}
.wke-mast span{ font-weight:300; }
.wke-date{ padding-bottom:8px; color:var(--text-3); font-family:var(--f-mono); font-size:13px; }
/* The founder's byline takes the date's place: photo, name, the date under the name. The
   name's colour is the link's one hover affordance. */
.wke-by{ display:inline-flex; align-items:center; gap:10px; color:inherit; text-decoration:none; }
.wke-by-photo{ width:64px; height:64px; border-radius:50%; object-fit:cover; object-position:top center; border:.5px solid var(--border); }
.wke-by-txt{ display:flex; flex-direction:column; gap:2px; }
.wke-by-name{ font-size:14px; font-weight:600; line-height:1.2; }
.wke-by .wke-date{ padding-bottom:0; }
a.wke-by:hover .wke-by-name{ color:var(--accent); }


/* The dark lead strip IS the hero on these pages, so the generic banner above it is a
   second one competing with it. On /briefings it was never even a real banner:
   dash-hero.js's BANNER_KEYS has no `briefings` entry, so imgUrl() fell through to a
   RANDOM picsum.photos photograph — palm trees over an AI news page. The crumbs variant
   stays; it is navigation, not decoration. */
body:has(.wke-hero) .dash-hero-panel:not(.dash-hero-panel--crumbs){ display:none; }

/* A lead with no picture is one column, never a black rectangle where art would go. */
.wke-hero--noimg{ grid-template-columns:1fr; min-height:0; }
.wke-hero--noimg .wke-hero-copy{ padding:26px; }

/* The daily's brand hero: the tagline is display text in a <p>, not a heading, so the
   masthead stays the page's h1 and the headings below it descend without a skip. */
.wke-hero--brand{ grid-template-columns:1.4fr 1fr; min-height:340px; }
.wke-hero--brand.wke-hero--noimg{ grid-template-columns:1fr; min-height:0; }
.wke-hero--brand .wke-hero-copy{ padding:34px 30px 28px; gap:14px; }
.wke-hero-tag{
  max-width:15ch; margin:0; font-family:var(--f-display); font-weight:700;
  font-size:clamp(32px,4.2vw,56px); line-height:1; letter-spacing:-.045em;
}
.wke-hero-top{
  margin:auto 0 0; padding-top:14px; border-top:1px solid rgba(255,255,255,.16);
  color:var(--ink-text-2); font-size:15px; line-height:1.4;
}
.wke-hero-top a{
  color:var(--ink-text); font-weight:600;
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
}
.wke-hero-top a:hover{ color:var(--accent-on-dark); }

/* ---------- section furniture ---------- */
.wke-sec{ margin: 0 0 52px; }
.wke-sech{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin: 0 0 18px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.wke-sech h3{
  margin:0; font-family:var(--f-display); font-size:22px; font-weight:400;
  letter-spacing:.01em; text-transform:uppercase;
}
.wke-sech h2{
  margin:0; font-family:var(--f-display); font-size:clamp(22px,2.4vw,30px); font-weight:600;
  line-height:1.1; letter-spacing:-.025em;
}
.wke-sech-t .wke-eyebrow{ margin-bottom:6px; }
.wke-sech-sub{ margin:6px 0 0; color:var(--text-2); font-size:16px; line-height:1.4; }
.wke-viewall{ display:inline-flex; align-items:center; gap:10px; font-size:13px; color:var(--text-2); }
.wke-viewall span{ color:var(--accent); font-size:18px; line-height:1; }
.wke-viewall:hover{ color:var(--accent); }

.wke-eyebrow{
  margin:0 0 12px; color:var(--accent);
  font-family:var(--f-mono); font-size:12px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
}
.wke-lede{ max-width:60ch; margin:0; color:var(--text-2); font-size:17px; line-height:1.5; }

/* ---------- the six story cards ----------
   A real grid (2026-09-24, owner): an open card must span its whole row and push the others
   below it, which columns cannot do. align-items:start keeps a short card from stretching
   to its row's tallest. */
.wke-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:start; }
.wke-card{ min-width:0; break-inside:avoid; margin:0 0 26px; }
.wke-card-a{ display:block; }
.wke-card-fig{
  margin:0 0 10px; aspect-ratio:2/1; overflow:hidden;
  background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-sm);
}
.wke-card-fig img{ width:100%; height:100%; object-fit:cover; }
.wke-card-meta{
  display:flex; align-items:center; gap:8px;
  color:var(--text-3); font-family:var(--f-mono); font-size:12px;
  text-transform:uppercase; letter-spacing:.03em;
}
.wke-card-meta time{ margin-left:auto; }
.wke-cat{ color:var(--accent); font-weight:600; }
.wke-score{
  flex:0 0 auto; padding:2px 7px; border-radius:var(--r-pill);
  background:var(--accent-tint); color:var(--accent); font-weight:700; font-size:12px;
}
.wke-card-h{
  margin:6px 0 0; font-family:var(--f-serif); font-weight:400;
  font-size:clamp(17px,1.5vw,21px); line-height:1.12; letter-spacing:-.015em;
}
/* One quiet affordance, not three. */
.wke-card-a:hover .wke-card-h{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }

/* ---------- AI in 30 seconds: three skim cards ----------
   Each is the story card (.wke-story below) with its rank in place of the publication and
   no brief (owner, 2026-10-02): the headline, the card line, then the first two sentences
   of why it matters. The cards stretch to one height and the reactions sit at the bottom,
   so the three rows line up. Nothing toggles, so no pointer. */
.wke-minis{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.wke-mini.wke-story{ margin:0; cursor:auto; display:flex; flex-direction:column; }
.wke-mini .wke-story-body{ flex:1 1 auto; display:flex; flex-direction:column; }
.wke-mini .wke-story-foot{ margin-top:auto; padding-top:10px; }
.wke-mini-why{ margin:0; color:var(--text-2); font-size:14px; line-height:1.5; }
.wke-mini-why + .wke-mini-why{ margin-top:2px; }
.wke-story-pub.wke-mini-num{
  font-family:var(--f-mono); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
/* WU-36: the skim card is lighter than its Top stories twin - less padding, a larger rank
   label, the short card line under the headline. (0,2,0) beats .wke-story's padding. */
.wke-mini.wke-story{ padding:12px 14px 14px; }
.wke-mini.wke-story .wke-card-fig{ margin:-12px -14px 12px; }
.wke-mini .wke-story-pub.wke-mini-num{ font-size:14px; }
.wke-mini .wke-story-h{ margin:8px 0 6px; font-size:clamp(18px,1.4vw,20px); }
.wke-mini .wke-story-teaser{ display:block; -webkit-line-clamp:none; margin:0 0 4px; color:var(--text); font-size:14px; }

/* ---------- story cards (daily top stories + weekly trending) ----------
   White, hairline, one cell of the .wke-grid / .wke-minis grid. The source link is the one
   hover affordance. */
.wke-story{
  min-width:0; break-inside:avoid; margin:0; padding:16px 16px 18px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
}
/* The picture bleeds to the card's edges at the top, 4:3, inside the card's 1px border. */
.wke-story .wke-card-fig{
  margin:-16px -16px 14px; aspect-ratio:4/3; border:0;
  border-radius:calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0;
}
.wke-story-h{
  margin:10px 0 8px; font-family:var(--f-serif); font-weight:400;
  font-size:clamp(19px,1.6vw,23px); line-height:1.15; letter-spacing:-.015em;
}
.wke-story .wke-card-fig + .wke-story-h{ margin-top:0; }

/* The expandable card: the whole card toggles its brief (edition-render.js bind), the
   headline stays the one link out. The button's hover is its one affordance. */
.wke-story{ cursor:pointer; }
.wke-story-pub{ margin:0; color:var(--accent); font-size:13px; font-weight:600; }
.wke-story-h a{ color:inherit; text-decoration:none; }
.wke-story-h a:hover{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.wke-story-teaser{
  margin:0 0 14px; color:var(--text-2); font-size:15px; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.wke-story-btn{
  padding:8px 16px; border:0; border-radius:999px; background:var(--ink); color:var(--ink-text);
  font:inherit; font-size:14px; font-weight:600; line-height:1.2; cursor:pointer;
}
.wke-story-btn:hover{ background:var(--accent); }
.wke-story-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
/* Read the Brief on the left, like / love / share on the right of the same line. A card
   with no brief keeps its reactions at the right. */
.wke-story-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.wke-story-foot .wke-react{ margin-left:auto; }
.wke-react{ display:inline-flex; align-items:center; gap:4px; }
.wke-rx{
  display:inline-grid; place-items:center; width:32px; height:32px; padding:0;
  border:.5px solid var(--border); border-radius:50%; background:transparent; color:var(--text-3); cursor:pointer;
}
.wke-rx:hover{ color:var(--accent); }
.wke-rx[aria-pressed="true"]{ color:var(--accent); border-color:var(--accent); }
.wke-rx[aria-pressed="true"] svg{ fill:var(--accent-tint); }
.wke-rx:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.wke-rx svg{ display:block; }
.wke-rx-msg{ margin-left:4px; color:var(--text-3); font-size:12px; }
.wke-story-brief{ margin-top:14px; padding-top:14px; border-top:.5px solid var(--border); }
.wke-story-meta{
  margin:0; color:var(--text-3); font-family:var(--f-mono); font-size:12px;
  text-transform:uppercase; letter-spacing:.03em;
}
.wke-brief-h{ margin:14px 0 4px; color:var(--text); font-size:14px; font-weight:700; line-height:1.3; }
.wke-brief-why{ text-transform:uppercase; letter-spacing:.08em; }
.wke-story-brief p:not(.wke-story-meta){ margin:0; color:var(--text-2); font-size:14px; line-height:1.5; }
.wke-brief-list{ margin:0; padding-left:18px; list-style:disc; color:var(--text-2); font-size:14px; line-height:1.5; }
.wke-brief-list li + li{ margin-top:4px; }
.wke-brief-list b{ color:var(--text); font-weight:600; }

/* The open card takes the whole row (bindStories moves it to the row's start): picture on
   the left at 4:3 inside the card's padding, the story and its brief on the right. A card
   without a picture stays one column. */
.wke-story[data-open="true"]{
  grid-column:1 / -1; display:grid; grid-template-columns:minmax(260px,38%) minmax(0,1fr);
  column-gap:28px; align-items:start;
}
.wke-story[data-open="true"] .wke-card-fig{ grid-column:1; margin:0; border-radius:var(--r-sm); }
.wke-story[data-open="true"] .wke-story-body{ grid-column:2; }
.wke-story[data-open="true"]:not(:has(.wke-card-fig)){ grid-template-columns:minmax(0,1fr); }
.wke-story[data-open="true"]:not(:has(.wke-card-fig)) .wke-story-body{ grid-column:1; }

/* ---------- one thing to try today ---------- */
.wke-assign{
  margin:0 0 52px; padding:22px 26px 20px;
  background:var(--surface); border:1px solid var(--border); border-left:2px solid var(--accent);
  border-radius:0 var(--r-md) var(--r-md) 0;
}
.wke-assign .wke-eyebrow{ margin-bottom:8px; }
.wke-assign-h{
  margin:0 0 8px; font-family:var(--f-display); font-size:clamp(20px,2vw,26px); font-weight:600;
  line-height:1.15; letter-spacing:-.02em;
}
.wke-assign-p{ max-width:64ch; margin:0; color:var(--text-2); font-size:16px; line-height:1.55; }
.wke-assign-t{ margin:12px 0 0; color:var(--text-3); font-family:var(--f-mono); font-size:12px; }

/* ---------- workflow section ---------- */
.wke-wfh{
  margin:0 0 22px; text-align:center; font-family:var(--f-display);
  font-size:clamp(24px,3vw,38px); font-weight:500; letter-spacing:-.025em;
}
.wke-wf-intro{ padding:0 0 30px; }
.wke-wf-lead{
  margin:0 0 10px; font-family:var(--f-serif); font-weight:400;
  font-size:clamp(26px,3.4vw,42px); line-height:1.02; letter-spacing:-.03em;
}

/* WU-22 (2026-09-25): the owner's reference infographic grammar. Flat pastel card fills are
   allowed INSIDE .wfg-stage only, an owner-requested exception to the root rule against
   coloured card backgrounds. No gradient, no texture, no hover on cards, no new font.
   Every ink below measures >= 4.5:1 on white; secondary text inside a pastel card is
   --text-2, never --text-3 (which drops under 4.5:1 on peach). */
.wfg{ margin:0 0 60px; }
.wfg-title{
  margin:0 auto 10px; max-width:24ch; text-align:center;
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(24px,2.6vw,34px); line-height:1.1; letter-spacing:-.03em;
}
/* The subtitle carries the short accent rule under it. */
.wfg-sub{
  max-width:60ch; margin:0 auto 26px; text-align:center;
  color:var(--text-2); font-size:17px; line-height:1.5;
}
.wfg-sub::after{
  content:""; display:block; width:36px; height:2px; margin:14px auto 0;
  background:var(--accent); border-radius:2px;
}
/* The hint: one grey line naming the tools, 12px under the sub's accent bar. */
.wfg-hint{
  margin:-14px auto 22px; max-width:60ch; text-align:center;
  color:var(--text-3); font-size:14px; line-height:1.5;
}
.wfg-stage{
  --wf-peach:#fbe3d4; --wf-sky:#dbeafe; --wf-butter:#fef3c7; --wf-lavender:#ede9fe; --wf-mint:#d1fae5;
  --wf-ink-1:#c2410c; --wf-ink-2:#1d4ed8; --wf-ink-3:#a16207; --wf-ink-4:#6d28d9; --wf-ink-5:#0f766e;
  --wf-line:color-mix(in srgb, var(--text) 55%, #fff);
  padding:28px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
}
/* The closing tagline, inside the stage under the numbered strip, a short accent bar over it. */
.wfg-caption{
  max-width:64ch; margin:26px auto 0; text-align:center;
  color:var(--text-2); font-size:15px; line-height:1.5;
}
.wfg-caption::before{
  content:""; display:block; width:36px; height:2px; margin:0 auto 12px;
  background:var(--accent); border-radius:2px;
}
.wfg-foot{ display:flex; justify-content:flex-end; margin-top:10px; }

/* ---------- the node graph ----------
   Nodes are grid items so they grow with their own generated text; every wire lives in a
   40px gap COLUMN between the node tracks. A wire is therefore always drawn in the space
   the nodes leave for it and the two cannot drift apart at any width — which is the bug
   the reference template had. Seven tracks: start, wires, the two lanes with the OR
   between them, wires, the hub (the workflow's first tool), a wire, finish. At the full
   920px that is about 150 / 200 / 260 / 150. */
.wfg-graph{
  display:grid; max-width:920px; margin:0 auto;
  grid-template-columns:
    minmax(0,.75fr) 40px minmax(0,1fr) 40px minmax(0,1.3fr) 40px minmax(0,.75fr);
  grid-template-rows: 1fr 30px 1fr;
  align-items:stretch;
}
.wfg-node--start { grid-column:1; grid-row:1/-1; align-self:center; }
.wfg-w--split-top{ grid-column:2; grid-row:1; }
.wfg-w--split-mid{ grid-column:2; grid-row:2; }
.wfg-w--split-bot{ grid-column:2; grid-row:3; }
.wfg-node--a     { grid-column:3; grid-row:1; }
.wfg-or          { grid-column:3; grid-row:2; }
.wfg-node--b     { grid-column:3; grid-row:3; }
.wfg-w--merge-top{ grid-column:4; grid-row:1; }
.wfg-w--merge-mid{ grid-column:4; grid-row:2; }
.wfg-w--merge-bot{ grid-column:4; grid-row:3; }
.wfg-node--hub   { grid-column:5; grid-row:1/-1; align-self:center; }
.wfg-w--line     { grid-column:6; grid-row:2; }
.wfg-node--finish{ grid-column:7; grid-row:1/-1; align-self:center; }
/* No tool: the finish takes the hub's column and the last two tracks go. */
.wfg-graph--nohub{
  max-width:680px;
  grid-template-columns: minmax(0,.75fr) 40px minmax(0,1fr) 40px minmax(0,.75fr);
}
.wfg-graph--nohub .wfg-node--finish{ grid-column:5; }

/* Rounded cards, a thin dark outline, a flat pastel fill per role, dark line icons. */
.wfg-node{
  padding:14px 16px 13px; text-align:left;
  background:var(--surface); border:1px solid var(--wf-line); border-radius:var(--r-lg);
}
.wfg-node--start { background:var(--wf-peach); }
.wfg-node--a     { background:var(--wf-sky); }
.wfg-node--b     { background:var(--wf-butter); }
.wfg-node--hub   { background:var(--wf-lavender); }
.wfg-node--finish{ background:var(--wf-mint); }
.wfg-ico{
  display:block; width:22px; height:22px; margin-bottom:9px;
  fill:none; stroke:var(--text); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.wfg-node-h{ margin:0 0 4px; font-size:15px; font-weight:700; line-height:1.2; }
.wfg-node p{ margin:0; color:var(--text-2); font-size:13px; line-height:1.4; }
.wfg-node p.wfg-node-h{ color:var(--text); }
.wfg-node p.wfg-node-sub{ margin-bottom:4px; color:var(--text-2); font-size:13px; }
/* The hub is the tool the whole workflow runs through: a larger name, then the other
   tools as a ticked checklist. */
.wfg-node--hub{ padding:16px 16px 15px; }
.wfg-node--hub p.wfg-node-h{ font-size:16px; font-weight:700; }
.wfg-check{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; }
.wfg-check li{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--text-2); }
.wfg-check-i{ flex:none; fill:none; stroke:var(--text); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.wfg-or{
  align-self:center; justify-self:center;
  display:grid; place-items:center; width:28px; height:28px;
  border:1px solid var(--wf-line); border-radius:50%; background:#fff;
  color:var(--text-2); font-family:var(--f-mono); font-size:12px; font-weight:700;
}

.wfg-w{ position:relative; min-height:20px; }
.wfg-w svg{ display:block; width:100%; height:100%; }
.wfg-w svg path{
  fill:none; stroke:var(--text-2); stroke-width:1.5;
  stroke-linejoin:round; stroke-linecap:round;
  vector-effect:non-scaling-stroke;          /* the stretch must not thicken the line */
}
/* Filled shapes would be squashed by preserveAspectRatio="none", so the junction dot and
   the arrowheads are CSS, drawn in real pixels. */
.wfg-w--dot::before{
  content:""; position:absolute; left:50%; top:50%;
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  border-radius:50%; background:var(--text-2);
}
.wfg-w--arrow::after{
  content:""; position:absolute; right:1px; top:50%;
  width:6px; height:6px; margin-top:-3px;
  border-top:1.5px solid var(--text-2); border-right:1.5px solid var(--text-2);
  transform:rotate(45deg);
}

/* A head pointing down, at the bottom centre of its cell (the fan's bus and join). */
.wfg-w--down::after{
  right:auto; left:50%; top:auto; bottom:1px; margin:0 0 0 -3px;
  transform:rotate(135deg);
}

/* ---------- the three newer layouts (WU-22b) ----------
   The layout is picked by the row (graph.layout); the lanes diagram above is unchanged.
   Each grid template carries two classes so the lanes tablet rule on .wfg-graph cannot
   reach it; mobile.css shrinks them with the same weight. Card fills follow the owner's
   references; every text on a pastel is --text or --text-2, the chip pill, the window and
   the pipeline boxes are white with the same outline. */
.wfg-node-row{ display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.wfg-node-row .wfg-ico{ flex:none; margin:0; }
.wfg-node-row p.wfg-node-h{ margin:0; }

/* fan: one job, three kinds, then what happens next. No column gap, so the bus and the join
   run unbroken across the three cells; the branch cards carry the side margins instead. */
.wfg-graph.wfg-graph--fan{
  max-width:760px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:auto 34px auto 34px auto;
  column-gap:0;
}
.wfg-graph--fan .wfg-node--top{
  grid-column:1/-1; grid-row:1; justify-self:center; width:min(100%,380px);
  background:var(--wf-sky);
}
.wfg-w--fan-l, .wfg-w--join-l{ grid-column:1; }
.wfg-w--fan-m, .wfg-w--join-m{ grid-column:2; }
.wfg-w--fan-r, .wfg-w--join-r{ grid-column:3; }
.wfg-w--fan-l, .wfg-w--fan-m, .wfg-w--fan-r{ grid-row:2; }
.wfg-w--join-l, .wfg-w--join-m, .wfg-w--join-r{ grid-row:4; }
.wfg-graph--fan .wfg-node--br{ grid-row:3; margin:0 9px; background:var(--wf-peach); }
.wfg-graph--fan .wfg-node--br:nth-child(6){ background:var(--wf-lavender); }
.wfg-graph--fan .wfg-node--br:nth-child(7){ background:var(--wf-butter); }
.wfg-graph--fan .wfg-node--bottom{
  grid-column:1/-1; grid-row:5; justify-self:center; width:min(100%,560px);
  background:var(--wf-sky); text-align:center;
}
.wfg-node--bottom .wfg-node-row{ justify-content:center; }
.wfg-chips{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
}
.wfg-chip{
  display:inline-flex; align-items:center; gap:7px; padding:7px 12px;
  background:#fff; border:1px solid var(--wf-line); border-radius:var(--r-sm);
  color:var(--text-2); font-size:13px; line-height:1.3;
}
.wfg-chip .wfg-ico{ flex:none; width:18px; height:18px; margin:0; }
/* The reference's mini pipeline: dot, three boxes, dot, tiny arrows. Decoration, no data. */
.wfg-pipe{ display:flex; align-items:center; justify-content:center; margin-top:14px; }
.wfg-pipe i{ display:block; flex:none; }
.wfg-pipe-dot{ width:14px; height:14px; border-radius:50%; border:1px solid var(--wf-line); background:#fff; }
.wfg-pipe-dot--end{ background:var(--wf-mint); }
.wfg-pipe-box{ width:44px; height:14px; border-radius:4px; border:1px solid var(--wf-line); background:#fff; }
.wfg-pipe-a{ position:relative; width:20px; height:1px; background:var(--text-2); }
.wfg-pipe-a::after{
  content:""; position:absolute; right:0; top:-2px; width:5px; height:5px;
  border-top:1px solid var(--text-2); border-right:1px solid var(--text-2); transform:rotate(45deg);
}

/* gate: what the reader has, checked in the hub, a choice per case under it, the result. */
.wfg-graph.wfg-graph--gate{
  max-width:920px;
  grid-template-columns:minmax(0,.9fr) 40px minmax(0,1.5fr) 40px minmax(0,.9fr);
  grid-template-rows:auto auto;
  row-gap:14px;
}
.wfg-graph--gate .wfg-node--in,
.wfg-graph--gate .wfg-node--out{
  grid-row:1/-1; display:flex; flex-direction:column; justify-content:center;
}
.wfg-graph--gate .wfg-node--in { grid-column:1; background:var(--wf-peach); }
.wfg-graph--gate .wfg-node--out{ grid-column:5; background:var(--wf-mint); }
.wfg-graph--gate .wfg-w--g1{ grid-column:2; grid-row:1; }
.wfg-graph--gate .wfg-w--g2{ grid-column:4; grid-row:1; }
.wfg-graph--gate .wfg-node--hub{ grid-column:3; grid-row:1; align-self:stretch; background:var(--wf-sky); }
.wfg-check li .wfg-check-ico{ flex:none; width:18px; height:18px; margin:0; }
.wfg-graph--gate .wfg-fork{ grid-column:3; grid-row:2; }
.wfg-fork{ position:relative; }
/* The stub from the hub down to the label, in the row gap. */
.wfg-fork::before{
  content:""; position:absolute; left:50%; top:-14px; height:14px;
  border-left:1px solid var(--text-2);
}
/* The label with a hairline either side, each turning down toward its option. */
.wfg-fork-l{
  display:flex; align-items:flex-start; gap:10px; margin:0 0 10px;
  color:var(--text-2); font-size:13px; line-height:18px; text-align:center;
}
.wfg-fork-l::before,
.wfg-fork-l::after{
  content:""; flex:1 1 0; min-width:12px; height:9px; margin-top:9px;
  border-top:1px solid var(--text-2);
}
.wfg-fork-l::before{ border-left:1px solid var(--text-2); border-top-left-radius:6px; }
.wfg-fork-l::after { border-right:1px solid var(--text-2); border-top-right-radius:6px; }
.wfg-fork-opts{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.wfg-node--opt{ background:var(--wf-butter); }
.wfg-node--opt + .wfg-node--opt{ background:var(--wf-lavender); }

/* inputs: three sources feed one tool, one result, then how it compares with today. */
.wfg-graph.wfg-graph--inputs{
  max-width:920px;
  grid-template-columns:minmax(0,1fr) 40px minmax(0,1.25fr) 40px minmax(0,1fr);
  grid-template-rows:1fr 1fr 1fr;
  row-gap:18px; align-items:center;
}
.wfg-graph--inputs .wfg-node--in{ grid-column:1; background:var(--wf-peach); }
.wfg-graph--inputs .wfg-node--in:nth-child(3){ background:var(--wf-sky); }
.wfg-graph--inputs .wfg-node--in:nth-child(5){ background:var(--wf-butter); }
.wfg-graph--inputs .wfg-w--i1{ grid-column:2; grid-row:1; }
.wfg-graph--inputs .wfg-w--i2{ grid-column:2; grid-row:2; }
.wfg-graph--inputs .wfg-w--i3{ grid-column:2; grid-row:3; }
.wfg-graph--inputs .wfg-node--hub{ grid-column:3; grid-row:1/-1; align-self:stretch; }
.wfg-graph--inputs .wfg-w--iout{ grid-column:4; grid-row:1/3; }
.wfg-graph--inputs .wfg-node--out{
  grid-column:5; grid-row:1/3; align-self:stretch;
  display:flex; flex-direction:column; justify-content:center; background:var(--wf-sky);
}
.wfg-graph--inputs .wfg-node--compare{
  grid-column:5; grid-row:3; align-self:start; position:relative; background:var(--wf-mint);
}
/* The short arrow from the result into the compare card, drawn in the row gap only. */
.wfg-graph--inputs .wfg-node--compare::before{
  content:""; position:absolute; left:50%; top:-18px; height:17px;
  border-left:1.5px solid var(--text-2);
}
.wfg-graph--inputs .wfg-node--compare::after{
  content:""; position:absolute; left:50%; top:-7px; width:6px; height:6px; margin-left:-2.25px;
  border-top:1.5px solid var(--text-2); border-right:1.5px solid var(--text-2); transform:rotate(135deg);
}
.wfg-node--compare .wfg-node-row{ justify-content:center; }
/* The hub's mini window: a bar with three dots, then the rows the tool works through. */
.wfg-win{
  margin-top:12px; overflow:hidden;
  background:#fff; border:1px solid var(--wf-line); border-radius:var(--r-sm);
}
.wfg-win-bar{ display:flex; gap:5px; padding:7px 10px; border-bottom:1px solid var(--border); }
.wfg-win-bar i{ display:block; width:7px; height:7px; border-radius:50%; background:var(--border-2); }
.wfg-win-rows{ list-style:none; margin:0; padding:9px 10px; display:grid; gap:7px; }
.wfg-win-rows li{ display:flex; align-items:center; gap:7px; color:var(--text-2); font-size:13px; line-height:1.3; }
.wfg-metrics{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
}
.wfg-metric{
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:2px 6px;
  color:var(--text-2); font-size:13px; line-height:1.3; text-align:center;
}
.wfg-metric + .wfg-metric{ border-left:1px solid var(--wf-line); }
.wfg-metric .wfg-ico{ margin:0; }

/* ---------- the numbered strip ---------- */
.wfg-stepwrap{ margin-top:28px; padding-top:26px; border-top:1px solid var(--border); }
.wfg-steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(var(--wfg-n,5), minmax(0,1fr)); gap:14px;
  text-align:center;
}
.wfg-step{ position:relative; min-width:0; --wfg-tw:34px; }
/* A step whose row names an icon shows it left of the numeral (WU-22b): the top wrapper is
   then about 66px wide (24 icon + 8 gap + 34 numeral) instead of 34. */
.wfg-step--i{ --wfg-tw:66px; }
/* Drawn per step, from its own top wrapper to the next one, so it can never run past the
   final step. It sits at the numeral's vertical middle (half its 28px line box). The
   wrapper (--wfg-tw wide; the numeral with its swipe is its right end) is centred in
   14px-gapped cells: the line starts 6px right of this step's swipe and ends 6px short of
   the next step's icon or numeral, i.e. left = 50% + tw/2 + 6 and
   right = tw/2 + 6 - (cell/2 + 14). */
.wfg-step:not(:last-child)::after{
  content:""; position:absolute; top:14px;
  left:calc(50% + var(--wfg-tw) / 2 + 6px); right:calc(var(--wfg-tw) / 2 - 8px - 50%);
  height:1px; background:var(--border-2);
}
.wfg-step-top{ display:flex; justify-content:center; align-items:flex-start; gap:8px; margin:0 0 12px; }
.wfg-step-top .wfg-step-n{ margin:0; }
.wfg-step-i{ flex:none; width:24px; height:24px; margin:2px 0 0; }
/* A coloured numeral with a pastel highlighter swipe UNDER the glyphs, never behind them,
   so the ink is always measured on white. Colours rotate through the five pairs. */
.wfg-step-n{
  position:relative; z-index:1; display:block; width:auto; height:auto; margin:0 auto 12px;
  background:none; border-radius:0;
  font-family:var(--f-display); font-style:italic; font-weight:700; font-size:28px; line-height:1;
  letter-spacing:-.02em; color:var(--wf-ink-1);
}
.wfg-step-n::after{
  content:""; display:block; width:34px; height:6px; margin:5px auto 0; border-radius:3px;
  background:var(--wf-peach);
}
.wfg-step:nth-child(5n+2) .wfg-step-n{ color:var(--wf-ink-2); }
.wfg-step:nth-child(5n+2) .wfg-step-n::after{ background:var(--wf-sky); }
.wfg-step:nth-child(5n+3) .wfg-step-n{ color:var(--wf-ink-3); }
.wfg-step:nth-child(5n+3) .wfg-step-n::after{ background:var(--wf-butter); }
.wfg-step:nth-child(5n+4) .wfg-step-n{ color:var(--wf-ink-4); }
.wfg-step:nth-child(5n+4) .wfg-step-n::after{ background:var(--wf-lavender); }
.wfg-step:nth-child(5n+5) .wfg-step-n{ color:var(--wf-ink-5); }
.wfg-step:nth-child(5n+5) .wfg-step-n::after{ background:var(--wf-mint); }
.wfg-step-h{ margin:0 0 3px; font-size:14px; font-weight:700; line-height:1.3; }
.wfg-step p{ margin:0; color:var(--text-3); font-size:12px; line-height:1.45; }

/* ---------- starter prompt ---------- */
.wfg-prompt{
  display:grid; text-align:left; grid-template-columns:1fr auto; gap:14px; align-items:center;
  margin-top:22px; padding:13px 14px;
  background:var(--bg-3); border:1px solid var(--border); border-radius:var(--r-sm);
}
.wfg-prompt-k{
  display:block; margin-bottom:5px; color:var(--accent);
  font-family:var(--f-mono); font-size:12px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
}
.wfg-prompt-text{
  margin:0; color:var(--text-2); font-family:var(--f-mono); font-size:12px; line-height:1.5;
  white-space:pre-wrap; word-break:break-word;
}
.wfg-copy{
  min-width:92px; padding:9px 14px; border-radius:var(--r-xs);
  background:var(--text); color:#fff; font-size:13px; font-weight:600;
}
.wfg-copy:hover{ background:var(--accent); }

/* ---------- tutorial ---------- */
.wke-tut{ margin:0 0 48px; }

/* ---------- closing band (WU-36) ----------
   The daily's sign-off in the owner's copy: flat ink like the hero, no gradient, no hover. */
.wke-close{
  margin:0 0 32px; padding:36px 30px;
  background:var(--ink); color:var(--ink-text); border-radius:var(--r-lg);
}
.wke-close-brand{
  margin:0 0 12px; color:var(--ink-text-2);
  font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
}
.wke-close-h{
  max-width:620px; margin:0 0 12px; font-family:var(--f-display);
  font-size:clamp(24px,3vw,38px); line-height:1.05; letter-spacing:-.03em; font-weight:700;
}
.wke-close-p{ max-width:56ch; margin:0; color:var(--ink-text-2); font-size:16px; line-height:1.5; }
.wke-tut-card{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:28px; align-items:center;
  padding:16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
}
.wke-tut-shot{
  position:relative; display:block; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--r-md); background:var(--ink);
}
.wke-tut-shot img{ width:100%; height:100%; object-fit:cover; }
/* The play glyph is CSS only: a dark disc and a border triangle, both aria-hidden with
   the link that holds them. */
.wke-tut-play{
  position:absolute; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px;
  border-radius:50%; background:rgba(0,0,0,.55);
}
.wke-tut-play::after{
  content:""; position:absolute; left:25px; top:20px;
  border-style:solid; border-width:12px 0 12px 20px;
  border-color:transparent transparent transparent #fff;
}
.wke-tut-copy{ min-width:0; padding:4px 8px 4px 0; }
.wke-tut-copy .wke-eyebrow{ margin-bottom:8px; }
.wke-tut-h{
  margin:0 0 10px; font-family:var(--f-display); font-weight:600;
  font-size:clamp(20px,2.2vw,28px); line-height:1.15; letter-spacing:-.02em;
}
.wke-tut-h a:hover{ color:var(--accent); }
.wke-tut-desc{ margin:0 0 12px; color:var(--text-2); font-size:16px; line-height:1.5; }
.wke-tut-meta{ margin:0 0 18px; color:var(--text-3); font-family:var(--f-mono); font-size:12px; }
.wke-tut-cta{
  display:inline-flex; align-items:center; padding:11px 20px; border-radius:var(--r-pill);
  background:var(--text); color:#fff; font-size:14px; font-weight:600;
}
.wke-tut-cta:hover{ background:var(--accent); }

/* ---------- share this edition ----------
   The last block of both editions. The hover mirrors the standalone footer's .wsa-soc. */
.wke-share{
  display:flex; align-items:center; justify-content:flex-end; gap:14px; flex-wrap:wrap;
  margin:0 0 40px; padding-top:18px; border-top:1px solid var(--border);
}
.wke-share-h{ margin:0; font-family:var(--f-display); font-size:16px; font-weight:600; }
.wke-share-row{ display:flex; gap:10px; }
.wke-share-a{
  display:grid; place-items:center; width:48px; height:48px; padding:0;
  border:1px solid var(--border-2); border-radius:50%; background:transparent; color:var(--text-2);
  text-decoration:none; cursor:pointer;
}
.wke-share-a svg{ display:block; width:20px; height:20px; }
.wke-share-a:hover{ color:var(--accent); border-color:var(--accent); }
.wke-share-a:disabled{ opacity:.45; cursor:default; }

/* ---------- comments (WU-24) ----------
   The badge is the count; the panel is a disclosure under the share row, full width. */
.wke-share-c{ position:relative; }
.wke-share-n{
  position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; background:var(--text); color:#fff; font-size:12px; font-weight:600;
  line-height:18px; text-align:center; font-variant-numeric:tabular-nums;
}
.wke-cmts{
  flex-basis:100%; width:100%; padding-top:16px; border-top:.5px solid var(--border);
  display:flex; flex-direction:column; gap:14px;
}
/* display:flex above outranks the UA [hidden] rule; without this the closed panel paints. */
.wke-cmts[hidden]{ display:none; }
.wke-cmts-lead{ margin:0; font-family:var(--f-display); font-weight:600; font-size:15px; line-height:1.45; color:var(--text); }
.wke-cmts-in{ display:flex; flex-direction:column; gap:8px; }
.wke-cmts-in--out{ flex-direction:row; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.wke-cmts-in--out p{ margin:0; font-size:14px; }
.wke-cmts-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.wke-cmts-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.wke-cmt{ display:flex; flex-direction:column; gap:6px; padding:12px 0; border-top:.5px solid var(--border-2); }
.wke-cmt:first-child{ border-top:0; }
.wke-cmt-body{ margin:0; font-size:15px; line-height:1.6; color:var(--text-2); white-space:pre-wrap; overflow-wrap:anywhere; }
.wke-cmt .btn{ align-self:flex-start; }
.wke-cmts-state{ margin:0; font-size:14px; }

/* ---------- workflow, tablet (768–1100): the same seven tracks, tighter ---------- */
@media (max-width:1100px){
  .wfg-stage{ padding:22px 20px; }
  .wfg-graph{
    grid-template-columns:
      minmax(0,.8fr) 26px minmax(0,1fr) 26px minmax(0,1.15fr) 26px minmax(0,.8fr);
  }
  .wfg-graph--nohub{ grid-template-columns: minmax(0,.8fr) 26px minmax(0,1fr) 26px minmax(0,.8fr); }
  .wfg-node{ padding:11px 11px 10px; }
  .wfg-node-h{ font-size:14px; }
  .wfg-steps{ gap:10px; }
  .wfg-step:not(:last-child)::after{ right:calc(var(--wfg-tw) / 2 - 4px - 50%); }
  .wfg-graph.wfg-graph--gate{
    grid-template-columns:minmax(0,.9fr) 26px minmax(0,1.5fr) 26px minmax(0,.9fr);
  }
  .wfg-graph.wfg-graph--inputs{
    grid-template-columns:minmax(0,1fr) 26px minmax(0,1.25fr) 26px minmax(0,1fr);
  }
}

/* ---------- tablet seam (768–900) ----------
   Phone rules live in mobile.css inside its one media query; this is the band above it. */
@media (max-width:900px){
  .wke-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wke-hero{ grid-template-columns:1.2fr .8fr; }
  .wke-mast{ font-size:clamp(30px,6vw,46px); }
  .wfg-stage{ padding:18px 16px 16px; }
}