@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --cream:#F3EDE3;
  --black:#1A1A1A;
  --maroon:#5B1E1E;
  --brass:#B08D57;
  --muted:#746D64;
  --footer:#17191A;
}

*{box-sizing:border-box}
html{background:var(--cream);min-height:100%}
body{
  margin:0;
  min-height:100vh;
  color:var(--black);
  background:
    radial-gradient(circle at 50% -10%,rgba(255,255,255,.76),transparent 34rem),
    var(--cream);
  font-family:"Roboto Slab",Georgia,serif;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
}

main{position:relative;padding:58px 22px 66px}
.hero{width:min(700px,100%);margin:0 auto;text-align:center}
.brand-lockup{width:min(585px,92vw);margin:0 auto}
.brand-lockup img{display:block;width:100%;height:auto;mix-blend-mode:multiply}

.ornament{width:min(380px,65vw);margin:28px auto 24px;display:flex;align-items:center;gap:14px;color:var(--brass)}
.ornament span{height:1px;flex:1;background:var(--brass);opacity:.85}
.ornament b{font-size:16px;line-height:1;font-weight:500}

h1{
  margin:0;
  font-size:clamp(3.1rem,8vw,6.15rem);
  line-height:.98;
  letter-spacing:.055em;
  font-weight:800;
}

.signup-form{max-width:650px;margin:50px auto 0}
.signup-row{display:flex;gap:18px;align-items:stretch}
.signup-row input{
  flex:1;
  min-width:0;
  height:76px;
  border:2px solid var(--brass);
  background:rgba(255,255,255,.28);
  color:var(--black);
  padding:0 28px;
  font:600 .96rem/1 "Inter",Arial,sans-serif;
  letter-spacing:.14em;
  outline:none;
  border-radius:0;
}
.signup-row input::placeholder{color:#77726c;opacity:1}
.signup-row input:focus{box-shadow:0 0 0 3px rgba(176,141,87,.12)}
.signup-row button{
  width:190px;
  border:0;
  border-radius:0;
  background:var(--maroon);
  color:#fffaf2;
  font:700 1rem/1 "Roboto Slab",Georgia,serif;
  letter-spacing:.14em;
  cursor:pointer;
  transition:filter .15s ease,transform .05s ease;
}
.signup-row button:hover{filter:brightness(.92)}
.signup-row button:active{transform:translateY(1px)}
.signup-row button:disabled{opacity:.72;cursor:wait}
.form-status{
  min-height:22px;
  margin:17px 0 0;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.4;
  letter-spacing:.02em;
}
.form-status.success{color:var(--maroon);font-weight:700}
.form-status.error{color:#8e1f2f;font-weight:700}
.lock{display:inline-block;margin-right:6px;font-family:Arial,sans-serif;font-size:.72rem;color:#77726c;transform:scaleX(.8)}

.our-story{width:min(620px,100%);margin:58px auto 0;text-align:center}
.our-story h2{
  margin:0;
  color:var(--maroon);
  font-size:1.18rem;
  line-height:1;
  letter-spacing:.19em;
  font-weight:800;
}
.story-ornament{width:210px;margin:19px auto 24px;display:flex;align-items:center;gap:14px;color:var(--brass)}
.story-ornament span{height:1px;flex:1;background:var(--brass)}
.story-ornament b{font-size:14px;line-height:1;font-weight:500}
.our-story p{
  margin:0;
  font-size:1rem;
  line-height:1.72;
  letter-spacing:.005em;
  color:#222;
}

.site-footer{position:relative;background:var(--footer);color:var(--brass);padding:28px 22px 30px}
.site-footer:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.15;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E")}
.footer-inner{position:relative;width:min(860px,100%);margin:0 auto;min-height:118px;display:grid;grid-template-columns:1fr 1px 1.35fr;align-items:center;gap:38px}
.footer-left{text-align:center}
.domain{font-size:.9rem;letter-spacing:.12em;font-weight:600}
.short-rule{width:132px;height:1px;background:var(--brass);margin:13px auto 10px;opacity:.85}
.socials{display:flex;justify-content:center;align-items:center;gap:24px;font-family:Arial,sans-serif;font-weight:700;color:var(--brass)}
.instagram{width:2rem;height:2rem;color:inherit;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.instagram svg{width:100%;height:100%;display:block}
.instagram:hover,.instagram:focus{opacity:.78}
.footer-divider{width:1px;height:80px;background:var(--brass);opacity:.8;justify-self:center}
.footer-right{text-align:center;font-size:1rem;line-height:1.5;letter-spacing:.12em;font-weight:700}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:680px){
  main{padding:34px 18px 48px}
  .brand-lockup{width:min(540px,98vw)}
  .ornament{margin:20px auto 19px}
  h1{font-size:clamp(2.8rem,13.5vw,4.5rem)}
  .signup-form{margin-top:38px}
  .signup-row{gap:10px}
  .signup-row input{height:68px;padding:0 18px;font-size:.82rem;letter-spacing:.095em}
  .signup-row button{height:56px;width:150px;font-size:.86rem;letter-spacing:.1em}
  .our-story{margin-top:48px}
  .our-story p{font-size:.94rem;line-height:1.68}
  .footer-inner{grid-template-columns:1fr;gap:20px;min-height:0}
  .footer-divider{width:120px;height:1px}
  .footer-right{padding-bottom:2px}
}

@media(max-width:470px){
  .signup-row{flex-direction:column}
  .signup-row button{width:100%}
  .signup-row input{text-align:center}
  .our-story p{font-size:.9rem}
}