/* Deep cool emerald and warm cream, with a single coral accent. Dark bands top,
   middle and bottom; cream where the content lives. Decoration is geometry and
   schematic data figures, never stock imagery. */
:root {
  --ink: #123d2f;
  --ink-soft: #174a38;
  --shell: #f4f0e8;
  --coral: #dd8f86;
  --coral-deep: #b96a61;

  --on-ink: #f2ede5;
  /* Sage rather than the old grey: on emerald the previous #8f9a92 fell to
     4.15:1, under the 4.5:1 floor, and it carries the card body copy. */
  --on-ink-mute: #a7b59e;
  --on-shell: #17201a;
  --on-shell-mute: #5f6a62;
  --hairline: #ddd5c7;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", -apple-system, "Helvetica Neue", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  background: var(--shell);
  color: var(--on-shell);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

.container {
  max-width: 76rem;
  margin: 0 auto;
  padding-left: clamp(1.25rem, 4vw, 3.5rem);
  padding-right: clamp(1.25rem, 4vw, 3.5rem);
}

a { color: inherit; }

.mono {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.grain {
  position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

.field-ink { background: var(--ink); color: var(--on-ink); }
/* Header and hero share one dark block so the hero geometry can bleed behind
   the nav but is cropped cleanly where the cream begins. */
.ink-block { position: relative; overflow: hidden; }
.field-shell { background: var(--shell); color: var(--on-shell); }

/* Header */

.site-header {
  display: flex; justify-content: flex-end; align-items: center;
  gap: 1.5rem; padding-top: 1.75rem; padding-bottom: 1.25rem;
  position: relative; z-index: 3;
}
.site-header nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.25rem); }
.site-header nav a { color: var(--on-ink-mute); text-decoration: none; transition: color .15s ease; }
.site-header nav a:hover { color: var(--on-ink); }
/* On sub-pages, the way back out. Brighter than the section links so it
   reads as navigation rather than another anchor into the same page. */
.site-header nav a.nav-home { color: var(--on-ink); }
.site-header nav a.nav-home:hover { color: var(--coral); }
.nav-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--coral); }

/* Hero */

.hero { padding-bottom: clamp(4rem, 11vh, 8rem); }
.hero-inner { position: relative; padding-top: clamp(2.5rem, 7vh, 5rem); }

.hero-art {
  position: absolute; top: 0; right: clamp(-6rem, -3vw, -1rem);
  width: clamp(26rem, 56vw, 44rem); height: auto; z-index: 0;
  animation: fadeIn 1.4s ease both;
}
.hero-art .fan-line { stroke: var(--on-ink-mute); stroke-width: 1; opacity: .3; }
.hero-art .slash { stroke: var(--on-ink-mute); stroke-width: 1; opacity: .35; }
.hero-art .ring-dashed {
  fill: none; stroke: var(--on-ink-mute); stroke-width: 1;
  stroke-dasharray: 7 9; opacity: .55;
}
.hero-art .pip { fill: var(--coral); }
/* Sage disc and coral wedge: the two solid shapes carry the composition, so
   they sit at full strength while everything else stays a hairline. */
.hero-art .orb { fill: var(--on-ink-mute); opacity: .85; }
.hero-art .wedge { fill: var(--coral); }

.hero h1, .rule-accent, .tagline { position: relative; z-index: 1; }
.hero h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3.25rem, 10.5vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  animation: fadeUp .85s cubic-bezier(.16,1,.3,1) both;
}
.rule-accent {
  display: block; width: 3.2rem; height: 3px; background: var(--coral);
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(1.25rem, 2.5vw, 1.75rem);
}
.tagline {
  font-size: 1.05rem; line-height: 1.95; color: var(--on-ink-mute);
  text-transform: none; letter-spacing: 0.06em;
  animation: fadeUp .85s ease .25s both;
}
.tagline .hl { color: var(--coral); }

/* Section heads */

.listing { padding-top: clamp(3rem, 7vh, 5rem); padding-bottom: clamp(3.5rem, 9vh, 6.5rem); }
.section-head {
  display: flex; align-items: baseline; gap: clamp(1rem, 3vw, 2.5rem);
  flex-wrap: wrap; margin-bottom: clamp(1.75rem, 4vh, 2.75rem);
}
.section-head .index { color: var(--on-shell-mute); }
.section-head h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2rem, 4.6vw, 3.1rem); letter-spacing: -0.02em;
}
.section-note {
  margin-left: auto; text-align: right; line-height: 1.9;
  color: var(--on-shell-mute); font-size: 0.66rem;
}

/* Demo cards */

.card-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 22rem));
}
.card {
  background: var(--ink); color: var(--on-ink); text-decoration: none;
  border-radius: 4px; padding: 1.25rem; position: relative; display: block;
  transition: transform .25s ease;
}
.card:hover { transform: translateY(-4px); }
.card-num { display: block; font-size: 1.05rem; letter-spacing: 0; margin-bottom: 1.4rem; }

.card-label { display: block; color: var(--coral); margin-bottom: .55rem; font-size: .62rem; }
/* An institution name rather than a category. At the default tracking it needs
   367px against 312px available, so it wraps before its own line break and
   lands on three lines instead of two. */
.card-label-long { font-size: .55rem; letter-spacing: .045em; }
.card h3 {
  font-family: var(--serif); font-weight: 400; font-size: 1.4rem;
  line-height: 1.2; letter-spacing: -0.01em; margin-bottom: .6rem;
}
.card p { font-size: .82rem; line-height: 1.6; color: var(--on-ink-mute); }
/* The rule stays as a base for the card; the arrow sits alone at its right. */
.card-foot {
  display: flex; justify-content: flex-end; align-items: center;
  margin-top: 1.4rem; color: var(--on-ink-mute);
}
.card .arrow { transition: transform .25s ease; display: inline-block; font-family: var(--sans); }
.card:hover .arrow { transform: translateX(.35rem); }

/* Quote band */

.quote { padding: clamp(3rem, 8vh, 5rem) 0; text-align: center; }
.quote p {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.2rem, 2.8vw, 1.9rem); line-height: 1.5;
}

/* Publications */

/* Hairline between Demos and Publications, aligned to the content column
   rather than bled full-width, so it reads as part of the same grid as the
   rules between publication entries. */
#publications { padding-top: 0; }
#publications > .container {
  border-top: 1px solid var(--hairline);
  padding-top: clamp(3rem, 7vh, 5rem);
}

.entry {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start; padding: clamp(1.75rem, 4vh, 2.5rem) 0;
  border-top: 1px solid var(--hairline);
}
.entry-body { display: flex; gap: 1rem; }
.entry-num { color: var(--coral-deep); padding-top: .3rem; }
.entry h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.1rem, 2.1vw, 1.5rem); line-height: 1.25; letter-spacing: -0.01em;
  max-width: 26em;
}
.entry h3 a { text-decoration: none; transition: color .2s ease; }
.entry h3 a:hover { color: var(--coral-deep); }
.entry-authors {
  margin-top: .6rem; max-width: 34em;
  font-size: .66rem; line-height: 1.75; letter-spacing: .02em;
  color: var(--on-shell-mute);
}
.entry-authors .me { color: var(--on-shell); font-weight: 500; }
.entry-authors .etc { color: var(--hairline); }
.entry-note { margin-top: .75rem; font-size: .85rem; line-height: 1.65; color: var(--on-shell-mute); max-width: 34em; }
.entry-links { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .9rem; }
.entry-links a {
  text-decoration: none; border: 1px solid var(--hairline); border-radius: 3px;
  padding: .3rem .6rem; font-size: .6rem; transition: background-color .2s ease, color .2s ease;
}
.entry-links a:hover { background: var(--on-shell); color: var(--shell); }
.entry-links .year { color: var(--on-shell-mute); font-size: .6rem; margin-left: .3rem; }
.entry-press { margin-top: .8rem; font-size: .78rem; color: var(--on-shell-mute); max-width: 34em; }
.entry-press a { text-decoration: none; color: var(--coral-deep); border-bottom: 1px solid transparent; }
.entry-press a:hover { border-bottom-color: currentColor; }

.entry-figure { background: #fff; border: 1px solid var(--hairline); border-radius: 4px; padding: .9rem 1rem 1rem; }
.entry-figure svg { width: 100%; height: auto; display: block; }
.entry-figure .axis { stroke: var(--hairline); stroke-width: 1; }
.entry-figure .series { fill: none; stroke-width: 2; }
.entry-figure .c1 { stroke: var(--coral); }
.entry-figure .c2 { stroke: #8a9990; }
.entry-figure .c3 { stroke: var(--on-shell); }
.entry-figure .dup { fill: rgba(221,143,134,.18); stroke: var(--coral); stroke-width: 1; }
.entry-figure .trace-fig { fill: none; stroke: #55707f; stroke-width: 1.4; }
.entry-figure figcaption {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
  margin-top: .7rem; font-size: .58rem; color: var(--on-shell-mute);
}
.entry-figure figcaption em { font-style: normal; margin-left: auto; opacity: .8; text-transform: none; letter-spacing: .04em; }
.entry-figure .key { display: inline-block; width: 9px; height: 2px; margin-right: .35rem; vertical-align: middle; }
.entry-figure .key.c1 { background: var(--coral); }
.entry-figure .key.c2 { background: #8a9990; }
.entry-figure .key.c3 { background: var(--on-shell); }
.entry-figure .key.dupkey { background: var(--coral); height: 8px; width: 8px; opacity: .5; }

/* Footer */

.site-footer { padding: clamp(2.5rem, 6vh, 4rem) 0; }
.footer-row { display: flex; align-items: center; gap: clamp(1.25rem, 4vw, 3rem); flex-wrap: wrap; }
/* The byline, replacing the I/B monogram. Real text rather than a decorative
   mark, so the name is on the page for a reader and a crawler both. */
.footer-name { color: var(--on-ink); }
.to-top { margin-left: auto; color: var(--on-ink-mute); text-decoration: none; transition: color .15s ease; }
.to-top:hover { color: var(--coral); }

/* Motion */

@keyframes fadeUp { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 60rem) {
  .entry { grid-template-columns: 1fr; }
  .section-note { margin-left: 0; text-align: left; width: 100%; }
}
@media (max-width: 40rem) {
  /* The larger tagline runs wider on a phone, so the geometry moves down and
     further off the edge rather than sitting behind the words. */
  .hero-art {
    right: -11rem; top: auto; bottom: -3rem;
    width: clamp(17rem, 78vw, 24rem); opacity: .45;
  }
  .card-grid { grid-template-columns: 1fr; }
  .footer-row { gap: 1.25rem; }
  .to-top { margin-left: 0; }
}

/* Figure detail */
.entry-figure .net .node { r: 3; fill: var(--on-shell); }
.entry-figure .net path { fill: none; stroke: var(--on-shell); stroke-width: .9; }
.entry-figure .net.dense path { opacity: .85; }
.entry-figure .net.mid path { opacity: .55; stroke: #8a9990; }
.entry-figure .net.mid .node { fill: #8a9990; }
.entry-figure .net.sparse path { opacity: .5; stroke: var(--coral); }
.entry-figure .net.sparse .node { fill: var(--coral); }
.entry-figure .fig-label {
  font-family: var(--mono); font-size: 7px; fill: var(--on-shell-mute);
  letter-spacing: .06em; text-anchor: middle;
}
.entry-figure .bars .fig-label { text-anchor: start; }
.entry-figure .ideo { fill: #efe9dd; stroke: var(--hairline); stroke-width: 1; }
.entry-figure .band { fill: #cdc4b6; }
.entry-figure .locus { fill: var(--coral); }
.entry-figure .bars rect { fill: #8a9990; }

.entry-figure img { width: 100%; height: auto; display: block; border-radius: 2px; }