/* NACHC Health Center Resource Clearinghouse — palette over the Dee theme.
   Every value below was measured for WCAG contrast before it was used; the
   figures in the comments are the measured ratios, not estimates. */
:root{
  /* ground */
  --bg:#f4f5f9;              /* cool light ground */
  --bg-panel:#eaecf3;
  --paper:#ffffff;

  /* type */
  --ink:#14172b;             /* 16.24 on --bg */
  --body:#4d4d4d;            /*  7.76 on --bg */
  --muted:#5a6070;           /*  5.77 on --bg */
  --line:rgba(20,23,43,.12);
  --line-strong:rgba(20,23,43,.22);

  /* primary — deep purple. Carries all headings, header, primary buttons. */
  --navy:#382195;            /* 10.59 on --bg · white on it 11.54 */
  --navy-700:#28186b;        /* white on it 14.65 */
  --navy-tint:rgba(56,33,149,.08);

  /* accent — teal. FILL ONLY at full strength: 1.84 on --bg, so it can never
     carry small text. --gold-700 is the text-safe shade and Dee uses that
     token for eyebrows, tags and role labels. */
  --gold:#53c9bd;            /* ink on it 8.81 · purple on it 5.75 */
  --gold-700:#30756e;        /*  4.95 on --bg · 4.57 on --bg-panel */
  --gold-tint:rgba(83,201,189,.16);

  --red:#a3312a;             /* kept for errors only — never decorative */

  --shadow:0 1px 2px rgba(20,23,43,.06),0 10px 26px rgba(20,23,43,.08);
  --shadow-hover:0 4px 10px rgba(20,23,43,.08),0 18px 40px rgba(20,23,43,.12);
}

/* Dee ships .btn-primary gold; teal cannot carry white text (1.84), so the
   primary action is purple and teal becomes the secondary fill. */
.btn-primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-700);border-color:var(--navy-700)}
.btn-accent{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn-accent:hover{background:#45b3a8;border-color:#45b3a8;color:var(--ink)}

/* ---- clearinghouse-specific components ---- */
.facets{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.facets label{display:block;font-size:.82rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--gold-700);margin-bottom:5px}
.facets select,.facets input[type=search]{width:100%;min-height:46px;padding:9px 11px;
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:#fff;
  color:var(--ink);font:inherit;font-size:1rem}
.facets select:focus-visible,.facets input:focus-visible,
.res-card a:focus-visible,.chip:focus-visible{outline:3px solid var(--navy);outline-offset:2px}

.result-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;
  justify-content:space-between;margin:20px 0 10px}
.result-count{font-weight:700;color:var(--ink)}
.active-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--gold-tint);
  color:var(--ink);border:1px solid var(--gold);border-radius:2px;
  padding:5px 12px;font-size:.9rem;cursor:pointer}
.chip b{font-weight:700;color:var(--gold-700)}

.res-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.res-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow)}
.res-card h3{margin:0 0 6px;font-size:1.12rem;line-height:1.35}
.res-card h3 a{color:var(--navy);text-decoration:none}
.res-card h3 a:hover{text-decoration:underline}
.res-meta{display:flex;flex-wrap:wrap;gap:8px 14px;margin:0 0 8px;
  font-size:.9rem;color:var(--gold-700);font-weight:600}
.res-abstract{margin:0;color:var(--body);font-size:1rem;line-height:1.6}
.res-tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.res-tags li{font-size:.82rem;background:var(--bg-panel);color:var(--body);
  border-radius:var(--radius-sm);padding:3px 9px}

.pager{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:26px 0 0;
  padding:0;list-style:none}
.pager button{min-width:44px;min-height:44px;border:1px solid var(--line-strong);
  background:#fff;border-radius:var(--radius-sm);color:var(--ink);font:inherit;cursor:pointer}
.pager button[aria-current=page]{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700}
.pager button:disabled{opacity:.45;cursor:default}

.topic-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));
  margin:0;padding:0;list-style:none}
.topic-tile{background:var(--gold-tint);border:1px solid var(--gold);
  border-radius:var(--radius);padding:18px}
.topic-tile a{color:var(--navy);font-weight:700;text-decoration:none;font-size:1.06rem}
.topic-tile a:hover{text-decoration:underline}
.topic-tile p{margin:6px 0 0;color:var(--body);font-size:.94rem}
.topic-tile .n{display:block;margin-top:8px;color:var(--gold-700);font-weight:700;font-size:.88rem}

.detail-meta{display:grid;gap:10px 26px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  background:var(--bg-panel);border-radius:var(--radius);padding:18px 20px;margin:18px 0}
.detail-meta dt{font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--gold-700);margin:0 0 3px}
.detail-meta dd{margin:0 0 4px;color:var(--ink)}
.file-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.file-list a{display:block;background:var(--paper);border:1px solid var(--line);
  border-left:4px solid var(--gold);border-radius:var(--radius-sm);padding:12px 15px;
  color:var(--navy);font-weight:600;text-decoration:none}
.file-list a:hover{background:var(--gold-tint);text-decoration:underline}

.no-results{background:var(--paper);border:1px dashed var(--line-strong);
  border-radius:var(--radius);padding:30px;text-align:center;color:var(--body)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- Dee's hero assumes a dark photograph behind it and styles its copy
   white. This build has no hero photograph yet, so the hero is re-grounded
   as a light panel with dark type. Measured: ink 16.24, body 7.76. ---- */
.hero{background:linear-gradient(180deg,var(--bg-panel) 0%,var(--bg) 100%);
  padding:56px 0 64px;min-height:0}
.hero::before,.hero::after{display:none}
.hero-media{display:none}
.hero-inner{position:static}
.hero-copy{background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--gold);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:34px 36px;max-width:760px}
.hero-copy .eyebrow{color:var(--gold-700)}
.hero-copy h1{color:var(--ink);margin:6px 0 12px}
.hero-copy p{color:var(--body);font-size:1.12rem;line-height:1.6;max-width:62ch}
.hero-search{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 6px}
.hero-search input{flex:1 1 300px;min-height:50px;padding:10px 14px;font-size:1.05rem;
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:#fff;color:var(--ink)}
.hero-search input:focus-visible{outline:3px solid var(--navy);outline-offset:2px}

/* header search button was clipping its own label */
.nav-search{display:flex;align-items:stretch}
.nav-search input{min-width:150px}
.nav-search button{white-space:nowrap;padding:0 14px;background:var(--gold);color:var(--ink);
  border:1px solid var(--gold);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-weight:700;cursor:pointer}
.nav-search button:hover{background:#45b3a8}

/* breadcrumbs were rendering as a bare numbered list */
.breadcrumb{background:var(--bg-panel);border-bottom:1px solid var(--line);padding:9px 0}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;font-size:.94rem}
.breadcrumb li+li::before{content:"/";margin-right:8px;color:var(--muted)}
.breadcrumb a{color:var(--navy)}
.breadcrumb span{color:var(--body)}

.section{padding:52px 0}
.section.alt{background:var(--bg-panel)}
.stat-list li{display:flex;justify-content:space-between;gap:12px;background:var(--paper);
  border:1px solid var(--line);margin-bottom:6px;padding:8px 12px;border-radius:var(--radius-sm)}
.stat-list li b{color:var(--gold-700)}
.container.narrow{max-width:820px}

/* hero card was escaping Dee's container (Dee's .hero-inner is absolutely
   positioned for its photo layout); restore normal flow + gutters */
.hero-inner{position:relative;max-width:var(--max);margin:0 auto;
  padding-left:var(--gutter);padding-right:var(--gutter);inset:auto;transform:none}
.hero-copy{margin:0}
/* keep the header search from clipping its own label */
.nav-search{flex:0 0 auto}
.nav-search input{min-width:120px;width:auto}
.nav-search button{flex:0 0 auto;min-width:86px}
@media (max-width:1180px){.nav-search{display:none}}

/* ---- submission forms ---- */
.form-stack{display:grid;gap:18px;max-width:640px}
.field label{display:block;font-weight:700;color:var(--ink);margin-bottom:6px;font-size:1.02rem}
.field .req{color:var(--gold-700);font-weight:600}
.field .opt{color:var(--muted);font-weight:400}
.field input,.field textarea{width:100%;min-height:48px;padding:11px 13px;font:inherit;font-size:1.02rem;
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:#fff;color:var(--ink)}
.field textarea{min-height:130px;line-height:1.55}
.field input:focus-visible,.field textarea:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.field-error input,.field-error textarea{border-color:var(--red);border-width:2px}
.field-msg{color:var(--red);font-weight:600;margin:0 0 6px;font-size:.95rem}
.error-summary{background:#fdf1f0;border:2px solid var(--red);border-radius:var(--radius);
  padding:18px 20px;margin:0 0 22px}
.error-summary h2{margin:0 0 8px;font-size:1.1rem;color:var(--red)}
.error-summary ul{margin:0;padding-left:20px}
.error-summary a{color:var(--red);font-weight:600}
.form-note{color:var(--muted);font-size:.95rem;max-width:62ch}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.receipt{background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--gold);
  border-radius:var(--radius);padding:30px 32px;box-shadow:var(--shadow)}
.receipt .ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.1em;color:var(--navy)}
.detail-meta>div{min-width:0}

/* ---- reviewer console ---- */
.console-body{background:var(--bg)}
.console-head{background:var(--navy);color:#fff;padding:12px 0}
.console-head .container{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center}
.console-head b{font-size:1.05rem}
.console-who{font-size:.94rem;color:#e6e2f7}
.console-who a{color:#fff;font-weight:600}
.console-auth{display:flex;min-height:80vh;align-items:center;justify-content:center;padding:40px 20px}
.console-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:34px 36px;max-width:440px;width:100%}
.console-flash{background:var(--gold-tint);border:1px solid var(--gold);border-radius:var(--radius-sm);
  padding:11px 14px;margin:18px 0;color:var(--ink);font-weight:600}
.queue-tabs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:22px 0 18px;padding:0}
.queue-tabs a{display:inline-block;padding:9px 15px;border:1px solid var(--line-strong);
  border-radius:2px;background:var(--paper);color:var(--ink);text-decoration:none;font-weight:600}
.queue-tabs a[aria-current=page]{background:var(--navy);border-color:var(--navy);color:#fff}
.queue-tabs a b{color:var(--gold-700)}
.queue-tabs a[aria-current=page] b{color:var(--gold)}
.queue-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;margin:0 0 16px;box-shadow:var(--shadow)}
.queue-item-head{display:flex;gap:16px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.queue-item h2{margin:2px 0 0;font-size:1.18rem;line-height:1.35}
.status{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  border-radius:2px;padding:5px 12px;white-space:nowrap}
.status-pending{background:var(--gold-tint);color:var(--gold-700);border:1px solid var(--gold)}
.status-accepted{background:var(--navy-tint);color:var(--navy);border:1px solid var(--navy)}
.status-declined{background:#fdf1f0;color:var(--red);border:1px solid var(--red)}
.decide-form{display:grid;gap:9px;border-top:1px solid var(--line);padding-top:15px;margin-top:6px}
.decide-form label{font-weight:700;font-size:.95rem}
.decide-form input[type=text]{min-height:46px;padding:10px 12px;border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);font:inherit;background:#fff;color:var(--ink)}
.decide-form input:focus-visible,.queue-tabs a:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.decided{border-top:1px solid var(--line);padding-top:13px;margin:10px 0 0;color:var(--body)}
.audit-panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;margin:26px 0 50px}
.audit-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:7px;font-size:.94rem;color:var(--body)}
.audit-list b{color:var(--navy)}

/* ---- photography ----
   The hero card keeps its own opaque ivory ground, so headline contrast is
   guaranteed by the card and never depends on what the photograph is doing
   behind it. The image sits to the right, where this frame is empty. */
.hero-shot{position:relative;padding:0;overflow:hidden;background:var(--bg-panel)}
.hero-shot .hero-media{display:block;position:absolute;inset:0;width:100%;height:100%}
.hero-shot .hero-media img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.hero-shot .hero-inner{position:relative;z-index:2;padding-top:58px;padding-bottom:66px}
/* superseded by the round-3 glass treatment below */
@media (max-width:820px){
  .hero-shot .hero-media img{object-position:78% 50%;opacity:.28}
  .hero-shot .hero-copy{background:var(--paper)}
}
.photo-band{position:relative;isolation:isolate}
.photo-band img{display:block;width:100%;height:clamp(260px,34vw,420px);object-fit:cover;object-position:50% 45%}
.photo-band-copy{position:absolute;inset:0;display:flex;align-items:center;
  background:linear-gradient(90deg,rgba(20,23,43,.86) 0%,rgba(20,23,43,.68) 46%,rgba(20,23,43,.15) 100%)}
.photo-band-copy .eyebrow{color:var(--gold)}
.photo-band-copy h2{color:#fff;margin:6px 0 10px;max-width:18ch}
.photo-band-copy p{color:#eef0f6;max-width:52ch;margin:0;font-size:1.05rem;line-height:1.6}

/* ===== critique round 1 — applied =====
   The page was behaving like a marketing homepage when the job is "find a
   resource quickly". Changes below are all about task density. */

/* 1. one vertical rhythm everywhere, instead of a dense hero then a vast gap */
.section{padding:72px 0}
.section-head{margin-bottom:28px}
.section-head h1,.section-head h2{margin:12px 0 18px}

/* 2. the hero card was 760px and swallowed the photograph. 600px, and the
      image keeps half the frame so it reads as evidence, not wallpaper. */
.hero-shot{min-height:580px}
.hero-shot .hero-inner{display:flex;align-items:center;min-height:580px;padding-top:0;padding-bottom:0}
.hero-copy{max-width:600px;padding:40px 44px}
.hero-copy h1{font-size:clamp(34px,3.4vw,48px);line-height:1.04}
.hero-copy p{font-size:18px;line-height:1.55}
.hero-copy .eyebrow{font-size:13px}
.hero-search{margin:22px 0 0}
.hero-search input{min-height:48px}

/* 3. the hero carried five competing first actions. Search is the hero's one
      job; the other two move to a strip directly beneath it. */
.hero-copy .btn-row{display:none}
.action-strip{background:var(--navy);color:#fff}
.action-strip ul{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:0;padding:0;list-style:none;
  background:rgba(255,255,255,.18)}
.action-strip a{display:flex;align-items:center;justify-content:center;gap:9px;min-height:60px;
  background:var(--navy);color:#fff;text-decoration:none;font-weight:700;padding:12px 16px;text-align:center}
.action-strip a:hover{background:var(--navy-700);text-decoration:underline}
.action-strip a:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}

/* 4. result cards were 240-300px tall. Twenty of those is a wall, not a list. */
.res-list{gap:12px}
.res-card{padding:20px 22px}
.res-card h3{font-size:21px;line-height:1.3;margin:0 0 7px}
.res-meta{font-size:14.5px;margin:0 0 7px;gap:6px 12px}
.res-card .res-abstract{font-size:16px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.res-tags{margin-top:9px}
.res-tags li{font-size:13px}

/* 5. the results column was floating in an over-wide container */
.res-list,.result-bar,.active-filters,.pager{max-width:880px}

/* 6. the Menu button is redundant once the full nav is visible */
@media (min-width:1181px){.menu-toggle{display:none}}

/* 7. mobile: no overlay card. Image block, then the panel beneath it — the
      overlay turned the phone view into a poster instead of a tool. */
@media (max-width:820px){
  .hero-shot{min-height:0;display:block}
  .hero-shot .hero-media{position:static;height:auto}
  .hero-shot .hero-media img{height:190px;opacity:1;object-position:60% 45%}
  .hero-shot .hero-inner{display:block;min-height:0;padding:0}
  .hero-copy{max-width:none;border-radius:0;border-left:none;border-top:4px solid var(--gold);
    padding:28px 24px;box-shadow:none}
  .hero-copy h1{font-size:40px}
  .hero-copy p{font-size:18px}
  .section{padding:44px 0}
  .breadcrumb{padding:7px 0}
  .action-strip ul{grid-template-columns:1fr}
}

/* mobile filter disclosure — search stays, the rest collapses */
.filter-bar{display:none}
.res-tags .more{background:transparent;color:var(--gold-700);font-weight:700}
@media (max-width:820px){
  .filter-bar{display:flex;gap:10px;align-items:center;margin:0 0 12px}
  .filter-bar button{flex:0 0 auto;min-height:48px;padding:0 18px;border:1px solid var(--navy);
    background:var(--navy);color:#fff;border-radius:var(--radius-sm);font:inherit;font-weight:700;cursor:pointer}
  .filter-bar button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
  .facets.facets-collapsed > div:not(.facet-q){display:none}
  .facets{padding:14px}
  .section-head h1{font-size:38px}
  .section-head p{font-size:18px}
}

/* chips stay on one row *inside a result card*; a long taxonomy path must not
   triple the row height. Off the card — the dossier, topic pages — they wrap
   and show in full, which is where the reader actually wants the whole label. */
.res-card .res-tags{flex-wrap:nowrap;overflow:hidden}
.res-card .res-tags li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:22ch;flex:0 1 auto}
.res-card h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

@media (max-width:820px){
  /* the library intro was 360px of headline and prose before a single result */
  .section-head h1{font-size:34px;margin:8px 0 10px}
  .section-head p{font-size:17px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;
    -webkit-box-orient:vertical;overflow:hidden}
  .section-head{margin-bottom:16px}
  .breadcrumb{padding:6px 0;font-size:.9rem}
}

/* ===== round 2 — the site read like a document, not a designed product =====
   Interior pages opened on a breadcrumb and a bare heading. Every one now
   opens on a banner with the page title set into it. */
.page-banner{position:relative;background:var(--bg-panel);overflow:hidden;
  border-bottom:1px solid var(--line)}
.page-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
.page-banner .container{position:relative;z-index:2;padding:46px 28px 48px;min-height:180px;
  display:flex;flex-direction:column;justify-content:center}
.page-banner .eyebrow{color:var(--gold-700);margin:0 0 8px}
.page-banner h1{margin:0;font-size:clamp(30px,3vw,42px);line-height:1.08;color:var(--ink);max-width:16ch}
.page-banner p{margin:12px 0 0;color:var(--body);font-size:17px;line-height:1.5;max-width:54ch}
/* each page shifts the artwork so the set does not look like one repeated image */
/* each page now has its own artwork, so no cropping tricks are needed */

/* designed section headers: eyebrow, short teal rule, heading */
.section-head .eyebrow{display:inline-block;margin:0 0 10px}
.section-head::before{content:"";display:block;width:52px;height:4px;background:var(--gold);
  border-radius:2px;margin-bottom:14px}
.section-head.center::before{margin-left:auto;margin-right:auto}

/* framed content — About and Accessibility were unbroken prose */
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 28px;margin:18px 0;box-shadow:var(--shadow)}
.panel h2{margin-top:0}
.panel-accent{border-left:5px solid var(--gold)}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:20px 0 24px;
  padding:0;list-style:none}
.stat-row li{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--navy);
  border-radius:var(--radius);padding:18px 20px}
.stat-row b{display:block;font:700 30px/1.1 Georgia,'Times New Roman',serif;color:var(--navy);margin-bottom:5px}
.stat-row span{font-size:14.5px;color:var(--body);line-height:1.4}

/* topic tiles gain an icon plate, per the mockup */
.topic-tile{background:var(--paper);border:1px solid var(--line);display:flex;gap:14px;align-items:flex-start;
  border-left:4px solid var(--gold)}
.topic-tile .ico{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--gold-tint);
  display:grid;place-items:center;color:var(--gold-700);font:700 17px/1 Georgia,serif}
.topic-tile .tt{min-width:0}

@media (max-width:820px){
  .page-banner .container{padding:30px 20px 32px;min-height:0}
  .page-banner img{opacity:.35}
  .page-banner h1{font-size:30px;max-width:none}
}

/* stat cards were ragged because the captions were different lengths */
.stat-row li{display:flex;flex-direction:column;justify-content:flex-start;min-height:118px}
.stat-row span{font-size:15px;color:var(--muted)}

/* topic tiles carry a square illustration where one exists */
.topic-tile .ico-art{flex:0 0 auto;width:58px;height:58px;border-radius:var(--radius-sm);display:block}
@media (max-width:820px){.topic-tile .ico-art{width:48px;height:48px}}
/* letter plates match the artwork footprint so the grid stays one system */
.topic-tile .ico{width:58px;height:58px;border-radius:var(--radius-sm);font-size:19px}
@media (max-width:820px){.topic-tile .ico{width:48px;height:48px;font-size:17px}}

/* topics grid was leaving a dead column at 1440 */
.topic-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* ===== resource rows =====
   The mockup was right: at twenty results a row beats a card. Icon, title,
   one meta line, taxonomy right-aligned. */
.res-list{max-width:none}
.res-card{display:grid;grid-template-columns:44px 1fr auto;gap:0 16px;align-items:start;
  padding:16px 20px}
.res-card .rt-ico{grid-row:1/span 3;width:40px;height:40px;border-radius:var(--radius-sm);
  background:var(--gold-tint);color:var(--gold-700);display:grid;place-items:center;
  font:700 15px/1 -apple-system,Arial,sans-serif}
.res-card h3{grid-column:2;margin:0 0 4px;font-size:18px;line-height:1.35;-webkit-line-clamp:2}
.res-card .res-meta{grid-column:2;margin:0;font-size:14px;font-weight:600}
.res-card .res-abstract{grid-column:2;margin:6px 0 0;font-size:15px;line-height:1.5;-webkit-line-clamp:2}
.res-card .res-tags{grid-column:3;grid-row:1/span 2;margin:0;justify-content:flex-end;
  max-width:300px;flex-wrap:wrap}
@media (max-width:900px){
  .res-card{grid-template-columns:40px 1fr}
  .res-card .res-tags{grid-column:2;grid-row:auto;justify-content:flex-start;margin-top:9px;max-width:none}
}

/* =========================================================================
   ROUND 3 — section-by-section pass: depth system, motion, glass, buttons.
   Glass is used in exactly two places where it earns its keep: the hero card
   (imagery behind it) and the sticky metadata panel on a resource page.
   It is deliberately NOT used on content cards over flat ground.
   ========================================================================= */
:root{
  --purple-dark:#2b177d;
  --radius-md:16px;
  --radius-lg:24px;
  --glass-bg:rgba(255,255,255,.78);
  --glass-border:rgba(255,255,255,.72);
  --shadow-sm:0 1px 2px rgba(20,23,43,.05),0 8px 18px rgba(20,23,43,.05);
  --shadow-md:0 2px 4px rgba(20,23,43,.04),0 14px 34px rgba(20,23,43,.09);
  --shadow-hover:0 4px 8px rgba(20,23,43,.05),0 20px 44px rgba(20,23,43,.12);
  --ease-out:cubic-bezier(.2,.8,.2,1);
}

/* ---- 1. header: sticky, frosted only once you scroll ---- */
.site-header{position:sticky;top:0;z-index:1000}
.site-header .header-inner{transition:background .22s ease,box-shadow .22s ease,backdrop-filter .22s ease}
.site-header.is-scrolled .header-inner{background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px) saturate(145%);-webkit-backdrop-filter:blur(16px) saturate(145%);
  box-shadow:0 10px 30px rgba(20,23,43,.07)}
.nav-list a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;
  border-radius:2px;font-weight:650;
  transition:background .18s ease,color .18s ease,transform .18s var(--ease-out)}
.nav-list a::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:3px;
  border-radius:0;background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .22s var(--ease-out)}
.nav-list a:hover{background:rgba(56,33,149,.055);transform:translateY(-1px)}
.nav-list a[aria-current=page]{background:rgba(56,33,149,.07);color:var(--navy)}
.nav-list a[aria-current=page]::after{transform:scaleX(1)}

/* ---- buttons: a real press, not a colour swap ---- */
.btn,.nav-search button{min-height:44px;border-radius:2px;font-weight:700;cursor:pointer;
  transition:transform .16s var(--ease-out),box-shadow .16s ease,background .16s ease}
.nav-search button{box-shadow:0 4px 0 rgba(20,23,43,.08)}
.nav-search button:hover{transform:translateY(-2px);box-shadow:0 7px 16px rgba(20,23,43,.13)}
.nav-search button:active{transform:translateY(1px);box-shadow:0 2px 0 rgba(20,23,43,.10)}
.btn-primary{box-shadow:0 5px 0 var(--purple-dark)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(56,33,149,.24)}
.btn-primary:active{transform:translateY(2px);box-shadow:0 2px 0 var(--purple-dark)}

/* ---- 2. hero: glass earns its place here, there is a photograph behind ---- */
.hero-shot{isolation:isolate}
.hero-shot::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(20,23,43,.38) 0%,rgba(20,23,43,.16) 42%,rgba(20,23,43,0) 68%)}
.hero-copy{width:min(560px,calc(100% - 48px));max-width:560px;padding:38px 40px 34px;
  border-radius:6px;background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);
  border:1px solid var(--glass-border);border-left:4px solid var(--gold);
  box-shadow:0 2px 4px rgba(20,23,43,.06),0 22px 56px rgba(20,23,43,.20);
  animation:heroCardIn .65s var(--ease-out) both}
@keyframes heroCardIn{from{opacity:0;transform:translateY(20px) scale(.985)}
  to{opacity:1;transform:none}}
.hero-shot .hero-media img{transform:scale(1.035) translate3d(0,var(--hero-shift,0px),0);
  transition:transform .12s linear}

/* ---- 3. action strip: a control deck, not footer navigation ---- */
.action-strip ul{background:transparent;border-top:1px solid rgba(255,255,255,.16)}
.action-strip a{justify-content:space-between;min-height:64px;padding:0 28px;
  border-right:1px solid rgba(255,255,255,.14);background:transparent;
  transition:background .18s ease,transform .18s var(--ease-out)}
.action-strip li:last-child a{border-right:0}
.action-strip a:hover{background:rgba(255,255,255,.09);transform:translateY(-2px);text-decoration:none}
.action-strip a::after{content:"\2192";opacity:.65;transform:translateX(0);
  transition:transform .18s var(--ease-out)}
.action-strip a:hover::after{transform:translateX(5px)}

/* ---- 4. topics: bigger art, a whisper of tilt, no glass ---- */
.topic-tile{min-height:144px;padding:18px 20px;border-radius:6px;box-shadow:var(--shadow-sm);
  transform-style:preserve-3d;
  transition:transform .22s var(--ease-out),box-shadow .22s ease,border-color .22s ease}
.topic-tile:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover);
  border-color:rgba(83,201,189,.65)}
.topic-tile .ico-art{width:72px;height:72px;border-radius:4px;transform:translateZ(12px)}

/* ---- 5. result rows: a record, with a type rail and receding taxonomy ---- */
.res-card{border-radius:6px;box-shadow:0 4px 16px rgba(20,23,43,.045);
  transition:transform .18s var(--ease-out),box-shadow .18s ease,border-color .18s ease}
.res-card:hover{transform:translateY(-2px);border-color:rgba(56,33,149,.22);
  box-shadow:0 10px 26px rgba(20,23,43,.08)}
.res-card .rt-ico{width:36px;height:36px;border-radius:4px;background:rgba(83,201,189,.17);
  color:#207a72;font-weight:800;font-size:13px}
.res-tags li{background:#eef0f6;color:#565b67;font-size:12px;line-height:1.2;
  border-radius:2px;padding:5px 8px}
.res-list.is-updating{opacity:.42;pointer-events:none}
.res-list{transition:opacity .15s ease}
@keyframes resultEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.res-card.is-entering{animation:resultEnter .28s var(--ease-out) both}

/* ---- scroll reveal, used sparingly ---- */
.reveal{opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}

/* ---- everything above is motion; honour the user's setting ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .hero-shot .hero-media img{transform:none}
}

.hero-shot .hero-copy{background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%)}

/* ---------------------------------------------------------------------
   Dee sets ul,ol{max-width:66ch} for prose readability. Every layout grid
   here is a <ul>, so that cap was silently squeezing them to ~707px inside
   a 1180px container — the dead space on the right was this rule, not the
   grid definitions. Layout lists opt out; prose lists keep the cap.
   --------------------------------------------------------------------- */
.topic-grid,.res-list,.stat-row,.res-tags,.active-filters,.pager,
.action-strip ul,.queue-tabs,.file-list,.audit-list,.footer-grid ul,.mm-panel ul,.nav-list{
  max-width:none;padding-left:0;list-style:none}

/* =========================================================================
   BUTTON SYSTEM — built from the design-system specimen sheet.
   Eight types, four states each. One deviation from the drawing: the focus
   ring is the darker teal (#30756E, 4.95:1 on the page ground) rather than
   the bright teal, which measures 1.84:1 and would fail the 3:1 that WCAG
   2.2 asks of a focus indicator. Same colour family, actually visible.
   ========================================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding:0 20px;border-radius:2px;border:1px solid transparent;
  font:inherit;font-weight:700;text-decoration:none;cursor:pointer;
  transition:background .16s var(--ease-out),border-color .16s ease,
             color .16s ease,transform .16s var(--ease-out),box-shadow .16s ease}

/* primary — the one task-oriented action on a page */
.btn-primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-primary:hover{background:#4a2fb8;border-color:#4a2fb8;color:#fff}
.btn-primary:active{background:#24135e;border-color:#24135e;transform:translateY(1px)}

/* secondary — supporting action */
.btn-outline{background:#fff;border-color:var(--navy);color:var(--navy)}
.btn-outline:hover{background:#eeebfa;color:var(--navy)}
.btn-outline:active{background:#ded8f4;transform:translateY(1px)}

/* ghost — lowest emphasis */
.btn-ghost{background:transparent;border-color:transparent;color:var(--navy)}
.btn-ghost:hover{background:#f1eefb}
.btn-ghost:active{background:#e3ddf7;transform:translateY(1px)}

.btn-sm{min-height:38px;padding:0 15px;font-size:.94rem}
.btn-lg{min-height:52px;padding:0 26px;font-size:1.05rem}

/* icon-only — teal plate, purple glyph */
.btn-icon{width:46px;min-height:46px;padding:0;background:var(--gold-tint);
  border-color:transparent;color:var(--navy)}
.btn-icon:hover{background:rgba(83,201,189,.32)}
.btn-icon:active{background:var(--gold);color:var(--ink)}

/* disabled — never a colour a live button also uses */
.btn:disabled,.btn[aria-disabled=true]{background:#e6e7ec;border-color:#e6e7ec;
  color:#9195a1;cursor:not-allowed;transform:none;box-shadow:none}

/* loading — the spinner is the only thing that moves */
.btn[data-loading]{pointer-events:none}
.btn[data-loading]::before{content:"";width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:btnSpin .7s linear infinite}
@keyframes btnSpin{to{transform:rotate(360deg)}}

/* link with an arrow that travels on hover */
.btn-link{min-height:38px;padding:0 6px;background:transparent;border-color:transparent;
  color:var(--navy);font-weight:700}
.btn-link::after{content:"\2192";transition:transform .18s var(--ease-out)}
.btn-link:hover{background:#f1eefb;text-decoration:underline}
.btn-link:hover::after{transform:translateX(5px)}

/* one focus treatment for everything that can take focus */
.btn:focus-visible,a:focus-visible,button:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,.chip:focus-visible{
  outline:3px solid var(--gold-700);outline-offset:2px;border-radius:2px}

@media (prefers-reduced-motion:reduce){
  .btn,.btn-link::after{transition:none}
  .btn[data-loading]::before{animation:none}
}

/* =========================================================================
   FRAMING — every photograph and every section is set into something, so
   the page reads as composed rather than as images dropped onto a column.
   Corners stay square: 2px on controls, 6px on plates. No pills.
   ========================================================================= */

/* skip link inherits Dee's 8px; square it with the rest */
.skip-link{border-radius:2px}

/* --- interior page banner: a plate, a rule, and a tick in the corner --- */
.page-banner{border-bottom:3px solid var(--navy)}
.page-banner::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(244,245,249,.97) 0%,rgba(244,245,249,.90) 46%,
             rgba(244,245,249,.28) 74%,rgba(244,245,249,0) 100%)}
.page-banner .container::before{content:"";position:absolute;left:28px;top:34px;
  width:34px;height:34px;border-left:3px solid var(--gold);border-top:3px solid var(--gold)}
.page-banner .container{padding-top:58px}
.page-banner .eyebrow{position:relative;padding-left:2px}

/* --- full-bleed photo band: an inset hairline so it reads as a plate --- */
.photo-band{border-top:3px solid var(--gold);border-bottom:3px solid var(--gold)}
.photo-band::after{content:"";position:absolute;inset:16px;z-index:2;pointer-events:none;
  border:1px solid rgba(255,255,255,.34)}
.photo-band-copy .eyebrow::before{content:"";display:inline-block;width:26px;height:2px;
  background:var(--gold);vertical-align:middle;margin-right:10px}

/* --- hero frame: matches the band so the two read as one system --- */
.hero-shot{border-bottom:3px solid var(--gold)}

/* --- a reusable framed figure for any page that wants one --- */
.plate{margin:26px 0;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:12px;box-shadow:var(--shadow-sm)}
.plate img{display:block;width:100%;height:auto;border-radius:2px}
.plate figcaption{margin:12px 4px 2px;font-size:.92rem;color:var(--muted);
  border-left:3px solid var(--gold);padding-left:10px}

/* section heads already carry a gold rule from round 2 (.section-head::before) */

/* =========================================================================
   INTERACTIVENESS — feedback on everything that can be pressed, filtered
   or followed. Each is one property moving a small distance; nothing here
   runs without a pointer or a key behind it.
   ========================================================================= */

/* filter chips: lift, then press */
.chip{transition:background .16s ease,border-color .16s ease,transform .12s var(--ease-out),
      box-shadow .16s ease;cursor:pointer}
.chip:hover{background:rgba(83,201,189,.28);border-color:var(--gold-700);transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(20,23,43,.08)}
.chip:active{transform:translateY(1px);box-shadow:none}

/* pager: current page sits down in the page, others lift */
.pager button{transition:background .16s ease,color .16s ease,transform .14s var(--ease-out),
  border-color .16s ease}
.pager button:hover:not(:disabled){background:var(--navy);border-color:var(--navy);color:#fff;
  transform:translateY(-2px)}
.pager button:active:not(:disabled){transform:translateY(1px)}
.pager button[aria-current=page]{background:var(--navy);border-color:var(--navy);color:#fff}
.pager button:disabled{opacity:.42;cursor:not-allowed}

/* result rows: the type badge warms and the title underlines together */
.res-card .rt-ico{transition:background .2s ease,color .2s ease,transform .2s var(--ease-out)}
.res-card:hover .rt-ico{background:var(--navy);color:#fff;transform:scale(1.06)}
.res-card h3 a{text-decoration-color:transparent;text-underline-offset:3px;
  transition:text-decoration-color .18s ease}
.res-card:hover h3 a{text-decoration:underline;text-decoration-color:currentColor}

/* tags recede until you reach for them */
.res-tags li{transition:background .16s ease,color .16s ease}
.res-card:hover .res-tags li{background:rgba(83,201,189,.20);color:#25605a}

/* topic tiles: the accent edge draws in from the left on hover */
.topic-tile{position:relative;overflow:hidden}
.topic-tile::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle 120px at 84% 18%,color-mix(in srgb,var(--h) 9%,transparent) 0%,transparent 70%),
    radial-gradient(circle 60px at 12% 78%,color-mix(in srgb,var(--h) 11%,transparent) 0%,transparent 72%);
  transition:opacity .3s ease}
.topic-tile:hover::before{opacity:.65}

/* form fields answer when you land in them */
.field input,.field select,.field textarea,.facets input,.facets select{
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--gold-700)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--navy);box-shadow:0 0 0 3px rgba(56,33,149,.13)}

/* panels and callouts respond to a pointer without becoming buttons */
.panel,.callout{transition:box-shadow .2s ease,border-color .2s ease}
.panel:hover{box-shadow:var(--shadow-md)}

/* footer and inline links get the same underline behaviour everywhere */
.footer-grid a,.action-strip a,.res-meta a{text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .chip,.pager button,.res-card .rt-ico,.topic-tile::before{transition:none}
  .topic-tile::before{transform:scaleY(1)}
}

/* --- spacing repairs found by looking at the rendered pages --- */
/* A banner already ends in 48px of its own padding; another 72px of section
   above the first control left a band of empty ground on every interior page. */
.page-banner + .section,.photo-band + .section{padding-top:34px}
.page-banner + .section > .container > .section-head:first-child{margin-top:0}

/* Six filters in an auto-fit grid landed 5 across and orphaned Language on a
   row of its own. Two balanced rows of three instead. */
@media (min-width:900px){
  .facets{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 20px}
}

/* The scrim was doing more than it needed to and drained the artwork. */
.page-banner::before{
  background:linear-gradient(90deg,rgba(244,245,249,.96) 0%,rgba(244,245,249,.86) 34%,
             rgba(244,245,249,.30) 58%,rgba(244,245,249,0) 80%)}

/* =========================================================================
   RESOURCE DOSSIER — the detail page was a stack of prose with a metadata
   grid whose labels and values had drifted apart. It is now a record: a
   headed plate, a reading column, and a panel that stays with you.
   ========================================================================= */
.dossier-head{background:var(--bg-panel);border-bottom:3px solid var(--navy);
  position:relative;overflow:hidden}
.dossier-head::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold) 22%,transparent 22%)}
.dossier-head .container{display:flex;gap:20px;align-items:flex-start;padding:40px 28px 34px}
.dossier-badge{flex:0 0 auto;display:grid;place-items:center;width:56px;height:56px;
  border-radius:var(--radius-sm);background:var(--navy);color:#fff;
  font-weight:800;font-size:18px;letter-spacing:.02em}
.dossier-kicker{margin:0 0 8px;color:var(--gold-700);font-weight:650}
.dossier-head h1{margin:0;font-size:clamp(26px,2.5vw,38px);line-height:1.15;
  color:var(--ink);max-width:24ch}

.dossier-body{display:grid;gap:40px;grid-template-columns:minmax(0,1fr) 340px;
  align-items:start;padding-top:38px;padding-bottom:56px}
.dossier-main h2{margin:30px 0 10px}
.dossier-main h2:first-child{margin-top:0}
.dossier-main .lede{margin:0;font-size:1.12rem;line-height:1.7;color:var(--body);max-width:64ch}

/* the panel: frosted, square, and it follows you down a long record */
.dossier-panel{position:sticky;top:96px;background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);
  border:1px solid var(--glass-border);border-top:4px solid var(--gold);
  border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-md)}
.dossier-go{width:100%;margin-bottom:16px;gap:10px}
.dossier-go span{font-size:1.1em;transition:transform .18s var(--ease-out)}
.dossier-go:hover span{transform:translate(3px,-3px)}
.dossier-panel .file-list{margin:0 0 16px}
.dossier-back{margin:18px 0 0}

/* labels above values, one pair per row — the pairing cannot drift again */
.detail-meta.stacked{display:block;background:none;padding:0;border:0}
.detail-meta.stacked>div{padding:11px 0;border-top:1px solid var(--line)}
.detail-meta.stacked>div:first-child{border-top:0;padding-top:0}
.detail-meta.stacked dt{margin-bottom:3px}
.detail-meta.stacked dd{font-size:.97rem;line-height:1.45}
.detail-meta.stacked dd a{color:var(--navy);text-decoration:underline;
  text-decoration-color:rgba(56,33,149,.3);text-underline-offset:2px}
.detail-meta.stacked dd a:hover{text-decoration-color:currentColor}

/* subtopic chips lead somewhere — each opens the library filtered to it */
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip-row li{background:none;padding:0}
.chip-link{text-decoration:none;color:var(--ink);padding:6px 11px;font-size:.9rem}
.chip-link:hover{text-decoration:none}

@media (max-width:980px){
  .dossier-body{grid-template-columns:minmax(0,1fr);gap:28px}
  .dossier-panel{position:static}
  .dossier-head .container{padding:30px 22px 26px}
  .dossier-badge{width:46px;height:46px;font-size:16px}
}

/* --- related records: three cards, each saying why it is here --- */
.rel-list{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  margin:14px 0 0;padding:0;list-style:none;max-width:none}
.rel-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  border-top:3px solid var(--gold);padding:16px 17px;box-shadow:var(--shadow-sm);
  transition:transform .18s var(--ease-out),box-shadow .18s ease,border-color .18s ease}
.rel-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);
  border-color:rgba(56,33,149,.2);border-top-color:var(--gold)}
.rel-why{margin:0 0 8px;font-size:.74rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold-700)}
.rel-card h3{margin:0 0 7px;font-size:1rem;line-height:1.35}
.rel-card h3 a{color:var(--navy);text-decoration:none}
.rel-card:hover h3 a{text-decoration:underline;text-underline-offset:3px}
.rel-card .res-meta{margin:0;font-size:.85rem}

/* the accent bar was floating free above the plate; sit it flush across it */
.dossier-head::before{height:4px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold) 34%,rgba(83,201,189,.28) 34%,
             rgba(83,201,189,.28) 100%)}

/* =========================================================================
   IMAGE-FUSED COMPONENTS — a control and a photograph as one object.
   The picture is not decoration beside the button; the picture IS the button.
   ========================================================================= */
.img-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  margin:0;padding:0;list-style:none;max-width:none}
.img-action{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:236px;padding:24px 26px 22px;overflow:hidden;isolation:isolate;
  color:#fff;text-decoration:none;background:var(--navy)}
.img-action img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transform:scale(1.02);transition:transform .55s var(--ease-out),filter .45s ease}
.img-action::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,23,43,.10) 0%,rgba(20,23,43,.58) 52%,
             rgba(28,17,84,.90) 100%);transition:opacity .35s ease}
.img-action::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease-out)}
.img-action .ia-eyebrow{margin:0 0 6px;font-size:.76rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold)}
.img-action .ia-title{margin:0;font-size:1.32rem;line-height:1.25;font-weight:700;
  display:flex;align-items:center;gap:10px}
.img-action .ia-title span{transition:transform .28s var(--ease-out)}
.img-action .ia-note{margin:7px 0 0;font-size:.95rem;line-height:1.45;color:#dfe2ef;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .35s var(--ease-out),opacity .3s ease,margin .35s ease}
.img-action:hover img,.img-action:focus-visible img{transform:scale(1.09)}
.img-action:hover::before{opacity:.92}
.img-action:hover::after,.img-action:focus-visible::after{transform:scaleX(1)}
.img-action:hover .ia-title span{transform:translateX(6px)}
.img-action:hover .ia-note,.img-action:focus-visible .ia-note{max-height:5em;opacity:1;margin-top:9px}
.img-action:focus-visible{outline:3px solid var(--gold);outline-offset:-5px}
@media (max-width:860px){
  .img-actions{grid-template-columns:1fr}
  .img-action{min-height:180px}
  .img-action .ia-note{max-height:5em;opacity:1;margin-top:9px}
}

/* --- surfaces: gradient and light, so a button is an object not a swatch --- */
.btn-primary{background:linear-gradient(180deg,#472bb8 0%,var(--navy) 62%,#311c86 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 3px rgba(20,23,43,.16),
             0 8px 20px rgba(56,33,149,.22)}
.btn-primary:hover{background:linear-gradient(180deg,#5334cf 0%,#44289f 62%,#3a219a 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 4px 6px rgba(20,23,43,.16),
             0 14px 30px rgba(56,33,149,.30)}
.btn-primary:active{background:linear-gradient(180deg,#311c86 0%,#3a219a 100%);
  box-shadow:inset 0 2px 5px rgba(12,6,44,.40)}
.btn-accent{background:linear-gradient(180deg,#63d9cd 0%,var(--gold) 60%,#3fb8ab 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 2px 3px rgba(20,23,43,.12),
             0 8px 18px rgba(48,117,110,.22)}
.btn-accent:hover{background:linear-gradient(180deg,#72e3d7 0%,#4ac2b6 60%,#38a99c 100%)}
.nav-search button{background:linear-gradient(180deg,#63d9cd 0%,var(--gold) 60%,#3fb8ab 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 3px 8px rgba(48,117,110,.20)}

/* the hero plate was a flat white rectangle; give it light and a seam */
.hero-shot .hero-copy{background:
   linear-gradient(135deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.86) 55%,rgba(238,241,250,.82) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 6px rgba(20,23,43,.08),
             0 28px 64px rgba(20,23,43,.24)}

/* =========================================================================
   TOPIC CARDS — icon, words and photograph as one object. The photograph
   sits in the right half and is masked into the tint, so there is no seam
   between picture and panel; the whole card is the control.
   Each topic carries its own hue so eleven cards read as eleven subjects.
   ========================================================================= */
.topic-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  margin:0;padding:0;list-style:none;max-width:none}

.topic-tile{--h:#382195;--h-soft:#efecfb;--h-ink:#2a1a72;
  position:relative;display:block;min-height:210px;padding:0;overflow:hidden;
  border:1px solid rgba(20,23,43,.06);border-radius:14px;isolation:isolate;
  background:
    radial-gradient(90% 120% at 6% 4%,color-mix(in srgb,var(--h) 20%,#fff) 0%,transparent 58%),
    radial-gradient(70% 95% at 2% 96%,color-mix(in srgb,var(--h) 13%,#fff) 0%,transparent 60%),
    radial-gradient(60% 80% at 46% 50%,rgba(255,255,255,.92) 0%,transparent 70%),
    linear-gradient(104deg,var(--h-soft) 0%,#fff 66%);
  box-shadow:0 1px 2px rgba(20,23,43,.04),0 14px 34px rgba(20,23,43,.09);
  transition:transform .28s var(--ease-out),box-shadow .28s ease,border-color .28s ease}
.topic-tile:hover,.topic-tile:focus-within{transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--h) 30%,transparent);
  box-shadow:0 3px 6px rgba(20,23,43,.06),0 22px 48px rgba(20,23,43,.14)}

/* the photograph: right half, dissolved into the tint rather than cropped */
.tc-photo{position:absolute;inset:0 0 0 36%;z-index:0;overflow:hidden}
.tc-photo img{width:100%;height:100%;object-fit:cover;object-position:64% 50%;display:block;
  -webkit-mask-image:radial-gradient(135% 125% at 108% 48%,#000 34%,rgba(0,0,0,.72) 52%,
     rgba(0,0,0,.22) 68%,transparent 82%);
  mask-image:radial-gradient(135% 125% at 108% 48%,#000 34%,rgba(0,0,0,.72) 52%,
     rgba(0,0,0,.22) 68%,transparent 82%);
  transform:scale(1.03);transition:transform .6s var(--ease-out)}
.topic-tile:hover .tc-photo img{transform:scale(1.09)}

.tc-copy{position:relative;z-index:1;display:block;padding:22px 24px 20px;max-width:56%}
.tc-badge{position:relative;display:grid;place-items:center;width:66px;height:66px;
  border-radius:50%;overflow:hidden;background:#fff;
  box-shadow:0 0 0 5px rgba(255,255,255,.8),
             0 0 0 10px color-mix(in srgb,var(--h) 12%,transparent),
             0 8px 20px rgba(20,23,43,.16);
  margin-bottom:17px}
.tc-badge img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.tc-badge-text{font-weight:800;color:var(--h-ink);font-size:17px;letter-spacing:.02em}

.topic-tile a.tc-title{display:block;font-size:clamp(24px,2.1vw,32px);line-height:1.06;
  text-wrap:balance;
  font-weight:800;letter-spacing:-.02em;color:var(--h-ink);text-decoration:none;margin-bottom:8px}
/* the whole card is the hit area; the anchor is what carries the accessible name */
.tc-title::after{content:"";position:absolute;inset:0;z-index:2}
.topic-tile:hover .tc-title{text-decoration:underline;text-underline-offset:3px}
.tc-blurb{margin:0 0 15px;font-size:1rem;line-height:1.45;color:#3f4353;max-width:30ch}
.tc-foot{display:flex;align-items:center;gap:12px}
.tc-count{font-size:1.02rem;font-weight:800;color:var(--h-ink)}
.tc-go{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:linear-gradient(145deg,color-mix(in srgb,var(--h) 78%,#fff) 0%,var(--h) 52%,var(--h-ink) 100%);
  color:#fff;font-size:16px;line-height:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 5px 14px color-mix(in srgb,var(--h) 45%,transparent);
  transition:transform .24s var(--ease-out),box-shadow .24s ease}
.topic-tile:hover .tc-go{transform:translateX(5px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 20px color-mix(in srgb,var(--h) 55%,transparent)}
.topic-tile:focus-within{outline:3px solid var(--gold-700);outline-offset:3px}
.tc-title:focus-visible{outline:none}

/* hues */
.topic-tile.h-teal  {--h:#2f9c92;--h-soft:#e3f5f2;--h-ink:#1d6b64}
.topic-tile.h-green {--h:#2f8f5b;--h-soft:#e6f4ec;--h-ink:#20623f}
.topic-tile.h-indigo{--h:#4a44c4;--h-soft:#ecebfb;--h-ink:#332e96}
.topic-tile.h-sand  {--h:#a07a2c;--h-soft:#f6f0e2;--h-ink:#6f5318}
.topic-tile.h-blue  {--h:#2b6fd0;--h-soft:#e6eefb;--h-ink:#1d4d94}
.topic-tile.h-lilac {--h:#8d4bbd;--h-soft:#f3eafa;--h-ink:#63318a}
.topic-tile.h-amber {--h:#c9691f;--h-soft:#fbeee1;--h-ink:#8f4915}
.topic-tile.h-violet{--h:#6b3fd0;--h-soft:#efeafc;--h-ink:#4a2a96}
.topic-tile.h-rose  {--h:#c0417a;--h-soft:#fbe9f1;--h-ink:#8b2a56}

@media (max-width:640px){
  .topic-grid{grid-template-columns:1fr}
  .tc-copy{max-width:74%;padding:18px 18px 16px}
  .tc-photo{inset:0 0 0 52%}
  .tc-badge{width:50px;height:50px;margin-bottom:9px}
  .tc-badge img{width:32px;height:32px}
}

/* =========================================================================
   FEATURE CARDS — "New in the clearinghouse". Same fusion as the topic
   cards but taller: badge, type pill, source line, title, blurb, and a call
   to action worded for the thing itself. Photograph dissolved in from the
   right so the picture and the panel are one surface.
   ========================================================================= */
.feat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;
  flex-wrap:wrap;margin-bottom:26px}
.feat-head .eyebrow{margin-bottom:6px}
.feat-head h2{margin:0}
.feat-sub{margin:10px 0 0;font-size:1.06rem;color:var(--body);max-width:48ch}
.feat-tag{margin:6px 0 0;text-align:right;font-size:1.22rem;line-height:1.45;
  font-style:italic;color:#7e83a0;max-width:15ch}
.feat-tag span{display:inline-block;padding-bottom:5px;
  border-bottom:2px solid rgba(83,201,189,.55)}

.feat-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(430px,1fr));
  margin:0;padding:0;list-style:none;max-width:none}
.feat-card{--h:#382195;--h-soft:#efecfb;--h-ink:#2a1a72;
  position:relative;display:block;min-height:280px;overflow:hidden;isolation:isolate;
  border:1px solid rgba(20,23,43,.07);border-radius:12px;
  background:linear-gradient(112deg,var(--h-soft) 0%,var(--h-soft) 40%,rgba(255,255,255,.6) 76%,rgba(255,255,255,.25) 100%);
  box-shadow:0 1px 2px rgba(20,23,43,.05),0 12px 30px rgba(20,23,43,.08);
  transition:transform .3s var(--ease-out),box-shadow .3s ease,border-color .3s ease}
.feat-card:hover,.feat-card:focus-within{transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--h) 32%,transparent);
  box-shadow:0 4px 8px rgba(20,23,43,.07),0 26px 56px rgba(20,23,43,.15)}

.fc-photo{position:absolute;inset:0 0 0 44%;z-index:0;overflow:hidden}
.fc-photo img{width:100%;height:100%;object-fit:cover;object-position:64% 50%;display:block;
  -webkit-mask-image:linear-gradient(100deg,transparent 0%,rgba(0,0,0,.3) 16%,#000 50%);
  mask-image:linear-gradient(100deg,transparent 0%,rgba(0,0,0,.3) 16%,#000 50%);
  transform:scale(1.03);transition:transform .6s var(--ease-out)}
.feat-card:hover .fc-photo img{transform:scale(1.08)}

.fc-copy{position:relative;z-index:1;display:block;padding:22px 24px 24px;max-width:60%}
.fc-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.fc-ico{display:grid;place-items:center;flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#fff 0%,rgba(255,255,255,.7) 60%,rgba(255,255,255,.3) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 12px rgba(20,23,43,.12);
  color:var(--h-ink);font-weight:800;font-size:14px}
.fc-type{display:inline-block;padding:5px 12px;border-radius:999px;font-size:.8rem;
  font-weight:700;letter-spacing:.02em;color:var(--h-ink);
  background:color-mix(in srgb,var(--h) 16%,#fff)}
.fc-meta{margin:0 0 8px;font-size:.88rem;font-weight:650;color:#5d6276}
.feat-card a.fc-title{display:block;font-size:clamp(20px,1.7vw,25px);line-height:1.18;
  font-weight:800;letter-spacing:-.015em;color:var(--ink);text-decoration:none;margin-bottom:9px}
.feat-card a.fc-title::after{content:"";position:absolute;inset:0;z-index:2}
.feat-card:hover a.fc-title{text-decoration:underline;text-underline-offset:3px}
.fc-blurb{margin:0 0 16px;font-size:.96rem;line-height:1.5;color:#41465a;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fc-cta{display:inline-flex;align-items:center;gap:11px;min-height:46px;padding:0 8px 0 20px;
  border-radius:999px;color:#fff;font-weight:700;
  background:linear-gradient(135deg,color-mix(in srgb,var(--h) 82%,#fff) 0%,var(--h) 55%,var(--h-ink) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 16px color-mix(in srgb,var(--h) 38%,transparent);
  transition:box-shadow .22s ease,transform .22s var(--ease-out)}
.feat-card:hover .fc-cta{transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 10px 24px color-mix(in srgb,var(--h) 46%,transparent)}
.fc-go{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.22);font-size:15px;transition:transform .24s var(--ease-out)}
.feat-card:hover .fc-go{transform:translateX(4px)}
.feat-card:focus-within{outline:3px solid var(--gold-700);outline-offset:3px}
.fc-title:focus-visible{outline:none}

.feat-card.h-teal  {--h:#2f9c92;--h-soft:#e4f5f2;--h-ink:#1c6a63}
.feat-card.h-blue  {--h:#2b6fd0;--h-soft:#e7eefb;--h-ink:#1d4d94}
.feat-card.h-indigo{--h:#4a44c4;--h-soft:#ecebfb;--h-ink:#332e96}
.feat-card.h-violet{--h:#6b3fd0;--h-soft:#efeafc;--h-ink:#4a2a96}
.feat-card.h-amber {--h:#c9691f;--h-soft:#fbeee1;--h-ink:#8f4915}

@media (max-width:760px){
  .feat-grid{grid-template-columns:1fr}
  .fc-copy{max-width:74%;padding:18px 18px 20px}
  .fc-photo{inset:0 0 0 58%}
  .feat-tag{display:none}
  .feat-head{margin-bottom:18px}
}

/* =========================================================================
   RESULT ROWS — findable by eye. 329 rows of prose is the hardest surface
   on the site to scan, so each row carries its type twice: as a coloured
   plate on the left and as a named pill next to the title. Colour is never
   the only cue — the word is always beside it.
   ========================================================================= */
.res-card{--h:#4f5468;--h-soft:#eef0f5;--h-ink:#3b3f52;
  grid-template-columns:52px 1fr auto;gap:0 18px;padding:18px 22px;
  border-left:4px solid var(--h);
  background:linear-gradient(100deg,color-mix(in srgb,var(--h-soft) 70%,#fff) 0%,#fff 32%)}
.res-card .rt-ico{width:46px;height:46px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#fff 0%,color-mix(in srgb,var(--h-soft) 88%,#fff) 62%,
             color-mix(in srgb,var(--h) 20%,#fff) 100%);
  color:var(--h-ink);font-weight:800;font-size:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 9px rgba(20,23,43,.10)}
.res-card:hover .rt-ico{background:var(--h);color:#fff}
.res-card h3{grid-column:2;margin:0 0 5px}
.res-card h3 a{color:var(--ink)}
.rt-pill{grid-column:2;justify-self:start;display:inline-block;margin:0 0 7px;
  padding:4px 11px;border-radius:999px;font-size:.76rem;font-weight:700;letter-spacing:.02em;
  color:var(--h-ink);background:color-mix(in srgb,var(--h) 15%,#fff)}
.res-card .res-meta{grid-column:2;color:#5d6276}
.res-card .res-abstract{grid-column:2}
.res-card .res-tags{grid-row:1/span 4}
.res-card:hover{border-left-color:var(--h);
  box-shadow:0 3px 7px rgba(20,23,43,.05),0 16px 34px rgba(20,23,43,.10)}

.res-card.h-violet{--h:#6b3fd0;--h-soft:#efeafc;--h-ink:#4a2a96}
.res-card.h-teal  {--h:#2f9c92;--h-soft:#e4f5f2;--h-ink:#1c6a63}
.res-card.h-indigo{--h:#4a44c4;--h-soft:#ecebfb;--h-ink:#332e96}
.res-card.h-blue  {--h:#2b6fd0;--h-soft:#e7eefb;--h-ink:#1d4d94}
.res-card.h-amber {--h:#c9691f;--h-soft:#fbeee1;--h-ink:#8f4915}
.res-card.h-slate {--h:#5b6076;--h-soft:#eef0f5;--h-ink:#3b3f52}

@media (max-width:900px){
  .res-card{grid-template-columns:46px 1fr}
  .res-card .res-tags{grid-row:auto}
}

/* a legend above the list, so the colours are declared rather than guessed */
.type-key{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin:0 0 14px;
  padding:0;list-style:none;max-width:none;font-size:.86rem;color:#5d6276}
.type-key li{display:inline-flex;align-items:center;gap:7px}
.type-key i{width:11px;height:11px;border-radius:3px;display:inline-block}
.type-key .k-violet i{background:#6b3fd0}.type-key .k-teal i{background:#2f9c92}
.type-key .k-indigo i{background:#4a44c4}.type-key .k-blue i{background:#2b6fd0}
.type-key .k-amber i{background:#c9691f}.type-key .k-slate i{background:#5b6076}

/* =========================================================================
   AT A GLANCE — the three columns were grey chips that did nothing. Each
   row is now a link into the library, with a bar drawn to the scale of its
   own column so the shape of the collection reads at a glance.
   ========================================================================= */
.glance{padding-top:26px}
.glance-grid{gap:34px 40px}
.glance-col h3{margin:0 0 14px;font-size:1.12rem;letter-spacing:-.01em;
  padding-bottom:10px;border-bottom:2px solid var(--line)}
.stat-rows{margin:0;padding:0;list-style:none;max-width:none;display:grid;gap:3px}
.stat-row-i{--h:#5b6076;--h-soft:#eef0f5;--h-ink:#3b3f52}
.stat-row-i a{position:relative;display:grid;grid-template-columns:1fr auto;
  align-items:center;gap:6px 12px;padding:10px 12px 13px;border-radius:4px;
  color:var(--ink);text-decoration:none;
  transition:background .16s ease,transform .16s var(--ease-out)}
.stat-row-i a:hover{background:color-mix(in srgb,var(--h-soft) 78%,#fff);transform:translateX(3px)}
.sr-name{font-size:.98rem;font-weight:600;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.stat-row-i a:hover .sr-name{text-decoration:underline;text-underline-offset:3px}
.sr-n{font-size:1rem;font-weight:800;color:var(--h-ink);font-variant-numeric:tabular-nums}
.sr-bar{grid-column:1/-1;display:block;height:5px;border-radius:3px;background:var(--line);
  overflow:hidden}
.sr-bar i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--h) 65%,#fff),var(--h));
  transform-origin:left;animation:barIn .7s var(--ease-out) both}
@keyframes barIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.stat-row-i.h-violet{--h:#6b3fd0;--h-soft:#efeafc;--h-ink:#4a2a96}
.stat-row-i.h-teal  {--h:#2f9c92;--h-soft:#e4f5f2;--h-ink:#1c6a63}
.stat-row-i.h-indigo{--h:#4a44c4;--h-soft:#ecebfb;--h-ink:#332e96}
.stat-row-i.h-blue  {--h:#2b6fd0;--h-soft:#e7eefb;--h-ink:#1d4d94}
.stat-row-i.h-amber {--h:#c9691f;--h-soft:#fbeee1;--h-ink:#8f4915}
.stat-row-i.h-slate {--h:#5b6076;--h-soft:#eef0f5;--h-ink:#3b3f52}

@media (prefers-reduced-motion:reduce){.sr-bar i{animation:none}}

/* bar widths as classes — see build.py; the CSP forbids style attributes */
.sr-bar i.w5{width:5%}.sr-bar i.w10{width:10%}.sr-bar i.w15{width:15%}.sr-bar i.w20{width:20%}.sr-bar i.w25{width:25%}.sr-bar i.w30{width:30%}.sr-bar i.w35{width:35%}.sr-bar i.w40{width:40%}.sr-bar i.w45{width:45%}.sr-bar i.w50{width:50%}.sr-bar i.w55{width:55%}.sr-bar i.w60{width:60%}.sr-bar i.w65{width:65%}.sr-bar i.w70{width:70%}.sr-bar i.w75{width:75%}.sr-bar i.w80{width:80%}.sr-bar i.w85{width:85%}.sr-bar i.w90{width:90%}.sr-bar i.w95{width:95%}.sr-bar i.w100{width:100%}.sr-bar i.w4{width:4%}

/* =========================================================================
   TOPIC CARDS v2 — the card is a composition, not a tinted box. A coloured
   bloom behind the badge, a curved arc cutting the field, the photograph
   masked on an arc, and the words carried on a frosted glass plate that
   overlaps the picture. Everything that moves on hover moves together.
   ========================================================================= */
.topic-tile{border-radius:18px;min-height:238px;
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 1px 2px rgba(20,23,43,.04),0 18px 42px rgba(20,23,43,.10),
             inset 0 1px 0 rgba(255,255,255,.85)}

/* the field: three colour blooms and a white core, so the ground has light in it */
.topic-tile{background:
    radial-gradient(78% 105% at 4% 2%,color-mix(in srgb,var(--h) 26%,#fff) 0%,transparent 56%),
    radial-gradient(62% 88% at 0% 100%,color-mix(in srgb,var(--h) 17%,#fff) 0%,transparent 58%),
    radial-gradient(52% 70% at 44% 46%,#fff 0%,rgba(255,255,255,.35) 60%,transparent 78%),
    linear-gradient(106deg,var(--h-soft) 0%,#fdfdff 70%)}

/* curved geometry: one big arc sweeping out of the corner, one soft orb */
.topic-tile::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle 150px at 90% 8%,color-mix(in srgb,var(--h) 16%,transparent) 0%,transparent 68%),
    radial-gradient(circle 86px at 6% 88%,color-mix(in srgb,var(--h) 20%,transparent) 0%,transparent 70%);
  transition:opacity .35s ease,transform .5s var(--ease-out)}
.topic-tile::after{content:"";position:absolute;z-index:0;pointer-events:none;
  left:-22%;top:-58%;width:118%;height:150%;border-radius:50%;
  border:1.5px solid color-mix(in srgb,var(--h) 22%,transparent);
  transition:transform .55s var(--ease-out)}
.topic-tile:hover::after{transform:translate(6px,-6px) scale(1.03)}
.topic-tile:hover::before{transform:scale(1.06)}

/* the photograph, cut on an arc rather than a straight edge */
.tc-photo{inset:0 0 0 30%}
.tc-photo img{
  -webkit-mask-image:radial-gradient(128% 132% at 112% 50%,#000 30%,rgba(0,0,0,.78) 48%,
     rgba(0,0,0,.3) 66%,transparent 84%);
  mask-image:radial-gradient(128% 132% at 112% 50%,#000 30%,rgba(0,0,0,.78) 48%,
     rgba(0,0,0,.3) 66%,transparent 84%)}

/* the words ride on frosted glass that overlaps the picture */
.tc-copy{max-width:60%;margin:16px 0 16px 16px;padding:20px 22px 18px;
  border-radius:14px;
  background:linear-gradient(150deg,rgba(255,255,255,.76) 0%,rgba(255,255,255,.52) 100%);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 28px rgba(20,23,43,.10);
  transition:background .3s ease,box-shadow .3s ease}
.topic-tile:hover .tc-copy{
  background:linear-gradient(150deg,rgba(255,255,255,.84) 0%,rgba(255,255,255,.6) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 16px 38px rgba(20,23,43,.14)}

/* the badge sits in its own coloured glow */
.tc-badge{width:60px;height:60px;margin-bottom:15px;
  box-shadow:0 0 0 5px rgba(255,255,255,.85),
             0 0 26px 2px color-mix(in srgb,var(--h) 42%,transparent),
             0 8px 20px rgba(20,23,43,.14)}

@media (max-width:640px){
  .tc-copy{max-width:80%;margin:12px 0 12px 12px;padding:16px 16px 14px}
  .tc-photo{inset:0 0 0 48%}
}
@supports not (backdrop-filter:blur(2px)){
  .tc-copy{background:rgba(255,255,255,.92)}
}

/* =========================================================================
   PICTURE THUMBS — initials in a circle looked like a placeholder. Every
   thumbnail is a photograph of the kind of thing it stands for.
   ========================================================================= */
.res-card .rt-ico,.fc-ico{padding:0;overflow:hidden;background:none}
.res-card .rt-ico img,.fc-ico img{width:100%;height:100%;object-fit:cover;
  border-radius:50%;display:block}
.res-card .rt-ico{width:54px;height:54px;border-radius:50%;
  box-shadow:0 0 0 3px #fff,0 0 0 5px color-mix(in srgb,var(--h) 26%,transparent),
             0 6px 16px rgba(20,23,43,.14);
  transition:box-shadow .2s ease,transform .2s var(--ease-out)}
.res-card:hover .rt-ico{transform:scale(1.05);
  box-shadow:0 0 0 3px #fff,0 0 0 6px color-mix(in srgb,var(--h) 48%,transparent),
             0 8px 20px rgba(20,23,43,.18)}
.res-card{grid-template-columns:60px 1fr auto}
.fc-ico{width:50px;height:50px;
  box-shadow:0 0 0 3px #fff,0 0 0 6px color-mix(in srgb,var(--h) 26%,transparent),
             0 6px 16px rgba(20,23,43,.14)}
@media (max-width:900px){.res-card{grid-template-columns:54px 1fr}}

/* =========================================================================
   TOPICS — two to a row, rectangular, the picture taking the right half.
   ========================================================================= */
.topic-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.topic-tile{min-height:262px}
.tc-photo{inset:0 0 0 44%}
.tc-copy{max-width:56%;margin:20px 0 20px 20px;padding:22px 24px 20px}
.topic-tile a.tc-title{font-size:clamp(26px,2.4vw,36px)}
.tc-blurb{max-width:34ch}
@media (max-width:820px){
  .topic-grid{grid-template-columns:1fr}
  .topic-tile{min-height:224px}
  .tc-copy{max-width:72%;margin:14px 0 14px 14px;padding:18px 18px 16px}
  .tc-photo{inset:0 0 0 46%}
}

/* =========================================================================
   ACTION STRIP — was a flat purple band with three text links. Now three
   glass tiles sitting on a lit navy ground, each with its own colour wash
   and a circular arrow, so the row reads as three choices, not a footer.
   ========================================================================= */
.action-strip{position:relative;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(70% 140% at 12% 0%,#4a2fb8 0%,transparent 62%),
    radial-gradient(60% 130% at 88% 100%,#2b1b7a 0%,transparent 64%),
    linear-gradient(100deg,var(--navy) 0%,#2d1a86 52%,#241471 100%)}
.action-strip::before{content:"";position:absolute;z-index:0;pointer-events:none;
  left:-14%;top:-120%;width:72%;height:340%;border-radius:50%;
  border:1.5px solid rgba(83,201,189,.22)}
.action-strip::after{content:"";position:absolute;z-index:0;pointer-events:none;
  right:-10%;top:-90%;width:56%;height:300%;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.10)}
.action-strip ul{position:relative;z-index:1;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
  max-width:1180px;margin:0 auto;padding:22px 28px;border-top:0}
.action-strip li{min-width:0}
.action-strip a{display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:84px;padding:0 22px;border-right:0;border-radius:14px;
  color:#fff;font-size:1.12rem;font-weight:700;letter-spacing:-.01em;text-decoration:none;
  background:linear-gradient(140deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.06) 100%);
  backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 26px rgba(9,5,40,.28);
  transition:transform .24s var(--ease-out),background .24s ease,box-shadow .24s ease,
             border-color .24s ease}
.action-strip a:hover{transform:translateY(-4px);
  background:linear-gradient(140deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.1) 100%);
  border-color:rgba(83,201,189,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 18px 40px rgba(9,5,40,.38);
  text-decoration:none}
.action-strip a::after{content:"\2192";display:grid;place-items:center;flex:0 0 auto;
  width:40px;height:40px;border-radius:50%;font-size:17px;opacity:1;
  background:linear-gradient(145deg,#63d9cd 0%,var(--gold) 55%,#33998f 100%);
  color:#10303c;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 16px rgba(83,201,189,.32);
  transition:transform .24s var(--ease-out),box-shadow .24s ease}
.action-strip a:hover::after{transform:translateX(4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 24px rgba(83,201,189,.5)}
.action-strip a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media (max-width:820px){
  .action-strip ul{grid-template-columns:1fr;gap:12px;padding:18px 18px}
  .action-strip a{min-height:70px;font-size:1.04rem}
}
@supports not (backdrop-filter:blur(2px)){
  .action-strip a{background:rgba(255,255,255,.14)}
}

/* =========================================================================
   TOPIC CARDS v3 — built to the approved comp. Coloured disc and line icon,
   a tagline in small caps, the title, the count, a filled Explore button,
   an organic blob edge on the photograph, a dotted field bottom left and a
   handwritten line over the picture. Everything is one clickable object.
   ========================================================================= */
.topic-tile{min-height:296px;border-radius:16px;overflow:hidden;position:relative;
  border:1px solid rgba(20,23,43,.05);
  background:
    radial-gradient(64% 86% at 2% 0%,color-mix(in srgb,var(--h) 22%,#fff) 0%,transparent 62%),
    radial-gradient(52% 74% at 0% 100%,color-mix(in srgb,var(--h) 15%,#fff) 0%,transparent 64%),
    linear-gradient(104deg,var(--h-soft) 0%,#fbfcff 74%);
  box-shadow:0 1px 2px rgba(20,23,43,.04),0 16px 40px rgba(20,23,43,.09)}

/* organic blob shapes in the tint, the way the comp draws them */
.topic-tile::before{content:"";position:absolute;z-index:0;pointer-events:none;
  left:-16%;top:-26%;width:56%;height:112%;
  border-radius:56% 44% 62% 38%/48% 56% 44% 52%;
  background:color-mix(in srgb,var(--h) 13%,transparent);
  transition:transform .6s var(--ease-out)}
.topic-tile::after{content:"";position:absolute;z-index:0;pointer-events:none;
  left:20%;bottom:-40%;width:38%;height:84%;
  border-radius:48% 52% 38% 62%/58% 42% 58% 42%;
  background:color-mix(in srgb,var(--h) 8%,transparent);
  transition:transform .6s var(--ease-out)}
.topic-tile:hover::before{transform:translate(4px,-6px) scale(1.04)}
.topic-tile:hover::after{transform:translate(-5px,5px) scale(1.05)}

/* the dotted field */
.tc-dots{position:absolute;z-index:1;left:18px;bottom:22px;width:78px;height:64px;
  pointer-events:none;opacity:.55;
  background-image:radial-gradient(circle,color-mix(in srgb,var(--h) 55%,transparent) 1.4px,transparent 1.4px);
  background-size:11px 11px}

/* the photograph, cut on an organic edge */
.tc-photo{position:absolute;inset:0 0 0 40%;z-index:1;overflow:hidden}
.tc-photo img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;display:block;
  -webkit-mask-image:
    radial-gradient(76% 128% at 116% 32%,#000 46%,rgba(0,0,0,.5) 66%,transparent 84%),
    radial-gradient(84% 108% at 108% 88%,#000 44%,rgba(0,0,0,.45) 68%,transparent 86%);
  mask-image:
    radial-gradient(76% 128% at 116% 32%,#000 46%,rgba(0,0,0,.5) 66%,transparent 84%),
    radial-gradient(84% 108% at 108% 88%,#000 44%,rgba(0,0,0,.45) 68%,transparent 86%);
  -webkit-mask-composite:source-over;mask-composite:add;
  transform:scale(1.03);transition:transform .6s var(--ease-out)}
.topic-tile:hover .tc-photo img{transform:scale(1.08)}

/* the handwritten line over the picture */
.tc-script{position:absolute;z-index:2;right:20px;bottom:18px;max-width:42%;
  display:flex;flex-direction:column;align-items:flex-end;gap:1px;pointer-events:none;
  font-family:"Snell Roundhand","Brush Script MT","Segoe Script","Bradley Hand",cursive;
  font-size:1.18rem;line-height:1.16;font-style:italic;color:#fff;text-align:right;
  text-shadow:0 1px 10px rgba(12,10,40,.55),0 1px 2px rgba(12,10,40,.5)}
.tc-script span:last-child{border-bottom:1.5px solid rgba(255,255,255,.6);padding-bottom:2px}

/* the copy column — no glass plate; it sits on the tint, as the comp shows */
.tc-copy{position:relative;z-index:2;display:block;max-width:54%;
  margin:0;padding:26px 24px 24px 28px;background:none;backdrop-filter:none;
  -webkit-backdrop-filter:none;border:0;box-shadow:none;border-radius:0}
.topic-tile:hover .tc-copy{background:none;box-shadow:none}

.tc-disc{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  margin-bottom:14px;color:#fff;
  background:linear-gradient(145deg,color-mix(in srgb,var(--h) 74%,#fff) 0%,var(--h) 48%,var(--h-ink) 100%);
  box-shadow:0 6px 18px color-mix(in srgb,var(--h) 42%,transparent),
             inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .28s var(--ease-out)}
.topic-tile:hover .tc-disc{transform:translateY(-2px) scale(1.04)}
.tc-ico{width:27px;height:27px;display:block}

.tc-tag{display:block;margin-bottom:9px;font-size:.72rem;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:var(--h-ink)}
.topic-tile a.tc-title{display:block;font-size:clamp(26px,2.4vw,36px);line-height:1.04;
  font-weight:800;letter-spacing:-.025em;color:var(--h-ink);text-decoration:none;
  margin-bottom:10px;text-wrap:balance}
.tc-blurb{margin:0 0 12px;font-size:1rem;line-height:1.45;color:#3f4353;max-width:30ch}
.tc-count{display:block;margin-bottom:16px;font-size:1rem;font-weight:800;color:var(--h-ink)}

/* the Explore button */
.tc-cta{display:inline-flex;align-items:center;gap:12px;min-height:50px;
  padding:0 8px 0 22px;border-radius:999px;color:#fff;font-weight:700;font-size:1rem;
  background:linear-gradient(135deg,color-mix(in srgb,var(--h) 80%,#fff) 0%,var(--h) 52%,var(--h-ink) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 20px color-mix(in srgb,var(--h) 40%,transparent);
  transition:transform .22s var(--ease-out),box-shadow .22s ease}
.topic-tile:hover .tc-cta{transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 14px 30px color-mix(in srgb,var(--h) 52%,transparent)}
.tc-go{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.24);color:#fff;font-size:16px;box-shadow:none;
  transition:transform .22s var(--ease-out)}
.topic-tile:hover .tc-go{transform:translateX(4px);box-shadow:none}

@media (max-width:820px){
  .topic-tile{min-height:268px}
  .tc-copy{max-width:62%;padding:20px 18px 20px 20px}
  .tc-photo{inset:0 0 0 52%}
  .tc-script{font-size:1rem;right:14px;bottom:14px}
  .tc-dots{display:none}
}

/* =========================================================================
   TOPIC CARDS v4 — matching the comp exactly. The disc sits in a left
   gutter with the tagline starting beside it, and title, blurb, count and
   button all align to that same indent. Flat disc colour, shorter card.
   ========================================================================= */
.topic-tile{min-height:268px}
.tc-copy{display:grid;grid-template-columns:56px 1fr;column-gap:18px;row-gap:0;
  align-items:start;max-width:58%;padding:26px 20px 24px 26px}
.tc-disc{grid-column:1;grid-row:1/span 5;align-self:start;
  width:56px;height:56px;margin:0;border-radius:50%;
  background:var(--h);
  box-shadow:0 4px 12px color-mix(in srgb,var(--h) 34%,transparent)}
.topic-tile:hover .tc-disc{transform:translateY(-2px)}
.tc-tag{grid-column:2;grid-row:1;align-self:center;margin:0 0 6px}
.topic-tile a.tc-title{grid-column:2;grid-row:2;margin-bottom:8px;
  font-size:clamp(25px,2.2vw,34px)}
.tc-blurb{grid-column:2;grid-row:3;margin-bottom:9px;font-size:.98rem}
.tc-count{grid-column:2;grid-row:4;margin-bottom:15px}
.tc-cta{grid-column:2;grid-row:5;justify-self:start;
  background:var(--h);
  box-shadow:0 6px 16px color-mix(in srgb,var(--h) 34%,transparent)}
.topic-tile:hover .tc-cta{background:var(--h-ink);
  box-shadow:0 10px 24px color-mix(in srgb,var(--h) 46%,transparent)}

/* the disc's glyph needs to sit dead centre now that the box is a grid item */
.tc-disc{display:grid;place-items:center}

/* photo a touch wider and brighter than v3 */
.tc-photo{inset:0 0 0 42%}
.tc-dots{left:26px;bottom:20px;width:70px;height:52px;opacity:.5}
.tc-script{font-size:1.08rem;max-width:40%}

@media (max-width:820px){
  .topic-tile{min-height:250px}
  .tc-copy{max-width:66%;grid-template-columns:46px 1fr;column-gap:13px;
    padding:18px 14px 18px 18px}
  .tc-disc{width:46px;height:46px}
  .tc-ico{width:23px;height:23px}
  .tc-photo{inset:0 0 0 54%}
}

/* =========================================================================
   TOPIC CARDS v5 — to the comp, part by part:
   a tinted base card, a white sheet with a big rounded corner carrying the
   words, the photograph on the right cut by a sweeping curve, a tinted wave
   over the bottom of the picture holding the handwritten line, and the
   dotted field on the tint at bottom left.
   ========================================================================= */
.topic-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}

.topic-tile{position:relative;min-height:0;aspect-ratio:2.16/1;border-radius:18px;
  overflow:hidden;isolation:isolate;border:1px solid rgba(20,23,43,.05);
  background:
    radial-gradient(58% 70% at 0% 100%,color-mix(in srgb,var(--h) 30%,#fff) 0%,transparent 66%),
    radial-gradient(52% 64% at 4% 0%,color-mix(in srgb,var(--h) 22%,#fff) 0%,transparent 62%),
    linear-gradient(112deg,color-mix(in srgb,var(--h) 16%,#fff) 0%,color-mix(in srgb,var(--h) 7%,#fff) 58%,#fff 100%);
  box-shadow:0 1px 2px rgba(20,23,43,.04),0 16px 40px rgba(20,23,43,.10)}

/* the tint's soft blob bottom-left, and a second one top-left */
.topic-tile::before{left:-20%;top:-34%;width:56%;height:104%;
  background:color-mix(in srgb,var(--h) 16%,transparent)}
.topic-tile::after{left:-16%;bottom:-46%;width:60%;height:96%;
  border-radius:52% 48% 44% 56%/56% 44% 56% 44%;
  background:color-mix(in srgb,var(--h) 22%,transparent)}

/* the dotted field, on the tint, under the button */
.tc-dots{left:22px;bottom:26px;width:64px;height:66px;z-index:2;opacity:.6;
  background-image:radial-gradient(circle,color-mix(in srgb,var(--h) 60%,transparent) 1.5px,transparent 1.5px);
  background-size:12px 12px}

/* the photograph, its left edge a sweeping curve */
.tc-photo{position:absolute;inset:0 0 0 38%;z-index:2;overflow:hidden}
.tc-photo img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;
  -webkit-mask-image:radial-gradient(92% 150% at 128% 46%,#000 48%,rgba(0,0,0,.6) 64%,transparent 78%);
  mask-image:radial-gradient(92% 150% at 128% 46%,#000 48%,rgba(0,0,0,.6) 64%,transparent 78%)}

/* a tinted wave sweeping over the bottom of the picture */
.tc-wave{position:absolute;z-index:3;right:-6%;bottom:-40%;width:58%;height:96%;
  pointer-events:none;border-radius:56% 44% 40% 60%/62% 56% 44% 38%;
  background:linear-gradient(140deg,color-mix(in srgb,var(--h-ink) 62%,transparent) 0%,
             color-mix(in srgb,var(--h-ink) 88%,transparent) 100%);
  transition:transform .5s var(--ease-out)}
.topic-tile:hover .tc-wave{transform:translate(-4px,4px)}

.tc-script{position:absolute;z-index:4;right:22px;bottom:20px;max-width:34%;
  display:flex;flex-direction:column;align-items:center;gap:0;
  font-size:1.04rem;line-height:1.28;color:#fff;text-align:center;
  text-shadow:0 1px 6px rgba(12,10,40,.35)}
.tc-script span:last-child{border-bottom:1.5px solid rgba(255,255,255,.75);padding-bottom:3px}

/* the white sheet carrying the words */
.tc-copy{position:absolute;z-index:3;left:14px;top:14px;bottom:14px;width:58%;max-width:none;
  display:grid;grid-template-columns:72px 1fr;column-gap:20px;align-content:center;
  padding:0 26px 0 22px;margin:0;
  background:linear-gradient(160deg,#fff 0%,#fff 62%,color-mix(in srgb,var(--h) 5%,#fff) 100%);
  border-radius:34px 90px 90px 34px/34px 46% 46% 34px;
  box-shadow:0 2px 6px rgba(20,23,43,.05),0 14px 34px rgba(20,23,43,.08)}

.tc-disc{grid-column:1;grid-row:1/span 5;align-self:center;width:72px;height:72px;
  border-radius:50%;display:grid;place-items:center;color:#fff;margin:0;
  background:radial-gradient(circle at 32% 26%,color-mix(in srgb,var(--h) 72%,#fff) 0%,var(--h) 46%,var(--h-ink) 100%);
  box-shadow:0 6px 18px color-mix(in srgb,var(--h) 36%,transparent),
             inset 0 1px 0 rgba(255,255,255,.3)}
.tc-ico{width:34px;height:34px}

.tc-tag{grid-column:2;grid-row:1;margin:0 0 7px;font-size:.7rem;letter-spacing:.13em;
  font-weight:800;color:color-mix(in srgb,var(--h-ink) 88%,#000)}
.topic-tile a.tc-title{grid-column:2;grid-row:2;margin:0 0 9px;
  font-size:clamp(28px,2.7vw,42px);line-height:.98;letter-spacing:-.03em;color:var(--h-ink)}
.tc-blurb{grid-column:2;grid-row:3;margin:0 0 10px;font-size:1rem;line-height:1.38;
  color:#4a4f60;max-width:30ch}
.tc-count{grid-column:2;grid-row:4;margin:0 0 16px;font-size:1.05rem;color:var(--h-ink)}
.tc-cta{grid-column:2;grid-row:5;justify-self:start;min-height:52px;padding:0 7px 0 26px;
  gap:16px;font-size:1.02rem;
  background:linear-gradient(120deg,var(--h) 0%,var(--h-ink) 100%);
  box-shadow:0 6px 18px color-mix(in srgb,var(--h) 36%,transparent)}
.topic-tile:hover .tc-cta{transform:translateY(-2px);
  box-shadow:0 12px 26px color-mix(in srgb,var(--h) 48%,transparent)}
.tc-go{width:38px;height:38px;background:rgba(255,255,255,.22);
  border:1.5px solid rgba(255,255,255,.55)}

@media (max-width:900px){
  .topic-grid{grid-template-columns:1fr}
  .topic-tile{aspect-ratio:auto;min-height:300px}
  .tc-copy{width:64%;grid-template-columns:54px 1fr;column-gap:14px;padding:0 16px 0 16px;
    border-radius:26px 60px 60px 26px/26px 44% 44% 26px}
  .tc-disc{width:54px;height:54px}
  .tc-ico{width:26px;height:26px}
  .tc-script{font-size:.92rem;right:12px;bottom:14px}
  .tc-dots{display:none}
}

/* --- the comp is a wide card; at two-up each one is about half that width,
   so every size is expressed against the CARD (cqw) with a readable floor,
   and the height follows the content instead of being clamped by a ratio. --- */
.topic-tile{container-type:inline-size;aspect-ratio:auto;min-height:272px}
.tc-copy{left:13px;top:13px;bottom:13px;width:59%;
  grid-template-columns:clamp(46px,7cqw,72px) 1fr;
  column-gap:clamp(12px,2cqw,20px);
  padding:0 clamp(14px,2.4cqw,26px) 0 clamp(14px,2.2cqw,22px);
  border-radius:clamp(22px,3.4cqw,34px) clamp(56px,9cqw,90px) clamp(56px,9cqw,90px) clamp(22px,3.4cqw,34px)/clamp(22px,3.4cqw,34px) 46% 46% clamp(22px,3.4cqw,34px)}
.tc-disc{width:clamp(46px,7cqw,72px);height:clamp(46px,7cqw,72px)}
.tc-ico{width:clamp(23px,3.3cqw,34px);height:clamp(23px,3.3cqw,34px)}
.tc-tag{font-size:clamp(9.5px,1.2cqw,12px);letter-spacing:.12em;margin-bottom:clamp(4px,.8cqw,7px)}
.topic-tile a.tc-title{font-size:clamp(23px,4.5cqw,42px);line-height:1;
  margin-bottom:clamp(6px,1.2cqw,9px)}
.tc-blurb{font-size:clamp(13.5px,1.72cqw,17px);line-height:1.4;
  margin-bottom:clamp(7px,1.3cqw,10px);max-width:28ch}
.tc-count{font-size:clamp(14.5px,1.85cqw,18px);margin-bottom:clamp(10px,2cqw,16px)}
.tc-cta{min-height:clamp(42px,5.2cqw,52px);font-size:clamp(14px,1.6cqw,17px);
  padding:0 clamp(5px,.9cqw,7px) 0 clamp(16px,2.6cqw,26px);
  gap:clamp(9px,1.6cqw,16px)}
.tc-go{width:clamp(30px,3.8cqw,38px);height:clamp(30px,3.8cqw,38px);
  font-size:clamp(13px,1.6cqw,16px)}
.tc-script{font-size:clamp(12.5px,1.7cqw,18px);right:clamp(12px,2.2cqw,22px);
  bottom:clamp(12px,2cqw,20px);max-width:36%}
.tc-dots{left:clamp(14px,2.2cqw,22px);bottom:clamp(16px,2.6cqw,26px);
  width:clamp(44px,6.4cqw,64px);height:clamp(44px,6.6cqw,66px);
  background-size:clamp(8px,1.2cqw,12px) clamp(8px,1.2cqw,12px)}

/* --- the disc belongs beside the tagline and title, not centred against the
   whole column; and the wave is a sweep across the bottom corner, not a
   curtain over the picture. --- */
.tc-disc{grid-row:1/span 2;align-self:center}
.tc-wave{right:-10%;bottom:-26%;width:46%;height:62%;
  border-radius:58% 42% 38% 62%/64% 54% 46% 36%;
  background:linear-gradient(140deg,color-mix(in srgb,var(--h-ink) 48%,transparent) 0%,
             color-mix(in srgb,var(--h-ink) 80%,transparent) 100%)}

/* --- the sheet's bottom-left corner curves away so the tinted blob and its
   dotted field show through, the way the comp does it --- */
.tc-copy{border-radius:clamp(22px,3.4cqw,34px) clamp(56px,9cqw,90px)
         clamp(56px,9cqw,90px) clamp(44px,7cqw,70px)/
         clamp(22px,3.4cqw,34px) 46% 46% clamp(44px,7cqw,70px)}
.tc-dots{z-index:4;left:clamp(10px,1.6cqw,16px);bottom:clamp(10px,1.8cqw,18px)}

/* a handwriting face, not a copperplate one; all system, nothing fetched */
.tc-script{font-family:"Bradley Hand","Segoe Script","Ink Free","Marker Felt",
  "Brush Script MT",cursive;font-style:normal;font-weight:600}

/* a type family with no photograph yet still gets the disc, carrying a line icon */
.rt-ico-glyph{display:grid;place-items:center;color:#fff;
  background:linear-gradient(145deg,color-mix(in srgb,var(--h) 74%,#fff) 0%,var(--h) 48%,var(--h-ink) 100%)}
.rt-ico-glyph svg{width:24px;height:24px;display:block}
.fc-ico.rt-ico-glyph svg{width:22px;height:22px}

/* Deliberate, not accidental: in a long list the glyph disc stays pale with a
   hue-coloured icon — twenty solid discs down a page would shout. The rail,
   the pill and the glyph already carry the colour. */
.res-card .rt-ico.rt-ico-glyph{background:radial-gradient(circle at 34% 28%,#fff 0%,
  color-mix(in srgb,var(--h-soft) 88%,#fff) 62%,color-mix(in srgb,var(--h) 18%,#fff) 100%);
  color:var(--h-ink)}
.res-card:hover .rt-ico.rt-ico-glyph{background:var(--h);color:#fff}

/* =========================================================================
   FEATURE CARDS v2 — the same language as the topic cards so the home page
   reads as one system: tinted base with blob shapes, a white sheet carrying
   the words, and the photograph cut on a sweeping curve.
   ========================================================================= */
.feat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.feat-card{container-type:inline-size;position:relative;min-height:300px;
  border-radius:18px;overflow:hidden;isolation:isolate;
  border:1px solid rgba(20,23,43,.05);
  background:
    radial-gradient(58% 70% at 0% 100%,color-mix(in srgb,var(--h) 26%,#fff) 0%,transparent 66%),
    radial-gradient(52% 64% at 4% 0%,color-mix(in srgb,var(--h) 18%,#fff) 0%,transparent 62%),
    linear-gradient(112deg,color-mix(in srgb,var(--h) 13%,#fff) 0%,color-mix(in srgb,var(--h) 6%,#fff) 58%,#fff 100%);
  box-shadow:0 1px 2px rgba(20,23,43,.04),0 16px 40px rgba(20,23,43,.09)}
.feat-card::before{content:"";position:absolute;z-index:0;pointer-events:none;
  left:-18%;top:-30%;width:54%;height:108%;
  border-radius:56% 44% 62% 38%/48% 56% 44% 52%;
  background:color-mix(in srgb,var(--h) 13%,transparent)}
.feat-card::after{content:"";position:absolute;z-index:0;pointer-events:none;
  left:-14%;bottom:-44%;width:56%;height:92%;
  border-radius:52% 48% 44% 56%/56% 44% 56% 44%;
  background:color-mix(in srgb,var(--h) 18%,transparent)}

.fc-photo{position:absolute;inset:0 0 0 40%;z-index:1;overflow:hidden}
.fc-photo img{width:100%;height:100%;object-fit:cover;object-position:58% 50%;
  -webkit-mask-image:radial-gradient(92% 150% at 128% 46%,#000 48%,rgba(0,0,0,.6) 64%,transparent 78%);
  mask-image:radial-gradient(92% 150% at 128% 46%,#000 48%,rgba(0,0,0,.6) 64%,transparent 78%)}

.fc-copy{position:absolute;z-index:3;left:13px;top:13px;bottom:13px;width:60%;max-width:none;
  display:flex;flex-direction:column;justify-content:center;gap:0;
  padding:0 clamp(14px,2.4cqw,24px) 0 clamp(14px,2.2cqw,22px);
  background:linear-gradient(160deg,#fff 0%,#fff 62%,color-mix(in srgb,var(--h) 5%,#fff) 100%);
  border-radius:clamp(20px,3.2cqw,32px) clamp(50px,8cqw,80px)
                clamp(50px,8cqw,80px) clamp(40px,6.4cqw,64px)/
                clamp(20px,3.2cqw,32px) 44% 44% clamp(40px,6.4cqw,64px);
  box-shadow:0 2px 6px rgba(20,23,43,.05),0 14px 34px rgba(20,23,43,.08)}

.fc-head{display:flex;align-items:center;gap:clamp(9px,1.6cqw,13px);
  margin-bottom:clamp(8px,1.5cqw,13px)}
.fc-ico{flex:0 0 auto;width:clamp(40px,6cqw,52px);height:clamp(40px,6cqw,52px);
  border-radius:50%;overflow:hidden;box-shadow:0 5px 14px color-mix(in srgb,var(--h) 32%,transparent)}
.fc-ico.rt-ico-glyph{background:linear-gradient(145deg,color-mix(in srgb,var(--h) 74%,#fff) 0%,
  var(--h) 48%,var(--h-ink) 100%);color:#fff}
.fc-ico.rt-ico-glyph svg{width:clamp(20px,2.9cqw,25px);height:clamp(20px,2.9cqw,25px)}
.fc-type{font-size:clamp(11px,1.35cqw,13px);padding:5px clamp(9px,1.4cqw,13px)}
.fc-meta{margin:0 0 clamp(5px,1cqw,8px);font-size:clamp(12.5px,1.5cqw,14px)}
.feat-card a.fc-title{font-size:clamp(19px,2.55cqw,26px);line-height:1.12;
  margin-bottom:clamp(6px,1.2cqw,10px);letter-spacing:-.02em}
.fc-blurb{font-size:clamp(13.5px,1.62cqw,16px);line-height:1.42;
  margin-bottom:clamp(11px,2cqw,18px);-webkit-line-clamp:3}
.fc-cta{align-self:flex-start;min-height:clamp(42px,5.2cqw,50px);
  font-size:clamp(14px,1.6cqw,16px);padding:0 clamp(5px,.9cqw,8px) 0 clamp(16px,2.4cqw,22px);
  gap:clamp(9px,1.5cqw,14px);border-radius:999px;
  background:linear-gradient(120deg,var(--h) 0%,var(--h-ink) 100%);
  box-shadow:0 6px 18px color-mix(in srgb,var(--h) 34%,transparent)}
.fc-go{width:clamp(30px,3.7cqw,36px);height:clamp(30px,3.7cqw,36px);
  background:rgba(255,255,255,.22);border:1.5px solid rgba(255,255,255,.55)}

@media (max-width:900px){
  .feat-grid{grid-template-columns:1fr}
  .feat-card{min-height:280px}
  .fc-copy{width:66%}
  .fc-photo{inset:0 0 0 54%}
}

/* Flex blockifies its children, so -webkit-box (and with it -webkit-line-clamp)
   stopped applying to the blurb and the text ran out of the sheet. Clamp by
   height instead — same result, and it does not depend on a display value the
   layout is free to change. */
.fc-blurb{display:block;overflow:hidden;line-height:1.42;
  /* 3 lines plus a hair, so descenders on the last line are not sliced */
  max-height:4.42em}
.fc-photo img{object-position:52% 50%}

/* =========================================================================
   ABOUT — prose turned into things you can scan: numbered steps, a ticked
   criteria list, and an audience matrix. Same card language as everywhere.
   ========================================================================= */
.steps{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  margin:0;padding:0;list-style:none;max-width:none;counter-reset:step}
.steps li{position:relative;background:#fff;border:1px solid rgba(20,23,43,.06);
  border-radius:16px;padding:24px 22px 22px;
  box-shadow:0 1px 2px rgba(20,23,43,.04),0 12px 30px rgba(20,23,43,.07);
  transition:transform .24s var(--ease-out),box-shadow .24s ease}
.steps li:hover{transform:translateY(-4px);
  box-shadow:0 3px 6px rgba(20,23,43,.05),0 20px 44px rgba(20,23,43,.12)}
.steps li::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:16px;
  background:radial-gradient(70% 90% at 96% 4%,rgba(56,33,149,.07) 0%,transparent 62%)}
.step-n{position:relative;z-index:1;display:grid;place-items:center;width:46px;height:46px;
  border-radius:50%;margin-bottom:14px;font-weight:800;font-size:1.12rem;color:#fff;
  background:linear-gradient(145deg,#5334cf 0%,var(--navy) 52%,#2a1670 100%);
  box-shadow:0 5px 14px rgba(56,33,149,.32),inset 0 1px 0 rgba(255,255,255,.3)}
.steps h3{position:relative;z-index:1;margin:0 0 7px;font-size:1.12rem;line-height:1.25;
  letter-spacing:-.015em;color:var(--ink)}
.steps p{position:relative;z-index:1;margin:0;font-size:.97rem;line-height:1.5;color:#4a4f60}

.check-list{margin:0;padding:0;list-style:none;max-width:none;display:grid;gap:11px}
.check-list li{position:relative;padding:12px 14px 12px 46px;border-radius:10px;
  background:#fff;border:1px solid rgba(20,23,43,.06);font-size:1rem;line-height:1.45;
  color:#3f4353;box-shadow:0 1px 2px rgba(20,23,43,.03)}
.check-list li::before{content:"";position:absolute;left:14px;top:50%;margin-top:-10px;
  width:20px;height:20px;border-radius:50%;background:var(--gold);
  box-shadow:0 2px 6px rgba(48,117,110,.3)}
.check-list li::after{content:"";position:absolute;left:19px;top:50%;margin-top:-4px;
  width:9px;height:5px;border-left:2px solid #0f3d38;border-bottom:2px solid #0f3d38;
  transform:rotate(-45deg)}

.aud-list{margin:0 0 14px;padding:0;list-style:none;max-width:none;display:grid;gap:2px}
.aud-list li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:8px 16px;
  align-items:baseline;padding:12px 4px;border-top:1px solid var(--line)}
.aud-list li:first-child{border-top:0}
.aud-list b{font-size:1rem;color:var(--navy)}
.aud-list span{font-size:.94rem;color:#5d6276;line-height:1.4}

.about-split{gap:38px 44px}
.center-row{justify-content:center}
@media (max-width:760px){
  .aud-list li{grid-template-columns:1fr;gap:2px}
  .about-split{gap:30px}
}

/* .center only centred the rule above the eyebrow; the heading and its copy
   stayed left, so a centred band read as misaligned. */
.section-head.center{text-align:center}
.section-head.center h1,.section-head.center h2,
.section-head.center p,.section-head.center .feat-sub{margin-left:auto;margin-right:auto}

/* The copy sheet was absolutely positioned, so the card could not grow with a
   long title and the last line of the blurb was sliced. The sheet is back in
   normal flow — the card is now as tall as its words — and only the photograph
   stays absolute behind it. */
.feat-card{display:block;min-height:0;padding:13px;
  --sheet-radius:clamp(20px,3.2cqw,32px) clamp(50px,8cqw,80px)
                 clamp(50px,8cqw,80px) clamp(40px,6.4cqw,64px)/
                 clamp(20px,3.2cqw,32px) 44% 44% clamp(40px,6.4cqw,64px)}
.fc-copy{position:relative;left:auto;top:auto;bottom:auto;width:60%;
  min-height:274px;display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(18px,2.6cqw,26px);padding-bottom:clamp(18px,2.6cqw,26px);
  border-radius:var(--sheet-radius)}
.feat-card a.fc-title{display:block;line-height:1.12}
/* the title is cut on a word boundary in build.py with an ellipsis, so there is
   nothing for CSS to clip and no title ends mid-phrase with no marker */
.fc-blurb{max-height:4.45em}
@media (max-width:900px){.fc-copy{width:68%;min-height:250px}}