/*
  smarthome.edchenlab.com placeholder stylesheet (Ed Chen, 2026-10-18).
  edchenlab paper-and-ink tokens and fonts; the .history rules mirror karaoke's footer.
*/

:root {
  --paper: #F4EFE6;
  --ink: #1A1718;
  --ink-2: #5E5658;
  --rule: rgba(26, 23, 24, .14);
  --grid: rgba(26, 23, 24, .045);
  --solar: #B8730C;
  --serif: "Fraunces", "Noto Serif TC", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1A1718;
    --ink: #F4EFE6;
    --ink-2: #B3AAAB;
    --rule: rgba(244, 239, 230, .14);
    --grid: rgba(244, 239, 230, .04);
    --solar: #C4821A;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); line-height: 1.55;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-font-smoothing: antialiased;
}

.page { max-width: 640px; margin: 0 auto; padding: 18vh 16px 48px; }
@media (min-width: 720px) { .page { padding-left: 32px; padding-right: 32px; } }

.label { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); display: inline-flex; align-items: center; gap: 10px; }
.bolt { width: 10px; height: 14px; background: var(--solar); clip-path: polygon(62% 0, 0 58%, 44% 58%, 34% 100%, 100% 40%, 56% 40%); }

h1 {
  font-family: var(--serif); font-weight: 600; font-size: clamp(2.4rem, 8vw, 3.6rem); line-height: 1.04;
  letter-spacing: -.02em; margin: 12px 0 14px; font-variation-settings: "opsz" 144;
}
.lede { font-family: var(--serif); font-size: clamp(1.15rem, 2.6vw, 1.4rem); line-height: 1.4; margin: 0; max-width: 34ch; }

footer { margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--rule); }
footer a { color: var(--ink-2); font-size: .85rem; text-decoration: none; }
footer a:hover { color: var(--ink); }

/* Footer update list, same rules as karaoke's .book > footer .history* */
.history { margin: 0 0 16px; padding: 0; color: var(--ink-2); font-size: .82rem; line-height: 1.5; text-align: left; }
.history-head { color: var(--ink); font-size: .88rem; font-weight: 600; margin-bottom: 10px; }
.history-entry { margin-bottom: 12px; }
.history-date { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.history-items { margin: 0; padding-left: 20px; list-style: disc; }
.history-items li { margin-bottom: 3px; }
.history-items li::marker { color: var(--ink-2); }