/* ORRISVEIL — colour layer
   Palette: warm ivory ground, deep umber ink text, aged brass accent.
   Deliberately not pure #FFFFFF / #FFD700 — a soft parchment ground with
   a darkened brass accent reads as an old atelier ledger rather than a
   luxury cliche or a stark modern white. */

:root {
  --ink:        #faf6ef;
  --ink-raised: #f2ebdf;
  --ink-sunk:   #ece3d4;
  --brass:      #8c6a35;
  --brass-lit:  #6e5227;
  --brass-dim:  #b79a68;
  --bone:       #241f1a;
  --smoke:      #5c5449;
  --rule:       rgba(140, 106, 53, 0.28);
  --rule-soft:  rgba(36, 31, 26, 0.10);
}

html { background: var(--ink); }

body {
  background: var(--ink);
  color: var(--bone);
}

::selection {
  background: var(--brass);
  color: var(--ink);
}

/* ---- header ---- */

.site-header {
  background: rgba(10, 9, 8, 0.86);
  border-bottom: 1px solid var(--rule);
}

.header-logo { color: var(--bone); }
.header-logo .logo-mark { color: var(--brass); }

.nav-link { color: var(--smoke); }
.nav-link:hover,
.nav-link:focus-visible { color: var(--brass-lit); }

.nav-enrol {
  color: var(--brass-lit);
  border: 1px solid var(--brass-dim);
}
.nav-enrol:hover,
.nav-enrol:focus-visible {
  color: var(--ink);
  background: var(--brass-lit);
  border-color: var(--brass-lit);
}

/* ---- hero ---- */

.hero { background: var(--ink); }

.hero-copy-col { background: var(--ink); }

.hero-figure { background: var(--ink-sunk); }

.hero-figure-veil {
  background: linear-gradient(to right,
    rgba(10, 9, 8, 0.96) 0%,
    rgba(10, 9, 8, 0.42) 22%,
    rgba(10, 9, 8, 0) 58%);
}

.hero-eyebrow { color: var(--brass); }
.hero-name    { color: var(--bone); }
.hero-name em { color: var(--brass-lit); }
.hero-lede    { color: var(--smoke); }

.hero-meta { color: var(--smoke); }
.hero-meta strong { color: var(--bone); }
.hero-meta-sep { color: var(--brass-dim); }

/* ---- buttons ---- */

.btn-solid {
  background: var(--brass);
  color: var(--ink);
  border: 1px solid var(--brass);
}
.btn-solid:hover,
.btn-solid:focus-visible { background: var(--brass-lit); border-color: var(--brass-lit); }

.btn-ghost {
  color: var(--bone);
  border: 1px solid var(--rule);
}
.btn-ghost:hover,
.btn-ghost:focus-visible { color: var(--brass-lit); border-color: var(--brass); }

/* ---- section furniture ---- */

.section-label { color: var(--brass); }
.section-label::after { background: var(--rule); }

.section-title { color: var(--bone); }
.section-note  { color: var(--smoke); }

/* ---- manifesto ---- */

.manifesto { background: var(--ink); }
.manifesto-text p { color: var(--smoke); }
.manifesto-text p.lead { color: var(--bone); }
.manifesto-figure figcaption { color: var(--brass-dim); }

/* ---- courses / formula cards ---- */

.courses { background: var(--ink-raised); }

.formula {
  background: var(--ink);
  border: 1px solid var(--rule-soft);
}
.formula:hover { border-color: var(--rule); }

.formula-index    { color: var(--brass-dim); }
.formula-name     { color: var(--bone); }
.formula-duration { color: var(--smoke); }
.formula-blurb    { color: var(--smoke); }

.formula-sheet { border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); }
.formula-sheet caption { color: var(--brass); }
.formula-sheet th { color: var(--brass-dim); }
.formula-sheet td { color: var(--smoke); }
.formula-sheet .note-name { color: var(--bone); }
.formula-sheet .parts { color: var(--brass-lit); }
.formula-sheet tr + tr th,
.formula-sheet tr + tr td { border-top: 1px solid var(--rule-soft); }

.formula-foot { color: var(--smoke); }
.formula-price strong { color: var(--bone); }
.formula-link { color: var(--brass-lit); }
.formula-link:hover,
.formula-link:focus-visible { color: var(--bone); }

/* ---- atelier ---- */

.atelier { background: var(--ink); }
.atelier-body p { color: var(--smoke); }
.atelier-body p.lead { color: var(--bone); }

.credential dt { color: var(--brass-dim); }
.credential dd { color: var(--bone); }
.credential + .credential { border-top: 1px solid var(--rule-soft); }

/* ---- enrol ---- */

.enrol { background: var(--ink-sunk); border-top: 1px solid var(--rule); }
.enrol-title { color: var(--bone); }
.enrol-note  { color: var(--smoke); }

/* ---- footer ---- */

.site-footer { background: var(--ink-sunk); border-top: 1px solid var(--rule-soft); }
.footer-inner h2 { color: var(--brass); }
.footer-inner a { color: var(--smoke); }
.footer-inner a:hover,
.footer-inner a:focus-visible { color: var(--brass-lit); }
.footer-inner address { color: var(--smoke); }
.footer-brand p { color: var(--smoke); }
.footer-bottom { border-top: 1px solid var(--rule-soft); color: var(--brass-dim); }

/* ---- inner pages ---- */

.page-head { background: var(--ink); }
.page-title { color: var(--bone); }
.page-intro { color: var(--smoke); }

/* ---- journal ---- */

.journal { background: var(--ink); }

.article-card {
  background: var(--ink-raised);
  border: 1px solid var(--rule-soft);
}
.article-card:hover { border-color: var(--rule); }

.article-cat  { color: var(--brass); }
.article-date { color: var(--smoke); }

.article-card h2,
.article-card h3 { color: var(--bone); }
.article-card h2 a,
.article-card h3 a { color: inherit; }

.article-excerpt { color: var(--smoke); }

.article-link { color: var(--brass-lit); }
.article-link:hover,
.article-link:focus-visible { color: var(--bone); }

.journal-empty { color: var(--smoke); }
.journal-empty a { color: var(--brass-lit); }
.journal-empty a:hover,
.journal-empty a:focus-visible { color: var(--bone); }

/* ---- course detail ---- */

.course-detail { background: var(--ink); }
.course-slab { border-top: 1px solid var(--rule); }

.course-index    { color: var(--brass-dim); }
.course-title    { color: var(--bone); }
.course-duration { color: var(--brass); }
.course-text p   { color: var(--smoke); }

.course-includes h3 { color: var(--brass); }
.course-includes li { color: var(--smoke); }
.course-includes li::before { color: var(--brass-dim); }

.course-aside {
  background: var(--ink-raised);
  border: 1px solid var(--rule-soft);
}
.course-aside dt { color: var(--brass-dim); }
.course-aside dd { color: var(--bone); }

/* ---- contact ---- */

.contact { background: var(--ink); }

.enrol-steps li::before {
  color: var(--brass);
  border: 1px solid var(--rule);
}
.enrol-steps h3 { color: var(--bone); }
.enrol-steps p  { color: var(--smoke); }

.contact-mail {
  color: var(--brass-lit);
  border-bottom: 1px solid var(--brass-dim);
}
.contact-mail:hover,
.contact-mail:focus-visible { color: var(--bone); border-bottom-color: var(--bone); }

.contact-panel {
  background: var(--ink-raised);
  border: 1px solid var(--rule-soft);
}
.contact-panel h2 { color: var(--brass); }
.contact-panel address { color: var(--smoke); }
.contact-panel address strong { color: var(--bone); font-weight: 400; }
.contact-panel a { color: var(--brass-lit); }
.contact-panel a:hover,
.contact-panel a:focus-visible { color: var(--bone); }

/* ---- prose ---- */

.prose { color: var(--smoke); }
.prose h2, .prose h3 { color: var(--bone); }
.prose strong { color: var(--bone); }
.prose a { color: var(--brass-lit); }
.prose a:hover,
.prose a:focus-visible { color: var(--bone); }
.prose .updated { color: var(--brass-dim); }

/* ---- focus ---- */

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--brass-lit);
  outline-offset: 3px;
}

/* Stacked hero: the photograph sits above the copy, so the feather
   has to run bottom-to-top instead of left-to-right. */
@media (max-width: 940px) {
  .hero-figure-veil {
    background: linear-gradient(to bottom,
      rgba(10, 9, 8, 0) 42%,
      rgba(10, 9, 8, 0.96) 100%);
  }
}