@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root{
  --ink:#1c1a17;
  --ink-deep:#131210;
  --parchment:#f6f1e6;
  --paper:#fbf8f1;
  --line:#ddd4bd;
  --line-soft:#e8e1cf;
  --gold:#95742c;
  --gold-soft:#c9ad6f;
  --burgundy:#6f2430;
  --muted:#6c6455;
  --muted-on-dark:#b9b2a0;
  --display:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --serif:'EB Garamond', Georgia, 'Times New Roman', serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--parchment);
  color:var(--ink);
  font-family:var(--serif);
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
::selection{background:var(--gold-soft);color:var(--ink)}

.chapter{
  font:500 13px/1 var(--serif);
  color:var(--gold);
  letter-spacing:.02em;
  margin:0 0 22px;
}
.numeral{font-family:var(--display);font-style:italic;margin-right:.35em}

/* header */
.header{
  position:fixed;top:0;left:0;right:0;z-index:30;
  background:rgba(246,241,230,.92);
  backdrop-filter:blur(10px);
}
.header-inner{
  max-width:1240px;margin:auto;
  padding:22px 6vw;
  display:flex;align-items:center;gap:40px;
}
.header-rule{height:1px;background:var(--line);margin:0 6vw}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand img{width:34px;height:48px;object-fit:contain}
.brand span{display:flex;flex-direction:column;line-height:1.1}
.brand b{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:.04em}
.brand small{font-size:10px;letter-spacing:.14em;color:var(--muted);margin-top:5px;font-variant:small-caps}
.header nav{display:flex;gap:34px;margin:0 auto;font-size:14px;font-style:italic;font-family:var(--display);font-weight:500}
.header nav a{color:#4d493f;border-bottom:1px solid transparent;padding-bottom:2px}
.header nav a:hover{color:var(--ink);border-color:var(--gold-soft)}
.contact-link{
  font-family:var(--serif);font-size:12px;letter-spacing:.06em;
  border-bottom:1px solid var(--ink);padding-bottom:3px;white-space:nowrap;
}
.menu{
  display:none;margin-left:auto;border:1px solid var(--line);background:none;
  font:12px var(--serif);letter-spacing:.08em;padding:8px 14px;color:var(--ink);
}

/* hero */
.hero{
  position:relative;overflow:hidden;
  min-height:100vh;max-height:960px;min-height:720px;
  display:flex;align-items:center;justify-content:center;
  padding:150px 8vw 90px;text-align:center;
}
.hero-watermark{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.hero-watermark img{
  width:min(58vw,640px);height:auto;
  filter:grayscale(1) sepia(.15);
  opacity:.07;
  mix-blend-mode:multiply;
}
.hero-inner{position:relative;z-index:2;max-width:720px}
.hero .kicker{
  font:italic 500 17px/1 var(--display);color:var(--gold);margin:0 0 26px;
}
.hero h1{
  font:400 clamp(46px,6.4vw,80px)/1.04 var(--display);
  letter-spacing:.005em;margin:0 0 30px;
}
.hero h1 em{font-style:italic;font-weight:500;color:inherit}
.rule{width:52px;height:1px;background:var(--gold);margin:0 auto 30px}
.hero .intro{
  font-size:17px;line-height:1.8;color:#524c40;max-width:520px;margin:0 auto 40px;
}
.button{
  display:inline-block;font:14px var(--serif);letter-spacing:.03em;
  border-bottom:1px solid var(--ink);padding-bottom:4px;
}
.button:hover{color:var(--burgundy);border-color:var(--burgundy)}

@media (prefers-reduced-motion:no-preference){
  .hero-inner{animation:rise .9s ease .1s both}
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* shared section rhythm */
section{padding:130px 8vw}
.section-head{max-width:640px;margin:0 auto 64px;text-align:center}
.section-head h2{font:400 clamp(34px,4.2vw,54px)/1.15 var(--display);margin:0}

/* legacy */
.legacy{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.legacy-grid{
  max-width:1160px;margin:auto;
  display:grid;grid-template-columns:.9fr 1.1fr;gap:9vw;align-items:start;
}
.legacy-grid h2{font:400 clamp(36px,4.4vw,58px)/1.16 var(--display);margin:6px 0 0}
.lede{font:italic 500 24px/1.5 var(--display);color:var(--ink);max-width:520px;margin:0 0 24px}
.legacy-copy p:last-child{color:var(--muted);font-size:16px;max-width:480px}

/* principles */
.principles{background:var(--parchment)}
.principle-grid{
  max-width:1160px;margin:auto;
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.principle-grid article{padding:36px 30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.principle-grid h3{font:400 27px var(--display);margin:0 0 12px;font-weight:600}
.principle-grid p{font-size:14px;line-height:1.85;color:var(--muted);margin:0}

/* focus */
.focus{background:var(--paper);text-align:center;border-bottom:1px solid var(--line)}
.focus-copy{
  font:italic 400 22px/1.65 var(--display);color:var(--muted);
  max-width:640px;margin:0 auto;
}

/* outlook (dark) */
.outlook{
  background:var(--ink-deep);color:var(--parchment);
  display:grid;grid-template-columns:1.05fr .95fr;gap:6vw;align-items:center;
  position:relative;overflow:hidden;
}
.outlook-copy{position:relative;z-index:2;max-width:540px}
.outlook h2{font:400 clamp(34px,4.2vw,54px)/1.18 var(--display);margin:0 0 26px;color:var(--parchment)}
.outlook > .outlook-copy > p:not(.chapter){font-size:15px;line-height:1.95;color:var(--muted-on-dark);margin:0 0 46px}
.outlook-steps{display:flex;gap:52px}
.outlook-steps div{display:flex;flex-direction:column;gap:10px}
.outlook-steps .roman{font:italic 500 20px var(--display);color:var(--gold-soft)}
.outlook-steps p{margin:0;font-size:13px;letter-spacing:.05em;color:var(--parchment);font-variant:small-caps}
.outlook-mark{position:relative;height:100%;min-height:360px}
.outlook-mark svg{position:absolute;right:-6%;top:50%;transform:translateY(-50%);width:min(92%,520px);height:auto}

/* statement */
.statement{background:var(--paper);text-align:center;border-bottom:1px solid var(--line)}
.statement .flourish{color:var(--gold);font-size:13px;letter-spacing:.3em;margin:0 0 26px}
.statement .statement-lede{font:italic 400 20px var(--display);color:var(--muted);margin:0 0 8px}
.statement h2{font:400 clamp(34px,5vw,60px)/1.2 var(--display);margin:12px auto 0;max-width:760px}

/* correspondence */
.correspondence{
  background:var(--parchment);
  display:grid;grid-template-columns:.9fr 1.1fr;gap:9vw;
}
.correspondence-intro h2{font:400 clamp(34px,4.2vw,54px)/1.18 var(--display);margin:6px 0 0}
.correspondence-box{border-top:1px solid var(--line);padding-top:26px;align-self:center}
.correspondence-box p{font-size:15px;color:var(--muted);max-width:440px;margin:0 0 26px}
.mail-link{
  display:inline-block;font:400 26px var(--display);
  border-bottom:1px solid var(--gold-soft);padding-bottom:6px;
}
.mail-link:hover{color:var(--burgundy);border-color:var(--burgundy)}

/* footer */
footer{background:var(--ink-deep);color:var(--parchment);padding:56px 6vw 26px}
.footer-top{
  max-width:1240px;margin:auto;
  display:grid;grid-template-columns:1fr 1.4fr 1fr;align-items:center;gap:30px;
}
footer .brand small{color:var(--muted-on-dark)}
footer .brand img{filter:grayscale(1) brightness(1.8)}
.footer-links{display:flex;justify-content:center;gap:26px;font:italic 14px var(--display);color:#cfc9b8}
.legal-links{display:flex;justify-content:flex-end;gap:20px;font-size:12px;color:var(--muted-on-dark)}
.footer-rule{max-width:1240px;margin:34px auto 0;height:1px;background:rgba(255,255,255,.12)}
.footer-bottom{
  max-width:1240px;margin:18px auto 0;
  display:flex;justify-content:space-between;font-size:11px;letter-spacing:.04em;
  color:#8c8674;
}

@media (max-width:1050px){
  .header nav{gap:20px}
  .contact-link{display:none}
  .footer-top{grid-template-columns:1fr}
  .footer-links{justify-content:flex-start}
  .legal-links{justify-content:flex-start}
}

@media (max-width:800px){
  .legacy-grid,.correspondence,.outlook{grid-template-columns:1fr;gap:46px}
  .principle-grid{grid-template-columns:1fr}
  .principle-grid article{border-right:0}
  .outlook{padding-bottom:70px}
  .outlook-mark{display:none}
}

@media (max-width:720px){
  .header-inner{padding:18px 7vw}
  .header nav{display:none}
  .header nav.open{
    display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;
    background:var(--parchment);padding:22px 7vw;border-bottom:1px solid var(--line);gap:16px;
  }
  .menu{display:block}
  .hero{padding:130px 8vw 70px;min-height:660px}
  section{padding:90px 8vw}
  .section-head{margin-bottom:44px}
  .footer-bottom{flex-direction:column;gap:8px}
}