/* ---------------------------------------------------------
   Norman Do — academic site
   Minimal light-academic theme
--------------------------------------------------------- */

:root {
  --ink: #142019;
  --ink-soft: #4a6259;
  --line: #dcece4;
  --paper: #ffffff;
  --panel: #e5f8ef;
  --accent: #059669;
  --accent-soft: #10b981;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: var(--sans);
  --max: 900px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

a:hover {
  border-bottom-color: currentColor;
}

/* ---------- Header / nav ---------- */

header.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.header-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 24px 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 28px;
}

.site-name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.site-name a {
  color: inherit;
  border-bottom: none;
}

nav.site-nav {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: 14.5px;
  letter-spacing: 0.02em;
}

nav.site-nav a {
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

nav.site-nav a:hover,
nav.site-nav a[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ---------- Main / layout ---------- */

main {
  max-width: var(--max);
  margin: 0 auto;
  padding: 56px 24px 56px;
}

main.wide {
  max-width: 900px;
}

/* Constrains prose line length without re-centering, so the block
   still starts flush with the header/nav left edge. */
.prose {
  max-width: 700px;
}

h1 {
  font-size: 34px;
  line-height: 1.25;
  margin: 0 0 6px;
  font-weight: 600;
}

h2.page-kicker {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin: 0 0 10px;
}

.lede {
  color: var(--ink-soft);
  font-size: 19px;
  margin: 0 0 40px;
}

h2 {
  font-size: 22px;
  margin: 48px 0 14px;
  font-weight: 600;
}

h3 {
  font-size: 18px;
  margin: 28px 0 6px;
  font-weight: 600;
}

p { margin: 0 0 18px; }

p.center { text-align: center; }

hr.rule {
  border: none;
  border-top: 1px solid var(--line);
  margin: 44px 0;
}

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

.hero {
  display: flex;
  gap: 40px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.hero-text { flex: 1 1 380px; }

.hero-portrait {
  flex: 0 0 220px;
  max-width: 220px;
}

.hero-portrait img {
  width: 100%;
  height: auto;
  display: block;
}

.btn-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.btn {
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 11px 20px;
  border-radius: 6px;
  border: 1px solid var(--ink);
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
}

.btn:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn.primary:hover {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
  color: #fff;
}

ul.topic-list li {
  margin-bottom: 12px;
}

ul.topic-list li:last-child {
  margin-bottom: 0;
}

/* ---------- Info panel (contact card) ---------- */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 26px 28px;
}

dl.info {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 20px;
}

dl.info dt {
  color: var(--ink-soft);
  font-weight: 500;
}

dl.info dd {
  margin: 0;
}

/* ---------- Publications ---------- */

.pub-year-group {
  margin-bottom: 6px;
}

.pub-year {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin: 40px 0 16px;
}

.pub-year:first-of-type { margin-top: 8px; }

.pub {
  padding: 4px 0;
}

.pub:first-of-type { border-top: none; }

.pub:last-of-type { padding-bottom: 0; }

.pub-title {
  font-size: 18.5px;
  font-weight: 600;
  margin: 0 0 4px;
}

.pub-meta {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 6px;
}

.pub-venue {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 15.5px;
  margin: 0 0 6px;
}

.pub-links {
  font-family: var(--sans);
  font-size: 13.5px;
}

.pub-links a {
  margin-right: 16px;
  color: var(--accent);
}

/* ---------- Writing columns ---------- */

.col-group {
  margin-bottom: 36px;
}

.col-group:last-of-type {
  margin-bottom: 0;
}

ul.col-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 6px 24px;
}

ul.col-list li {
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

ul.col-list li:last-child {
  border-bottom: none;
}

ul.col-list.no-lines {
  column-gap: 56px;
}

ul.col-list.two-col {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(6, auto);
  grid-auto-flow: column;
  column-gap: 24px;
}

ul.col-list.one-col {
  grid-template-columns: 1fr;
}

ul.col-list.one-col li {
  padding: 1px 0;
}

ul.col-list.text-normal li {
  font-size: 18px;
}

ul.col-list.text-normal li .col-date {
  font-size: 13px;
}

ul.col-list li.col-stacked {
  display: block;
}

ul.col-list li.col-stacked .col-row {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
}

ul.col-list li.col-stacked .col-sub {
  display: block;
  color: var(--ink-soft);
  font-size: 14px;
  margin-top: 2px;
}

ul.col-list.collab-list {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(10, auto);
  grid-auto-flow: column;
}

ul.col-list.three-col {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  column-gap: 24px;
}

ul.col-list.no-lines li {
  border-bottom: none;
  justify-content: flex-start;
  gap: 8px;
}

ul.col-list .col-date {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
}

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

footer.site-footer {
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
}

.footer-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 26px 24px 40px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
  body { font-size: 17px; }
  main { padding: 40px 20px 40px; }
  .header-inner { padding: 22px 20px 18px; }
  dl.info { grid-template-columns: 1fr; }
  ul.col-list { grid-template-columns: 1fr; }
  .hero-portrait { flex-basis: 160px; max-width: 160px; margin: 0 auto; }
}

/* ---------- Landing-page alignment ----------
   Elements marked .ghost occupy their normal space but are not drawn,
   so this page reserves exactly the same layout as the home page of the
   main site. .stack lays its children in a single grid cell, letting the
   invisible copy set the height while the real text sits on top of it. */

.ghost { visibility: hidden; }

.stack { display: grid; }
.stack > * { grid-area: 1 / 1; }

/* ---------- Contact block: two columns ----------
   The four items run down the left pair first (Email, Phone), then down
   the right pair (Office, Address). Collapses to a single column on
   narrow screens via the responsive rule above. */

@media (min-width: 641px) {
  dl.info { grid-template-columns: auto auto auto auto; justify-content: start; }

  dl.info dt:nth-of-type(1) { grid-area: 1 / 1; }
  dl.info dd:nth-of-type(1) { grid-area: 1 / 2; }
  dl.info dt:nth-of-type(2) { grid-area: 2 / 1; }
  dl.info dd:nth-of-type(2) { grid-area: 2 / 2; }
  dl.info dt:nth-of-type(3) { grid-area: 1 / 3; }
  dl.info dd:nth-of-type(3) { grid-area: 1 / 4; }
  dl.info dt:nth-of-type(4) { grid-area: 2 / 3; }
  dl.info dd:nth-of-type(4) { grid-area: 2 / 4; }

  dl.info dt:nth-of-type(3),
  dl.info dt:nth-of-type(4) { margin-left: 72px; }
}

@media (min-width: 900px) {
  dl.info dt:nth-of-type(3),
  dl.info dt:nth-of-type(4) { margin-left: 96px; }
}