/* ============================================
   zhao-langxi — research + personal essay
   Deliberately aligned to IU's own institutional
   look (Rivet / Cascade / WCMS conventions), not
   a custom brand palette like the other three
   sites. This site should read as "IU-adjacent,"
   not "matcha brand."
   ============================================ */

:root {
  /* IU Rivet-adjacent neutrals ... crimson used sparingly,
     as IU brand guidelines intend, not as a theme colour */
  --iu-crimson:   #990000;
  --iu-black:     #1a1a1a;
  --iu-gray-900:  #333333;
  --iu-gray-600:  #4c5a69; /* Rivet black-400 · metadata still AA on white */
  --iu-gray-300:  #cfcfcf;
  --iu-gray-100:  #f4f4f4;
  --iu-white:     #ffffff;
  --rule:         var(--iu-gray-300);

  --font-display: Georgia, 'Times New Roman', serif;
  --font-body:    Arial, Helvetica, sans-serif;

  /* fluid type · body stays at 16px floor */
  --step--1: 0.875rem;
  --step-0:  1rem;
  --step-1:  clamp(1.0625rem, 1.02rem + 0.2vw, 1.2rem);
  --step-2:  clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
  --step-3:  clamp(1.55rem, 1.28rem + 1.1vw, 1.95rem);

  /* logical spacing scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
  --space-xl:  clamp(2.5rem, 1.9rem + 2.6vw, 4rem);

  --shell: 38rem;
  --gutter: clamp(16px, 4vw, 24px);
  --nav-h: 3.25rem;

  --radius: 2px;
  --tap: 44px;

  --dur: 150ms;
  --ease: ease;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 0.5rem);
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--iu-white);
  color: var(--iu-gray-900);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6; /* ~25px on 16px · GOV.UK 19/25 habit, institutional 16 */
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--iu-black);
  margin: 0 0 0.5em;
  line-height: 1.2;
  text-wrap: balance;
}

h1 { font-size: var(--step-3); border-bottom: 3px solid var(--iu-crimson); padding-bottom: 10px; }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }

p {
  margin: 0 0 1em;
  color: var(--iu-gray-900);
  max-width: 68ch;
  text-wrap: pretty;
}

a { color: var(--iu-crimson); text-decoration: underline; }
a:hover { color: var(--iu-black); }

.wrap {
  max-width: var(--shell);
  margin-inline: auto;
  padding: var(--space-l) var(--gutter) var(--space-xl);
}

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

.row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}

@media (max-width: 600px) {
  .row { grid-template-columns: 1fr; gap: 2px; }
}

.disclaimer {
  background: var(--iu-gray-100);
  border-left: 3px solid var(--iu-gray-600);
  padding: 16px 18px;
  font-size: var(--step--1);
  color: var(--iu-gray-600);
  margin: 24px 0;
}

/* ---------- skip link + top nav ---------- */

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  background: var(--iu-crimson);
  color: #fff;
  padding: 10px 16px;
  z-index: 100;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  text-decoration: underline;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 12px;
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 90;
  border-bottom: 1px solid var(--rule);
  padding: 8px 24px;
  background: #f8f9fa; /* Rivet black-000 · reads as a bar on white */
  background-color: #f8f9fa;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 1;
}

.site-nav .nav-credential {
  flex: 1 1 100%;
  order: -1;
  font-size: var(--step--1);
  color: var(--iu-gray-600);
  margin: 0;
}

.site-nav .wrap {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0;
  padding: 0;
}

.site-nav a {
  text-decoration: none;
  color: var(--iu-gray-900);
  font-size: var(--step--1);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

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

.site-nav .identity-marks {
  font-size: var(--step--1);
  color: var(--iu-gray-600);
  display: flex;
  gap: 14px;
}

/* ---------- footer: matches the real content structure ----------
   Essays column · Elsewhere column · "this room" tagline ·
   cross-site switcher row · independent-notes disclaimer ·
   name sign-off. Not a generic three-column dump — this is the
   actual footer content, styled. */

footer {
  margin-top: 72px;
  border-top: 4px solid var(--iu-crimson);
  background: var(--iu-gray-100);
  padding: 40px 24px 32px;
}

footer .footer-inner { max-width: 38rem; margin: 0 auto; }

footer .footer-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-bottom: 28px;
}

@media (max-width: 560px) {
  footer .footer-columns { grid-template-columns: 1fr; gap: 20px; }
}

footer h4 {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--iu-gray-600);
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-weight: 700;
}

footer ul { list-style: none; margin: 0; padding: 0; }
footer li { margin-bottom: 6px; }

footer a {
  font-size: var(--step--1);
  color: var(--iu-gray-900);
  text-decoration: none;
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
}

footer a:hover { color: var(--iu-crimson); text-decoration: underline; }

/* "This room · Essays · research · BTS · 赵郎溪 · zhao-langxi" —
   the tagline that names which of the four sites this is */
footer .footer-tagline {
  font-size: var(--step--1);
  color: var(--iu-gray-600);
  border-top: 1px solid var(--iu-gray-300);
  padding-top: 16px;
  margin-bottom: 14px;
}

/* the four-site switcher row: IU Pages · jadexzhao · matchaxmoxie · zhao-langxi */
footer .site-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 16px;
}

footer .site-switcher a { font-weight: 600; }

footer .site-switcher .current {
  color: var(--iu-crimson);
  pointer-events: none;
}

/* "Independent notes ... not IU-endorsed research and not
   peer-reviewed publications." — the disclaimer line, kept
   quiet but legible, not buried */
footer .footer-legal {
  font-size: 0.875rem;
  color: var(--iu-gray-600);
  font-style: italic;
  margin-bottom: 14px;
}

footer .footer-legal p { margin: 0; max-width: none; color: inherit; }

/* "赵郎溪 · Jade Zhao" sign-off */
footer .footer-signoff {
  font-size: var(--step--1);
  color: var(--iu-black);
  font-weight: 600;
}

/* ── door easter eggs ─────────────────────────────────────── */

.egg-fishing {
  cursor: default;
}

.door-egg-toast {
  position: fixed;
  inset-inline: 1rem;
  inset-block-end: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  z-index: 9999;
  margin: 0;
  padding: 0.65rem 1rem;
  max-width: 28rem;
  font-size: var(--step--1);
  color: var(--iu-black);
  background: #fff;
  border: 1px solid var(--iu-crimson);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.1);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.door-egg-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.door-egg-toast a {
  color: var(--iu-crimson);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .door-egg-toast {
    transform: none;
    transition: none;
  }
}

/* ---------- accessibility floor ---------- */

a:focus-visible,
.cta:focus-visible,
.site-nav a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--iu-crimson);
  outline-offset: 3px;
}

:focus:not(:focus-visible) {
  outline: none;
}

#main,
#main-content {
  scroll-margin-top: 4.25rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

.site-nav .identity-marks a {
  color: var(--iu-gray-600);
  text-decoration: none;
}
.site-nav .identity-marks a:hover { color: var(--iu-crimson); }

/* ---------- site helpers (Rivet tokens only; no custom brand palette) ---------- */

.sc {
  font-family: "Noto Serif SC", "Songti SC", "SimSun", Georgia, serif;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

figure {
  margin: 1.25rem 0 2rem;
}

figure img {
  width: 100%;
  max-width: 360px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

/* Full photographs: keep native aspect ratio. Do not force a square crop. */
figure.figure-photo img {
  max-width: min(100%, 32rem);
  height: auto;
  object-fit: contain;
}

.bio-quote {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--iu-black);
  border-left: 3px solid var(--iu-crimson);
  padding: 0.75rem 1rem;
  background: var(--iu-gray-100);
  max-width: 68ch;
  margin: 0 0 1.25em;
}

.photo-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 12px;
  margin: 1.5rem 0 0;
}

.photo-row figure {
  margin: 0;
}

.photo-row img {
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.photo-row figcaption,
figure.figure-photo figcaption {
  font-size: var(--step--1);
  color: var(--iu-gray-600);
  margin-top: 0.4rem;
  max-width: 68ch;
}

.lede { font-size: var(--step-1); color: var(--iu-gray-900); max-width: 62ch; }
.byline { font-size: var(--step--1); color: var(--iu-gray-600); margin-bottom: 1.75em; }
.eyebrow { font-size: var(--step--1); color: var(--iu-gray-600); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 0.75em; }

.section { margin: 2.5rem 0; }

.section-read { margin-top: 2rem; }

.read-list {
  margin: 0;
  padding-left: 1.25rem;
  max-width: 68ch;
}

.read-list li {
  margin-bottom: 0.65em;
  color: var(--iu-gray-900);
}

.read-list a {
  font-weight: 600;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.25rem 0 0; }
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--iu-crimson);
  background: var(--iu-crimson);
  color: var(--iu-white);
  text-decoration: none;
  border-radius: var(--radius);
  font-size: var(--step--1);
}
.cta:hover,
.cta:focus-visible { background: var(--iu-black); border-color: var(--iu-black); color: var(--iu-white); }
.cta.secondary {
  background: var(--iu-white);
  background-color: #ffffff;
  color: var(--iu-crimson);
}
.cta.secondary:hover,
.cta.secondary:focus-visible { background: var(--iu-gray-100); color: var(--iu-black); border-color: var(--iu-black); }

.look-table-wrap { overflow-x: auto; margin: 1rem 0; }
.look-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}
.look-table th,
.look-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.look-table th {
  color: var(--iu-gray-600);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hero { margin-bottom: 2rem; }

body.page-home main.wrap {
  max-width: 54rem;
}

@media (min-width: 720px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(240px, 0.92fr) minmax(18rem, 1.15fr);
    gap: 28px;
    align-items: start;
  }

  .hero-visual { margin: 0; }
}

.hero-visual { margin: 0 0 1.25rem; }
.hero-visual img {
  width: 100%;
  max-width: 100%;
  max-height: min(78vh, 44rem);
  height: auto;
  object-fit: contain;
  object-position: center top;
  border: 1px solid var(--rule);
}
.hero-brand-line { font-size: var(--step--1); color: var(--iu-gray-600); margin: 0 0 0.5em; }
.hero-for { color: var(--iu-gray-600); margin: 0 0 0.75em; }
.hero-h1 { /* inherits h1 crimson rule */ }
.claim { max-width: 68ch; }
.plain-links { max-width: none; }
.note-meta { font-size: var(--step--1); color: var(--iu-gray-600); }

article.chapter + article.chapter,
section.chapter + section.chapter {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

/* HARD RULE: solid white nav · never glass · never text over the bar */
.site-nav,
.site-nav .wrap {
  background: #f8f9fa;
  background-color: #f8f9fa;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 1;
}

@media (max-width: 600px) {
  .site-nav { padding: 4px 16px; }
  .wrap { padding: 24px 16px 56px; }
  .cta-row { flex-direction: column; }
  .cta { width: 100%; }
}