:root{
  --paper:#eeede7;
  --paper-2:#f5f4ef;
  --ink:#2b2d2f;
  --ink-soft:#4a4d50;
  --rule:#b9bdbd;
  --navy:#34495a;
  --navy-deep:#2c3f4f;
  --sage:#7f9c88;
  --sage-light:#9bb3a2;
  --serif:"Playfair Display", "Bodoni Moda", Didot, Georgia, serif;
  --sans:"Raleway", "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}

/* Framed page */
.frame{position:relative;max-width:1366px;margin:0 auto;padding:20px 50px 24px;min-height:100vh}
.frame::before{content:"";position:absolute;inset:14px;border:1px solid var(--rule);pointer-events:none}
.corner{position:absolute;width:62px;height:62px;color:var(--rule);pointer-events:none}
.corner.tl{top:12px;left:12px}
.corner.tr{top:12px;right:12px;transform:scaleX(-1)}
.corner.bl{bottom:12px;left:12px;transform:scaleY(-1);width:30px;height:30px}
.corner.br{bottom:12px;right:12px;transform:scale(-1,-1);width:30px;height:30px}

/* Sketch masthead */
.masthead{text-align:center;margin:0 auto}
.masthead img{width:min(870px,100%);height:auto;margin:0 auto}
.masthead .line{display:flex;align-items:center;gap:10px;width:min(420px,70%);margin:6px auto 0;color:var(--sage)}
.masthead .line::before,.masthead .line::after{content:"";flex:1;height:1px;background:var(--rule)}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:56px;align-items:start;margin-top:18px}
.hero-copy{padding:0 0 0 28px}
h1{font-family:var(--serif);font-weight:500;font-size:clamp(46px,5.1vw,72px);line-height:1.02;letter-spacing:.01em;text-transform:uppercase;margin:0}
.divider{display:flex;align-items:center;gap:10px;margin:20px 0 14px;color:var(--sage);max-width:280px}
.divider::before,.divider::after{content:"";height:1px;background:var(--rule)}
.divider::before{flex:1.4}.divider::after{flex:1}
.subtitle{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2vw,27px);margin:0 0 40px;letter-spacing:.005em}
.intro{position:relative;padding-left:24px;margin:0;max-width:420px;font-size:18px;line-height:1.45;color:var(--ink-soft);font-weight:500}
.intro::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--rule)}
.intro .sprig{position:absolute;left:-11px;top:50%;transform:translateY(-50%);width:23px;height:23px;background:var(--paper);color:var(--sage)}

/* Collage */
/* The rendering sits over the same spot it occupied in the client comp, so all
   offsets are tied to the collage width (cqw) and stay locked at any size. */
.collage{position:relative;container-type:inline-size;padding-bottom:calc(4% + 14px)}
.collage .historic{width:100%;aspect-ratio:682/318;object-fit:cover;filter:grayscale(1)}
.collage figure{margin:0}
.collage .rendering{position:absolute;top:23cqw;right:-3.5%;width:53%;background:var(--paper-2);padding:6px;box-shadow:0 6px 18px rgba(30,40,50,.18)}
.collage .rendering img{width:100%;aspect-ratio:343/174;object-fit:cover}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Signup band */
.signup{position:relative;margin-top:6px;background:var(--navy);color:#f1f0eb;padding:30px 44px;display:grid;grid-template-columns:auto auto minmax(0,1fr) minmax(0,480px);gap:36px;align-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.signup::before{content:"";position:absolute;inset:6px;border:1px solid rgba(255,255,255,.22);pointer-events:none}
.signup .arch{width:62px;height:92px;color:rgba(214,226,224,.75)}
.signup h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.6vw,36px);margin:0;white-space:nowrap;padding-right:36px;border-right:1px solid rgba(255,255,255,.55);line-height:1.6}
.signup .pitch{font-size:15px;line-height:1.4;margin:0;max-width:300px}
.form-row{display:flex;gap:10px}
.form-row input[type=email]{flex:1;min-width:0;height:50px;border:1px solid #d9d7cf;background:var(--paper-2);padding:0 16px;font:500 17px var(--sans);color:var(--ink);border-radius:0}
.form-row input[type=email]::placeholder{color:#555}
.form-row input[type=email]:focus{outline:2px solid var(--sage-light);outline-offset:1px}
.form-row button{height:50px;padding:0 20px;background:var(--sage);color:#f6f6f1;border:1px solid rgba(255,255,255,.4);font:500 16px var(--sans);letter-spacing:.01em;cursor:pointer;white-space:nowrap;border-radius:0;transition:background .2s}
.form-row button:hover,.form-row button:focus-visible{background:#6d8b77}
.fine{text-align:center;font-size:14px;margin:12px 0 0;color:#e4e6e3}
.hp{position:absolute;left:-9999px}

/* Footer */
footer{display:flex;justify-content:center;align-items:center;gap:0;margin:22px 0 4px;font-size:15px;font-weight:600;color:var(--ink-soft)}
footer span{padding:4px 34px}
footer span+span{border-left:1px solid var(--rule)}

/* Thanks page */
.thanks{max-width:620px;margin:60px auto 40px;text-align:center}
.thanks p{color:var(--ink-soft);font-size:18px}
.thanks a{display:inline-flex;align-items:center;min-height:48px;padding:0 26px;margin-top:18px;background:var(--navy);color:#fff;text-decoration:none;font-weight:500;white-space:nowrap}

/* Responsive */
@media (max-width:1180px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:36px}
  .hero-copy{padding-left:12px}
}
@media (max-width:1100px){
  .signup{grid-template-columns:auto 1fr;gap:20px 28px}
  .signup .arch{display:none}
  .signup h2{border-right:0;padding-right:0}
  .signup form{grid-column:1/-1}
}
@media (max-width:900px){
  .frame{padding:16px 22px 22px}
  .corner.tl,.corner.tr{width:40px;height:40px}
  .hero{grid-template-columns:1fr;gap:34px;margin-top:22px}
  .hero-copy{padding:0 4px}
  .subtitle{margin-bottom:26px}
  .collage{margin:0 -22px;padding-bottom:0}
  .collage .historic{aspect-ratio:350/318;object-position:left top}
  .collage .rendering{position:relative;top:auto;right:auto;width:84%;margin:-44px 16px 0 auto}
  .signup{margin:30px -22px 0;padding:34px 26px;grid-template-columns:1fr;text-align:left}
  .signup h2{font-size:32px;line-height:1.2}
  .form-row{flex-direction:column}
  .form-row input[type=email]{flex:none;height:52px}
  .form-row button{width:100%;min-height:52px}
  footer{flex-direction:column;gap:2px}
  footer span+span{border-left:0}
}