/* Styles for huchaoran.com: black, white and a few greys, thin lines, lots of air. */
:root {
  /* Grey scale, darkest to lightest */
  --ink: #111111;   /* name, headings, links */
  --text: #3a3a3a;  /* body text and sketches */
  --muted: #858585; /* small labels, captions, footer */
  --line: #9a9a9a;  /* section rules */
  --hair: #e2e2e2;  /* faint dividers */
  --pale: #f3f3f2;  /* section bands and footer */
  --bg: #ffffff;
  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --max: 1040px;
  --text-max: 720px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  font-variant-numeric: lining-nums;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, strong { color: var(--ink); }
strong { font-weight: 600; }

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: #bdbdbd;
  transition: text-decoration-color 0.15s ease;
}
a:hover { text-decoration-color: var(--ink); }

/* Header: the name on the left, the pines sketch at the right end */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--hair);
}
.site-header .inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 32px;
}
.site-title {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.logo-pines {
  display: block;
  width: 100px;
  aspect-ratio: 195 / 80;
  margin-top: -6px;
  background-color: var(--text);
  -webkit-mask: url("../img/ornaments/wildlife-pines.svg") center / contain no-repeat;
  mask: url("../img/ornaments/wildlife-pines.svg") center / contain no-repeat;
}
@media (max-width: 760px) { .logo-pines { width: 80px; } }

/* Home */
.home {
  max-width: var(--max);
  margin: 0 auto;
  padding: 96px 24px;
  min-height: calc(100vh - 150px);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 72px;
  align-items: center;
  align-content: center;
}
.home h1 {
  font-weight: 300;
  font-size: clamp(38px, 5.4vw, 60px);
  line-height: 1.12;
  margin: 0 0 0.2em;
}
.home h1 a {
  text-decoration-color: var(--ink);
  text-underline-offset: 6px;
}
.home .portrait img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 760px) {
  .home { grid-template-columns: 1fr; gap: 40px; padding-top: 40px; padding-bottom: 64px; }
  .home .portrait { order: -1; max-width: 360px; }
}

/* The links row spans both columns, centred, under a thin line */
.social {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin: 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.social a {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
}
.social a:hover { color: var(--ink); }

/* Content pages */
main.page {
  max-width: var(--text-max);
  margin: 0 auto;
  padding: 72px 24px 96px;
}
main.page.wide { max-width: var(--max); }
main.page h1 {
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 300;
  line-height: 1.25;
  margin: 0 0 1.2em;
}
main.page h2 {
  font-size: 28px;
  font-weight: 400;
  margin: 72px 0 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
main.page h2:first-child { margin-top: 0; }
main.page h1 + h2 { margin-top: 48px; }
main.page.wide h2 { font-size: 34px; font-weight: 300; }
main.page ul, main.page ol { padding-left: 1.2em; }
main.page li { margin: 0.4em 0; }
main.page li::marker { color: var(--muted); }
main.page li ul { margin: 0.3em 0; }

/* Section titles (photo categories and Statistician sections) sit on a pale
   full width band with a sketch above them; the content below stays on white */
main.page .section-head {
  text-align: center;
  background: var(--pale);
  box-shadow: 0 0 0 100vmax var(--pale);
  clip-path: inset(0 -100vmax);
  padding: 56px 0 48px;
  margin: 0 0 48px;
}
main.page .section-head:first-of-type { margin-top: -72px; }
main.page * + .section-head { margin-top: 80px; }
main.page.wide .carousel + .section-head { margin-top: 96px; }
main.page .section-head h2 { margin: 0; border-top: none; padding-top: 0; }
main.page .section-head h2::after {
  content: "";
  display: block;
  width: 40px;
  margin: 16px auto 0;
  border-top: 1px solid var(--ink);
}

/* Hand drawn sketches, tinted with the text grey through a mask.
   Bump ?v= on a file's path when it is redrawn. */
.ornament {
  display: block;
  width: 120px;
  margin: 0 auto 20px;
  background-color: var(--text);
  -webkit-mask: var(--src) center / contain no-repeat;
  mask: var(--src) center / contain no-repeat;
}
.ornament-birds { --src: url("../img/ornaments/wildlife-birds.svg"); aspect-ratio: 170 / 90; }
.ornament-reeds { --src: url("../img/ornaments/nature-reeds.svg"); aspect-ratio: 170 / 110; }
.ornament-doorway { --src: url("../img/ornaments/humanistics-doorway.svg"); aspect-ratio: 124 / 100; width: 96px; }
.ornament-notebook, .ornament-browser, .ornament-newspaper, .ornament-briefcase,
.ornament-mortarboard, .ornament-medal, .ornament-papers, .ornament-hexagon { aspect-ratio: 120 / 80; width: 110px; }
.ornament-notebook { --src: url("../img/ornaments/statistician-notebook.svg?v=2"); }
.ornament-browser { --src: url("../img/ornaments/statistician-browser.svg?v=2"); }
.ornament-newspaper { --src: url("../img/ornaments/statistician-newspaper.svg?v=2"); }
.ornament-briefcase { --src: url("../img/ornaments/statistician-briefcase.svg?v=2"); }
.ornament-mortarboard { --src: url("../img/ornaments/statistician-mortarboard.svg?v=2"); }
.ornament-medal { --src: url("../img/ornaments/statistician-medal.svg?v=2"); }
.ornament-papers { --src: url("../img/ornaments/statistician-papers.svg?v=2"); }
.ornament-hexagon { --src: url("../img/ornaments/statistician-hexagon.svg?v=2"); }

/* Statistician page: larger list text under the section titles */
main.page.cv ul { font-size: 23px; line-height: 1.55; }
main.page.cv li ul { font-size: 21px; }
@media (max-width: 760px) {
  main.page.cv ul { font-size: 21px; }
  main.page.cv li ul { font-size: 19px; }
}

/* Note pages (WHODrug, E9(R1)): larger reading text */
main.page.note { font-size: 23px; line-height: 1.65; }
main.page.note h2 { font-size: 30px; }
.note-figure { margin: 40px 0; }
.note-figure img { max-width: 100%; height: auto; border: 1px solid var(--hair); }
@media (max-width: 760px) {
  main.page.note { font-size: 21px; }
  main.page.note h2 { font-size: 27px; }
}

/* Photo carousels: one photo at a time, swipe or use the arrows */
.carousel {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
}
main.page.wide .carousel { max-width: var(--max); }
.carousel .track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  outline: none;
}
.carousel .track::-webkit-scrollbar { display: none; }
.carousel .track:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.carousel figure {
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  max-height: 80vh;
}
.carousel img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* never crop */
}
.carousel .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  font: 400 26px/38px var(--serif);
  text-align: center;
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.15s ease, color 0.15s ease;
}
.carousel .nav:hover { background: var(--text); border-color: var(--text); color: #fff; }
.carousel .nav.prev { left: 16px; }
.carousel .nav.next { right: 16px; }
.carousel .nav[disabled] { opacity: 0; pointer-events: none; }
.carousel .count {
  margin-top: 14px;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--muted);
  text-align: right;
}
.carousel .dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -26px;
  display: flex;
  gap: 6px;
}
.carousel .dots button {
  flex: 0 1 20px; /* shrink when a section has many photos */
  min-width: 3px;
  height: 1px;
  padding: 6px 0;
  border: none;
  background: linear-gradient(#c8c8c8, #c8c8c8) center / 100% 1px no-repeat;
  cursor: pointer;
}
.carousel .dots button[aria-current="true"] {
  background-image: linear-gradient(var(--ink), var(--ink));
}
@media (hover: none) {
  .carousel .nav { display: none; } /* phones: swipe instead */
}

/* Footer: a pale band at the foot of every page */
.site-footer {
  margin-top: 40px;
  background: var(--pale);
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  padding: 36px 24px 44px;
}
.home + .site-footer { margin-top: 0; }