/*
 * The Skiathos Guide — trust pages.
 *
 * Used by /about/, /how-we-research/ and /corrections/ only. Everything else
 * on those pages comes from style.css. This file adds four things the rest of
 * the site had no need for:
 *
 *   .leadans   the 40-60 word direct answer that opens each page
 *   .factkey   the key facts table under it
 *   .corr      one dated entry in the correction log
 *   .caveat    the paragraph that says what is wrong with what you just read
 *
 * No colours are invented here. Every value is a token from style.css so the
 * dark theme and the light theme both follow without a second definition.
 */

/* ----------------------------------------------------- MASTHEAD OVERFLOW
 * The masthead lays out 86px wider than its own 1196px content box, because
 * the search field is a fixed 190px and neither it nor the nav is allowed to
 * shrink. On pages that carry a hero photograph you never see it: style.css
 * switches the bar to position:fixed over the image, so the overflow leaves
 * the document flow and no scrollbar appears.
 *
 * These three pages have no hero photograph, so the bar stays in the flow and
 * the overflow becomes a real 43px sideways scroll on a 1280px screen.
 *
 * Clipping the horizontal axis on the bar itself reproduces exactly what the
 * fixed bar already does everywhere else: same layout, same widths, nothing
 * moves, no scrollbar. The vertical axis stays visible so the dropdown menus
 * still open downward out of the bar.
 *
 * Shrinking the nav or the search field instead was tried and rejected. The
 * nav has no flex-shrink, so it spills and the For businesses link lands on
 * top of the search box.
 *
 * The same fault is live on /photo-credits/, which also has no hero
 * photograph. Fixing it there means editing nav.css, which this task may not
 * touch, so it is reported rather than patched.
 */
.masthead { overflow-x: clip; overflow-y: visible; }

/* ------------------------------------------------------- THE DIRECT ANSWER
 * Sits directly under the h1. Deliberately larger than body text and no wider
 * than 60 characters or so, because it is the paragraph a language model will
 * lift and it should read as one clean unit.
 */
.leadans {
  font-size: 1.16rem;
  line-height: 1.62;
  max-width: 62ch;
  margin: 0 0 26px;
}

/* ------------------------------------------------------------- KEY FACTS
 * A two-column fact table. Same bones as table.ratings, but the left column
 * is a label rather than a heading row, so it needs its own weight.
 */
.factkey {
  width: 100%;
  border-collapse: collapse;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .92rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.factkey th,
.factkey td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.factkey tr:last-child th,
.factkey tr:last-child td { border-bottom: 0; }
.factkey th {
  width: 34%;
  font-weight: 600;
  color: var(--text-soft);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: normal;
}
.factkey td { color: var(--text); }
.factkey td b { font-weight: 650; }

@media (max-width: 560px) {
  .factkey th, .factkey td { display: block; width: auto; }
  .factkey th { border-bottom: 0; padding-bottom: 2px; }
  .factkey td { padding-top: 0; }
}

/* ------------------------------------------------------- CORRECTION ENTRY
 * Was / Now / Evidence / Where it came from, in that order every time. The
 * old claim is kept visible rather than deleted, because a correction log
 * that hides what it used to say is not a correction log.
 */
.corr {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-left: 3px solid var(--terracotta);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 22px;
  margin: 0 0 22px;
  box-shadow: var(--shadow);
}
.corr-date {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--text-soft);
  display: block;
  margin-bottom: 10px;
}
.corr h3 {
  margin: 0 0 14px;
  font-size: 1.12rem;
  line-height: 1.35;
}
.corr dl {
  margin: 0;
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 8px 16px;
  font-size: .95rem;
}
.corr dt {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-soft);
  padding-top: 3px;
}
.corr dd { margin: 0; }
.corr dd.was { color: var(--text-soft); text-decoration: line-through; }
.corr dd.now b { font-weight: 650; }

@media (max-width: 560px) {
  .corr dl { grid-template-columns: 1fr; gap: 2px; }
  .corr dt { padding-top: 10px; }
}

/* --------------------------------------------------------------- CAVEAT
 * The paragraph that says what is wrong with the thing just described. Every
 * method section on these pages ends with one.
 */
.caveat {
  border-left: 3px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 9%, transparent);
  padding: 14px 18px;
  border-radius: 0 10px 10px 0;
  font-size: .94rem;
  line-height: 1.6;
  margin: 18px 0 0;
}
.caveat strong { font-weight: 650; }

/* --------------------------------------------------------------- STACK
 * Prose sections on these pages carry no cards and no photographs, so they
 * need a readable measure of their own.
 */
.prose { max-width: 74ch; }
.prose p { line-height: 1.68; }
.prose h3 {
  margin: 26px 0 8px;
  font-size: 1.05rem;
}

/* Small print under a table or a list. Footer .fine is a different thing. */
.aside-note {
  font-size: .86rem;
  color: var(--text-soft);
  line-height: 1.6;
  margin: 14px 0 0;
  max-width: 74ch;
}