html,body{ background:var(--cream); color:var(--forest-deep); font-family:var(--sans);}
body{ min-height:100vh; }

.stage{
  position:relative; z-index:1;
  min-height:100vh;
  display:grid;
  grid-template-columns: 0.95fr 1.05fr;
}
@media (max-width:960px){ .stage{grid-template-columns:1fr;} }

.left{
  background:var(--forest);
  color:var(--cream);
  padding:60px 56px;
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
}
.left::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(ellipse at 80% 0%, rgba(201,166,107,0.22), transparent 55%),
              radial-gradient(ellipse at 10% 100%, rgba(42,74,59,0.9), transparent 55%);
  pointer-events:none;
}
.left > *{ position:relative; }

.left .brand{ color:var(--cream); }

.left h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(48px, 5.5vw, 84px);
  line-height:0.98; letter-spacing:-.022em;
  margin:36px 0 28px;
  max-width:14ch;
}
.left h1 em{ font-style:italic; color:var(--gold); }
.left .lede{
  font-size:17px; line-height:1.6; font-weight:300; max-width:42ch; opacity:.9;
}
.left .meta{
  display:grid; grid-template-columns: 1fr 1fr; gap:34px 28px;
  margin-top:42px;
  border-top:1px solid rgba(245,239,228,0.14);
  padding-top:30px;
}
.meta-item{
  font-size:14px; line-height:1.5; opacity:.9;
}
.meta-item .k{
  display:block; font-family:var(--sans); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; opacity:.6; margin-bottom:8px;
}
.left .foot{
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; opacity:.6;
  margin-top:60px;
}
.back-link{
  color:var(--cream); text-decoration:none;
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
}
.back-link::before{
  content:""; width:18px; height:1px; background:currentColor; position:relative;
  box-shadow: inset 6px 4px 0 -4px currentColor;
}

.right{
  background:var(--cream);
  padding:60px 56px;
  display:flex; flex-direction:column;
  position:relative;
}
@media (max-width:720px){
  .stage{ min-height:0; }
  .left{ padding:34px 24px 30px; }
  .right{ padding:44px 22px 36px; }
  .left .brand{ font-size:19px; }
  .left h1{
    font-size:clamp(40px, 11.5vw, 60px);
    margin:28px 0 22px; max-width:none;
    line-height:1; letter-spacing:-.025em;
  }
  .left .lede{ font-size:15.5px; max-width:none; line-height:1.6; }
  .left .meta{
    grid-template-columns:1fr 1fr;
    gap:24px 22px;
    margin-top:34px; padding-top:26px;
  }
  .meta-item{ font-size:13.5px; line-height:1.45; }
  .meta-item .k{ font-size:9.5px; letter-spacing:.2em; margin-bottom:6px; }
  .left .foot{
    flex-direction:column; align-items:flex-start; gap:12px;
    margin-top:44px;
    font-size:10px; letter-spacing:.14em;
  }
  .back-link{ font-size:10.5px; letter-spacing:.18em; }
  .right .num{ font-size:16px; margin-bottom:8px; }
  .right h2{ font-size:clamp(32px, 9vw, 44px); line-height:1.02; letter-spacing:-.02em; }
  .right .sub{ font-size:14.5px; max-width:none; line-height:1.6; margin-top:14px; }
  .divider{ margin:26px 0 22px; }
  .widget-frame{ min-height:auto; }
  .widget-frame iframe{ min-height:560px; }
}

@media (max-width:420px){
  .left{ padding:30px 20px 28px; }
  .right{ padding:36px 18px 32px; }
  .left .meta{ gap:22px 18px; }
  .right h2{ font-size:clamp(28px, 9.5vw, 38px); }
}

.right .num{
  font-family:var(--serif); font-style:italic; color:var(--gold); font-size:20px;
  margin-bottom:10px;
}
.right h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(34px, 3.6vw, 52px);
  line-height:1; letter-spacing:-.015em;
  margin:0 0 10px;
}
.right h2 em{ font-style:italic; color:var(--gold); }
.right .sub{
  font-size:15px; line-height:1.55; font-weight:300; max-width:48ch;
  opacity:.85;
}
.divider{
  height:1px; background:rgba(31,58,46,0.16);
  margin:30px 0 26px;
}
.widget-frame{
  flex:1;
  min-height:560px;
  display:flex; flex-direction:column;
}
.widget-frame iframe{ width:100%; border:0; min-height:780px; background:transparent;}

/* entrance */
.rise{ opacity:0; transform:translateY(20px); animation: rise 1s cubic-bezier(.2,.7,.2,1) forwards; }
.rise.d1{ animation-delay:.08s; }
.rise.d2{ animation-delay:.16s; }
.rise.d3{ animation-delay:.24s; }
.rise.d4{ animation-delay:.32s; }
.rise.d5{ animation-delay:.42s; }
@keyframes rise{ to{opacity:1; transform:none;} }