/* Article pages (blog, media clips, press releases, REKA Narrative, 404): additions to Clay's blog-post layout in company.css.
   Pages are generated from the live site by scratchpad/articles/gen.py; this file holds only what those pages share. */

.bp-head h1.long{font-size:56px;line-height:60px;letter-spacing:-1.6px}
.bp-meta time{font:inherit}

/* 13 Oct 2026: no kicker above the headline and no generated title card under it (both repeated the meta line);
   the headline, meta and archive note open the article directly */
.art .bp-wrap>.cw>.article:first-child{margin-top:48px}
.ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph:has(>img)::after{display:none}

/* body text: archive note, links, the extra heading level, quotes, long URLs */
.article{overflow-wrap:anywhere}
.article .ar-note{margin:0 0 28px;padding:14px 18px;border-radius:12px;background:var(--oat);font-size:14px;line-height:21px;color:var(--muted)}
.article p a,.article li a,.article blockquote a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.article p a:hover,.article li a:hover{color:var(--brand-text)}
.article h4{font:600 20px/28px var(--sans);letter-spacing:-.3px;margin:28px 0 10px}
.article h2+h3,.article h3+h4{margin-top:18px}
.article blockquote p{font:inherit}
.article blockquote p+p{margin-top:12px}
.article .ar-back{margin-top:40px;font-weight:500}
.article .ar-back a{text-decoration:none}
.article .ar-back a:hover{color:var(--brand-text)}

/* media clips: the outside article, as one card */
.ar-src{position:relative;display:grid;grid-template-columns:1fr auto;gap:4px 16px;margin-top:32px;padding:24px 28px;border:1px solid #E6E8EC;border-radius:16px;background:#fff;transition:background .2s,border-color .2s}
.ar-src:hover{background:var(--oat);border-color:var(--line-2)}
.ar-src .eb{grid-column:1;color:var(--brand-text)}
.ar-src b{grid-column:1;font:500 24px/30px var(--sans);letter-spacing:-.4px;margin-top:8px}
.ar-src .ln{grid-column:1;font-size:16px;line-height:24px}
.ar-src .host{grid-column:1;font:400 13px/20px var(--mono);color:var(--muted)}
.ar-src svg{grid-column:2;grid-row:1/span 4;align-self:center}

/* More articles: a short text list (date, headline, category), not a carousel of title cards */
.bp-more{padding:72px 0 96px}
.bp-more .hd{padding:0;min-height:0}
.bp-more .postlist{margin-top:20px}

/* 404: Clay's blog-post header on its own */
.nf{padding:120px 0 140px;text-align:center}
.nf .in{max-width:874px;margin:0 auto}
.nf h1{font:500 72px/72px var(--sans);letter-spacing:-2.16px}
.nf h1 em{font-style:normal;color:var(--brand-text)}
.nf .sub{max-width:612px;margin:32px auto 0;font-size:22.4px;line-height:33.6px}
.nf .sub a{color:var(--brand-text);font-weight:600;text-decoration:underline;text-underline-offset:3px}

@media (max-width:900px){
  .bp-head h1.long{font-size:32px;line-height:38px;letter-spacing:-.9px}
  .ar-src{padding:20px}.ar-src b{font-size:20px;line-height:26px}
  .nf{padding:64px 0 88px}.nf h1{font-size:44px;line-height:48px;letter-spacing:-1.2px}.nf .sub{font-size:18px;line-height:26px;margin-top:20px}
}

/* colour with meaning (14 Oct 2026): the story's division colour (data-tone on <article>, see company.css) on the
   outside-coverage card's label and hover, and the back link; the reading column stays calm */
.art[data-tone] .ar-src .eb{color:var(--t-ink)}
.art[data-tone] .ar-src svg{color:var(--t-ink)}
.art[data-tone] .ar-src:hover{background:var(--t-bg);border-color:transparent;transform:translateY(-3px)}
.ar-src{transition:background .2s,border-color .2s,transform .35s var(--ease)}
.art[data-tone] .article .ar-back a:hover{color:var(--t-ink)}
@media (prefers-reduced-motion:reduce){.art[data-tone] .ar-src:hover{transform:none}}

/* Phase 2 (14 Oct 2026): reading pages on the section grammar, with pictures. The reading column, the index and the
   meta row stay as they are; pictures sit in the column, and the page ends in a tray of white cards like Our story. */
/* article pictures: a lead under the title, more in long pieces, each in the column with a short caption */
.art .article figure.ar-fig{height:auto;margin:40px 0;padding:0;border-radius:0;background:none}
.art .article figure.ar-fig.ar-lead{margin:0 0 32px}
.art .article figure.ar-fig .ph{height:auto;aspect-ratio:16/9;border-radius:20px}
.art .article figure.ar-fig .ph[data-ratio="4:3"]{aspect-ratio:4/3}
.art .article figure.ar-fig figcaption{margin-top:12px;font-size:14px;line-height:20px;color:var(--muted);text-wrap:pretty}
.art .article h2+figure.ar-fig,.art .article h3+figure.ar-fig{margin-top:8px}

/* More articles: a chapter title and a tray of linked cards (picture frame, kind, headline, date, corner arrow) */
.ar-more{padding-bottom:16px}
.ar-more .chap-head{margin-bottom:28px}
.ar-more .chap-head p{margin:0}
.ar-more-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.ar-more-grid .frame img{height:auto;aspect-ratio:1200/630;object-fit:cover}
.ar-more-grid .tt{font-size:17px;line-height:1.35}
.ar-more-grid .meta{margin-top:-2px}
@media (max-width:1100px){.ar-more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ar-more-grid{grid-template-columns:1fr;gap:12px}.ar-more-grid .card{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:14px;row-gap:6px;align-content:start;min-height:0;padding:16px}.ar-more-grid .frame{grid-column:1;grid-row:1/span 4;margin:0;align-self:start;border-radius:10px}.ar-more-grid .card>:not(.frame){grid-column:2}.ar-more-grid .tt{font-size:16px;text-wrap:pretty}}
@media (max-width:900px){.art .article figure.ar-fig{margin:32px 0}.art .article figure.ar-fig.ar-lead{margin:0 0 24px}.art .article figure.ar-fig .ph{border-radius:16px}}

/* ---- Article template (25 Oct 2026, scripts/articles.mjs): one reading column for every article ---- */
/* the reading column: 19px text, about 70 characters a line */
.art-t .article{max-width:720px;margin-inline:auto}
.art-t .article>p,.art-t .article li,.art-t .article blockquote{font-size:19px;line-height:30px}
.art-t .article>p{margin:0 0 20px}
.art-t .article .ar-lede{font-size:22px;line-height:33px;color:#1D1D1D}
.art-t .article h2{font:600 30px/36px var(--sans);letter-spacing:-.6px;margin:56px 0 16px;scroll-margin-top:110px;text-wrap:balance}
.art-t .article h3{font:600 23px/30px var(--sans);letter-spacing:-.3px;margin:36px 0 12px;scroll-margin-top:110px}
.art-t .article ul,.art-t .article ol{margin:0 0 22px;padding-left:24px}
.art-t .article li+li{margin-top:8px}
.art-t .article blockquote{margin:28px 0;padding-left:20px;border-left:3px solid var(--t,#FB9800)}
.art-t .article figure.ar-fig img{display:block;width:100%;height:auto;border-radius:20px}
/* breadcrumb above the headline, meta under it */
.ar-crumbs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:24px;font-size:14px;line-height:20px;color:#7B7974}
.ar-crumbs a{color:inherit;text-decoration:none}.ar-crumbs a:hover{color:#1D1D1D;text-decoration:underline}
/* In short: the answer first, for readers and for AI answers */
.ar-short{margin:0 0 32px;padding:20px 24px;border-radius:16px;background:var(--t-bg,#FFF4E2);box-shadow:inset 3px 0 0 var(--t,#FB9800)}
.ar-short p{margin:0;font-size:18px;line-height:28px}
.ar-short .ar-short-h{margin-bottom:6px;font:600 12px/16px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--t-ink,#7A4A00)}
/* blocks writers use in Markdown: :::key, :::note, :::example Title */
.art-t .ar-key{margin:32px 0;font:600 22px/31px var(--sans);letter-spacing:-.3px;color:#1D1D1D}
.art-t .ar-key p{margin:0;font:inherit}
.ar-callout,.ar-example{margin:28px 0;padding:20px 24px;border-radius:16px;background:var(--oat,#F1EEE8)}
.ar-callout p,.ar-example p{font-size:17px!important;line-height:27px!important;margin:0 0 10px!important}
.ar-callout>:last-child,.ar-example>:last-child{margin-bottom:0!important}
.ar-example{background:#fff;box-shadow:inset 0 0 0 1px #E6E3DC}
.ar-example .ar-example-h{font:600 12px/16px var(--mono)!important;letter-spacing:.12em;text-transform:uppercase;color:#7B7974}
/* contents: in the frame's left margin on wide screens, folded at the top on narrow ones */
.art-t .toc{left:max(24px,calc(50% - 572px));width:168px}
.art-t .toc nav{max-height:calc(100vh - 160px);overflow:auto}
.toc-m{display:none;margin:0 0 32px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px #E6E3DC}
.toc-m summary{min-height:48px;display:flex;align-items:center;padding:0 18px;font:600 15px/1 var(--sans);cursor:pointer}
.toc-m nav{display:grid;gap:2px;padding:0 18px 14px}
.toc-m a{padding:8px 0;font-size:15px;line-height:21px;color:#4A4945;text-decoration:none}
@media (max-width:1240px){.toc-m{display:block}}
/* questions, sources, author, next step */
.ar-faq details{border-top:1px solid #E6E3DC}.ar-faq details:last-child{border-bottom:1px solid #E6E3DC}
.ar-faq summary{display:flex;justify-content:space-between;gap:16px;padding:16px 0;font:600 18px/26px var(--sans);cursor:pointer;list-style:none}
.ar-faq summary::-webkit-details-marker{display:none}
.ar-faq summary::after{content:"+";font-weight:500;color:var(--t-ink,#B86400)}.ar-faq details[open] summary::after{content:"\2212"}
.ar-faq details p{margin:0 0 18px;font-size:17px;line-height:27px}
.ar-sources ol{padding-left:22px}.ar-sources li{font-size:15px!important;line-height:23px!important;overflow-wrap:anywhere}
.ar-author{display:flex;gap:16px;align-items:flex-start;margin:48px 0 0;padding:22px 0;border-top:1px solid #E6E3DC;border-bottom:1px solid #E6E3DC}
.ar-av{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--t-bg,#FFF4E2);color:var(--t-ink,#7A4A00);font:600 17px/1 var(--sans)}
.ar-author p{margin:0;font-size:15px;line-height:23px;color:#4A4945}
.ar-author .ar-author-n{font:600 16px/22px var(--sans);color:#1D1D1D}
.ar-author .ar-author-r{margin-bottom:6px;font-size:13px;color:#7B7974}
.ar-cta{margin:32px 0 0;padding:24px;border-radius:20px;background:#1D1D1D;color:#F3EEE4}
.ar-cta p{margin:0 0 16px;font-size:18px;line-height:27px}
.ar-cta-b{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;background:#FB9800;color:#1D1D1D;font:600 15px/1 var(--sans);text-decoration:none!important;clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%)}
.ar-cta-b:hover{background:#FFB23F}
.ar-more-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){
  .art-t .article>p,.art-t .article li{font-size:17px;line-height:27px}
  .art-t .article .ar-lede{font-size:19px;line-height:29px}
  .art-t .article h2{font-size:25px;line-height:31px;margin-top:44px}
  .art-t .ar-key{font-size:19px;line-height:27px}
}
@media (max-width:1100px){.ar-more-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ar-more-3{grid-template-columns:1fr}}
.art-t .ar-author p{margin:0}.art-t .ar-author .ar-author-r{margin:2px 0 8px}.art-t .ar-back{margin-top:28px}
/* author page (mock, 25 Oct 2026) */
.au-mock{display:inline-block;margin:0 0 20px;padding:6px 12px;border-radius:8px;background:#FEF0C7;color:#7A2E0E;font-size:13px}
.au-photo{display:grid;place-items:center;width:112px;height:112px;margin:0 auto 24px;border-radius:50%;background:var(--t-bg,#E8EEFF);color:var(--t-ink,#1D3A8A);font:600 36px/1 var(--sans)}
.au-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:8px 0 8px}
.au-facts>div{padding:16px 18px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px #E6E3DC}
.au-facts p{margin:0!important;font-size:15px!important;line-height:22px!important}
.au-list{list-style:none;padding:0!important;display:grid;gap:12px}
.au-list a{display:grid;gap:4px;padding:18px 20px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px #E6E3DC;text-decoration:none!important;color:inherit}
.au-list a:hover{box-shadow:inset 0 0 0 1.5px var(--t,#074AF8)}
.au-list b{font:600 19px/26px var(--sans)}.au-list span{font-size:15px;line-height:22px;color:#4A4945}.au-list span+span{color:#7B7974}
@media (max-width:700px){.au-facts{grid-template-columns:1fr}}
.au-facts .ar-short-h{font:600 11px/16px var(--mono)!important;letter-spacing:.12em;text-transform:uppercase;color:#7B7974}