/* ════════════════════════════════════════════════════════════
   Riverside Prints — "Riverside" design system
   One warm theme for everyone: cream paper, river blue, pine
   green, sunset orange. Logo shapes + fonts unchanged.
   ════════════════════════════════════════════════════════════ */

:root {
  --paper:   #f6f1e5;   /* warm cream */
  --paper2:  #efe7d5;   /* deeper cream */
  --card:    #fffdf6;
  --ink:     #2b3a42;   /* river-stone blue-gray */
  --soft:    #5e6f72;   /* muted text */
  --river:   #2e6e8e;   /* river blue */
  --river2:  #3a81a3;
  --pine:    #3e6b4f;   /* pine green */
  --sunset:  #d97f30;   /* sunset orange */
  --sunset2: #b8641e;
  --line:    #d8cdb4;
  --danger:  #b5372a;
  --mono: 'IBM Plex Mono', monospace;
  --display: 'Michroma', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 1.13rem;
  line-height: 1.8;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }

/* ── Sky header (every page) ───────────────────────────────── */
.sky {
  background: linear-gradient(180deg, #fdf6e3 0%, #faeacb 55%, #f3d9a8 100%);
  position: relative;
}
.sky-inner { max-width: 1060px; margin: 0 auto; padding: 1.6rem 1.4rem 0; }

.town-nav { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.town-logo { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; margin-right: auto; }
.town-logo .m { color: var(--sunset); font-size: 1.8rem; line-height: 1; }
.town-logo .w {
  font-family: var(--display); font-size: 0.88rem;
  letter-spacing: 0.14em; line-height: 1.5; color: var(--ink);
}
.town-logo .w span { color: var(--river); display: block; }

.town-links { display: flex; gap: 0.2rem; flex-wrap: wrap; }
.town-links a {
  text-decoration: none; font-size: 0.95rem;
  padding: 0.45rem 0.95rem; border-radius: 2rem; color: var(--ink);
  white-space: nowrap;
}
.town-links a:hover { background: rgba(46,110,142,0.1); color: var(--river); }
.town-links a.here { background: var(--river); color: #fffaf2; }

/* Menu drops to its own line under the logo on small screens */
@media (max-width: 720px) {
  .town-nav { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
  .town-logo { margin-right: 0; }
  .town-links { width: 100%; }
  .town-links a { padding: 0.4rem 0.8rem; font-size: 0.9rem; }
}

/* Page heading area inside the sky */
.welcome { max-width: 1060px; margin: 0 auto; padding: 2.4rem 1.4rem 0; position: relative; z-index: 2; }
.welcome .place {
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sunset2); margin: 0 0 0.6rem;
}
.welcome h1 {
  font-family: var(--display);
  font-size: clamp(1.45rem, 4.2vw, 2.4rem);
  line-height: 1.4; letter-spacing: 0.02em;
  margin: 0 0 1rem; max-width: 18em;
}
.welcome h1 .r { color: var(--river); }
.welcome h1 .s { color: var(--sunset); }
.welcome .lede { max-width: 620px; color: var(--soft); font-size: 1.05rem; margin: 0 0 1.7rem; }
.welcome .lede a { color: var(--river); }

/* ── River ribbon (subpage divider under the sky) ──────────── */
.river-ribbon { display: block; width: 100%; height: auto; margin-top: 0.5rem; }

/* Full riverscape (homepage) */
.riverscape { display: block; width: 100%; height: auto; margin-top: -3.5rem; position: relative; z-index: 1; }
@media (max-width: 640px) { .riverscape { margin-top: -1.6rem; } }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-block; text-decoration: none; font-size: 1.02rem;
  padding: 0.85rem 1.7rem; border-radius: 0.7rem; margin: 0 0.6rem 0.8rem 0;
  background: var(--sunset); color: #fffaf2; font-weight: 500;
  border: none; cursor: pointer;
  box-shadow: 0 4px 14px rgba(217,127,48,0.35);
  transition: transform 0.15s, box-shadow 0.15s;
  font-family: var(--mono);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(217,127,48,0.4); }
.btn.river { background: var(--river); box-shadow: 0 4px 14px rgba(46,110,142,0.3); }
.btn.pine  { background: var(--pine);  box-shadow: 0 4px 14px rgba(62,107,79,0.3); }
.btn.quiet {
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); box-shadow: none;
}
.btn.quiet:hover { border-color: var(--river); color: var(--river); }

/* ── Main content area ─────────────────────────────────────── */
.main { max-width: 1060px; margin: 0 auto; padding: 2.4rem 1.4rem 4rem; }

/* Painted sign headers */
.sign { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin: 0 0 1.2rem; }
.sign h2 { font-family: var(--display); font-size: 1.08rem; letter-spacing: 0.06em; margin: 0; }
.sign .paint { width: 3.2rem; height: 0.5rem; border-radius: 1rem; background: var(--river); }
.sign .count { font-size: 0.88rem; color: var(--soft); }
.sign .note  { font-size: 0.88rem; color: var(--sunset2); margin-left: auto; }

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 1.6rem 1.7rem;
  box-shadow: 0 2px 10px rgba(43,58,66,0.06);
}
.card h3 { font-family: var(--display); font-size: 0.92rem; letter-spacing: 0.07em; margin: 0 0 0.7rem; }
.card h3.blue { color: var(--river); } .card h3.green { color: var(--pine); } .card h3.orange { color: var(--sunset2); }
.card p, .card li { color: var(--soft); font-size: 0.97rem; }
.card a { color: var(--river); }

/* Shopfront cards (awnings) */
.shops { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.5rem; }
.shopfront {
  background: var(--card); border: 1px solid var(--line); border-radius: 1rem;
  overflow: hidden; text-decoration: none; display: flex; flex-direction: column;
  box-shadow: 0 2px 10px rgba(43,58,66,0.06);
  transition: transform 0.18s, box-shadow 0.18s;
}
.shopfront:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(43,58,66,0.13); }
.awning { height: 0.9rem; background: repeating-linear-gradient(90deg, var(--a1) 0 22px, var(--a2) 22px 44px); }
.shopfront .inner { padding: 1.5rem 1.5rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.shopfront h3 { font-family: var(--display); font-size: 1.02rem; letter-spacing: 0.05em; margin: 0 0 0.5rem; }
.shopfront p { color: var(--soft); font-size: 0.97rem; margin: 0 0 0.9rem; flex: 1; }
.shopfront .live { font-size: 0.9rem; font-weight: 500; }
.shopfront .go { font-size: 0.95rem; margin-top: 0.4rem; }
.shopfront.blue   { --a1: var(--river);  --a2: #6fa3bd; }
.shopfront.green  { --a1: var(--pine);   --a2: #79a98c; }
.shopfront.orange { --a1: var(--sunset); --a2: #ecae72; }
.shopfront.blue   .live, .shopfront.blue   .go { color: var(--river); }
.shopfront.green  .live, .shopfront.green  .go { color: var(--pine); }
.shopfront.orange .live, .shopfront.orange .go { color: var(--sunset2); }

/* ── Corkboard (what's new) ────────────────────────────────── */
.corkboard {
  background: var(--paper2); border: 1px solid var(--line);
  border-radius: 1rem; padding: 1.8rem 1.9rem;
}
.corkboard h2 { font-family: var(--display); font-size: 1rem; letter-spacing: 0.07em; margin: 0 0 1.1rem; }
.corkboard h2 .pin { color: var(--sunset); }
.corkboard ul { margin: 0; padding: 0; }
.corkboard li {
  list-style: none; margin: 0 0 0.6rem; font-size: 0.98rem; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 0.5rem;
  padding: 0.5rem 0.9rem; display: flex; gap: 0.9rem; align-items: baseline;
  box-shadow: 0 1px 4px rgba(43,58,66,0.05);
}
.corkboard .d { color: var(--river); font-size: 0.82rem; white-space: nowrap; }

/* ── Filter chips ──────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.3rem; }
.chip {
  background: var(--card); border: 1px solid var(--line); border-radius: 2rem;
  color: var(--soft); cursor: pointer; font-size: 0.92rem;
  padding: 0.45rem 1.05rem; transition: all 0.15s; font-family: var(--mono);
}
.chip:hover { border-color: var(--river); color: var(--river); }
.chip.on { background: var(--river); border-color: var(--river); color: #fffaf2; }

/* ── Spool rows (rack) ─────────────────────────────────────── */
.spool-row {
  display: grid;
  grid-template-columns: 1.5rem minmax(8rem, 1.6fr) 1fr 5.4rem 4.5rem;
  gap: 0.9rem; align-items: center;
  padding: 0.6rem 0.6rem;
  border-bottom: 1px dashed var(--line);
  font-size: 0.98rem;
  background: var(--card);
}
.spool-row:first-of-type { border-radius: 0.7rem 0.7rem 0 0; }
.spool-row:last-of-type  { border-radius: 0 0 0.7rem 0.7rem; border-bottom: none; }
.spool-row:hover { background: #fbf5e7; }
.spool-row.gone { opacity: 0.45; }
.spool-dot { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid rgba(43,58,66,0.25); }
.spool-name { color: var(--ink); }
.spool-type { font-size: 0.82rem; color: var(--soft); }
.spool-head {
  display: grid;
  grid-template-columns: 1.5rem minmax(8rem, 1.6fr) 1fr 5.4rem 4.5rem;
  gap: 0.9rem;
  padding: 0.55rem 0.6rem;
  background: var(--paper2);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--river);
}
.spool-head span:nth-child(4), .spool-head span:nth-child(5) { text-align: right; }
.spool-qty { font-size: 0.82rem; color: var(--soft); text-align: right; }
.spool-qty.low { color: var(--sunset2); font-weight: 500; }
.spool-qty.out { color: var(--danger); }
.spool-price { font-family: var(--display); font-size: 0.9rem; text-align: right; color: var(--ink); }
.rack-group { margin-bottom: 2.2rem; border: 1px solid var(--line); border-radius: 0.8rem; overflow: hidden; box-shadow: 0 2px 10px rgba(43,58,66,0.05); }
@media (max-width: 560px) {
  .spool-row, .spool-head { grid-template-columns: 1.2rem 1fr 4rem 4rem; }
  .spool-type { display: none; }
  .spool-head span:nth-child(3) { display: none; }
}

/* ── Shelf items ───────────────────────────────────────────── */
.shelf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 1.3rem; }
.shelf-item {
  background: var(--card); border: 1px solid var(--line); border-radius: 1rem;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 2px 10px rgba(43,58,66,0.06);
  transition: transform 0.18s, box-shadow 0.18s;
}
.shelf-item:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(43,58,66,0.13); }
.shelf-item.claimed { opacity: 0.5; }
.shelf-photo {
  aspect-ratio: 1 / 1; background: var(--paper2);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.shelf-photo img { width: 100%; height: 100%; object-fit: cover; }
.shelf-photo .noimg { font-size: 2.2rem; color: var(--line); }
.shelf-body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: 0.45rem; flex: 1; }
.shelf-name { font-family: var(--display); font-size: 0.88rem; line-height: 1.45; }
.shelf-spec { font-size: 0.78rem; color: var(--soft); }
.shelf-blurb { font-size: 0.88rem; color: var(--soft); line-height: 1.65; flex: 1; margin: 0; }
.shelf-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 0.3rem; }
.shelf-price { font-family: var(--display); font-size: 1.02rem; color: var(--sunset2); }
.shelf-badge {
  font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.18rem 0.6rem; border-radius: 2rem;
  border: 1px solid var(--line); color: var(--soft);
}
.shelf-badge.hot { border-color: var(--sunset); color: var(--sunset2); }
.shelf-claim {
  display: block; text-align: center; font-size: 0.9rem; color: var(--river);
  text-decoration: none; border-top: 1px dashed var(--line); padding: 0.65rem;
  transition: background 0.15s;
}
.shelf-claim:hover { background: rgba(46,110,142,0.08); }

/* ── Forms ─────────────────────────────────────────────────── */
.fld { margin-bottom: 1.4rem; }
.fld label {
  display: block; font-size: 0.8rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--river); margin-bottom: 0.45rem;
}
.fld label .req { color: var(--sunset2); }
.fld input[type="text"], .fld input[type="email"], .fld textarea, .fld select {
  width: 100%; background: #fffefa;
  border: 1px solid var(--line); border-radius: 0.6rem;
  color: var(--ink); font-family: var(--mono); font-size: 1rem;
  padding: 0.7rem 0.9rem; transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
}
.fld select {
  background-image: linear-gradient(45deg, transparent 50%, var(--river) 50%),
                    linear-gradient(135deg, var(--river) 50%, transparent 50%);
  background-position: calc(100% - 1.2rem) 50%, calc(100% - 0.85rem) 50%;
  background-size: 0.38rem 0.38rem; background-repeat: no-repeat;
  padding-right: 2.3rem; cursor: pointer;
}
.fld input:focus, .fld textarea:focus, .fld select:focus {
  outline: none; border-color: var(--river);
  box-shadow: 0 0 0 3px rgba(46,110,142,0.18);
}
.fld textarea { min-height: 140px; resize: vertical; }
.fld .hint { font-size: 0.82rem; color: var(--soft); margin-top: 0.4rem; }
.fld-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .fld-pair { grid-template-columns: 1fr; } }

.tick-row { display: flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; color: var(--soft); }
.tick-row input { width: auto; accent-color: var(--river); }

.err-box {
  border: 1px solid var(--danger); background: rgba(181,55,42,0.07);
  border-radius: 0.6rem; padding: 0.75rem 1rem;
  font-size: 0.92rem; color: var(--danger); margin-bottom: 1rem;
}
.ok-state { text-align: center; padding: 3rem 1.5rem; }
.ok-state .glyph { font-size: 2rem; color: var(--pine); }
.ok-state h2 { font-family: var(--display); font-size: 1.15rem; letter-spacing: 0.04em; }
.ok-state p { color: var(--soft); font-size: 0.98rem; max-width: 440px; margin: 0.5rem auto 1.6rem; }

/* ── Micro-FAQ ─────────────────────────────────────────────── */
.qa { border-bottom: 1px dashed var(--line); }
.qa summary {
  cursor: pointer; list-style: none; padding: 0.8rem 0.2rem;
  font-size: 0.98rem; color: var(--ink);
  display: flex; justify-content: space-between; gap: 1rem;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: '+'; color: var(--sunset); font-size: 1.1rem; }
.qa[open] summary::after { content: '–'; }
.qa .qa-a { padding: 0 0.2rem 1rem; font-size: 0.94rem; color: var(--soft); line-height: 1.8; }
.qa .qa-a a { color: var(--river); }

/* ── Footer ────────────────────────────────────────────────── */
.town-foot {
  border-top: 2px solid var(--line); margin-top: 3rem; padding-top: 1.4rem;
  color: var(--soft); font-size: 0.9rem;
  display: flex; gap: 0.8rem 1.8rem; flex-wrap: wrap;
}
.town-foot a { color: var(--river); text-decoration: none; }
.town-foot a:hover { color: var(--sunset2); }
.town-foot .m { color: var(--sunset); }

@media (max-width: 640px) { body { font-size: 1.05rem; } }

/* ── Mailing list ("river mail") ───────────────────────────── */
.nl-band {
  background: linear-gradient(180deg, #fdf6e3, #f3d9a8);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 2.2rem 2rem;
  text-align: center;
}
.nl-band h2 {
  font-family: var(--display);
  font-size: clamp(1.05rem, 2.6vw, 1.4rem);
  letter-spacing: 0.05em;
  margin: 0 0 0.7rem;
}
.nl-band h2 span { color: var(--sunset2); }
.nl-band p { color: var(--soft); max-width: 560px; margin: 0 auto 1.4rem; font-size: 0.98rem; }
.nl-form { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; max-width: 500px; margin: 0 auto; }
.nl-form input[type="email"] {
  flex: 1; min-width: 220px;
  background: #fffefa; border: 1px solid var(--line); border-radius: 0.6rem;
  color: var(--ink); padding: 0.7rem 0.95rem;
  font-family: var(--mono); font-size: 1rem;
}
.nl-form input[type="email"]:focus {
  outline: none; border-color: var(--river);
  box-shadow: 0 0 0 3px rgba(46,110,142,0.18);
}
.nl-note { font-size: 0.85rem; margin-top: 0.9rem; color: var(--pine); }

/* compact inline version for rack/shelf */
.nl-inline {
  background: var(--paper2);
  border: 1px dashed var(--line);
  border-radius: 1rem;
  padding: 1.5rem 1.7rem;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.nl-inline .nl-pitch { flex: 1; min-width: 240px; }
.nl-inline h3 { font-family: var(--display); font-size: 0.88rem; letter-spacing: 0.07em; color: var(--sunset2); margin: 0 0 0.35rem; }
.nl-inline p { margin: 0; color: var(--soft); font-size: 0.92rem; }
.nl-inline .nl-form { margin: 0; justify-content: flex-start; }

/* topic choice on mailing list forms */
.nl-topics {
  display: flex; gap: 1.4rem; flex-wrap: wrap; justify-content: center;
  width: 100%; margin-top: 0.8rem;
}
.nl-inline .nl-topics { justify-content: flex-start; gap: 1.1rem; margin-top: 0.55rem; }
.nl-topics label {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.88rem; color: var(--soft); cursor: pointer;
}
.nl-topics input { accent-color: var(--river); width: auto; }