/* Church of Hedonism — shared styles */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Space+Grotesk:wght@300;400;500;600&family=JetBrains+Mono:wght@300;400;500&display=swap');

:root{
  --bg: oklch(0.975 0.006 75);
  --bg-2: oklch(0.95 0.008 75);
  --ink: oklch(0.18 0.012 60);
  --ink-2: oklch(0.35 0.012 60);
  --muted: oklch(0.55 0.012 60);
  --hair: oklch(0.82 0.01 70);
  --accent: oklch(0.58 0.14 45);

  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Space Grotesk', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --pad: clamp(20px, 4vw, 56px);
  --max: 1440px;
}

*{ box-sizing: border-box; margin:0; padding:0; }
html, body{ background: var(--bg); color: var(--ink); }
body{
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display:block; }

/* ===== Layout chrome ===== */
.frame{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.nav{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 28px var(--pad);
  max-width: var(--max);
  margin: 0 auto;
  gap: 24px;
}
.nav .left, .nav .right{
  display: flex; align-items: center; gap: 32px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.nav .right{ justify-content: flex-end; }
.nav a:hover{ color: var(--accent); }
.nav .mark{
  display:flex; align-items:center; gap:10px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
}
.nav .mark .glyph{ width: 22px; height: 22px; }

.menu-trigger{
  display: inline-flex; align-items: center; gap: 12px;
  cursor: pointer; user-select:none;
}
.menu-trigger .bars{ display:flex; flex-direction:column; gap:4px; }
.menu-trigger .bars span{
  display:block; width: 22px; height: 1px; background: var(--ink);
}

/* hairline horizontal rule used everywhere */
.hair{ height: 1px; background: var(--hair); border: 0; width: 100%; }

/* ===== Footer ===== */
.foot{
  border-top: 1px solid var(--hair);
  margin-top: 80px;
}
.foot-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px var(--pad);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.foot-inner .center{ text-align:center; }
.foot-inner .right{ text-align:right; }

/* ===== Common typography ===== */
.eyebrow{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.display{
  font-family: var(--serif);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.01em;
}
.lead{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  line-height: 1.35;
  color: var(--ink-2);
}
.body-text p{
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  text-wrap: pretty;
}
.body-text p + p{ margin-top: 1em; }

/* ===== Page-specific layout uses CSS grid; defined inline per page ===== */

/* small screens */
@media (max-width: 720px){
  .nav{ grid-template-columns: 1fr 1fr; gap: 12px; }
  .nav .right{ display:none; }
  .foot-inner{ grid-template-columns: 1fr; }
  .foot-inner .center, .foot-inner .right{ text-align:left; }
}