/* Moses Michael Hays Lodge, A. F. & A. M. — shared template stylesheet
   Tokens are provisional per project record; revise here only. */

/* ---------- Self-hosted type system ---------- */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal; font-weight: 300; font-display: swap;
  src: url('/assets/fonts/jost-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/jost-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/jost-latin-500-normal.woff2') format('woff2');
}

/* ---------- Tokens ---------- */

:root {
  --navy:  #0C246C;   /* seal navy — wordmark, page titles, headings */
  --wash:  #DFE3F5;   /* light-blue wash — structural bands */
  --wash-pale: #EEF1FA; /* paler derivative — footer field */
  --gold:  #FCB424;   /* decoration only */
  --ink:   #000000;   /* all body text */
  --muted: #4A4F5C;   /* captions, secondary lines */
  --rule:  #C9D0E4;   /* hairlines derived from the wash */
  --frame: rgba(12, 36, 108, .26); /* portrait mat hairline */
  --paper: #FFFFFF;

  --track-label: .3em;   /* uppercase label register: nav, kicker, footer headings */
  --track-meta:  .14em;  /* secondary meta register: captions, names, legal line */

  --display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI',
          Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.78;
}

::selection { background: var(--wash); }

/* Content container: 90% of the viewport, centered, no fixed pixel widths. */
.container {
  width: 90%;
  margin-inline: auto;
}

a { color: var(--navy); text-underline-offset: .18em; }
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: var(--paper);
  padding: .5rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---------- Header: centered wordmark above a capitalized, letter-spaced
   navigation row (Baccarat model). Full viewport width; hairline below. */

.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.masthead {
  text-align: center;
  padding: clamp(2.2rem, 4vw, 3.4rem) 0 1.4rem;
}
.wordmark {
  font-family: var(--display);
  font-weight: 500;
  color: var(--navy);
  font-size: clamp(1.35rem, 3vw, 2.05rem);
  letter-spacing: .34em;
  text-indent: .34em; /* balances the trailing letter-space */
  margin: 0;
}
.wordmark a {
  color: inherit;
  text-decoration: none;
}
.masthead-rule {
  width: 1.6rem;
  height: 1px;
  background: var(--gold); /* decoration */
  border: 0;
  margin: 1.05rem auto .95rem;
}
.wordmark-ribbon {
  display: inline-block;
  margin: 0;
  background: var(--navy);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .26em;
  text-indent: .26em;
  line-height: 1;
  padding: .6em 2.2em .55em;
  clip-path: polygon(0 0, 100% 0, calc(100% - .95em) 50%, 100% 100%, 0 100%, .95em 50%);
}

.site-nav ul.nav-row {
  list-style: none;
  margin: 0;
  padding: .3rem 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 3rem;
}
.nav-item { position: relative; }

.nav-link,
.nav-trigger {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .74rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: 0;
  padding: .6rem 0 .95rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s ease;
}
.nav-link:hover,
.nav-trigger:hover { color: var(--navy); }
.nav-item.is-current > .nav-link,
.nav-item.is-current > .nav-trigger {
  border-bottom-color: var(--gold); /* decoration */
}
.nav-trigger::after {
  content: "\25BE"; /* small down triangle */
  font-size: .58em;
  margin-left: .55em;
  color: var(--muted);
}

.dropdown {
  position: absolute;
  left: 50%;
  top: 100%;
  min-width: 13.5rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--navy);
  padding: .55rem 0;
  margin: 0;
  list-style: none;
  z-index: 50;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav-item.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.dropdown a {
  display: block;
  padding: .6rem 1.6rem;
  font-family: var(--sans);
  font-weight: 400;
  font-size: .74rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.dropdown a:hover { background: var(--wash-pale); color: var(--navy); }
.dropdown a[aria-current="page"] { color: var(--navy); font-weight: 500; }

/* ---------- Title band (in place of the Home hero on interior pages) */

.title-band {
  background: var(--wash);
}
.title-band .container {
  padding: clamp(3.2rem, 4vw, 4rem) 0 clamp(2.8rem, 3vw, 3.2rem);
}
.page-kicker {
  font-family: var(--sans);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
}
.page-title {
  font-family: var(--display);
  color: var(--navy);
  font-weight: 500;
  font-size: clamp(2.3rem, 4.6vw, 3.4rem);
  letter-spacing: .01em;
  line-height: 1.08;
  margin: 0 0 1.15rem;
}
.title-rule {
  width: 3.5rem;
  height: 2px;
  background: var(--gold); /* decoration */
  border: 0;
  margin: 0;
}

/* ---------- Main content */

main .container { padding: clamp(3.2rem, 6vw, 5.8rem) 0 clamp(3.8rem, 7vw, 6.8rem); }

.prose p {
  margin: 0 0 1.4rem;
}
.prose p:last-child { margin-bottom: 0; }

.prose a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.prose a:hover { text-decoration: none; }

/* Opening initial on the biographical essay only. */
.prose--essay > p:first-of-type::first-letter {
  font-family: var(--display);
  font-weight: 500;
  color: var(--navy);
  font-size: 3.55em;
  line-height: .78;
  float: left;
  padding: .1em .14em 0 0;
}

/* Embedded instrument (calendar) seated in the hairline mat. */
.embed-plate {
  padding: .55rem;
  border: 1px solid var(--frame);
  background: var(--paper);
  margin: 2.2rem 0 .9rem;
}
.embed-plate iframe {
  display: block;
  width: 100%;
  height: 600px;
  border: 1px solid var(--rule);
  background: #fff;
}
.embed-plate.embed-form iframe {
  height: 1400px;
}
.embed-note {
  font-family: var(--sans);
  font-size: .78rem;
  color: var(--muted);
  letter-spacing: var(--track-meta);
  text-align: center;
  margin: .75rem 0 0;
}

/* Officers: the Master's full-width primacy. */
.officer-lead {
  border: 1px solid var(--frame);
  background: var(--paper);
  padding: 1.5rem 1rem 1.4rem;
  text-align: center;
  margin: 0 0 2.4rem;
}
.officer-lead .station {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .74rem;
  letter-spacing: var(--track-label);
  color: var(--muted);
  margin-bottom: .55rem;
}
.officer-lead .name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.7rem;
  color: var(--navy);
}

/* Officers: eighteen stations as twin stacks. */
.officer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 3.2rem;
}
.container-ledger { max-width: 64rem; margin-inline: auto; }
.officer-grid dl { margin: 0; }
.officer-grid .pair {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .58rem 0;
  border-bottom: 1px solid var(--rule);
}
.officer-grid dt {
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--muted);
}
.officer-grid dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.02rem;
  text-align: right;
}
@media (max-width: 720px) {
  .officer-grid { grid-template-columns: 1fr; gap: 0; }
}

/* Letter-spaced heading band for honor sections and the roll. */
.roll-head {
  font-family: var(--sans);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: var(--track-label);
  color: var(--navy);
  border-bottom: 1px solid var(--frame);
  padding-bottom: .55rem;
  margin: 2.7rem 0 1rem;
}
.honor-list { list-style: none; margin: 0; padding: 0; }
.honor-list li {
  padding: .5rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: 1.02rem;
}
.roll-legend {
  font-family: var(--sans);
  font-size: .78rem;
  color: var(--muted);
  letter-spacing: var(--track-meta);
  margin: 0 0 1.1rem;
}
table.roll { width: 100%; border-collapse: collapse; }
table.roll td {
  padding: .46rem 0;
  border-bottom: 1px solid var(--rule);
}
table.roll td.pm { font-family: var(--serif); font-size: .99rem; }
table.roll td.yr {
  font-family: var(--sans);
  font-size: .85rem;
  color: #333;
  text-align: right;
  white-space: nowrap;
}

/* Leading plate: a full-width framed image heading an essay page. */
.figure-plate {
  margin: 0 0 2.6rem;
}
.figure-plate picture {
  display: block;
  padding: .55rem;
  border: 1px solid var(--frame);
  background: var(--paper);
}
.figure-plate img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
}
.figure-plate figcaption {
  text-align: center;
  font-family: var(--sans);
  font-weight: 400;
  font-size: .78rem;
  color: var(--muted);
  letter-spacing: var(--track-meta);
  margin-top: .75rem;
}

/* Portrait figure: right-aligned beside the opening paragraphs at roughly
   one third of the container on wide screens; stacks above the prose on
   smaller screens. Hairline mat, centered caption. */
.figure-portrait {
  float: right;
  width: 33%;
  margin: .35rem 0 1.3rem 2.6rem;
}
.figure-portrait picture {
  display: block;
  padding: .55rem;
  border: 1px solid var(--frame);
  background: var(--paper);
}
.figure-portrait img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
}
.figure-portrait figcaption {
  text-align: center;
  font-family: var(--sans);
  font-weight: 400;
  font-size: .78rem;
  color: var(--muted);
  letter-spacing: var(--track-meta);
  margin-top: .75rem;
}

.section-note {
  color: var(--muted);
  font-style: italic;
}

@media (max-width: 45em) {
  .masthead { padding: 2.2rem 0 1.1rem; }
  .wordmark { letter-spacing: .22em; text-indent: .22em; }
  .site-nav ul.nav-row { gap: 0 1.5rem; }
  .figure-portrait {
    float: none;
    width: 100%;
    max-width: 24rem;
    margin: 0 auto 1.8rem;
  }
}

/* ---------- Footer (Grand Lodge model): muted full-width band with emblem,
   institutional paragraph, address, link columns. */

.site-footer {
  background: var(--wash-pale);
  border-top: 1px solid var(--rule);
  font-size: .92rem;
}
.site-footer .footer-grid {
  padding: clamp(3rem, 5vw, 4.4rem) 0 2.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem 4rem;
}
.footer-id { flex: 1 1 22rem; }
.footer-emblem {
  width: 100px;
  height: 100px;
  margin-bottom: 1.1rem;
}
.footer-name {
  font-family: var(--display);
  font-weight: 600;
  color: var(--navy);
  font-size: 1.12rem;
  letter-spacing: var(--track-meta);
  margin: 0 0 .5rem;
}
.footer-ribbon {
  font-size: .62rem;
  margin: 0 0 1.1rem;
  background: var(--navy); /* paints only as the hairline stroke */
  color: var(--navy);
  position: relative;
  z-index: 0;
}
.footer-ribbon::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: var(--paper);
  clip-path: polygon(0 0, 100% 0, calc(100% - .93em) 50%, 100% 100%, 0 100%, .93em 50%);
}
.footer-id p { margin: 0 0 .55rem; color: var(--muted); font-weight: 300; }
.footer-id address { font-style: normal; color: var(--muted); font-weight: 300; }

.footer-col { flex: 0 1 11rem; }
.footer-col h2 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--navy);
  margin: .25rem 0 .95rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin: 0 0 .5rem; }
.footer-col a {
  color: var(--ink);
  font-weight: 300;
  text-decoration: none;
  transition: color .15s ease;
}
.footer-col a:hover { color: var(--navy); text-decoration: underline; }

.footer-legal {
  border-top: 1px solid var(--rule);
}
.footer-legal .container {
  padding: 1.1rem 0 1.3rem;
  text-align: center;
  color: var(--muted);
  font-weight: 300;
  font-size: .78rem;
  letter-spacing: var(--track-meta);
}

/* ---------- Banked components (adopted from the Baccarat review; not yet
   placed on any page — reserved for the Home and Contact stages). */

.btn-lodge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  padding: 0 2.1rem;
  border: 1px solid var(--navy);
  background: transparent;
  color: var(--navy);
  font-family: var(--sans);
  font-weight: 500;
  font-size: .74rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease-in-out, color .15s ease-in-out;
}
.btn-lodge:hover { background: var(--wash-pale); }

.hero {
  position: relative;
  overflow: hidden;
}
.hero img,
.hero video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-heading {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: clamp(2rem, 5vw, 4rem) 5%;
  color: #fff;
}
.hero-heading--center {
  bottom: 50%;
  transform: translateY(50%);
  text-align: center;
}
.hero--light .hero-heading { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Social mark in the footer's outward column. */
.footer-social {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.footer-social img {
  width: 18px;
  height: 18px;
  display: block;
}

/* Closing plate: a centered, capped figure sealing an essay. */
.figure-close {
  max-width: 400px;
  margin: 2.4rem auto .4rem;
}
.figure-close picture {
  display: block;
  padding: .55rem;
  border: 1px solid var(--frame);
  background: var(--paper);
}
.figure-close img {
  display: block;
  width: 100%;
  height: auto;
}
.figure-close figcaption {
  text-align: center;
  font-family: var(--sans);
  font-weight: 400;
  font-size: .78rem;
  color: var(--muted);
  letter-spacing: var(--track-meta);
  margin-top: .75rem;
}

/* Emblem device crowning an essay. */
.emblem-figure {
  max-width: 210px;
  margin: .4rem auto 2.4rem;
  text-align: center;
}
.emblem-figure img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.emblem-figure figcaption {
  font-family: var(--sans);
  font-weight: 400;
  font-size: .78rem;
  color: var(--muted);
  letter-spacing: var(--track-meta);
  margin-top: .9rem;
}

/* Home: full-bleed hero across three framings. */
.hero img { display: block; width: 100%; height: auto; }

/* Home: distilled introduction. */
.home-intro { text-align: center; padding: 3rem 0 .6rem; }
.home-title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  color: var(--navy); margin: 0 0 1.2rem;
}
.home-lead { max-width: 62ch; margin: 0 auto; font-size: 1.06rem; line-height: 1.75; }

/* Home: destination tiles. */
.tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin: 2.8rem 0 2.2rem; }
.tile {
  display: block; border: 1px solid var(--frame); background: var(--paper);
  padding: 1.3rem 1.15rem 1.2rem; text-decoration: none;
  transition: border-color .18s ease;
}
.tile:hover, .tile:focus-visible { border-color: var(--navy); }
.tile h2 {
  font-family: var(--sans); font-weight: 500; font-size: .8rem;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--navy); margin: 0 0 .55rem;
}
.tile p { font-family: var(--serif); font-size: .96rem; line-height: 1.55; color: #1a1a1a; margin: 0; }
@media (max-width: 1000px) { .tile-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .tile-grid { grid-template-columns: 1fr; } }

/* Home: the single call. */
.home-cta { text-align: center; margin: 0 0 3.6rem; }
.btn-lodge {
  display: inline-block; border: 1px solid var(--navy);
  color: var(--navy); background: transparent;
  font-family: var(--sans); font-weight: 500; font-size: .8rem;
  letter-spacing: var(--track-label); text-transform: uppercase;
  padding: .85rem 1.7rem; text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.btn-lodge:hover, .btn-lodge:focus-visible { background: var(--navy); color: #fff; }

/* Not-found poster. */
.notfound-figure { max-width: 400px; margin: 2.6rem auto 1.6rem; }
.notfound-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--frame); }
.notfound-line {
  text-align: center;
  font-family: var(--serif);
  font-size: 1.08rem;
  margin: 0 0 1.6rem;
}