/* Series Notes — a shelf of illustrated series walks.
   Lamplit-library palette: cream paper, oak-brown ink, oxblood and brass accents. */

:root {
  --paper: #F7F1E4;
  --paper-deep: #EFE5D0;
  --card: #FFFCF5;
  --ink: #2C221A;
  --ink-soft: #4A3C2E;
  --muted: #7B6B57;
  --rule: #DACBAE;
  --oxblood: #7E2A22;
  --brass: #A07C3A;
  --f-body: "Crimson Pro", "Iowan Old Style", Palatino, Georgia, serif;
  --f-ui: "Josefin Sans", "Century Gothic", Futura, "Trebuchet MS", sans-serif;
  --f-type: "Special Elite", "Courier New", ui-monospace, monospace;
  color-scheme: only light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.12rem/1.6 var(--f-body);
  background-image: radial-gradient(ellipse at 50% -20%, rgba(160,124,58,.14), transparent 60%);
}
a { color: var(--oxblood); }
img { max-width: 100%; height: auto; display: block; }

.topbar {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
  max-width: 1120px; margin: 0 auto; padding: 14px 16px;
  font: 600 .82rem/1.2 var(--f-ui); letter-spacing: .08em; text-transform: uppercase;
}
.topbar a { color: var(--ink-soft); text-decoration: none; }
.topbar a:hover { color: var(--oxblood); }
.topbar__note { color: var(--muted); font-weight: 400; }

.hero { max-width: 1120px; margin: 0 auto; padding: 18px 16px 8px; text-align: center; }
.kicker { font: 600 .8rem/1.2 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.hero h1 {
  font: 600 clamp(2.6rem, 7vw, 4.6rem)/1.02 var(--f-body); margin: .18em 0 .1em; letter-spacing: .01em;
  color: var(--ink);
}
.made-stamp { font-family: var(--f-type); font-size: .82rem; color: var(--muted); margin: 4px 0 0; }
.deck { max-width: 46rem; margin: 14px auto 22px; font-size: 1.22rem; color: var(--ink-soft); font-style: italic; }
.hero__art { margin: 0 auto; max-width: 1040px; }
.hero__art img { border-radius: 6px; box-shadow: 0 18px 40px rgba(44,34,26,.28); }

main { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
h2 {
  font: 600 .95rem/1.2 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--brass);
  border-bottom: 1px solid var(--rule); padding-bottom: 8px; margin: 46px 0 20px;
}

.walk-grid { display: grid; gap: 22px; }
.walk {
  display: grid; grid-template-columns: minmax(240px, 440px) 1fr; gap: 22px; align-items: start;
  background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 16px;
  box-shadow: 0 8px 22px rgba(44,34,26,.10);
}
@media (max-width: 760px) { .walk { grid-template-columns: 1fr; } }
.walk__art img { border-radius: 5px; transition: transform .2s; }
.walk__art:hover img { transform: scale(1.012); }
.walk__title { font: 600 1.7rem/1.15 var(--f-body); margin: 2px 0 2px; }
.walk__meta { font: 600 .78rem/1.4 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 8px 0 6px; }
.walk__body p { margin: .4em 0; }
.walk__go {
  display: inline-block; margin-top: 8px; font: 600 .86rem/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; color: var(--paper); background: var(--oxblood); padding: 10px 16px; border-radius: 999px;
}
.walk__go:hover { background: #5E1D17; color: #fff; }

.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.steps li {
  counter-increment: s; position: relative; padding: 14px 16px 14px 56px; background: var(--card);
  border: 1px solid var(--rule); border-radius: 8px; font-size: 1.04rem;
}
.steps li::before {
  content: counter(s); position: absolute; left: 14px; top: 12px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font: 700 .9rem/1 var(--f-ui); color: var(--paper); background: var(--brass);
}
.steps strong { color: var(--oxblood); }

.foot { max-width: 1120px; margin: 50px auto 0; padding: 18px 16px 40px; border-top: 1px solid var(--rule); color: var(--muted); font-size: .95rem; }
.foot a { color: var(--ink-soft); }