/* mores.dev — a slow-stone reading room
   warm-earthy zen · ma-negative-space · condensed Roman inscription type */

:root {
  --plaster: #EFE6D7;      /* aged ivory plaster — dominant background */
  --limestone: #E3D3BC;    /* weathered limestone — secondary surface */
  --umber: #2A211A;        /* quarried umber — near-black text */
  --terracotta: #7A5A3C;   /* terracotta dust — hairlines, numerals */
  --sienna: #B5662E;       /* burnt sienna — single shaft-of-light accent */
  --ash: #9C8A6E;          /* ash olive — captions, micro-labels */

  --measure: 600px;
  --col-offset: 38%;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--plaster);
}

body {
  background: var(--plaster);
  color: var(--umber);
  font-family: 'Spectral', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}

/* fixed grain overlay — the plaster never reads flat */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  opacity: 0.05;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.478  0 0 0 0 0.352  0 0 0 0 0.235  0 0 0 0.9 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

/* faint warm vignette so the cloister has indirect-light depth */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  background: radial-gradient(120% 90% at 32% 18%, rgba(239,230,215,0) 40%, rgba(122,90,60,0.10) 100%);
}

/* ---------- Threshold header ---------- */
.threshold {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.6rem clamp(1.4rem, 4vw, 3.4rem);
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--ash);
  pointer-events: none;
}
.threshold-mark {
  color: var(--terracotta);
}
.chapter-index {
  display: flex;
  gap: 0.45em;
  align-items: baseline;
  font-family: 'Cinzel', serif;
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
}
.chapter-index .numeral {
  color: var(--ash);
  transition: color 1.2s ease, opacity 1.2s ease;
  opacity: 0.55;
}
.chapter-index .numeral.lit {
  color: var(--umber);
  opacity: 1;
}
.chapter-index .dot {
  color: var(--ash);
  opacity: 0.35;
}

/* ---------- Chambers ---------- */
main { position: relative; z-index: 1; }

.chamber {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 14vh clamp(1.4rem, 4vw, 3.4rem);
  overflow: hidden;
}

/* colonnade hairlines — shadows of columns at irregular intervals */
.chamber::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--terracotta);
  opacity: 0.12;
}
#chamber-1::before { left: 14%; }
#chamber-2::before { left: 71%; }
#chamber-3::before { left: 22%; }
#chamber-4::before { left: 50%; opacity: 0.08; }
#chamber-5::before { left: 78%; }
#chamber-6::before { left: 19%; }
#chamber-7::before { left: 50%; opacity: 0.07; }

/* the off-center contemplation column */
.column {
  width: min(var(--measure), 92vw);
  margin-left: clamp(1.4rem, var(--col-offset), 46vw);
}
@media (max-width: 760px) {
  .column { margin-left: 0; }
}

/* ---------- Typography pieces ---------- */
.display-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.8rem, 7vw, 6rem);
  letter-spacing: 0.12em;
  line-height: 1.05;
  color: var(--umber);
}
.lede {
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--terracotta);
  margin-top: 1.8rem;
  letter-spacing: 0.01em;
}

.chamber-num {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  color: var(--ash);
  margin-bottom: 1.6rem;
}
.chamber-num .num-roman {
  font-family: 'Cinzel', serif;
  color: var(--terracotta);
  letter-spacing: 0.18em;
}

.chamber-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 5.4vw, 4.4rem);
  letter-spacing: 0.12em;
  line-height: 1.07;
  color: var(--umber);
  margin-bottom: 2.4rem;
}

/* carved cartouche — chiseled tablet recessed into plaster */
.chamber-title.cartouche {
  display: inline-block;
  padding: 0.5em 0.7em 0.55em;
  background: var(--limestone);
  border: 1px solid rgba(181,102,46,0.55);
  box-shadow:
    inset 0 2px 7px rgba(42,33,26,0.22),
    inset 0 -1px 4px rgba(239,230,215,0.7),
    0 1px 0 rgba(239,230,215,0.6);
}

.chamber p {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.8;
  margin-top: 0;
  text-shadow: 0 1px 0 rgba(122,90,60,0.06);
}
.chamber p + p { margin-top: 2.2em; }

.chamber p .hl {
  color: var(--sienna);
  font-style: italic;
  position: relative;
  white-space: nowrap;
}
.chamber p .hl::after {
  content: "";
  position: absolute;
  left: 0; bottom: -0.12em;
  width: 100%;
  height: 1.5px;
  background: var(--sienna);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.6s cubic-bezier(0.22,1,0.36,1) 0.5s;
}
.reveal.is-visible .hl::after { transform: scaleX(1); }

.chamber p.aside {
  font-style: italic;
  font-weight: 300;
  color: var(--ash);
  margin-top: 2.4em;
}

/* ---------- Latin palimpsest ---------- */
.palimpsest {
  position: absolute;
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--terracotta);
  opacity: 0.12;
  font-size: clamp(3rem, 12vw, 11rem);
  left: clamp(1rem, 33%, 40vw);
  top: 30%;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}
.palimpsest--right {
  left: auto;
  right: -4vw;
  top: 58%;
}
@media (max-width: 760px) {
  .palimpsest { left: -2vw; top: 8%; }
}

/* ---------- Breath chamber ---------- */
.chamber--breath {
  justify-content: center;
}
.breath-word {
  text-align: center;
  width: 100%;
}
.cinzel-word {
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: clamp(2rem, 9vw, 7rem);
  letter-spacing: 0.42em;
  color: var(--umber);
  display: inline-block;
  padding-left: 0.42em; /* compensate trailing tracking for true center */
}

/* ---------- Marble reliefs ---------- */
.relief {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
.relief svg { display: block; width: 100%; height: 100%; }

.relief--arch {
  top: -8vh;
  right: -22vw;
  width: 64vw;
  height: 116vh;
  opacity: 0.38;
}
.relief--drum {
  bottom: -32vh;
  left: -26vw;
  width: 70vw;
  height: 70vw;
  opacity: 0.34;
  will-change: transform;
}
.relief--slab {
  bottom: -10vh;
  left: -16vw;
  width: 62vw;
  height: 40vw;
  opacity: 0.4;
}
@media (max-width: 760px) {
  .relief--arch { right: -40vw; width: 95vw; }
  .relief--drum { left: -45vw; width: 110vw; height: 110vw; }
  .relief--slab { left: -30vw; width: 95vw; height: 60vw; }
}

/* ---------- Burnt-sienna shaft of light ---------- */
.light-shaft {
  position: absolute;
  top: -20vh;
  left: 8vw;
  width: 1.5px;
  height: 150vh;
  background: linear-gradient(180deg, rgba(181,102,46,0) 0%, rgba(181,102,46,0.55) 35%, rgba(181,102,46,0.55) 65%, rgba(181,102,46,0) 100%);
  transform: rotate(14deg);
  transform-origin: top center;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 0 8px rgba(181,102,46,0.25));
}

/* ---------- Acanthus flourish (section terminator) ---------- */
.acanthus {
  margin-top: 3.4rem;
  width: 200px;
  max-width: 60%;
  opacity: 0.7;
}
.acanthus svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- The seam (hairline crack) ---------- */
.seam {
  position: absolute;
  top: 0;
  left: 64%;
  width: 40px;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 760px) { .seam { left: 84%; } }

/* path-draw animation primitives */
.draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  pathLength: 1;
}
.is-visible .draw {
  animation: drawIn 2s cubic-bezier(0.65,0,0.35,1) forwards;
}
.is-visible .draw--slow {
  animation-delay: 0.6s;
  animation-duration: 1.6s;
}
.seam-path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  pathLength: 1;
}
.is-visible .seam-path {
  animation: drawIn 2.4s ease-out forwards;
}
@keyframes drawIn {
  to { stroke-dashoffset: 0; }
}

/* ---------- Epitaph ---------- */
.chamber--epitaph {
  min-height: 130vh;
  align-items: flex-end;
  justify-content: center;
}
.epitaph {
  text-align: center;
  margin-bottom: 12vh;
  width: 100%;
}
.seal {
  width: clamp(120px, 16vw, 200px);
  margin: 0 auto 3.2rem;
  opacity: 0.85;
  animation: sealTurn 220s linear infinite;
}
.seal svg { display: block; width: 100%; height: auto; }
.seal-text {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  fill: var(--terracotta);
  text-transform: uppercase;
}
@keyframes sealTurn {
  to { transform: rotate(360deg); }
}
.epitaph-line {
  font-family: 'Cinzel', serif;
  text-transform: lowercase;
  font-variant: small-caps;
  font-size: clamp(1.4rem, 3vw, 2.6rem);
  letter-spacing: 0.2em;
  color: var(--umber);
}
.colophon {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--ash);
  margin-top: 2.6rem;
}

/* ---------- Reveal animation (the signature fade-reveal) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.4s ease-out, transform 1.4s ease-out;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transition: opacity 0.4s ease; transform: none; }
  .reveal.is-visible { transform: none; }
  .seal { animation: none; }
  .relief { transform: none !important; }
  .is-visible .draw,
  .is-visible .draw--slow,
  .is-visible .seam-path { animation: none; stroke-dashoffset: 0; }
  .reveal.is-visible .hl::after { transition: none; transform: scaleX(1); }
}