/* ==========================================================================
   Out of the Shadows of Angkor
   Hand-coded rebuild — no Squarespace / framework dependencies.

   1. Custom properties
   2. Reset & base
   3. Typography
   4. Layout primitives
   5. Site header + navigation
   6. Page: Home
   7. Page: Contributors (accordion)
   8. Page: Related Books
   9. Page: About MANOA
   10. Scroll-reveal (progressive enhancement)
   ========================================================================== */

/* 0. Fonts (self-hosted, open-source substitutes) ------------------------- *
   Cormorant Garamond → stands in for Adobe Garamond Pro (body)
   Cormorant          → stands in for Orpheus Pro (display / headings / wordmark)
   Each .woff2 is the full-charset file, covering Latin + Latin-Extended
   (needed for ā/Ā, â, é, è in Mānoa / DÂH / MĀNOA / French titles).
   font-display: swap → text shows immediately in the fallback, then swaps. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-400.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-600.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cormorant-400.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cormorant-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/cormorant-500.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/cormorant-600.woff2") format("woff2");
}

/* 1. Custom properties ---------------------------------------------------- */
:root {
  /* Body = Cormorant Garamond (→ Adobe Garamond Pro), Display = Cormorant
     (→ Orpheus Pro). Fallbacks cover the moment before the webfont loads and
     the no-font case. To swap in licensed Orpheus/Garamond files later, add
     their @font-face blocks above and rename here. */
  --font-body: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-display: "Cormorant", "Cormorant Garamond", Georgia, serif;

  /* Colour — black on white, matching the source site */
  --color-ink: #000000; /* body text, links */
  --color-link: #512549; /* inline hyperlink color, matching the source site */
  --color-strong: #000000; /* wordmark, nav, headings */
  --color-bg: #ffffff;
  --color-rule: #d9d9d9; /* hairline dividers */
  --color-muted: #555555; /* captions */

  /* Rhythm */
  --content-max: 120rem; /* high cap so content fills the viewport w/ ~40px padding */
  --measure: 46rem; /* readable line length (single-column text pages) */
  --gutter: clamp(1.25rem, 4vw, 3.25rem); /* ~52px inset, matching the source */
  --header-h: 122px; /* matches the source header height */
  --flow: 1em; /* vertical space between flow elements */

  --transition: 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 2. Reset & base --------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem);
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--color-ink);
  text-decoration: none;
}
a:hover,
a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  padding: 0.5rem 1rem;
  z-index: 100;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* Accessible label with no visual footprint */
.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;
}

/* 3. Typography ----------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-strong);
  line-height: 1.15;
  margin: 0;
}

p,
ul,
ol {
  margin: 0;
}

em,
i {
  font-style: italic;
}
strong,
b {
  font-weight: 600;
}

/* The recurring "tagline" line that opens most pages (roman, ~21px as in the
   source — the same size as body copy, in the display face) */
.page__tagline {
  font-size: 1.3125rem;
  font-style: normal;
  color: var(--color-ink);
  max-width: var(--measure);
}

/* The source doesn't use one shared heading size — it varies by heading
   level/context (confirmed via live measurement at 1728px: about-manoa's H1
   ~79px, read/related-books' H2 ~54px, contributors' subsection H2s ~42px).
   This base rule is the H2 tier (the most common case); the other two tiers
   get page-scoped overrides below, each scaling the same clamp shape rather
   than a flat px value so it stays fluid at other viewport widths. */
.page__heading {
  font-size: clamp(2.161rem, 1.605rem + 2.222vw, 3.395rem);
  color: var(--color-strong);
}
.page--about .page__heading {
  font-size: clamp(3.15rem, 2.34rem + 3.24vw, 4.95rem);
}
.contributors__editors .page__heading,
.contributors__authors .page__heading {
  font-size: clamp(1.666rem, 1.237rem + 1.713vw, 2.618rem);
}

/* Vertical rhythm: space stacked flow children */
.page > * + *,
.home__text > * + *,
.contributors__editors > * + *,
.about > * + * {
  margin-top: var(--flow);
}

.page ul {
  padding-left: 1.2em;
}
.page li + li {
  margin-top: 0.5em;
}

.caption {
  color: var(--color-muted);
  font-size: 0.9em;
}

/* 4. Layout primitives ---------------------------------------------------- */
.site-main {
  max-width: var(--content-max);
  margin-inline: auto;
  /* Top: header height + 17px so the tagline sits ~56px below the wordmark,
     matching the source. */
  padding: calc(var(--header-h) + 17px) var(--gutter) 5rem;
}

.page {
  max-width: var(--measure);
}
/* wide pages override the measure (their inner blocks set their own widths) */
.page--home,
.page--related,
.page--read,
.page--acknowledgments,
.page--contributors,
.page--about {
  max-width: none;
}
/* About MANOA still reads best at the narrower measure — the wide override
   above is there so the flex row below can push the image toward the right
   edge of the full content width (matching the source), not so body text
   stretches. The text column's own max-width is set on .about__text. */
.page--about h1 {
  max-width: var(--measure);
}

/* 5. Site header + navigation --------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 96%, transparent);
  backdrop-filter: blur(8px);
  transition: transform 0.35s ease;
}
/* Hidden state (JS toggles this on scroll down; shown near the top). */
.site-header.is-hidden {
  transform: translateY(-100%);
}

.site-header__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  min-height: var(--header-h); /* 100px header */
  padding: 1rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.25rem 2rem;
  flex-wrap: wrap;
}

.site-title {
  font-family: var(--font-display);
  font-size: 38px; /* shrinks on mobile (see 799px query) so it never overflows */
  letter-spacing: -0.1rem;
  font-weight: 400; /* wordmark weight */
  color: var(--color-strong);
  line-height: 1;
  margin-right: auto;
}
.site-title:hover {
  text-decoration: none;
}

/* Nav wraps both the page links and the social icons so they collapse
   together into the mobile menu. */
.primary-nav {
  display: flex;
  align-items: baseline;
  gap: 1.5rem 2rem;
}
.primary-nav__list,
.site-social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
}

.primary-nav a {
  font-family: var(--font-body);
  /* Fluid like the source: 21px on wide screens, shrinking as it narrows so the
     horizontal nav still fits down to the 800px collapse point. */
  font-size: clamp(1.05rem, 0.55rem + 0.95vw, 1.3125rem);
  color: var(--color-strong);
}
.primary-nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.primary-nav__list a:hover,
.primary-nav__list a:focus-visible {
  text-decoration: none;
}

.site-social {
  gap: 0.9rem;
  align-self: center;
}
.site-social a {
  display: inline-flex;
  color: var(--color-strong);
}
.site-social a:hover {
  color: var(--color-ink);
  text-decoration: none;
}

/* Mobile nav toggle — hidden on desktop, shown via media query below */
.nav-toggle {
  display: none;
  order: 3;
  margin-left: auto;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1.5rem;
  height: 1.5px;
  background: var(--color-strong);
  transform: translateX(-50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle__bar {
  top: 50%;
}
.nav-toggle__bar::before {
  top: -7px;
}
.nav-toggle__bar::after {
  top: 7px;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar {
  background: transparent;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before {
  transform: translateX(-50%) translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after {
  transform: translateX(-50%) translateY(-7px) rotate(-45deg);
}

/* 6. Page: Home ----------------------------------------------------------- */
.page--home .page__tagline {
  margin-bottom: 4.75rem;
}
.home__body {
  display: grid;
  /* Exactly the source grid: cover span-4 (33.33%), spacer span-1 (8.33%),
     text span-7 (58.33%). column-gap % resolves against the container width. */
  grid-template-columns: 4fr 7fr;
  column-gap: 8.3333%;
  row-gap: 2.5rem;
  align-items: start;
}
.home__cover {
  margin: 0;
}
.home__cover img {
  width: 100%;
}
.home__text a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

/* 6b. Page: Read ---------------------------------------------------------- *
   Source layout: two equal columns (span-6 / span-6). Left = Khmer ornament +
   heading + text; right = the wide cover spread + caption. */
.read__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(1.75rem, 2vw, 2.1rem);
  row-gap: 2.5rem;
  align-items: start;
}
.read__main > * + * {
  margin-top: var(--flow);
}
.read__main > .page__heading {
  margin-top: 2.125rem;
}
.read__ornament {
  margin: 0 auto 1.75rem;
  max-width: 12.5rem; /* ~200px, centered, as in the source */
}
.read__cover {
  margin: 0;
}
.read__cover img,
.read__ornament img {
  width: 100%;
}
.read__cover figcaption {
  margin-top: 1.35rem;
  color: var(--color-ink); /* black, body size — matches the source */
  font-size: 1.3125rem;
  line-height: 1.6;
}

.page--read a {
  text-decoration: underline;
  text-underline-offset: .15em;
  text-decoration-thickness: 1px;
  color: var(--color-link);
}

/* 6c. Page: Acknowledgments ---------------------------------------------- *
   Two equal columns (supporter logos / thanks + list), then a centered note
   and a centered Khmer "thanks" graphic. */
.ack__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(1.25rem, 2vw, 2.2rem);
  row-gap: 2.5rem;
  align-items: start;
  margin-bottom: 11rem;
}
.ack__supporters {
  margin: 0;
}
.ack__supporters img {
  width: 100%;
}
.ack__thanks > * + * {
  margin-top: var(--flow);
}
.ack__thanks a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}
.ack__thanks ul {
  padding-left: 2.5em;
}
.ack__note {
  max-width: 52rem;
  margin: 0 auto;
  text-align: center;
}
.ack__seal {
  margin: 2.5rem auto 0;
  max-width: 36.4375rem;
}
.ack__seal img {
  width: 100%;
}

/* 7. Page: Contributors (accordion) --------------------------------------- */
/* Two-column layout matching the source's 12-col grid: a span-5 editors column
   (col 2–6) and a span-4 authors/accordion column (col 8–11), with span-1
   margins/gap forming the empty columns 1, 7 and 12. */
.contributors__body {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
  /* Generous vertical breathing room, matching the source: separate the main
     two-column content from the tagline/header above and the footer below. */
  margin-top: 8.5rem;
  margin-bottom: 2.1rem;
}
.contributors__editors {
  grid-column: 2 / span 5;
  margin-bottom: 0;
}
.contributors__editors a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}
.contributors__authors {
  grid-column: 8 / span 4;
}
.contributors__editors h3 {
  font-size: 1.3125rem;
  margin-top: 2rem;
  letter-spacing: -0.05rem;
}

.accordion {
  border-top: 1px solid var(--color-rule);
  margin-top: 2.125rem; /* ~34px separation from the "Authors" heading */
}
.accordion__item {
  border-bottom: 1px solid var(--color-rule);
}
.accordion__summary {
  font-family: var(--font-body); /* body face, 21px — matches the source */
  font-size: 1.3125rem;
  font-weight: 400;
  color: var(--color-strong);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 15px 0; /* source uses 15px top/bottom */
  transition: color 0.2s ease;
}
.accordion__summary::-webkit-details-marker {
  display: none;
}
/* Chevron: points down when closed, rotates up when open (as in the source) */
.accordion__summary::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  position: relative;
  top: -0.15em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}
.accordion__item[open] .accordion__summary::after {
  transform: rotate(225deg);
}
.accordion__summary:hover {
  color: var(--color-ink);
}
.accordion__panel {
  padding: 0 0 30px; /* source uses 30px bottom */
  max-width: var(--measure);
  overflow: hidden;
}

/* 8. Page: Related Books -------------------------------------------------- */
.related-list {
  margin: 2.5rem 0 0;
  columns: 3;
  column-gap: clamp(1.5rem, 3vw, 2.5rem);
}
.related-list__heading {
  break-inside: avoid;
  margin: 0 0 clamp(1.75rem, 2vw, 2.1rem);
}
/* Row layout (image left, text right) is the default, matching the source's
   Card design at typical desktop card widths. It stacks to a column at the
   767px breakpoint (see below) where the source's narrower card width no
   longer fits image+text side by side — exact breakpoint unverified against
   a live device, see PRA-38. */
.related-item {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.2vw, 1.35rem);
  break-inside: avoid;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}
.related-item__cover {
  display: block;
  flex: 0 0 auto;
  width: 44%;
}
.related-item__cover img {
  width: 100%;
  display: block;
}
.related-item__cover:hover {
  text-decoration: none;
}
.related-item__body {
  flex: 1 1 auto;
  min-width: 0;
}
.related-item__title {
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.322rem);
  font-style: italic;
  margin: 0 0 0.9rem;
}

.page--related a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  text-decoration-thickness: 1px;
}

.page--related a:hover:not(.related-item__cover) {
  opacity: .8;
}

.related-item__desc {
  margin: 0;
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.322rem);
}

/* The lead item ("In the Shadow of Angkor") keeps the original's full-width
   stacked treatment: wide spread cover on top, caption below, no separate
   title line since its description already opens with the title as a link. */
.related-item--first {
  display: block;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.related-item--first .related-item__cover {
  width: 100%;
}
.related-item--first .related-item__body {
  margin-top: 0.9rem;
}

/* 9. Page: About MANOA --------------------------------------------------- */
/* Flex row: text column left, image column right. A fixed gap (rather than
   the float-based approach this replaced) keeps the space between text and
   image readable at any viewport width instead of growing unboundedly on
   wide screens. */
.about__body {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 6rem;
  margin-top: 2.125rem;
}
.about__text {
  max-width: var(--measure);
  min-width: 0;
}
.about__cover {
  flex: 0 0 auto;
  width: min(45%, 22rem);
  margin: 0;
}
.about__cover img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}
.about__cover figcaption {
  margin-top: 1.0625rem;
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem);
  color: var(--color-ink);
}
.about__cover figcaption a,
.about__text a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}
/* Live measures a tighter paragraph gap on this page than the shared --flow
   value produces; override locally rather than retuning --flow sitewide. */
.about__text p + p {
  margin-top: 17px;
}

/* 10. Scroll-reveal (progressive enhancement) ----------------------------- */
/* Content is fully visible by default. Only when JS marks <html class="js">
   do we set the pre-reveal (hidden) state, which the observer then releases. */
.js .reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity var(--transition), transform var(--transition);
  will-change: opacity, transform;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  * {
    scroll-behavior: auto;
  }
}

/* ---- Responsive: tablet / mobile ---------------------------------------- */
/* ---- Nav collapse: matches the source header, which switches to the burger
   at 799px (desktop nav at ≥800px). Header type is fluid above this so the
   horizontal nav keeps fitting down to the breakpoint. -------------------- */
@media (max-width: 799px) {
  :root {
    --header-h: 5.75rem;
  }

  .site-title {
    font-size: clamp(1.5rem, 5vw, 2rem); /* shrink to fit small screens */
  }

  .nav-toggle {
    display: block;
  }

  /* Collapse nav (page links + social icons) into a full-viewport overlay
     toggled by the button. Stacking direction is column so the social row
     sits below the links. Closed state stays a zero-height, clipped strip;
     .is-open expands it to cover the screen edge-to-edge (matching the
     source site's full-page mobile menu, not a small dropdown). */
  .primary-nav {
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
  }
  .primary-nav.is-open {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    max-height: none;
    overflow-y: auto;
    z-index: 55; /* above .site-header's z-index: 50 */
    background: var(--color-bg);
    align-items: stretch;
    justify-content: flex-start;
    gap: 2rem;
    padding: 1.5rem 0 3rem;
  }
  .primary-nav__list {
    flex-direction: column;
    gap: 1.75rem;
    padding: 0.75rem 0;
    width: 100%;
  }
  /* Slide-up + fade entrance for the nav content when the overlay opens,
     matching the source's menu-open motion. */
  .primary-nav__list,
  .primary-nav .site-social {
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  .primary-nav.is-open .primary-nav__list,
  .primary-nav.is-open .site-social {
    opacity: 1;
    transform: translateY(0);
  }
  /* Huge, viewport-scaled link sizing — only ever visible while the overlay
     is open (the collapsed .primary-nav clips it via max-height/overflow),
     so no need to gate this behind an extra .is-open selector. */
  .primary-nav__list a {
    display: block;
    width: 100%;
    font-size: clamp(2rem, 9vmin, 4.5rem);
    line-height: 1.15;
    padding: 0.25rem var(--gutter);
  }

  /* Social icons now live inside the menu, below the links */
  .site-social {
    padding: 0.5rem 0 0.9rem;
    align-self: stretch;
    justify-content: center;
  }
}

/* ---- Column stacking: matches the source site's 767px breakpoint exactly. - */
@media (max-width: 767px) {
  .home__body,
  .read__body,
  .ack__body {
    grid-template-columns: 1fr;
  }
  /* Contributors: stack editors above authors, each full width */
  .contributors__body {
    display: block;
    margin-top: 3.5rem;
    margin-bottom: 3.5rem;
  }
  .contributors__editors {
    margin-bottom: 3rem;
  }
  .home__cover {
    position: static;
    max-width: 20rem;
  }
  .ack__body {
    margin-bottom: 2.5rem;
  }
  .related-list {
    columns: 1;
  }
  .related-item {
    flex-direction: column;
    align-items: stretch;
  }
  .related-item__cover {
    width: 100%;
  }
  .about__body {
    flex-direction: column-reverse;
    align-items: center;
    gap: 2rem;
  }
  .about__text {
    max-width: 100%;
  }
  .about__cover {
    width: 100%;
    max-width: 20rem;
    margin: 0 auto;
  }
}

/* Tablet: drop to two columns before the 767px full stack. */
@media (max-width: 1000px) and (min-width: 768px) {
  .related-list {
    columns: 2;
  }
}