/* Knowledge page (/articles) only: loaded after ds.css by articles.html and
   nowhere else. Values come from the design-system tokens declared in ds.css
   and the colours in site.css. */

/* ---------- Knowledge: one hero, then one photograph strip per article ----------
   The owner's ruling, 2026-10-20, built to Maya's plan of the same day. The
   hero is the newest approved article; each other approved article is its own
   full-width strip. In every one the photograph is the whole background, edge
   to edge, hard-edged, nothing printed into it. The fade behind the text is
   drawn here, never baked into the photograph, and the text column always
   ends before the fade's 0.8 point, so white text holds about 12:1 even over
   a white part of the photograph. The text column starts at the screen-edge
   gutter, not the 1200px container edge, so on a wide screen it never runs
   over the subject.
   data-side="left" | "right" | "bottom" says which part of the photograph is
   quiet. "bottom" is for a photograph with people on both sides: the text sits
   at the strip's foot on every screen size, over hands and table, never faces. */
.fv-site section.kn-photo{ position:relative; display:flex; align-items:center; padding:0; overflow:hidden; background:var(--black); color:var(--white); }
.fv-site section.kn-photo[data-side="right"]{ justify-content:flex-end; }
.fv-site .kn-bg{ position:absolute; inset:0; z-index:0; margin:0; }
.fv-site .kn-bg img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 50%; border-radius:0; }
.fv-site section.kn-photo::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.8) 40%, rgba(0,0,0,0) 62%); }
.fv-site section.kn-photo[data-side="right"]::before{ background:linear-gradient(270deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.8) 40%, rgba(0,0,0,0) 62%); }
/* a flex item takes z-index without a position of its own, so the band stays
   the containing block for the title's link, which covers the whole band */
.fv-site .kn-copy{ z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-4);
  width:min(34vw, 36rem); margin-inline:var(--space-gutter); padding-block:var(--pad-band); }
/* on a photograph the eyebrow is white: red on the fade's worst case falls under 4.5:1 */
.fv-site .kn-photo .ds-eyebrow{ color:var(--white); font-weight:800; font-size:.82rem; letter-spacing:.04em; }
.fv-site .kn-photo h2{ font-weight:400; line-height:1.02; letter-spacing:-0.03em; color:var(--white); }
.fv-site .kn-photo h2 strong{ font-weight:800; }
.fv-site .kn-photo h2 a{ color:inherit; text-decoration:none; }
.fv-site .kn-photo .post-meta{ color:var(--muted-dark); font-size:.9rem; }

/* text at the foot of the strip, on every screen size. The fade belongs to the
   text block, so every line sits on 0.8 black or more; it clears above it. */
.fv-site section.kn-photo[data-side="bottom"]{ align-items:flex-end; justify-content:flex-start; }
.fv-site section.kn-photo[data-side="bottom"]::before{ display:none; }
.fv-site .kn-photo[data-side="bottom"] .kn-copy{ width:100%; margin:0; padding:calc(var(--pad-band) + 96px) var(--space-gutter) var(--pad-band);
  background:linear-gradient(0deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.8) calc(100% - 96px), rgba(0,0,0,0) 100%); }
.fv-site .kn-photo[data-side="bottom"] h2{ max-width:40ch; }
/* Aligned knowledge: cropped a little low, so both faces sit in the strip's top half */
.fv-site .kn-bg img[src*="city-article-aligned-knowledge"]{ object-position:50% 45%; }

/* very wide screens: the strips stop growing at 760px, so the 3:2 photographs
   lose most of their height. Until the wide masters exist, crop these three
   from nearer the top so no head is cut (Freya's re-check, 2026-10-20). */
@media (min-width:1600px){
  .fv-site .kn-bg img[src*="city-article-new-playbook-is-live"]{ object-position:50% 15%; }
  .fv-site .kn-bg img[src*="city-article-aligned-knowledge"]{ object-position:50% 30%; }
  .fv-site .kn-bg img[src*="city-article-human-creativity-catalyst"]{ object-position:50% 15%; }
}

/* the hero with a photograph, as tall as the screen allows.
   In use again from 2026-10-22: the newest article, "How an AI agent earns
   the next step", now has its photograph, the one approved four-city photo no
   page was using (IMG-0051), so it leads in this layout instead of on white
   (the owner, 2026-10-22: the Knowledge page was missing images).
   The photograph runs up behind the bar, edge to edge, like the photo heroes
   on About, Contact and What we build, so the clear bar at the top of the
   page shows the photograph, not a black strip (the owner, 2026-10-22: "on
   the knowledge area top nav is on black background it needs to be
   transparent"). site.js gives the bar white links over it (nav-over-photo).
   The copy still starts under the bar. Its label sits at the foot, on the fade. */
.fv-site section.kn-hero{ padding-top:var(--nav-h); min-height:calc(var(--nav-h) + clamp(560px, calc(100svh - var(--nav-h)), 1100px)); }
.fv-site .kn-hero h2{ font-size:var(--type-h-xl); max-width:18ch; }
.fv-site .kn-hero h2 a:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.12em; }
.fv-site .kn-hero a:focus-visible{ outline:3px solid var(--red); outline-offset:4px; }
.fv-site .kn-hero .summary{ color:var(--muted-dark); font-size:clamp(1.05rem,1.4vw,1.2rem); line-height:1.5; }
.fv-site .kn-hero .btn{ margin-top:var(--space-2); }
.fv-site .kn-hero .ai-label{ top:auto; bottom:var(--space-4); right:auto; left:var(--space-4); }

/* ---------- Knowledge interim: the lead article without a photograph ----------
   Freya's direction K1, 2026-10-21. Until the newest article has its
   photograph (or the owner decides the lead, D3), it leads on white, in the
   full 1200px container, never in the photo layout's narrow column. It shares
   the white with the chips band below, so it closes on the tight spacing.
   In use again from 2026-10-30: the newest article published leads whether
   or not it has a photograph (the owner's pins on the Knowledge page). */
.fv-site section.page-hero.kn-lead{ padding-bottom:var(--space-section-tight); }
.fv-site .kn-lead-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-4); }
.fv-site .kn-lead h2{ font-size:var(--type-h-xl); font-weight:400; line-height:1.02; letter-spacing:-0.03em; max-width:20ch; color:var(--ink); }
.fv-site .kn-lead h2 strong{ font-weight:800; }
.fv-site .kn-lead h2 a{ color:inherit; text-decoration:none; }
.fv-site .kn-lead h2 a:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.12em; }
.fv-site .kn-lead a:focus-visible{ outline:3px solid var(--red-deep); outline-offset:4px; }
.fv-site .kn-lead .summary{ color:var(--muted); font-size:clamp(1.05rem,1.4vw,1.2rem); line-height:1.5; max-width:60ch; }
.fv-site .kn-lead .post-meta{ color:var(--muted-2); font-size:.9rem; }
.fv-site .kn-lead .btn{ margin-top:var(--space-2); }

/* ---------- Knowledge interim: plain rows for articles without a photograph ----------
   Freya's direction K2, 2026-10-21: one white band of plain article rows under
   the chips, newest first, separated by space, never by lines. Each row is one
   link: the title's link covers the whole row. */
.fv-site .kn-list{ list-style:none; margin:var(--space-block) 0 0; padding:0; display:grid; gap:var(--space-block); }
.fv-site .kn-row{ position:relative; display:flex; flex-direction:column; gap:var(--space-2); max-width:60ch; }
.fv-site .kn-row-topic{ margin:0; font-weight:800; font-size:.82rem; letter-spacing:.04em; color:var(--muted-2); }
.fv-site .kn-row h3{ font-size:var(--type-h-sm); font-weight:400; line-height:1.15; letter-spacing:-0.02em; color:var(--ink); }
.fv-site .kn-row h3 strong{ font-weight:800; }
.fv-site .kn-row h3 a{ color:inherit; text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:2px; text-underline-offset:.14em;
  transition:text-decoration-color var(--dur-hover) var(--ease-out-expo); }
.fv-site .kn-row h3 a::after{ content:""; position:absolute; inset:0; }
.fv-site .kn-row:hover h3 a, .fv-site .kn-row:focus-within h3 a{ text-decoration-color:currentColor; }
.fv-site .kn-row h3 a:focus-visible{ outline:none; }
.fv-site .kn-row:focus-within{ outline:3px solid var(--red-deep); outline-offset:var(--space-2); }
.fv-site .kn-row .summary{ margin:0; color:var(--muted); line-height:1.5; }
.fv-site .kn-row .post-meta{ margin:0; color:var(--muted-2); font-size:.9rem; }

/* an article strip: one link, the whole strip */
.fv-site section.kn-band{ min-height:clamp(480px, 70svh, 760px); }
.fv-site .kn-band h2 a::after{ content:""; position:absolute; inset:0; z-index:3; }
.fv-site .kn-band h2 a:focus-visible{ outline:none; }
.fv-site .kn-band:focus-within{ outline:3px solid var(--white); outline-offset:-6px; }
.fv-site .kn-read{ font-weight:800; font-size:.9rem; color:var(--white); margin-top:var(--space-2); }
.fv-site .kn-band h2 a, .fv-site .kn-read{ text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:2px; text-underline-offset:.14em;
  transition:text-decoration-color var(--dur-hover) var(--ease-out-expo); }
.fv-site .kn-band:hover h2 a, .fv-site .kn-band:focus-within h2 a,
.fv-site .kn-band:hover .kn-read, .fv-site .kn-band:focus-within .kn-read{ text-decoration-color:currentColor; }
.fv-site .kn-band .kn-bg img{ will-change:transform; }
@media (max-width:1023px){
  .fv-site section.kn-band{ min-height:clamp(460px, 62svh, 640px); }
}

/* narrow tablets and phones: the photograph still fills the strip and the text
   sits at its foot. The fade belongs to the text block, so however many lines
   a title takes, every line sits on 0.8 black or more; it clears above it. */
@media (max-width:899px){
  .fv-site section.kn-photo, .fv-site section.kn-photo[data-side="right"]{ align-items:flex-end; justify-content:flex-start; }
  .fv-site section.kn-photo::before{ display:none; }
  .fv-site .kn-copy{ width:100%; margin:0; padding:calc(var(--pad-band) + 160px) var(--space-gutter) var(--pad-band);
    background:linear-gradient(0deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.8) calc(100% - 160px), rgba(0,0,0,0) 100%); }
  .fv-site section.kn-band{ min-height:clamp(520px, 75vw, 680px); }
  /* upright crops show about a third of each photograph's width: keep its subject in frame */
  .fv-site .kn-bg img[src*="city-article-why-ai-pilots-stall"]{ object-position:62% 50%; }
  .fv-site .kn-bg img[src*="city-article-new-playbook-is-live"]{ object-position:84% 50%; }
  .fv-site .kn-bg img[src*="city-article-human-creativity-catalyst"]{ object-position:60% 50%; }
  /* only one of the two people fits: keep the man in frame */
  .fv-site .kn-bg img[src*="city-article-aligned-knowledge"]{ object-position:36% 50%; }
  .fv-site .kn-bg img[src*="4c-newyork-supplier-typed-it-once"]{ object-position:80% 50%; }
}
@media (max-width:599px){
  .fv-site section.kn-band{ min-height:max(125vw, 520px); }
}

/* ---------- Knowledge: chips, search and the article count in one white band ---------- */
.fv-site section.portal-list{ padding-top:var(--space-section-tight); padding-bottom:var(--space-section-tight); }
.fv-site .portal-bar{ display:grid; gap:var(--space-5); }
.fv-site .portal-bar .topic-chips{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:4px; margin:-4px; }
.fv-site .portal-bar .topic-chips::-webkit-scrollbar{ display:none; }
.fv-site .portal-bar .topic-chips a{ flex:none; display:inline-flex; align-items:center; min-height:44px; white-space:nowrap; text-decoration:none; }
.fv-site .portal-bar .topic-chips a:focus-visible{ outline:3px solid var(--red-deep); outline-offset:2px; }
.fv-site .portal-find-row{ display:flex; flex-wrap:wrap; gap:var(--space-4); align-items:center; }
.fv-site .portal-find-row .portal-search{ margin-top:0; flex:1 1 320px; }
.fv-site .portal-find-row .start-strip:focus-visible{ outline:3px solid var(--red-deep); outline-offset:2px; }
.fv-site .portal-count{ margin:0; color:var(--muted-2); font-size:.9rem; }
@media (max-width:620px){
  .fv-site .portal-find-row .start-strip{ display:block; width:100%; }
}
/* ---------- Knowledge: the film strip of every article ----------
   The owner's pins, 2026-10-30: every article except the lead sits directly
   under it in one film strip, the design system's PostCards set edge to edge
   (ds.css), wrapping into rows on every screen: three across on desktop, two
   on a tablet, one on a phone, never sideways. Every frame is 3:2 (BR-P10).
   Each title starts at its own photograph's left edge, so the edges line up
   in every row and stay lined up when a chip hides some frames. A frame
   whose article has no photograph of its own stays an empty black 3:2 field
   until one exists; no photograph is borrowed from another article. */
.fv-site .kn-strip .ds-media{ aspect-ratio:3/2; }
/* the frame's height comes from its ratio, which a percentage height cannot
   read: the photograph fills the frame from its edges instead (BR-P13) */
.fv-site .kn-strip .ds-media img{ position:absolute; inset:0; }
.fv-site .art-strip-band .ds-posts.kn-strip > li .ds-post .ds-post-body{ padding-left:0; }
.fv-site .kn-strip .ds-post .post-meta{ margin:0; }
@media (max-width:620px){
  .fv-site .art-strip-band .ds-posts.kn-strip{ grid-template-columns:minmax(0,1fr); grid-auto-flow:row; grid-auto-columns:auto;
    overflow-x:visible; scroll-snap-type:none; padding-inline:var(--space-gutter); }
  .fv-site .art-strip-band .ds-posts.kn-strip > li .ds-post .ds-post-body{ padding:var(--space-4) 0 var(--space-5); }
}
@media (prefers-reduced-motion:reduce){
  .fv-site .kn-bg img{ transform:none !important; }
  .fv-site .kn-band h2 a, .fv-site .kn-read, .fv-site .kn-row h3 a{ transition:none; }
}