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

:root{
  --black:#000000;
  --panel:#121212;
  --mid:#0b1a2b;
  --brass:#c9a55c;
  --brass-dim:#7d6534;
  --text:#e8e3d9;
  --muted:#9b958a;
  --line:#212328;
  --rail:198px;
  --head:78px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--black);
  color:var(--text);
  font-family:'Crimson Pro','Songti SC','Noto Serif SC',Georgia,serif;
  font-size:17px;
  line-height:1.85;
  letter-spacing:.012em;
  overflow-x:hidden;
}
img{max-width:100%}
a{color:var(--brass)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:4px}
main{padding-top:var(--head)}
div{scroll-margin-top:calc(var(--head) + 1.5rem)}

.skip{
  position:absolute;left:1rem;top:-4rem;z-index:99;
  background:var(--brass);color:#0a0703;text-decoration:none;
  padding:.6rem 1rem;border-radius:0 0 10px 10px;letter-spacing:.1em;
  transition:top .2s;
}
.skip:focus{top:0}

/* ---------- masthead ---------- */
.masthead{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;gap:.9rem;
  min-height:var(--head);
  padding:.5rem clamp(.9rem,3vw,2.2rem);
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid var(--line);
}
.brand{
  display:inline-flex;align-items:center;gap:.55rem;flex:none;
  min-height:44px;padding:.2rem 0;
  text-decoration:none;color:var(--text);
}
.brand-mark{height:26px;width:auto;display:block;filter:brightness(.95)}
.brand-name{
  font-family:'Cinzel','Songti SC',serif;font-size:.98rem;font-weight:500;
  letter-spacing:.2em;color:var(--brass);
  text-shadow:0 0 12px rgba(201,165,92,.32);
}
.nav{margin-left:auto}
.nav ol{display:flex;align-items:center;gap:.1rem;list-style:none;margin:0;padding:0}
.nav a{
  display:inline-flex;align-items:center;min-height:44px;
  padding:.5rem .78rem;border-radius:7px;
  color:var(--muted);text-decoration:none;font-size:.95rem;letter-spacing:.06em;
  white-space:nowrap;transition:color .22s,background .22s;
}
.nav a:hover,.nav a:focus-visible{color:var(--brass);background:#101216}
.has-sub{position:relative}
.nav .sub{
  display:block;position:absolute;top:calc(100% + .3rem);left:-.4rem;
  min-width:13rem;padding:.45rem;
  background:#07080a;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 22px 48px rgba(0,0,0,.85);
  opacity:0;visibility:hidden;transform:translate3d(0,-8px,0);
  transition:opacity .22s,transform .22s,visibility .22s;
}
.nav .sub li{display:block}
.nav .sub a{min-height:40px;font-size:.9rem;width:100%;border-radius:8px}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.head-cta{
  flex:none;display:inline-flex;align-items:center;min-height:44px;
  padding:.45rem 1.05rem;border-radius:999px;
  border:1px solid var(--brass-dim);
  background:linear-gradient(180deg,#15110a,#0a0806);
  color:var(--brass);text-decoration:none;font-size:.9rem;letter-spacing:.12em;
  transition:background .25s,color .25s,box-shadow .25s;
}
.head-cta:hover{background:var(--brass);color:#0a0703;box-shadow:0 0 24px rgba(201,165,92,.42)}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  min-height:100svh;
  display:grid;grid-template-rows:1fr auto;gap:1.4rem;
  padding:clamp(1.8rem,4vw,3rem) clamp(1.1rem,5vw,4rem) 0;
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(120,162,222,.17) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(130% 86% at 72% 0%,#000 22%,transparent 76%);
  mask-image:radial-gradient(130% 86% at 72% 0%,#000 22%,transparent 76%);
}
.hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:52%;z-index:0;pointer-events:none;
  background:radial-gradient(80% 100% at 78% 100%,rgba(11,26,43,.9),transparent 70%);
}
.hero-copy{position:relative;z-index:1;align-self:center;justify-self:end;max-width:40ch;text-align:right}
.hero-brand{
  margin:0;color:var(--brass);font-size:.76rem;letter-spacing:.42em;
  text-transform:uppercase;text-shadow:0 0 10px rgba(201,165,92,.3);
}
.hero h1{
  margin:.55rem 0 .9rem;
  font-family:'Cinzel','Songti SC',serif;font-weight:500;
  font-size:clamp(1.9rem,6vw,4rem);line-height:1.16;letter-spacing:.055em;
  color:#f5f0e5;text-shadow:0 0 28px rgba(201,165,92,.24);
}
.hero-desc{margin:0 0 0 auto;max-width:32ch;color:var(--muted);font-size:1rem;line-height:1.75}
.hero-art{position:relative;z-index:1;justify-self:end;width:min(100%,760px)}
.hero-art:empty{display:none}
.hero-photo{
  display:block;width:100%;height:auto;
  border:1px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0;
  filter:brightness(.86) contrast(1.06);
  will-change:transform;
}

/* ---------- spread ---------- */
.spread{
  display:grid;grid-template-columns:var(--rail) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.4rem);
  max-width:1160px;margin:0 auto;
  padding:clamp(2.4rem,6vw,4.6rem) clamp(1.1rem,4vw,2.4rem) clamp(1.8rem,5vw,3.6rem);
}
.rail{position:sticky;top:calc(var(--head) + 1.4rem);align-self:start}
.rail-title{
  margin:0 0 .85rem;font-size:.74rem;letter-spacing:.4em;
  color:var(--brass-dim);text-transform:uppercase;
}
.rail-list{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.rail-list li+li{margin-top:.05rem}
.rail-list a{
  display:block;padding:.42rem .8rem;margin-left:-1px;
  border-left:2px solid transparent;
  color:var(--muted);text-decoration:none;font-size:.92rem;line-height:1.45;
  transition:color .2s,border-color .2s;
}
.rail-list a:hover,.rail-list a.is-active{color:var(--brass);border-left-color:var(--brass)}

.column{min-width:0}
.column>div{
  background:linear-gradient(180deg,#0b0c0e,#080809);
  border:1px solid var(--line);
  border-bottom:3px solid var(--brass-dim);
  border-radius:18px;
  padding:clamp(1.35rem,3vw,2.1rem);
  margin-bottom:1.5rem;
  transition:border-color .3s,box-shadow .3s;
}
.column>div:hover{border-bottom-color:var(--brass);box-shadow:0 0 0 1px rgba(201,165,92,.13)}
.column h2,.column h3{
  font-family:'Cinzel','Songti SC',serif;font-weight:500;
  letter-spacing:.05em;color:#f2ecdf;line-height:1.3;
}
.column h2{font-size:clamp(1.32rem,2.5vw,1.8rem);margin:0 0 .1rem}
.column h3{font-size:1.14rem;margin:1.6rem 0 .1rem}
.column hr{
  height:1px;border:0;width:5.5rem;margin:.7rem 0 1.15rem;
  background:linear-gradient(90deg,var(--brass),rgba(201,165,92,0));
}
.column p{margin:0 0 1rem}
.column ul,.column ol{padding-left:1.25rem;margin:0 0 1rem}
.column li{margin:.3rem 0}
.column a{color:var(--brass);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--brass-dim)}
.column a:hover{text-decoration-color:var(--brass)}
.column strong{color:#fff}
.column blockquote{
  margin:1.15rem 0;padding:.15rem 0 .15rem 1rem;
  border-left:2px solid var(--brass-dim);color:var(--muted);font-style:italic;
}
.column table{width:100%;border-collapse:collapse;margin:0 0 1rem;font-size:.95rem}
.column th,.column td{border-bottom:1px solid var(--line);padding:.5rem .4rem;text-align:left}

/* ---------- cta ---------- */
.cta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.4rem;
  max-width:1160px;margin:0 auto;
  padding:clamp(1.9rem,5vw,3.2rem) clamp(1.1rem,4vw,2.4rem);
  border-top:1px solid var(--line);border-radius:18px 18px 0 0;
  background:radial-gradient(96% 150% at 16% 0%,#0c1728 0%,#000 64%);
}
.cta-name{
  margin:0;font-family:'Cinzel','Songti SC',serif;font-weight:500;
  font-size:clamp(1.35rem,4vw,2.2rem);letter-spacing:.2em;color:var(--brass);
  text-shadow:0 0 20px rgba(201,165,92,.25);
}
.cta-link{
  display:inline-flex;align-items:center;min-height:48px;
  padding:.65rem 1.6rem;border-radius:999px;
  background:var(--brass);color:#0a0703;text-decoration:none;
  letter-spacing:.12em;font-size:.96rem;
  box-shadow:0 0 30px rgba(201,165,92,.26);
  transition:background .25s;
}
.cta-link:hover{background:#e2bf77}

/* ---------- colophon ---------- */
.colophon{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:1.4rem 2rem;align-items:start;
  padding:clamp(1.9rem,4vw,2.8rem) clamp(1.1rem,4vw,2.4rem) 1.3rem;
  border-top:1px solid #16181d;background:#050506;
}
.foot-brand{max-width:34ch}
.foot-mark{
  font-family:'Cinzel','Songti SC',serif;font-size:.95rem;letter-spacing:.22em;
  color:var(--text);text-decoration:none;
}
.foot-key{margin:.5rem 0 0;color:#6f6a62;font-size:.9rem;line-height:1.7}
.foot-nav ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.1rem .85rem}
.foot-nav a{
  display:inline-flex;align-items:center;min-height:40px;
  color:var(--muted);text-decoration:none;font-size:.9rem;
}
.foot-nav a:hover{color:var(--brass)}
.foot-base{
  grid-column:1/-1;border-top:1px solid #14161a;padding-top:.95rem;
  text-align:center;color:#6a655d;font-size:.82rem;
}
.foot-base p{margin:0}

/* ---------- motion ---------- */
.reveal{opacity:0;transform:translate3d(0,20px,0);transition:opacity .8s ease,transform .8s ease}
.reveal.is-in{opacity:1;transform:none}

/* ---------- small screens ---------- */
@media (max-width:60em){
  :root{--head:114px}
  .masthead{flex-wrap:wrap;gap:.15rem .6rem;padding-bottom:.4rem;align-content:center}
  .brand-name{font-size:.92rem;letter-spacing:.16em}
  .head-cta{min-height:40px;padding:.35rem .85rem;font-size:.84rem}
  .nav{order:3;width:100%;margin-left:0}
  .nav ol{overflow-x:auto;scrollbar-width:none;gap:.05rem;padding-bottom:.1rem}
  .nav ol::-webkit-scrollbar{display:none}
  .nav .sub{display:contents}
  .has-sub{position:static}
  .nav a{font-size:.9rem;padding:.45rem .6rem}
  .hero{padding-top:calc(var(--head) + 1.4rem)}
  .hero-copy{align-self:start;justify-self:stretch;max-width:none;text-align:right}
  .hero h1{font-size:clamp(1.75rem,8vw,2.4rem)}
  .hero-desc{max-width:30ch;font-size:.96rem}
  .hero-art{width:100%;justify-self:stretch}
  .hero-photo{border-radius:14px 14px 0 0}
  .spread{grid-template-columns:minmax(0,1fr);gap:1.4rem;padding-top:2rem}
  .rail{position:static;top:auto}
  .rail-title{margin-bottom:.55rem}
  .rail-list{display:flex;border-left:0;overflow-x:auto;scrollbar-width:none;gap:.1rem}
  .rail-list::-webkit-scrollbar{display:none}
  .rail-list a{
    white-space:nowrap;min-height:40px;display:inline-flex;align-items:center;
    margin-left:0;padding:.4rem .6rem;
    border-left:0;border-bottom:2px solid transparent;
  }
  .rail-list a.is-active{border-left:0;border-bottom-color:var(--brass)}
  .cta{flex-direction:column;align-items:flex-start;border-radius:14px 14px 0 0}
  .colophon{grid-template-columns:minmax(0,1fr)}
  .foot-nav ol{gap:.1rem .7rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .hero-photo{transform:none!important}
  .skip{transition:none}
}

button[aria-expanded]{min-width:44px;min-height:44px}