/* =========================================================================
   Sondipon Adhikari -- research site, 2026
   One stylesheet. System fonts only. No external requests of any kind, so the
   site loads identically in China and behind restrictive proxies.

   Three palettes are supplied. Set PALETTE in tools/build.py:
       "copper"    default: cream paper, deep navy ink, copper accent
       "slate"     warm off-white paper, navy, brick red
       "graphite"  clean white, deep teal, amber-brown
   Both carry a dark-mode variant driven by the reader's system setting.

   Three hero visuals are supplied. Switch by editing the <img src> in
   index.html between assets/img/hero-a.svg, hero-b.svg and hero-c.svg.
   ========================================================================= */

/* ---------- palette: slate (default) ---------- */
:root,
:root[data-palette="slate"] {
  --paper:      #fcfbf8;
  --paper-2:    #f3f1ea;
  --paper-3:    #eae7dd;
  --ink:        #171a1f;
  --ink-2:      #4a515c;
  --ink-3:      #757d8a;
  --line:       #e2ded2;
  --accent:     #1b3f6b;   /* navy, headings and links */
  --accent-2:   #a8331f;   /* signal, used sparingly */
  --accent-sft: #e9eef5;
  --focus:      #1b3f6b;
}

:root[data-palette="graphite"] {
  --paper:      #ffffff;
  --paper-2:    #f4f6f7;
  --paper-3:    #e9edef;
  --ink:        #14181b;
  --ink-2:      #454e54;
  --ink-3:      #6f787e;
  --line:       #dfe4e7;
  --accent:     #14555a;   /* deep teal */
  --accent-2:   #9a5b12;   /* amber-brown */
  --accent-sft: #e4efef;
  --focus:      #14555a;
}


/* ---------- palette: copper ----------
   Taken from the revised_attempt stylesheet: deep navy ink #13293d on warm
   cream #f7f3eb, with copper #bd6b42 as the accent and a near-black footer.

   Two coppers are used rather than one. The bright #bd6b42 measures 3.55:1
   against the cream, which clears the WCAG bar for large text, borders and
   figure strokes but not for body-size text. The darker #8d4427 measures
   6.35:1 and carries anything small: eyebrows, links, captions. They read as
   the same colour and only one of them is legible at 12px.                  */
:root[data-palette="copper"] {
  --paper:      #f7f3eb;
  --paper-2:    #eee8de;
  --paper-3:    #e5dccd;
  --ink:        #13293d;
  --ink-2:      #496070;
  --ink-3:      #5a6e7d;
  --line:       #ddd4c4;
  --accent:     #8d4427;   /* copper, legible at small sizes */
  --accent-2:   #bd6b42;   /* copper, display sizes and figure strokes */
  --accent-sft: #f6e8dd;
  --focus:      #8d4427;
}

/* colour-only adjustments for this palette. No layout, spacing or content
   changes: every rule below sets a colour and nothing else. */
:root[data-palette="copper"] .arch .hub { fill: var(--ink); }
:root[data-palette="copper"] .arch .link { stroke: var(--accent-2); opacity: 0.55; }
:root[data-palette="copper"] .btn {
  background: var(--ink); border-color: var(--ink); color: #fffdf8;
}
:root[data-palette="copper"] .btn:hover {
  background: var(--accent-2); border-color: var(--accent-2); color: #fffdf8;
}
:root[data-palette="copper"] .btn.ghost { background: transparent; color: var(--ink-2); }
:root[data-palette="copper"] .btn.ghost:hover {
  background: transparent; border-color: var(--accent-2); color: var(--accent);
}
:root[data-palette="copper"] .metrics { background: var(--ink); border-color: var(--ink); }
:root[data-palette="copper"] .metric { border-left-color: rgba(255,253,248,0.16); }
:root[data-palette="copper"] .metric b { color: #e7b28e; }
:root[data-palette="copper"] .metric span { color: rgba(255,253,248,0.66); }
:root[data-palette="copper"] .site-foot { background: #0d2030; border-color: #0d2030; }
:root[data-palette="copper"] .site-foot,
:root[data-palette="copper"] .site-foot p,
:root[data-palette="copper"] .foot-base { color: rgba(255,253,248,0.72); }
:root[data-palette="copper"] .site-foot h4 { color: #e7b28e; }
:root[data-palette="copper"] .site-foot a { color: rgba(255,253,248,0.86); }
:root[data-palette="copper"] .site-foot a:hover { color: #e7b28e; }
:root[data-palette="copper"] .foot-base { border-top-color: rgba(255,253,248,0.18); }
:root[data-palette="copper"] .talks .kind.plenary { background: var(--ink); color: #fffdf8; }

@media (prefers-color-scheme: dark) {
  :root[data-palette="copper"]:not([data-scheme="light"]) {
    --paper:      #0d1620;
    --paper-2:    #131f2b;
    --paper-3:    #1b2836;
    --ink:        #f1ece2;
    --ink-2:      #b9c4ce;
    --ink-3:      #8b99a6;
    --line:       #26333f;
    --accent:     #e7b28e;
    --accent-2:   #d98a5c;
    --accent-sft: #1d2a35;
    --focus:      #e7b28e;
  }
  :root[data-palette="copper"]:not([data-scheme="light"]) .arch .hub { fill: #22394d; }
  :root[data-palette="copper"]:not([data-scheme="light"]) .btn {
    background: var(--accent-2); border-color: var(--accent-2); color: #0d1620;
  }
  :root[data-palette="copper"]:not([data-scheme="light"]) .metrics { background: var(--paper-2); }
  :root[data-palette="copper"]:not([data-scheme="light"]) .metric b { color: var(--accent); }
  :root[data-palette="copper"]:not([data-scheme="light"]) .site-foot { background: var(--paper-2); }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) {
    --paper:      #12151a;
    --paper-2:    #191d24;
    --paper-3:    #212630;
    --ink:        #e9ecf1;
    --ink-2:      #b0b8c3;
    --ink-3:      #838c99;
    --line:       #2a303a;
    --accent:     #83aada;
    --accent-2:   #e08a76;
    --accent-sft: #1b2431;
    --focus:      #83aada;
  }
}

/* =========================================================================
   base
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-2); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.005em;
  margin: 0 0 0.5em;
  color: var(--ink);
}
h1 { font-size: clamp(1.95rem, 4.4vw, 3rem); }
h2 { font-size: clamp(1.4rem, 2.8vw, 1.95rem); }
h3 { font-size: 1.14rem; }
p  { margin: 0 0 1.05em; }

.wrap  { max-width: 1160px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 32px); }
.prose { max-width: 74ch; }

.eyebrow {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 0.85em;
}
.lede { font-size: 1.14rem; color: var(--ink-2); }
.small { font-size: 0.88rem; color: var(--ink-3); }

.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--accent);
  color: #fff; padding: 10px 16px; z-index: 100;
}
.skip-link:focus { left: 0; }

/* =========================================================================
   header
   ========================================================================= */

.site-head { border-bottom: 1px solid var(--line); background: var(--paper); }
.head-inner {
  display: flex; align-items: center; gap: 20px;
  min-height: 64px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px;
}
.wordmark {
  font-family: Georgia, serif; font-size: 1.06rem; font-weight: 600;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.wordmark span { color: var(--ink-3); font-weight: 400; }
.nav { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }
.nav a {
  color: var(--ink-2); text-decoration: none;
  font-size: 0.92rem; font-weight: 500; padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--accent); }
.nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

/* =========================================================================
   hero
   ========================================================================= */

.hero { padding: clamp(38px, 6vw, 66px) 0 clamp(30px, 4vw, 46px); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(28px, 5vw, 56px); align-items: center;
}
.hero h1 { margin-bottom: 0.3em; }
.hero .role { color: var(--ink-3); font-size: 0.98rem; margin: 0 0 1.5em; }
.claim {
  font-family: Georgia, serif; font-size: clamp(1.12rem, 2.1vw, 1.36rem);
  line-height: 1.42; color: var(--ink-2);
  border-left: 3px solid var(--accent-2); padding-left: 18px; margin: 0 0 1.3em;
}
.themes-inline {
  font-size: 0.86rem; color: var(--ink-3); margin: 0 0 1.6em;
}
.themes-inline b { color: var(--ink-2); font-weight: 600; }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 9px 18px; border-radius: 4px;
  font-size: 0.92rem; font-weight: 600; text-decoration: none;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
}
.btn:hover { background: transparent; color: var(--accent); }
.btn.ghost { background: transparent; color: var(--ink-2); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); }

figure { margin: 0; }
figcaption { font-size: 0.8rem; color: var(--ink-3); margin-top: 10px; }

/* =========================================================================
   scientific figures (generated SVG, styled from here)
   ========================================================================= */

.figure { width: 100%; height: auto; }
.figure .axis line { stroke: var(--line); stroke-width: 1; }
.figure .ens-line {
  fill: none; stroke: var(--ink-3); stroke-width: 0.9; opacity: 0.42;
}
.figure .ens-line.strong { stroke: var(--accent); opacity: 0.8; stroke-width: 1.5; }
.figure .mean-line {
  fill: none; stroke: var(--accent-2); stroke-width: 2.4;
  stroke-linejoin: round; stroke-linecap: round;
}
.figure .env-line {
  fill: none; stroke: var(--accent); stroke-width: 1.2;
  stroke-dasharray: 5 4; opacity: 0.75;
}
.figure .tick { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 3; }
.figure .lbl {
  font-family: system-ui, sans-serif; font-size: 12px; fill: var(--ink-2);
}
.figure .lbl.dim { fill: var(--ink-3); font-size: 11.5px; }
.figure .dial-ring { fill: none; stroke: var(--line); stroke-width: 1; }
.figure .spoke { stroke: var(--ink-3); stroke-width: 0.8; opacity: 0.34; }
.figure .resultant { stroke: var(--accent-2); stroke-width: 2.6; stroke-linecap: round; }
.figure .resultant-dot { fill: var(--accent-2); }
/* shaded bands are tinted from the accent so they stay visible whatever the
   palette, rather than being a fixed pale colour that vanishes on cream */
.figure .gapband { fill: var(--accent-2); opacity: 0.15; stroke: none; }
.figure .tailband { fill: var(--accent-2); opacity: 0.32; stroke: none; }
.figure .tick { stroke: var(--ink); stroke-width: 1;
                stroke-dasharray: 2 2.5; opacity: 0.6; }
.figure .node { fill: var(--accent); }

/* draw once on load, then stop. No looping animation anywhere on the site. */
@media (prefers-reduced-motion: no-preference) {
  .figure .ens-line, .figure .mean-line, .figure .env-line {
    stroke-dasharray: 4000; stroke-dashoffset: 4000;
    animation: draw 1.5s ease-out forwards;
    animation-delay: calc(var(--i, 0) * 45ms);
  }
  .figure .mean-line { animation-duration: 1.8s; animation-delay: 420ms; }
  .figure .dial { opacity: 0; animation: fade .6s ease-out forwards;
                  animation-delay: calc(var(--i, 0) * 160ms); }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }

/* =========================================================================
   metric strip
   ========================================================================= */

.metrics {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.metrics-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.metric { padding: 18px 22px; border-left: 1px solid var(--line); }
.metric:first-child { border-left: 0; }
.metric b {
  display: block; font-family: Georgia, serif; font-size: 1.6rem;
  line-height: 1.1; margin-bottom: 3px;
}
.metric span {
  font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}

/* =========================================================================
   sections and cards
   ========================================================================= */

section { padding: clamp(40px, 6vw, 62px) 0; border-bottom: 1px solid var(--line); }
section:last-of-type { border-bottom: 0; }
.sec-head { max-width: 68ch; margin-bottom: 34px; }

.questions { list-style: none; padding: 0; margin: 0; display: grid;
             grid-template-columns: repeat(2, 1fr); gap: 0 34px; }
.questions li {
  border-top: 1px solid var(--line); padding: 15px 0;
  font-family: Georgia, serif; font-size: 1.04rem; color: var(--ink-2);
}

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cards.five { grid-template-columns: repeat(5, 1fr); gap: 14px; }
.card {
  border: 1px solid var(--line); border-radius: 6px; background: var(--paper);
  padding: 0 0 20px; display: flex; flex-direction: column; overflow: hidden;
}
.card .card-fig { background: var(--paper-2); border-bottom: 1px solid var(--line);
                  padding: 10px 12px; }
.card .card-body { padding: 18px 20px 0; display: flex; flex-direction: column; flex: 1; }
.card .num {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.7rem; letter-spacing: 0.1em; color: var(--accent-2); margin-bottom: 8px;
}
.card h3 { margin-bottom: 0.45em; }
.card p { font-size: 0.93rem; color: var(--ink-2); margin-bottom: 0.9em; }
.card .more { margin-top: auto; font-size: 0.87rem; font-weight: 600;
              text-decoration: none; }
.card .more::after { content: " \2192"; }

.strip {
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0;
}
.strip li {
  font-size: 0.82rem; color: var(--ink-2); background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px;
}
.strip.key li { background: var(--accent-sft); border-color: transparent;
                color: var(--accent); font-weight: 600; }

.callout {
  border-left: 3px solid var(--accent); background: var(--accent-sft);
  padding: 16px 20px; margin: 24px 0; border-radius: 0 5px 5px 0;
}
.callout p:last-child { margin-bottom: 0; }

/* two-column research page */
.page-grid { display: grid; grid-template-columns: 210px minmax(0, 1fr);
             gap: clamp(24px, 4vw, 52px); align-items: start; }
.side { position: sticky; top: 18px; font-size: 0.88rem; }
.side p { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
          color: var(--ink-3); margin-bottom: 10px; }
.side a { display: block; color: var(--ink-2); text-decoration: none;
          padding: 5px 0; border-bottom: 1px solid var(--line); }
.side a:hover { color: var(--accent); }

.papers { list-style: none; padding: 0; margin: 0; }
.papers li { padding: 14px 0; border-top: 1px solid var(--line); font-size: 0.95rem; }
.papers li:last-child { border-bottom: 1px solid var(--line); }
.papers .t { font-weight: 600; }
.papers .v { color: var(--ink-3); font-size: 0.87rem; }

.res-list { list-style: none; padding: 0; margin: 0; }
.res-list li { padding-left: 1.1em; position: relative; margin-bottom: 6px;
               color: var(--ink-2); }
.res-list li::before { content: "\2014"; position: absolute; left: 0;
                       color: var(--ink-3); }

/* =========================================================================
   architecture diagram
   ========================================================================= */

.architecture { background: var(--paper-2); border: 1px solid var(--line);
                border-radius: 8px; padding: clamp(14px, 3vw, 26px); }

/* only the outer diagram stretches to the container. The icon figures inside
   are nested <svg> elements positioned by their own x, y, width and height
   attributes, so a blanket `.arch svg` rule would override that placement. */
.arch > svg { width: 100%; height: auto; }

.arch .hub { fill: var(--accent); }
.arch .hub-text { fill: #fff; font-family: Georgia, serif; font-weight: 600; }
.arch .spoke-box { fill: var(--paper); stroke: var(--line); stroke-width: 1.2; }
.arch .spoke-text { fill: var(--ink); font-family: system-ui, sans-serif;
                    font-size: 15px; font-weight: 700; }
.arch .spoke-sub { fill: var(--accent); font-family: system-ui, sans-serif;
                   font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; }
.arch .icon-rule { stroke: var(--line); stroke-width: 1; }
.arch .link { stroke: var(--accent-2); stroke-width: 1.5; opacity: 0.55;
              fill: none; }
.arch a text { text-decoration: none; }
.arch a:hover .spoke-box { stroke: var(--accent-2); }
.arch a:hover .spoke-text { fill: var(--accent); }

/* =========================================================================
   footer
   ========================================================================= */

.site-foot { border-top: 1px solid var(--line); background: var(--paper-2);
             padding: 40px 0 48px; font-size: 0.9rem; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; }
.foot-grid h4 { font-family: system-ui, sans-serif; font-size: 0.72rem;
                letter-spacing: 0.12em; text-transform: uppercase;
                color: var(--ink-3); margin-bottom: 10px; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { margin-bottom: 6px; }
.foot-grid a { color: var(--ink-2); text-decoration: none; }
.foot-grid a:hover { color: var(--accent); }
.foot-base { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line);
             color: var(--ink-3); font-size: 0.82rem;
             display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* =========================================================================
   responsive
   ========================================================================= */

@media (max-width: 1000px) {
  .cards, .cards.five { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .page-grid { grid-template-columns: 1fr; }
  .side { position: static; }
  .side a { display: inline-block; border: 0; margin-right: 16px; }
  .questions { grid-template-columns: 1fr; }
  .metrics-inner { grid-template-columns: 1fr 1fr; }
  .metric:nth-child(3) { border-left: 0; }
  .metric { border-top: 1px solid var(--line); }
  .metric:nth-child(-n+2) { border-top: 0; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .cards, .cards.five { grid-template-columns: 1fr; }
  .nav { gap: 14px; margin-left: 0; width: 100%; }
  .head-inner { min-height: 0; }
}

@media print {
  .site-head, .site-foot, .btn-row, .side { display: none; }
  body { font-size: 11pt; color: #000; background: #fff; }
}

/* =========================================================================
   the person: portrait, biography, talks, activities
   ========================================================================= */

/* small avatar beside the name in the hero */
.byline { display: flex; align-items: center; gap: 14px; margin: 0 0 1.5em; }
.byline picture, .byline img {
  width: 58px; height: 58px; border-radius: 50%; object-fit: cover;
  flex: none; display: block;
}
/* the portrait is a cut-out on a transparent background, so the circle needs
   its own fill to read as a shape rather than as a floating head */
.byline picture { background: var(--paper-2); overflow: hidden; }
.byline .who { line-height: 1.35; }
.byline .who b { display: block; font-family: Georgia, serif; font-size: 1.02rem;
                 font-weight: 600; color: var(--ink); }
.byline .who span { font-size: 0.9rem; color: var(--ink-3); }

/* about band */
.about-grid {
  display: grid; grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(26px, 4vw, 48px); align-items: start;
}
.about-portrait { position: relative; }
/* no frame: the cut-out sits directly on the page, which is the point of
   removing the white studio background */
.about-portrait picture, .about-portrait img { display: block; width: 100%; }
.about-portrait figcaption { margin-top: 12px; }
.about-grid blockquote {
  margin: 0 0 1.2em; padding: 0 0 0 20px; border-left: 3px solid var(--accent-2);
  font-family: Georgia, serif; font-size: 1.12rem; line-height: 1.5;
  color: var(--ink-2);
}
.bio-facts { list-style: none; padding: 0; margin: 22px 0 0;
             display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.bio-facts li { border-top: 1px solid var(--line); padding: 9px 0; font-size: 0.9rem;
                color: var(--ink-2); }
.bio-facts b { color: var(--ink); font-weight: 600; }

/* talks */
.talks { list-style: none; padding: 0; margin: 0; }
.talks li { display: grid; grid-template-columns: 92px minmax(0, 1fr);
            gap: 20px; padding: 15px 0; border-top: 1px solid var(--line); }
.talks li:last-child { border-bottom: 1px solid var(--line); }
.talks .yr { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
             font-size: 0.8rem; color: var(--ink-3); padding-top: 3px; }
.talks .kind {
  display: inline-block; font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 8px;
  border-radius: 3px; background: var(--accent-sft); color: var(--accent);
  margin-right: 8px; vertical-align: 2px;
}
.talks .kind.plenary { background: var(--accent); color: #fff; }
.talks .t { font-weight: 600; }
.talks .where { color: var(--ink-3); font-size: 0.88rem; display: block; }

/* activity columns */
.act-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.act-grid h3 { font-size: 1.02rem; margin-bottom: 0.6em;
               padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.act-grid ul { list-style: none; padding: 0; margin: 0; font-size: 0.92rem; }
.act-grid li { margin-bottom: 7px; color: var(--ink-2); }
.act-grid li b { color: var(--ink); font-weight: 600; }

/* dated list, used for awards and appointments */
.dated { list-style: none; padding: 0; margin: 0; }
.dated li { display: grid; grid-template-columns: 116px minmax(0, 1fr);
            gap: 18px; padding: 11px 0; border-top: 1px solid var(--line);
            font-size: 0.93rem; }
.dated li:last-child { border-bottom: 1px solid var(--line); }
.dated .when { font-family: ui-monospace, Menlo, Consolas, monospace;
               font-size: 0.79rem; color: var(--ink-3); padding-top: 3px; }

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-portrait { max-width: 260px; }
  .act-grid { grid-template-columns: 1fr; }
  .bio-facts { grid-template-columns: 1fr; }
  .talks li, .dated li { grid-template-columns: 1fr; gap: 4px; }
}

/* =========================================================================
   publication lists and archives
   ========================================================================= */

.yearjump { font-size: 0.84rem; color: var(--ink-3); line-height: 2.1;
            border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.yearjump a { display: inline-block; padding: 2px 9px; margin-right: 2px;
              border: 1px solid var(--line); border-radius: 4px;
              text-decoration: none; }
.yearjump a:hover { border-color: var(--accent); }

h2.pubyear { font-family: ui-monospace, Menlo, Consolas, monospace;
             font-size: 1.05rem; letter-spacing: 0.02em;
             margin: 38px 0 12px; padding-bottom: 8px;
             border-bottom: 2px solid var(--accent-2); }
h2.pubyear span { font-family: system-ui, sans-serif; font-size: 0.74rem;
                  font-weight: 400; letter-spacing: 0.08em;
                  text-transform: uppercase; color: var(--ink-3);
                  float: right; padding-top: 6px; }

ol.publist { list-style: decimal; padding-left: 1.9em; margin: 0; }
ol.publist li { padding: 9px 0 11px; border-bottom: 1px solid var(--line);
                font-size: 0.93rem; }
ol.publist li::marker { color: var(--ink-3); font-size: 0.8rem; }
.pubcite { display: block; color: var(--ink); }
.publinks { display: inline-block; margin-top: 5px; font-size: 0.84rem;
            font-weight: 600; }
.pubbadges { display: inline-block; margin-left: 10px; }
.pubtag { display: inline-block; font-size: 0.68rem; font-weight: 700;
          letter-spacing: 0.06em; text-transform: uppercase;
          padding: 2px 8px; border-radius: 3px; margin-left: 4px;
          background: var(--accent-sft); color: var(--accent); }
.pubtag.soft { background: transparent; border: 1px solid var(--line);
               color: var(--ink-3); font-weight: 500; }

@media (max-width: 620px) {
  h2.pubyear span { float: none; display: block; padding-top: 2px; }
  ol.publist { padding-left: 1.4em; }
}

/* =========================================================================
   legacy content carried across verbatim
   The markup inside .legacy is the original hand-written HTML, so it is
   styled here rather than rewritten. Nothing below changes the content.
   ========================================================================= */

.legacy { max-width: 84ch; font-size: 0.96rem; }
.legacy h2 { font-size: 1.35rem; margin: 40px 0 12px;
             padding-bottom: 8px; border-bottom: 2px solid var(--accent-2); }
.legacy h3 { font-size: 1.1rem; margin: 30px 0 10px; color: var(--ink); }
.legacy h4 { font-size: 0.98rem; margin: 22px 0 8px; color: var(--ink-2);
             font-family: system-ui, sans-serif; letter-spacing: 0.02em; }
.legacy p { margin: 0 0 0.9em; }
.legacy ul, .legacy ol { padding-left: 1.5em; margin: 0 0 1.1em; }
.legacy li { margin-bottom: 6px; }
.legacy ul ul, .legacy ol ol, .legacy ul ol, .legacy ol ul {
  margin: 6px 0 8px; font-size: 0.95em; }
.legacy hr { border: 0; border-top: 1px solid var(--line); margin: 26px 0; }
.legacy img { max-width: 100%; height: auto; border-radius: 4px;
              border: 1px solid var(--line); margin: 10px 0; }
.legacy center { display: block; text-align: left; }
.legacy table { border-collapse: collapse; width: auto; max-width: 100%;
                margin: 14px 0; font-size: 0.94em; }
.legacy td, .legacy th { padding: 6px 12px 6px 0; vertical-align: top; }
.legacy a { overflow-wrap: anywhere; }
.legacy b, .legacy strong { color: var(--ink); }
.legacy .pubcite { display: inline; }

/* the same rules apply to the entries in the publication lists, which are
   also original markup */
ol.publist img { max-width: min(100%, 420px); height: auto; margin: 8px 0;
                 border: 1px solid var(--line); border-radius: 4px; }
ol.publist ul { list-style: none; padding-left: 0; margin: 6px 0 0;
                font-size: 0.88rem; }
ol.publist ul li { display: inline-block; margin: 0 14px 4px 0;
                   border: 0; padding: 0; }
ol.publist ul ul { display: block; margin-top: 4px; }

h2.pubyear.pending { border-bottom-color: var(--ink-3); }
ul.publist.pendinglist { list-style: none; padding-left: 0; }
ul.publist.pendinglist > li { border-bottom: 1px solid var(--line); }

/* =========================================================================
   theme icons
   The same five figures appear in the architecture diagram, on the theme
   cards, at the head of each theme page and beside each research-area
   publication list, so a reader recognises an area before reading its name.
   ========================================================================= */

.themeicon { width: 100%; height: auto; display: block; }

.iconcard {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 8px; padding: 14px 16px;
}

/* header of a research-area publication list: icon left, text right */
.area-hero { display: grid; grid-template-columns: 240px minmax(0, 1fr);
             gap: clamp(22px, 3vw, 40px); align-items: center; }
.area-hero .prose { max-width: 68ch; }

/* head of a theme page */
.theme-head { display: grid; grid-template-columns: 300px minmax(0, 1fr);
              gap: clamp(22px, 3vw, 40px); align-items: center;
              margin-bottom: 30px; }

@media (max-width: 760px) {
  .area-hero, .theme-head { grid-template-columns: 1fr; }
  .area-hero .iconcard, .theme-head .iconcard { max-width: 320px; }
}

/* =========================================================================
   citation badges
   The Dimensions, Altmetric and PlumX widgets are the only external requests
   on the site. They are loaded once per page, and only on pages that carry
   their markup. If a widget fails, the page is unaffected: the badge simply
   does not appear.
   ========================================================================= */

ol.publist .__dimensions_badge_embed__,
ul.publist .__dimensions_badge_embed__ { display: inline-block;
                                         vertical-align: middle;
                                         margin: 4px 0 0 10px; }
ol.publist .altmetric-embed,
ul.publist .altmetric-embed { display: inline-block; vertical-align: middle;
                              margin: 4px 0 0 10px; }
ol.publist .plumx-plum-print-popup { font-weight: 600; }

/* the per-year chart at the head of an archive */
/* The per-year charts. Drawn by tools/make_charts.py in the site palette, so
   no border or background is needed to separate them from the page: the paper
   colour already matches. A max-width keeps the tall year charts readable
   without them dominating the page. */
.pubchart { margin: 0 0 34px; max-width: 620px; }
.pubchart img { display: block; width: 100%; height: auto; }
.pubchart figcaption { margin-top: 10px; font-size: 0.86rem; color: var(--ink-3);
                       max-width: 60ch; line-height: 1.5; }
/* the area-share chart is wide and short, so it gets the full column */
section .cards + .pubchart { max-width: 860px; margin-top: 34px; }
@media (prefers-color-scheme: dark) {
  /* the chart PNGs carry the light paper colour, so lift them off a dark page
     rather than letting them glare */
  :root:not([data-palette-force]) .pubchart img { opacity: 0.92; }
}

/* =========================================================================
   Research page: part dividers, application fields, milestone timeline
   Generated content comes from data/timeline.py via tools/make_timeline.py.
   ========================================================================= */

/* the band that separates part one from part two */
.partdiv { background: var(--paper-2); border-top: 1px solid var(--line);
           border-bottom: 1px solid var(--line); padding: 30px 0 26px;
           margin-top: 46px; }
.partdiv h2 { margin: 6px 0 8px; font-size: clamp(1.5rem, 3vw, 2rem); }
.partdiv .lede { margin: 0; max-width: 68ch; }

/* the application fields, as a plain responsive grid */
.fields { display: grid; gap: 20px 30px;
          grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.field h4 { margin: 0 0 5px; font-size: 1rem; color: var(--ink); }
.field p  { margin: 0; font-size: 0.92rem; color: var(--ink-2);
            line-height: 1.55; }

/* ---------- the timeline ----------
   A vertical spine: year in the gutter, marker on the rule, entry to the
   right. No script. Below 720px the gutter collapses and the year sits above
   its entry, which is what makes it readable on a phone.                    */

.timeline { margin-top: 8px; }

.tl-legend { font-size: 0.86rem; color: var(--ink-3); margin: 0 0 26px; }
.tl-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
          margin-right: 6px; vertical-align: baseline; }

.tl-list { list-style: none; margin: 0; padding: 0; }

.tl-item { position: relative; display: grid; gap: 0 26px;
           grid-template-columns: 84px 1fr;
           padding: 0 0 30px 0; }

/* the rule itself, drawn behind the markers and stopped at the last entry */
.tl-item::before { content: ""; position: absolute;
                   left: 96px; top: 12px; bottom: -6px; width: 2px;
                   background: var(--line); }
.tl-item:last-child::before { display: none; }

.tl-year { grid-column: 1; margin: 0; text-align: right;
           font-family: Georgia, "Times New Roman", serif;
           font-size: 1.02rem; color: var(--ink-2); white-space: nowrap;
           padding-top: 2px; }

/* the marker sits on the rule, centred on the year */
.tl-year::after { content: ""; position: absolute; left: 91px; top: 8px;
                  width: 12px; height: 12px; border-radius: 50%;
                  border: 2px solid var(--paper); box-sizing: content-box; }

.tl-body { grid-column: 2; padding-left: 12px; }
.tl-body h3 { margin: 2px 0 7px; font-size: 1.06rem; line-height: 1.35; }
.tl-body p  { margin: 0; max-width: 66ch; color: var(--ink-2);
              line-height: 1.62; font-size: 0.95rem; }

.tl-kind { font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase;
           color: var(--ink-3); margin: 0 0 2px; }

.tl-links { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.tl-links a { font-size: 0.84rem; color: var(--accent);
              text-decoration: none; border-bottom: 1px solid var(--line); }
.tl-links a:hover { border-bottom-color: var(--accent); }

/* the three kinds. Engineering translation is the point of the section, so it
   is the only one that takes the accent colour. */
.tl-impact      .tl-year::after, .tl-dot.tl-impact      { background: var(--accent-2); }
.tl-science     .tl-year::after, .tl-dot.tl-science     { background: var(--ink); }
.tl-recognition .tl-year::after, .tl-dot.tl-recognition { background: var(--paper);
                  box-shadow: inset 0 0 0 2px var(--ink-3); }
.tl-impact .tl-kind { color: var(--accent); }
.tl-impact .tl-body h3 { color: var(--ink); }

@media (max-width: 720px) {
  .tl-item { grid-template-columns: 1fr; gap: 0; padding-left: 22px;
             padding-bottom: 26px; }
  .tl-item::before { left: 4px; top: 10px; }
  .tl-year { grid-column: 1; text-align: left; padding-top: 0;
             font-size: 0.94rem; color: var(--ink-3); }
  .tl-year::after { left: -1px; top: 4px; width: 10px; height: 10px; }
  .tl-body { grid-column: 1; padding-left: 0; }
}

@media print {
  .tl-item::before, .tl-year::after { background: #999; box-shadow: none; }
  .tl-item { page-break-inside: avoid; }
}

/* the source note under the metrics band */
.metrics-note { margin: 0; padding: 0 22px 16px; font-size: 0.78rem;
                color: var(--ink-3); }
.metrics-note a { color: var(--ink-3); }
:root[data-palette="copper"] .metrics-note { color: rgba(255,253,248,0.6); }
:root[data-palette="copper"] .metrics-note a { color: rgba(255,253,248,0.82); }
@media (max-width: 640px) {
  .metrics-inner { grid-template-columns: repeat(2, 1fr); }
  .metric:nth-child(3) { border-left: 0; }
}

/* ---------- open research: item status ----------
   A card says whether the thing exists. Released items carry a link; anything
   unreleased says so and offers none, which is enforced in
   tools/make_open_research.py rather than trusted to whoever edits the page. */
.statusline { margin: 0 0 10px; display: flex; flex-wrap: wrap;
              align-items: center; gap: 8px; }
.pill { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
        padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line);
        color: var(--ink-3); white-space: nowrap; }
.pill.released  { border-color: var(--accent); color: var(--accent);
                  background: var(--accent-sft); }
.pill.preparing { border-color: var(--ink-3); color: var(--ink-2); }
.pill.planned   { border-style: dashed; }
.pill-when { font-size: 0.78rem; color: var(--ink-3); }
.open-item .card-body { display: flex; flex-direction: column; }
.open-item .more { margin-top: auto; }
.open-icon { width: 72px; height: 72px; margin-bottom: 10px; }