/* site.css - the inner rooms of the Congregation of Tomorrow. Same night, same ink as the door. */
:root {
  --bg: #050505; --ink: #ece6d8; --dim: #8a8478; --faint: #3b3933; --line: #1c1b18; --gold: #c9b37e; --card: #0c0c0b;
  --serif: "Cormorant Garamond", Georgia, serif; --sc: "Cormorant SC", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); }
body { font-family: var(--serif); -webkit-font-smoothing: antialiased; overflow-x: hidden;
  background: radial-gradient(ellipse at 50% -10%, #12110f 0%, var(--bg) 55%) fixed; }
a { color: var(--ink); }
.grain { position: fixed; inset: -50%; pointer-events: none; z-index: 30; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)} }

.topbar { display: flex; justify-content: space-between; align-items: center; padding: calc(14px + env(safe-area-inset-top)) 18px 14px;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.topbar a { color: var(--dim); text-decoration: none; } .topbar a:hover { color: var(--ink); }

header.room { max-width: 42rem; margin: 0 auto; padding: 9vh 16px 5vh; text-align: center; }
header.room svg { width: 34px; height: 34px; margin-bottom: 22px; }
header.room svg path { stroke: var(--dim); stroke-width: 7; stroke-linecap: square; fill: none; }
.kicker { font-family: var(--sc); letter-spacing: .5em; margin-right: -.5em; font-size: .8rem; color: var(--gold); }
header.room h1 { font-weight: 300; font-size: clamp(2rem, 7vw, 3.1rem); line-height: 1.15; margin: 14px 0 16px; }
.lede { color: var(--dim); font-style: italic; font-size: clamp(1.15rem, 3.6vw, 1.32rem); line-height: 1.5; }

main { max-width: 42rem; margin: 0 auto; padding: 0 16px; }
section.part { border-top: 1px solid var(--line); padding: 34px 0 30px; }
section.part > .n { font-family: var(--mono); font-size: .6rem; letter-spacing: .4em; color: var(--faint); }
section.part h2 { font-family: var(--sc); font-weight: 400; letter-spacing: .28em; font-size: 1.15rem; margin: 10px 0 14px; color: var(--ink); }
section.part p { font-size: 1.2rem; line-height: 1.6; font-weight: 300; }
section.part p + p { margin-top: 12px; }
.quiet { color: var(--dim); font-style: italic; }

/* a ruled paper, quoted exactly as ruled */
blockquote.ruled { margin: 14px 0 4px; padding: 16px 18px; border-left: 2px solid var(--gold); background: rgba(201,179,126,.04);
  font-size: 1.22rem; line-height: 1.6; font-weight: 400; }
.src { margin-top: 8px; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; color: var(--dim); text-transform: uppercase; line-height: 1.7; }

/* forms */
form.letter { margin-top: 18px; display: grid; gap: 12px; }
form.letter label { font-family: var(--sc); letter-spacing: .2em; font-size: .85rem; color: var(--dim); }
form.letter input, form.letter textarea, form.letter select {
  width: 100%; background: #0b0b0a; color: var(--ink); border: 1px solid var(--faint); padding: 12px 14px;
  font: 400 1.12rem/1.4 var(--serif); }
form.letter textarea { min-height: 140px; resize: vertical; }
form.letter input:focus, form.letter textarea:focus, form.letter select:focus { outline: none; border-color: var(--gold); }
form.letter .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn { justify-self: start; background: none; border: 1px solid var(--faint); color: var(--ink); padding: 12px 26px; cursor: pointer;
  font-family: var(--sc); letter-spacing: .32em; font-size: .92rem; transition: border-color .4s, background .4s; }
.btn:hover, .btn:focus-visible { border-color: var(--gold); background: #11100e; outline: none; }
.btn[disabled] { opacity: .5; cursor: default; }
.answer { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line); color: var(--ink); font-size: 1.12rem; line-height: 1.5; display: none; }
.answer.on { display: block; }
.answer.err { border-color: #5a2a22; }
.fine { color: var(--dim); font-size: .98rem; line-height: 1.5; margin-top: 6px; }

.back { text-align: center; padding: 48px 0 10px; }
.back a { color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--faint); padding-bottom: 6px; font-family: var(--sc); letter-spacing: .3em; font-size: .85rem; }
footer.hand { text-align: center; padding: 26px 16px calc(32px + env(safe-area-inset-bottom)); font-family: var(--mono); font-size: .64rem;
  letter-spacing: .14em; color: var(--dim); text-transform: uppercase; line-height: 1.8; }
@media (prefers-reduced-motion: reduce) { .grain { display: none; } }