/* ==========================================================================
   site.css — custom design layer, loaded after main.css
   Palette: UIUC navy / orange. Restrained motion, hairline rules, mono labels.
   ========================================================================== */

:root {
  --ink:        #0a1729;
  --navy:       #13294b;
  --navy-2:     #1c3b6b;
  --steel:      #5b6b84;
  --steel-2:    #8494ac;
  --line:       #e4e9f0;
  --line-2:     #eef2f7;
  --paper:      #ffffff;
  --paper-2:    #f7f9fc;
  --accent:     #e84a27;
  --accent-2:   #fff2ed;

  /* Grounds that stay dark in both themes: heroes, the nav chip, immersive
     paper pages. Kept apart from --ink/--navy so those two are free to be
     text colours and flip with the theme. */
  --deep:       #13294b;
  --deep-2:     #0a1729;
  --deep-3:     #08131f;

  --btn:        #13294b;   /* primary button; brightens in dark so it still
                              separates from the page */
  --btn-h:      #1c3b6b;
  --btn-ink:    #ffffff;

  --paper-veil: rgba(255,255,255,.88);  /* blurred bars over content */
  --line-hi:    #d9e0ea;   /* a border that lifts on hover */

  --prose:      #2f3e57;   /* long-form body text */
  --prose-2:    #223047;

  --accent-ink:  #9a3412;  /* text and hairline on an --accent-2 chip */
  --danger-ink:  #7c2d12;
  --accent-line: #f6d8cc;

  --tint-blue:   #eef2f8;  --tint-blue-line:   #dae2ee;
  --tint-green:  #eefaf1;  --tint-green-line:  #cdeed8;  --tint-green-ink:  #14532d;
  --tint-indigo: #eef0fb;  --tint-indigo-line: #d9def6;  --tint-indigo-ink: #3730a3;
  --tint-teal:   #ecf8fb;  --tint-teal-line:   #cfe9f1;  --tint-teal-ink:   #155e75;

  --radius:     14px;
  --radius-sm:  10px;
  --shadow-1:   0 1px 2px rgba(16,32,58,.05);
  --shadow-2:   0 14px 34px -16px rgba(16,32,58,.28);

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap: 1160px;
  --gutter: clamp(18px, 5vw, 44px);
}

html, body { background-color: var(--paper); }

/* --------------------------------------------------------------------------
   Dark theme

   Only the tokens move. Every surface, border and text colour in this file
   already reads through one, so the whole design follows from this block --
   the --global-* half is the base theme's own palette (see _sass/theme/),
   redefined here so main.css comes along.

   Three states: no attribute means "follow the system", so the media query
   is guarded against an explicit light choice, and the attribute rules
   repeat the values so a manual pick wins in both directions.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:        #f2f6fc;
    --navy:       #dde7f6;
    --navy-2:     #ffffff;
    --steel:      #a3b4cd;
    --steel-2:    #7b8ca6;
    --line:       #24324c;
    --line-2:     #1b2740;
    --paper:      #0c1523;
    --paper-2:    #131e31;
    --accent:     #ff6f45;
    --accent-2:   #2b1712;

    --shadow-1:   0 1px 2px rgba(0,0,0,.45);
    --shadow-2:   0 14px 34px -16px rgba(0,0,0,.75);

    --btn:        #2f5da6;
    --btn-h:      #3a6cbd;
    --btn-ink:    #ffffff;

    --paper-veil: rgba(12,21,35,.86);
  --line-hi:    #3a4d6d;

  --prose:      #c4d1e4;
  --prose-2:    #c4d1e4;

  --accent-ink:  #ffb094;
  --danger-ink:  #ff8a5c;
  --accent-line: #4a2519;

  --tint-blue:   #172440;  --tint-blue-line:   #2a3c5c;
  --tint-green:  #10281a;  --tint-green-line:  #1f4530;  --tint-green-ink:  #86e0ab;
  --tint-indigo: #191c3d;  --tint-indigo-line: #2d3268;  --tint-indigo-ink: #b3b7ff;
  --tint-teal:   #102b33;  --tint-teal-line:   #1e4854;  --tint-teal-ink:   #8fdcec;

    --global-base-color:                #24324c;
    --global-bg-color:                  #0c1523;
    --global-border-color:              #24324c;
    --global-code-background-color:     #16233a;
    --global-code-text-color:           #dde7f6;
    --global-fig-caption-color:         #a3b4cd;
    --global-link-color:                #7aa7ff;
    --global-link-color-hover:          #a6c3ff;
    --global-link-color-visited:        #a08cff;
    --global-masthead-link-color:       #dde7f6;
    --global-masthead-link-color-hover: #ff6f45;
    --global-text-color:                #dde7f6;
    --global-text-color-light:          #a3b4cd;
    --global-thead-color:               #1b2740;
  }
}

:root[data-theme="dark"] {
  --ink:        #f2f6fc;
  --navy:       #dde7f6;
  --navy-2:     #ffffff;
  --steel:      #a3b4cd;
  --steel-2:    #7b8ca6;
  --line:       #24324c;
  --line-2:     #1b2740;
  --paper:      #0c1523;
  --paper-2:    #131e31;
  --accent:     #ff6f45;
  --accent-2:   #2b1712;

  --shadow-1:   0 1px 2px rgba(0,0,0,.45);
  --shadow-2:   0 14px 34px -16px rgba(0,0,0,.75);

  --btn:        #2f5da6;
  --btn-h:      #3a6cbd;
  --btn-ink:    #ffffff;

  --paper-veil: rgba(12,21,35,.86);
  --line-hi:    #3a4d6d;

  --prose:      #c4d1e4;
  --prose-2:    #c4d1e4;

  --accent-ink:  #ffb094;
  --danger-ink:  #ff8a5c;
  --accent-line: #4a2519;

  --tint-blue:   #172440;  --tint-blue-line:   #2a3c5c;
  --tint-green:  #10281a;  --tint-green-line:  #1f4530;  --tint-green-ink:  #86e0ab;
  --tint-indigo: #191c3d;  --tint-indigo-line: #2d3268;  --tint-indigo-ink: #b3b7ff;
  --tint-teal:   #102b33;  --tint-teal-line:   #1e4854;  --tint-teal-ink:   #8fdcec;

  --global-base-color:                #24324c;
  --global-bg-color:                  #0c1523;
  --global-border-color:              #24324c;
  --global-code-background-color:     #16233a;
  --global-code-text-color:           #dde7f6;
  --global-fig-caption-color:         #a3b4cd;
  --global-link-color:                #7aa7ff;
  --global-link-color-hover:          #a6c3ff;
  --global-link-color-visited:        #a08cff;
  --global-masthead-link-color:       #dde7f6;
  --global-masthead-link-color-hover: #ff6f45;
  --global-text-color:                #dde7f6;
  --global-text-color-light:          #a3b4cd;
  --global-thead-color:               #1b2740;
}

/* Stragglers: the few places the base theme or this file hard-codes white. */
:root[data-theme="dark"] .greedy-nav .hidden-links,
:root[data-theme="dark"] .author__urls { background: var(--paper-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .greedy-nav .hidden-links,
  :root:not([data-theme="light"]) .author__urls { background: var(--paper-2); }
}

/* Colour-scheme tells the browser to theme scrollbars and form controls. */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}

/* --------------------------------------------------------------------------
   Theme toggle
   -------------------------------------------------------------------------- */

.theme-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--steel);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-50%) scale(1.06);
}
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle svg {
  position: absolute;
  transition: opacity .22s ease, transform .32s cubic-bezier(.2,.8,.2,1);
}
/* Show the icon for the theme you would switch *to*. */
.theme-toggle__moon { opacity: 1; transform: none; }
.theme-toggle__sun  { opacity: 0; transform: rotate(-70deg) scale(.5); }
:root[data-theme="dark"] .theme-toggle__moon { opacity: 0; transform: rotate(70deg) scale(.5); }
:root[data-theme="dark"] .theme-toggle__sun  { opacity: 1; transform: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__moon { opacity: 0; transform: rotate(70deg) scale(.5); }
  :root:not([data-theme="light"]) .theme-toggle__sun  { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle, .theme-toggle svg { transition: none; }
}

/* Room at the end of the masthead for the toggle and the counter beside it.
   Measured, not guessed: the counter is 139px and the toggle 44. */
.masthead__inner-wrap { position: relative; padding-right: 196px; }

/* --------------------------------------------------------------------------
   Visit counters
   -------------------------------------------------------------------------- */

.masthead__hits {
  position: absolute;
  right: 54px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--steel-2);
}
.masthead__hits b { font-weight: 600; color: var(--steel); }
.masthead__hits i { font-style: normal; }
.masthead__hits i.sep { opacity: .5; margin: 0 3px; }
[data-views-unit] { font-style: normal; }

/* Only phones lose it. Above that the greedy nav gives up a link to the
   overflow menu before the counter goes, which is what that menu is for --
   an earlier version reserved 250px and hid the counter below 1200px, which
   took it off most laptop windows to protect a nav that had room to spare. */
@media (max-width: 719px) {
  .masthead__hits { display: none; }
  .masthead__inner-wrap { padding-right: 52px; }
}
@media (max-width: 600px) {
  .theme-toggle { width: 32px; height: 32px; right: 4px; }
  .masthead__inner-wrap { padding-right: 44px; }
}

.post-hits b { font-weight: inherit; color: inherit; }

/* On a listing the count sits with the read time, in the same mono voice. */
.blog-lead__views,
.blog-row__views { color: var(--steel-2); }
.blog-lead__views { margin-top: 2px; }


body {
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.masthead {
  background: var(--paper-veil);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.masthead__menu-item { background-color: transparent; }

.greedy-nav { background: transparent; }
.greedy-nav a { color: var(--navy); font-weight: 600; letter-spacing: -.01em; }
.greedy-nav a:hover { color: var(--accent); }
.greedy-nav .visible-links a::before { background: var(--accent); height: 2px; }
.greedy-nav button { background-color: var(--deep); border-radius: 8px; }

.masthead__menu-item--lg a { letter-spacing: -.02em; }

.masthead__menu-item.is-current > a { color: var(--accent); }
.masthead__menu-item.is-current > a::before {
  transform: scaleX(1) !important;
  background: var(--accent) !important;
}

/* --------------------------------------------------------------------------
   Shared primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--steel);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent);
  flex: 0 0 auto;
}

.sec { padding: clamp(56px, 8vw, 104px) 0; }
.sec--tint { background: var(--paper-2); border-block: 1px solid var(--line); }

.sec-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.sec-head h2 {
  margin: 14px 0 0;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.15;
  letter-spacing: -.025em;
  font-weight: 700;
  color: var(--navy);
  border: 0;
  padding: 0;
}
.sec-head .sec-sub {
  margin: 14px 0 0;
  font-size: clamp(15.5px, 1.4vw, 17.5px);
  line-height: 1.65;
  color: var(--steel);
}

.chip {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--line-2);
  color: var(--navy);
  border: 1px solid var(--line);
  white-space: nowrap;
}

.btn-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none !important;
  border: 1px solid var(--btn);
  background: var(--btn);
  color: var(--btn-ink) !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-x:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); background: var(--btn-h); border-color: var(--btn-h); }
.btn-x--ghost { background: transparent; color: var(--navy) !important; border-color: var(--line); }
.btn-x--ghost:hover { background: var(--paper-2); border-color: var(--navy); color: var(--navy) !important; }
.btn-x--onDark { background: #fff; color: var(--deep) !important; border-color: #fff; }
.btn-x--onDark:hover { background: #fff; color: var(--deep) !important; }
.btn-x--onDarkGhost { background: transparent; color: rgba(255,255,255,.92) !important; border-color: rgba(255,255,255,.28); }
.btn-x--onDarkGhost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.55); color: #fff !important; }
.btn-x--sm { min-height: 36px; padding: 8px 15px; font-size: 13px; }

/* Scroll reveal — inert until site.js opts in, so a script failure never hides content */
html.reveal-on .reveal { opacity: 0; transform: translateY(14px); }
html.reveal-on .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--deep-3) 0%, var(--deep-2) 38%, var(--deep) 100%);
  color: #fff;
  isolation: isolate;
}

.hero__canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: .95;
}

/* faint engineering grid on top of the field */
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 100%);
  mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 100%);
}
.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(80% 60% at 18% 30%, rgba(8,19,31,.72) 0%, transparent 72%),
    linear-gradient(to bottom, transparent 55%, rgba(8,19,31,.55) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  padding-block: clamp(56px, 9vw, 104px);
  min-height: 560px;
  min-height: min(84svh, 720px);
}

.hero .eyebrow { color: rgba(255,255,255,.62); }
.hero .eyebrow::before { background: var(--accent); }

.hero__name {
  margin: 18px 0 0;
  font-size: clamp(38px, 6.4vw, 70px);
  line-height: 1.03;
  letter-spacing: -.035em;
  font-weight: 800;
  color: #fff;
}
.hero__name .hero__ko {
  display: block;
  font-size: .34em;
  font-weight: 500;
  letter-spacing: -.01em;
  color: rgba(255,255,255,.5);
  margin-top: 12px;
}
/* the hanja form, a shade back from the hangul it sits beside */
.hero__name .hero__ko i {
  font-style: normal;
  color: rgba(255, 255, 255, .34);
  margin-left: .35em;
}

.hero__role {
  margin: 20px 0 0;
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 500;
  line-height: 1.55;
  color: rgba(255,255,255,.82);
  max-width: 40ch;
}
.hero__role strong { color: #fff; font-weight: 700; }
.hero__role a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
.hero__role a:hover { border-bottom-color: var(--accent); color: #fff; }

.hero__lede {
  margin: 22px 0 0;
  font-size: clamp(15px, 1.45vw, 16.5px);
  line-height: 1.7;
  color: rgba(255,255,255,.66);
  max-width: 52ch;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.13);
}
.hero__stat { display: flex; flex-direction: column; gap: 5px; }
.hero__stat b {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff;
}
.hero__stat span {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

.hero__portrait { justify-self: center; width: 100%; max-width: 330px; }
.hero__portrait-frame {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.65);
  background: rgba(255,255,255,.05);
}
.hero__portrait-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 4.3;
  object-fit: cover;
  object-position: 50% 22%;
}
.hero__portrait-tag {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 16px 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  background: linear-gradient(to top, rgba(8,19,31,.9), transparent);
}

.hero__scroll {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 26px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
}
.hero__scroll i {
  display: block;
  width: 1px;
  height: 26px;
  background: linear-gradient(to bottom, rgba(255,255,255,.5), transparent);
  animation: heroDrop 2.4s ease-in-out infinite;
}
@keyframes heroDrop {
  0%, 100% { transform: scaleY(.4); transform-origin: top; opacity: .3; }
  50%      { transform: scaleY(1);  transform-origin: top; opacity: .9; }
}

@media (max-width: 900px) {
  .hero__inner {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-block: clamp(40px, 11vw, 64px);
    gap: 34px;
  }
  .hero__portrait { order: -1; justify-self: start; max-width: 148px; }
  .hero__portrait-frame img { aspect-ratio: 1 / 1; }
  .hero__portrait-tag { display: none; }
  .hero__meta { gap: 14px 26px; }
  .hero__stat b { font-size: 19px; }
  .hero__scroll { display: none; }
}

/* --------------------------------------------------------------------------
   Focus cards (research pillars)
   -------------------------------------------------------------------------- */

.focus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 18px;
}

.focus-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.focus-card::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.focus-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--line-hi); }
.focus-card:hover::after { transform: scaleY(1); }

.focus-card__n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--steel-2);
}
.focus-card h3 {
  margin: 12px 0 0;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -.02em;
  font-weight: 700;
  color: var(--navy);
}
.focus-card p {
  margin: 11px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--steel);
}
.focus-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}
.focus-card__links a {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .02em;
  padding: 5px 10px;
  border-radius: 7px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--navy);
  text-decoration: none !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.focus-card__links a:hover { background: var(--deep); color: #fff; border-color: var(--deep); }

/* --------------------------------------------------------------------------
   Reel (real result clips, click / hover to play)
   -------------------------------------------------------------------------- */

.reel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(262px, 1fr));
  gap: 20px;
}

.reel-item {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform .22s ease, box-shadow .22s ease;
}
.reel-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }

.reel-stage {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #0d1b2c;
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
}
.reel-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .3s ease, transform .5s ease;
}
.reel-stage:hover img { transform: scale(1.02); }

.reel-stage__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to top, rgba(8,19,31,.55), rgba(8,19,31,.12));
  transition: opacity .28s ease;
}
.reel-stage__play span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--deep);
  font-size: 15px;
  padding-left: 4px;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  transition: transform .22s ease;
}
.reel-stage:hover .reel-stage__play span { transform: scale(1.06); }
.reel-stage.is-playing .reel-stage__play { opacity: 0; pointer-events: none; }

.reel-stage__size {
  position: absolute;
  right: 10px;
  top: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  background: rgba(8,19,31,.6);
  border: 1px solid rgba(255,255,255,.18);
  padding: 3px 8px;
  border-radius: 6px;
}
.reel-stage.is-playing .reel-stage__size { opacity: 0; transition: opacity .3s ease; }

.reel-body { padding: 16px 18px 18px; }
.reel-body h3 { margin: 0; font-size: 15.5px; line-height: 1.35; letter-spacing: -.015em; font-weight: 700; }
.reel-body h3 a { color: var(--navy); text-decoration: none !important; }
.reel-body h3 a:hover { color: var(--accent); }
.reel-body p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--steel); }
.reel-body .reel-venue {
  display: block;
  margin-top: 11px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--steel-2);
}

/* --------------------------------------------------------------------------
   Work grid (filterable) — home + shared card look
   -------------------------------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}
.filter-btn {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  min-height: 36px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--navy);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.filter-btn:hover { background: var(--paper-2); border-color: var(--line-hi); }
.filter-btn.is-active { background: var(--deep); border-color: var(--deep); color: #fff; }

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
  gap: 20px;
}

.work-card {
  display: flex !important;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  text-decoration: none !important;
  background-image: none !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.work-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--line-hi); }
.work-card *,
.work-card:hover * { text-decoration: none !important; background-image: none !important; }

.work-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #0d1b2c;
  overflow: hidden;
}
.work-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.work-card:hover .work-card__media img { transform: scale(1.045); }

.work-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.work-card__venue {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--steel-2);
}
.work-card__title {
  margin: 9px 0 0;
  font-size: 15.5px;
  line-height: 1.35;
  letter-spacing: -.015em;
  font-weight: 700;
  color: var(--navy);
}
.work-card:hover .work-card__title { color: var(--navy-2); }
.work-card__desc { margin: 9px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--steel); }
.work-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; padding-top: 14px; border-top: 1px dashed var(--line); }
.work-card__tags .chip { font-size: 10.5px; padding: 3px 9px; }

.work-card.is-hidden,
.pub-card.is-hidden,
/* and the heading of a group the filter emptied -- keyed off the attribute
   the script already looks for, so a new group needs no new rule here */
[data-filter-group].is-hidden { display: none !important; }

/* --------------------------------------------------------------------------
   Timeline
   -------------------------------------------------------------------------- */

.tl { position: relative; display: flex; flex-direction: column; gap: 8px; }
.tl::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 7px;
  width: 1px;
  background: linear-gradient(to bottom, var(--line), var(--line-2));
}

.tl-row {
  position: relative;
  display: grid;
  grid-template-columns: 32px 148px 52px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--line-2);
}
.tl-row:last-child { border-bottom: 0; }

.tl-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--paper);
  justify-self: start;
}
.tl-row--now .tl-dot { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-2); }

.tl-when {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .01em;
  color: var(--steel);
  white-space: nowrap;
}
.tl-row--now .tl-when { color: var(--navy); font-weight: 600; }

.tl-logo { display: flex; align-items: center; }
.tl-logo img { max-width: 52px; max-height: 42px; object-fit: contain; }

.tl-what h3 { margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: -.015em; color: var(--navy); }
.tl-what p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--steel); }
.tl-what p b { color: var(--navy); font-weight: 600; }

@media (max-width: 760px) {
  .tl::before { display: none; }
  .tl-row {
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-areas: "dot when" "logo what";
    gap: 10px 12px;
    padding: 18px 0;
  }
  .tl-dot  { grid-area: dot; }
  .tl-when { grid-area: when; }
  .tl-logo { grid-area: logo; }
  .tl-what { grid-area: what; }
}

/* --------------------------------------------------------------------------
   News
   -------------------------------------------------------------------------- */

.news { display: flex; flex-direction: column; }

.news-row {
  display: grid;
  grid-template-columns: 92px 116px minmax(0, 1fr);
  align-items: baseline;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-2);
}
.news-row:first-child { border-top: 1px solid var(--line-2); }

.news-when {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--steel-2);
  white-space: nowrap;
}
.news-kind {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 5px;
  justify-self: start;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--steel);
  white-space: nowrap;
}
.news-kind[data-kind="paper"]  { color: var(--navy);            background: var(--tint-blue);  border-color: var(--tint-blue-line); }
.news-kind[data-kind="award"]  { color: var(--accent-ink);       background: var(--accent-2); border-color: var(--accent-line); }
.news-kind[data-kind="grant"]  { color: var(--tint-green-ink);  background: var(--tint-green); border-color: var(--tint-green-line); }
.news-kind[data-kind="talk"]   { color: var(--tint-indigo-ink); background: var(--tint-indigo);border-color: var(--tint-indigo-line); }
.news-kind[data-kind="fellowship"] { color: var(--tint-teal-ink); background: var(--tint-teal); border-color: var(--tint-teal-line); }
.news-what { font-size: 15px; line-height: 1.6; color: var(--steel); }
.news-what b { color: var(--navy); font-weight: 600; }
.news-what em { color: var(--navy); font-style: normal; font-weight: 500; }
.news-row.is-hidden { display: none; }

.news-more {
  align-self: flex-start;
  margin-top: 20px;
}

@media (max-width: 700px) {
  .news-row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "when kind" "what what";
    gap: 6px 10px;
  }
  .news-when { grid-area: when; }
  .news-kind { grid-area: kind; }
  .news-what { grid-area: what; font-size: 14.5px; }
}

/* --------------------------------------------------------------------------
   People / collaborators
   -------------------------------------------------------------------------- */

.people { display: flex; flex-wrap: wrap; gap: 10px; }
.people a {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--navy) !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.people a:hover { border-color: var(--navy); background: var(--paper-2); transform: translateY(-1px); }
.people a small { font-weight: 500; color: var(--steel-2); font-size: 12px; }

.lab-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius-sm);
  background: var(--paper);
  box-shadow: var(--shadow-1);
}
.lab-card__k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--steel-2);
  width: 100%;
}
.lab-card a { color: var(--navy) !important; font-weight: 700; text-decoration: none !important; }
.lab-card a:hover { color: var(--accent) !important; }
.lab-card span { color: var(--steel); font-size: 15px; }

/* --------------------------------------------------------------------------
   Contact band
   -------------------------------------------------------------------------- */

.contact {
  background: linear-gradient(150deg, var(--deep-2) 0%, var(--deep) 100%);
  color: #fff;
  padding: clamp(52px, 7vw, 84px) 0;
}
.contact__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}
.contact h2 {
  margin: 14px 0 0;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.15;
  letter-spacing: -.025em;
  font-weight: 700;
  color: #fff;
  border: 0;
}
.contact p { margin: 12px 0 0; color: rgba(255,255,255,.62); font-size: 16px; line-height: 1.6; max-width: 46ch; }
.contact .eyebrow { color: rgba(255,255,255,.6); }
.contact__links { display: flex; flex-wrap: wrap; gap: 10px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.page__footer { background: var(--paper-2); border-top: 1px solid var(--line); color: var(--steel); }
.page__footer a { color: var(--steel) !important; }
.page__footer a:hover { color: var(--navy) !important; }
.page__footer footer { padding-block: 1.6em; }

/* --------------------------------------------------------------------------
   Inner pages: publication / project list cards + article polish
   -------------------------------------------------------------------------- */

.page__title {
  letter-spacing: -.03em;
  color: var(--navy);
}

.pub-card {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 26px;
  align-items: stretch;
  padding: 22px;
  margin-bottom: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-1);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.pub-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--line-hi); }

.pub-card__media {
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #0d1b2c;
  min-height: 168px;
}
.pub-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pub-card__body { display: flex; flex-direction: column; }
.pub-card__title { margin: 0; font-size: 18.5px; line-height: 1.3; letter-spacing: -.02em; font-weight: 700; }
.pub-card__title a { color: var(--navy) !important; text-decoration: none !important; }
.pub-card__title a:hover { color: var(--accent) !important; }

.pub-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 9px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--steel-2);
}
.pub-card__excerpt { margin: 13px 0 0; font-size: 15px; line-height: 1.65; color: var(--steel); }
.pub-card__excerpt b { color: var(--navy); font-weight: 600; }
.pub-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.pub-card__actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: auto; padding-top: 18px; }
.pub-card__actions .btn-x--code { background: var(--paper); color: var(--accent) !important; border-color: var(--accent); }
.pub-card__actions .btn-x--code:hover { background: var(--accent); color: #fff !important; }

@media (max-width: 800px) {
  .pub-card { grid-template-columns: 1fr; gap: 18px; padding: 16px; }
  .pub-card__media { aspect-ratio: 16 / 9; min-height: 0; }
}

.category-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 48px 0 22px;
  font-size: 21px;
  letter-spacing: -.02em;
  color: var(--navy);
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}
.category-section:first-of-type .category-header { margin-top: 8px; }
.category-count {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--steel-2);
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.page-lede {
  margin: 0 0 30px;
  max-width: 62ch;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--steel);
}

/* Publication / project article bodies (existing inline-styled pages) */
.page__content img { border-radius: var(--radius-sm); }
.page__content h2 { letter-spacing: -.02em; }
.page__content table { font-size: .9em; }

/* Any wide block inside an article scrolls rather than breaking the page */
.page__content .MathJax_Display,
.page__content mjx-container[display="true"] { overflow-x: auto; overflow-y: hidden; max-width: 100%; }
.page__content pre { overflow-x: auto; }

/* --------------------------------------------------------------------------
   Home article shell
   -------------------------------------------------------------------------- */

.home-main { display: block; width: 100%; }
.home-main > p:empty { display: none; }

/* --------------------------------------------------------------------------
   Motion / accessibility
   -------------------------------------------------------------------------- */

:where(a, button):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html.reveal-on .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Compact cover for section pages (publications / projects / teaching / blog)
   -------------------------------------------------------------------------- */

.hero--compact .hero__inner--compact {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  min-height: 0;
  padding-block: clamp(40px, 6.5vw, 78px);
}

.hero__title {
  margin: 16px 0 0;
  font-size: clamp(32px, 5.2vw, 54px);
  line-height: 1.04;
  letter-spacing: -.032em;
  font-weight: 800;
  color: #fff;
}

.hero--compact .hero__lede { margin-top: 16px; max-width: 58ch; }
.hero--compact .hero__meta { margin-top: 30px; padding-top: 22px; }
.hero--compact .hero__stat b { font-size: 20px; }

@media (max-width: 900px) {
  .hero--compact .hero__inner--compact { padding-block: clamp(32px, 9vw, 52px); }
  .hero--compact .hero__meta { gap: 14px 24px; }
}

/* --------------------------------------------------------------------------
   Teaching cards
   -------------------------------------------------------------------------- */

.teach-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 22px;
  padding: 20px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-1);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.teach-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--line-hi); }

.teach-card__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 8px;
  border-radius: var(--radius-sm);
  background: linear-gradient(150deg, var(--deep-2), var(--deep));
  color: #fff;
}
.teach-card__year {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  color: rgba(255,255,255,.62);
}
.teach-card__role { font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }

.teach-card__title { margin: 0; font-size: 18px; line-height: 1.3; letter-spacing: -.02em; font-weight: 700; }
.teach-card__title a { color: var(--navy) !important; text-decoration: none !important; }
.teach-card__title a:hover { color: var(--accent) !important; }

.teach-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 16px;
  margin-top: 9px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--steel-2);
}
.teach-card__excerpt { margin: 12px 0 0; font-size: 15px; line-height: 1.65; color: var(--steel); }

@media (max-width: 620px) {
  .teach-card { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; }
  .teach-card__badge { flex-direction: row; gap: 12px; padding: 10px 14px; justify-content: flex-start; }
  .teach-card__role { font-size: 17px; }
}

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */

.empty-state {
  margin-top: 8px;
  padding: clamp(32px, 6vw, 58px);
  border: 1px dashed #d5dde8;
  border-radius: var(--radius);
  background: var(--paper-2);
  text-align: center;
}
.empty-state__tag {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .28em;
  color: var(--steel-2);
}
.empty-state__body {
  margin: 14px auto 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.7;
  color: var(--steel);
}

/* --------------------------------------------------------------------------
   Comments
   -------------------------------------------------------------------------- */

.cbox {
  margin-top: 56px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}

.cbox__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.cbox__head h2 { margin: 0; font-size: 22px; letter-spacing: -.02em; color: var(--navy); }
.cbox__count { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; color: var(--steel-2); }

.cbox__form { margin-top: 20px; }
.cbox__ids { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.cbox__form > .cbox__field { margin-top: 16px; }

.cbox__field > span {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--steel-2);
  margin-bottom: 7px;
}
.cbox__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.cbox__field input,
.cbox__field textarea,
.cbox__edit {
  width: 100%;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--navy);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.cbox__field textarea, .cbox__edit { resize: vertical; min-height: 96px; }
.cbox__field input:focus,
.cbox__field textarea:focus,
.cbox__edit:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.cbox__hint { margin: 13px 0 0; font-size: 13px; line-height: 1.65; color: var(--steel-2); }
/* One line across the whole column rather than a narrow slab beside it: the
   text is short enough that the full measure costs nothing to read. */
.cbox__notice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 14px 0 0;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  font-size: 13px;
  line-height: 1.6;
  color: var(--steel);
}
.cbox__notice svg { flex: none; margin-top: 1px; color: var(--steel-2); }
.cbox__notice b { color: var(--navy); }
.cbox__tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent-2);
  border: 1px solid var(--accent-line);
  padding: 2px 7px;
  border-radius: 5px;
}

.cbox__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 16px; }
.cbox__status { font-size: 13px; color: var(--steel-2); }
.cbox__error {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--accent-ink);
  background: var(--accent-2);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
}

.cbox__list { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cbox__item {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
}
.cbox__item-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.cbox__item-name { font-size: 15px; color: var(--navy); }
.cbox__item-when { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--steel-2); }
.cbox__item-body {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--steel);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.cbox__item-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 13px; }

.cbox__linkbtn {
  background: none;
  border: 0;
  padding: 6px 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cbox__linkbtn:hover { color: var(--accent); }
.cbox__linkbtn--danger { color: var(--accent-ink); }
.cbox__linkbtn--danger:hover { color: var(--danger-ink); }

.cbox__empty { margin: 26px 0 0; font-size: 15px; color: var(--steel-2); }

/* The actions menu. Every comment carries one; the password behind Edit and
   Delete is the gate, not the presence of the button, so everybody sees it. */
.cbox__more { position: relative; margin-left: auto; align-self: center; }
.cbox__ico { display: inline-flex; flex: none; }
.cbox__ico svg { display: block; }

.cbox__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--steel-2);
  cursor: pointer;
  transition: background .16s ease, color .16s ease, opacity .16s ease, transform .12s ease;
}
.cbox__dots:hover { background: var(--paper-2); color: var(--navy); }
.cbox__dots:active { transform: scale(.9); }
.cbox__dots:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cbox__more--open .cbox__dots { background: var(--deep); color: #fff; }

/* Held back until the comment is under the cursor, where a pointer exists to
   do the holding back. Touch and keyboard always get it. */
@media (hover: hover) and (min-width: 640px) {
  .cbox__dots { opacity: 0; }
  .cbox__item:hover > .cbox__item-head .cbox__dots,
  .cbox__item:focus-within > .cbox__item-head .cbox__dots,
  .cbox__more--open .cbox__dots { opacity: 1; }
}

.cbox__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  min-width: 190px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(19, 41, 75, .05), 0 20px 44px -14px rgba(19, 41, 75, .3);
  transform-origin: top right;
  animation: cbox-pop .16s cubic-bezier(.2, .9, .3, 1.15);
}
@keyframes cbox-pop {
  from { opacity: 0; transform: scale(.94) translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.cbox__menuitem {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  background: none;
  border: 0;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
  transition: background .13s ease, color .13s ease;
}
.cbox__menuitem .cbox__ico { color: var(--steel-2); transition: color .13s ease; }
.cbox__menuitem:hover { background: var(--paper-2); }
.cbox__menuitem:hover .cbox__ico { color: var(--navy); }
.cbox__menuitem:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cbox__menuitem--danger, .cbox__menuitem--danger .cbox__ico { color: var(--accent-ink); }
.cbox__menuitem--danger:hover { background: var(--accent-2); }
.cbox__menuitem--danger:hover .cbox__ico { color: var(--accent-ink); }

.cbox__panel {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--paper-2);
  animation: cbox-slide .18s ease;
}
@keyframes cbox-slide {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}
.cbox__panel--delete { background: var(--accent-2); border-color: var(--accent-line); }
.cbox__panel-ask { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--steel); }

@media (prefers-reduced-motion: reduce) {
  .cbox__menu, .cbox__panel { animation: none; }
  .cbox__dots { transition: none; }
}
.cbox__panel-pass {
  width: 100%;
  max-width: 320px;
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--navy);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
}
.cbox__panel-pass:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(19, 41, 75, .10);
}
.cbox__panel .cbox__edit { background: var(--paper); }
.cbox__panel .cbox__error { margin-top: 12px; }

/* One level of replies, and only the author writes them. */
.cbox__thread { list-style: none; margin: 16px 0 0 0; padding: 0 0 0 18px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.cbox__thread .cbox__item { padding: 13px 15px; background: var(--paper-2); }

.cbox__item--author { border-color: var(--accent-line); }
.cbox__tag--author { color: #fff; background: var(--accent); border-color: var(--accent); }

/* A filled button, so it keeps its own dark red in both themes -- the pale
   --accent-ink that reads as *text* on dark would carry white text badly,
   and delete is the last control that should be ambiguous. */
.btn-x--danger { background: #9a3412; border-color: #9a3412; }
.btn-x--danger:hover { background: #7c2d12; border-color: #7c2d12; }

/* --------------------------------------------------------------------------
   /backstage/ — the owner's panel. Unlisted, but the password is the lock.
   -------------------------------------------------------------------------- */

.mx__gate { max-width: 380px; }
.mx__gate button { margin-top: 16px; }
.mx__gate .cbox__hint { margin-top: 18px; }

.mx__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  font-size: 14px;
  color: var(--steel);
}
.mx__bar b { color: var(--navy); }
.mx__bar .cbox__linkbtn { margin-left: auto; }

.mx__list { margin-top: 26px; display: flex; flex-direction: column; gap: 30px; }
.mx__group-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 14px;
  font-family: var(--mono);
  letter-spacing: .02em;
}
.mx__group-n { font-size: 11px; color: var(--steel-2); }
.mx__row {
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
}
.mx__row + .mx__row { margin-top: 10px; }
.mx__row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14.5px; color: var(--navy); }
.mx__row-head .cbox__linkbtn { margin-left: auto; }
.mx__when { font-family: var(--mono); font-size: 11px; color: var(--steel-2); }
.mx__body { margin: 9px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--steel); white-space: pre-wrap; overflow-wrap: anywhere; }
.mx__empty { font-size: 15px; color: var(--steel-2); }
.mx__pw { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); max-width: 380px; }
.mx__pw button { margin-top: 14px; }

/* --------------------------------------------------------------------------
   Sidebar (author profile)

   The theme pins it with `position: fixed` above 1024px and no `top` value.
   Two things go wrong. Fixed positioning resolves its width against the
   viewport instead of #main, so past #main's max-width it grows wider than
   the 2/12 gutter reserved for it and overlaps the content column. And its
   static position sits wherever #main begins — which, now that section pages
   open with a cover, is far down the page, so it hangs there instead of
   following the scroll.

   Sticky fixes both: the element stays in flow, so susy's span(2 of 12) still
   resolves against #main, and it tracks the page under the masthead.
   -------------------------------------------------------------------------- */

@media screen and (min-width: 1024px) {
  .sidebar {
    position: sticky;
    top: calc(70px + 1.5rem);
    height: auto;
    max-height: calc(100vh - 70px - 3rem);
    margin-top: 0;
    padding-top: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* --------------------------------------------------------------------------
   Section pages: spotlight, groups, sticky filters, CTA strip, CV
   -------------------------------------------------------------------------- */

.spot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.spot--wide { margin-bottom: clamp(44px, 7vw, 84px); }
.spot--wide:last-child { margin-bottom: 0; }
.spot--flip .spot__media { order: 2; }

.spot__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #0d1b2c;
  overflow: hidden;
  box-shadow: var(--shadow-2);
  cursor: pointer;
}
.spot__media--still { cursor: default; }
.spot__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.spot__media:hover img { transform: scale(1.03); }
.spot__media--still:hover img { transform: none; }

.spot__meta { display: flex; flex-wrap: wrap; gap: 7px; }
.spot__title {
  margin: 16px 0 0;
  font-size: clamp(22px, 2.6vw, 31px);
  line-height: 1.2;
  letter-spacing: -.025em;
  font-weight: 700;
}
.spot__title a { color: var(--navy) !important; text-decoration: none !important; }
.spot__title a:hover { color: var(--accent) !important; }
.spot__excerpt { margin: 15px 0 0; font-size: 16px; line-height: 1.7; color: var(--steel); }
.spot__venue {
  margin: 13px 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--steel-2);
}
/* Sits directly under the venue, in the same mono voice but quieter, so the
   two read as one block of provenance rather than two claims. */
.spot__advisor {
  margin: 5px 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--steel-2);
  opacity: .82;
}

.spot__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

@media (max-width: 860px) {
  .spot { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .spot--flip .spot__media { order: 0; }
}

/* group headings ---------------------------------------------------------- */

.group-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: clamp(36px, 5vw, 54px) 0 22px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--steel);
}
.group-head em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--steel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 8px;
}
.group-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pub-group:first-of-type > .group-head,
.wrap > .group-head:first-child { margin-top: 0; }

/* sticky filter pill ------------------------------------------------------ */

.filters--sticky {
  position: sticky;
  top: calc(70px + 14px);
  z-index: 6;
  margin-bottom: 30px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper-veil);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  box-shadow: var(--shadow-1);
}

/* wider teaser once there is room for it */
@media (min-width: 1100px) {
  .pub-card { grid-template-columns: 300px minmax(0, 1fr); }
}

/* teaching grid ----------------------------------------------------------- */

.teach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(370px, 1fr));
  gap: 18px;
}
.teach-grid .teach-card { margin-bottom: 0; }
@media (max-width: 820px) { .teach-grid { grid-template-columns: minmax(0, 1fr); } }

/* CTA strip --------------------------------------------------------------- */

.cta-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-1);
}
.cta-strip h3 { margin: 11px 0 0; font-size: 21px; letter-spacing: -.02em; color: var(--navy); }
.cta-strip p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--steel); max-width: 48ch; }
.cta-strip__links { display: flex; flex-wrap: wrap; gap: 10px; }

.empty-state__links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }

/* CV ---------------------------------------------------------------------- */

.cv-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.cv-bar__note { margin: 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--steel-2); }
.cv-bar__note code { background: var(--line-2); border-radius: 5px; padding: 2px 7px; font-size: 11px; }
.cv-bar__links { display: flex; flex-wrap: wrap; gap: 10px; }

.cv-frame {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: var(--shadow-2);
}
.cv-frame iframe {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: min(1500px, 148vh);
  border: 0;
}
/* sits behind the frame, so a browser that renders nothing still shows a way out */
.cv-frame__fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 30px;
  text-align: center;
  font-size: 15px;
  line-height: 1.7;
  color: var(--steel);
}
@media (max-width: 820px) { .cv-frame iframe { height: 78vh; } }

/* ==========================================================================
   Publication / project / teaching detail pages
   ========================================================================== */

.paper-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 60;
  pointer-events: none;
  background: transparent;
}
.paper-progress i {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--accent);
}

/* --- hero ---------------------------------------------------------------- */

.hero--paper .hero__inner--paper {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  min-height: 0;
  padding-block: clamp(40px, 7vw, 84px);
  max-width: 62rem;
}

.paper-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62) !important;
  text-decoration: none;
  transition: color .18s ease;
}
.paper-back:hover { color: #fff !important; }

.paper-title {
  margin: 0;
  font-size: clamp(26px, 4.4vw, 46px);
  line-height: 1.12;
  letter-spacing: -.025em;
  font-weight: 700;
  color: #fff;
  max-width: 22ch;
  text-wrap: balance;
}

.paper-authors { margin: 20px 0 0; font-size: clamp(14px, 1.6vw, 16px); color: rgba(255,255,255,.78); }
.paper-author.is-me { color: #fff; font-weight: 600; border-bottom: 1px solid var(--accent); }
.paper-sep { margin: 0 9px; color: rgba(255,255,255,.32); }

.paper-venue {
  margin: 9px 0 0;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .03em;
  color: rgba(255,255,255,.58);
}
.paper-venue time { color: inherit; }

.paper-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.hero--paper .chip {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
  color: rgba(255,255,255,.9);
}

.paper-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.hero--paper .btn-x { background: #fff; color: var(--deep) !important; border-color: #fff; }
.hero--paper .btn-x:hover { background: #fff; border-color: #fff; }
.hero--paper .btn-x--ghost {
  background: transparent;
  color: rgba(255,255,255,.92) !important;
  border-color: rgba(255,255,255,.28);
}
.hero--paper .btn-x--ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.55); color: #fff !important; }
.hero--paper .btn-x.is-static {
  cursor: default;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
}
.hero--paper .btn-x.is-static:hover { transform: none; box-shadow: none; }

/* --- body ---------------------------------------------------------------- */

.paper-main { background: var(--paper); }

.paper-wrap {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 68px);
  align-items: start;
  padding-block: clamp(40px, 6vw, 76px);
}

.paper-rail { position: sticky; top: calc(70px + 26px); }
.paper-rail__head {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--steel-2);
}

.paper-toc ol { list-style: none; margin: 0 0 30px; padding: 0; border-left: 1px solid var(--line); }
.paper-toc li { margin: 0; }
.paper-toc a {
  display: block;
  padding: 7px 0 7px 15px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--steel);
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease;
}
.paper-toc a:hover { color: var(--navy); }
.paper-toc a.is-here { color: var(--navy); font-weight: 600; border-left-color: var(--accent); }

.paper-facts dl { margin: 0; }
.paper-facts div { padding: 9px 0; border-top: 1px solid var(--line-2); }
.paper-facts div:first-child { border-top: 0; padding-top: 0; }
.paper-facts dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--steel-2);
}
.paper-facts dd { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--navy); }

.paper-body { min-width: 0; }

.paper-lede {
  margin: 0 0 30px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
  font-size: clamp(17px, 2vw, 19.5px);
  line-height: 1.6;
  letter-spacing: -.01em;
  color: var(--navy);
  max-width: 60ch;
}

/* --- prose --------------------------------------------------------------- */

.paper-prose { font-size: 16.5px; line-height: 1.75; color: var(--prose-2); max-width: 74ch; }
.paper-prose > *:first-child { margin-top: 0; }
.paper-prose p { margin: 0 0 1.15em; }
.paper-prose h2 {
  margin: 2.1em 0 .7em;
  font-size: clamp(20px, 2.4vw, 25px);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--navy);
  scroll-margin-top: 100px;
}
.paper-prose h2 span { color: inherit !important; }
.paper-prose h3 {
  margin: 1.8em 0 .55em;
  font-size: clamp(16.5px, 2vw, 19px);
  letter-spacing: -.01em;
  color: var(--navy);
  scroll-margin-top: 100px;
}
.paper-prose ul, .paper-prose ol { margin: 0 0 1.15em; padding-left: 1.25em; }
.paper-prose li { margin: 0 0 .5em; }
.paper-prose li::marker { color: var(--steel-2); }
.paper-prose strong { color: var(--navy); font-weight: 650; }
.paper-prose a { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--line); }
.paper-prose a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.paper-prose hr { margin: 2.4em 0; border: 0; border-top: 1px solid var(--line); }
.paper-prose img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.paper-prose blockquote {
  margin: 1.4em 0;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--line);
  color: var(--steel);
}
.paper-prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.paper-prose .table-scroll, .paper-prose figure { overflow-x: auto; }

/* MathJax display blocks can outrun the column on a phone. */
.paper-prose mjx-container[display="true"] { overflow-x: auto; overflow-y: hidden; padding: 4px 0; }

/* --- abstract + figures -------------------------------------------------- */

.paper-abstract {
  margin: 0 0 2em;
  padding: 22px 24px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--navy);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.paper-abstract h2 {
  margin: 0 0 10px !important;
  font-family: var(--mono);
  font-size: 11px !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--steel-2) !important;
}
.paper-abstract p { margin: 0; font-size: 15.5px; line-height: 1.72; color: var(--prose-2); }

.paper-figure { margin: 2em 0; }
.paper-figure img { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); display: block; }
.paper-figure figcaption { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--steel-2); }
.paper-figure--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.paper-figure--trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center; }
.paper-figure--trio > div { min-width: 0; }
.paper-figure--trio p { margin: 0 0 6px; font-size: 12.5px; color: var(--steel-2); }
.paper-figure-group { margin: 2em 0; }
.paper-figure__cap { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--steel-2); text-align: center; }
.paper-figure__cap em { font-style: normal; }
.paper-figure__label {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.paper-callout {
  margin: 1.6em 0;
  padding: 18px 20px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.paper-callout > *:first-child { margin-top: 0; }
.paper-callout > *:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .paper-figure--pair { grid-template-columns: 1fr; }
  .paper-figure--trio { grid-template-columns: 1fr; }
}

/* --- citation ------------------------------------------------------------ */

.paper-cite { margin-top: clamp(40px, 6vw, 68px); scroll-margin-top: 100px; }
.paper-cite__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.paper-cite__head h2 { margin: 0; font-size: 20px; letter-spacing: -.02em; color: var(--navy); }
.paper-cite__plain { margin: 14px 0 0; font-size: 14px; line-height: 1.7; color: var(--steel); max-width: 70ch; }
.paper-bibtex {
  margin: 16px 0 0;
  padding: 18px 20px;
  overflow-x: auto;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.paper-bibtex code {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.65;
  color: var(--prose-2);
  background: none;
  white-space: pre;
}
.btn-x.is-copied { background: #14532d !important; border-color: #14532d !important; color: #fff !important; }

/* --- neighbours + related ------------------------------------------------ */

.paper-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding-bottom: clamp(40px, 6vw, 72px);
}
.paper-nav__item {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  background: var(--paper);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.paper-nav__item:hover { border-color: var(--navy); transform: translateY(-2px); box-shadow: var(--shadow-2, 0 8px 24px rgba(10,23,41,.07)); }
.paper-nav__item--next { text-align: right; }
.paper-nav__dir {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--steel-2);
}
.paper-nav__title { display: block; margin-top: 7px; font-size: 15px; line-height: 1.4; color: var(--navy); font-weight: 600; }

.rel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.rel-card {
  display: block;
  padding: 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}
.rel-card:hover { border-color: var(--navy); transform: translateY(-2px); }
.rel-card__year { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--accent); }
.rel-card__title { display: block; margin-top: 8px; font-size: 15.5px; line-height: 1.35; font-weight: 600; color: var(--navy); }
.rel-card__venue { display: block; margin-top: 8px; font-size: 12.5px; color: var(--steel-2); }

/* --- narrow -------------------------------------------------------------- */

@media (max-width: 900px) {
  .paper-wrap { grid-template-columns: minmax(0, 1fr); }
  .paper-rail {
    position: static;
    padding-bottom: 26px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--line);
  }
  .paper-toc ol { margin-bottom: 22px; }
  .paper-nav { grid-template-columns: 1fr; }
  .paper-nav__item--next { text-align: left; }
  .paper-title { max-width: none; }
}

/* A clip sitting inside prose keeps its own proportions rather than the
   reel's 16/10 crop, and carries a border like the still figures around it. */
.reel-stage--fig {
  aspect-ratio: auto;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.reel-stage--fig img { height: auto; object-fit: contain; }
.reel-stage--fig:hover img { transform: none; }
.reel-stage--fig .reel-stage__play {
  background: linear-gradient(to top, rgba(8,19,31,.28), rgba(8,19,31,.06));
}
.reel-stage--fig .reel-stage__play span { width: 44px; height: 44px; font-size: 13px; }
.paper-figure--lead { margin: 0 0 2.2em; }
.paper-figure--trio .reel-stage--fig .reel-stage__play span { width: 34px; height: 34px; font-size: 11px; }

/* ==========================================================================
   Publication pages — the field is the page
   Everywhere else on this site the animation is a band across the top with
   content beneath it. Here it is fixed behind the whole document and stays
   live the entire way down, and the paper floats over it on a light sheet.
   ========================================================================== */

.paper-page--immersive { position: relative; background: var(--deep-2); }

.paper-field-wrap {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;                    /* the page above it takes the events */
  background: linear-gradient(168deg, var(--deep-3) 0%, var(--deep-2) 44%, var(--deep) 100%);
}
.paper-field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.paper-field__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(130% 100% at 50% 25%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(130% 100% at 50% 25%, #000 30%, transparent 80%);
}

/* the footer follows the sheet, so it must sit above the fixed field */
.paper-page--immersive ~ .page__footer { position: relative; z-index: 3; }

/* --- the opening screen -------------------------------------------------- */

.paper-open {
  position: relative;
  z-index: 2;
  min-height: calc(100vh - 70px);
  min-height: calc(100svh - 70px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(80px, 12vh, 130px) var(--gutter) clamp(70px, 10vh, 110px);
  color: #fff;
}
.paper-open__inner { max-width: 860px; width: 100%; }

.paper-open .paper-back { margin-bottom: 26px; }
.paper-open .eyebrow { justify-content: center; }
.paper-open .paper-title {
  margin: 6px auto 0;
  font-size: clamp(28px, 5vw, 58px);
  line-height: 1.08;
  max-width: 18ch;
}
.paper-open .paper-authors { margin-top: 26px; font-size: clamp(14px, 1.7vw, 17px); }
.paper-open .paper-venue { margin-top: 10px; }
.paper-open .paper-chips { justify-content: center; margin-top: 26px; }
.paper-open .chip {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
  color: rgba(255,255,255,.9);
}
.paper-open .paper-actions { justify-content: center; margin-top: 34px; }
.paper-open .btn-x { background: #fff; color: var(--deep) !important; border-color: #fff; }
.paper-open .btn-x--ghost {
  background: transparent;
  color: rgba(255,255,255,.92) !important;
  border-color: rgba(255,255,255,.28);
}
.paper-open .btn-x--ghost:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.55); color: #fff !important; }

.paper-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 5vh, 46px);
  width: 26px;
  height: 42px;
  margin-left: -13px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 14px;
  display: flex;
  justify-content: center;
  padding-top: 8px;
}
.paper-cue span {
  width: 3px;
  height: 7px;
  border-radius: 2px;
  background: rgba(255,255,255,.7);
  animation: paper-cue 1.9s ease-in-out infinite;
}
@keyframes paper-cue {
  0%, 100% { transform: translateY(0); opacity: .25; }
  40%      { transform: translateY(11px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .paper-cue span { animation: none; opacity: .7; }
}

/* --- the sheet the paper is printed on ----------------------------------- */

.paper-flowline {
  position: relative;
  z-index: 2;
  padding: 0 clamp(14px, 4vw, 56px) clamp(60px, 9vh, 120px);
}

.paper-sheet {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(30px, 5vw, 72px) clamp(22px, 4.4vw, 68px) clamp(40px, 6vw, 78px);
  background: var(--paper);
  border-radius: 20px;
  box-shadow: 0 34px 90px rgba(3, 10, 20, .46);
}
.paper-sheet .paper-prose { max-width: none; margin: 0 auto; }
.paper-sheet .paper-cite { margin-top: clamp(40px, 5vw, 64px); }

/* --- contents, set in the dark margin ----------------------------------- */

.paper-toc--margin {
  position: fixed;
  left: clamp(16px, 2.6vw, 40px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  max-width: 190px;
  max-height: 60vh;
  overflow-y: auto;
}
.paper-toc--margin ol { border-left-color: rgba(255,255,255,.16); margin: 0; }
.paper-toc--margin a { color: rgba(255,255,255,.55); font-size: 12.5px; padding: 6px 0 6px 13px; }
.paper-toc--margin a:hover { color: #fff; }
.paper-toc--margin a.is-here { color: #fff; font-weight: 600; border-left-color: var(--accent); }

/* it only exists where there is margin to set it in */
@media (max-width: 1439px) { .paper-toc--margin { display: none; } }

/* --- the page ends back in the field ------------------------------------ */

.paper-end {
  max-width: 900px;
  margin: clamp(40px, 6vh, 76px) auto 0;
  color: #fff;
}
.paper-end .paper-nav { padding-bottom: 0; }
.paper-end .paper-nav__item {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.paper-end .paper-nav__item:hover { border-color: rgba(255,255,255,.5); box-shadow: none; }
.paper-end .paper-nav__dir { color: rgba(255,255,255,.45); }
.paper-end .paper-nav__title { color: #fff; }

.paper-end .paper-related { margin-top: clamp(34px, 5vh, 56px); }
.paper-end .eyebrow { color: rgba(255,255,255,.5); margin-bottom: 16px; }
.paper-end .eyebrow::before { background: var(--accent); }
.paper-end .rel-card {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.paper-end .rel-card:hover { border-color: rgba(255,255,255,.5); }
.paper-end .rel-card__title { color: #fff; }
.paper-end .rel-card__venue { color: rgba(255,255,255,.5); }

/* --- narrow -------------------------------------------------------------- */

@media (max-width: 700px) {
  .paper-open { min-height: calc(100svh - 70px); padding-top: 96px; }
  .paper-open .paper-title { max-width: none; }
  .paper-sheet { border-radius: 14px; }
  .paper-flowline { padding-inline: 12px; }
  .paper-end .paper-nav { grid-template-columns: 1fr; }
}


/* ==========================================================================
   A blog post

   Neither a paper nor an archive row. The opening is a dark band with the
   field running through it, but its text sits on the same left edge and the
   same measure as the prose below, so the page reads as one column from the
   title to the last line. Everything after it is white and typographic: the
   section index in the margin, numbered headings, a drop cap, and quotes
   heavy enough to carry an argument, which in an essay they usually do.
   ========================================================================== */

.post-page { --post-measure: 720px; }

.post-open {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(160deg, var(--deep-3) 0%, var(--deep-2) 38%, var(--deep) 100%);
  color: #fff;
  padding: clamp(72px, 12vh, 132px) 0 clamp(78px, 13vh, 140px);
}
.post-field {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: .95;
}
/* the band lets go of the reader rather than stopping at a line */
.post-open__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 190px;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(19, 41, 75, 0) 0%, rgba(10, 23, 41, .55) 62%, var(--paper) 100%);
}
.post-open__inner {
  position: relative;
  z-index: 3;
  max-width: var(--post-measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.post-open .eyebrow { color: rgba(255, 255, 255, .72); }
.post-open .eyebrow::before { background: var(--accent); }

.post-title {
  margin: 18px 0 0;
  font-size: clamp(33px, 5.4vw, 54px);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 650;
  color: #fff;
  text-wrap: balance;
}
.post-lede {
  margin: 22px 0 0;
  max-width: 40ch;
  font-size: clamp(16.5px, 1.9vw, 19px);
  line-height: 1.62;
  color: rgba(255, 255, 255, .78);
}
.post-lede em { font-style: italic; color: #fff; }

.post-by {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 14px;
  color: rgba(255, 255, 255, .8);
}
.post-by__face {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .25);
}
.post-by__name { font-weight: 600; color: #fff; }
.post-by__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.post-by__tags a {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  padding: 4px 11px;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.post-by__tags a:hover { color: #fff; border-color: var(--accent); }

/* ------------------------------------------------------------- the prose -- */

.post-main {
  position: relative;
  max-width: var(--post-measure);
  margin: 0 auto;
  padding: clamp(46px, 7vh, 76px) var(--gutter) clamp(60px, 9vh, 100px);
}

.post-body {
  counter-reset: sec;
  font-size: 18px;
  line-height: 1.78;
  color: var(--prose);
}
.post-body > p { margin: 0 0 1.35em; }
.post-body > p:first-of-type::first-letter {
  float: left;
  margin: .04em .1em 0 0;
  font-size: 3.5em;
  line-height: .82;
  font-weight: 650;
  color: var(--navy);
}
.post-body strong { font-weight: 650; color: var(--navy); }
.post-body a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.post-body a:hover { color: var(--accent); }

.post-body h2 {
  counter-increment: sec;
  margin: 2.6em 0 .65em;
  font-size: clamp(21px, 2.6vw, 27px);
  line-height: 1.25;
  letter-spacing: -.025em;
  font-weight: 650;
  color: var(--navy);
  scroll-margin-top: 92px;
}
.post-body h2::before {
  content: counter(sec, decimal-leading-zero);
  display: block;
  margin-bottom: .75em;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--accent);
}
.post-body h3 {
  margin: 2em 0 .5em;
  font-size: 18.5px;
  letter-spacing: -.01em;
  color: var(--navy);
}

/* An essay quotes to make a point, so the quote gets to be the loudest thing
   on the page rather than a smaller, greyer aside. */
.post-body blockquote {
  margin: 1.9em 0;
  padding: 1.05em 1.5em;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--paper-2);
}
.post-body blockquote p {
  margin: 0;
  font-size: clamp(18px, 2.1vw, 21px);
  line-height: 1.5;
  letter-spacing: -.012em;
  font-weight: 500;
  color: var(--navy);
}
.post-body blockquote p + p { margin-top: .6em; }

.post-body ul, .post-body ol { margin: 0 0 1.35em; padding-left: 1.3em; }
.post-body li { margin-bottom: .5em; }
.post-body li::marker { color: var(--steel-2); }
.post-body hr { margin: 2.6em 0; border: 0; border-top: 1px solid var(--line); }
.post-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.post-body figure { margin: 2em 0; }
.post-body figcaption { margin-top: 10px; font-size: 13.5px; color: var(--steel-2); }
.post-body code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: .1em .38em;
}
.post-body pre { overflow-x: auto; border-radius: var(--radius-sm); }
.post-body pre code { border: 0; background: none; padding: 0; }

/* ------------------------------------------------- the index in the margin -- */

/* Bound to the prose rather than to the viewport: pinned to the window it
   would ride up over the dark opening, where it is both unreadable and
   pointing at nothing. Absolute inside .post-main, sticky within that, so it
   appears with the first paragraph and leaves with the last. */
.post-index { display: none; }
@media (min-width: 1240px) {
  .post-index[hidden] { display: none; }
  .post-index {
    display: block;
    position: absolute;
    left: -232px;
    top: clamp(46px, 7vh, 76px);
    bottom: clamp(60px, 9vh, 100px);
    width: 196px;
  }
  .post-index__stick { position: sticky; top: 42vh; }
  .post-index__head {
    margin: 0 0 12px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--steel-2);
  }
  .post-index ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
  .post-index li { counter-increment: toc; margin-bottom: 10px; }
  .post-index a {
    display: block;
    padding-left: 13px;
    border-left: 2px solid var(--line);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--steel-2);
    text-decoration: none;
    transition: color .18s ease, border-color .18s ease;
  }
  .post-index a:hover { color: var(--navy); }
  .post-index a.is-here { color: var(--navy); border-left-color: var(--accent); }
}

/* -------------------------------------------------------------- the end --- */

.post-foot { margin-top: clamp(48px, 7vh, 78px); }

.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.post-nav__item {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.post-nav__item:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.post-nav__item--next { text-align: right; }
.post-nav__dir {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--steel-2);
}
.post-nav__title { font-size: 15px; line-height: 1.4; color: var(--navy); }

.post-back {
  display: inline-block;
  margin-top: 28px;
  font-size: 14px;
  color: var(--steel);
  text-decoration: none;
}
.post-back:hover { color: var(--accent); }

@media (max-width: 560px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav__item--next { text-align: left; }
  .post-body { font-size: 17px; }
  .post-by__tags { margin-left: 0; }
}


/* ==========================================================================
   The blog index

   One post or twenty, the page has to look deliberate. The newest one takes
   the full width as a card with the date set on a rail down its left edge;
   anything behind it collapses into a year list of single rows. At n = 1 the
   result reads as one considered card rather than a list with one item in it,
   which is the case that had to work first.
   ========================================================================== */

.blog-lead {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: clamp(20px, 4vw, 44px);
  margin-top: 6px;
  padding: clamp(24px, 3.4vw, 38px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
/* a hairline of accent that draws itself across the top on hover */
.blog-lead::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .38s cubic-bezier(.2, .8, .2, 1);
}
.blog-lead:hover {
  border-color: var(--line-hi);
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}
.blog-lead:hover::before { transform: scaleX(1); }

.blog-lead__rail {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-right: clamp(16px, 2.4vw, 30px);
  border-right: 1px solid var(--line);
}
.blog-lead__day {
  font-size: clamp(38px, 5vw, 52px);
  line-height: .92;
  font-weight: 650;
  letter-spacing: -.04em;
  color: var(--navy);
}
.blog-lead__mon,
.blog-lead__read {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--steel-2);
}
.blog-lead__mon { margin-top: 7px; }

.blog-lead__title {
  margin: 14px 0 0;
  font-size: clamp(24px, 3.1vw, 34px);
  line-height: 1.16;
  letter-spacing: -.03em;
  font-weight: 650;
  color: var(--navy);
  text-wrap: balance;
}
.blog-lead:hover .blog-lead__title { color: var(--accent); }
.blog-lead__lede {
  margin-top: 13px;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.68;
  color: var(--steel);
}
.blog-lead__lede em { font-style: italic; color: var(--navy); }

.blog-lead__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}
.blog-lead__tags { display: flex; flex-wrap: wrap; gap: 7px; }
.blog-lead__tags span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--steel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 11px;
}
.blog-lead__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}
.blog-lead__go svg { transition: transform .22s ease; }
.blog-lead:hover .blog-lead__go { color: var(--accent); }
.blog-lead:hover .blog-lead__go svg { transform: translateX(4px); }

/* ------------------------------------------------------- everything else -- */

.blog-list { list-style: none; margin: 0; padding: 0; }
.blog-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto auto 16px;
  align-items: baseline;
  gap: 18px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  transition: padding-left .2s ease, border-color .2s ease;
}
.blog-row:hover { padding-left: 12px; border-color: var(--line); }
.blog-row__when,
.blog-row__read {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--steel-2);
}
.blog-row__title {
  font-size: 16.5px;
  line-height: 1.45;
  color: var(--navy);
  transition: color .2s ease;
}
.blog-row:hover .blog-row__title { color: var(--accent); }
.blog-row__arrow {
  align-self: center;
  color: var(--steel-2);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .2s ease, transform .2s ease, color .2s ease;
}
.blog-row:hover .blog-row__arrow { opacity: 1; transform: none; color: var(--accent); }

@media (max-width: 700px) {
  .blog-lead { grid-template-columns: 1fr; gap: 20px; }
  .blog-lead__rail {
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
    padding: 0 0 16px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .blog-lead__day { font-size: 30px; }
  .blog-lead__mon { margin-top: 0; }
  .blog-lead__go { margin-left: 0; }
  .blog-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 4px; }
  .blog-row__arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .blog-lead, .blog-lead::before, .blog-lead__go svg, .blog-row, .blog-row__arrow { transition: none; }
}