/* Pepperdine Philosophy Club — page styles.
   Everything here builds on the Classical design system tokens in
   design-system.css. No hard-coded hexes, fonts or shadows: use var(--*). */

/* ── base ─────────────────────────────────────────────────────────────── */

/* The palette is a single light theme with no dark counterpart, so say so:
   without this some mobile browsers auto-darken the page and invent their
   own colors for the form controls and the ground. The <meta name="theme-color">
   on each page carries the same --color-bg out to the phone's address bar. */
:root { color-scheme: light; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  text-wrap: pretty;
}

a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-600); text-decoration: underline; }

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100px;
  z-index: 10;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
}
.skip-link:focus { top: var(--space-3); }

/* ── chrome ───────────────────────────────────────────────────────────── */

.site-nav {
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  padding-inline: clamp(20px, 5vw, 72px);
}
.site-nav .nav-brand { margin-right: auto; }

.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 0;
  padding: 28px 0 56px;
  border-top: 1px solid var(--color-divider);
  font-size: 13px;
  line-height: 28px;
  color: var(--color-neutral-700);
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 72px);
}

/* ── shared type ──────────────────────────────────────────────────────── */

.kicker {
  display: block;
  margin: 0 0 28px;
  font-size: 13px;
  line-height: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  font-feature-settings: 'tnum' 1;
}

/* Display sizes take the normal cut — see the design system's type notes. */
.page-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.section-title {
  margin: 0;
  max-width: 30ch;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.2;
  letter-spacing: -0.008em;
}

.h-display {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
}
.h-display-sm { font-size: 26px; }

.h-inline {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 20px;
  line-height: 28px;
}

.lede {
  margin: 28px 0 0;
  max-width: 54ch;
  font-size: 17px;
  line-height: 28px;
}
.lede-wide { max-width: 56ch; }

.body-text {
  margin: 20px 0 0;
  max-width: 54ch;
  font-size: 15.5px;
  line-height: 28px;
  color: var(--color-neutral-800);
}

.note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 28px;
  color: var(--color-neutral-700);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: 28px;
}

.section { padding: 56px 0; }
.section-tight { padding: 42px 0; }
.section-open { padding: 72px 0 42px; }

/* ── home: hero ───────────────────────────────────────────────────────── */

.hero-band { margin: 0; width: 100%; overflow: hidden; }
.hero-band img {
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 220;
  object-fit: cover;
  object-position: center 36%;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 0) 100%);
}

.rule-row {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 42px);
  width: 100%;
  margin-top: 72px;
}
.rule-row .hr { flex: 1 1 auto; margin: 0; }
/* The engravings sit on white paper that multiply drops onto the ground, so
   nothing may tint that white. sepia() does: it pulls the blue channel of
   white down (to 239 at full strength), and the paper only used to disappear
   because the contrast() after it pushed blue back over 1.0 and the clamp
   caught it — by about 2/255, and for .bust by nothing at all. Phone GPUs
   that run the chain in linear light, at another precision, or gamut-mapped
   for a P3 screen land just under that edge, and the paper then multiplies
   down to a faintly warm rectangle. So the warm archival grade is baked into
   the four engravings themselves, computed with an explicit clamp so their
   paper is exactly #fff, and multiply — which needs no clamping to land on
   the ground — is all that is left here. Regrade the assets, not this file. */
.rule-row img {
  width: clamp(72px, 12vw, 180px);
  height: auto;
  opacity: 0.9;
  mix-blend-mode: multiply;
}
.rule-row img.flip { transform: scaleX(-1); }

.hero { padding: 0 0 72px; }
.hero-figure { margin: 72px 0 0; }

.hero-quote {
  margin: 0;
  max-width: 26ch;
  min-height: 2.2em;
  font-family: 'EB Garamond', var(--font-heading);
  font-weight: 400;
  font-size: clamp(36px, 5.1vw, 72px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-indent: -0.34em;
}
/* Only offer the replay affordance once the script has wired it up. */
.hero-quote[role='button'] { cursor: pointer; }
.hero-quote[role='button']:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 6px;
}

.hero-cite {
  margin: 42px 0 0;
  font-size: 16px;
  line-height: 28px;
  color: var(--color-neutral-700);
  text-indent: -1.1em;
}

.hero .lede { margin-top: 42px; max-width: 56ch; }

/* ── home: about ──────────────────────────────────────────────────────── */

.about {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 48px);
  padding: 72px 0 56px;
}
.about-text { flex: 1 1 320px; min-width: 0; }

.bust {
  flex: 0 1 auto;
  height: clamp(160px, 20vw, 300px);
  width: auto;
  max-width: 22%;
  mix-blend-mode: multiply;
}

.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 28px 56px;
  margin-top: 42px;
}
.cols p {
  margin: 0;
  font-size: 15.5px;
  line-height: 28px;
  color: var(--color-neutral-800);
  text-align: justify;
  hyphens: auto;
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px 42px;
  padding: 56px 0;
}
.facts p {
  margin: 14px 0 0;
  font-size: 15.5px;
  line-height: 28px;
  color: var(--color-neutral-800);
}

/* ── home: mailing list ───────────────────────────────────────────────── */

.join-form {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-3);
  max-width: 460px;
  margin-top: 28px;
}
.join-form .input { flex: 1 1 220px; min-height: 38px; }
.join-form .btn { min-height: 38px; }

.join-note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 28px;
  color: var(--color-accent-700);
}

/* ── e-board ──────────────────────────────────────────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}
.cards .card-body,
.cards .card-meta { margin-top: 14px; }

/* ── events: calendar ─────────────────────────────────────────────────── */

.cal { padding: 0 0 14px; }

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  padding-bottom: 10px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--color-divider);
  border-left: 1px solid var(--color-divider);
}

.cal-cell {
  min-height: 108px;
  padding: 10px;
  border-right: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}
.cal-cell.is-pad { padding: 0; background: var(--color-neutral-100); }

.cal-date {
  font-family: var(--font-heading);
  font-size: 18px;
  font-feature-settings: 'tnum' 1;
  color: var(--color-neutral-700);
}

.cal-event {
  margin-top: 8px;
  padding: 5px 7px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 16px;
}

/* The month grid is unreadable below tablet widths; the agenda list carries
   the same events there, and is the no-CSS/no-JS reading order either way. */
.cal-agenda { margin: 0; padding: 0; list-style: none; }
.cal-agenda li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-divider);
}
.cal-agenda li:first-child { border-top: 1px solid var(--color-divider); }
.cal-agenda .agenda-date {
  flex: 0 0 auto;
  min-width: 5.5em;
  font-family: var(--font-heading);
  font-size: 17px;
  font-feature-settings: 'tnum' 1;
  color: var(--color-accent-700);
}
.cal-agenda .agenda-what { flex: 1 1 220px; font-size: 15px; line-height: 26px; }

@media (min-width: 760px) { .cal-agenda { display: none; } }
@media (max-width: 759px) {
  .cal-weekdays,
  .cal-grid { display: none; }
}

/* ── logos ────────────────────────────────────────────────────────────── */

.logos-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center;
  gap: 42px clamp(24px, 5vw, 72px);
  padding: 72px 0 42px;
}
.logos-hero figure { justify-self: end; width: min(340px, 100%); }
.logos-hero img {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

.article-list { margin: 0; padding: 0; list-style: none; }
.article {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 42px;
  padding: 20px 0;
  border-top: 1px solid var(--color-divider);
}
.article:last-child { border-bottom: 1px solid var(--color-divider); }
.article-title {
  flex: 1 1 240px;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
}
.article-dek {
  flex: 1 1 260px;
  margin: 0;
  font-size: 15px;
  line-height: 28px;
  color: var(--color-neutral-800);
}
.article-date {
  margin-left: auto;
  font-size: 13px;
  line-height: 28px;
  white-space: nowrap;
  color: var(--color-neutral-700);
  font-feature-settings: 'tnum' 1;
}

/* ── merch ────────────────────────────────────────────────────────────── */

.merch-list { margin: 0; padding: 0; list-style: none; }
.merch {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  align-items: center;
  gap: 28px 42px;
  padding: 28px 0;
  border-top: 1px solid var(--color-divider);
}
.merch:last-of-type { border-bottom: 1px solid var(--color-divider); }

.merch-figure { min-width: 0; }

/* These are shot on a white studio ground, and a white card on this warm
   near-white page reads as a hole punched in the paper — worst on a phone,
   where the column collapses and the shot runs the full width of the text.
   So they are treated like every other photograph on the site: multiplied
   into the ground, which drops pure white out exactly and leaves the
   letterbox as bare page at every width. The sepia grade of .plate still
   stays off — it shifts the navy these garments are actually sold in, and
   here color is information, not mood. Multiply only takes the garment down
   by the ground's own ~5%, evenly across three near-equal channels, so the
   navy keeps its hue.
   The polos are single front views and the quarter zips front-and-back
   pairs, so the sources have very different aspect ratios; one ratio with
   'contain' keeps every row level. */
.merch-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.merch-head { min-width: 0; }
.merch-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
}
.merch-dek {
  margin: 10px 0 0;
  max-width: 42ch;
  font-size: 15px;
  line-height: 28px;
  color: var(--color-neutral-800);
}

.merch-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  margin: 18px 0 0;
}
.merch-price {
  font-family: var(--font-heading);
  font-size: 24px;
  line-height: 28px;
  color: var(--color-accent-700);
  font-feature-settings: 'tnum' 1;
}
.merch-link { font-size: 13px; line-height: 28px; }

@media (max-width: 720px) {
  .merch { grid-template-columns: minmax(0, 1fr); }
  /* One column leaves no rows to keep level, so the shots take their own
     proportions rather than letterboxing into 3:2, and sit centered at a
     size that suits the column instead of spanning it. */
  .merch-photo {
    display: block;
    aspect-ratio: auto;
    max-width: 340px;
    margin-inline: auto;
  }
}

/* ── merch: sizing ────────────────────────────────────────────────────── */

/* The chart has four columns of figures and must not push the page sideways
   on a phone; it scrolls in its own box instead. */
.table-scroll {
  margin-top: 28px;
  overflow-x: auto;
}

.sizing-table { min-width: 30rem; }
.sizing-table th[scope='row'] { text-align: left; white-space: nowrap; }
.sizing-table td { font-feature-settings: 'tnum' 1; }

.measure-list { margin: 20px 0 0; max-width: 60ch; }
.measure-list dt {
  margin-top: 14px;
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 28px;
}
.measure-list dd {
  margin: 0;
  font-size: 15px;
  line-height: 28px;
  color: var(--color-neutral-800);
}

/* ── utilities ────────────────────────────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── 404 ──────────────────────────────────────────────────────────────── */

.notfound { padding: clamp(72px, 14vh, 140px) 0; }

/* ── narrow screens ───────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .site-nav { gap: var(--space-2) var(--space-3); }
  .site-nav .nav-brand { flex: 1 0 100%; margin-right: 0; }
}

@media (max-width: 640px) {
  /* The flanking busts crowd the column before the flex row wraps. */
  .bust { display: none; }
  .rule-row { margin-top: 42px; }
  .section-open { padding-top: 42px; }
  .about { padding-top: 42px; }
  .cols p { text-align: left; }
}