/* site.css: April's layer on top of the Ober template (main.css). Loaded last on every page.
   Holds the colour tokens, the Lato type scale, the single-column home layout modelled on
   jonbarron.info / pariszhang11.github.io, the publication rows, and the Domain Focus figures.
   Fonts are picked in main.css (:root): Lato for text, Sorts Mill Goudy for titles. */

/* ---------- tokens (dark skin is the template default; .light-skin overrides) ---------- */
body {
  --ink: #ffffff;
  --muted: #bdc1c7;
  --faint: #91959b;
  --line: rgba(255, 255, 255, 0.18);
  --line-soft: rgba(255, 255, 255, 0.10);
  --accent: #ff8059;
}
body.light-skin {
  --ink: #1c2528;
  --muted: #3c4649;
  --faint: #6d7680;
  --line: rgba(28, 37, 40, 0.18);
  --line-soft: rgba(28, 37, 40, 0.10);
}

/* ---------- base type: Lato reads best at regular weight, 16-17px ---------- */
html, body { font-weight: 400; }
h1, h2, h3, h4, h5 { font-weight: 400; }
.section p, .m-archive p { font-size: 16.5px; line-height: 1.65; }

/* ---------- home page: one centred column, one rhythm ---------- */
body.home { font-size: 16.5px; line-height: 1.6; }
body.home .home-col { max-width: 860px; margin: 0 auto; padding: 0 28px; }
body.home .section:not(.section-started) { padding: 44px 0; }
body.home .row.row-custom .col-xs-12 { padding: 12px 24px; }
body.home .section p { margin: 0 0 12px; }
body.home .m-titles { margin: 0 0 20px; }
body.home .m-titles .m-title {
  margin: 0;
  font-size: 40px;
  line-height: 1.1;
  font-weight: 400;
  color: var(--ink);
}
body.home a.btn, body.home .btn { font-size: 15px; }

/* hero: bio left, round portrait right (the reference sites' opening block) */
body.home .section.section-started { padding: 0; }
body.home .hero-started { padding-top: 132px; }
body.home .hero-started:before { display: none; }
body.home .hero-started .content { min-height: 0; padding-bottom: 20px; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 52px;
  align-items: center;
}
.hero-name {
  margin: 0 0 18px;
  font-size: 54px;
  line-height: 1.05;
  font-weight: 400;
  color: var(--ink);
  text-align: center;
}
body.home .hero-text p { margin: 0 0 14px; font-size: 17px; line-height: 1.65; color: var(--muted); }
body.home .hero-text p.hero-links { margin: 20px 0 0; text-align: center; font-size: 16px; color: var(--faint); }
.hero-links a { color: var(--accent); font-weight: 700; }
.hero-photo { justify-self: end; }
.profile-circle {
  display: block;
  width: 230px;
  height: 230px;
  object-fit: cover;
  object-position: center 27%;
  border-radius: 50%;
}

/* domain focus: kicker, title, figure, one paragraph */
.focus-list { border-top: 1px solid var(--line); }
.focus { padding: 26px 0 28px; border-bottom: 1px solid var(--line-soft); }
.focus-kicker {
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.focus-title { margin: 0 0 10px; font-size: 26px; line-height: 1.25; font-weight: 400; color: var(--ink); }
body.home .focus p { margin: 0; color: var(--muted); }
.cw-viz { margin: 14px 0 16px; max-width: 700px; }
.focus-more { padding-top: 26px; }

/* publications: thumbnail | title, authors, venue, links, one-line summary */
.pub-list { border-top: 1px solid var(--line); }
.pub {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 30px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--line-soft);
}
.pub-thumb { display: block; }
.pub-thumb img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--line-soft);
  background: #fff;
}
.pub-title {
  display: inline-block;
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 400;
  color: var(--ink);
}
.pub-thumb.is-sticker img { width: 56%; margin: 0 auto; background: none; border: 0; border-radius: 0; }
a.pub-title:link, a.pub-title:visited { color: var(--ink); }
a.pub-title:hover { color: var(--accent); text-decoration: none; }
body.home .pub-body p { margin: 0; font-size: 15.5px; line-height: 1.55; }
.pub-authors { color: var(--ink); }
.pub-venue { color: var(--muted); }
body.home .pub-body p.pub-links { margin-top: 2px; color: var(--faint); }
.pub-links a { color: var(--accent); font-weight: 700; }
body.home .pub-body p.pub-blurb { margin-top: 10px; color: var(--muted); }
body.home .pub-body p.pub-note { margin-top: 6px; font-size: 13.5px; color: var(--faint); }

/* cite toggle + BibTeX panel, and the Scholar pill */
body.home .pub-links .sep { padding: 0 2px; color: var(--faint); }
body.home .pub-links .cite-btn, body.home .pub-cite .cite-copy { all: unset; cursor: pointer; font-family: var(--font-sans); }
body.home .pub-links .cite-btn::before, body.home .pub-cite .cite-copy::before { content: none; }
body.home .pub-links .cite-btn { font-size: inherit; font-weight: 700; color: var(--accent); }
body.home .pub-links .cite-btn:hover { text-decoration: underline; }
.pub-cite { position: relative; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 6px; background: rgba(28, 37, 40, 0.035); }
body:not(.light-skin) .pub-cite { background: rgba(255, 255, 255, 0.05); }
.pub-cite pre { margin: 0; padding-right: 110px; font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); white-space: pre-wrap; word-break: break-word; }
body.home .pub-cite .cite-copy { position: absolute; top: 10px; right: 10px; padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--ink); background: transparent; }
body.home .pub-cite .cite-copy:hover { border-color: var(--accent); color: var(--accent); }
body.home p.pub-more { margin: 24px 0 0; }
.pill { display: inline-block; padding: 8px 16px; border: 1px solid var(--accent); border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--accent); text-decoration: none !important; transition: background 0.2s, color 0.2s; }
.pill:hover { background: var(--accent); color: #fff; }

/* experience: two even columns instead of the template's 260px floats */
.exp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 56px; }
body.home .history-left, body.home .history-right { float: none; width: auto; margin: 0; }
body.home .p-title {
  margin: 0 0 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
body.home .history-item { margin-top: 18px; }
body.home .p-title + .history-item { margin-top: 0; }
body.home .history-item .name { font-size: 16.5px; font-weight: 700; line-height: 1.35; color: var(--ink); }
body.home .history-item .date, body.home .history-item .subname { font-size: 14.5px; color: var(--faint); }
body.home .history-item .text { margin: 4px 0 0; color: var(--muted); }
body.home .history-item .text p { margin: 0; font-size: 15px; line-height: 1.5; }
.exp-cta { margin-top: 32px; }

/* photography keeps the template's full-width gallery band (markup unchanged from the original) */
body.home .m-archive .text h6 { font-size: 17px; line-height: 1.6; }

/* ---------- small screens ---------- */
@media screen and (max-width: 767px) {
  body.home .home-col { padding: 0 20px; }
  body.home .section:not(.section-started) { padding: 34px 0; }
  body.home .hero-started { padding-top: 104px; }
  .hero-grid { grid-template-columns: 1fr; gap: 22px; }
  .hero-photo { order: -1; justify-self: center; }
  .profile-circle { width: 168px; height: 168px; }
  .hero-name { font-size: 42px; }
  body.home .m-titles .m-title { font-size: 34px; }
  .focus-title { font-size: 23px; }
  .pub-title { font-size: 21px; }
  .pub { grid-template-columns: 1fr; gap: 14px; padding: 22px 0; }
  .pub-thumb { max-width: 320px; }
  .exp-grid { grid-template-columns: 1fr; gap: 30px; }
  .cw-viz { margin: 8px 0 10px; }
  body.home a.btn, body.home .btn { height: auto; line-height: 1.35; padding: 14px 22px; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Domain Focus animated figures (inline SVG in index.html) ---------- */
.cw-viz {
  --vz-ink: #8d939c; --vz-txt: #7d838c; --vz-fill: rgba(255,255,255,0.05);
  --vz-cell: rgba(255,255,255,0.10); --vz-bg: #181e27;
}
body.light-skin .cw-viz {
  --vz-ink: #6d7680; --vz-txt: #6f6679; --vz-fill: rgba(28,37,40,0.04);
  --vz-cell: rgba(28,37,40,0.09); --vz-bg: #f7f5f2;
}
.cw-viz svg { width: 100%; height: auto; display: block; overflow: visible; }
.cw-viz text { font-family: var(--font-sans); text-anchor: middle; dominant-baseline: central; }
.cw-viz .vz-label { font-size: 13px; font-weight: 700; fill: var(--vz-ink); }
.cw-viz .vz-label-sm { font-size: 11px; font-weight: 700; fill: var(--vz-ink); }
.cw-viz .vz-tiny { font-size: 9.5px; fill: var(--vz-txt); }
.cw-viz .vz-cap { font-size: 10.5px; fill: var(--vz-txt); }
.cw-viz .vz-box { fill: var(--vz-fill); stroke: var(--vz-ink); stroke-width: 1.6; }
.cw-viz .vz-box-ghost { fill: none; stroke: var(--vz-ink); stroke-width: 1.2; opacity: 0.35; }
.cw-viz .vz-box.vz-teal { stroke: #3aafc9; }
.cw-viz .vz-box.vz-blue { stroke: #3aafc9; fill: rgba(58,175,201,0.10); }
.cw-viz .vz-line { fill: var(--vz-cell); }
.cw-viz .vz-line-coral { fill: rgba(255,128,89,0.65); }
.cw-viz .vz-ink { stroke: var(--vz-ink); stroke-width: 1.8; }
.cw-viz .vz-coral-stroke { stroke: #ff8059; stroke-width: 1.8; opacity: 0.85; }
.cw-viz .vz-coral-txt { fill: #ff8059; }
.cw-viz .vz-blue-txt { fill: #3aafc9; }
.cw-viz .vz-cell { fill: var(--vz-cell); }
.cw-viz .vz-hit { fill: rgba(255,128,89,0.85); }
.cw-viz .vz-pill, .cw-viz .vz-pill-coral, .cw-viz .vz-pill-blue { fill: var(--vz-bg); stroke-width: 1.6; }
.cw-viz .vz-pill { stroke: var(--vz-ink); }
.cw-viz .vz-pill-coral { stroke: #ff8059; }
.cw-viz .vz-pill-blue { stroke: #3aafc9; }
.cw-viz .vz-ring { stroke: #ff8059; stroke-width: 2; stroke-dasharray: 6 7; opacity: 0.9; }
.cw-viz .vz-ring-soft { stroke: var(--vz-ink); stroke-width: 1.6; stroke-dasharray: 6 7; opacity: 0.55; }
.cw-viz .vz-node { fill: #ff8059; }
.cw-viz .vz-runner { fill: #ff8059; }
.cw-viz .vz-ck { fill: var(--vz-cell); stroke: var(--vz-ink); stroke-width: 1.4; }
.cw-viz .vz-ck-best { fill: rgba(58,175,201,0.85); stroke: #3aafc9; }
@keyframes vzflow { to { stroke-dashoffset: -24; } }
.cw-viz .vz-flow { stroke-dasharray: 5 7; animation: vzflow 1.5s linear infinite; }
@keyframes vzpulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.cw-viz .vz-hit { animation: vzpulse 2.8s ease-in-out infinite; }
.cw-viz .vz-hit-2 { animation-delay: 0.9s; }
.cw-viz .vz-hit-3 { animation-delay: 1.8s; }
@keyframes vzspin { to { transform: rotate(360deg); } }
.cw-viz .vz-spin { animation: vzspin 14s linear infinite; }
@keyframes vzbar { from { transform: scaleX(0.35); } to { transform: scaleX(1); } }
.cw-viz .vz-bar { transform-box: fill-box; transform-origin: left center; animation: vzbar 3.2s ease-in-out infinite alternate; }
.cw-viz .vz-bar-2 { animation-delay: 0.5s; }
.cw-viz .vz-bar-3 { animation-delay: 1.0s; }
.cw-viz .vz-bar-4 { animation-delay: 1.5s; }
@media (prefers-reduced-motion: reduce) {
  .cw-viz .vz-flow, .cw-viz .vz-hit, .cw-viz .vz-spin, .cw-viz .vz-bar { animation: none; }
}