@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Crimson+Text:ital,wght@0,400;0,600;1,400;1,600&display=swap');

/* === Variables ===================================================== */
:root {
  --parchment:    #E8E3D6;
  --parchment-lt: #FAF8F3;
  --parchment-md: #F0EBE0;
  --parchment-hd: #EDE7D9;  /* header band tint */
  --gold:         #B8860B;
  --gold-lt:      #CCA030;
  --sepia:        #8B7355;
  --sepia-lt:     #A89070;
  --ink:          #2C2416;
  --ink-mid:      #4A3F2C;
  --rule:         #C8B89A;
}

/* === Reset ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* === Body ========================================================== */
body {
  font-family: 'Crimson Text', Georgia, 'Times New Roman', serif;
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--ink);
  background-color: var(--parchment);
  background-image:
    repeating-linear-gradient( 35deg, transparent, transparent 3px, rgba(100,78,40,.022) 3px, rgba(100,78,40,.022) 6px),
    repeating-linear-gradient(-55deg, transparent, transparent 4px, rgba(100,78,40,.014) 4px, rgba(100,78,40,.014) 8px);
  min-height: 100vh;
}
a       { color: var(--ink-mid); text-decoration: none; }
a:hover { color: var(--gold); }

/* === Frame (double-border newspaper card) ========================== */
.frame {
  border: 2px solid var(--gold);
  padding: 5px;
  background: var(--parchment-lt);
  box-shadow:
    0 2px 8px  rgba(44, 36, 22, .12),
    0 8px 40px rgba(44, 36, 22, .18);
}
.frame-in { border: 1px solid var(--gold); }

/* === Double rules (thick+thin / thin+thick) ======================= */
.dbl-rule               { display: flex; flex-direction: column; gap: 3px; }
.dbl-rule--top > div:first-child,
.dbl-rule--bot > div:last-child  { height: 3px; background: var(--ink); }
.dbl-rule--top > div:last-child,
.dbl-rule--bot > div:first-child { height: 1px; background: var(--ink); }

/* === Separators ==================================================== */
.sep-gold {
  height: 1px;
  background: linear-gradient(to right, var(--parchment-lt), var(--gold) 20%, var(--gold) 80%, var(--parchment-lt));
}
.sep { height: 1px; background: var(--rule); }

/* === Labels & ornaments =========================================== */
.sect-label {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--sepia);
  text-align: center;
  display: block;
}
.orn { color: var(--gold); text-align: center; letter-spacing: 0.4em; }

/* Decorative rule with ornament: ——— ✦ ——— */
.orn-rule {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--rule);
  margin: 0.75rem 0;
}
.orn-rule::before,
.orn-rule::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.orn-rule span   { color: var(--gold); font-size: 0.6rem; flex-shrink: 0; }

/* === Button ======================================================== */
.btn {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mid);
  border: 1px solid var(--gold);
  padding: 0.5rem 1.6rem;
  background: transparent;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover {
  background: var(--gold);
  color: var(--parchment-lt);
  box-shadow: 0 2px 10px rgba(184, 134, 11, .35);
}
.btn--dim { opacity: 0.38; pointer-events: none; }

/* ===================================================================
   PAGE: MASTHEAD  /
   =================================================================== */
.pg-masthead {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
}
.m-card { width: 100%; max-width: 700px; }

/* Decorative seal above masthead */
.m-seal {
  text-align: center;
  font-size: 2rem;
  color: var(--gold);
  letter-spacing: 0.5em;
  padding: 1.25rem 2rem 0.75rem;
  background: var(--parchment-hd);
}

.m-head {
  text-align: center;
  padding: 0.5rem 3rem 1.75rem;
  background: var(--parchment-hd);
}
.m-name {
  font-family: 'Cinzel', serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 5vw, 3rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.15;
  text-shadow: 0 1px 3px rgba(44, 36, 22, .12);
}
.m-co {
  font-family: 'Cinzel', serif;
  font-weight: 400;
  font-size: clamp(0.65rem, 1.8vw, 0.9rem);
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--sepia);
  margin-top: 0.4rem;
}
.m-est {
  font-style: italic;
  font-size: 0.9rem;
  color: var(--sepia);
  letter-spacing: 0.06em;
  margin-top: 1rem;
}
.m-mission {
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-mid);
  text-align: center;
  padding: 0.85rem 3rem;
  line-height: 1.75;
  border-bottom: 1px solid var(--rule);
}

.m-byline {
  font-family: 'Cinzel', serif;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sepia-lt);
  text-align: center;
  padding: 0.7rem 2rem;
  background: var(--parchment-lt);
}
.m-pubs { padding: 1.75rem 2.5rem 2.25rem; }

.pub-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: start;
  margin-top: 1.25rem;
  gap: 0;
}
.pub-col { padding: 0.5rem 2rem; text-align: center; }
.pub-col:first-child { padding-left: 0.5rem; }
.pub-col:last-child  { padding-right: 0.5rem; }
.col-rule { width: 1px; background: var(--rule); align-self: stretch; margin: 0.5rem 0; }

.pub-orn  { font-size: 0.75rem; color: var(--gold); letter-spacing: 0.3em; margin-bottom: 0.6rem; }
.pub-name {
  font-family: 'Cinzel', serif;
  font-weight: 400;
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.pub-sub  {
  font-style: italic;
  font-size: 0.875rem;
  color: var(--sepia);
  margin-bottom: 0.85rem;
  line-height: 1.5;
}
.pub-desc {
  font-size: 0.9rem;
  color: var(--ink-mid);
  margin-bottom: 1.1rem;
  line-height: 1.6;
  text-align: center;
}

.m-foot {
  text-align: center;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--sepia);
  padding: 0.9rem 2rem;
  background: var(--parchment-hd);
}

/* ===================================================================
   PAGE: PROMO  /daily-patriot/  /founding-scripture/
   =================================================================== */
.pg-promo {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
}
.p-card { width: 100%; max-width: 560px; }

.p-kicker {
  font-family: 'Cinzel', serif;
  font-size: 0.54rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sepia-lt);
  text-align: center;
  display: block;
  margin-bottom: 0.6rem;
}
.p-head {
  text-align: center;
  padding: 2rem 2.5rem 1.75rem;
  background: var(--parchment-hd);
}
.p-title {
  font-family: 'Cinzel', serif;
  font-weight: 400;
  font-size: clamp(1.75rem, 7vw, 3rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 0.45rem;
  text-shadow: 0 1px 3px rgba(44, 36, 22, .1);
}
.p-tagline {
  font-style: italic;
  color: var(--sepia);
  font-size: 1.05rem;
}

.p-body { padding: 1.75rem 2.5rem 2rem; }
.p-body > p {
  color: var(--ink-mid);
  margin-bottom: 1.25rem;
  text-align: justify;
  hyphens: auto;
}

.feat-list { list-style: none; margin: 0.5rem 0 1.5rem; }
.feat-list li {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  color: var(--ink-mid);
  font-size: 1rem;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--parchment-md);
}
.feat-list li:first-child { border-top: 1px solid var(--parchment-md); }
.feat-list li:nth-child(odd) { background: rgba(240, 235, 224, 0.5); }
.feat-list li::before { content: '✦'; color: var(--gold); font-size: 0.5rem; flex-shrink: 0; position: relative; top: -1px; }

.store-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1.25rem 0 0.5rem;
}
.store-note { text-align: center; font-size: 0.8rem; font-style: italic; color: var(--sepia-lt); }

.p-foot {
  font-size: 0.78rem;
  color: var(--sepia);
  font-style: italic;
  text-align: center;
  padding: 0.9rem 1.5rem;
  background: var(--parchment-hd);
  border-top: 1px solid var(--rule);
}
.p-foot a       { color: var(--sepia); }
.p-foot a:hover { color: var(--gold); }

/* ===================================================================
   PAGE: DOCUMENT  /*/privacy/
   =================================================================== */
.pg-doc { padding: 2.5rem 1rem; }
.d-card { max-width: 660px; margin: 0 auto; }
.d-body { padding: 2.75rem 3rem; }

.d-title {
  font-family: 'Cinzel', serif;
  font-weight: 400;
  font-size: 1.65rem;
  letter-spacing: 0.05em;
  color: var(--ink);
  margin-bottom: 0.25rem;
}
.d-meta {
  font-size: 0.875rem;
  color: var(--sepia);
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.d-body p {
  margin-bottom: 1.25rem;
  color: var(--ink-mid);
  text-align: justify;
  hyphens: auto;
}
.d-body h2 {
  font-family: 'Cinzel', serif;
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--sepia);
  margin: 2rem 0 0.75rem;
}
.d-body hr     { border: none; height: 1px; background: var(--rule); margin: 1.5rem 0; }
.d-body strong { color: var(--ink); font-weight: 600; }
.d-body a       { color: var(--ink-mid); }
.d-body a:hover { color: var(--gold); }

.d-foot {
  text-align: center;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--sepia);
  padding: 1rem 1.5rem;
  background: var(--parchment-hd);
  border-top: 1px solid var(--rule);
}
.d-foot a       { color: var(--sepia); }
.d-foot a:hover { color: var(--gold); }

/* === Responsive =================================================== */
@media (max-width: 540px) {
  .pub-grid   { grid-template-columns: 1fr; }
  .col-rule   { width: auto; height: 1px; margin: 1rem 0; }
  .pub-col    { padding: 0.5rem 0; }
  .m-seal, .m-head, .m-pubs { padding-left: 1.5rem; padding-right: 1.5rem; }
  .p-head, .p-body           { padding-left: 1.5rem; padding-right: 1.5rem; }
  .d-body                    { padding: 1.5rem; }
}