/* ---------------------------------------------------------------------------
   Cobuu Ventures — Newsprint design system.

   Shared by every page: tokens, base, textures, the masthead, the footer,
   buttons, the call-to-action band and the article template. Layout that
   belongs to one page only stays in that page's own <style>.

   Loaded as /assets/newsprint.css?v=YYYYMMDD. Bump that string in every page
   (and in the preload in index.html's outer head) when this file changes —
   same reason as stories.js, see "Publishing" in the README.

   Rules of the style, so a new component lands in the right place:
     - zero radius, everywhere (enforced below)
     - structure is drawn with 1px ink rules; 4px for a major break
     - no soft shadows, no blur, no gradients; hover is an inversion, a red
       underline, or the hard offset shadow
     - red is an accent, never a text colour on an ink background
     - story cover art runs in full colour; the page around it stays black
       and white. Photographs of people and places (the network wall, the
       team, the hero) take the .print halftone, like a wire photo.
--------------------------------------------------------------------------- */

:root{
  --paper:#F9F9F7; --ink:#111111; --rule:#E5E5E0; --red:#CC0000;
  --n100:#F5F5F5; --n200:#E5E5E5; --n400:#A3A3A3; --n500:#737373;
  --n600:#525252; --n700:#404040;

  --serif:'Playfair Display','Times New Roman',serif;
  --body:'Lora',Georgia,serif;
  --sans:'Inter','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono','Courier New',monospace;

  --wrap:1280px;
  --pad:clamp(16px,3vw,32px);
  /* height of the part of the masthead that stays stuck to the top of the
     viewport; anything else that sticks (the Stories filter bar, the article
     sidebar) sits below it */
  --stuck:60px;
}
@media (max-width:640px){ :root{ --stuck:48px; } }

*,*::before,*::after{ box-sizing:border-box; border-radius:0 !important; }

/* The dot grid is on html so it runs edge to edge; body is the sheet — one
   1280px page with a rule down each side that every section hangs off. */
html{
  scroll-behavior:smooth; scroll-padding-top:calc(var(--stuck) + 16px);
  -webkit-text-size-adjust:100%;
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23111111' fill-opacity='0.04' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}
body{
  margin:0 auto; max-width:var(--wrap); min-height:100vh;
  border-left:1px solid var(--ink); border-right:1px solid var(--ink);
  color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.625;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{ background:var(--ink); color:var(--paper); }
a{ color:inherit; }
img,video{ max-width:100%; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.inverted :focus-visible, .foot :focus-visible{ outline-color:var(--paper); }

/* brand mark — the real asset, masked so it inherits currentColor */
.cmark{ display:inline-block; flex:none; background-color:currentColor;
        -webkit-mask:url(/assets/cobuu-mark-mask.png) center/contain no-repeat;
                mask:url(/assets/cobuu-mark-mask.png) center/contain no-repeat; }

/* ---------- utilities ---------- */
.label{ font-family:var(--mono); font-weight:500; font-size:11px; line-height:1.4; letter-spacing:0.16em; text-transform:uppercase; color:var(--n600); }
.badge{ display:inline-block; background:var(--red); color:#FFFFFF; font-family:var(--sans); font-weight:700; font-size:10px; line-height:1; letter-spacing:0.16em; text-transform:uppercase; padding:6px 8px; }
.badge--line{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
.link{ color:var(--ink); text-decoration:none; text-underline-offset:4px; text-decoration-thickness:2px; text-decoration-color:var(--red); }
.link:hover{ text-decoration-line:underline; }
.inverted{ background:var(--ink); color:var(--paper); }
.dropcap::first-letter{ font-family:var(--serif); font-weight:900; float:left; font-size:4.6em; line-height:0.8; padding:0.06em 0.09em 0 0; }
.hard-shadow-hover{ transition:transform .2s ease-out, box-shadow .2s ease-out; }
.hard-shadow-hover:hover{ box-shadow:4px 4px 0 0 var(--ink); transform:translate(-2px,-2px); }
/* fine graph-paper grain for a section that would otherwise be a flat field */
.newsprint-texture{ position:relative; }
.newsprint-texture::before{ content:''; position:absolute; inset:0; pointer-events:none; opacity:0.5; background-size:3px 3px;
  background-image:linear-gradient(0deg, transparent 98%, rgba(0,0,0,0.02) 100%), linear-gradient(90deg, transparent 98%, rgba(0,0,0,0.02) 100%); }
/* stands in for a picture that does not exist yet */
.halftone{ background-color:var(--n200); background-image:radial-gradient(rgba(17,17,17,0.2) 1px, transparent 1px); background-size:8px 8px; }
/* Print treatment: a photograph run the way a paper would run it, in black
   and white under a fine dot screen. Put .print on the frame, not the <img>. */
.print{ position:relative; overflow:hidden; background-color:var(--n200); }
.print img{ display:block; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.15); }
.print::after{ content:''; position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply; opacity:0.55;
  background-image:radial-gradient(rgba(17,17,17,0.6) 0.6px, transparent 1px); background-size:3px 3px; }
/* Typographic cover: what a story card shows when no cover has been designed.
   Kicker, title and mark on ink, so it sits with the designed covers instead
   of reading as a hole. Sized off the frame (cqw), with px fallbacks first;
   the frame it goes in needs container-type:inline-size. */
.typecover{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:20px; padding:5.6cqw; background:var(--ink); color:var(--paper); }
.typecover .k{ display:flex; align-items:center; gap:8px; gap:1.6cqw; font-family:var(--mono); font-weight:500; font-size:10px; font-size:max(9px,1.9cqw); line-height:1; letter-spacing:0.16em; text-transform:uppercase; color:var(--n400); }
.typecover .k .cmark{ width:12px; height:13px; width:max(10px,2.4cqw); height:max(11px,2.6cqw); color:var(--paper); }
.typecover h3{ font-family:var(--serif); font-weight:900; font-size:28px; font-size:clamp(22px,10cqw,68px); line-height:0.95; letter-spacing:-0.025em; color:var(--paper); margin:0; max-width:15ch; text-wrap:balance; }
/* profile links under a name: LinkedIn, a company site */
.plinks{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 14px; margin-top:6px; }
.plinks a{ display:inline-flex; align-items:center; gap:5px; min-height:28px; font-family:var(--mono); font-size:11px; text-decoration:underline; text-decoration-color:var(--n400); text-underline-offset:4px; transition:color .2s ease-out; }
.plinks a:hover{ color:var(--red); text-decoration-color:var(--red); text-decoration-thickness:2px; }
.plinks .ext{ font-size:10px; }
.ornament{ padding:32px 0; text-align:center; font-family:var(--serif); font-size:24px; line-height:1; color:var(--n400); letter-spacing:1em; text-indent:1em; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:12px 28px; border:1px solid var(--ink); background:var(--ink); color:var(--paper); font-family:var(--sans); font-weight:600; font-size:12px; line-height:1.2; letter-spacing:0.16em; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:background-color .2s ease-out, color .2s ease-out, border-color .2s ease-out; }
.btn:hover, a:hover > .btn{ background:var(--paper); color:var(--ink); }
.btn--outline{ background:transparent; color:var(--ink); }
.btn--outline:hover, a:hover > .btn--outline{ background:var(--ink); color:var(--paper); }
.btn--sm{ min-height:44px; padding:10px 18px; font-size:11px; }
@media (max-width:640px){ .btn:not(.btn--sm){ width:100%; } }

/* ---------- edition strip ---------- */
.edition{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px var(--pad); border-bottom:1px solid var(--ink); font-family:var(--mono); font-size:11px; line-height:1.4; letter-spacing:0.12em; text-transform:uppercase; white-space:nowrap; }
@media (max-width:640px){
  .edition{ font-size:10px; letter-spacing:0.04em; }
  .edition > span:nth-child(2){ display:none; }   /* three items do not fit a phone */
}

/* ---------- masthead ---------- */
.mast{ position:sticky; top:0; z-index:40; display:flex; align-items:stretch; justify-content:space-between; background:var(--paper); border-bottom:4px solid var(--ink); }
.brand{ display:flex; align-items:center; min-height:56px; padding:0 var(--pad); }
.brand img{ height:26px; width:auto; display:block; filter:brightness(0); }
.nav-links{ display:flex; align-items:stretch; }
.nav-links a{ display:flex; align-items:center; justify-content:center; min-height:44px; padding:0 clamp(14px,2.2vw,28px); border-left:1px solid var(--ink); font-family:var(--sans); font-weight:600; font-size:12px; line-height:1; letter-spacing:0.14em; text-transform:uppercase; text-decoration:none; transition:background-color .2s ease-out, color .2s ease-out; }
.nav-links a:hover{ color:var(--red); }
.nav-links a.active{ background:var(--ink); color:var(--paper); }
/* Four sections fit across a phone as one row of cells, so there is no
   hamburger to open. The wordmark gets its own row above and scrolls away:
   the negative top is that row's height, so only the section row stays stuck. */
@media (max-width:640px){
  .mast{ flex-direction:column; top:-53px; }
  .brand{ justify-content:center; min-height:52px; border-bottom:1px solid var(--ink); }
  .brand img{ height:24px; }
  .nav-links{ display:grid; grid-template-columns:repeat(4, 1fr); }
  .nav-links a{ padding:0 4px; font-size:11px; letter-spacing:0.08em; }
  .nav-links a:first-child{ border-left:0; }
}

/* ---------- page header (Stories, Network) ---------- */
.page-head{ display:grid; grid-template-columns:minmax(0,8fr) minmax(0,4fr); border-bottom:4px solid var(--ink); }
.page-head-main{ padding:clamp(28px,5vw,64px) var(--pad) clamp(20px,3vw,36px); border-right:1px solid var(--ink); }
.page-head-main .label{ display:flex; align-items:center; gap:10px; margin:0 0 20px; }
.page-head-main .label .cmark{ width:14px; height:15px; color:var(--red); }
.page-head h1{ font-family:var(--serif); font-weight:900; font-size:clamp(52px,9vw,128px); line-height:0.9; letter-spacing:-0.03em; margin:0; text-wrap:balance; }
.page-head-side{ display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(20px,3vw,36px) var(--pad); }
.page-head-side p{ font-size:clamp(15px,1.3vw,17px); line-height:1.6; text-align:justify; hyphens:auto; margin:0; }
@media (max-width:860px){
  .page-head{ grid-template-columns:1fr; }
  .page-head-main{ border-right:0; border-bottom:1px solid var(--ink); }
}

/* ---------- filter tabs (Stories topics, Network segments) ---------- */
/* One row of cells under the masthead; it scrolls sideways on a phone rather
   than wrapping into a block that would eat the screen once stuck. A tab
   with nothing behind it is hidden by the page's script, not listed empty. */
.filters{ position:sticky; top:var(--stuck); z-index:30; display:flex; overflow-x:auto; background:var(--paper); border-bottom:1px solid var(--ink); scrollbar-width:none; }
.filters::-webkit-scrollbar{ display:none; }
.filter{ flex:none; min-height:44px; padding:0 clamp(14px,2vw,24px); background:transparent; border:0; border-right:1px solid var(--ink); color:var(--ink); font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; cursor:pointer; transition:background-color .2s ease-out, color .2s ease-out; }
.filter:hover{ background:var(--rule); }
.filter.is-active{ background:var(--ink); color:var(--paper); }
.filter:focus-visible{ outline-offset:-4px; }
.filter.is-active:focus-visible{ outline-color:var(--paper); }
.filter[hidden]{ display:none; }

/* ---------- call-to-action band (home "Contact", Network "Suggest") ---------- */
.cta{ display:grid; grid-template-columns:minmax(0,8fr) minmax(0,4fr); border-top:4px solid var(--ink); }
.cta h2{ position:relative; font-family:var(--serif); font-weight:900; font-size:clamp(36px,6vw,80px); line-height:0.95; letter-spacing:-0.025em; margin:0; padding:clamp(40px,7vw,96px) var(--pad); border-right:1px solid var(--ink); text-wrap:balance; }
.cta-side{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; gap:24px; padding:clamp(28px,4vw,48px) var(--pad); }
.cta-side p{ font-size:15px; line-height:1.6; margin:0; }
@media (max-width:860px){
  .cta{ grid-template-columns:1fr; }
  .cta h2{ border-right:0; border-bottom:1px solid var(--ink); }
}

/* ---------- footer ---------- */
.foot{ background:var(--ink); color:var(--paper); }
.foot-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr); }
.foot-cell{ padding:clamp(28px,4vw,48px) var(--pad); border-right:1px solid var(--n700); }
.foot-cell:last-child{ border-right:0; }
.foot .brand{ display:inline-flex; min-height:44px; padding:0; }
.foot .brand img{ filter:none; }
.foot-cell > p{ font-size:14px; line-height:1.6; color:var(--n400); max-width:34ch; margin:12px 0 0; }
.foot .label{ color:var(--n400); margin:0 0 12px; }
.foot-links{ display:flex; flex-direction:column; }
.foot-links a{ display:flex; align-items:center; min-height:44px; border-bottom:1px solid var(--n700); font-family:var(--sans); font-weight:500; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; text-decoration:none; text-underline-offset:4px; text-decoration-thickness:2px; text-decoration-color:var(--red); }
.foot-links a:hover{ text-decoration-line:underline; }
.colophon{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 24px; padding:16px var(--pad); border-top:1px solid var(--n700); font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--n400); }
@media (max-width:860px){
  .foot-grid{ grid-template-columns:1fr; }
  .foot-cell{ border-right:0; border-bottom:1px solid var(--n700); }
  .foot-cell:last-child{ border-bottom:0; }
}

/* social links: bordered boxes that share their inner rules */
.cobuu-social{ display:flex; margin:0; padding:0; list-style:none; }
.cobuu-social a{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin-right:-1px; border:1px solid var(--paper); color:var(--paper); font-size:16px; text-decoration:none; transition:background-color .2s ease-out, color .2s ease-out; }
.cobuu-social a:hover{ background:var(--paper); color:var(--ink); }

/* ==========================================================================
   Article template (/talks/*)
   ========================================================================== */

#progress{ position:fixed; top:0; left:0; height:3px; width:100%; transform:scaleX(0); transform-origin:left; background:var(--red); z-index:50; transition:transform .1s linear; will-change:transform; }

.draft-flag{ display:flex; justify-content:center; padding:10px var(--pad); border-bottom:1px solid var(--ink); }
.draft-flag span{ display:inline-flex; align-items:center; gap:8px; background:var(--red); color:#FFFFFF; font-family:var(--sans); font-weight:700; font-size:10px; letter-spacing:0.16em; text-transform:uppercase; padding:6px 10px; }
.verify-note{ margin:0; padding:14px var(--pad); border-bottom:1px solid var(--ink); border-left:4px solid var(--red); background:var(--n100); font-family:var(--sans); font-size:13px; line-height:1.6; color:var(--n700); }

/* Eight columns of story, four of sidebar. The sidebar is the subject card:
   it follows the article in the source, and on a wide screen sits beside it
   and stays in view while the piece is read. */
.story-page{ display:grid; grid-template-columns:minmax(0,8fr) minmax(0,4fr); }
.art-head, .art-hero, .more{ grid-column:1 / -1; }

.art-head{ padding:clamp(16px,2.5vw,28px) var(--pad) clamp(24px,3.5vw,40px); border-bottom:1px solid var(--ink); }
.back{ display:inline-flex; align-items:center; gap:9px; min-height:44px; font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--n600); text-decoration:none; transition:color .2s ease-out; }
.back:hover{ color:var(--red); }
.art-kicker{ display:flex; align-items:center; gap:9px; font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; margin:clamp(20px,3vw,36px) 0 16px; }
.art-kicker .cmark{ width:14px; height:15px; color:var(--red); }
.art-title{ font-family:var(--serif); font-weight:900; font-size:clamp(38px,6.4vw,84px); line-height:0.95; letter-spacing:-0.025em; margin:0; max-width:20ch; text-wrap:balance; }
.art-dek{ font-style:italic; font-size:clamp(18px,2.2vw,24px); line-height:1.4; color:var(--n700); margin:22px 0 0; max-width:56ch; }
.byline{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin:28px 0 0; padding-top:16px; border-top:1px solid var(--ink); font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--n600); }
.byline b{ color:var(--ink); font-weight:500; }
.byline .dot{ color:var(--n400); }

/* 2:1 is the designed card's own ratio, so art with the headline set into it
   is never cropped. --photo is for a raw still, --mark for no art at all. */
.art-hero{ margin:0; padding:var(--pad); border-bottom:1px solid var(--ink); }
.art-hero .band{ position:relative; aspect-ratio:2/1; overflow:hidden; border:1px solid var(--ink); background:var(--n200); }
.art-hero .band img{ width:100%; height:100%; object-fit:cover; display:block; }
.art-hero .band--photo{ aspect-ratio:16/9; }
.art-hero .band--photo img{ object-position:center 42%; }
.art-hero .band--mark{ aspect-ratio:16/6; display:flex; align-items:center; justify-content:center; background-color:var(--ink); background-image:radial-gradient(rgba(249,249,247,0.16) 1px, transparent 1px); background-size:8px 8px; }
.art-hero .band--mark .mark{ width:104px; height:114px; color:var(--paper); }
.art-cap{ margin:10px 0 0; font-family:var(--mono); font-size:11px; line-height:1.5; letter-spacing:0.04em; color:var(--n600); }
.art-cap::before{ content:'Fig. 1.1. '; color:var(--ink); }

.article{ grid-column:1; padding:clamp(32px,5vw,64px) var(--pad) clamp(40px,6vw,72px); border-right:1px solid var(--ink); }
.article > *{ max-width:680px; margin-left:auto; margin-right:auto; }
.article p{ font-size:clamp(17px,1.5vw,19px); line-height:1.7; text-align:justify; hyphens:auto; margin-top:0; margin-bottom:1.4em; }
/* drop cap on the opening paragraph only (direct child, so it can't leak onto
   the pull-quote's paragraph, which is also a first-of-type <p>) */
.article > p:first-of-type:not(.placeholder)::first-letter{ font-family:var(--serif); font-weight:900; float:left; font-size:5em; line-height:0.78; padding:0.05em 0.09em 0 0; }
.article > p.placeholder{ color:var(--n600); font-style:italic; }
.article h2{ font-family:var(--serif); font-weight:700; font-size:clamp(26px,3.2vw,36px); line-height:1.1; letter-spacing:-0.01em; margin-top:1.7em; margin-bottom:0.6em; padding-top:0.6em; border-top:1px solid var(--ink); }
.article a.inline{ text-decoration:underline; text-decoration-color:var(--red); text-decoration-thickness:2px; text-underline-offset:4px; transition:color .2s ease-out; }
.article a.inline:hover{ color:var(--red); }
.article blockquote{ margin-top:2em; margin-bottom:2em; padding:4px 0 4px 24px; border-left:4px solid var(--ink); }
.article blockquote p{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(24px,3vw,32px); line-height:1.25; text-align:left; hyphens:manual; margin:0; }
/* A model's own reasoning, read back verbatim: set as body text in mono, so
   it reads as a machine transcript rather than something a person said. */
.article blockquote.machine p{ font-family:var(--mono); font-style:normal; font-size:clamp(14px,1.2vw,15px); line-height:1.7; color:var(--n700); }

/* a short money list: amount in ink, source in grey */
.ledger{ list-style:none; margin-top:0; margin-bottom:1.9em; padding:0; border-top:1px solid var(--ink); }
.ledger li{ display:flex; align-items:baseline; gap:18px; padding:12px 0; border-bottom:1px solid var(--ink); font-family:var(--mono); font-size:13px; line-height:1.55; color:var(--n600); }
.ledger .amt{ flex:none; width:8.6em; color:var(--ink); font-weight:500; }

.aside{ font-family:var(--mono); font-size:12px; line-height:1.7; color:var(--n600); border:1px solid var(--ink); background:var(--n100); padding:16px 18px; margin-top:2em; margin-bottom:2em; }
.aside b{ color:var(--ink); font-weight:500; }
.end-mark{ display:flex; justify-content:center; margin-top:2.4em; }
.end-mark .cmark{ width:22px; height:24px; }

/* The card the Network page uses, narrowed to the sidebar: who the piece is
   about, where to find them off this site, and the line worth remembering.
   Kept in step with /network by hand — change a role, quote or link there
   and change it here too. */
.subject{ grid-column:2; align-self:start; position:sticky; top:var(--stuck); padding:clamp(32px,5vw,64px) var(--pad); }
.subject::before{ content:'In this piece'; display:block; font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--n600); margin-bottom:12px; }
.scard{ border:1px solid var(--ink); background:var(--paper); padding:clamp(18px,2vw,24px); }
.scard-top{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:16px; }
.scard-who{ display:flex; align-items:flex-start; gap:14px; min-width:0; }
.scard-photo{ width:64px; height:64px; object-fit:cover; flex:none; display:block; border:1px solid var(--ink); background:var(--n200); }
.scard-mark{ width:64px; height:64px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--ink); color:var(--paper); }
.scard-mark .cmark{ width:26px; height:29px; }
.scard h3{ font-family:var(--serif); font-weight:700; font-size:22px; line-height:1.1; margin:0; }
.scard .role{ font-family:var(--mono); font-size:11px; line-height:1.4; letter-spacing:0.08em; text-transform:uppercase; color:var(--n600); margin-top:6px; }
/* .plinks are rendered only where a real URL is known — a guessed profile URL
   points at a stranger, so one link, or none, is the correct outcome. */
.scard-logo{ height:28px; width:auto; max-width:92px; object-fit:contain; flex:none; }
.scard .kicker{ font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--red); margin:22px 0 8px; padding-top:16px; border-top:1px solid var(--ink); }
.scard .quote{ font-family:var(--serif); font-style:italic; font-size:20px; line-height:1.3; margin:0; }
.scard .note{ font-size:14px; line-height:1.6; font-style:italic; color:var(--n600); margin:18px 0 0; }

.more{ padding:20px var(--pad); border-top:1px solid var(--ink); }

@media (max-width:960px){
  .story-page{ grid-template-columns:1fr; }
  .article{ border-right:0; }
  .subject{ grid-column:1; position:static; padding-top:0; }
}
@media (max-width:640px){
  /* a justified column this narrow opens rivers between the words */
  .article p, .page-head-side p{ text-align:left; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}