/* Pebble Bench theme, shared by every page: paper cards resting on a weathered workbench. */

/* Ubuntu Sans, Latin subset, hosted here so pages make no outside requests (see fonts/LICENCE.txt).
   Text that is neither regular nor bold (italics, other weights) is synthesized by the browser. */
@font-face {
  font-family: "Ubuntu Sans";
  src: url("fonts/UbuntuSans-Regular-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ubuntu Sans";
  src: url("fonts/UbuntuSans-Bold-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --wood: #574c40;
  --wood-shade: rgba(24, 16, 8, 0.25);
  --on-wood: #f5efe4;
  --on-wood-muted: #dcd2c2;
  --paper: #f7f2e8;
  --paper-see-through: rgba(247, 242, 232, 0.88);
  --paper-inset: #eee6d8;
  --ink: #2b2620;
  --ink-muted: #675e53;
  --edge: rgba(60, 40, 20, 0.12);
  --accent: #a4522c;
  --shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 6px 16px rgba(20, 12, 4, 0.35);
  --shadow-lifted: 0 2px 2px rgba(0, 0, 0, 0.2), 0 14px 28px rgba(20, 12, 4, 0.45);
  --font: "Ubuntu Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --wood: #2c261f;
    --wood-shade: rgba(8, 5, 2, 0.6);
    --paper: #27231f;
    --paper-see-through: rgba(39, 35, 31, 0.8);
    --paper-inset: #302b26;
    --ink: #ece6dc;
    --ink-muted: #aba294;
    --edge: rgba(255, 240, 220, 0.08);
    --accent: #e0a874;
    --shadow: 0 1px 1px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.5);
    --shadow-lifted: 0 2px 2px rgba(0, 0, 0, 0.4), 0 14px 28px rgba(0, 0, 0, 0.6);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--wood);
  color: var(--on-wood);
  font: 16px/1.55 var(--font);
}
/* The bench is a fixed layer rather than background-attachment: fixed, which iOS ignores. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(var(--wood-shade), var(--wood-shade)), url("wood.svg") center / cover;
}

/* Site title with the stones beside it. */
.brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
  color: var(--on-wood);
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.brand img {
  width: auto;
  height: 1.6em;
  flex: none;
  /* The stones settle onto the bench once, when the page loads. */
  animation: settle 0.7s cubic-bezier(0.3, 1.4, 0.5, 1) 0.1s both;
}
@keyframes settle {
  from { transform: translateY(-0.3em) rotate(-8deg); opacity: 0; }
  40% { opacity: 1; }
  to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .brand img { animation: none; }
}

.paper {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--edge);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
/* Thinner paper: the bench shows faintly through. Kept opaque enough for muted text to stay readable. */
.paper.see-through { background: var(--paper-see-through); }

footer {
  margin-top: 4rem;
  color: var(--on-wood-muted);
  font-size: 0.875rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
footer a { color: inherit; }