/* =========================================================
   daniellemc.cool — "transit map" theme
   Derived from the thesis cover: deep navy canvas, metro-line
   gradients (green→teal→blue), yellow interchange stations.
   ========================================================= */

:root {
  /* brand — sampled from the cover */
  --bg:      #0a0a14;   /* deep navy-black canvas */
  --bg-2:    #11131f;   /* elevated card */
  --bg-3:    #181a2a;   /* row / hover */
  --ink:     #f1f3ff;   /* primary text */
  --muted:   #9aa1bd;   /* secondary text */
  --faint:   #6f7693;   /* tertiary */
  --blue:    #274a96;   /* coastline cobalt */
  --blue-br: #3a63c4;
  --green:   #74c86a;   /* route green */
  --teal:    #2fa3b4;   /* route teal */
  --yellow:  #fee24f;   /* station dot */
  --coral:   #e8736a;   /* destructive action only (delete) */

  --line:      rgba(241,243,255,0.13);
  --line-soft: rgba(241,243,255,0.07);

  /* type */
  --display: "Poppins", system-ui, sans-serif;
  --serif:   "Newsreader", Georgia, serif;
  --mono:    "Space Mono", ui-monospace, monospace;

  --edge: clamp(20px, 5.5vw, 96px);
  --maxw: 1280px;

  /* transit graphics — one source of truth for the CV/work rails + section station dots */
  --rail-w:    9px;                    /* line thickness */
  --station:   22px;                   /* station-dot diameter */
  --rail-pad:  clamp(26px, 4vw, 44px); /* gutter the rail occupies */
  --rail-edge: 6px;                    /* line offset from the gutter's outer edge */
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--serif);
  background: var(--bg);
  color: var(--ink);
  font-size: clamp(17px, 1.05vw + 12px, 20px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--green); color: #06250a; }

/* ---------- shared bits ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--edge); position: relative; }

.label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--teal);
}

/* the transit-line "mark": gradient underline ending in a yellow station */
.mark { position: relative; white-space: nowrap; }
.mark::after {
  content: ""; position: absolute; z-index: -1;
  left: 0; right: 0.42em; bottom: 0.04em; height: 0.14em;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green), var(--teal));
  transform: scaleX(var(--mk, 1)); transform-origin: left center;
}
.mark::before {
  content: ""; position: absolute;
  right: 0.04em; bottom: -0.03em;
  width: 0.30em; height: 0.30em; border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 0.07em var(--bg);
  transform: scale(var(--mk, 1)); transform-origin: center;
}
.mark.swipe::after, .mark.swipe::before { transform: scaleX(0); }
.mark.swipe::before { transform: scale(0); }
.mark.swipe.lit::after { transform: scaleX(1); transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.mark.swipe.lit::before { transform: scale(1); transition: transform .35s cubic-bezier(.2,.7,.2,1) .55s; }

.lk {
  text-decoration: none;
  background-image: linear-gradient(90deg, var(--green), var(--teal));
  background-size: 100% 2px; background-repeat: no-repeat; background-position: 0 100%;
  transition: opacity .2s ease;
}
.lk:hover { opacity: .8; }

/* ============================================================ NAV */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--edge);
  background: rgba(10,10,20,0.6);
  backdrop-filter: blur(12px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
.nav.stuck { border-color: var(--line); background: rgba(10,10,20,0.82); }
.nav__brand {
  font-family: var(--mono); font-weight: 700; font-size: 14px;
  letter-spacing: 0.02em; text-decoration: none; color: var(--ink);
  display: inline-flex; align-items: center; gap: 10px;
}
.nav__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 0 rgba(254,226,79,0.6);
  animation: pulse 3.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(254,226,79,0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(254,226,79,0); }
  100% { box-shadow: 0 0 0 0 rgba(254,226,79,0); }
}
.nav__links { display: flex; align-items: center; gap: clamp(14px, 2vw, 32px); }
.nav__links a {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em;
  text-decoration: none; color: var(--muted); position: relative;
  transition: color .2s ease;
}
.nav__links a:hover { color: var(--ink); }
.nav__links a.active { color: var(--ink); }
.nav__links a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px;
  background: linear-gradient(90deg, var(--green), var(--teal));
}
.nav__num { color: var(--yellow); }
@media (max-width: 620px) {
  .nav__links a:not(.nav__cta) .lbl { display: none; }
  .nav__cta { display: none; }
}

/* ============================================================ HERO */
.hero { position: relative; padding: clamp(124px, 17vh, 208px) 0 clamp(48px, 8vh, 104px); overflow: hidden; }
.hero__map {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}

/* ============================================================ PAGE BACKDROP
   The coast lives at the <main> level (not inside the hero's clip) so it can
   cross the hero→through-line boundary instead of stopping dead at it. It
   sits behind all content (z-index:-1). */
main { position: relative; z-index: 0; }

.page-coast {
  position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none;
  /* occupies ONLY the empty left gutter outside the 1440px content band, so it
     can never reach the text; collapses to 0 (pure black) below ~1440px wide */
  width: max(0px, (100% - 1440px) / 2);
  height: 1520px; overflow: hidden;
}
.page-coast::before {
  content: ""; position: absolute; right: 0; top: -70px;
  width: 760px; height: 1675px;            /* true 372:820 aspect at 760 wide */
  background: url("assets/coast.svg") right top / 760px auto no-repeat;
  opacity: 0.85;
  /* the coastline tapers to nothing on its own ~68% down — no hard edge to fade */
}
.hero .wrap { z-index: 1; }

.hero__kicker {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  color: var(--muted); margin-bottom: clamp(26px, 4vh, 48px);
}
.hero__kicker .rule { height: 1px; background: var(--line); flex: 1; max-width: 110px; }
.hero__kicker .nm { color: var(--ink); }

.hero h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(36px, 6.4vw, 88px); line-height: 1.02;
  letter-spacing: -0.03em; text-wrap: balance;
}
.hero h1 .line { display: block; }
.hero h1 .dim { color: var(--faint); font-weight: 700; }

.hero__lede {
  max-width: 40ch; margin-top: clamp(28px, 4.5vh, 52px);
  font-size: clamp(19px, 1.3vw + 13px, 25px); line-height: 1.5; color: var(--muted);
}
.hero__lede b { font-weight: 600; color: var(--ink); }

.hero__facts { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: clamp(30px, 5vh, 52px); }
.fact {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.02em; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px;
  display: inline-flex; align-items: center; gap: 9px; background: rgba(17,19,31,0.55);
}
.fact b { color: var(--ink); font-weight: 700; }
.fact .stn { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); flex: none; }

/* the build/break/impute triad (echoes the cover) */
.triad {
  margin-top: clamp(34px, 5vh, 56px);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: clamp(17px, 1.4vw, 22px);
}
.triad .word { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); }
.triad .word .d { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.triad .word:nth-child(1) .d { background: var(--green); }
.triad .word:nth-child(3) .d { background: var(--teal); }
.triad .word:nth-child(5) .d { background: var(--blue-br); }
.triad .sep { color: var(--faint); font-family: var(--mono); font-style: normal; font-weight: 400; }
@media (max-width: 560px) { .triad .sep { display: none; } .triad { gap: 10px 16px; } }

/* ============================================================ PROGRAM (the through-line) */
.program { padding: clamp(72px,12vh,140px) 0; border-top: 1px solid var(--line-soft); }
.program__head { max-width: 60ch; }
.program__claim {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(24px, 3.2vw, 40px); line-height: 1.08; letter-spacing: -0.025em;
  margin-top: 16px; text-wrap: balance;
}
.program__intro { max-width: 64ch; margin-top: clamp(24px,3.5vh,36px); color: var(--muted); font-size: clamp(17px,1vw+12px,20px); line-height: 1.55; }
.program__intro b { color: var(--ink); font-weight: 600; }
.pillars { margin-top: clamp(40px,6vh,64px); display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,1.8vw,24px); }
@media (max-width: 760px) { .pillars { grid-template-columns: 1fr; } }
.pillar { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: clamp(20px,2vw,28px); position: relative; overflow: hidden; }
.pillar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.pillar:nth-child(1)::before { background: var(--green); }
.pillar:nth-child(2)::before { background: var(--teal); }
.pillar:nth-child(3)::before { background: var(--blue-br); }
.pillar__n { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 9px; }
.pillar__n .d { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pillar:nth-child(1) .d { background: var(--green); }
.pillar:nth-child(2) .d { background: var(--teal); }
.pillar:nth-child(3) .d { background: var(--blue-br); }
.pillar h3 { font-family: var(--display); font-weight: 600; font-size: clamp(18px,1.4vw,21px); margin: 16px 0 9px; letter-spacing: -0.01em; line-height: 1.14; }
.pillar p { color: var(--muted); font-size: 15.5px; line-height: 1.5; }

.isnt { margin-top: clamp(34px,5vh,52px); display: flex; flex-wrap: wrap; gap: 10px 11px; align-items: center; }
.isnt .lead { font-family: var(--mono); font-size: 12.5px; color: var(--faint); letter-spacing: 0.04em; margin-right: 4px; }
.isnt .neg { font-family: var(--mono); font-size: 12.5px; color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; }
.isnt .pos { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: #06250a; background: var(--green); border-radius: 999px; padding: 6px 15px; }

/* ============================================================ DONATION WIDGET
   The donor review table (a restyle of the real Port UI). Lives inside the
   Port/D3I timeline dossier's "stage" — see the WORK section below. */
.box {
  width: 21px; height: 21px; flex: none; border-radius: 6px; border: 1.5px solid var(--faint);
  display: grid; place-items: center; transition: background .15s, border-color .15s, transform .1s; cursor: pointer;
  appearance: none; -webkit-appearance: none; background: none; padding: 0; color: inherit; font: inherit;
}
.box svg { width: 12px; height: 12px; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; color: #06250a; }
.box[aria-checked="true"] { background: var(--green); border-color: var(--green); }
.box[aria-checked="true"] svg { opacity: 1; transform: scale(1); }
.box:active { transform: scale(.9); }
.box:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

.donor { background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: clamp(18px,2vw,26px); }
.donor__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.donor__title { font-family: var(--display); font-weight: 700; font-size: clamp(20px,1.6vw,25px); letter-spacing: -0.015em; }
.donor__sub { color: var(--muted); font-size: 15px; margin-top: 3px; }
.donor__search { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; color: var(--ink); font-family: var(--mono); font-size: 13px; min-width: 170px; }
.donor__search:focus { outline: none; border-color: var(--teal); }
.donor__search:focus-visible { border-color: var(--teal); outline: 2px solid var(--teal); outline-offset: 2px; }
.donor__search::placeholder { color: var(--faint); }
.donor__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 20px 0 4px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.donor__cols { display: inline-flex; align-items: center; gap: 10px; }
.donor__cols b { color: var(--ink); }
.tbi { width: 17px; height: 14px; flex: none; border: 1.5px solid var(--teal); border-radius: 2px; background:
  linear-gradient(var(--teal),var(--teal)) 0 4.5px/100% 1.5px no-repeat,
  linear-gradient(var(--teal),var(--teal)) 0 9px/100% 1.5px no-repeat,
  linear-gradient(var(--teal),var(--teal)) 5px 0/1.5px 100% no-repeat; }
.donor__hint { color: var(--faint); }
.dtable { width: 100%; border-collapse: collapse; }
.dtable th { text-align: left; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 11px 8px; border-bottom: 1px solid var(--line); }
.dtable td { padding: 12px 8px; border-bottom: 1px solid var(--line-soft); font-size: 15px; vertical-align: middle; }
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable .c-check { width: 30px; }
.dtable .c-date { width: 168px; white-space: nowrap; color: var(--muted); font-family: var(--mono); font-size: 12.5px; }
.dtable tbody tr { transition: background .12s; }
.dtable tbody tr[data-sel="true"] { background: rgba(254,226,79,0.07); }
.dtable .cmt { color: var(--ink); }
.dtable .empty td { text-align: center; color: var(--faint); font-family: var(--mono); font-size: 13px; padding: 30px 8px; }
.donor__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.donor__del { font-family: var(--mono); font-weight: 700; font-size: 13px; background: none; border: 1px solid var(--line); color: var(--coral); border-radius: 9px; padding: 9px 15px; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; transition: background .15s, border-color .15s, opacity .15s; }
.donor__del[disabled] { opacity: .4; cursor: default; }
.donor__del:not([disabled]):hover { background: rgba(232,115,106,0.12); border-color: var(--coral); }
.donor__del:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.donor__del svg { width: 14px; height: 14px; }
.pager { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.pager button { background: none; border: 1px solid var(--line); color: var(--ink); border-radius: 7px; width: 30px; height: 30px; cursor: pointer; display: grid; place-items: center; transition: border-color .15s, background .15s; }
.pager button:hover:not([disabled]) { border-color: var(--teal); }
.pager button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.pager button[disabled] { opacity: .35; cursor: default; }
.pager__now { padding: 0 8px; color: var(--ink); }

/* ============================================================ SECTION HEADER */
.sec { padding: clamp(72px, 12vh, 148px) 0; }
.sec__head { display: flex; align-items: baseline; gap: 18px; border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: clamp(36px, 5vh, 60px); }
.sec__head .num { font-family: var(--mono); color: var(--yellow); font-size: 14px; font-weight: 700; position: relative; padding-left: 24px; display: inline-flex; align-items: center; }
/* the small section "station" sits centred on the rail (same vars as the big stations) */
.sec__head .num::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: calc(var(--rail-edge) + var(--rail-w)/2 - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px rgba(254,226,79,0.14); }
.sec__head h2 { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 5vw, 60px); letter-spacing: -0.025em; line-height: 1; }
.sec__head .aside { margin-left: auto; font-family: var(--mono); font-size: 12.5px; color: var(--muted); letter-spacing: 0.02em; }
@media (max-width: 620px) { .sec__head .aside { display: none; } }

/* ============================================================ WORK (an expandable transit line) */
.work { position: relative; padding-left: var(--rail-pad); }
.proj { position: relative; border-top: 1px solid var(--line); }
.proj:last-child { border-bottom: 1px solid var(--line); }
.proj::before {
  content: ""; position: absolute; top: 27px;
  left: calc(var(--rail-edge) + var(--rail-w)/2 - var(--station)/2 - var(--rail-pad));
  width: var(--station); height: var(--station); border-radius: 50%; background: var(--yellow);
  box-shadow: 0 0 0 4px var(--bg);
}
/* featured project keeps the same station size — just a soft glow for emphasis */
.proj.feat::before { box-shadow: 0 0 0 4px var(--bg), 0 0 22px 2px rgba(254,226,79,0.45); }

/* the clickable row */
.proj__head {
  width: 100%; background: none; border: 0; color: inherit; cursor: pointer; text-align: left;
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding: clamp(24px, 3.5vh, 40px) 0; font: inherit;
}
.proj__head:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 6px; }
.proj__title { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 3.6vw, 46px); line-height: 0.98; letter-spacing: -0.02em; transition: color .2s ease; }
.proj[data-open="false"] .proj__title { color: var(--muted); }
.proj__role { font-family: var(--mono); font-size: 12.5px; color: var(--muted); letter-spacing: 0.04em; }
.proj.feat .proj__role b { color: #06250a; background: var(--green); padding: 1px 7px; border-radius: 4px; }
.proj__chev { margin-left: auto; align-self: center; color: var(--teal); font-family: var(--mono); font-size: clamp(45px, 5.4vw, 63px); line-height: 1; transition: transform .25s ease, color .2s ease; }
.proj__head:hover .proj__chev { color: var(--ink); }
.proj[data-open="true"] .proj__chev { transform: rotate(90deg); }
.proj__heading { display: flex; flex-direction: column; gap: 10px; }

/* the collapsible panel: grid-rows 0fr→1fr animates dynamic-height content */
.proj__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s cubic-bezier(.2,.7,.2,1); }
.proj[data-open="true"] .proj__panel { grid-template-rows: 1fr; }
.proj__panelinner { overflow: hidden; min-height: 0; }
.proj__panelpad { padding-bottom: clamp(30px, 4vh, 48px); }
@media (prefers-reduced-motion: reduce) { .proj__panel { transition: none; } .proj__chev { transition: none; } }

/* dossier: division A — writeup | rule | stage */
.dossier { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.dossier__what { position: relative; }
.dossier__what--solo { grid-column: 1 / -1; max-width: 64ch; }
.dossier__p--lead { margin-top: 0; }
.dossier__stage { position: relative; padding-left: clamp(20px, 3vw, 44px); border-left: 1px solid var(--line); }
@media (max-width: 760px) { .dossier { grid-template-columns: 1fr; gap: 26px; } .dossier__stage { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 26px; } }

.kick { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--teal); }
.kick--stage { color: var(--green); display: inline-flex; align-items: center; gap: 9px; }
.kick--stage::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.dossier__p { color: var(--muted); font-size: clamp(16px, 1vw + 11px, 19px); line-height: 1.55; margin-top: 18px; max-width: 60ch; }
.dossier__p b { color: var(--ink); font-weight: 600; }
.dossier__cite { margin-top: 22px; padding-left: 16px; border-left: 2px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 62ch; }
.dossier__cite-k { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.dossier__cite em { color: var(--ink); font-style: italic; }

/* numbered transit-ribbon steps */
.flow { margin-top: 26px; }
.flow__label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-bottom: 16px; }
.flow__line { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
.flow__line::before { content: ""; position: absolute; left: 9px; right: 9px; top: 9px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--green), var(--teal), var(--blue-br)); opacity: 0.8; }
.flow__stn { position: relative; padding: 30px 14px 0 0; }
.flow__stn::before { content: ""; position: absolute; top: 0; left: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); border: 2px solid var(--yellow); box-shadow: 0 0 0 4px var(--bg); }
.flow__stn-n { position: absolute; top: 0; left: 0; width: 20px; height: 20px; display: grid; place-items: center; font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--yellow); }
.flow__stn h5 { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; margin-bottom: 5px; }
.flow__stn p { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
@media (max-width: 560px) { .flow__line { grid-template-columns: 1fr; gap: 4px; } .flow__line::before { display: none; } .flow__stn { padding-top: 26px; } }

/* raised stage holding the live widget */
.stage__inner { background: rgba(47,163,180,0.06); border: 1px solid rgba(47,163,180,0.28); border-radius: 16px; padding: clamp(14px, 1.6vw, 20px); margin-top: 12px; }
.stage__inner .donor { background: transparent; border: 0; border-radius: 0; padding: 0; }

/* tags + links */
.proj__desc { font-size: clamp(17px, 1vw + 12px, 20px); line-height: 1.5; max-width: 56ch; color: #d6daf0; }
.proj__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tag { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.03em; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 4px 9px; background: var(--bg-2); }
.proj__links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; }
.proj__links a { font-family: var(--mono); font-size: 13px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; letter-spacing: 0.02em; }
.proj__links a .arr { transition: transform .2s ease; color: var(--yellow); }
.proj__links a:hover .arr { transform: translate(3px,-3px); }
.proj__links a .txt { background-image: linear-gradient(90deg, var(--green), var(--teal)); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .25s ease; }
.proj__links a:hover .txt { background-size: 100% 2px; }

/* ============================================================ CV */
.cv__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); }
@media (max-width: 860px) { .cv__grid { grid-template-columns: 1fr; gap: 48px; } }
.cv__col h3 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--teal); padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.cv__col h3.cv__subhead { margin-top: 44px; }
/* right column: work-style transit rail down the right edge, station dot per header */
.cv__col--rail { position: relative; padding-right: var(--rail-pad); }
.cv__col--rail h3 { text-align: right; position: relative; }
.cv__col--rail h3::after {
  content: ""; position: absolute; top: -2px;
  right: calc(var(--rail-edge) + var(--rail-w)/2 - var(--station)/2 - var(--rail-pad));
  width: var(--station); height: var(--station); border-radius: 50%; background: var(--yellow);
  box-shadow: 0 0 0 4px var(--bg);
}

/* ── shared transit rail (work section + CV right column) ──────────────
   One mechanism for both: a green→teal→blue line that fades in over the top
   300px and out over the bottom 150px (past the last station) via a mask. */
.work::before,
.cv__col--rail::before {
  content: ""; position: absolute; top: -300px; bottom: -150px;
  width: var(--rail-w); border-radius: var(--rail-w);
  background: linear-gradient(var(--green), var(--teal) 55%, var(--blue-br));
  -webkit-mask-image: linear-gradient(transparent, #000 300px, #000 calc(100% - 150px), transparent);
          mask-image: linear-gradient(transparent, #000 300px, #000 calc(100% - 150px), transparent);
  opacity: 0.75;
}
.work::before        { left:  var(--rail-edge); }
.cv__col--rail::before { right: var(--rail-edge); }
.entry { display: grid; grid-template-columns: 92px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.entry:last-child { border-bottom: 0; }
.entry__date { font-family: var(--mono); font-size: 12.5px; color: var(--muted); padding-top: 4px; letter-spacing: 0.02em; }
.entry__role { font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1.2; letter-spacing: -0.01em; }
.entry__org { color: var(--muted); font-size: 16px; margin-top: 2px; }
.entry__org em { font-style: italic; color: #c4c9e2; }

.thesis { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: clamp(18px,1.8vw,24px); position: relative; overflow: hidden; }
.thesis::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--green),var(--teal),var(--blue-br)); }
.thesis__k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yellow); }
.thesis__t { font-family: var(--display); font-weight: 700; font-size: clamp(18px,1.5vw,22px); line-height: 1.18; letter-spacing: -0.01em; margin: 10px 0 8px; }
.thesis__t em { font-style: italic; }
.thesis__m { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.thesis p { color: var(--muted); font-size: 15px; line-height: 1.5; margin-top: 10px; }

.pub { padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.pub:last-child { border-bottom: 0; }
.pub__title { font-size: 17.5px; line-height: 1.35; color: #d6daf0; }
.pub__title em { color: var(--ink); }
.pub__meta { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 6px; letter-spacing: 0.02em; }

.cv__cta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn {
  font-family: var(--mono); font-weight: 700; font-size: 14px; letter-spacing: 0.02em; text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--yellow); color: #2a2400; padding: 14px 22px; border-radius: 10px; border: 1px solid var(--yellow);
  transition: transform .15s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 26px -8px rgba(254,226,79,0.6); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost .ic { color: var(--yellow); }
.cv__placeholder-note { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
.cv__placeholder-note code { color: var(--teal); }

.placeholder-mark {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--yellow); border: 1px dashed rgba(254,226,79,0.5); border-radius: 4px; padding: 1px 6px; vertical-align: middle; margin-left: 8px;
}

/* ============================================================ CONTACT (terminus) */
.contact { padding: clamp(80px,14vh,160px) 0 clamp(40px,6vh,70px); border-top: 1px solid var(--line); position: relative; overflow: hidden; }
.contact h2 { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -0.02em; margin: 18px 0 clamp(36px,6vh,56px); }
.contact h2 em { font-style: italic; font-weight: 700; }
.links { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
@media (max-width: 760px) { .links { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 460px) { .links { grid-template-columns: 1fr; } }
.links a { text-decoration: none; padding: 22px 4px 22px 16px; display: flex; flex-direction: column; gap: 5px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); transition: padding-left .2s ease, background .2s ease; }
.links a:hover { padding-left: 26px; background: rgba(241,243,255,0.03); }
.links a .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.links a .v { font-family: var(--display); font-weight: 700; font-size: 21px; display: flex; align-items: center; gap: 9px; letter-spacing: -0.01em; }
.links a .v .arr { color: var(--yellow); font-size: 15px; transition: transform .2s ease; }
.links a:hover .v .arr { transform: translate(3px,-3px); }

.foot { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: 0.02em; }
.foot .colophon { max-width: 52ch; line-height: 1.5; }

/* ============================================================ REVEAL
   Opacity is NEVER animated — content is fully opaque at all times. We
   animate only transform (a small slide-up). This makes the reveal
   structurally incapable of hiding content: a frozen/throttled animation
   in this webview just means "no slide", never "invisible". */
.rise { }
.js-anim .rise { transform: translateY(16px); }
.js-anim .rise.in { transform: none; animation: riseIn .7s cubic-bezier(.2,.7,.2,1); }
@keyframes riseIn {
  from { transform: translateY(16px); }
  to   { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js-anim .rise, .js-anim .rise.in { transform: none; animation: none; }
  .mark.swipe::after { transform: scaleX(1); }
  .mark.swipe::before { transform: scale(1); }
}