/* Meridian — structure stylesheet. Colors come ONLY from var(--m-*) set in seasoning.css. */

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

body {
  background: var(--m-bg);
  color: var(--m-text);
  font-family: var(--m-font-body), system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.serif, h1, h2, h3.serif { font-family: var(--m-font-display), Georgia, serif; }

a { color: inherit; text-decoration: none; transition: color 0.18s ease; }
a:hover { color: var(--m-accent); }

.wrap { max-width: 920px; margin: 0 auto; padding: 0 28px; }

/* ---- Navigation ---- */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 0; border-bottom: 1px solid var(--m-line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.logo {
  font-size: 0.95rem; font-weight: 600; letter-spacing: 0.42em;
  color: var(--m-accent);
}
.links { display: flex; gap: 26px; }
.links a {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--m-soft);
}
.links a[aria-current="page"] { color: var(--m-heading); }

/* ---- Hero ---- */
.hero { text-align: center; padding: 110px 28px 90px; }
.eyebrow { font-size: 0.68rem; letter-spacing: 0.34em; color: var(--m-faint); }
.hero h1 {
  font-style: italic; font-weight: 500;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  color: var(--m-heading); margin-top: 22px; line-height: 1.12;
}
.rule { width: 44px; height: 1px; background: var(--m-accent); margin: 30px auto; border: 0; }
.hero p { max-width: 470px; margin: 0 auto; font-size: 0.95rem; line-height: 1.8; color: var(--m-soft); }

/* ---- Principles band ---- */
.principles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--m-line);
  border-top: 1px solid var(--m-line); border-bottom: 1px solid var(--m-line);
}
.principles > div { background: var(--m-surface); padding: 40px 34px; }
.principles h3 { font-family: var(--m-font-display), Georgia, serif; font-weight: 600; font-size: 1.3rem; color: var(--m-heading); }
.principles p { font-size: 0.83rem; line-height: 1.7; color: var(--m-soft); margin-top: 10px; }

/* ---- Section label ---- */
.label {
  font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--m-faint);
}

/* ---- Letters list ---- */
.letters { padding: 70px 0; }
.letter-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 18px 0; border-bottom: 1px solid var(--m-line);
}
.letter-row .t { font-family: var(--m-font-display), Georgia, serif; font-size: 1.2rem; color: var(--m-text); }
.letter-row:hover .t { color: var(--m-heading); }
.letter-row .y { font-size: 0.72rem; letter-spacing: 0.12em; color: var(--m-accent); white-space: nowrap; }
.more-link { display: inline-block; margin-top: 26px; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--m-accent); }

/* ---- Prose pages ---- */
.prose { max-width: 640px; margin: 0 auto; padding: 90px 28px; }
.prose .eyebrow { display: block; text-align: center; }
.prose h1 { font-style: italic; font-weight: 500; font-size: clamp(2rem, 5vw, 2.8rem); color: var(--m-heading); text-align: center; margin-top: 20px; line-height: 1.15; }
.prose .rule { margin: 30px auto 50px; }
.prose p { margin-bottom: 26px; font-size: 1rem; color: var(--m-text); }
.prose p.aside { font-size: 0.88rem; color: var(--m-soft); }
.tenet { margin: 44px 0; }
.tenet .n { font-size: 0.7rem; letter-spacing: 0.3em; color: var(--m-accent); }
.tenet h2 { font-weight: 600; font-size: 1.5rem; color: var(--m-heading); margin-top: 8px; }
.tenet p { margin-top: 12px; margin-bottom: 0; }

/* ---- Inquiries ---- */
.inquiry-block { text-align: center; padding: 40px 0 10px; }
.inquiry-block .addr { font-family: var(--m-font-display), Georgia, serif; font-size: 1.25rem; color: var(--m-heading); line-height: 1.9; }
.inquiry-block .note { max-width: 430px; margin: 26px auto 0; font-size: 0.9rem; color: var(--m-soft); }

/* ---- Footer ---- */
footer {
  text-align: center; padding: 34px 28px;
  font-size: 0.66rem; letter-spacing: 0.28em; color: var(--m-faint);
  border-top: 1px solid var(--m-line);
}

@media (max-width: 760px) {
  .principles { grid-template-columns: 1fr; }
  .links { gap: 16px; }
  .links a { font-size: 0.65rem; letter-spacing: 0.12em; }
  .hero { padding: 70px 22px 60px; }
}

/* ---- Hero photo strip ---- */
.hero-photo img { display: block; width: 100%; height: 340px; object-fit: cover; }

/* ---- Craft: engraved seal, drawn rule, stationery rules, oldstyle figures ---- */
.seal-mark { color: var(--m-accent); display: block; margin: 0 auto 16px; }
.inquiry-block .seal-mark { margin-bottom: 22px; }
footer .seal-mark { opacity: 0.8; }
footer span { display: block; }
.hero .rule { animation: ruledraw 1.2s ease-out both; }
@keyframes ruledraw { from { width: 0; } }
@media (prefers-reduced-motion: reduce) { .hero .rule { animation: none; } }
.nav { box-shadow: 0 4px 0 -3px var(--m-line); }
footer { box-shadow: inset 0 4px 0 -3px var(--m-line); }
.letter-row .y, .eyebrow { font-variant-numeric: oldstyle-nums; }