:root{
  --cream:#F6F0E4;
  --cream-deep:#EFE6D4;
  --green:#1E3A2C;
  --green-soft:#3A5446;
  --gold:#B08D57;
  --gold-light:#D4B77E;
  --serif:"Cormorant Garamond","Cormorant",Garamond,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100vh;min-height:100dvh;
  background:var(--cream);
  color:var(--green);
  font-family:var(--sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.page{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  min-height:100vh;min-height:100dvh;
}
/* ---------- Content column ---------- */
.content{
  position:relative;
  display:flex;flex-direction:column;
  padding:clamp(2.5rem,5vw,4.5rem) clamp(2rem,6vw,6.5rem) 2.25rem;
  background:
    radial-gradient(ellipse at 20% 0%,rgba(255,255,255,.55),transparent 60%),
    var(--cream);
}
.content::before{ /* fine gold hairline frame */
  content:"";position:absolute;inset:1.25rem 0 1.25rem 1.25rem;
  border:1px solid rgba(176,141,87,.38);border-right:0;pointer-events:none;
}
.inner{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  max-width:34rem;margin:0 auto;width:100%;text-align:center;
}
.brand{
  margin:0;
  font-family:var(--serif);font-weight:500;
  font-size:clamp(3.4rem,6vw,5.8rem);
  line-height:.95;letter-spacing:.18em;
  margin-right:-.18em; /* optically centre tracked caps */
  color:var(--green);
}
.tagline{
  margin:1.1rem 0 0;
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.15rem,1.7vw,1.5rem);letter-spacing:.02em;
  color:var(--gold);
}
.ornament{
  display:flex;align-items:center;justify-content:center;gap:.9rem;
  margin:clamp(2rem,4.5vh,3rem) auto;
  color:var(--gold);
}
.ornament::before,.ornament::after{
  content:"";height:1px;width:clamp(3rem,7vw,5.5rem);
  background:linear-gradient(90deg,transparent,var(--gold));
}
.ornament::after{background:linear-gradient(90deg,var(--gold),transparent)}
.ornament svg{width:12px;height:12px;flex:none}
.headline{
  margin:0 0 1.4rem;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2rem,3.3vw,3rem);line-height:1.12;letter-spacing:.005em;
  color:var(--green);
}
.body{
  margin:0 auto;max-width:27rem;
  font-size:clamp(1.02rem,1.2vw,1.14rem);line-height:1.8;letter-spacing:.015em;
  color:var(--green-soft);
}
.thanks{
  margin:1.6rem 0 0;
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(1.2rem,1.5vw,1.4rem);letter-spacing:.02em;
  color:var(--green);
}
.footer{
  margin-top:2.5rem;text-align:center;
  font-size:.72rem;letter-spacing:.14em;
  color:rgba(30,58,44,.62);
}
/* ---------- Photo column ---------- */
.photo{
  position:relative;margin:0;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(2.5rem,4.5vw,4.5rem);
  background:
    radial-gradient(ellipse at 50% 40%,rgba(58,92,72,.55),transparent 70%),
    var(--green);
  overflow:hidden;
}
.photo::before{ /* gold hairline page frame */
  content:"";position:absolute;inset:1.25rem;pointer-events:none;
  border:1px solid rgba(212,183,126,.32);
}
.arch{
  position:relative;
  height:min(calc(100vh - 10rem),48rem);height:min(calc(100dvh - 10rem),48rem);
  aspect-ratio:.82;max-width:100%;
}
.arch::before{ /* offset gold arch outline */
  content:"";position:absolute;inset:-.8rem;pointer-events:none;
  border:1px solid rgba(212,183,126,.75);
  border-radius:999px 999px 0 0;
}
.arch-img{
  position:relative;width:100%;height:100%;overflow:hidden;
  border-radius:999px 999px 0 0;
  box-shadow:0 30px 60px -25px rgba(0,0,0,.45);
  background:var(--cream-deep);
}
.arch-img img{
  width:100%;height:100%;object-fit:cover;object-position:57% 30%;display:block;
}
.arch-img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,236,200,.06),rgba(30,58,44,.14));
}
/* ---------- Entrance ---------- */
@media (prefers-reduced-motion:no-preference){
  .inner>*{opacity:0;transform:translateY(10px);animation:rise 1.1s cubic-bezier(.2,.7,.2,1) forwards}
  .inner>*:nth-child(2){animation-delay:.12s}
  .inner>*:nth-child(3){animation-delay:.24s}
  .inner>*:nth-child(4){animation-delay:.36s}
  .inner>*:nth-child(5){animation-delay:.48s}
  .inner>*:nth-child(6){animation-delay:.6s}
  .arch-img img{animation:settle 2.4s cubic-bezier(.2,.7,.2,1) both}
  @keyframes rise{to{opacity:1;transform:none}}
  @keyframes settle{from{transform:scale(1.04);opacity:.0}to{transform:none;opacity:1}}
}
/* ---------- Tablet / mobile ---------- */
@media (max-width:900px){
  .page{grid-template-columns:1fr}
  .photo{order:-1;padding:2.6rem 2.1rem 2.4rem}
  .photo::before{inset:.9rem}
  .arch{height:auto;width:min(100%,30rem);aspect-ratio:.86}
  .arch::before{inset:-.6rem}
  .content{padding:2.5rem 1.75rem 1.75rem}
  .content::before{inset:.9rem;border:1px solid rgba(176,141,87,.38)}
  .inner{max-width:32rem}
  .ornament{margin:1.8rem auto}
}
@media (max-width:420px){
  .brand{font-size:3.1rem;letter-spacing:.16em;margin-right:-.16em}
  .tagline{font-size:1.12rem}
  .headline{font-size:1.95rem}
  .content{padding:2.25rem 1.6rem 1.6rem}
}