/* Portfolio review fixes, applied 2026-10-16. Loaded after fieldnotes.css on the home page and case studies. */
/* ============================================================
   Portfolio review fixes (2026-10-16). Layered after fieldnotes.css.
   Local draft only until applied. Each block between an "@rv ID | label"
   marker comment and an "@end" marker comment can be approved or rejected
   in the review drafts; the builder leaves out rejected blocks. Base
   styles are always on.
   ============================================================ */

/* Base styles for elements the copy edits add (always on). */
.fn-hero-byline { margin:14px 0 0; font:500 16px/1.5 var(--font-body); color:var(--muted); }
.fn-hero-reach { display:flex; flex-wrap:wrap; gap:4px 24px; margin-top:12px; }
.fn-hero-reach a { font:600 16px/1 var(--font-body); color:var(--ink); text-decoration:none;
  border-bottom:2px solid var(--navy); padding:10px 0 4px; }
.fn-lead-proof { margin:-18px 0 22px; padding-left:14px; border-left:3px solid var(--ink);
  font:500 16px/1.55 var(--font-body); color:var(--ink); max-width:44ch; }
.fn-lead-lock { margin:0 0 24px; font:500 14px/1.5 var(--font-body); color:var(--faint); }
.fn-about-title { margin:0 0 22px; font:800 40px/1.02 var(--font-display); letter-spacing:-.02em; color:var(--ink); }
@media (max-width:920px) { .fn-about-title { font-size:30px; } }

/* C1 · Work images show in color instead of gray */
/* ---- Fix 3: the work is the only color. ----
   The frame stays monochrome; work imagery shows real color at rest
   instead of only on hover. The portrait keeps the duotone, since it's identity, not work. */
html.theme-mono body.fn .fn-plate .fn-plate-img,
html.theme-mono body.fn .fn-cs-hero,
html.theme-mono body.fn .fn-cs-hero.fn-cs-hero--matte { background:var(--paper-tint); }
html.theme-mono body.fn .fn-plate .fn-plate-img img,
html.theme-mono body.fn .fn-lead .fn-plate-img img,
html.theme-mono body.fn .fn-duo:not(.fn-culture):not(.fn-portrait) img,
html.theme-mono body.fn .fn-cs-hero img,
html.theme-mono body.fn .fn-img3 .fn-duo img,
html.theme-mono body.fn .fn-board,
html.theme-mono body.fn .fn-compare-img img,
html.theme-mono body.fn .fn-figma-art img,
html.theme-mono body.fn .fn-figma-embed iframe,
html.theme-mono body.fn .fn-cs-video video,
html.theme-mono body.fn .fn-cs-fig .cs-zoomable img,
html.theme-mono body.fn .fn-cs-label-media .cs-zoomable img {
  filter:none; mix-blend-mode:normal; opacity:1;
}


/* C2 · Labels and captions 12px or larger, darker gray for contrast */
/* ---- Fix 6: labels and captions legible (12px minimum, 4.5:1). ----
   #5C5C5C is 6.7:1 on white and 6.0:1 on the #F4F4F2 tint. */
html.theme-mono body.fn { --faint:#5C5C5C; --faint-2:#5C5C5C; }
body.fn .fn-meta, body.fn .fn-lead-meta, body.fn .fn-plate-eyebrow, body.fn .fn-wrow-date,
body.fn .fn-duo .fn-figref, body.fn .fn-cs-hero .fn-figref, body.fn .fn-portrait figcaption,
body.fn .fn-cs-topbar a, body.fn .fn-cs-topbar span, body.fn .fn-meta-rail dt,
body.fn .fn-cs-label .fn-sect-num, body.fn .fn-cs-head .fn-sect-num, body.fn .fn-role-label,
body.fn .fn-chap-media figcaption, body.fn .fn-chap-fig-cap, body.fn .fn-out-label,
body.fn .fn-nextcase .fn-nextcase-eyebrow, body.fn .fn-cs-note-tag, body.fn .fn-cadence-when,
body.fn .fn-pullquote footer, body.fn .fn-cs-artifacts-label, body.fn .fn-compare-label,
body.fn .fn-persona-tag, body.fn .fn-metrics-table th, body.fn .fn-figma-fallback .ff-tag,
body.fn .fn-footer-copy, body.fn .fn-footer-tag, body.fn .fn-cs-eyebrow {
  font-size:12px; letter-spacing:.1em;
}
body.fn .fn-compare-caption { font-size:14px; }
body.fn .fn-contact-rows a { font-size:13px; }
/* Recessive chapter numerals: still quiet, now 3.5:1 instead of 1.5:1. */
html.theme-mono body.fn .fn-chap-num { color:#8A8A86; }
/* Figure labels now sit on light plates or real-color images: a small
   white chip keeps them readable on either. */
html.theme-mono body.fn .fn-duo .fn-figref, html.theme-mono body.fn .fn-cs-hero .fn-figref {
  color:#111; background:rgba(255,255,255,.92); padding:5px 7px; border-radius:2px;
}
html.theme-mono body.fn .fn-footer-copy { color:rgba(255,255,255,.7); }
html.theme-mono body.fn .fn-footer-tag { color:rgba(255,255,255,.72); }


/* C3 · Case study paragraphs capped at about 70 characters a line */
/* Long-form line length: about 70 characters (Elevance ran ~95). */
body.fn .fn-cs-body > p, body.fn .fn-cs-body li, body.fn .fn-role-grid p { max-width:70ch; }


/* C4 · Compact home hero so the work starts on the first screen */
/* ---- Fix 1: the work leads the home page. ----
   Hero keeps the portrait but at a compact size, so the featured case
   study still starts on the first screen. */
body.fn .fn-hero { padding:48px 0 40px; }
body.fn .fn-hero-grid { grid-template-columns:minmax(0,1fr) 280px; gap:56px; }
body.fn .fn-hero .fn-portrait { width:280px; justify-self:end; }
body.fn .fn-hero h1 { max-width:20ch; margin-bottom:16px; }
body.fn .fn-hero-deck { font-size:20px; }
body.fn #work.fn-section { padding-top:36px; }
body.fn .fn-work-head { margin-bottom:28px; }
@media (max-width:920px) {
  body.fn .fn-hero { padding:28px 0 24px; }
  body.fn #work.fn-section { padding-top:24px; }
  body.fn .fn-work-head h2 { font-size:30px; }
  body.fn .fn-hero-grid { grid-template-columns:1fr; gap:20px; }
  body.fn .fn-hero .fn-portrait { order:-1; width:140px; justify-self:start; }
  body.fn .fn-hero .fn-portrait figcaption { display:none; }
}


/* C5 · Chat bubble doesn't pop up over content on phones */
/* ---- Fix 7: the chat nudge doesn't cover content on a phone. ----
   The launcher stays; only the auto-popping bubble is off on small screens. */
@media (max-width:640px) { #ai-assistant-root .ai-nudge { display:none !important; } }


/* C6 · Culture video band without the monochrome fade */
/* ---- Culture video band: no monochrome fade. ----
   The photo shows clean (no grayscale filter, screen blend, 50% opacity
   or dark gradient wash). The words sit on their own solid panel beside
   it, so they stay readable without fading the photo. */
body.fn .fn-culture { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); background:#111; }
body.fn .fn-culture > img { position:relative; inset:auto; grid-column:2; grid-row:1; width:100%; height:100%;
  min-height:420px; object-fit:cover; filter:none; mix-blend-mode:normal; opacity:1; }
body.fn .fn-culture-grad { display:none; }
body.fn .fn-culture-inner { grid-column:1; grid-row:1; max-width:none; margin:0; align-self:center; }
@media (max-width:920px) {
  body.fn .fn-culture { grid-template-columns:1fr; }
  body.fn .fn-culture > img { grid-column:1; grid-row:1; min-height:0; height:auto; aspect-ratio:16/9; }
  body.fn .fn-culture-inner { grid-column:1; grid-row:2; }
}


/* C7 · Cooler, very light gray for the case study cards, hover states and tinted sections */
/* #F3F6FA: a cool (blue-leaning) near-white replacing the warm #F4F4F2
   everywhere the site uses its light tint: the case study cards, the
   Writing rows on hover, the tinted bands inside the case studies and the
   other light bands. Hairline borders shift cooler to match. */
html.theme-mono body.fn { --paper-tint:#F3F6FA; --paper-tint-2:#F3F6FA; --band:#F3F6FA; --hairline:#E2E6EC; }
html.theme-mono body.fn .fn-lead.fn-plate,
html.theme-mono body.fn .fn-plate .fn-plate-img { background:#F3F6FA; }

/* Portrait: slight rounding (2026-10-16). */
body.fn .fn-portrait { border-radius:8px; }

/* Portrait on phones: shown in About instead of the hero, so the work comes first (2026-10-16).
   Phones only (640px and under), so a narrow desktop window or tablet keeps the hero portrait. */
body.fn .fn-portrait--about { display:none; }
@media (max-width:640px) {
  body.fn .fn-hero .fn-portrait { display:none; }
  body.fn .fn-portrait--about { display:block; width:200px; max-width:100%; margin:0 0 24px; }
}
/* Wide enough phones: the portrait sits left of the opening paragraph, which keeps
   a text column of at least ~300px beside it. Narrower phones keep it stacked above. */
@media (min-width:550px) and (max-width:640px) {
  body.fn .fn-about article { display:flow-root; }
  body.fn .fn-portrait--about { float:left; width:150px; margin:6px 22px 12px 0; }
  body.fn .fn-portrait--about figcaption { display:none; }
  /* The opening paragraph stays in its own column beside the photo instead of wrapping under it. */
  body.fn .fn-about .fn-portrait--about + .lead { display:flow-root; }
  body.fn .fn-about .fn-portrait--about ~ p:not(.lead) { clear:left; }
}