/* ============================================================
   Kid from Parian — The Life and Words of Manuel "Maning" S. Satorre Jr.
   A memorial in the shape of a newspaper special edition.
   ============================================================ */

:root {
  /* Palette — traditional black-and-white newspaper, with red only for the nameplate */
  --paper:        #f7f7f2;
  --paper-edge:   #e8e8df;
  --paper-dark:   #dcdcd2;
  --ink:          #111111;
  --ink-soft:     #2c2c2c;
  --ink-faint:    #626262;
  --rule:         #111111;
  --name-red:     #b10f0f;

  --serif:    "Playfair Display", "Bodoni 72", "Times New Roman", Georgia, serif;
  --slab:     "Old Standard TT", "Cambria", Georgia, serif;
  --type:     "Special Elite", "Courier Prime", "Courier New", ui-monospace, monospace;
  --hand:     "Caveat", "Homemade Apple", "Bradley Hand", cursive;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: #1b1b1b;
  color: var(--ink);
  font-family: var(--slab);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ----- The newspaper sheet ----- */
.page {
  max-width: 980px;
  margin: 28px auto;
  padding: 56px 52px 72px;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.018) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.012) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-edge) 100%);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.15),
    0 18px 60px rgba(0,0,0,0.45);
  position: relative;
  overflow: hidden;
}

/* Keep the sheet clean like a traditional newspaper page. */
.page::before {
  content: none;
}

.page::after {
  content: none;
}

.page > * { position: relative; z-index: 1; }

/* ============================================================
   MASTHEAD — newspaper nameplate
   ============================================================ */
.masthead {
  text-align: center;
  border-top: 4px double var(--rule);
  border-bottom: 4px double var(--rule);
  padding: 18px 0 12px;
  margin-bottom: 14px;
}

.masthead .dateline-bar {
  display: flex;
  justify-content: space-between;
  font-family: var(--type);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 6px;
  margin-bottom: 14px;
}

.masthead h1.nameplate {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(40px, 6vw, 72px);
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--name-red);
  margin: 6px 0 4px;
  text-transform: none;
  font-style: italic;
}

.masthead .nameplate-rule {
  height: 2px;
  background: var(--rule);
  margin: 10px auto;
  width: 70%;
}

.masthead .subtitle {
  font-family: var(--slab);
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 6px 0 2px;
}

.masthead .edition {
  font-family: var(--type);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 4px 0 0;
}

/* ============================================================
   FRONT PAGE — hero
   ============================================================ */
.front-page {
  margin: 22px 0 14px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 28px;
  align-items: stretch;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 26px;
}

.hero-photo {
  margin: 0;
  border: 1px solid var(--rule);
  padding: 8px;
  background: var(--paper-dark);
  box-shadow: none;
}
.hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.08);
}
.hero-photo figcaption {
  font-family: var(--type);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
  margin-top: 8px;
}

.front-page .lead h2 {
  font-family: var(--serif);
  font-weight: 900;
  font-style: italic;
  font-size: 38px;
  line-height: 1.05;
  margin: 0 0 8px;
}
.front-page .lead .kicker {
  font-family: var(--type);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 8px;
}
.front-page .lead .dates {
  font-family: var(--slab);
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin: 0 0 14px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 6px 0;
  text-align: center;
}
.front-page .lead p {
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 10px;
}
.front-page .lead p:first-of-type::first-letter {
  font-family: var(--serif);
  font-weight: 900;
  font-style: italic;
  float: left;
  font-size: 64px;
  line-height: 52px;
  padding: 6px 10px 0 0;
  color: var(--ink);
}

/* ============================================================
   SECTION ARTICLES
   ============================================================ */
section.article {
  border-top: 1px solid var(--rule);
  padding: 22px 0 8px;
  margin-top: 12px;
}

section.article > .section-eyebrow {
  font-family: var(--type);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 2px;
}

section.article > h3 {
  font-family: var(--serif);
  font-weight: 900;
  font-style: italic;
  font-size: 28px;
  line-height: 1.1;
  margin: 0 0 6px;
  color: var(--ink);
}

section.article > .deck {
  font-family: var(--slab);
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 14px;
  border-bottom: 1px dotted var(--rule);
  padding-bottom: 10px;
}

section.article p {
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0 0 12px;
}

/* Two-column body for long articles */
section.article.two-col .body {
  column-count: 2;
  column-gap: 28px;
  column-rule: 1px solid rgba(17,17,17,0.28);
}
section.article.two-col .body p { break-inside: avoid; }
section.article.two-col .body p:first-child::first-letter {
  font-family: var(--serif);
  font-weight: 900;
  float: left;
  font-size: 48px;
  line-height: 40px;
  padding: 4px 8px 0 0;
  color: var(--ink);
}

/* ----- Photo strip ----- */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 14px 0 8px;
}
.photo-strip figure {
  margin: 0;
  border: 1px solid var(--rule);
  padding: 6px;
  background: var(--paper-dark);
}
.photo-strip figure img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
}
.photo-strip figcaption {
  font-family: var(--type);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 6px;
  text-align: center;
}

.travel-strip {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.family-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0 8px;
}

.family-review-grid article {
  border-top: 2px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 12px 0 4px;
}

.family-review-grid h4 {
  font-family: var(--type);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.mini-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.mini-strip figure,
.review-photo {
  margin: 0;
  border: 1px solid var(--rule);
  padding: 6px;
  background: var(--paper-dark);
}

.mini-strip img,
.review-photo img {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
}

.mini-strip figcaption,
.review-photo figcaption {
  font-family: var(--type);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 6px;
  text-align: center;
}

/* ----- Pull-quote ----- */
.pullquote {
  border-top: 2px solid var(--rule);
  border-bottom: 2px solid var(--rule);
  padding: 14px 18px;
  margin: 18px 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.35;
  color: var(--ink);
  text-align: center;
}
.pullquote cite {
  display: block;
  font-family: var(--type);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 8px;
}

/* ----- Sidebar / fact box ----- */
.factbox {
  border: 1px solid var(--rule);
  background: rgba(0, 0, 0, 0.035);
  padding: 14px 18px;
  margin: 14px 0;
}
.factbox h4 {
  font-family: var(--type);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 8px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 4px;
}
.factbox ul {
  margin: 0; padding-left: 18px;
  font-size: 14.5px;
}
.factbox ul li { margin-bottom: 4px; }

/* ----- Bylines / clippings list ----- */
.clippings {
  list-style: none;
  padding: 0; margin: 0;
}
.clippings li {
  border-bottom: 1px dotted var(--rule);
  padding: 8px 0;
  font-family: var(--slab);
  font-size: 14.5px;
}
.clippings li .clip-title {
  font-style: italic;
}
.clippings li a.clip-title {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.clippings li .clip-meta {
  font-family: var(--type);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-left: 8px;
}

/* ----- Guestbook / On the Record ----- */
.guestbook-entry {
  border-left: 4px solid var(--rule);
  padding: 6px 14px;
  margin: 12px 0;
  background: rgba(0, 0, 0, 0.035);
  font-family: var(--hand);
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
}
.guestbook-entry .attribution {
  display: block;
  font-family: var(--type);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 8px;
}

.guestbook-cta {
  background: var(--ink);
  color: var(--paper);
  padding: 18px 22px;
  border: 1px solid var(--rule);
  margin: 16px 0;
  text-align: center;
}
.guestbook-cta h4 {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  margin: 0 0 6px;
  color: var(--paper);
}
.guestbook-cta p {
  margin: 0 0 8px;
  font-family: var(--slab);
  font-size: 14px;
  color: var(--paper-edge);
}
.guestbook-cta a {
  display: inline-block;
  margin-top: 6px;
  padding: 8px 16px;
  border: 1px solid var(--paper);
  color: var(--paper);
  text-decoration: none;
  font-family: var(--type);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ============================================================
   COLOPHON / FOOTER
   ============================================================ */
.colophon {
  border-top: 4px double var(--rule);
  margin-top: 32px;
  padding-top: 18px;
  text-align: center;
  font-family: var(--type);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.colophon strong { color: var(--ink); }

/* ============================================================
   NAV — newspaper section index
   ============================================================ */
.section-index {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 22px;
  font-family: var(--type);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--rule);
}
.section-index a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
}
.section-index a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 760px) {
  .page { padding: 36px 22px 56px; margin: 14px 8px; }
  .front-page { grid-template-columns: 1fr; }
  .family-review-grid { grid-template-columns: 1fr; }
  .mini-strip { grid-template-columns: 1fr; }
  section.article.two-col .body { column-count: 1; }
  .masthead h1.nameplate { font-size: 42px; }
  .front-page .lead h2 { font-size: 28px; }
}