@font-face {
  font-family: "Colo Pro";
  src: url("colo-pro.otf") format("opentype");
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

:root {
  --paper: #e9e0cf;
  --ink: #f4efe4;
  --muted: rgba(244, 239, 228, .68);
  --line: rgba(244, 239, 228, .42);
  --night: #080909;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  background: var(--night);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}

.landing {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.art {
  position: absolute;
  inset: -3%;
  z-index: -3;
  background-image: url("background.jpg");
  background-size: cover;
  background-position: center 52%;
  filter: saturate(.72) contrast(1.08) brightness(.52);
  transform: scale(1.035);
}

.veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 50% 46%, rgba(5, 7, 9, .08) 0 22%, rgba(5, 7, 9, .48) 66%, rgba(5, 7, 9, .78) 100%),
    linear-gradient(to bottom, rgba(5, 7, 9, .34), rgba(5, 7, 9, .10) 44%, rgba(5, 7, 9, .58));
}

.content {
  width: min(900px, 88vw);
  text-align: center;
  padding: 8vh 0 13vh;
  text-shadow: 0 2px 18px rgba(0,0,0,.65);
}

.eyebrow,
.coming,
footer {
  letter-spacing: .28em;
  font-weight: 600;
}

.eyebrow {
  margin: 0 0 2rem;
  font-size: clamp(.62rem, 1vw, .78rem);
  color: var(--muted);
}

h1 {
  margin: 0;
  line-height: .78;
  font-weight: normal;
  letter-spacing: -.075em;
}

h1 .the,
h1 .bench {
  display: block;
  font-family: "Colo Pro", Arial, Helvetica, sans-serif;
}

h1 .the {
  font-size: clamp(2.1rem, 6vw, 4.8rem);
  letter-spacing: -.04em;
  margin: 0 0 .22em;
}

h1 .bench {
  font-size: clamp(5rem, 18vw, 12.5rem);
  -webkit-text-stroke: 1px rgba(255,255,255,.15);
}

.premise {
  margin: clamp(2.4rem, 6vh, 4.8rem) auto 0;
  max-width: 620px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.05rem, 2vw, 1.42rem);
  line-height: 1.55;
  font-style: italic;
  color: rgba(255,255,255,.92);
}

.rule {
  width: 42px;
  height: 1px;
  background: var(--line);
  margin: 2rem auto 1.4rem;
}

.coming {
  margin: 0;
  font-size: .68rem;
  color: var(--muted);
}

footer {
  position: absolute;
  left: 50%;
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: 92%;
  font-size: clamp(.48rem, 1.1vw, .62rem);
  color: rgba(255,255,255,.52);
  text-align: center;
}

.links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.05rem;
  flex-wrap: wrap;
}

.links a {
  color: inherit;
  text-decoration: none;
  transition: color .18s ease, opacity .18s ease;
}

.links a:hover,
.links a:focus-visible {
  color: var(--ink);
}

.star { font-size: .7em; opacity: .6; }

@media (max-width: 600px) {
  .art {
    background-size: auto 100%;
    background-position: center center;
  }

  .content { width: 92vw; padding-bottom: 16vh; }
  .eyebrow { margin-bottom: 1.6rem; }
  .premise { width: 86%; }
  footer { letter-spacing: .16em; }
  .links { gap: .55rem .75rem; }
  .star { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}


 .signup {
  margin: 2.15rem auto 0;
  width: min(500px, 92vw);
}

.signup-label {
  margin: 0 0 .35rem;
  font-size: .58rem;
  letter-spacing: .28em;
  font-weight: 600;
  color: var(--muted);
}

/* Keep Substack's own 480×320 layout intact, then scale the whole thing
   on narrow screens. This avoids the iframe's internal scrollbar. */
.substack-frame {
  width: 480px;
  height: 320px;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.substack-frame iframe {
  display: block;
  width: 480px;
  height: 320px;
  border: 1px solid #333;
  background: #fff;
  transform-origin: top left;
}

@media (max-width: 520px) {
  .content { padding-top: 5vh; padding-bottom: 19vh; }
  .signup { margin-top: 1.55rem; }
  .substack-frame { width: 408px; height: 272px; }
  .substack-frame iframe { transform: scale(.85); }
}

@media (max-width: 440px) {
  .substack-frame { width: 346px; height: 231px; }
  .substack-frame iframe { transform: scale(.72); }
}

@media (max-width: 375px) {
  .substack-frame { width: 312px; height: 208px; }
  .substack-frame iframe { transform: scale(.65); }
}