@font-face { font-family: "CLC Serif"; src: url("fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "CLC Serif"; src: url("fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --green: #565533; --ivory: #f2eee2; --muted: #dedac8; --rule: rgba(242,238,226,.25);
  --serif: "CLC Serif", Georgia, "Times New Roman", serif;
  --utility: Arial, Helvetica, sans-serif;
  color-scheme: dark; scroll-behavior: smooth;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--green); color: var(--ivory); font-family: var(--serif); font-weight: 400; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; text-underline-offset: .25em; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 1px solid var(--ivory); outline-offset: 7px; }
h1, h2, p { margin: 0; font-weight: 400; }
h2:focus { outline: none; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--ivory); color: var(--green); }

.skip-link { position: absolute; top: -80px; left: 22px; z-index: 30; background: var(--ivory); color: var(--green); font: 14px/1.4 var(--utility); padding: 12px 18px; }
.skip-link:focus { top: 16px; }

.site-header, .menu-header { position: relative; width: calc(100% - 96px); max-width: 1488px; min-height: 150px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.brand { display: block; width: 300px; }
.menu-toggle, .menu-close { position: absolute; right: 0; top: 53px; width: 44px; height: 44px; padding: 11px 7px; background: transparent; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; color: var(--ivory); }
.menu-toggle span, .menu-close span { display: block; width: 28px; height: 1px; background: var(--ivory); }
.menu-close span { position: absolute; transform: rotate(45deg); }
.menu-close span:last-child { transform: rotate(-45deg); }

/* Landing */
.home { position: relative; min-height: max(700px, calc(100svh - 150px)); display: flex; align-items: center; justify-content: center; padding: 0 24px 110px; text-align: center; }
.home-composition { display: flex; flex-direction: column; align-items: center; width: 100%; }
.hero-art { width: min(560px, 84vw); margin: 0 auto 18px; }
clc-motion { --clc-motion-color: #f2eee2; --clc-motion-opacity: .9; display: block; width: 100%; aspect-ratio: 1 / 1; }
h1 { font-size: 34px; line-height: 1.25; letter-spacing: -.01em; white-space: nowrap; }
.established { font-size: 20px; line-height: 1.4; margin-top: 14px; color: var(--muted); }
.scroll-link { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; font: 25px/1 Georgia, serif; color: var(--muted); }
.scroll-link:hover { text-decoration: none; color: var(--ivory); }

/* Text pages */
.text-page { position: relative; display: flex; align-items: center; justify-content: center; padding: 140px 28px; text-align: center; }
.text-page::before { content: ""; position: absolute; top: 0; left: 50%; width: 64px; height: 1px; transform: translateX(-50%); background: var(--rule); }
.page-copy { width: 100%; max-width: 720px; margin: 0 auto; }
.page-label { font: 11px/1.5 var(--utility); text-transform: uppercase; letter-spacing: .18em; margin-bottom: 36px; color: var(--muted); }
.text-page h2 { font-size: 34px; line-height: 1.28; letter-spacing: -.01em; }
.body-copy { font-size: 24px; line-height: 1.5; margin-top: 26px; }
.body-copy + .body-copy { margin-top: 20px; }
.section-link { display: inline-block; margin-top: 34px; font-size: 21px; line-height: 1.4; text-decoration: underline; text-decoration-color: rgba(242,238,226,.35); }
.section-link:hover { text-decoration-color: var(--ivory); }

/* Ethos */
.ethos-layout { width: 100%; max-width: 1220px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; }
.ethos-layout h2 { font-size: 32px; line-height: 1.3; }
.ethos-art { position: relative; width: min(540px, 100%); aspect-ratio: 1 / 1; margin: auto; font: 500 13px/1.35 var(--serif); letter-spacing: .12em; text-transform: uppercase; }
.ethos-art span { position: absolute; width: 36%; height: 36%; border-radius: 50%; border: 1px solid rgba(242,238,226,.3); display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 5%; }
.ethos-art .centre { left: 35%; top: 35%; width: 30%; height: 30%; border-color: rgba(242,238,226,.55); font-size: 15px; letter-spacing: .16em; }
.ethos-art .p1 { left: 32%; top: 1%; } .ethos-art .p2 { left: 58.85%; top: 16.5%; } .ethos-art .p3 { left: 58.85%; top: 47.5%; }
.ethos-art .p4 { left: 32%; top: 63%; } .ethos-art .p5 { left: 5.15%; top: 47.5%; } .ethos-art .p6 { left: 5.15%; top: 16.5%; }

/* Connect */
.connect-page { min-height: 520px; }
.connect-page h2 { font-size: 26px; }
.contact-link { display: inline-block; margin-top: 26px; font-size: 23px; line-height: 1.4; text-decoration: underline; text-decoration-color: rgba(242,238,226,.35); overflow-wrap: anywhere; }
.contact-link:hover { text-decoration-color: var(--ivory); }

.site-footer { width: calc(100% - 96px); max-width: 1488px; margin: 0 auto; padding: 27px 0 30px; display: flex; justify-content: space-between; align-items: center; gap: 26px; border-top: 1px solid var(--rule); font: 11px/1.5 var(--utility); letter-spacing: .03em; color: var(--muted); }
.site-footer a { flex-shrink: 0; }

/* Menu */
.site-menu { position: fixed; inset: 0; width: 100%; max-width: none; height: 100svh; max-height: none; margin: 0; padding: 0; background: var(--green); color: var(--ivory); border: 0; overflow: auto; }
.site-menu::backdrop { background: var(--green); }
.site-menu nav { min-height: calc(100svh - 150px); padding: 30px 24px 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; }
.site-menu nav a { font-size: 36px; line-height: 1.25; letter-spacing: -.02em; padding: 3px 12px; }

@media (max-width: 850px) {
  .ethos-layout { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 700px) {
  .site-header, .menu-header { width: calc(100% - 44px); min-height: 136px; }
  .brand { width: 220px; }
  .menu-toggle, .menu-close { top: 46px; }
  .home { min-height: max(600px, calc(100svh - 136px)); padding: 0 22px 90px; }
  .hero-art { width: 86vw; }
  h1 { font-size: 27px; }
  .established { font-size: 18px; }
  .scroll-link { bottom: 20px; }
  .text-page { padding: 100px 24px; }
  .page-label { margin-bottom: 30px; }
  .text-page h2 { font-size: 27px; line-height: 1.32; }
  .ethos-layout h2 { font-size: 26px; }
  .body-copy { font-size: 21px; margin-top: 22px; }
  .section-link { font-size: 19px; }
  .ethos-art { font-size: 10px; letter-spacing: .08em; }
  .ethos-art .centre { font-size: 11px; }
  .connect-page h2 { font-size: 23px; }
  .contact-link { font-size: 21px; }
  .site-footer { width: calc(100% - 44px); font-size: 10px; align-items: flex-end; }
  .site-menu nav { min-height: calc(100svh - 136px); padding-bottom: 136px; gap: 24px; }
  .site-menu nav a { font-size: 31px; }
}
@media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; } }