:root{
  --bg:#0b0806;
  --bg-raised:#15100a;
  --fg:#f2e8d8;
  --fg-dim:#b8a88f;
  --fg-faint:#7d7160;
  --accent:#c68a3d;
  --accent-bright:#e8ad5c;
  --line:rgba(242,232,216,0.14);
  --line-strong:rgba(242,232,216,0.28);
  --serif:"Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans:"Jost", "Century Gothic", "Futura", Avenir, sans-serif;
}

*{box-sizing:border-box;}
html{background:var(--bg);}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  margin:0;
  padding-inline:0;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--accent);color:var(--bg);}

a{color:inherit;text-decoration:none;}

main{
  max-width:640px;
  margin-inline:auto;
  padding-inline:24px;
}

/* ---------- top bar ---------- */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding-block:24px 0;
  flex-wrap:wrap;
}
.mainnav{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}
.mainnav a{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--fg-faint);
  padding-block:8px;
  border-bottom:1px solid transparent;
  transition:color 0.2s ease, border-color 0.2s ease;
}
.mainnav a:hover, .mainnav a:focus-visible, .mainnav a[aria-current="page"]{
  color:var(--accent-bright);
  border-bottom-color:var(--line-strong);
}
.lang-toggle{
  display:flex;
  gap:2px;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:0.12em;
  color:var(--fg-faint);
}
.lang-toggle button{
  background:none;
  border:none;
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  cursor:pointer;
  padding:8px 6px;
  line-height:1;
}
.lang-toggle button[aria-current="true"]{color:var(--accent-bright);}
.lang-toggle span{color:var(--line-strong);padding-block:8px;}

/* ---------- hero (home only) ---------- */
.hero{
  position:relative;
  padding-block:min(12vh, 84px) 8px;
  text-align:center;
}
.hero::before{
  content:"";
  position:absolute;
  left:50%;
  top:46%;
  transform:translate(-50%, -50%);
  width:min(820px, 88vw);
  aspect-ratio:760/816;
  background-image:url('texture.webp');
  background-size:cover;
  background-position:center;
  opacity:0.5;
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse 60% 58% at center, black 40%, transparent 76%);
  mask-image:radial-gradient(ellipse 60% 58% at center, black 40%, transparent 76%);
  pointer-events:none;
  z-index:0;
}
.hero-content{
  position:relative;
  z-index:1;
}
h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(52px, 13vw, 92px);
  letter-spacing:0.16em;
  margin:0;
  color:var(--fg);
  text-wrap:balance;
}
.fullname{
  font-family:var(--sans);
  font-weight:400;
  font-size:14px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--fg-dim);
  margin:16px 0 0;
  text-wrap:balance;
}
.rule{
  width:56px;
  height:1px;
  background:var(--line-strong);
  margin:28px auto;
  border:none;
}
.lede{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(19px, 4.6vw, 25px);
  line-height:1.5;
  color:var(--fg);
  max-width:30em;
  margin:0 auto;
  text-wrap:balance;
}

.mission{
  font-family:var(--sans);
  font-weight:300;
  font-size:15px;
  line-height:1.75;
  color:var(--fg-dim);
  max-width:30em;
  margin:34px auto 0;
  text-wrap:balance;
}

.phase-tag{
  display:inline-block;
  margin-top:38px;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--fg-faint);
  border:1px solid var(--line);
  border-radius:2px;
  padding:7px 14px;
}

/* ---------- page header (interior pages) ---------- */
.page-header{
  position:relative;
  padding-block:min(9vh, 56px) 8px;
  text-align:center;
}
.page-header .eyebrow{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--fg-faint);
  margin:0 0 18px;
}
.page-header h1{
  font-size:clamp(36px, 9vw, 52px);
  letter-spacing:0.08em;
}
.page-header .lede{
  margin-top:24px;
}

/* ---------- about / body copy blocks ---------- */
.about{
  position:relative;
  z-index:1;
  margin-top:min(10vh, 64px);
  padding-top:38px;
  border-top:1px solid var(--line);
  text-align:center;
}
.about-label{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--fg-faint);
  margin:0 0 16px;
}
.about-text{
  font-family:var(--sans);
  font-weight:300;
  font-size:15px;
  line-height:1.75;
  color:var(--fg-dim);
  max-width:32em;
  margin:0 auto;
  text-wrap:balance;
}
.about-text + .about-text{margin-top:18px;}
.about-more{
  display:inline-block;
  margin-top:22px;
  font-family:var(--serif);
  font-style:italic;
  font-size:15px;
  color:var(--accent-bright);
  border-bottom:1px solid var(--line-strong);
  padding-bottom:2px;
}
.about-more:hover, .about-more:focus-visible{color:var(--accent);}

/* ---------- programs list ---------- */
.programs{
  margin-top:min(10vh, 64px);
  padding-top:38px;
  border-top:1px solid var(--line);
}
.program{
  padding-block:20px;
  border-bottom:1px solid var(--line);
  text-align:center;
}
.program:last-child{border-bottom:none;}
.program-name{
  font-family:var(--serif);
  font-size:clamp(19px, 4.2vw, 23px);
  color:var(--fg);
  margin:0 0 8px;
}
.program-desc{
  font-family:var(--sans);
  font-weight:300;
  font-size:14px;
  line-height:1.7;
  color:var(--fg-dim);
  max-width:30em;
  margin:0 auto;
}

/* ---------- institutional / legal block ---------- */
.legal{
  margin-top:min(10vh, 64px);
  padding-top:38px;
  border-top:1px solid var(--line);
  text-align:center;
}
.legal-row{
  padding-block:14px;
  border-bottom:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:4px;
}
.legal-row:last-child{border-bottom:none;}
.legal-key{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--fg-faint);
}
.legal-value{
  font-family:var(--sans);
  font-weight:300;
  font-size:15px;
  color:var(--fg);
  line-height:1.6;
}

/* ---------- channels ---------- */
.channels{
  margin-top:min(10vh, 64px);
  border-top:1px solid var(--line);
}
.channels.no-border-top{border-top:none;margin-top:min(8vh, 48px);}
.channel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-block:22px;
  border-bottom:1px solid var(--line);
  transition:padding-inline-start 0.25s ease;
}
a.channel{cursor:pointer;}
a.channel:hover, a.channel:focus-visible{
  padding-inline-start:8px;
  border-bottom-color:var(--line-strong);
}
a.channel:focus-visible{outline:1px solid var(--accent);outline-offset:4px;}
.channel-left{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
}
.channel-icon{
  flex:0 0 auto;
  width:20px;
  height:20px;
  color:var(--fg-faint);
  transition:color 0.25s ease;
}
.channel-icon svg{display:block;width:100%;height:100%;}
a.channel:hover .channel-icon, a.channel:focus-visible .channel-icon{color:var(--accent-bright);}
.channel-label{
  font-family:var(--serif);
  font-size:clamp(19px, 4.2vw, 23px);
  color:var(--fg);
}
a.channel:hover .channel-label, a.channel:focus-visible .channel-label{color:var(--accent-bright);}
.channel-meta{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:0.04em;
  color:var(--fg-faint);
  white-space:nowrap;
}
.channel-arrow{
  font-family:var(--serif);
  font-style:italic;
  color:var(--fg-faint);
  font-size:20px;
  transition:transform 0.25s ease, color 0.25s ease;
}
a.channel:hover .channel-arrow, a.channel:focus-visible .channel-arrow{
  color:var(--accent-bright);
  transform:translateX(4px);
}
.channel-row{display:flex;flex-direction:column;gap:3px;}

/* ---------- colophon ---------- */
footer{
  padding-block:56px 48px;
  text-align:center;
}
.colophon{
  font-family:var(--sans);
  font-weight:300;
  font-size:12px;
  line-height:1.9;
  letter-spacing:0.02em;
  color:var(--fg-faint);
}
.colophon strong{
  color:var(--fg-dim);
  font-weight:400;
  letter-spacing:0.08em;
}
.colophon .colophon-legal{
  display:block;
  margin-top:10px;
  font-size:11px;
  color:var(--fg-faint);
}

@media (prefers-reduced-motion: reduce){
  .channel, .channel-arrow, .channel-label{transition:none;}
}

@media (max-width:420px){
  .channel{align-items:flex-start;}
  .channel-meta{font-size:11px;}
  .topbar{justify-content:center;text-align:center;}
}