:root {
  --paper:      #ebebe0;
  --paper-lift: #f3f3ea;
  --paper-sink: #e1e1d4;
  --ink:        #2b393d;
  --ink-soft:   #5a6d72;
  --teal:       #37646b;
  --teal-lift:  #2b5158;
  --rubric:     #7a5d50;
  --rubric-mark:#9d7f73;
  --rule:       #b0bfc1;
  --seal:       #37646b;

  --measure: 68rem;
  --step--1: clamp(.78rem, .74rem + .18vw, .86rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.1rem + .45vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.3rem + .9vw, 2.1rem);
  --step-3:  clamp(2.1rem, 1.5rem + 2.6vw, 4.4rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #1e282b;
    --paper-lift: #263336;
    --paper-sink: #182124;
    --ink:        #dfe6e6;
    --ink-soft:   #9fb1b5;
    --teal:       #9dc0c4;
    --teal-lift:  #bcd7da;
    --rubric:     #c9a291;
    --rubric-mark:#a9836f;
    --rule:       #3c4d51;
    --seal:       #9dc0c4;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo', system-ui, -apple-system, sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--teal-lift); }
:focus-visible { outline: 2px solid var(--rubric-mark); outline-offset: 3px; border-radius: 2px; }

.shell { max-width: var(--measure); margin: 0 auto; padding: 0 clamp(1.15rem, 4vw, 3.5rem); }

/* ---------- rubric: the instruction voice, in red ink ---------- */
.rubric {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.16em;
  line-height: 1.45;
  color: var(--rubric);
  margin: 0;
}

/* ---------- masthead ---------- */
.masthead {
  display: flex;
  align-items: center;
  gap: clamp(.85rem, 2vw, 1.35rem);
  padding-block: clamp(1.6rem, 4vw, 2.6rem) clamp(1.3rem, 3vw, 2rem);
  border-bottom: 1px solid var(--rule);
}
.masthead__mark { width: clamp(34px, 6vw, 46px); height: auto; flex: none; color: var(--teal); }
.masthead__order {
  margin: 0;
  font-size: var(--step--1);
  letter-spacing: .17em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-soft);
}
.masthead__season {
  margin: .1em 0 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: var(--step-1);
  line-height: 1.1;
  letter-spacing: .005em;
}
.masthead__note {
  margin: 0 0 0 auto;
  font-size: var(--step--1);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--rubric);
  text-align: right;
}

/* ---------- the vision ---------- */
.vision { padding-block: clamp(3rem, 9vw, 6.5rem) clamp(2rem, 5vw, 3.4rem); }
.vision > .rubric { margin-bottom: clamp(1rem, 2.5vw, 1.7rem); }
.vision__words {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: var(--step-3);
  line-height: 1.06;
  letter-spacing: -.008em;
  max-width: 22ch;
  color: var(--teal);
  text-wrap: balance;
}
.vision__name {
  font-weight: 400;
  letter-spacing: .05em;
  font-size: .92em;
}
.vision__cite {
  margin: clamp(1.4rem, 3vw, 2.2rem) 0 0;
  max-width: 46ch;
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--ink-soft);
}
.vision__cite a { white-space: nowrap; }

.lede {
  max-width: 52ch;
  margin: 0;
  padding-bottom: clamp(2.6rem, 6vw, 4rem);
  font-size: var(--step-1);
  font-family: 'Cormorant Garamond', Georgia, serif;
  line-height: 1.4;
}

/* ---------- offices ---------- */
.office {
  display: grid;
  grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(2.6rem, 6vw, 4.5rem);
  border-top: 1px solid var(--rule);
}
.office__margin { position: relative; }
.versal {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(5.5rem, 12vw, 10rem);
  line-height: .74;
  color: var(--rubric-mark);
  margin-left: -.06em;
  user-select: none;
}
.office__name {
  margin: .55rem 0 .5rem;
  font-size: var(--step--1);
  letter-spacing: .21em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
}
.office__body { min-width: 0; padding-top: .35rem; }
.relic { margin-top: clamp(1.4rem, 3vw, 2.1rem); max-width: 8.5rem; }
.relic img { width: 100%; border: 1px solid var(--rule); filter: saturate(.8) contrast(.96); }
.relic figcaption { margin-top: .5rem; font-size: var(--step--1); line-height: 1.45; color: var(--ink-soft); }

/* ---------- books ---------- */
.books { display: grid; gap: clamp(.9rem, 2vw, 1.2rem); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.book {
  background: var(--paper-lift);
  border: 1px solid var(--rule);
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.book--have { background: transparent; border-style: dashed; }
.book__title {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.12;
}
.book__by { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }
.book__links { margin: auto 0 0; padding-top: .5rem; display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: var(--step--1); }
.seal {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--step--1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--seal);
  font-weight: 500;
}
.seal svg { width: 1.05em; height: 1.05em; flex: none; }

/* ---------- films ---------- */
.films { display: grid; gap: clamp(1rem, 2.5vw, 1.6rem); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.film { display: block; text-decoration: none; color: inherit; }
.film__frame {
  display: block;
  position: relative;
  border: 1px solid var(--rule);
  background: var(--paper-sink);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.film__frame img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.82);
  transition: transform .5s cubic-bezier(.2,.6,.2,1), filter .4s ease;
}
.film:hover .film__frame img, .film:focus-visible .film__frame img { transform: scale(1.035); filter: saturate(1); }
.film__play {
  position: absolute; inset: auto auto .6rem .6rem;
  width: 2.05rem; height: 2.05rem; border-radius: 50%;
  background: var(--paper); color: var(--teal);
  display: grid; place-items: center;
  transition: transform .35s cubic-bezier(.2,.6,.2,1);
}
.film__play svg { width: .7rem; height: .7rem; margin-left: .1rem; }
.film:hover .film__play, .film:focus-visible .film__play { transform: scale(1.12); }
.film--lead { grid-column: 1 / -1; }
.film--lead .film__title { font-size: var(--step-2); }
.film__title {
  margin: .75rem 0 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.18;
  color: var(--teal);
}
.film:hover .film__title { text-decoration: underline; text-underline-offset: .16em; }
.film__meta { margin: .2rem 0 0; font-size: var(--step--1); color: var(--ink-soft); line-height: 1.45; }

/* ---------- episodes ---------- */
.season { margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }
.season:last-of-type { margin-bottom: 0; }
.season__head {
  display: flex; align-items: baseline; gap: .8rem;
  margin: 0 0 .85rem;
  font-size: var(--step--1);
  letter-spacing: .17em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
}
.season__head::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.season__head a { color: inherit; text-decoration-color: var(--rule); }
.season__head a:hover { color: var(--teal); }
.episodes {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: clamp(.7rem, 1.8vw, 1rem) clamp(1.2rem, 3vw, 2.2rem);
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
}
.episode { display: block; text-decoration: none; color: inherit; }
.episode__no {
  display: block;
  font-size: var(--step--1);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--rubric);
}
.episode__who {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--step-1);
  line-height: 1.16;
  color: var(--teal);
}
.episode:hover .episode__who, .episode:focus-visible .episode__who {
  text-decoration: underline; text-underline-offset: .14em;
}
.transcripts { margin: clamp(1.5rem, 3.5vw, 2rem) 0 0; font-size: var(--step--1); color: var(--ink-soft); }

/* ---------- attend ---------- */
.gatherings { display: grid; gap: clamp(.9rem, 2vw, 1.2rem); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 0; }
.gathering { background: var(--paper-lift); border: 1px solid var(--rule); padding: clamp(1.1rem, 2.5vw, 1.4rem); }
.gathering h3 {
  margin: 0 0 .35rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.16;
}
.gathering p { margin: 0; font-size: var(--step--1); color: var(--ink-soft); line-height: 1.55; }

/* ---------- the way of life ---------- */
.way {
  border-top: 1px solid var(--rule);
  padding-block: clamp(3rem, 8vw, 5.5rem);
  display: grid;
  gap: clamp(1.8rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}
.way__mark {
  width: clamp(13rem, 34vw, 21rem);
  aspect-ratio: 760 / 733;
  background-color: var(--teal);
  -webkit-mask: url(./img/oms-way.png) center / contain no-repeat;
  mask: url(./img/oms-way.png) center / contain no-repeat;
}
.way__words { max-width: 46ch; }
.way__words .rubric { margin-bottom: .55rem; }
.way__words p {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--step-1);
  line-height: 1.4;
}

/* ---------- colophon ---------- */
.colophon {
  border-top: 1px solid var(--rule);
  padding-block: clamp(2rem, 5vw, 3rem) clamp(3rem, 7vw, 4.5rem);
  font-size: var(--step--1);
  color: var(--ink-soft);
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.colophon p { margin: 0; max-width: 44ch; line-height: 1.65; }

@media (max-width: 44rem) {
  .office { grid-template-columns: 1fr; gap: 1.1rem; }
  .office__margin { display: flex; flex-wrap: wrap; align-items: baseline; gap: .7rem; }
  .versal { font-size: 3.6rem; line-height: .8; }
  .office__name { margin: 0; }
  .office__margin .rubric { flex-basis: 100%; }
  .masthead { flex-wrap: wrap; }
  .masthead__note { margin-left: 0; flex-basis: 100%; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============ shared nav (added with members/vows pages) ============ */
.masthead__nav {
  margin: 0 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: clamp(.9rem, 2.4vw, 1.7rem);
  font-size: var(--step--1);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.masthead__nav a { color: var(--ink-soft); text-decoration: none; }
.masthead__nav a:hover { color: var(--teal); }
.masthead__nav a[aria-current="page"] { color: var(--rubric); }
.masthead .masthead__note { margin-left: 0; }

/* page intro shared by the subpages */
.pagehead { padding-block: clamp(2.4rem, 7vw, 4.5rem) clamp(1.6rem, 4vw, 2.6rem); }
.pagehead h1 {
  margin: .5rem 0 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: var(--step-3);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--teal);
}
.pagehead p {
  margin: clamp(1.1rem, 2.5vw, 1.6rem) 0 0;
  max-width: 58ch;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--step-1);
  line-height: 1.4;
}

/* ============ members ============ */
.people { display: grid; gap: clamp(.9rem, 2vw, 1.15rem); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.person { background: var(--paper-lift); border: 1px solid var(--rule); padding: clamp(1rem, 2.2vw, 1.35rem); }
.person h3 {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.1;
}
.person__role {
  display: block;
  margin-top: .3rem;
  font-size: var(--step--1);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--teal);
}
.person p { margin: .6rem 0 0; font-size: var(--step--1); line-height: 1.6; color: var(--ink-soft); }
.person__since { display: block; margin-top: .55rem; font-size: var(--step--1); color: var(--rubric); font-style: italic; font-family: 'Cormorant Garamond', Georgia, serif; }

.namelist { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem clamp(1.2rem,3vw,2.2rem); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.namelist li { font-size: var(--step--1); line-height: 1.5; color: var(--ink-soft); }
.namelist b { font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--step-1); font-weight: 400; color: var(--ink); display: block; }

/* caution / caveat block */
.caveat {
  border-left: 2px solid var(--rubric-mark);
  padding: .1rem 0 .1rem 1.1rem;
  margin: clamp(1.1rem,2.5vw,1.5rem) 0 0;
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* ============ vows ============ */
.vow { border-top: 1px solid var(--rule); padding-block: clamp(1.6rem, 4vw, 2.4rem); }
.vow:first-of-type { border-top: 0; padding-top: 0; }
.vow__name {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.1;
  color: var(--teal);
}
.practices { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .8rem clamp(1.2rem,3vw,2rem); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.practices li { font-size: var(--step--1); line-height: 1.55; color: var(--ink-soft); }
.practices b {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--step-1);
  font-weight: 400;
  color: var(--ink);
}
.practices li::before {
  content: "";
  display: block;
  width: 1.4rem; height: 1px;
  background: var(--rubric-mark);
  margin-bottom: .5rem;
}

/* the ring inscription */
.inscription {
  margin: clamp(1.2rem,3vw,1.8rem) 0 0;
  padding: clamp(1.1rem,2.5vw,1.5rem);
  background: var(--paper-lift);
  border: 1px solid var(--rule);
  text-align: center;
}
.inscription .greek {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--step-2);
  letter-spacing: .06em;
  color: var(--teal);
  line-height: 1.25;
}
.inscription .gloss { display: block; margin-top: .5rem; font-size: var(--step--1); color: var(--ink-soft); font-style: italic; }

/* stepped path */
.path { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.path li {
  position: relative;
  padding: 0 0 1.1rem 2.6rem;
  border-left: 1px solid var(--rule);
  margin-left: .55rem;
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-soft);
}
.path li:last-child { border-left-color: transparent; padding-bottom: 0; }
.path li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: -.56rem; top: -.1rem;
  width: 1.15rem; height: 1.15rem;
  background: var(--paper); color: var(--rubric);
  border: 1px solid var(--rubric-mark); border-radius: 50%;
  font-size: .62rem; line-height: 1.05rem; text-align: center;
  font-family: 'Archivo', sans-serif;
}
.path b { font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--step-1); font-weight: 400; color: var(--ink); display: block; margin-bottom: .1rem; }

/* first-person accounts */
.accounts { display: grid; gap: clamp(.9rem,2vw,1.2rem); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.account { background: var(--paper-lift); border: 1px solid var(--rule); padding: clamp(1rem,2.2vw,1.35rem); }
.account h3 { margin: 0 0 .3rem; font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--step-1); font-weight: 400; line-height: 1.15; }
.account p { margin: .35rem 0 0; font-size: var(--step--1); line-height: 1.6; color: var(--ink-soft); }
.account .who { font-size: var(--step--1); color: var(--rubric); font-style: italic; font-family: 'Cormorant Garamond', Georgia, serif; }

/* section-mark versal (§) — has a descender, unlike the R/W/L/A letterforms */
.versal--mark { font-size: clamp(4rem, 8vw, 6.5rem); line-height: 1.05; }