* { box-sizing:border-box; }
:root {
  --bg:#060606;
  --panel:#0b0b0b;
  --ink:#f1eee8;
  --muted:rgba(241,238,232,.64);
  --quiet:rgba(241,238,232,.42);
  --line:rgba(241,238,232,.12);
  --gold:#b79b65;
}
html, body {
  margin:0;
  min-height:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:Arial, Helvetica, sans-serif;
}
body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color:inherit; }
img { display:block; width:100%; height:auto; }
.page {
  position:relative;
  z-index:1;
  width:min(100%, 1280px);
  height:100svh;
  margin:0 auto;
  padding:clamp(18px, 2.4vw, 30px);
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:16px;
}
.topbar, .footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.brand { display:block; width:132px; }
.drop, .kicker, .footer {
  margin:0;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:10px;
}
.stage {
  min-height:0;
  display:grid;
  grid-template-columns:minmax(300px, .78fr) minmax(540px, 1.22fr);
  gap:clamp(24px, 4vw, 46px);
  align-items:center;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:12px 0;
}
.content { max-width:470px; }
.kicker { color:var(--gold); margin-bottom:18px; }
h1 {
  margin:0;
  font-size:clamp(40px, 5vw, 74px);
  line-height:.92;
  letter-spacing:-.06em;
  font-weight:500;
  max-width:10.5ch;
}
.intro {
  margin:20px 0 0;
  max-width:430px;
  color:var(--muted);
  line-height:1.62;
  font-size:15px;
}
.signup {
  margin-top:28px;
  width:min(100%, 430px);
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.signup input {
  min-width:0;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-size:14px;
  padding:8px 0;
  outline:none;
}
.signup input::placeholder { color:rgba(241,238,232,.36); }
.signup input:focus { border-bottom-color:var(--gold); }
.signup button {
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.14em;
  padding:8px 13px;
  cursor:pointer;
}
.signup button:hover,
.signup button:focus-visible {
  background:var(--ink);
  color:var(--bg);
  border-color:var(--ink);
}
.note {
  min-height:14px;
  margin:10px 0 0;
  color:var(--quiet);
  font-size:12px;
}
.gallery {
  min-height:0;
  height:min(72vh, 700px);
  display:grid;
  grid-template-columns:1fr minmax(200px, .52fr);
  gap:16px;
  align-items:stretch;
}
.gallery-main,
.gallery-detail {
  overflow:hidden;
  background:var(--panel);
  border:1px solid rgba(255,255,255,.06);
}
.gallery-main img,
.gallery-detail img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.gallery-detail {
  align-self:end;
  height:62%;
}
.footer {
  border-top:1px solid var(--line);
  padding-top:14px;
  text-transform:none;
  letter-spacing:.06em;
  font-size:11px;
}
.footer p { margin:0; }
.footer a {
  text-decoration:none;
  border-bottom:1px solid var(--line);
  padding-bottom:3px;
}
.sr-only {
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
@media (max-width: 980px) {
  .page { padding:18px; }
  .stage { grid-template-columns:1fr; gap:18px; padding:20px 0; }
  .content { max-width:none; }
  h1 { max-width:none; font-size:clamp(38px, 8vw, 58px); }
  .intro { max-width:560px; }
  .gallery { height:min(42vh, 360px); grid-template-columns:1fr 0.8fr; }
  .gallery-detail { height:auto; }
}
@media (max-width: 640px) {
  .drop { display:none; }
  .topbar, .footer { align-items:flex-start; flex-direction:column; gap:10px; }
  .gallery { height:auto; grid-template-columns:1fr; }
  .gallery-main { aspect-ratio:4/3; }
  .gallery-detail { height:auto; aspect-ratio:4/5; }
  .signup { grid-template-columns:1fr; }
  .signup button { justify-self:start; }
  .footer { font-size:10px; }
}