/* ============================================================
   GEELEN & COMPANY — HUB stylesheet
   ============================================================ */
:root{
  --ink:#14202E;
  --ink-2:#2A3A50;
  --ink-mute:#7C8AA0;
  --paper:#FBFAF7;
  --paper-2:#F1EEE6;
  --paper-3:#E5E0D2;
  --blue:#0E5B95;
  --blue-deep:#0A4170;
  --steel:#6395BA;
  --pale:#B6C9DC;
  --bright:#76B9EE;
  --rule:rgba(20,32,46,.12);
  --display:"PT Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --italic:"PT Serif",Georgia,serif;
  --body:"PT Serif",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gutter:clamp(24px,4vw,64px);
  --max:1320px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
/* visually-hidden: present for screen readers / SEO, removed from visual flow */
.hub-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
html{ background:var(--paper); }
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  font-size:16px;
  line-height:1.55;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--blue); color:var(--paper); }
img{ max-width:100%; display:block; }

/* ============================================================
   MASTHEAD
   ============================================================ */
.hub-masthead{
  position:sticky; top:0; z-index:50;
  background:color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.hub-masthead-inner{
  max-width:var(--max); margin:0 auto;
  padding:18px var(--gutter);
  display:flex; align-items:center; gap:32px;
}
.hub-wordmark{
  font-family:var(--display); font-weight:700;
  font-size:18px; letter-spacing:-.01em; color:var(--ink);
}
.hub-wordmark .hub-amp{
  font-family:var(--italic); font-style:italic; font-weight:400;
  color:var(--blue); padding:0 .08em;
}
.hub-nav{
  margin-left:auto;
  display:flex; gap:30px;
  font-family:var(--display); font-weight:400;
  font-size:13px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-2);
}
.hub-nav a{
  padding-bottom:4px;
  border-bottom:1px solid transparent;
  transition:border-color .15s, color .15s;
}
.hub-nav a:hover{ color:var(--blue); border-bottom-color:var(--blue); }
/* Narrow viewports: nav can't fit beside the wordmark (CONTACT clipped, T-024).
   Let the masthead wrap — wordmark on line 1, nav full-width on line 2 with tighter spacing. */
@media (max-width:600px){
  .hub-masthead-inner{ flex-wrap:wrap; gap:8px 20px; }
  .hub-nav{ margin-left:0; width:100%; gap:22px; font-size:12px; letter-spacing:.1em; }
}

/* ============================================================
   BIG DRAGON — closing flourish at the foot of the page
   ============================================================ */
.hub-bigdragon{
  max-width:var(--max); margin:0 auto;
  padding:72px var(--gutter) 96px;
  display:flex; align-items:center; justify-content:center;
}
.hub-bigdragon img{
  width:100%; height:auto; max-width:760px;
  filter:drop-shadow(0 28px 40px rgba(14,91,149,.16));
}
@media (max-width:980px){
  .hub-bigdragon{ padding:48px var(--gutter) 72px; }
}

/* ============================================================
   INITIATIVES — card grid
   ============================================================ */
.hub-initiatives{
  padding:48px 0 96px;
}
.hub-cards{
  max-width:var(--max); margin:0 auto;
  padding:0 var(--gutter);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:248px;
  gap:16px;
}
/* the tile flagged featured:true in CONFIG spans 2x2 */
.hub-card.is-featured{ grid-column:span 2; grid-row:span 2; }

.hub-card{
  position:relative;
  overflow:hidden;
  text-decoration:none; color:inherit;
}
.hub-card .face{
  position:absolute; inset:0; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  opacity:1; transition:opacity .5s ease, transform .5s ease;
}

/* FRONT — solid colour poster block; --ac set per tile from CONFIG */
.hub-card .front{
  z-index:2;
  background:var(--ac,var(--blue)); color:var(--paper);
  padding:30px;
}
.hub-card .front.light{ color:var(--ink); }
.hub-card .front.light .pc-tag,
.hub-card .front.light .pc-cta{ color:var(--blue); }
.hub-card .front.light .pc-tl{ color:var(--ink-2); }
.pc-top{
  display:flex; justify-content:space-between;
  font-family:var(--display); font-weight:700; font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; opacity:.85;
}
.pc-name{
  font-family:var(--display); font-weight:700;
  font-size:clamp(28px,3vw,36px); line-height:1.02; letter-spacing:-.01em;
  margin:auto 0 10px;
}
.hub-card.is-featured .pc-name{ font-size:clamp(40px,5vw,58px); }
.pc-tl{
  font-family:var(--italic); font-style:italic; font-size:15px;
  line-height:1.4; opacity:.92; margin:0 0 14px; max-width:34ch;
}
.pc-cta{
  font-family:var(--display); font-weight:700; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
}

/* BACK — screenshot (or coming-soon), crossfaded in on hover */
.hub-card .back{ z-index:1; opacity:0; background:var(--ink); color:var(--paper); }
.hub-card .back img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top;
}
/* on hover the full-page shot slowly scrolls (down, then back up) — like
   watching the live site. Starts as soon as the crossfade settles (.35s). */
.hub-card:hover .back img,
.hub-card:focus-visible .back img{
  animation:pc-scroll 18s linear .35s infinite alternate;
}
@keyframes pc-scroll{
  from{ object-position:center top; }
  to{   object-position:center bottom; }
}
.hub-card .back .pc-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(16,30,46,.15) 0%, rgba(16,30,46,.15) 45%, rgba(10,65,112,.92) 100%);
}
.hub-card .back .pc-lab{ position:relative; margin-top:auto; padding:26px 30px; }
.hub-card .back .pc-name{ font-family:var(--italic); font-style:italic; margin:0; }
.hub-card .back .pc-cta{ display:block; color:var(--bright); margin-top:8px; }
.hub-card .back.placeholder{ display:flex; align-items:center; justify-content:center; text-align:center; }
.hub-card .back.placeholder .pc-ph{
  position:relative; font-family:var(--mono); font-size:12px;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.72);
}
.hub-card .back.placeholder.light .pc-ph{ color:var(--ink-mute); }
.hub-card .back.placeholder .pc-ph b{
  display:block; font-family:var(--italic); font-style:italic;
  font-size:clamp(24px,3vw,32px); letter-spacing:0; text-transform:none;
  color:var(--paper); margin-bottom:8px;
}
.hub-card .back.placeholder.light .pc-ph b{ color:var(--ink); }

/* the crossfade — on hover/focus, and on auto-reveal (.is-live, set by JS) */
.hub-card:hover .front,
.hub-card:focus-visible .front,
.hub-card.is-live .front{ opacity:0; transform:scale(1.03) rotate(-.8deg); }
.hub-card:hover .back,
.hub-card:focus-visible .back,
.hub-card.is-live .back{ opacity:1; }
/* auto-revealed tiles scroll on their own (same pan as hover) */
.hub-card.is-live .back img{ animation:pc-scroll 18s linear .35s infinite alternate; }
@media (prefers-reduced-motion:reduce){
  .hub-card .face{ transition:opacity .2s ease; }
  .hub-card:hover .front,
  .hub-card.is-live .front{ transform:none; }
  .hub-card:hover .back img,
  .hub-card:focus-visible .back img,
  .hub-card.is-live .back img{ animation:none; }
}

@media (max-width:980px){
  .hub-cards{ grid-template-columns:repeat(2,1fr); }
  .hub-card.is-featured{ grid-column:span 2; grid-row:span 1; }
}
@media (max-width:600px){
  .hub-cards{ grid-template-columns:1fr; grid-auto-rows:230px; }
  .hub-card.is-featured{ grid-column:span 1; }
}

/* ============================================================
   BUTTONS / LINKOUTS (used by profile.html, agentic.html)
   ============================================================ */
.hub-btn{
  display:inline-block;
  padding:14px 22px;
  font-family:var(--display); font-weight:700;
  text-transform:uppercase; letter-spacing:.22em;
  font-size:11px;
  background:var(--blue); color:var(--paper);
  border:1px solid var(--blue);
  transition:background .15s;
}
.hub-btn:hover{ background:var(--blue-deep); border-color:var(--blue-deep); }
.hub-linkout{
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-2);
  border-bottom:1px solid var(--ink-2); padding-bottom:2px;
  margin-left:14px;
}
.hub-linkout:hover{ color:var(--blue); border-color:var(--blue); }

/* ============================================================
   FOOTER
   ============================================================ */
.hub-foot{ border-top:1px solid var(--rule); }
.hub-foot-inner{
  max-width:var(--max); margin:0 auto;
  padding:72px var(--gutter) 48px;
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px;
}
.hub-foot-cell h6{
  font-family:var(--display); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-mute);
  margin:0 0 14px; font-weight:700;
}
.hub-foot-cell ul{ list-style:none; margin:0; padding:0; }
.hub-foot-cell ul li{ margin-bottom:8px; color:var(--ink-2); font-size:13px; }
.hub-foot-cell ul li a:hover{ color:var(--blue); }
.hub-foot-wm p{
  font-family:var(--italic); font-style:italic;
  font-size:16px; line-height:1.45; color:var(--ink-2);
  max-width:380px;
}
.hub-foot-mark{
  font-family:var(--display); font-weight:700;
  font-size:18px; color:var(--ink);
  margin-bottom:10px; display:block;
}
.hub-foot-mark .hub-amp{
  font-family:var(--italic); font-style:italic; font-weight:400;
  color:var(--blue); padding:0 .08em;
}
.hub-foot-band{
  background:var(--blue); color:var(--paper);
  padding:18px var(--gutter);
  font-family:var(--display); font-weight:700;
  text-transform:uppercase; letter-spacing:.22em;
  font-size:12px; text-align:center;
}
@media (max-width:760px){
  .hub-foot-inner{ grid-template-columns:1fr 1fr; }
  .hub-foot-wm{ grid-column:1/-1; }
}

/* ============================================================
   PROJECT DETAIL PAGES (aef.html, termlink.html, … — T-026)
   One shared layout for every per-project sub-page. Modelled on
   learning-companion.html's lc-* scoped style, generalised here so
   the 7 detail pages stay identical without duplicating a <style>.
   ============================================================ */
.pd-hero{ max-width:var(--max); margin:0 auto; padding:72px var(--gutter) 12px; }
.pd-hero-inner{ max-width:min(1040px,100%); margin:0 auto; }
.pd-eyebrow{
  font-family:var(--display); font-weight:700; font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute);
  margin:0 0 22px;
}
.pd-hero-mark{
  font-family:var(--italic); font-weight:700;
  font-size:clamp(40px,6vw,76px); line-height:.98; letter-spacing:-.02em;
  color:var(--ink); margin:0 0 26px;
}
.pd-thesis{
  font-family:var(--body); font-size:calc(clamp(22px,2.3vw,27px) * var(--rs,1)); line-height:1.55;
  color:var(--ink-2); max-width:66ch; margin:0 0 30px;
}
.pd-thesis em{ color:var(--blue); font-style:italic; font-weight:700; }

/* meta strip — status + repo, sits under the hero */
.pd-meta{
  max-width:calc(72ch + 2 * var(--gutter)); margin:0 auto; padding:0 var(--gutter);
  display:flex; flex-wrap:wrap; gap:14px 40px; align-items:baseline;
}
.pd-meta-item{ display:flex; flex-direction:column; gap:4px; }
.pd-meta-label{
  font-family:var(--display); font-weight:700; font-size:10px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute);
}
.pd-meta-val{
  font-family:var(--mono); font-size:13px; letter-spacing:.02em; color:var(--ink-2);
}
.pd-meta-val a{ color:var(--blue); border-bottom:1px solid var(--rule); }
.pd-meta-val a:hover{ border-bottom-color:var(--blue); }

/* body — same rhythm as lc-* */
.pd-body{ max-width:var(--max); margin:0 auto; padding:44px var(--gutter) 88px; }
.pd-wrap{ max-width:min(1040px,100%); margin:0 auto; border-top:1px solid var(--rule); padding-top:40px; overflow-wrap:break-word; }
.pd-wrap h2{
  font-family:var(--display); font-weight:700;
  font-size:clamp(24px,3vw,34px); line-height:1.1; letter-spacing:-.01em;
  color:var(--ink); margin:48px 0 18px;
}
.pd-wrap h2:first-child{ margin-top:0; }
.pd-wrap p{
  font-family:var(--body); font-size:calc(clamp(19px,1.5vw,21px) * var(--rs,1)); line-height:1.7;
  color:var(--ink-2); margin:0 0 1.1em;
}
.pd-wrap p em{ color:var(--blue); font-style:italic; font-weight:700; }
.pd-wrap ul{ margin:0 0 1.2em; padding:0; list-style:none; }
.pd-wrap ul li{
  font-family:var(--body); font-size:calc(clamp(18px,1.4vw,20px) * var(--rs,1)); line-height:1.65; color:var(--ink-2);
  padding:10px 0 10px 22px; border-top:1px solid var(--rule); position:relative;
}
.pd-wrap ul li:before{ content:"·"; position:absolute; left:4px; color:var(--blue); font-weight:700; }
.pd-wrap ul li b{ color:var(--ink); }

/* ---- A−/A+ reader size control — desktop AND mobile (T-042) ----
   --rs scales prose everywhere: the base prose rules above multiply their
   font-size by var(--rs,1), default 1, so nothing changes until the reader
   uses the control. The floating pill is styled unconditionally and renders
   wherever reading.js injects it (the reading pages). It never appears on the
   tile-grid homepage, which does not load reading.js — so no CSS gate needed. */
:root{ --rs:1; }
.fs-ctl{
  display:flex; position:fixed; right:14px; bottom:14px; z-index:60;
  gap:2px; padding:4px; border-radius:999px;
  background:var(--ink); box-shadow:0 6px 20px rgba(20,32,46,.30);
}
.fs-ctl button{
  -webkit-appearance:none; appearance:none; border:0; cursor:pointer;
  width:44px; height:44px; border-radius:999px; background:transparent;
  color:var(--paper); font-family:var(--display); font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.fs-ctl button:hover{ background:rgba(255,255,255,.10); }
.fs-ctl button:active{ background:rgba(255,255,255,.16); }
.fs-ctl button:disabled{ opacity:.35; cursor:default; }
.fs-ctl .fs-min{ font-size:15px; }
.fs-ctl .fs-max{ font-size:22px; }
/* Phones (narrow viewport OR any touch device — phones stay "mobile" even when
   Chrome's "Desktop site" forces a 980px layout, still reporting hover:none +
   pointer:coarse) get a larger prose base; still multiplied by --rs. */
@media (max-width:600px), (hover:none) and (pointer:coarse){
  .pd-thesis{ font-size:calc(24px * var(--rs,1)); }
  .pd-wrap p{ font-size:calc(21px * var(--rs,1)); }
  .pd-wrap ul li{ font-size:calc(20px * var(--rs,1)); }
}

/* screenshot block (or styled placeholder when no live URL) */
.pd-shot{
  max-width:var(--max); margin:0 auto; padding:0 var(--gutter) 8px;
}
.pd-shot-frame{
  border:1px solid var(--rule); background:var(--paper-2);
  overflow:hidden; border-radius:2px;
}
.pd-shot-frame img{ width:100%; height:auto; display:block; }
/* Portrait / tall screenshots (a phone-shaped or narrow app window): don't upscale
   to the full column — cap the width and centre, so the frame hugs the image. */
.pd-shot-frame.portrait{ width:fit-content; max-width:100%; margin:0 auto; }
.pd-shot-frame.portrait img{ max-width:480px; }
.pd-shot-frame.placeholder{
  aspect-ratio:16/9; display:flex; align-items:center; justify-content:center;
  text-align:center; background:
    linear-gradient(135deg, var(--paper-2) 0%, var(--paper-3) 100%);
}
.pd-shot-frame.placeholder .pd-ph{
  font-family:var(--mono); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-mute);
}
.pd-shot-frame.placeholder .pd-ph b{
  display:block; font-family:var(--italic); font-style:italic;
  font-size:clamp(22px,3vw,30px); letter-spacing:0; text-transform:none;
  color:var(--ink-2); margin-bottom:8px;
}
.pd-shot-cap{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  color:var(--ink-mute); margin:10px 0 0;
}
.pd-back{ margin-top:8px; }
.pd-cta-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:8px; }

/* no-JS fallback list for the config-rendered initiative tiles */
.hub-cards-fallback{ max-width:var(--max); margin:0 auto; padding:0 var(--gutter); list-style:none; }
.hub-cards-fallback li{ padding:12px 0; border-top:1px solid var(--rule); color:var(--ink-2); font-size:15px; }
.hub-cards-fallback a{ color:var(--blue); font-weight:700; }