/* ============================================================
   Emmanuel Ayedoun — design system
   Indigo (aizome/adire) × Terracotta (laterite/vermillion) × Washi
   ============================================================ */

:root{
  /* identity */
  --terra:#C8501F; --terra-deep:#9E3D14;
  --indigo:#2C4470; --indigo-deep:#1D2E4F;
  --gold:#C49032; --sand:#EAD9BC;
  /* Ink variants: the same accents darkened until they clear WCAG AA (4.5:1) as
     small text on every light surface here. The bright --terra/--gold stay for
     fills, borders, icons and large display type, where they already pass. */
  --terra-ink:#A8431A; --gold-ink:#7B5B1F;
  --on-terra:#FFFFFF;        /* label sitting ON a terracotta fill (4.54:1) */
  --hero-accent:#E0703F;     /* terracotta lifted to read on the indigo hero  */

  /* semantic surfaces (light) */
  --bg-a:#FFFDF7;            /* white blocks   */
  --bg-b:#F6EFE3;            /* washi cream    */
  --bg-c:#EDE2CF;            /* deep cream     */
  --surface:#FFFFFF;         /* cards          */
  --surface-alt:#F6EFE3;     /* inverse cards  */
  --text:#281410; --text-2:#5C4A40; --text-3:#6B564B;
  --hero-bg:#1D2E4F; --hero-text:#F6EFE3;
  --stats-bg:#C8501F; --stats-text:#FFFFFF;
  --bridge-bg:#2C4470;
  --footer-bg:#281410; --footer-text:rgba(246,239,227,.78);
  --border:rgba(44,68,112,.14); --border-soft:rgba(44,68,112,.08);
  --nav-scrolled:rgba(246,239,227,.86); --nav-scrolled-text:#281410;

  --font-display:'Bricolage Grotesque','Bricolage Fallback','Noto Sans JP','DM Sans',sans-serif;
  --font-body:'DM Sans','DM Sans Fallback','Noto Sans JP',-apple-system,sans-serif;
  --radius:24px; --radius-sm:16px;
  --ease:cubic-bezier(.22,.8,.3,1);
  color-scheme: light;
}
[data-theme="dark"]{
  --terra:#E0703F; --terra-deep:#C8501F;
  --indigo:#8FA5D0; --indigo-deep:#16223C;
  --gold:#D8A94E; --sand:#C9B68C;
  --terra-ink:#E8834F; --gold-ink:#D8A94E;
  --on-terra:#281410;        /* dark label on the lighter dark-mode terracotta */
  --hero-accent:#E0703F;
  --bg-a:#161F35; --bg-b:#121A2D; --bg-c:#0F1626;
  --surface:#1D2845; --surface-alt:#1A2440;
  --text:#F2EADA; --text-2:#C5CBDC; --text-3:#93A0BE;
  --hero-bg:#0F1626; --hero-text:#F2EADA;
  --stats-bg:#A84418; --stats-text:#F6EFE3;
  --bridge-bg:#22335B;
  --footer-bg:#0B111F; --footer-text:rgba(242,234,218,.72);
  --border:rgba(242,234,218,.13); --border-soft:rgba(242,234,218,.07);
  --nav-scrolled:rgba(15,22,38,.84); --nav-scrolled-text:#F2EADA;
  --featured-border:rgba(242,234,218,.16);
  color-scheme: dark;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{font-family:var(--font-body);background:var(--bg-b);color:var(--text);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .3s ease,color .3s ease}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--terra);outline-offset:3px;border-radius:6px}
::selection{background:var(--terra);color:var(--on-terra)}
html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3{letter-spacing:0;font-feature-settings:"palt"}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--terra);color:var(--on-terra);padding:.7rem 1.2rem;border-radius:0 0 12px 0;z-index:200;font-weight:600;text-decoration:none}
.skip-link:focus{left:0}

/* ---------------- NAV ---------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;padding:1.1rem 0;transition:background .25s ease,box-shadow .25s ease,padding .25s ease;color:var(--hero-text)}
.nav.scrolled{background:var(--nav-scrolled);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--nav-scrolled-text);box-shadow:0 1px 0 var(--border-soft);padding:.7rem 0}
.nav-inner{max-width:1160px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:1.02rem}
.brand-kamon{width:40px;height:40px;flex-shrink:0;color:var(--terra)}
.nav-links{display:flex;gap:1.6rem;list-style:none;align-items:center}
.nav-links a{text-decoration:none;font-size:.92rem;font-weight:500;opacity:.82;transition:opacity .2s ease}
.nav-links a:hover{opacity:1}
.nav-cta{background:var(--terra);color:var(--on-terra)!important;padding:.55rem 1.2rem;border-radius:100px;font-weight:600;opacity:1!important}
.nav-cta:hover{background:var(--terra-deep)}
.nav-controls{display:flex;align-items:center;gap:.6rem}
.icon-btn{width:38px;height:38px;border-radius:50%;border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.85;transition:opacity .2s ease,transform .2s var(--ease)}
.icon-btn:hover{opacity:1;transform:translateY(-1px)}
.icon-btn svg{width:18px;height:18px}
.icon-btn.lang-btn{width:auto;min-width:38px;padding:0 .75rem;border-radius:100px;font-weight:700;font-size:.78rem;letter-spacing:.04em;white-space:nowrap}
[data-theme="dark"] .sun{display:block}[data-theme="dark"] .moon{display:none}
.sun{display:none}.moon{display:block}
.menu-btn{display:none}
@media(max-width:880px){
  .nav-links{display:none}
  .menu-btn{display:flex}
}
.mobile-menu{position:fixed;inset:0;background:var(--hero-bg);color:var(--hero-text);z-index:120;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;text-align:center;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .28s ease,visibility .28s ease}
.mobile-menu.open{visibility:visible;opacity:1;pointer-events:auto}
.mobile-menu a{opacity:0;transform:translateY(14px);transition:opacity .32s var(--ease),transform .32s var(--ease)}
.mobile-menu.open a{opacity:1;transform:none}
.mobile-menu.open a:nth-of-type(1){transition-delay:.04s}.mobile-menu.open a:nth-of-type(2){transition-delay:.08s}.mobile-menu.open a:nth-of-type(3){transition-delay:.12s}.mobile-menu.open a:nth-of-type(4){transition-delay:.16s}.mobile-menu.open a:nth-of-type(5){transition-delay:.2s}.mobile-menu.open a:nth-of-type(6){transition-delay:.24s}
.mobile-menu a{font-family:var(--font-display);font-weight:700;font-size:1.6rem;text-decoration:none}
.mobile-menu .close-btn{position:absolute;top:1.4rem;right:1.6rem}
.mobile-menu .brand-kamon{width:56px;height:56px;margin-bottom:1rem}

/* ---------------- HERO ---------------- */
.hero{background:var(--hero-bg);color:var(--hero-text);position:relative;overflow:hidden;padding:9.5rem 0 7.5rem}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23F6EFE3' stroke-width='1.4'%3E%3Ccircle cx='30' cy='30' r='10'/%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3Ccircle cx='90' cy='90' r='10'/%3E%3Ccircle cx='90' cy='90' r='4'/%3E%3Ccircle cx='90' cy='30' r='2'/%3E%3Ccircle cx='30' cy='90' r='2'/%3E%3C/g%3E%3C/svg%3E");}
.hero-inner{max-width:1160px;margin:0 auto;padding:0 2rem;display:grid;grid-template-columns:1.15fr .85fr;gap:3.5rem;align-items:center;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);margin-bottom:1.4rem}
.odu{display:inline-flex;gap:3px}
.odu i{width:3px;height:14px;background:var(--terra);border-radius:2px}
.hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2.7rem,6.6vw,5.2rem);line-height:1.02;letter-spacing:-.025em;margin-bottom:1.3rem}
.hero h1 .accent{color:var(--hero-accent)}
.hero-tagline{font-size:clamp(1.02rem,1.5vw,1.2rem);opacity:.88;max-width:34rem;margin-bottom:1rem}
.hero-proverb{max-width:46rem;margin:2.4rem auto 0;padding-top:1.4rem;text-align:center;cursor:default;
  border-top:1px solid color-mix(in srgb,var(--terra) 30%,transparent)}
.hero-proverb-native{font-size:clamp(.85rem,1.1vw,1rem);opacity:.92;letter-spacing:.01em;
  font-style:italic;line-height:1.5;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.hero-proverb-gloss{font-size:clamp(.72rem,.9vw,.8rem);opacity:.74;margin-top:.25rem;line-height:1.45;
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.hero-proverb.swapping .hero-proverb-native,
.hero-proverb.swapping .hero-proverb-gloss{opacity:0;transform:translateY(5px)}
.hero-proverb:hover .hero-proverb-native{opacity:.97}
/* Japanese has no italic; the browser would only slant the kanji */
.hero-proverb-native :lang(ja){font-style:normal}
.hero-origin{font-size:.92rem;color:var(--sand);margin-bottom:2.2rem;display:flex;align-items:center;gap:.55rem}
.hero-origin .dot{width:6px;height:6px;border-radius:50%;background:var(--gold)}
.hero-buttons{display:flex;gap:.9rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.95rem 1.9rem;border-radius:100px;font-weight:600;font-size:.97rem;text-decoration:none;transition:transform .2s var(--ease),background .2s ease,border-color .2s ease;border:2px solid transparent;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--terra);color:var(--on-terra)}
.btn-primary:hover{background:var(--terra-deep)}
.btn-ghost{border-color:color-mix(in srgb,currentColor 35%,transparent);color:inherit}
.btn-ghost:hover{border-color:currentColor}
.hero-visual{position:relative;justify-self:center;width:min(330px,76vw)}
.hero-links{display:flex;justify-content:center;gap:.6rem;margin-top:1.4rem}
.hero-link{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1.5px solid var(--border);box-shadow:0 2px 8px rgba(0,0,0,.06);
  transition:transform .28s var(--ease),border-color .2s,box-shadow .28s}
.hero-link:hover{transform:translateY(-3px);border-color:var(--terra);box-shadow:0 8px 20px color-mix(in srgb,var(--terra) 22%,transparent)}
.hero-link img,.hero-link svg{width:22px;height:22px;object-fit:contain;display:block}
.photo-tile{position:absolute;inset:18px -18px -18px 18px;background:var(--terra);border-radius:32px;transform:rotate(4deg)}
.photo-tile::after{content:'';position:absolute;inset:0;border-radius:32px;opacity:.18;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg stroke='%23F6EFE3' stroke-width='1.2' fill='none'%3E%3Cpath d='M0 14h56M0 42h56'/%3E%3Cpath d='M14 0v56M42 0v56'/%3E%3C/g%3E%3Ccircle cx='28' cy='28' r='3' fill='%23F6EFE3'/%3E%3C/svg%3E");}
.hero-photo{position:relative;width:100%;height:auto;border-radius:28px;object-fit:cover;aspect-ratio:4/4.4;transform:rotate(-2deg);box-shadow:0 16px 40px rgba(0,0,0,.30);filter:grayscale(.32) saturate(.92);transition:filter .55s var(--ease),transform .55s var(--ease),box-shadow .55s var(--ease)}
.hero-visual:hover .hero-photo{filter:grayscale(0) saturate(1);transform:rotate(-2deg) scale(1.025);box-shadow:0 22px 52px rgba(0,0,0,.36)}
.drum-float{position:absolute;width:172px;bottom:-60px;left:-84px;transform:rotate(7deg) scaleX(-1);filter:drop-shadow(0 14px 24px rgba(0,0,0,.35))}
@media(max-width:900px){
  .hero{padding:7.5rem 0 6rem}
  .hero-inner{grid-template-columns:1fr;gap:4rem}
  .hero-visual{width:min(300px,78vw)}
  .drum-float{width:130px;left:-44px;bottom:-46px}
}

/* ---------------- KINTSUGI SEAM ---------------- */
.seam{display:block;width:100%;height:30px;margin:-15px 0;position:relative;z-index:5;pointer-events:none}

/* ---------------- SECTIONS ---------------- */
.section-inner{max-width:1160px;margin:0 auto;padding:0 2rem;position:relative}
.section-head{max-width:640px;margin-bottom:3.2rem}
.section-eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--terra-ink);margin-bottom:1rem}
.section-eyebrow .odu i{background:var(--indigo);height:13px}
.section-title{font-family:var(--font-display);font-weight:800;font-size:clamp(2.1rem,4.4vw,3.3rem);letter-spacing:-.02em;line-height:1.06;margin-bottom:.9rem}
.section-sub{color:var(--text-2);font-size:1.04rem}
.block-a{background:var(--bg-a);border-top:1px solid var(--border-soft);padding:6.8rem 0}
.block-b{background:var(--bg-b);padding:6.8rem 0;position:relative}
.block-c{background:var(--bg-c);padding:6.8rem 0}
.more-link{display:inline-flex;align-items:center;gap:.4rem;margin-top:2.2rem;font-weight:600;font-size:.95rem;color:var(--indigo);text-decoration:none;border-bottom:2px solid color-mix(in srgb,var(--indigo) 30%,transparent);padding-bottom:2px;transition:border-color .2s ease}
.more-link:hover{border-color:var(--indigo)}
/* Section crest watermarks — the same ghosted language as the sub-page heroes, so the
   motif system reads as continuous instead of appearing only on inner pages. Clipping is
   handled by body{overflow-x:hidden}; the crest sits behind the content. */
.block-a,.block-c{position:relative}
.block-a>.section-inner,.block-b>.section-inner,.block-c>.section-inner{z-index:1}
.sec-crest{position:absolute;top:3rem;right:-30px;width:228px;height:228px;color:var(--terra);opacity:.05;pointer-events:none;z-index:0}
[data-theme="dark"] .sec-crest{opacity:.07}
@media(max-width:760px){.sec-crest{width:150px;right:-44px;top:2rem;opacity:.045}}

/* Scroll brush-reveal: each section's crest "paints in" left-to-right as the
   section enters view and brushes back out when it leaves (re-revealing on
   each pass). Driven by .crest-in, which living.js TOGGLES via its own
   observer (separate from the fire-once odu-tick). Starts hidden and brushes
   up to a visible opacity, combining a directional mask sweep with a fade.
   Pure CSS, no new assets. */
@property --brush{syntax:'<percentage>';inherits:false;initial-value:0%}
@media (hover:hover), (hover:none){
  .sec-crest{
    --brush:0%; opacity:0;
    -webkit-mask-image:linear-gradient(105deg,#000 var(--brush),rgba(0,0,0,0) calc(var(--brush) + 16%));
    mask-image:linear-gradient(105deg,#000 var(--brush),rgba(0,0,0,0) calc(var(--brush) + 16%));
    transition:--brush 1.1s var(--ease), opacity 1.1s var(--ease);
  }
  .crest-in .sec-crest{--brush:116%; opacity:.14}
  [data-theme="dark"] .crest-in .sec-crest{opacity:.18}
}
@media (prefers-reduced-motion: reduce){
  .sec-crest{-webkit-mask-image:none;mask-image:none;--brush:116%}
  .crest-in .sec-crest{opacity:.14}
}

/* ---------------- STATS ---------------- */
.stats{background:var(--stats-bg);color:var(--stats-text);padding:4.2rem 0}
.stats-inner{max-width:1160px;margin:0 auto;padding:0 2rem;display:grid;grid-template-columns:repeat(5,1fr);gap:1.6rem;min-height:6rem}
.stat{text-align:center;position:relative}
.stat+.stat::before{content:'';position:absolute;left:-1rem;top:14%;bottom:14%;width:1px;background:rgba(246,239,227,.25)}
.stat-num{font-family:var(--font-display);font-weight:800;font-size:clamp(2.6rem,5vw,4rem);line-height:1;letter-spacing:-.02em}
.stat-label{font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:1;margin-top:.5rem}
@media(max-width:920px){.stats-inner{grid-template-columns:repeat(3,1fr);gap:2rem 1.2rem}.stat+.stat::before{display:none}}
@media(max-width:560px){.stats-inner{grid-template-columns:repeat(2,1fr)}}

/* ---------------- ABOUT ---------------- */
.about-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:3.5rem;align-items:start}
.about-grid p{margin-bottom:1.1rem;color:var(--text-2);font-size:.98rem}
.about-grid p a{color:var(--terra-ink);font-weight:600}
.philosophy{background:var(--surface-alt);border-left:5px solid var(--gold);border-radius:0 var(--radius) var(--radius) 0;padding:1.9rem 1.9rem 1.7rem;position:relative}
.philosophy p{font-family:var(--font-display);font-weight:600;font-size:1.12rem;line-height:1.55;letter-spacing:-.005em;color:var(--text);margin-bottom:.9rem}
.philosophy cite{font-style:normal;font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--terra-ink)}
@media(max-width:900px){.about-grid{grid-template-columns:1fr;gap:2.4rem}}

/* ---------------- CARDS (news + research) ---------------- */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media(max-width:980px){.cards3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cards3{grid-template-columns:1fr}}
/* Research row: six equal cards, two rows of three. Cards stretch to the tallest
   in their row, so the tag strip and the science line are pinned to the bottom
   rather than floating wherever the description happens to end. */
#researchGrid .card{display:flex;flex-direction:column}
#researchGrid .card .tags{margin-top:auto;padding-top:1rem}
#researchGrid .card .card-science{margin-top:.9rem}

/* --- evidence line: counts and per-year output, computed from publications-data --- */
.eviline{display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap;margin-top:.9rem;
  padding-top:.8rem;border-top:1px solid var(--border-soft);font-size:.82rem;color:var(--text-3)}
.eviline b{font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:var(--terra-ink);line-height:1}
.spark{display:flex;align-items:flex-end;gap:2px;height:20px;margin-left:auto}
.spark i{width:4px;background:color-mix(in srgb,var(--indigo) 28%,transparent);border-radius:1px}
.spark i.hot{background:var(--terra)}

/* --- click a thread to open it full width; the others clear out --- */
#researchGrid .card{cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease),
  opacity .28s ease,border-color .3s ease}
#researchGrid.busy .card:not(.is-open){opacity:0;transform:scale(.97);pointer-events:none}
#researchGrid.open .card:not(.is-open){display:none}
#researchGrid.open .card.is-open{grid-column:1/-1;cursor:default}
/* the reveal animation is scroll-driven and would outrank the opacity rules above */
#researchGrid.busy .card:not(.is-open),#researchGrid.open .card:not(.is-open){animation:none!important}
#researchGrid .card.is-open{border-color:var(--terra);animation:rise .38s var(--ease)!important;opacity:1}
#researchGrid .card.is-open .card-odu{display:none}
#researchGrid .card.is-open .eviline{border-top-color:var(--border)}
#researchGrid .card.is-open .card-science{display:none}

.expand{display:none}
#researchGrid .card.is-open .expand{display:block}
/* full card width, set in two columns: one column across ~1050px is a 140-character measure */
.abstract{padding-top:1.4rem;margin-top:1.2rem;border-top:1px solid var(--border);
  font-size:1rem;line-height:1.65;color:var(--text-2);columns:2;column-gap:3.5rem;orphans:2;widows:2}
.refs{margin-top:1.6rem}
.refs h4{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--terra-ink);margin-bottom:.8rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.refs h4 span{font-family:var(--font-body);font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--text-3);font-size:.8rem}
.refs .pub-row{grid-template-columns:52px 1fr auto;margin-top:.5rem}
.moreref{display:block;width:100%;text-align:center;margin-top:.9rem;padding:.7rem;
  border:1.5px dashed var(--border);border-radius:var(--radius-sm);font-family:var(--font-body);
  font-size:.86rem;font-weight:600;color:var(--indigo);cursor:pointer;background:none}
.moreref:hover{border-color:var(--terra);color:var(--terra-ink)}
.card-close{position:absolute;top:1.4rem;right:1.5rem;width:34px;height:34px;border-radius:50%;
  border:1.5px solid var(--border);background:var(--surface);color:var(--text-2);cursor:pointer;
  display:none;place-items:center;transition:border-color .2s ease,color .2s ease}
#researchGrid .card.is-open .card-close{display:grid}
.card-close:hover{border-color:var(--terra);color:var(--terra-ink)}
.card-close svg{width:15px;height:15px}
@media(max-width:820px){.abstract{columns:1}}
@media (prefers-reduced-motion: reduce){
  #researchGrid .card.is-open{animation:none!important}
  #researchGrid.busy .card:not(.is-open){opacity:0;transform:none}
}

/* Reserve space for JS-rendered shells so they don't collapse-then-expand (CLS) on first paint */
#newsGrid,#researchGrid,#aboutGrid{min-height:300px}
@media(max-width:640px){#newsGrid,#researchGrid,#aboutGrid{min-height:0}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.8rem 1.6rem 1.6rem;position:relative;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 36px color-mix(in srgb,var(--indigo) 16%,transparent)}
.block-a .card{background:var(--surface-alt)}
.card-meta{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;flex-wrap:wrap}
.chip{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .7rem;border-radius:100px;white-space:nowrap}
.chip.award{background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold-ink)}
.chip.career,.chip.speaking,.chip.conference,.chip.memorial,.chip.visitor{background:color-mix(in srgb,var(--terra) 13%,transparent);color:var(--terra-ink)}
.chip.service,.chip.publication,.chip.grant{background:color-mix(in srgb,var(--indigo) 12%,transparent);color:var(--indigo)}
.card-date{font-size:.8rem;font-weight:600;color:var(--text-3)}
.card h3{font-family:var(--font-display);font-weight:700;font-size:1.14rem;letter-spacing:-.01em;line-height:1.3;margin-bottom:.55rem}
.card p{font-size:.91rem;color:var(--text-2)}
.card .card-link{display:inline-block;margin-top:.7rem;font-size:.86rem;font-weight:600;color:var(--terra-ink);text-decoration:none}
.card .card-link:hover{text-decoration:underline}
.card-odu{position:absolute;top:1.5rem;right:1.5rem;display:flex;gap:4px}
.card-odu i{width:3.5px;height:18px;border-radius:2px;background:var(--sand)}
.card-odu i.on{background:var(--terra)}
.card-icon{width:56px;height:56px;margin-bottom:1.1rem}
.tags{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:1rem}
.tag{font-size:.72rem;font-weight:600;letter-spacing:.04em;padding:.28rem .7rem;border-radius:100px;background:color-mix(in srgb,var(--indigo) 10%,transparent);color:var(--indigo)}

/* ---------------- PUBLICATIONS (homepage) ---------------- */
.pub-filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.8rem}
.filter-btn{font-family:var(--font-body);font-size:.85rem;font-weight:600;padding:.5rem 1.1rem;border-radius:100px;border:1.5px solid var(--border);background:var(--surface);color:var(--text-2);cursor:pointer;transition:all .2s ease}
.filter-btn:hover{border-color:var(--terra);color:var(--terra-ink)}
.filter-btn.active{background:var(--terra);border-color:var(--terra);color:var(--on-terra)}
.featured-pub{background:var(--indigo-deep);color:#F2EADA;border:1px solid var(--featured-border,transparent);border-radius:var(--radius);padding:2.3rem 2.3rem 2.1rem;position:relative;overflow:hidden;margin-bottom:2rem}
.featured-pub::before{content:'';position:absolute;inset:0;opacity:.06;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23F6EFE3' stroke-width='1.4'%3E%3Ccircle cx='30' cy='30' r='10'/%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3Ccircle cx='90' cy='90' r='10'/%3E%3Ccircle cx='90' cy='90' r='4'/%3E%3C/g%3E%3C/svg%3E");}
.featured-label{display:inline-flex;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.featured-pub h3{font-family:var(--font-display);font-weight:700;font-size:clamp(1.15rem,2.1vw,1.5rem);letter-spacing:-.01em;line-height:1.32;margin-bottom:.7rem;max-width:54rem;position:relative}
.featured-pub .venue{font-size:.9rem;color:var(--sand);margin-bottom:.9rem;position:relative}
.featured-pub p.sum{font-size:.92rem;opacity:.85;max-width:48rem;margin-bottom:1.3rem;position:relative}
.featured-chips{display:flex;gap:.6rem;flex-wrap:wrap;position:relative}
.featured-chips .chip{background:rgba(246,239,227,.12);color:#F2EADA}
.featured-chips .chip.gold{background:rgba(196,144,50,.28);color:#F2DCA8}
.pub-row{display:grid;grid-template-columns:58px 1fr auto;gap:1.2rem;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1.05rem 1.4rem;margin-top:.75rem;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.pub-row:hover{transform:translateY(-2px);box-shadow:0 12px 28px color-mix(in srgb,var(--indigo) 14%,transparent)}
.pub-year{font-family:var(--font-display);font-weight:800;font-size:1.08rem;color:var(--terra-ink)}
.pub-title{font-weight:600;font-size:.95rem;line-height:1.35}
.pub-authors{font-size:.82rem;color:var(--text-2);margin-top:.2rem}
.pub-venue{font-size:.8rem;color:var(--text-3);margin-top:.1rem}
.pub-side{display:flex;flex-direction:column;align-items:flex-end;gap:.45rem}
.pub-doi{font-size:.78rem;font-weight:700;color:var(--indigo);text-decoration:none;border:1.5px solid color-mix(in srgb,var(--indigo) 35%,transparent);padding:.25rem .7rem;border-radius:100px;transition:all .2s ease}
.pub-doi:hover{background:var(--indigo);color:#F6EFE3}
@media(max-width:760px){.pub-row{grid-template-columns:1fr;gap:.4rem;padding:1rem 1.15rem}.pub-year{font-size:.92rem}.pub-side{flex-direction:row;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.2rem}}

/* ---------------- JOURNEY ---------------- */
.thread{position:relative;max-width:760px;margin:0 auto;padding-left:34px}
.stop{position:relative;padding:0 0 3rem 44px}
.stop:last-child{padding-bottom:0}
.stop:not(:last-child)::before{content:'';position:absolute;left:-13px;top:50px;bottom:-4px;width:0;border-left:3px dashed var(--gold);opacity:.75}
.stop-badge{position:absolute;left:-34px;top:-2px;width:46px;height:46px;border-radius:50%;background:var(--stop-halo,var(--bg-a));border:2.5px solid var(--terra);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px var(--stop-halo,var(--bg-a))}
.stop-badge svg{width:26px;height:26px}
.stop-era{font-family:var(--font-display);font-weight:800;font-size:.92rem;letter-spacing:.06em;text-transform:uppercase;color:var(--terra-ink);margin-bottom:.35rem;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.stop-place{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--indigo);background:color-mix(in srgb,var(--indigo) 9%,transparent);padding:.22rem .6rem;border-radius:100px}
.stop h3{font-family:var(--font-display);font-weight:700;font-size:1.28rem;letter-spacing:-.01em;line-height:1.25;margin-bottom:.45rem}
.stop p{font-size:.95rem;color:var(--text-2);max-width:40rem}
.stop .tags{margin-top:.7rem}
@media(max-width:640px){.thread{padding-left:26px}.stop{padding-left:36px}.stop-badge{width:40px;height:40px;left:-30px}.stop-badge svg{width:22px;height:22px}}

/* ---------------- BRIDGE ---------------- */
.bridge{background:var(--bridge-bg);color:#F2EADA;padding:4.6rem 0;position:relative;overflow:hidden}
.bridge::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.13;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='%23F6EFE3' stroke-width='1.6'%3E%3Ccircle cx='40' cy='40' r='18'/%3E%3Ccircle cx='40' cy='40' r='11'/%3E%3Ccircle cx='40' cy='40' r='4'/%3E%3Cpath d='M104 24h32M104 32h32M104 40h32M104 48h32'/%3E%3Cpath d='M24 104l14 14M38 104l-14 14M52 104l14 14M66 104l-14 14'/%3E%3Ccircle cx='118' cy='112' r='3' fill='%23F6EFE3' stroke='none'/%3E%3Ccircle cx='130' cy='124' r='3' fill='%23F6EFE3' stroke='none'/%3E%3Ccircle cx='106' cy='124' r='3' fill='%23F6EFE3' stroke='none'/%3E%3Ccircle cx='118' cy='136' r='3' fill='%23F6EFE3' stroke='none'/%3E%3Cpath d='M8 76q12-10 24 0t24 0t24 0t24 0t24 0t24 0' stroke-width='1.3'/%3E%3C/g%3E%3C/svg%3E");}
.bridge-inner{max-width:900px;margin:0 auto;padding:0 2rem;text-align:center;position:relative}
.bridge p.big{font-family:var(--font-display);font-weight:600;font-size:clamp(1.2rem,2.3vw,1.65rem);line-height:1.5;letter-spacing:-.01em}
.bridge .note{margin-top:1rem;font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;opacity:.74;font-weight:600}

/* ---------------- CONTACT ---------------- */
.contact-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:3rem 2.4rem;text-align:center;max-width:760px;margin:0 auto}
.contact-card h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,3.4vw,2.4rem);letter-spacing:-.02em;margin-bottom:.8rem}
.contact-card>p{color:var(--text-2);max-width:34rem;margin:0 auto 1.8rem}
.contact-links{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
.contact-link{display:inline-flex;align-items:center;gap:.55rem;padding:.8rem 1.5rem;border-radius:100px;border:1.5px solid var(--border);text-decoration:none;font-weight:600;font-size:.93rem;transition:all .2s ease}
.contact-link:hover{border-color:var(--terra);color:var(--terra-ink);transform:translateY(-2px)}
.contact-link svg{width:18px;height:18px}

/* ---------------- FOOTER ---------------- */
.foot{background:var(--footer-bg);color:var(--footer-text);padding:3rem 0 2.4rem}
.foot-inner{max-width:1160px;margin:0 auto;padding:0 2rem}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;padding-bottom:1.6rem;border-bottom:1px solid rgba(246,239,227,.12);margin-bottom:1.4rem}
.foot .route{display:flex;align-items:center;gap:.6rem;font-weight:600;color:var(--sand)}
.foot-links{display:flex;gap:1.4rem;flex-wrap:wrap;list-style:none}
.foot-links a{font-size:.86rem;text-decoration:none;opacity:.8;transition:opacity .2s ease}
.foot-links a:hover{opacity:1}
.foot-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.84rem;opacity:.75}

/* ---------------- MOTION ---------------- */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.hero-inner{animation:rise .5s var(--ease) both}
.reveal{opacity:0}
.reveal.in{opacity:1;animation:rise .45s var(--ease)}
/* CSS scroll-driven animations: progressive enhancement, JS observer is the fallback.
   Range starts at entry 0% so any element already partially in the initial viewport
   resolves to full opacity immediately and can never be stranded invisible. */
@supports (animation-timeline: view()){
  html.sda .reveal{opacity:1;animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal,.hero-inner{opacity:1;transform:none}
}

/* ---------------- PRINT ---------------- */
@media print{
  .nav,.mobile-menu,.seam,.hero-buttons,.more-link,.pub-filters,.bridge,.foot-links{display:none!important}
  body,.block-a,.block-b,.block-c{background:#fff!important;color:#000!important}
  .hero{background:#fff!important;color:#000!important;padding:1rem 0}
  .hero-photo{box-shadow:none}
  .card,.pub-row,.featured-pub,.contact-card{border:1px solid #ccc!important;box-shadow:none!important;background:#fff!important;color:#000!important}
  .reveal{opacity:1!important}
}

/* ---------------- STATUS PILL ---------------- */
.status-pill{display:inline-flex;align-items:center;gap:.55rem;background:rgba(196,144,50,.14);border:1px solid rgba(196,144,50,.42);color:#F2DCA8;font-size:.82rem;font-weight:600;padding:.45rem 1rem;border-radius:100px;margin-bottom:2.2rem}
.status-pill .pulse{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(196,144,50,.45)}50%{box-shadow:0 0 0 7px rgba(196,144,50,0)}}
.hero-origin{margin-bottom:1.1rem}

/* ---------------- GRANTS ---------------- */
.grants-summary{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:1.8rem}
.fund-chip{background:var(--surface-alt);border:1px solid var(--border);border-radius:100px;padding:.55rem 1.15rem;font-size:.84rem;font-weight:600;color:var(--text-2)}
.fund-chip b{font-family:var(--font-display);font-weight:800;color:var(--terra-ink);font-size:1.02rem;margin-right:.4rem}
.grant-row{display:grid;grid-template-columns:1fr auto;gap:1.4rem;align-items:center;background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1.15rem 1.5rem;margin-top:.75rem;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.grant-row:hover{transform:translateY(-2px);box-shadow:0 12px 28px color-mix(in srgb,var(--indigo) 14%,transparent)}
.grant-meta{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:.5rem}
.grant-period{font-size:.78rem;font-weight:600;color:var(--text-3)}
.grant-row h3{font-family:var(--font-body);font-weight:600;font-size:.97rem;line-height:1.4}
.grant-sub{font-size:.8rem;color:var(--text-3);margin-top:.25rem}
.grant-amount{font-family:var(--font-display);font-weight:800;font-size:1.18rem;color:var(--indigo);white-space:nowrap}
.chip.g-active{background:color-mix(in srgb,var(--gold) 20%,transparent);color:var(--gold-ink)}
.chip.g-done{background:color-mix(in srgb,var(--indigo) 11%,transparent);color:var(--indigo)}
.chip.g-pi{background:color-mix(in srgb,var(--terra) 14%,transparent);color:var(--terra-ink)}
.chip.g-copi{background:color-mix(in srgb,var(--indigo) 12%,transparent);color:var(--indigo)}
@media(max-width:700px){.grant-row{grid-template-columns:1fr;gap:.6rem}}

/* ---------------- VIEW TRANSITIONS (cross-document) ---------------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .18s ease both}
::view-transition-new(root){animation:vt-in .26s ease both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ---------------- SCROLLSPY ---------------- */
.nav-links a:not(.nav-cta){position:relative}
.nav-links a:not(.nav-cta)::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:2.5px;border-radius:2px;background:var(--terra);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav-links a.active{opacity:1}
.nav-links a.active::after{transform:scaleX(1)}

/* ---------------- WHOLE-SURFACE CLICK TARGETS ---------------- */
.pub-row,.news-lead{position:relative}
.stretch::after{content:'';position:absolute;inset:0;border-radius:inherit;cursor:pointer}
.card:focus-within,.pub-row:focus-within,.news-lead:focus-within{outline:3px solid var(--terra);outline-offset:3px}
.card .stretch:focus-visible,.pub-row .stretch:focus-visible,.news-lead .stretch:focus-visible{outline:none}

/* ---------------- FILTER MOTION ---------------- */
.pub-row{animation:rise .3s var(--ease) both}

/* ---------------- NEWS LEAD ---------------- */
.news-lead{display:grid;grid-template-columns:.92fr 1.08fr;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:1.4rem;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.news-lead:hover{transform:translateY(-3px);box-shadow:0 16px 36px color-mix(in srgb,var(--indigo) 16%,transparent)}
.news-lead-media{position:relative;min-height:260px;background:linear-gradient(135deg,var(--indigo) 0%,var(--indigo-deep) 100%)}
.lead-mark{position:absolute;inset:0;margin:auto;width:96px;height:96px;color:rgba(246,239,227,.35)}
.news-lead-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.news-lead-body{padding:1.9rem 2rem 1.8rem}
.news-lead-body h3{font-family:var(--font-display);font-weight:800;font-size:clamp(1.2rem,2vw,1.5rem);letter-spacing:-.015em;line-height:1.22;margin:.25rem 0 .6rem}
.news-lead-body p{font-size:.93rem;color:var(--text-2)}
.news-lead-body .card-link{display:inline-block;margin-top:.8rem;font-size:.88rem;font-weight:600;color:var(--terra-ink);text-decoration:none}
@media(max-width:860px){.news-lead{grid-template-columns:1fr}.news-lead-media{min-height:190px}}

/* ---------------- WTC DEMO ---------------- */
.pub-hero{display:grid;grid-template-columns:1.08fr .92fr;gap:1.4rem;margin-bottom:2rem;align-items:stretch}
.pub-hero .featured-pub{margin-bottom:0}
@media(max-width:980px){.pub-hero{grid-template-columns:1fr}}
.wtc-demo{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:1.5rem 1.5rem 1.3rem;display:flex;flex-direction:column}
.wtc-demo h3{font-family:var(--font-display);font-weight:800;font-size:1.12rem;letter-spacing:-.01em;line-height:1.25}
.demo-note{font-size:.78rem;color:var(--text-3);margin:.35rem 0 1rem}
.meter-top{display:flex;justify-content:space-between;align-items:baseline;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-2);margin-bottom:.4rem;gap:.6rem}
.meter-top b{font-family:var(--font-display);font-weight:800;font-size:.95rem;color:var(--terra-ink)}
.meter-bar{height:10px;border-radius:100px;background:color-mix(in srgb,var(--indigo) 11%,transparent);overflow:hidden}
.meter-bar i{display:block;height:100%;width:12%;border-radius:100px;background:linear-gradient(90deg,var(--terra),var(--gold));transition:width .7s var(--ease)}
.demo-chat{flex:1;min-height:185px;max-height:235px;overflow-y:auto;mask-image:linear-gradient(to bottom,transparent 0,#000 16px);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16px);display:flex;flex-direction:column;gap:.55rem;margin:1rem 0;padding-right:.25rem;scrollbar-width:thin}
.msg{max-width:90%;padding:.6rem .85rem;border-radius:14px;font-size:.85rem;line-height:1.45;animation:rise .25s var(--ease)}
.msg.agent{background:color-mix(in srgb,var(--indigo) 9%,transparent);border-bottom-left-radius:4px;align-self:flex-start}
.msg.user{background:var(--terra);color:var(--on-terra);border-bottom-right-radius:4px;align-self:flex-end}
.msg.end{border:1.5px dashed var(--gold);background:color-mix(in srgb,var(--gold) 10%,transparent)}
.strategy-chip{display:block;margin-top:.45rem;font-size:.6rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink)}
.demo-choices{display:flex;flex-direction:column;gap:.5rem;min-height:44px}
.demo-choice{font-family:var(--font-body);text-align:left;font-size:.84rem;font-weight:600;padding:.62rem 1rem;border-radius:12px;border:1.5px solid var(--border);background:transparent;color:var(--text);cursor:pointer;transition:border-color .2s ease,color .2s ease,transform .2s var(--ease);animation:rise .25s var(--ease) both}
.demo-choice:nth-child(2){animation-delay:60ms}.demo-choice:nth-child(3){animation-delay:120ms}
.demo-choice:hover{border-color:var(--terra);color:var(--terra-ink);transform:translateX(3px)}
.demo-choice.restart{text-align:center;border-color:var(--terra);color:var(--terra-ink)}
@media(max-width:480px){.brand span{font-size:.92rem;white-space:nowrap}.brand-kamon{width:34px;height:34px}}

/* ---------------- JA DISPLAY TUNING ---------------- */
html[lang="ja"] .hero h1{line-height:1.14;font-size:clamp(2.3rem,5.6vw,4.3rem)}
html[lang="ja"] .section-title{line-height:1.18}
html[lang="ja"] .news-lead-body h3,html[lang="ja"] .card h3{line-height:1.4}
@media(max-width:480px){html[lang="ja"] .brand span{font-size:.8rem}.nav-controls{gap:.45rem}.icon-btn{width:34px;height:34px}}

/* ---------------- STATUS PILL AS LINK ---------------- */
a.status-pill{text-decoration:none;transition:border-color .2s ease,background .2s ease}
a.status-pill:hover{border-color:var(--gold);background:rgba(196,144,50,.22)}

/* ---------------- NEWS GRID UNIFORMITY + MEMORIAL ---------------- */
#newsGrid .card h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#newsGrid .card p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
#newsGrid .card{display:flex;flex-direction:column}
#newsGrid .card .card-link{margin-top:auto;padding-top:.7rem}
.memorial-card{border-top:3px solid var(--gold)}
.chip.memorial{background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold-ink)}

/* ---------------- FONT FALLBACK METRICS (anti-FOUT) ---------------- */
@font-face{font-family:'Bricolage Fallback';src:local('Arial Bold'),local('Arial');size-adjust:104%;ascent-override:94%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:'DM Sans Fallback';src:local('Arial');size-adjust:99%}

/* ---------------- YEAR SLIDER ---------------- */
.year-filter{display:flex;align-items:center;gap:.85rem;margin:-.4rem 0 1.7rem;flex-wrap:wrap}
.year-filter label{font-size:.85rem;font-weight:600;color:var(--text-2)}
.year-filter input[type=range]{flex:1;max-width:300px;accent-color:var(--terra);cursor:pointer}
.year-filter output{font-family:var(--font-display);font-weight:800;font-size:.95rem;color:var(--terra-ink);min-width:60px}
.pub-more-row{display:block;text-align:center;margin-top:1rem;padding:.85rem 1rem;border:1.5px dashed var(--border);border-radius:var(--radius-sm);font-weight:600;font-size:.9rem;color:var(--indigo);text-decoration:none;transition:border-color .2s ease,color .2s ease}
.pub-more-row:hover{border-color:var(--terra);color:var(--terra-ink)}

/* ---------------- ABOUT SIDE: PHILOSOPHY + INDIGO CARD ---------------- */
.about-side{display:flex;flex-direction:column;gap:1.4rem}
.indigo-card{background:var(--bridge-bg);color:#F2EADA;border-radius:var(--radius);padding:1.8rem 1.7rem;position:relative;overflow:hidden}
.indigo-card::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.06;background-size:110px 110px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='%23F6EFE3' stroke-width='1.6'%3E%3Ccircle cx='40' cy='40' r='18'/%3E%3Ccircle cx='40' cy='40' r='11'/%3E%3Ccircle cx='40' cy='40' r='4'/%3E%3Cpath d='M104 24h32M104 32h32M104 40h32M104 48h32'/%3E%3Cpath d='M24 104l14 14M38 104l-14 14M52 104l14 14M66 104l-14 14'/%3E%3Cpath d='M8 76q12-10 24 0t24 0t24 0t24 0t24 0t24 0' stroke-width='1.3'/%3E%3C/g%3E%3C/svg%3E");}
.indigo-card>*{position:relative}
.about-grid .indigo-card p{color:#F2EADA;margin-bottom:0}
.indigo-card .big{font-family:var(--font-display);font-weight:600;font-size:1.04rem;line-height:1.62;letter-spacing:-.005em}
.indigo-card .note{margin-top:.95rem;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;opacity:.74;font-weight:700}
.dye-row{display:flex;align-items:center;gap:.85rem;margin-bottom:1.05rem}
.dye{width:44px;height:44px;border-radius:10px;background:rgba(246,239,227,.07);padding:4px;flex-shrink:0}
.dye-arrow{color:var(--gold);font-weight:700;font-size:1.05rem}
.stat-link{display:block;text-decoration:none;color:inherit;border-radius:14px;transition:transform .2s var(--ease)}
.stat-link:hover{transform:translateY(-3px)}
.stat-link:hover .stat-label{opacity:1;text-decoration:underline;text-underline-offset:3px}

/* ---------------- DEMO TYPING INDICATOR ---------------- */
.msg.typing{display:inline-flex;align-items:center;gap:5px;min-height:1.1em}
.msg.typing i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.3;animation:tdot 1.1s ease-in-out infinite}
.msg.typing i:nth-child(2){animation-delay:.18s}
.msg.typing i:nth-child(3){animation-delay:.36s}
@keyframes tdot{0%,70%,100%{opacity:.25;transform:translateY(0)}35%{opacity:.95;transform:translateY(-2px)}}

/* ---------------- SELECTABLE TEXT OVER STRETCHED LINKS ---------------- */
.pub-row .pub-title,.pub-row .pub-authors,.pub-row .pub-venue,#newsGrid .card p,#newsGrid .card h3,.news-lead-body p,.news-lead-body h3{position:relative;z-index:1}

/* ---------------- STATUS PILL FLAG ---------------- */
.status-pill .flag-es{width:18px;height:12px;border-radius:2.5px;flex-shrink:0;box-shadow:0 0 0 1px rgba(246,239,227,.25)}

/* ---------------- ABOUT CHAPTER CARDS ---------------- */
.about-card{display:flex;flex-direction:column}
.about-card .ch{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-weight:800;font-size:.8rem;letter-spacing:.08em;color:var(--terra-ink);margin-bottom:.6rem}
.about-card h3{font-family:var(--font-display);font-weight:800;font-size:1.25rem;letter-spacing:-.015em;line-height:1.2;margin-bottom:.6rem}
.about-card p{font-size:.92rem;color:var(--text-2)}
.about-card p a{color:var(--terra-ink);font-weight:600}
.about-card .tags{margin-top:auto;padding-top:1.2rem}
.about-card .cv{margin-top:.8rem;font-weight:600;font-size:.88rem;color:var(--terra-ink);text-decoration:none}
.about-card .cv:hover{text-decoration:underline}
.about-card.quote{border-left:5px solid var(--gold)}
.about-card.quote p{font-family:var(--font-body);font-style:italic;font-weight:400;font-size:1.04rem;line-height:1.62;color:var(--text-2)}
.about-card.quote .oq{font-family:var(--font-display);font-style:normal;font-weight:800;font-size:1.7rem;color:var(--gold);margin-right:.05em;line-height:0;vertical-align:-.3em}
.about-card.quote cite{display:block;margin-top:.9rem;font-style:normal;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--terra-ink)}
.about-card.indigo{background:var(--bridge-bg);color:#F2EADA;border-color:transparent}
.about-card.indigo p{color:#F2EADA}
.about-card.indigo .lead{font-family:var(--font-display);font-weight:600;font-size:1rem;margin-bottom:1rem}
.about-card.indigo .tags{margin-top:1.2rem;padding-top:0}
.about-card.indigo .tag{background:rgba(246,239,227,.14);color:#F2EADA}
.about-card .dye-row{justify-content:center}
.about-card .dye-fig{display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center}
.about-card .dye-fig figcaption{font-size:.58rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;opacity:.72}
html[lang="ja"] .about-card h3{line-height:1.35}

/* ---------------- PAGE LOADER (first-paint brand moment) ---------------- */
#page-loader{position:fixed;inset:0;z-index:9999;background:#1D2E4F;display:flex;align-items:center;justify-content:center;transition:opacity .55s ease,transform .55s var(--ease),visibility .55s}
html.no-loader #page-loader{display:none}  /* suppressed (e.g. returning to home from within the site) */
#page-loader.done{opacity:0;visibility:hidden;transform:translateY(-22px);pointer-events:none}
.pl-row{display:flex;gap:1.05rem;align-items:flex-end}
.pl-crest{width:46px;height:46px;color:#EAD9BC;opacity:.38;animation:pl-hop 1.9s var(--pl-d,0s) infinite cubic-bezier(.3,.7,.4,1)}
@keyframes pl-hop{0%{transform:translateY(0) scale(1);opacity:.38}18%{transform:translateY(-15px) scale(1.06);opacity:1}38%{transform:translateY(0) scale(1);opacity:.72}100%{transform:translateY(0) scale(1);opacity:.38}}
@media (prefers-reduced-motion: reduce){.pl-crest{animation:none;opacity:1}#page-loader{transition:opacity .2s ease}}

/* ---------------- BACK TO TOP (bottom-of-page only) ---------------- */
.to-top{position:fixed;right:1.4rem;bottom:1.4rem;width:48px;height:48px;border-radius:50%;border:none;background:var(--terra);color:var(--on-terra);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.28);z-index:80;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .3s ease,transform .3s var(--ease),background .2s ease}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--terra-deep)}
.to-top svg{width:20px;height:20px}
@media print{.to-top{display:none!important}}

/* ---------------- INLINE FLAGS ---------------- */
.flag{width:18px;height:12px;border-radius:2.5px;flex-shrink:0;display:inline-block;vertical-align:-1px}
.flag-jp{box-shadow:0 0 0 1px rgba(40,20,16,.14)}
.hero-origin{flex-wrap:wrap}
.hero-origin .arr{opacity:.65}
.hero-origin .flag-jp{box-shadow:0 0 0 1px rgba(246,239,227,.3)}
.tag{display:inline-flex;align-items:center;gap:.35rem}

/* ---------------- HOMEPAGE BIBTEX BUTTON ---------------- */
button.pub-doi{background:transparent;font-family:var(--font-body);cursor:pointer;position:relative;z-index:1}
button.pub-doi.done{background:var(--gold);border-color:var(--gold);color:#281410}

/* ============================================================
   MICRO-INTERACTIONS LAYER  (additive — listening vocabulary)
   One idea (a disturbance propagating, like sound on a drumskin)
   expressed at three scales: page (hero field), section (odu
   signal-tick), card (card-odu ripple). All reduced-motion safe.
   ============================================================ */

/* ---- PAGE SCALE: hero listening field canvas ----
   The field REBUILDS the hero's own ::before motif as movable nodes, so the
   underlying pattern itself ripples — not a second overlay. When the field
   is active (JS on, motion allowed) we hide the static ::before to avoid a
   double pattern; with no JS or reduced motion, the original ::before stays. */
#hero-field{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;display:block}
.hero>.hero-inner{z-index:2}
.hero.mi-field-on::before{display:none}
/* secondary pages use .page-hero with .section-inner */
.page-hero>.section-inner{position:relative;z-index:2}
.page-hero.mi-field-on::before{display:none}

/* ---- SECTION SCALE: odu signal-tick on scroll-in ----
   The eyebrow's odu bars start collapsed and "tick" up in
   sequence when their section enters view, like a received signal. */
.section-eyebrow .odu i,.eyebrow .odu i{transform-origin:bottom;transition:transform .45s var(--ease),opacity .45s var(--ease)}
.mi-tick .section-eyebrow .odu i,.mi-tick .eyebrow .odu i,.mi-tick.section-eyebrow .odu i,.mi-tick.eyebrow .odu i{transform:scaleY(.18);opacity:.4}
.mi-tick.mi-in .section-eyebrow .odu i,.mi-tick.mi-in .eyebrow .odu i,.mi-tick.mi-in.section-eyebrow .odu i,.mi-tick.mi-in.eyebrow .odu i{transform:scaleY(1);opacity:1}
.mi-tick.mi-in .section-eyebrow .odu i:nth-child(1){transition-delay:.05s}
.mi-tick.mi-in .section-eyebrow .odu i:nth-child(2){transition-delay:.16s}
.mi-tick.mi-in .eyebrow .odu i:nth-child(1){transition-delay:.05s}
.mi-tick.mi-in .eyebrow .odu i:nth-child(2){transition-delay:.16s}

/* ---- CARD SCALE: card-odu ripple on hover ----
   The 3-dot binary marker ripples terracotta in sequence on hover,
   the same propagation language as the field at card scale. */
.card .card-odu i{transition:background .3s var(--ease),transform .3s var(--ease)}
.card:hover .card-odu i{background:var(--terra);transform:translateY(-2px)}
.card:hover .card-odu i:nth-child(1){transition-delay:0s}
.card:hover .card-odu i:nth-child(2){transition-delay:.07s}
.card:hover .card-odu i:nth-child(3){transition-delay:.14s}
/* dots return to rest in the same order when the pointer leaves */
.card .card-odu i:nth-child(1){transition-delay:.14s}
.card .card-odu i:nth-child(2){transition-delay:.07s}
.card .card-odu i:nth-child(3){transition-delay:0s}

@media (prefers-reduced-motion: reduce){
  #hero-field{opacity:.45}
  .mi-tick .section-eyebrow .odu i,.mi-tick .eyebrow .odu i{transform:none;opacity:1}
  .card:hover .card-odu i{transform:none}
}

/* ============================================================
   ABOUT SECTION micro-interactions (additive)
   Each card gets a gesture that expresses its own meaning:
   01 bio — CV arrow nudge; 02 quote — gold border inks in + quote
   mark settles; 03 indigo — the dye thread travels Benin→Japan on
   hover, enacting "two crafts, the same indigo." Listening/dye
   vocabulary, reduced-motion safe. Cards are JS-rendered, so these
   are :hover / .in driven (survive language re-render automatically). */

/* ---- 01 "Who I am": CV link arrow nudge ---- */
.about-card .cv{display:inline-flex;align-items:center;gap:.3rem;transition:gap .25s var(--ease),color .2s ease}
.about-card .cv:hover{gap:.55rem}

/* ---- 02 "What I believe": quote mark settle + gold border ink-in ---- */
.about-card.quote{position:relative;overflow:hidden}
/* draw the gold rule top→bottom when the card reveals (replaces the static border-left) */
.about-card.quote{border-left-color:transparent}
.about-card.quote::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--gold);
  transform:scaleY(0);transform-origin:top;transition:transform .7s var(--ease)}
.about-card.quote.in::before,.sda .about-card.quote::before{transform:scaleY(1)}
.about-card.quote .oq{display:inline-block;transform:translateY(.12em) scale(.7);opacity:0;
  transition:transform .55s var(--ease) .15s,opacity .55s ease .15s}
.about-card.quote.in .oq,.sda .about-card.quote .oq{transform:none;opacity:1}

/* ---- 03 "The same indigo": dye thread travels on hover ---- */
.about-card.indigo .dye-row{position:relative}
.about-card.indigo .dye{transition:transform .4s var(--ease),filter .4s ease;transform-origin:center}
/* the SVG thread injected by living.js, sitting where ⟶ was */
.dye-thread{display:block;width:46px;height:20px;overflow:visible}
.dye-thread path{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:45;stroke-dashoffset:45;transition:stroke-dashoffset .6s var(--ease)}
.dye-thread .head{stroke-dasharray:none;stroke-dashoffset:0;opacity:0;transition:opacity .2s ease .5s}
/* on hover: Benin glyph blooms first, thread draws across, Japan glyph blooms last */
.about-card.indigo:hover .dye-fig:first-child .dye{transform:scale(1.12);filter:brightness(1.3)}
.about-card.indigo:hover .dye-thread path{stroke-dashoffset:0}
.about-card.indigo:hover .dye-thread .head{opacity:1}
.about-card.indigo:hover .dye-fig:last-child .dye{transform:scale(1.12);filter:brightness(1.3);
  transition-delay:.5s}

@media (prefers-reduced-motion: reduce){
  .about-card.quote::before{transform:scaleY(1);transition:none}
  .about-card.quote .oq{transform:none;opacity:1;transition:none}
  .about-card.indigo .dye,.dye-thread path,.dye-thread .head{transition:none}
  .about-card.indigo:hover .dye-thread path{stroke-dashoffset:0}
}

/* ============================================================
   CONCEPT-B BORROWS (ported into the existing identity)
   1) .card-science — muted technical line under each research card
   2) .manifesto — "attuned intelligence" thesis section
   3) .pub-why — "why it matters" line on publications
   4) #cursor-halo — site-wide soft presence following the pointer
   All use existing tokens (terracotta/indigo/sand), reduced-motion safe.
   ============================================================ */

/* 1) the science line */
.card-science{margin-top:.9rem;font-size:.78rem;line-height:1.5;color:var(--text-3);
  display:flex;flex-direction:column;gap:.15rem}
.card-science span{font-size:.64rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--terra-ink)}

/* 2) attuned-intelligence manifesto */
.manifesto{padding:clamp(4.5rem,11vh,8rem) 0;text-align:center;position:relative;overflow:hidden}
.manifesto .manifesto-inner{max-width:600px;margin:0 auto;padding:0 1.5rem;position:relative;z-index:1}
.manifesto .m-eyebrow{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.8rem;
  font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--terra-ink)}
.manifesto .m-eyebrow .odu{display:inline-flex;gap:3px}
.manifesto .m-eyebrow .odu i{width:3px;height:13px;background:var(--terra);border-radius:2px}
.manifesto p{font-family:var(--font-display);font-weight:500;font-size:clamp(1.15rem,2.2vw,1.6rem);
  line-height:1.32;letter-spacing:-.015em;color:var(--text)}
.manifesto p .em{font-style:italic;color:var(--terra-ink)}
.manifesto p + p{margin-top:1.3rem}
.manifesto .turn{display:block;margin-top:2.2rem;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.3rem,2.6vw,1.85rem);line-height:1.25;letter-spacing:-.02em}
.manifesto .turn .strike{color:var(--text-3);text-decoration:line-through;text-decoration-thickness:2px;
  text-decoration-color:color-mix(in srgb,var(--terra) 55%,transparent)}
.manifesto .turn .keep{color:var(--terra-ink);font-style:italic}

/* 3) why-it-matters line on publications */
.pub-why{margin-top:.35rem;font-size:.85rem;line-height:1.5;color:var(--text-3);font-style:italic}
.pub-why::before{content:'';display:inline-block;width:14px;height:1px;background:var(--terra);
  vertical-align:middle;margin-right:.5rem;opacity:.8}

/* 4) site-wide cursor halo */
#cursor-halo{position:fixed;top:0;left:0;width:340px;height:340px;border-radius:50%;pointer-events:none;
  z-index:5;transform:translate(-50%,-50%);opacity:0;mix-blend-mode:normal;will-change:left,top,opacity;
  transition:opacity .6s var(--ease),width .35s var(--ease),height .35s var(--ease);
  background:radial-gradient(circle,color-mix(in srgb,var(--terra) 9%,transparent) 0%,transparent 62%)}
#cursor-halo.warm{width:440px;height:440px;
  background:radial-gradient(circle,color-mix(in srgb,var(--terra) 15%,transparent) 0%,transparent 60%)}

@media (prefers-reduced-motion: reduce){
  #cursor-halo{display:none}
}
@media (hover:none){
  #cursor-halo{display:none}
}