/* smallhours — shared tokens + chrome */

@font-face {
  font-family: "Libre Franklin";
  src: url("/assets/fonts/libre-franklin-v20-latin-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("/assets/fonts/libre-franklin-v20-latin-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("/assets/fonts/libre-franklin-v20-latin-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("/assets/fonts/libre-franklin-v20-latin-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/assets/fonts/space-mono-v17-latin-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/assets/fonts/space-mono-v17-latin-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --paper: #FCFCFA;
  --ink:   #0E0E0E;
  --use:   #D6001C;
  --waste: #0035AD;
  --faint: rgba(14,14,14,0.45);
  --rule:  rgba(14,14,14,0.15);
  --sans: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-image: radial-gradient(rgba(14,14,14,.03) 1px, transparent 1px);
  background-size: 5px 5px;
}

/* ---------- masthead ---------- */
.masthead {
  max-width: 920px; width: 100%;
  margin: 0 auto;
  padding: 26px 24px 0;
}
.masthead-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 12px;
}
.wordmark {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark span { color: var(--use); }
.dateline {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--faint);
  text-align: right;
}
.double-rule {
  border-top: 2.5px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  height: 5px;
}

/* ---------- body column ---------- */
main {
  flex: 1;
  max-width: 920px; width: 100%;
  margin: 0 auto;
  padding: 28px 24px 56px;
}

/* ---------- footer ---------- */
footer {
  max-width: 920px; width: 100%;
  margin: 0 auto;
  padding: 0 24px 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: 12.5px;
  color: var(--faint);
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}

/* ---------- shared bits ---------- */
.stamp {
  font-family: var(--mono);
  font-size: 12px;
  white-space: nowrap;
}
.stamp.use   { color: var(--use); }
.stamp.waste { color: var(--waste); }

.soon {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  background: rgba(14,14,14,0.06);
  padding: 2px 6px;
  white-space: nowrap;
}

/* house gesture — the one playful move */
.tilt {
  transition: transform 130ms ease;
}
.tilt:hover { transform: rotate(-2deg) translateY(-3px); }

/* section header: 2px rule, numeral + faint label */
.section-head {
  border-top: 2px solid var(--ink);
  padding-top: 8px;
  margin-top: 34px;
  margin-bottom: 4px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.section-head .n {
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.045em;
  line-height: 0.9;
}
.section-head .label {
  font-size: 13px;
  color: var(--faint);
  font-weight: 500;
}