/* vestibule quarterly — all styles. edit tokens once, both pages follow. */

:root {
  --paper:  #f6f4ef;
  --ink:    #0b0b0e;
  --muted:  rgba(11, 11, 14, 0.62);
  --faint:  rgba(11, 11, 14, 0.40);
  --rule:   rgba(11, 11, 14, 0.18);
  --surface: rgba(246, 244, 239, 0.72); /* signup box, over shader */
  --card:   rgba(255, 255, 255, 0.35);  /* form card, over paper */
  --scrim:  rgba(246, 244, 239, 0.62);  /* paper veil behind text */
  --font-display: "Fraunces", Georgia, serif;
  --font-ui: "Space Grotesk", system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:  #0d0d10;
    --ink:    #f2efe8;
    --muted:  rgba(242, 239, 232, 0.60);
    --faint:  rgba(242, 239, 232, 0.38);
    --rule:   rgba(242, 239, 232, 0.20);
    --surface: rgba(255, 255, 255, 0.08);
    --card:   rgba(255, 255, 255, 0.05);
    --scrim:  rgba(13, 13, 16, 0.60);
  }
}

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/Fraunces-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/SpaceGrotesk-var.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
body.home { min-height: 100dvh; font-weight: 400; line-height: 1.6; overflow-x: hidden; }
body.doc  { font-size: 12pt; line-height: 1.65; padding: clamp(1.5rem, 5vw, 3rem); }


/* home */

#gl {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; display: block; pointer-events: none;
}
.scrim {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(135% 105% at 50% 44%,
    var(--scrim) 0%, var(--scrim) 34%, transparent 78%);
}

/* dithered Prometheus backdrop (public domain, Füger 1817). ink stipple on
   transparent, so it tints with the theme; inverted in dark so it reads. */
.art {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: right center / auto 100% no-repeat url("/art/prometheus.png");
  opacity: 0.45;
  /* dissolve the left edge so the figure bleeds in instead of a hard rectangle */
  -webkit-mask-image: linear-gradient(to left, #000 45%, transparent 90%);
  mask-image: linear-gradient(to left, #000 45%, transparent 90%);
}
@media (prefers-color-scheme: dark) { .art { opacity: 0.6; filter: invert(1); } }

main {
  position: relative; z-index: 1;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  gap: clamp(2rem, 6vh, 4rem);
}

.bar {
  display: flex; justify-content: space-between; align-items: baseline;
  text-transform: uppercase; letter-spacing: 0.28em;
  font-size: 0.62rem; color: var(--muted);
}
.bar a {
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--faint); padding-bottom: 1px;
}
.bar a:hover { border-color: var(--ink); }
.bar .dot::before {
  content: ""; display: inline-block;
  width: 0.5em; height: 0.5em; margin-right: 0.6em;
  border-radius: 50%; background: var(--ink);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: .25 } 50% { opacity: 1 } }

.masthead {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  align-items: center; text-align: center;
  gap: clamp(1rem, 3vh, 2rem);
}

.seal {
  width: min(80vmin, 640px);
  aspect-ratio: 1;
  opacity: 0; transform: scale(0.92) rotate(-6deg);
  transition: opacity 1.1s ease, transform 1.4s cubic-bezier(.2, .8, .2, 1);
  transition-delay: .15s;
}
.type-in .seal { opacity: 1; transform: none; }
.seal svg { width: 100%; height: 100%; display: block; overflow: visible; }

.seal .ring-text {
  font-family: var(--font-display);
  font-weight: 600; text-transform: uppercase;
  fill: var(--ink);
}
.seal .ring-spin {
  transform-box: fill-box; transform-origin: center;
  animation: seal-spin 60s linear infinite;
}
@keyframes seal-spin { to { transform: rotate(360deg); } }

.seal .core-halo { fill: var(--paper); opacity: 0.55; }
.seal .hair { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.seal .core-no {
  font-family: var(--font-display); font-weight: 600;
  font-size: 190px; fill: var(--ink);
}
.seal .core-no tspan.sup { font-size: 78px; }
.seal .core-issue {
  font-family: var(--font-ui); font-weight: 500;
  font-size: 44px; letter-spacing: 10px; fill: var(--ink);
  text-transform: uppercase;
}
.seal .core-tag {
  font-family: var(--font-ui); font-weight: 400;
  font-size: 26px; letter-spacing: 6px; fill: var(--muted);
  text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
  .seal .ring-spin { animation: none; }
}

.strap {
  font-family: var(--font-display);
  font-style: italic; font-weight: 300;
  font-size: clamp(1.6rem, 5.2vw, 3.4rem);
  line-height: 1.05; letter-spacing: -0.015em;
  color: var(--ink); max-width: 16ch; text-wrap: balance;
  opacity: 0; transform: translateY(0.6em);
  transition: opacity 1s ease, transform 1s ease;
  transition-delay: .9s;
}
.strap em { font-style: normal; }
.type-in .strap { opacity: 1; transform: none; }

.plate {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: end;
  padding-top: clamp(1.5rem, 4vh, 3rem);
  border-top: 1px solid var(--ink);
  opacity: 0; transform: translateY(1em);
  transition: opacity 1s ease, transform 1s ease;
  transition-delay: 1.2s;
}
.type-in .plate { opacity: 1; transform: none; }
@media (max-width: 720px) { .plate { grid-template-columns: 1fr; } }

.lede {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.6; max-width: 44ch; color: var(--ink);
}
.lede em { font-family: var(--font-display); font-style: italic; }
.lede::first-letter {
  font-family: var(--font-display); font-weight: 600;
  font-size: 3.6em; line-height: 0.7; float: left;
  padding: 0.06em 0.1em 0 0;
}

.aside { display: flex; flex-direction: column; gap: 1.25rem; }

.issue {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--faint); padding-bottom: 0.75rem;
}
.issue .no  { font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; }
.issue .ttl { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; }
.issue .st  {
  text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 0.6rem; color: var(--muted); white-space: nowrap;
}
.issue-dek {
  font-family: var(--font-display); font-style: italic;
  font-size: 0.92rem; color: var(--muted); margin-top: -0.35rem;
}

form.signup {
  display: flex; align-items: stretch;
  border: 1px solid var(--ink);
  background: var(--surface);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
form.signup input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  padding: 0.75rem 0.9rem; font: inherit; color: var(--ink);
}
form.signup input::placeholder { color: var(--faint); }
form.signup input:focus { outline: none; }
form.signup button {
  border: 0; border-left: 1px solid var(--ink);
  background: var(--ink); color: var(--paper);
  padding: 0.75rem 1.1rem; font: inherit; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem;
  cursor: pointer; transition: background .2s, color .2s;
}
form.signup button:hover { background: var(--paper); color: var(--ink); }

.signup.done {
  border-style: dashed; align-items: center; justify-content: center;
  padding: 0.75rem;
}
.signup.done::after {
  content: "✓ You're on the list.";
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink);
}
.signup.done input, .signup.done button { display: none; }

.note { font-size: 0.68rem; color: var(--muted); letter-spacing: 0.04em; }
.note a { color: var(--ink); }


/* submissions */

.wrap { max-width: 40rem; margin: 0 auto; }

.top {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.75rem; margin-bottom: 2.5rem;
  text-transform: uppercase; letter-spacing: 0.24em; font-size: 0.6rem;
}
.top a { color: var(--ink); text-decoration: none; }
.top .home { font-weight: 600; }

h1 {
  font-family: var(--font-display);
  font-weight: 600; text-transform: uppercase;
  font-size: clamp(2.2rem, 8vw, 3.4rem);
  line-height: 0.95; letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}
.dek {
  font-family: var(--font-display); font-style: italic; font-weight: 340;
  font-size: 1.15rem; color: var(--muted); margin-bottom: 2.5rem;
}
h2 {
  font-family: var(--font-ui);
  text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 0.7rem; color: var(--faint);
  border-bottom: 1px solid var(--rule); padding-bottom: 0.4rem;
  margin: 2.5rem 0 1rem;
}

p { margin-bottom: 1rem; }
p em, li em { font-family: var(--font-display); font-style: italic; }
strong { font-weight: 600; }

ul { list-style: none; margin: 0 0 1rem; }
li { padding-left: 1.4rem; position: relative; margin-bottom: 0.6rem; }
li::before { content: "—"; position: absolute; left: 0; color: var(--faint); }

.lead { font-size: 1.05rem; }
.lead::first-letter {
  font-family: var(--font-display); font-weight: 600;
  font-size: 3.4rem; float: left; line-height: 0.72;
  padding: 0.05em 0.12em 0 0;
}

.meta {
  display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1.25rem;
  font-size: 0.82rem; color: var(--muted);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 1rem 0; margin: 1.5rem 0;
}
.meta dt {
  text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.62rem; color: var(--faint); align-self: baseline;
}
.meta dd { margin: 0; }

.form-card {
  border: 1px solid var(--ink);
  padding: clamp(1.25rem, 4vw, 2rem);
  margin-top: 1.5rem;
  background: var(--card);
}
.field { margin-bottom: 1.1rem; }
.field label {
  display: block; text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.62rem; color: var(--muted); margin-bottom: 0.4rem;
}
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--rule); background: var(--paper);
  color: var(--ink); font: inherit; font-size: 0.95rem;
  padding: 0.6rem 0.7rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--ink);
}
.field textarea { resize: vertical; min-height: 7rem; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px) { .row { grid-template-columns: 1fr; } }

button.submit {
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  font: inherit; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.72rem; padding: 0.8rem 1.4rem; cursor: pointer;
  transition: background .2s, color .2s;
}
button.submit:hover { background: var(--paper); color: var(--ink); }

.thanks {
  display: none; border: 1px solid var(--ink); padding: 1rem 1.25rem;
  margin-top: 1rem; font-family: var(--font-display); font-style: italic;
}
.thanks.show { display: block; }

.fallback { font-size: 0.8rem; color: var(--muted); margin-top: 1rem; }
.fallback a { color: var(--ink); }

footer {
  margin-top: 3.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule);
  color: var(--faint); font-size: 0.72rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
}
footer a { color: var(--muted); }