:root{
  --cd-ground:#eaf2f3;
  --cd-panel:#f7fbfa;
  --cd-memory:#dcd8ea;
  --cd-memory-2:#c9dfe0;
  --cd-ink:#233039;
  --cd-muted:#66777d;
  --cd-spruce:#386b63;
  --cd-plum:#705a78;
  --cd-clay:#c77f72;
  --cd-promise:#ded071;
  --cd-line:#b9cacd;
  --cd-soft-line:#d7e3e4;
  --cd-shadow:rgba(35,48,57,.12);
  --cd-display:"Avenir Next","Nunito Sans","Trebuchet MS",Arial,sans-serif;
  --cd-body:"Atkinson Hyperlegible","Segoe UI",Verdana,Geneva,sans-serif;
  --cd-mono:"Cascadia Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:
    linear-gradient(90deg, rgba(112,90,120,.08) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, var(--cd-ground), #f4f8f7 46%, #e7eff0);
  background-size:34px 100%, 100% 100%;
  color:var(--cd-ink);
  font-family:var(--cd-body);
  line-height:1.6;
}

a{color:inherit}

.cd-home{
  width:min(1180px, calc(100% - 34px));
  margin:0 auto;
  padding:30px 0 64px;
}

.cd-hero{
  position:relative;
  min-height:460px;
  padding:34px clamp(24px,5vw,70px) 42px;
  border:1px solid var(--cd-line);
  border-radius:34px 34px 18px 18px;
  background:
    radial-gradient(circle at 88% 12%, rgba(222,208,113,.34), transparent 26%),
    linear-gradient(135deg, rgba(255,255,255,.68), rgba(220,216,234,.46) 56%, rgba(201,223,224,.52));
  box-shadow:0 24px 60px var(--cd-shadow);
  overflow:hidden;
}

.cd-hero:after{
  content:"";
  position:absolute;
  right:28px;
  bottom:28px;
  width:min(390px,45%);
  height:92px;
  border:1px solid rgba(56,107,99,.32);
  border-radius:26px;
  background:repeating-linear-gradient(90deg, rgba(56,107,99,.16) 0 12px, transparent 12px 28px);
  opacity:.7;
}

.cd-kicker,.cd-section-label,.cd-room-marker{
  margin:0 0 18px;
  color:var(--cd-plum);
  font-family:var(--cd-mono);
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.cd-hero h1{
  max-width:820px;
  margin:48px 0 22px;
  font-family:var(--cd-display);
  font-size:clamp(3.1rem,9vw,8.8rem);
  line-height:.86;
  letter-spacing:-.075em;
  font-weight:800;
}

.cd-description{
  max-width:660px;
  margin:0;
  color:#31444b;
  font-size:clamp(1.08rem,2vw,1.45rem);
  line-height:1.45;
}

.cd-handover-thread{
  display:flex;
  align-items:center;
  gap:0;
  width:min(560px,82%);
  height:22px;
}

.cd-handover-thread span{
  position:relative;
  flex:1;
  height:8px;
  border-top:2px solid var(--cd-spruce);
}

.cd-handover-thread span:after{
  content:"";
  position:absolute;
  top:-7px;
  right:-7px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--cd-panel);
  border:2px solid var(--cd-spruce);
  box-shadow:0 0 0 5px rgba(56,107,99,.08);
}

.cd-handover-thread span:nth-child(2){border-color:var(--cd-plum)}
.cd-handover-thread span:nth-child(2):after{border-color:var(--cd-plum)}
.cd-handover-thread span:nth-child(4){border-color:var(--cd-clay)}
.cd-handover-thread span:nth-child(4):after{border-color:var(--cd-clay)}

.cd-roomline{
  position:absolute;
  left:clamp(24px,5vw,70px);
  right:clamp(24px,5vw,70px);
  bottom:30px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  z-index:1;
}

.cd-roomline span{
  padding:8px 12px;
  border:1px solid rgba(35,48,57,.16);
  border-radius:999px;
  background:rgba(247,251,250,.74);
  color:#43565c;
  font-size:.86rem;
}

.cd-intake{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(270px,.75fr);
  gap:18px;
  margin-top:18px;
}

.cd-intake-copy,.cd-topic-tray,.cd-room-pane,.cd-posts{
  border:1px solid var(--cd-line);
  background:rgba(247,251,250,.78);
  box-shadow:0 16px 44px rgba(35,48,57,.08);
}

.cd-intake-copy{
  padding:34px;
  border-radius:18px 18px 18px 34px;
}

.cd-intake-copy h2,.cd-customer-room h2,.cd-posts-head h2{
  margin:0;
  font-family:var(--cd-display);
  font-weight:760;
  line-height:1.03;
  letter-spacing:-.045em;
}

.cd-intake-copy h2{font-size:clamp(1.9rem,4vw,3.6rem);max-width:810px}
.cd-intake-copy p:last-child{max-width:720px;margin:24px 0 0;color:var(--cd-muted);font-size:1.02rem}

.cd-topic-tray{
  display:flex;
  align-content:flex-start;
  flex-wrap:wrap;
  gap:10px;
  padding:24px;
  border-radius:18px 18px 34px 18px;
  background:linear-gradient(180deg, rgba(220,216,234,.76), rgba(247,251,250,.8));
}

.cd-topic-tray a,.cd-topic-tray span{
  display:inline-flex;
  padding:8px 11px;
  border:1px solid rgba(112,90,120,.28);
  border-radius:999px;
  background:rgba(255,255,255,.48);
  color:#51445a;
  font-size:.88rem;
  text-decoration:none;
}

.cd-customer-room{
  display:grid;
  grid-template-columns:180px minmax(0,1fr) 260px;
  gap:18px;
  margin-top:18px;
  align-items:stretch;
}

.cd-room-marker{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:250px;
  margin:0;
  padding:18px;
  border:1px solid var(--cd-line);
  border-radius:34px 18px 18px 18px;
  background:var(--cd-memory-2);
  writing-mode:vertical-rl;
  text-orientation:mixed;
}

.cd-room-pane{
  padding:34px;
  border-radius:18px;
}

.cd-room-pane h2{font-size:clamp(2rem,4.5vw,4.4rem);max-width:740px}
.cd-room-pane p{max-width:760px;margin:24px 0 0;color:var(--cd-muted);font-size:1.05rem}

.cd-risk-bar{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:12px;
  padding:18px;
  border:1px solid var(--cd-line);
  border-radius:18px 34px 18px 18px;
  background:linear-gradient(180deg, rgba(222,208,113,.52), rgba(247,251,250,.56));
}

.cd-risk-dot{
  position:relative;
  display:block;
  min-height:62px;
  padding:14px 14px 14px 42px;
  border-radius:18px;
  background:rgba(247,251,250,.62);
  color:#48565a;
  font-family:var(--cd-mono);
  font-size:.78rem;
  line-height:1.3;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.cd-risk-dot:before{
  content:"";
  position:absolute;
  left:15px;
  top:19px;
  width:13px;
  height:13px;
  border-radius:50%;
  border:2px solid var(--cd-clay);
  background:var(--cd-panel);
}

.cd-posts{
  margin-top:18px;
  padding:30px;
  border-radius:18px 18px 34px 34px;
}

.cd-posts-head{
  display:flex;
  justify-content:space-between;
  gap:22px;
  align-items:end;
  margin-bottom:24px;
}

.cd-posts-head h2{font-size:clamp(1.8rem,3vw,3.1rem);max-width:640px}

.cd-slip-stream{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.cd-slip{
  min-height:270px;
}

.cd-slip-link{
  position:relative;
  display:grid;
  grid-template-columns:38px 1fr;
  height:100%;
  color:inherit;
  text-decoration:none;
  border:1px solid var(--cd-line);
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(234,242,243,.88));
  overflow:hidden;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.cd-slip-link:hover{
  transform:translateY(-3px);
  border-color:rgba(56,107,99,.46);
  box-shadow:0 18px 38px rgba(35,48,57,.12);
}

.cd-slip-tab{
  position:relative;
  padding-top:22px;
  background:linear-gradient(180deg, var(--cd-memory), rgba(201,223,224,.82));
  border-right:1px solid rgba(35,48,57,.12);
}

.cd-slip-tab span{
  display:block;
  width:12px;
  height:12px;
  margin:0 auto 30px;
  border-radius:50%;
  border:2px solid var(--cd-spruce);
  background:var(--cd-panel);
}

.cd-slip-tab span:nth-child(2){border-color:var(--cd-plum)}
.cd-slip-tab span:nth-child(3){border-color:var(--cd-clay)}

.cd-slip-body{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:22px 22px 18px;
}

.cd-slip-body:before{
  content:"";
  position:absolute;
  top:18px;
  right:18px;
  width:34px;
  height:18px;
  border-radius:0 0 14px 14px;
  background:var(--cd-promise);
  opacity:.72;
}

.cd-slip-date{
  display:block;
  margin-bottom:22px;
  color:var(--cd-plum);
  font-family:var(--cd-mono);
  font-size:.76rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.cd-slip h3{
  margin:0;
  padding-right:22px;
  font-family:var(--cd-display);
  font-size:1.45rem;
  line-height:1.06;
  letter-spacing:-.035em;
}

.cd-slip p{
  margin:16px 0 22px;
  color:var(--cd-muted);
  font-size:.96rem;
  line-height:1.52;
}

.cd-slip-footer{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid var(--cd-soft-line);
}

.cd-slip-footer span{
  padding:5px 8px;
  border-radius:999px;
  background:rgba(56,107,99,.08);
  color:#49615f;
  font-family:var(--cd-mono);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.cd-article-shell{
  width:min(1240px, calc(100% - 34px));
  margin:0 auto;
  padding:24px 0 70px;
}

.cd-back{
  margin:0 0 16px;
  font-family:var(--cd-mono);
  font-size:.82rem;
  letter-spacing:.05em;
}

.cd-back a{
  display:inline-flex;
  padding:8px 12px;
  border:1px solid var(--cd-line);
  border-radius:999px;
  background:rgba(247,251,250,.78);
  color:var(--cd-spruce);
  text-decoration:none;
}

.cd-article{
  border:1px solid var(--cd-line);
  border-radius:34px;
  background:rgba(247,251,250,.76);
  box-shadow:0 24px 70px rgba(35,48,57,.12);
  overflow:hidden;
}

.cd-article-header{
  position:relative;
  padding:32px clamp(24px,5vw,76px) 38px;
  background:linear-gradient(135deg, rgba(220,216,234,.72), rgba(234,242,243,.92) 62%, rgba(222,208,113,.26));
  border-bottom:1px solid var(--cd-line);
}

.cd-article-thread{margin-bottom:46px;width:min(520px,84%)}

.cd-article-header h1{
  max-width:900px;
  margin:0;
  font-family:var(--cd-display);
  font-size:clamp(2.7rem,6.5vw,6.9rem);
  line-height:.92;
  letter-spacing:-.07em;
  font-weight:820;
}

.cd-meta{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  max-width:760px;
  margin-top:24px;
  color:var(--cd-muted);
  font-family:var(--cd-mono);
  font-size:.78rem;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.cd-meta > *{
  padding:6px 9px;
  border:1px solid rgba(35,48,57,.12);
  border-radius:999px;
  background:rgba(255,255,255,.42);
}

.cd-article-frame{
  display:grid;
  grid-template-columns:120px minmax(0,760px) minmax(190px,260px);
  gap:0;
  align-items:start;
}

.cd-memory-rail{
  position:sticky;
  top:0;
  min-height:100vh;
  padding:34px 16px;
  border-right:1px solid var(--cd-soft-line);
  background:linear-gradient(180deg, rgba(201,223,224,.54), rgba(247,251,250,.3));
}

.cd-memory-rail span{
  position:relative;
  display:block;
  margin:0 0 38px;
  padding-left:24px;
  color:#52666b;
  font-family:var(--cd-mono);
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  writing-mode:vertical-rl;
}

.cd-memory-rail span:before{
  content:"";
  position:absolute;
  left:3px;
  top:0;
  width:12px;
  height:12px;
  border-radius:50%;
  border:2px solid var(--cd-spruce);
  background:var(--cd-panel);
}

.cd-memory-rail span:nth-child(2):before{border-color:var(--cd-plum)}
.cd-memory-rail span:nth-child(4):before{border-color:var(--cd-clay)}

.cd-article-body{
  padding:clamp(28px,5vw,64px) clamp(24px,5vw,70px) 70px;
  background:rgba(255,255,255,.34);
}

.cd-article-body > *:first-child{margin-top:0}

.cd-article-body p,
.cd-article-body li{
  color:#2c3b41;
  font-size:1.06rem;
  line-height:1.78;
}

.cd-article-body p{margin:0 0 1.35em}

.cd-article-body h2,
.cd-article-body h3{
  font-family:var(--cd-display);
  letter-spacing:-.045em;
  line-height:1.05;
  color:var(--cd-ink);
}

.cd-article-body h2{
  margin:2.1em 0 .65em;
  font-size:clamp(2rem,3.2vw,3.2rem);
}

.cd-article-body h3{
  margin:1.9em 0 .55em;
  font-size:1.65rem;
}

.cd-article-body blockquote{
  margin:2em 0;
  padding:20px 22px 20px 26px;
  border-left:8px solid var(--cd-promise);
  border-radius:0 18px 18px 0;
  background:linear-gradient(90deg, rgba(222,208,113,.22), rgba(247,251,250,.64));
  color:#34464b;
}

.cd-article-body blockquote p{
  margin:0;
  font-size:1.18rem;
  line-height:1.62;
}

.cd-article-body ul,
.cd-article-body ol{padding-left:1.35rem;margin:0 0 1.5em}

.cd-article-body hr{
  margin:2.6em 0;
  border:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--cd-line), transparent);
}

.cd-article-body code{
  padding:.12em .35em;
  border:1px solid var(--cd-soft-line);
  border-radius:6px;
  background:rgba(220,216,234,.34);
  font-family:var(--cd-mono);
  font-size:.88em;
}

.cd-vow-margin{
  position:sticky;
  top:0;
  min-height:100vh;
  padding:34px 18px;
  border-left:1px solid var(--cd-soft-line);
  background:linear-gradient(180deg, rgba(222,208,113,.26), rgba(220,216,234,.24));
}

.cd-vow-margin p{
  margin:0 0 14px;
  padding:14px;
  border:1px solid rgba(112,90,120,.18);
  border-radius:18px;
  background:rgba(247,251,250,.55);
  color:#5a686b;
  font-size:.88rem;
  line-height:1.45;
}

@media (max-width:960px){
  .cd-intake,.cd-customer-room,.cd-article-frame{grid-template-columns:1fr}
  .cd-room-marker{min-height:auto;writing-mode:horizontal-tb;justify-content:flex-start;border-radius:24px}
  .cd-risk-bar{border-radius:24px;flex-direction:row;flex-wrap:wrap}
  .cd-risk-dot{flex:1 1 180px}
  .cd-slip-stream{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cd-memory-rail,.cd-vow-margin{position:relative;min-height:auto;border:0;border-bottom:1px solid var(--cd-soft-line)}
  .cd-memory-rail{display:flex;gap:14px;overflow:auto;padding:18px}
  .cd-memory-rail span{writing-mode:horizontal-tb;margin:0;padding-left:22px;white-space:nowrap}
  .cd-vow-margin{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:18px}
  .cd-vow-margin p{margin:0}
}

@media (max-width:640px){
  .cd-home,.cd-article-shell{width:min(100% - 20px, 1240px)}
  .cd-hero{min-height:520px;border-radius:24px;padding:24px 20px 30px}
  .cd-hero h1{margin-top:42px}
  .cd-hero:after{width:70%;height:70px;right:18px;bottom:88px}
  .cd-roomline{left:20px;right:20px;bottom:22px}
  .cd-intake-copy,.cd-room-pane,.cd-posts{padding:22px;border-radius:22px}
  .cd-topic-tray{border-radius:22px}
  .cd-posts-head{display:block}
  .cd-slip-stream{grid-template-columns:1fr}
  .cd-article{border-radius:24px}
  .cd-article-header{padding:24px 20px 30px}
  .cd-article-body{padding:30px 22px 46px}
  .cd-vow-margin{grid-template-columns:1fr}
}