@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{
--ink:#172623;
--ink-soft:#3f4f49;
--teal:#5cc6b0;
--teal-deep:#2f8d7c;
--sand:#d4c4a8;
--clay:#c67b5c;
--paper:#f8f3ea;
--line:rgba(23,38,35,.14);
--rail:244px;
--serif:"Cormorant Garamond","Crimson Pro",Georgia,"Songti SC",serif;
--body:"Crimson Pro",Georgia,"Songti SC",serif;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}

body{
margin:0;
background:
radial-gradient(120% 80% at 100% 0,rgba(212,196,168,.55),transparent 58%),
radial-gradient(90% 70% at 0 100%,rgba(92,198,176,.16),transparent 62%),
var(--paper);
color:var(--ink);
font-family:var(--body);
font-size:1.0625rem;
line-height:1.78;
overflow-x:clip;
max-width:100%;
}

body::before{
content:"";
position:fixed;
inset:0;
z-index:1;
pointer-events:none;
opacity:.32;
mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E");
background-size:170px 170px;
}

p{margin:0 0 1rem}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.16;letter-spacing:.01em;color:var(--ink);margin:0 0 .6rem}
img{max-width:100%;height:auto;display:block;border-radius:12px}
:focus-visible{outline:2px solid var(--teal-deep);outline-offset:3px;border-radius:6px}

.rail{
position:fixed;
top:0;left:0;bottom:0;
width:var(--rail);
display:flex;
flex-direction:column;
gap:1rem;
padding:1.4rem 1rem 1.1rem;
background:linear-gradient(180deg,#fbf6ec,#f2eada);
border-right:1px solid var(--line);
box-shadow:16px 0 38px -34px rgba(23,38,35,.9);
overflow-y:auto;
overflow-x:hidden;
z-index:20;
}

.rail-brand{
display:flex;
align-items:center;
gap:.6rem;
min-height:44px;
text-decoration:none;
color:var(--ink);
font-family:var(--serif);
font-size:1.15rem;
letter-spacing:.05em;
}

.brand-img{width:34px;height:34px;border-radius:46% 54% 52% 48%/52% 46% 54% 48%;object-fit:cover}
.brand-mark{
width:34px;height:34px;flex:0 0 34px;
border-radius:46% 54% 52% 48%/52% 46% 54% 48%;
background:linear-gradient(140deg,var(--teal),var(--sand));
box-shadow:inset 0 0 0 1px rgba(23,38,35,.14);
}
.brand-name{border-bottom:1px solid transparent;transition:border-color .25s ease-out;min-width:0}
.rail-brand:hover .brand-name{border-bottom-color:var(--teal)}

.rail-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem;min-width:0}

.rail-link{
display:flex;
align-items:center;
gap:.5rem;
min-height:44px;
padding:.3rem .55rem;
border-radius:10px;
color:var(--ink-soft);
text-decoration:none;
transition:background .25s ease-out,color .25s ease-out,transform .25s ease-out;
overflow-wrap:anywhere;
}
.rail-link:hover,.rail-link.is-on{background:rgba(92,198,176,.2);color:var(--ink);transform:translateX(3px)}
.rail-num{font-family:var(--serif);font-size:.9rem;letter-spacing:.12em;color:var(--teal-deep)}

.rail-group>.rail-link::after{content:"＋";margin-left:auto;font-size:.85rem;color:var(--teal-deep)}

.rail-sub{
list-style:none;
margin:.15rem 0 .35rem .95rem;
padding:0 0 0 .55rem;
border-left:1px solid var(--line);
display:none;
min-width:0;
}
.rail-sub a{
display:flex;
align-items:center;
gap:.45rem;
min-height:40px;
padding:.25rem .5rem;
border-radius:9px;
color:var(--ink-soft);
text-decoration:none;
transition:background .25s ease-out,color .25s ease-out;
overflow-wrap:anywhere;
}
.rail-sub a:hover{background:rgba(212,196,168,.55);color:var(--ink)}
.rail-group:hover .rail-sub,.rail-group:focus-within .rail-sub{display:block}

.rail-cta{
margin-top:auto;
display:flex;
align-items:center;
justify-content:center;
min-height:46px;
padding:.6rem .8rem;
text-align:center;
text-decoration:none;
font-weight:600;
color:#10211e;
background:linear-gradient(135deg,var(--teal),#95ddcc);
border:1px solid rgba(23,38,35,.16);
border-radius:16px 11px 16px 12px;
box-shadow:0 12px 22px -16px rgba(23,38,35,.85);
transition:transform .25s ease-out,box-shadow .25s ease-out;
}
.rail-cta:hover{transform:translateY(-2px);color:#10211e;box-shadow:0 18px 26px -16px rgba(23,38,35,.8)}

main{margin-left:var(--rail);padding:0 clamp(1rem,3.4vw,2.8rem);min-width:0;max-width:100%}

article{
display:grid;
grid-template-columns:210px minmax(0,1fr);
column-gap:clamp(1.4rem,3vw,3rem);
max-width:1180px;
padding-bottom:3.5rem;
overflow-wrap:break-word;
}
article>*{grid-column:2;min-width:0;max-width:100%}
article>.h-hero{grid-column:1/-1}
article>.side{grid-column:1;grid-row:2/span 40;align-self:start;position:sticky;top:1.6rem}

.h-hero{
min-height:70vh;
display:flex;
flex-direction:column;
justify-content:center;
padding:clamp(2.6rem,7vw,5.4rem) 0 clamp(1.6rem,4vw,3rem);
border-bottom:1px solid var(--line);
background-image:
radial-gradient(rgba(23,38,35,.15) 1px,transparent 1px),
radial-gradient(90% 70% at 8% 0,rgba(92,198,176,.2),transparent 62%);
background-size:24px 24px,100% 100%;
}
.h-hero h1{font-size:clamp(2.2rem,6vw,4.4rem);font-weight:400;line-height:1.06;max-width:19ch;margin:0 0 1.2rem;overflow-wrap:anywhere}
.lead{
max-width:46ch;
margin:0;
padding-left:1rem;
border-left:2px solid var(--teal);
color:var(--ink-soft);
overflow-wrap:anywhere;
}

.side{
padding:1.1rem 1rem 1rem;
background:linear-gradient(165deg,#fdf8ee,#f1e7d6);
border:1px solid var(--line);
border-radius:18px 12px 18px 14px;
box-shadow:0 18px 30px -26px rgba(45,36,24,.95);
}
.side h2{font-size:1.1rem;letter-spacing:.03em;margin:0 0 .45rem}
.side .subtitle{margin:0 0 .85rem;line-height:1.65;color:var(--ink-soft);overflow-wrap:anywhere}
.side-top{
display:inline-flex;
align-items:center;
width:100%;
min-height:40px;
padding-top:.5rem;
border-top:1px dashed var(--line);
color:var(--teal-deep);
text-decoration:none;
}
.side-top:hover{color:var(--ink)}

article>section:not(.h-hero){
padding:2.1rem 0 1.4rem;
border-bottom:1px dashed rgba(23,38,35,.16);
scroll-margin-top:1.5rem;
overflow-wrap:anywhere;
}
article>section:last-of-type{border-bottom:0}
article h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-top:.3rem}
article h3{font-size:1.25rem;margin-top:1.5rem}
article ul,article ol{padding-left:1.3rem}
article li{margin:.35rem 0}
article blockquote{
margin:1.3rem 0;
padding:.9rem 1.1rem;
background:rgba(212,196,168,.45);
border-left:3px solid var(--clay);
border-radius:0 12px 12px 0;
}
article figure{margin:1.4rem 0}
article a{color:var(--teal-deep);text-underline-offset:3px}
article a:hover{color:var(--ink)}

article table{
width:100%;
max-width:100%;
display:block;
overflow-x:auto;
border-collapse:collapse;
margin:1.2rem 0;
-webkit-overflow-scrolling:touch;
}
article th,article td{border:1px solid var(--line);padding:.5rem .7rem;text-align:left;overflow-wrap:break-word}
article pre{
display:block;
max-width:100%;
overflow-x:auto;
margin:1.2rem 0;
padding:.85rem 1rem;
background:rgba(212,196,168,.4);
border-radius:10px;
font-size:.95rem;
line-height:1.6;
}
article code{overflow-wrap:anywhere}
article pre code{overflow-wrap:normal;white-space:pre}
article img,article video,article iframe{max-width:100%}

.foot{
margin-left:var(--rail);
display:grid;
grid-template-columns:1.3fr 1fr 1fr auto;
gap:1rem 1.4rem;
padding:2rem clamp(1rem,3.4vw,2.8rem) 2.4rem;
border-top:1px solid var(--line);
background:#eee4d3;
min-width:0;
max-width:100%;
}
.foot p{margin:0;overflow-wrap:anywhere}
.foot-brand{font-family:var(--serif);font-size:1.2rem;letter-spacing:.05em;color:var(--ink)}
.foot-col{display:flex;flex-direction:column;min-width:0}
.foot-col a{display:inline-flex;align-items:center;min-height:40px;color:var(--ink-soft);text-decoration:none}
.foot-col a:hover{color:var(--teal-deep)}
.foot-copy{align-self:end;justify-self:end;color:var(--ink-soft)}

.js .reveal{
opacity:0;
transform:translateY(16px);
transition:opacity .7s cubic-bezier(.22,.7,.3,1),transform .7s cubic-bezier(.22,.7,.3,1);
}
.js .reveal.in{opacity:1;transform:none}

@media (max-width:1024px){
article{grid-template-columns:minmax(0,1fr)}
article>*{grid-column:1}
article>.side{position:static;grid-row:auto;margin:1.4rem 0 0}
}

@media (max-width:920px){
.rail{position:static;width:auto;max-width:100%;inset:auto;border-right:0;border-bottom:1px solid var(--line);padding:1rem;overflow:visible}
main,.foot{margin-left:0}
.rail-list{display:grid;grid-template-columns:1fr 1fr;gap:.15rem}
.rail-sub{display:contents}
.rail-group>.rail-link::after{content:""}
.rail-cta{margin-top:.7rem}
.h-hero{min-height:56vh;padding-top:2.2rem}
}

@media (max-width:620px){
div{padding-bottom:2.4rem}
.h-hero h1{font-size:clamp(1.9rem,8.4vw,2.8rem)}
.foot{grid-template-columns:1fr 1fr}
.foot-brand{grid-column:1/-1}
.foot-copy{grid-column:1/-1;justify-self:start;margin-top:.3rem}
.rail-link{font-size:1rem;padding:.3rem .4rem}
.rail-num{display:none}
.foot-col a{padding:.1rem 0}
}

@media (max-width:430px){
.rail-list{grid-template-columns:1fr}
.foot{grid-template-columns:1fr}
div table{font-size:.95rem}
div th,div td{padding:.45rem .55rem}
}

@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*{transition-duration:.01ms!important;animation-duration:.01ms!important}
.js .reveal{opacity:1!important;transform:none!important}
}

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