/* ============================================================
   Fei Gao — personal site
   Palette: blush pink ground, bronze headings, slate ink,
   dusty-rose buttons (matched to the Blush Bronze promo image)
   Type: Fraunces (display serif) + Schibsted Grotesk (body)
   ============================================================ */

:root {
  --ground: #f1e4e4;
  --ground-raised: #f8f2f0;
  --ground-strong: #e6d1cf;
  --ink: #3f4847;
  --ink-muted: #7b6a66;
  --bronze: #a0735a;
  --bronze-deep: #8a5f4b;
  --rose: #c9a29c;
  --rose-deep: #ae827b;
  --sand: #c4ad9b;
  --line: rgba(138, 95, 75, 0.16);
  --shadow: rgba(138, 95, 75, 0.14);
  --maxw: 68rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: linear-gradient(180deg, #f3e7e7 0%, #eedddc 100%);
  color: var(--ink);
  font-family: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
}

h1, h2, h3 {
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

h1, h2 { color: var(--bronze); }

p { margin: 0; }

a { color: var(--bronze-deep); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; border-radius: 2px; }

.eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 0.9rem;
}

/* ---------- Navigation ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: rgba(243, 231, 231, 0.8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.wordmark {
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  color: var(--ink);
}
.wordmark:hover { text-decoration: none; color: var(--bronze); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  font-size: 0.92rem;
  font-weight: 500;
}
.nav-links a { color: var(--ink-muted); }
.nav-links a:hover { color: var(--ink); text-decoration: none; }

.nav-cta {
  color: var(--bronze-deep) !important;
  border: 1px solid rgba(160, 115, 90, 0.6);
  border-radius: 999px;
  padding: 0.35rem 1rem;
}
.nav-cta:hover { background: var(--rose); border-color: var(--rose); color: #fff9f7 !important; }

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

.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 5.5rem 1.5rem 0;
  background:
    radial-gradient(ellipse 55rem 30rem at 70% -5rem,
      rgba(160, 115, 90, 0.14), transparent 65%);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 3rem;
  align-items: center;
}

.hero h1 {
  font-size: clamp(3rem, 8vw, 4.75rem);
  margin-bottom: 1.25rem;
}

.lede {
  color: var(--ink-muted);
  font-size: 1.15rem;
  max-width: 34rem;
  margin-bottom: 2rem;
}
.lede p { margin: 0 0 1rem; }
.lede p:last-child { margin-bottom: 0; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.btn {
  display: inline-block;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  transition: transform 120ms ease, background 120ms ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

.btn-rose {
  background: var(--rose);
  color: #fff9f7;
  box-shadow: 0 10px 24px rgba(174, 130, 123, 0.25);
}
.btn-rose:hover { background: var(--rose-deep); color: #fff9f7; }

.btn-ghost {
  color: var(--ink);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.08);
}
.btn-ghost:hover { border-color: var(--bronze-deep); color: var(--bronze-deep); }

.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 1rem;
  background:
    linear-gradient(160deg, var(--ground-strong) 0%, #ecdccc 100%);
  border: 1px solid var(--line);
  box-shadow: 0 20px 40px var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.portrait picture { display: block; width: 100%; height: 100%; }

/* The headshot has a cool grey studio backdrop. A light warm grade settles it
   into the blush palette without recoloring the face. Turn --portrait-warmth
   down toward 0 for the untouched photo, or up for a stronger match. */
.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(var(--portrait-warmth, 0.24)) saturate(1.08);
}

.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, rgba(201, 162, 156, 0.5), rgba(160, 115, 90, 0.25));
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.portrait-initials {
  font-family: Fraunces, Georgia, serif;
  font-size: 4.5rem;
  color: rgba(160, 115, 90, 0.45);
  letter-spacing: 0.08em;
}

.cred-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  overflow: hidden;
  margin-top: 4rem;
  box-shadow: 0 16px 30px rgba(138, 95, 75, 0.08);
}
.cred {
  background: rgba(248, 242, 240, 0.75);
  padding: 1.1rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.cred-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.cred-value { font-weight: 500; }

/* ---------- Sections ---------- */

.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 5.5rem 1.5rem 0;
}

.section-head { margin-bottom: 2.5rem; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); }

/* About */

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 3rem;
  align-items: start;
}

.about-pull {
  font-family: Fraunces, Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--bronze);
  border-left: 2px solid var(--bronze-deep);
  padding-left: 1.4rem;
}

.about-body {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  color: var(--ink-muted);
}

/* Research topics */

.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
}

.topic-card {
  background: var(--ground-raised);
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: border-color 150ms ease, transform 150ms ease;
  box-shadow: 0 10px 25px rgba(138, 95, 75, 0.05);
}
.topic-card:hover { border-color: var(--bronze-deep); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
  .topic-card:hover, .btn:hover { transform: none; }
}

.topic-num {
  font-family: Fraunces, Georgia, serif;
  font-size: 1rem;
  color: var(--bronze);
  letter-spacing: 0.1em;
}
.topic-card h3 { font-size: 1.2rem; }
.topic-card p { color: var(--ink-muted); font-size: 0.95rem; }

.research-summary-copy {
  color: var(--ink-muted);
  max-width: 44rem;
  margin-bottom: 1.5rem;
}
/* The intro under the research page's title gets breathing room. */
.section-head .research-summary-copy { margin-top: 1.3rem; }

/* Publications */

.pub-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.pub {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 1.5rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--line);
}
.pub:last-child { border-bottom: 1px solid var(--line); }

.pub-year {
  font-family: Fraunces, Georgia, serif;
  color: var(--bronze);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.pub-title { font-weight: 700; margin-bottom: 0.25rem; }
.pub-venue { color: var(--ink-muted); font-size: 0.92rem; }

.pub-more { margin-top: 1.5rem; color: var(--ink-muted); font-size: 0.95rem; }

/* Contact */

.contact-band {
  background:
    radial-gradient(ellipse 30rem 18rem at 85% 110%,
      rgba(201, 162, 156, 0.28), transparent 70%),
    var(--ground-raised);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  box-shadow: 0 18px 35px rgba(138, 95, 75, 0.07);
}
.contact-band h2 { font-size: 2rem; margin-bottom: 0.6rem; }
.contact-copy { color: var(--ink-muted); max-width: 28rem; }

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

.footer {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 3.5rem 1.5rem 2.5rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--ink-muted);
  font-size: 0.85rem;
}
.footer-note {
  flex-basis: 100%;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--ink-muted);
  opacity: 0.85;
}

/* ---------- Blog ---------- */

/* Full-width tinted band holding the post header: one step deeper than the
   page ground, with the bronze glow from the homepage hero inside it. The
   inner column matches the article column so the title aligns with the text. */
.post-band {
  background:
    radial-gradient(ellipse 40rem 20rem at 72% 115%,
      rgba(160, 115, 90, 0.18), transparent 65%),
    linear-gradient(180deg, #eedddc 0%, var(--ground-strong) 100%);
  border-bottom: 1px solid var(--line);
}

.post-band-inner {
  max-width: 46rem;
  margin: 0 auto;
  padding: 4.5rem 1.5rem 2.8rem;
}

.post-band h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); margin-bottom: 1.1rem; }

.post {
  max-width: 46rem;
  padding-top: 3.25rem;
}

.post-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.tag-chip {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bronze-deep);
  background: rgba(201, 162, 156, 0.18);
  border: 1px solid rgba(160, 115, 90, 0.3);
  border-radius: 999px;
  padding: 0.1rem 0.7rem;
}
a.tag-chip:hover { background: var(--rose); border-color: var(--rose); color: #fff9f7; text-decoration: none; }

.tag-count { color: var(--ink-muted); font-size: 0.95rem; margin-top: 0.6rem; }

.post-content {
  color: var(--ink);
  font-size: 1.125rem;
  line-height: 1.75;
}
.post-content a { overflow-wrap: break-word; }
.post-content p, .post-content ul, .post-content ol { margin: 0 0 1.2rem; }
.post-content h2 { font-size: 1.55rem; margin: 2.6rem 0 0.9rem; }
.post-content h2::before {
  content: "";
  display: block;
  width: 1.75rem;
  height: 2px;
  background: var(--rose);
  margin-bottom: 0.8rem;
}
/* A post that opens on a heading already has the band's edge above it. */
.post-content > h2:first-child { margin-top: 0; }
.post-content > h2:first-child::before { display: none; }
.post-content h3 { font-size: 1.2rem; margin: 1.8rem 0 0.7rem; }

/* Drop cap on the opening paragraph, Fraunces to match the title. The second
   selector catches posts that open on a section heading. */
.post-content > p:first-child::first-letter,
.post-content > h2:first-child + p::first-letter {
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
  font-size: 3.4em;
  line-height: 0.82;
  float: left;
  padding: 0.06em 0.12em 0 0;
  color: var(--bronze);
}
.post-content img { max-width: 100%; border-radius: 0.75rem; }
.post-content blockquote {
  margin: 0 0 1.15rem;
  padding: 0.2rem 0 0.2rem 1.3rem;
  border-left: 2px solid var(--bronze);
  color: var(--ink-muted);
  font-family: Fraunces, Georgia, serif;
  font-size: 1.1rem;
}
.post-content code {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--line);
  border-radius: 0.3rem;
  padding: 0.05rem 0.35rem;
  font-size: 0.9em;
}
.post-content pre {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: 1rem 1.2rem;
  overflow-x: auto;
}
.post-content pre code { background: none; border: none; padding: 0; }

/* Footnotes, written as [^1] in the Markdown and collected at the end. */
.post-content sup a.footnote {
  color: var(--bronze);
  font-weight: 500;
  text-decoration: none;
  padding: 0 0.1rem;
}
.post-content sup a.footnote:hover { text-decoration: underline; }
.post-content .footnotes {
  margin-top: 2.6rem;
  color: var(--ink-muted);
  font-size: 0.92rem;
}
.post-content .footnotes hr { display: none; }
.post-content .footnotes::before {
  content: "Notes";
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze);
  border-top: 1px solid var(--line);
  padding-top: 1.3rem;
  margin-bottom: 1rem;
}
.post-content .footnotes ol { padding-left: 1.2rem; }
.post-content .footnotes li { margin-bottom: 0.6rem; }
.post-content .footnotes p { margin-bottom: 0; }
.post-content a.reversefootnote { text-decoration: none; margin-left: 0.3rem; }

/* APA reference list: hanging indents, quieter type. kramdown gives the
   "## References" heading id="references" automatically. */
.post-content h2#references ~ p {
  font-size: 0.92rem;
  color: var(--ink-muted);
  padding-left: 1.6rem;
  text-indent: -1.6rem;
  margin-bottom: 0.9rem;
}

/* ----- End of post ----- */

.post-end {
  font-family: Fraunces, Georgia, serif;
  font-size: 1.2rem;
  color: var(--bronze);
  text-align: center;
  letter-spacing: 0.4em;
  margin: 3rem 0 0;
}

.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 2.8rem;
}

.post-nav-card {
  background: var(--ground-raised);
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: border-color 150ms ease, transform 150ms ease;
  box-shadow: 0 10px 25px rgba(138, 95, 75, 0.05);
}
.post-nav-card:hover {
  border-color: var(--bronze-deep);
  transform: translateY(-3px);
  text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
  .post-nav-card:hover { transform: none; }
}

.post-nav-card-next { align-items: flex-end; text-align: right; }

.post-nav-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze);
}
.post-nav-title {
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
}
.post-nav-card:hover .post-nav-title { color: var(--bronze-deep); }

.post-back {
  margin-top: 2.2rem;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
}

/* ---------- Key readings ---------- */

.readings-note {
  margin-top: 1rem;
  font-size: 0.88rem;
  font-style: italic;
  color: var(--ink-muted);
}

.readings-hero { padding-top: 4.5rem; }

/* ----- Category navigation: sticky chip bar ----- */

.readings-nav {
  position: sticky;
  top: 3.6rem;               /* sits just under the site nav */
  z-index: 5;
  background: rgba(243, 231, 231, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  margin-top: 2.5rem;
}
.readings-nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.7rem 1.5rem;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.readings-nav-inner::-webkit-scrollbar { display: none; }

.readings-chip {
  flex: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bronze-deep);
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem 1rem;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
a.readings-chip:hover {
  background: var(--rose);
  border-color: var(--rose);
  color: #fff9f7;
  text-decoration: none;
}
.readings-chip.is-active {
  background: var(--bronze);
  border-color: var(--bronze);
  color: #fff9f7;
}
.readings-chip-soon {
  color: var(--ink-muted);
  opacity: 0.65;
  cursor: default;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.soon-tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rose-deep);
  background: rgba(201, 162, 156, 0.22);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}

/* ----- Domain sections ----- */

.readings-domain {
  padding-top: 4.5rem;
  scroll-margin-top: 7.5rem;  /* anchors land below the two sticky bars */
}

.readings-domain-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.6rem;
  border-top: 2px solid var(--bronze);
  margin-bottom: 1.2rem;
}
.readings-domain-head h2 { font-size: clamp(1.9rem, 4vw, 2.5rem); }

.readings-count {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bronze);
  background: rgba(160, 115, 90, 0.1);
  border: 1px solid rgba(160, 115, 90, 0.25);
  border-radius: 999px;
  padding: 0.25rem 0.85rem;
}

.readings-domain-intro {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  color: var(--ink-muted);
  max-width: 44rem;
  margin-bottom: 2.5rem;
}
.readings-domain-intro p:first-child {
  font-family: Fraunces, Georgia, serif;
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--bronze-deep);
}

/* ----- Groups and papers ----- */

.readings-group { margin-bottom: 2.75rem; }

.readings-group-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: "Schibsted Grotesk", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 1.1rem;
}
.readings-group-head::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--rose);
  flex: none;
}

.readings-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.reading {
  max-width: 48rem;
  background: var(--ground-raised);
  border: 1px solid var(--line);
  border-left: 3px solid rgba(201, 162, 156, 0.55);
  border-radius: 0.7rem;
  padding: 1.1rem 1.4rem;
  transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.reading:hover {
  border-left-color: var(--bronze);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(138, 95, 75, 0.09);
}
@media (prefers-reduced-motion: reduce) {
  .reading:hover { transform: none; }
}

.reading-title {
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 0.25rem;
  text-wrap: balance;
}
.reading-title a { color: var(--ink); }
.reading-title a:hover { color: var(--bronze-deep); text-decoration: none; }
.reading:hover .reading-title a { color: var(--bronze-deep); }

.reading-meta { color: var(--ink-muted); font-size: 0.88rem; }
.reading-note { margin-top: 0.55rem; font-size: 0.95rem; color: var(--ink); }

.back-to-top-row { margin-top: 0.5rem; }
.back-to-top {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-muted);
}
.back-to-top:hover { color: var(--bronze-deep); text-decoration: none; }

/* ---------- Newsletter ---------- */

.newsletter {
  background:
    radial-gradient(ellipse 30rem 18rem at 15% 110%,
      rgba(201, 162, 156, 0.28), transparent 70%),
    var(--ground-raised);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  box-shadow: 0 18px 35px rgba(138, 95, 75, 0.07);
}
.newsletter h2 { font-size: 1.7rem; margin-bottom: 0.6rem; }
.newsletter-copy { color: var(--ink-muted); max-width: 26rem; }

.newsletter-form { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.newsletter-form input[type="email"] {
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: #fff9f7;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.7rem 1.3rem;
  min-width: 16rem;
}
.newsletter-form input[type="email"]:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
}
.newsletter-form .btn { border: none; cursor: pointer; font: inherit; font-weight: 700; font-size: 0.95rem; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Small screens ---------- */

@media (max-width: 46rem) {
  .hero-inner { grid-template-columns: 1fr; }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav-card-next { align-items: flex-start; text-align: left; }
  .post-band-inner { padding: 3rem 1.5rem 2.2rem; }
  .post { padding-top: 2.5rem; }
  .portrait { max-width: 18rem; }
  .cred-strip { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 2rem; }
  .nav-links { gap: 1rem; }
  .contact-band { padding: 2rem 1.5rem; }
}