/* NH Belongs To Christ. Values are lifted from the design handoff (design/source/page.dc.html). */

:root {
  --ink: #1d1812;
  --paper: #f2ead8;
  --red: #9e2a1e;
  --muted: #5a4d3c;
  --body-2: #3b3226;
  --gold: #d9b77a;
  --desk: #2a241d;

  --slab: 'Alfa Slab One', serif;
  --fell: 'IM Fell English', serif;
  --fell-sc: 'IM Fell English SC', serif;
  --caslon: 'Libre Caslon Text', Georgia, serif;

  --gutter: clamp(20px, 6vw, 72px);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--desk); color: var(--ink); -webkit-font-smoothing: antialiased; }
a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
input, button { font: inherit; }
::selection { background: var(--red); color: var(--paper); }

/* ---- Desk and sheet ---- */

.desk { padding: clamp(0px, 3vw, 40px); min-height: 100vh; }
.sheet {
  max-width: 880px;
  margin: 0 auto;
  background: var(--paper);
  background-image:
    radial-gradient(ellipse at 30% 10%, rgba(255, 255, 255, 0.35), transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(120, 90, 40, 0.10), transparent 55%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  font-family: var(--caslon);
}

.rule { height: 9px; }
.rule-thick-thin { border-top: 4px solid var(--ink); border-bottom: 1px solid var(--ink); }
.rule-thin-thick { border-top: 1px solid var(--ink); border-bottom: 4px solid var(--ink); }

/* ---- Buttons ---- */

.btn { display: inline-block; text-decoration: none; font-family: var(--slab); text-transform: uppercase; border: none; cursor: pointer; }
.btn-red {
  background: var(--red);
  color: var(--paper);
  outline: 2px solid var(--red);
  outline-offset: 4px;
  letter-spacing: 0.06em;
}
.btn-red:hover, .btn-red:focus-visible { background: var(--ink); color: var(--paper); outline-color: var(--ink); }
.btn-red:disabled { background: var(--ink); outline-color: var(--ink); cursor: progress; }
.btn-ink { background: var(--ink); color: var(--paper); padding: 13px 26px; font-size: 18px; letter-spacing: 0.05em; }
.btn-ink:hover, .btn-ink:focus-visible { background: var(--red); color: var(--paper); }
.btn-ink:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

/* ---- Masthead ---- */

.masthead { padding: clamp(20px, 5vw, 56px) var(--gutter) 0; }
.masthead-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; flex-wrap: wrap; }
.masthead-name { display: flex; flex-direction: column; gap: 2px; }
.masthead-title { font-family: var(--fell-sc); font-size: 22px; letter-spacing: 0.06em; line-height: 1; }
.masthead-motto { font-family: var(--fell); font-style: italic; font-size: 15px; color: var(--muted); }
.masthead-place { font-family: var(--fell-sc); font-size: 15px; letter-spacing: 0.08em; color: var(--muted); }

/* ---- Hero ---- */

.hero {
  padding: clamp(32px, 6vw, 56px) var(--gutter) 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.eyebrow { font-family: var(--fell-sc); font-size: clamp(16px, 2.4vw, 20px); letter-spacing: 0.3em; color: var(--red); }
.hero h1 { margin: 0; width: 100%; display: flex; justify-content: center; }
.hero picture { display: contents; }
.hero-logo { width: 100%; max-width: 480px; height: auto; display: block; }

/* Three cells side by side, or one stacked column: never a 2 + 1 wrap. The dividers
   follow the layout, vertical when side by side and horizontal when stacked. */
.details-wrap { width: 100%; max-width: 680px; margin-top: 10px; container-type: inline-size; }
.details { display: grid; grid-template-columns: 1fr; margin: 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.detail { padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.detail + .detail { border-top: 1px solid var(--ink); }
@container (min-width: 540px) {
  .details { grid-template-columns: repeat(3, 1fr); }
  .detail + .detail { border-top: none; border-left: 1px solid var(--ink); }
}
.details dt { font-family: var(--fell-sc); font-size: 16px; letter-spacing: 0.14em; color: var(--muted); }
.details dd { margin: 0; font-family: var(--slab); font-size: clamp(24px, 3.6vw, 30px); text-transform: uppercase; }
.details .red { color: var(--red); }

.year { font-family: var(--fell); font-style: italic; font-size: clamp(17px, 2.4vw, 20px); color: var(--muted); }
.btn-hero { margin-top: 6px; padding: 14px clamp(20px, 6vw, 32px); font-size: 20px; }

/* ---- Intro ---- */

.intro { padding: clamp(36px, 6vw, 56px) var(--gutter) 0; }
.intro p { margin: 0; font-size: clamp(19px, 2.6vw, 23px); line-height: 1.6; text-align: center; text-wrap: balance; }
.intro strong { color: var(--red); }

/* ---- Verse ---- */

.verse-section { padding: clamp(40px, 6vw, 56px) var(--gutter) 0; }
.verse {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(28px, 5vw, 44px);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
.verse blockquote {
  margin: 0;
  font-family: var(--fell);
  font-style: italic;
  font-size: clamp(24px, 3.8vw, 34px);
  line-height: 1.3;
  max-width: 22em;
  text-wrap: balance;
}
.verse figcaption { font-family: var(--fell-sc); font-size: 17px; letter-spacing: 0.14em; color: var(--gold); }

/* ---- Bring it to church ---- */

.church { padding: clamp(40px, 6vw, 56px) var(--gutter) 0; }
.church-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 32px;
  align-items: center;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 32px 0;
}
.church-thumb { display: flex; justify-content: center; }
.church-thumb img { display: block; width: 264px; height: 408px; flex: none; box-shadow: 0 8px 24px rgba(29, 24, 18, 0.25); }
.church-copy { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.church-copy h2 { margin: 0; font-family: var(--slab); font-weight: 400; font-size: clamp(28px, 4.4vw, 40px); text-transform: uppercase; line-height: 0.95; }
.church-copy p { margin: 0; font-family: var(--fell); font-style: italic; font-size: clamp(18px, 2.4vw, 21px); line-height: 1.45; color: var(--body-2); }

/* ---- Sign the Roll ---- */

.join { padding: clamp(48px, 7vw, 72px) var(--gutter) 0; }
.join-head { padding: 32px 0 8px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.join-head h2 { margin: 0; font-family: var(--slab); font-weight: 400; font-size: clamp(34px, 6vw, 56px); text-transform: uppercase; line-height: 0.95; }
.join-sub { font-family: var(--fell); font-style: italic; font-size: clamp(18px, 2.4vw, 21px); color: var(--muted); max-width: 26em; text-wrap: balance; }

.signup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  column-gap: 36px;
  row-gap: 22px;
  padding: 24px 0 8px;
}
.field { display: flex; align-items: baseline; gap: 10px; font-family: var(--fell-sc); font-size: 20px; }
.field input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--ink);
  border-radius: 0;
  appearance: none;
  padding: 4px 2px;
  font-family: var(--fell);
  font-style: italic;
  font-size: 21px;
  color: var(--ink);
  outline: none;
}
.field input:focus { border-bottom-color: var(--red); }
.field input:autofill { box-shadow: 0 0 0 1000px var(--paper) inset; -webkit-text-fill-color: var(--ink); }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* The design has 14px above the button. The Turnstile widget comes first and is 0x0 unless
   it needs the visitor to act, so 2px of padding plus the 12px gap after it makes the 14. */
.signup-actions { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 2px; }
.btn-submit { padding: 16px 40px; font-size: 22px; }
.signup-error { display: none; margin: 0; font-family: var(--fell); font-style: italic; font-size: 18px; color: var(--red); }
.signup-error:target, .signup-error.is-shown { display: block; }

.joined { display: none; padding: 28px 0 8px; text-align: center; flex-direction: column; gap: 8px; align-items: center; outline: none; }
.joined:target, .joined.is-shown { display: flex; }
.joined:target ~ .signup, .joined.is-shown ~ .signup { display: none; }
.joined-title { font-family: var(--slab); font-size: 30px; color: var(--red); text-transform: uppercase; }
.joined-text { font-family: var(--fell); font-style: italic; font-size: 20px; color: var(--body-2); }

/* ---- Footer ---- */

.footer { padding: clamp(40px, 6vw, 56px) var(--gutter) clamp(24px, 5vw, 48px); }
.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  font-family: var(--fell);
  font-style: italic;
  font-size: 16px;
  color: var(--muted);
}