/* Top Tip of the Day — old-school newspaper theme
   Shared by index.html and thank-you.html. */

:root {
  --paper: #ffffff;
  --ink: #000000;
  --rule: #000000;
  --stamp: #000000;
  --measure: 68ch;
}

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'PT Serif', Georgia, serif;
  text-wrap: pretty;
}

a { color: var(--stamp); }
a:hover { color: var(--ink); }

.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px clamp(20px, 5vw, 56px) 64px;
}

.rule-thick {
  height: 0;
  border-top: 4px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 14px 0;
}
.rule-thin {
  height: 0;
  border-top: 1px solid var(--rule);
  margin: 32px 0;
}

/* Dateline */
.dateline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}
.dateline-mark { color: var(--ink); flex-shrink: 0; }

/* Masthead */
.masthead { text-align: center; padding: 18px 0 6px; }
.masthead h1 {
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-weight: 900;
  font-size: clamp(48px, 8vw, 92px);
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1;
  text-transform: capitalize;
}
.masthead-sub {
  font-family: 'PT Serif', serif;
  font-style: italic;
  font-size: 16px;
  margin-top: 10px;
  letter-spacing: 0.02em;
}

/* Section nav */
.section-nav {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 10px 0;
}
.section-nav a { color: var(--ink); text-decoration: none; }
.section-nav a:hover { color: var(--stamp); }

/* Lead / hero */
.lead { text-align: center; padding: 8px 0 4px; }
.headline {
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.06;
  margin: 0 auto;
  max-width: 22ch;
}
.deck {
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  max-width: 56ch;
  margin: 16px auto 0;
}
.byline {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 14px 0 0;
  font-weight: 700;
}
.lead-body {
  text-align: left;
  max-width: var(--measure);
  margin: 22px auto 0;
  column-count: 1;
}
.lead-body p { font-size: 17px; line-height: 1.7; margin: 0 0 14px; }
.drop-cap::first-letter {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 64px;
  float: left;
  line-height: 0.8;
  padding: 6px 8px 0 0;
}

.cta-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 26px 0 4px;
}
.btn-np {
  font-family: 'PT Serif', serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 13px 26px;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn-np:hover { background: var(--ink); color: var(--paper); }
.btn-np.solid { background: var(--ink); color: var(--paper); }
.btn-np.solid:hover { background: var(--stamp); border-color: var(--stamp); color: var(--paper); }

/* At a glance / next box */
.briefing, .next-box {
  border: 3px double var(--ink);
  padding: 18px 22px;
  max-width: 640px;
  margin: 0 auto;
}
.next-box { text-align: left; }
.briefing h3, .next-box h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 18px;
  margin: 0 0 10px;
  text-align: center;
}
.next-box h3 { margin: 0 0 12px; }
.briefing table { width: 100%; border-collapse: collapse; }
.briefing td {
  padding: 7px 4px;
  font-size: 15px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
}
.briefing tr:last-child td { border-bottom: 0; }
.briefing .b-label { color: color-mix(in srgb, var(--ink) 70%, transparent); }
.briefing .b-val {
  text-align: right;
  font-weight: 700;
  font-family: 'Playfair Display', serif;
  font-size: 18px;
}
.next-box ol { margin: 0; padding-left: 1.3em; }
.next-box li { font-size: 15.5px; line-height: 1.65; margin-bottom: 10px; }
.next-box li:last-child { margin-bottom: 0; }

/* Why sign up columns */
.section-kicker {
  text-align: center;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  margin-bottom: 18px;
}
.columns-3 { columns: 3; column-gap: 40px; }
.columns-3 .item { break-inside: avoid; margin-bottom: 22px; }
.columns-3 h4 { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 20px; margin: 0 0 6px; }
.columns-3 p { font-size: 15.5px; line-height: 1.6; margin: 0; }
@media (max-width: 760px) { .columns-3 { columns: 1; } }

/* Photo + three steps */
.photo-block {
  display: grid;
  grid-template-columns: minmax(0,7fr) minmax(0,5fr);
  gap: 40px;
  align-items: start;
}
.photo-block figure { margin: 0; border: 1px solid var(--ink); padding: 6px; }
.photo-block figure img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1600/1187;
  display: block;
  object-fit: cover;
  filter: grayscale(1) contrast(1.2);
}
.photo-block figcaption { font-size: 13px; font-style: italic; text-align: center; padding-top: 6px; }
.photo-copy h3 { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 24px; margin: 0 0 10px; }
.photo-copy ol { margin: 0; padding-left: 1.2em; }
.photo-copy li { font-size: 15.5px; line-height: 1.65; margin-bottom: 10px; }
@media (max-width: 760px) { .photo-block { grid-template-columns: 1fr; } }

/* Recent results form guide */
.form-guide { width: 100%; border-collapse: collapse; }
.form-guide caption {
  caption-side: top;
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  font-size: 18px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.form-guide th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: left;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 8px 10px;
}
.form-guide td {
  font-size: 15px;
  padding: 9px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
}
.form-guide tbody tr:last-child td { border-bottom: 2px solid var(--ink); }
.stamp {
  display: inline-block;
  border: 2px dashed var(--stamp);
  color: var(--stamp);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  transform: rotate(-2deg);
}
.stamp.lost {
  border-color: color-mix(in srgb, var(--ink) 55%, transparent);
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  transform: rotate(1deg);
  border-style: solid;
}
.form-note { font-size: 13px; font-style: italic; margin-top: 10px; }

/* Pull quote */
.pull-quote { text-align: center; padding: 10px 0; }
.pull-quote blockquote {
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  font-style: italic;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.35;
  max-width: 34ch;
  margin: 0 auto;
}
.pull-quote figcaption {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-top: 16px;
}

/* Signup coupon */
.coupon {
  border: 2px dashed var(--ink);
  padding: 26px clamp(18px,4vw,40px);
  text-align: center;
}
.coupon h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: clamp(26px, 3vw, 34px);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0;
}
.coupon .sub { font-size: 15.5px; max-width: 52ch; margin: 12px auto 0; line-height: 1.6; }
.coupon .bullets {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: center;
  padding: 0;
  margin: 18px 0 0;
  font-size: 14px;
  font-weight: 700;
}
.signup-np {
  display: flex;
  gap: 10px;
  max-width: 420px;
  margin: 22px auto 0;
  flex-wrap: wrap;
  justify-content: center;
}
.signup-np input {
  flex: 1;
  min-width: 220px;
  font-family: 'PT Serif', serif;
  font-size: 15px;
  padding: 12px 14px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
}
.signup-np input::placeholder { color: color-mix(in srgb, var(--ink) 55%, transparent); }
.signup-msg { font-size: 14px; font-style: italic; margin-top: 12px; }

/* Thank-you stamp block */
.stamp-block { text-align: center; padding: 40px 0 8px; }
.stamp-ring {
  width: 96px;
  height: 96px;
  margin: 0 auto 22px;
  border-radius: 50%;
  border: 3px solid var(--stamp);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-4deg);
}
.stamp-ring span {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 15px;
  color: var(--stamp);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.body-copy { max-width: var(--measure); margin: 26px auto 0; text-align: left; }
.body-copy p { font-size: 17px; line-height: 1.7; margin: 0 0 14px; }

/* Footer */
footer { margin-top: 40px; }
footer .fine-cols {
  columns: 2;
  column-gap: 40px;
  font-size: 12px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}
footer .fine-cols p { margin: 0 0 10px; break-inside: avoid; }
footer .fine {
  font-size: 12px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  max-width: 60ch;
  margin: 0 auto;
}
footer .copyright {
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 18px;
  font-weight: 700;
}