/* ==========================================================================
   Cheng Huai Art & Culture Association — design system
   From the A1 "Deep Red on Paper" reference implementation.
   Sheets: 01 Foundations · 02 Components · 03 Web Guidelines
   ========================================================================== */

:root {
  /* Colour — every colour on a page comes from the Foundations sheet */
  --paper: #F4F2ED;      /* the ground of every page, never pure white */
  --ink: #111111;        /* text, rules, footer */
  --cinnabar: #C43A21;   /* the accent: one band per page, links, arrows, 澄怀 */
  --seal: #744205;       /* wayfinding: category labels, bylines, mono metadata */
  --petrol: #00658F;     /* secondary editorial tag only — text, never fills */
  --stone: #5C5952;      /* quiet data: ledger meta, card dates and venues */
  --hairline: #DCD6C8;   /* 1px row rules on paper */
  --tint: #E9E4D8;       /* image wells and placeholders */
  --body: #333333;       /* body copy */

  /* On ink (footer) */
  --on-ink-link: #DDDDDD;
  --on-ink-label: #999999;
  --on-ink-rule: #333333;

  /* Type */
  --sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
  --serif-sc: 'Noto Serif SC', serif;

  /* Grid & spacing — frame 1440 · margins 32 · gutters 24 */
  --margin: 32px;
  --gutter: 24px;
}

/* Base ------------------------------------------------------------------- */

* { box-sizing: border-box; }

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

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

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

a { color: var(--ink); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--cinnabar); }

h1, h2, h3, h4, p { margin: 0; }

/* The page is the 1440 frame, centered */
.page {
  max-width: 1440px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  z-index: 10;
}
.skip-link:focus { left: 0; top: 0; color: var(--paper); }

/* Masthead — once per page, opens with the 3px ink rule --------------------- */

.masthead {
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 22px var(--margin) 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.wordmark {
  display: flex;
  align-items: baseline;
  gap: 16px;
  white-space: nowrap;
}
.logo-mark {
  width: auto;
  height: 54px;
  align-self: center;
  flex: 0 0 auto;
}
.wordmark-latin {
  font-size: 52px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: lowercase;
}
.wordmark-sc {
  font-family: var(--serif-sc);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: var(--cinnabar);
}
a.wordmark:hover .wordmark-latin { color: var(--cinnabar); }

.masthead-right { display: flex; align-items: center; gap: 28px; }

.nav { display: flex; flex-wrap: wrap; gap: 22px; font-size: 15px; font-weight: 500; }
.nav a[aria-current="page"] { color: var(--cinnabar); }

/* Buttons — square corners, min 44px hit target ---------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  min-height: 44px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-primary {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
}
.btn-primary:hover { background: var(--cinnabar); border-color: var(--cinnabar); color: var(--paper); }
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-secondary:hover { background: var(--ink); color: var(--paper); }

.btn-subscribe { padding: 10px 18px; min-height: 44px; }

/* Sections — full-width stack separated by 1px ink rules ------------------- */

.section {
  border-top: 1px solid var(--ink);
  padding: 26px var(--margin) 40px;
}
.section--first { border-top: none; } /* masthead already closes with 1px ink */
.section--last { padding-bottom: 44px; } /* 44px before footer */

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 22px;
}
.section-title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Type ramp ---------------------------------------------------------------- */

.lede {
  font-size: 34px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.body-copy { font-size: 16px; line-height: 1.6; color: var(--body); }
.body-copy p + p { margin-top: 1em; }

.label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--seal);
}
.tag {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tag--cinnabar { color: var(--cinnabar); }
.tag--petrol { color: var(--petrol); }

.meta-mono { font-family: var(--mono); font-size: 13px; color: var(--stone); }
.kicker-mono { font-family: var(--mono); font-size: 12px; color: var(--seal); letter-spacing: 0.02em; }
.credit { font-family: var(--mono); font-size: 12px; color: var(--seal); line-height: 1.5; }

/* Links -------------------------------------------------------------------- */

.index-link {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cinnabar);
}
.inline-link { font-size: 14px; font-weight: 600; color: var(--cinnabar); }
.index-link:hover, .inline-link:hover { color: var(--ink); }

/* Standalone arrow — the house icon */
.arrow-svg { display: block; flex: 0 0 auto; }

/* Image wells --------------------------------------------------------------- */

.img-well { background: var(--tint); overflow: hidden; }
.img-well img { width: 100%; height: 100%; object-fit: cover; }
.img-well--43 { aspect-ratio: 4 / 3; }
.img-well--32 { aspect-ratio: 3 / 2; }
.img-well--natural img { height: auto; object-fit: unset; }

a .img-well img { transition: transform 0.5s ease; }
a:hover .img-well img { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) {
  a .img-well img { transition: none; }
  a:hover .img-well img { transform: none; }
}

/* Event cards — 4-up at 4:3 -------------------------------------------------- */

.event-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
}
.event-card { display: flex; flex-direction: column; gap: 12px; }
.event-card-text { display: flex; flex-direction: column; gap: 5px; }
.event-card-title {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.event-card-meta { font-size: 14px; color: var(--stone); line-height: 1.4; }

/* Article cards — 3-up gallery at 3:2 ---------------------------------------- */

.article-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
}
.article-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid var(--hairline);
  padding-top: 18px;
}
.article-card-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.article-card-byline { font-size: 13px; color: var(--seal); line-height: 1.5; }

/* Ledger — the archive's canonical form --------------------------------------
   number / category / title / date–place in mono, hairline-separated,
   the latest row banded cinnabar and bleeding 16px past the text edge. */

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

.ledger-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding-bottom: 16px;
}
.ledger-head-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ledger-row {
  display: flex;
  gap: var(--gutter);
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--hairline);
}
.ledger-row:last-child { border-bottom: none; }

.ledger-num { font-family: var(--mono); font-size: 13px; color: var(--stone); width: 34px; flex: 0 0 auto; }
.ledger-cat {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--stone);
  width: 170px;
  flex: 0 0 auto;
  text-transform: uppercase;
}
.ledger-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  flex: 1 1 0;
}
.ledger-meta { font-family: var(--mono); font-size: 13px; color: var(--stone); flex: 0 0 auto; text-transform: uppercase; }

/* The banded row — at most one cinnabar band per page */
.ledger-row--band {
  background: var(--cinnabar);
  color: var(--paper);
  padding: 18px 16px;
  margin: 0 -16px;
  border-bottom: none;
}
.ledger-row--band .ledger-num,
.ledger-row--band .ledger-cat,
.ledger-row--band .ledger-meta { color: var(--paper); }
.ledger-row--band .ledger-title { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
a.ledger-row--band:hover { color: var(--paper); background: var(--ink); }
a.ledger-row--band:hover .ledger-num,
a.ledger-row--band:hover .ledger-cat,
a.ledger-row--band:hover .ledger-meta { color: var(--paper); }

a.ledger-row:hover .ledger-title { color: var(--cinnabar); }
a.ledger-row--band:hover .ledger-title { color: var(--paper); }

/* Footer — solid ink, closes every page --------------------------------------- */

.footer {
  margin-top: auto;
  background: var(--ink);
  color: #FFFFFF;
  padding: 38px var(--margin) 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.footer-top {
  display: flex;
  gap: 60px;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-wordmark { display: flex; align-items: baseline; gap: 12px; }
.footer-wordmark-latin { font-size: 30px; font-weight: 900; letter-spacing: -0.03em; text-transform: lowercase; }
.footer-wordmark-sc { font-family: var(--serif-sc); font-size: 20px; font-weight: 600; color: var(--cinnabar); }
.footer-email { font-size: 15px; color: #FFFFFF; }
a.footer-email:hover { color: var(--on-ink-link); }

.footer-cols { display: flex; gap: 72px; flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-ink-label);
}
.footer-links { font-size: 15px; display: flex; flex-direction: column; gap: 8px; }
.footer-links a { color: var(--on-ink-link); }
.footer-links a:hover { color: #FFFFFF; }

.footer-bottom {
  border-top: 1px solid var(--on-ink-rule);
  padding-top: 18px;
  font-size: 13px;
  color: var(--on-ink-label);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-social { display: flex; gap: 18px; }
.footer-social a { color: var(--on-ink-label); font-size: 13px; }
.footer-social a:hover { color: #FFFFFF; }

/* Forms — square corners, paper fields, ink borders ---------------------------- */

.field { display: flex; flex-direction: column; gap: 8px; }
.field input,
.field textarea {
  border: 1px solid var(--ink);
  background: var(--paper);
  min-height: 44px;
  padding: 10px 14px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  border-radius: 0;
}
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus,
.field textarea:focus { outline: 2px solid var(--cinnabar); outline-offset: -1px; }

/* Article detail pages ----------------------------------------------------------
   No artboard exists: derived from the system. When in doubt, do what the
   homepage does. Artworks may run uncropped at natural ratio. */

.article-header { display: flex; flex-direction: column; gap: 18px; max-width: 1080px; }
.article-title {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.article-body { max-width: 720px; }
.article-body p { font-size: 16px; line-height: 1.6; color: var(--body); margin: 0 0 1.2em; }
.article-body p:last-child { margin-bottom: 0; }
.article-body strong, .article-body b { color: var(--ink); font-weight: 600; }
.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6 {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 1.8em 0 0.65em;
}
.article-body h2 { font-size: 28px; }
.article-body h3 { font-size: 24px; }
.article-body h4 { font-size: 21px; }
.article-body h5 { font-size: 18px; }
.article-body h6 {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.article-body ul,
.article-body ol { margin: 0 0 1.4em; padding-left: 1.4em; color: var(--body); }
.article-body li { margin: 0.4em 0; }
.article-body blockquote {
  border-left: 3px solid var(--cinnabar);
  margin: 1.8em 0;
  padding: 4px 0 4px 22px;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.45;
}
.article-body blockquote p { color: inherit; font-size: inherit; }
.article-body a { color: var(--cinnabar); text-decoration: underline; text-underline-offset: 0.15em; }
.article-body a:hover { color: var(--ink); }
.article-body code { font-family: var(--mono); font-size: 0.92em; }
.article-body hr { border: 0; border-top: 1px solid var(--hairline); margin: 32px 0; }
.article-figure { margin: 32px 0; display: flex; flex-direction: column; gap: 10px; }
.article-figure figcaption { font-family: var(--mono); font-size: 12px; color: var(--seal); line-height: 1.5; }
.article-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 32px 0; }
.article-embed iframe { width: 100%; height: 100%; border: 0; }

.article-nav {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* Reveal animation hooks --------------------------------------------------------
   Elements are hidden by GSAP only when JS runs (html.js); without JS the page
   renders complete. See assets/js/main.js. */

/* Utility ------------------------------------------------------------------------ */

.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; }
.stack-10 { display: flex; flex-direction: column; gap: 10px; }
.stack-14 { display: flex; flex-direction: column; gap: 14px; }

/* Responsive ----------------------------------------------------------------------
   The frame is 1440; below it the same system compresses. Dense beats decorative. */

@media (max-width: 1160px) {
  .event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1060px) {
  .masthead {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .masthead-right { width: 100%; justify-content: space-between; }
}

@media (max-width: 760px) {
  :root { --margin: 20px; }

  .wordmark-latin { font-size: 38px; }
  .wordmark-sc { font-size: 22px; }
  .logo-mark { width: auto; height: 40px; }
  .masthead-right { flex-direction: column; align-items: flex-start; gap: 16px; }
  .nav { gap: 16px 20px; }

  .lede { font-size: 26px; }
  .section-title { font-size: 24px; }
  .article-title { font-size: 30px; }
  .article-body h2 { font-size: 24px; }
  .article-body h3 { font-size: 21px; }
  .article-body h4 { font-size: 19px; }
  .two-col { grid-template-columns: 1fr; gap: 24px; }

  /* Ledger rows wrap: number + category on top, title full width, meta below */
  .ledger-row { flex-wrap: wrap; gap: 6px 16px; }
  .ledger-title { flex: 1 1 100%; font-size: 19px; }
  .ledger-row--band .ledger-title { font-size: 21px; }
  .ledger-cat { width: auto; }
  .ledger-meta { text-transform: uppercase; }

  .section-header { flex-wrap: wrap; gap: 10px 24px; }
}

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