/* Threefold Cedar — shared chrome for the store and document pages.
   The landing page (scroll-craft) brings its own engine CSS and only shares tokens.css. */

.site-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
}
.site-head__brand { display: inline-flex; line-height: 0; }
.site-head__brand img { width: 44px; height: 44px; }
.site-head__nav { display: flex; gap: clamp(0.75rem, 3vw, 2rem); }
.site-head__nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.25rem;
  font: 500 0.8125rem/1 var(--font-text); letter-spacing: var(--track-caps); text-transform: uppercase;
  text-decoration: none; color: var(--ink);
}
.site-head__nav a:hover, .site-head__nav a[aria-current="page"] { color: var(--accent-ink); }

.site-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 2rem clamp(1rem, 4vw, 2.5rem) 3rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft); font-size: 0.875rem;
}
.site-foot p { margin: 0; font-family: var(--font-display); color: var(--ink); }
.site-foot nav { display: flex; gap: 1.5rem; }
.site-foot a { display: inline-flex; align-items: center; min-height: 44px; }

/* reading surface: E-Ink / Paper, per MASTER.md */
.doc { max-width: var(--measure); margin: 0 auto; padding: clamp(2rem, 6vw, 4rem) 1.25rem 4rem; }
.doc h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
.doc h2 { font-size: 1.375rem; margin-top: 2.5rem; }
.doc__meta { color: var(--ink-soft); font-size: 0.9375rem; }
.doc ul { padding-left: 1.25rem; }
.doc li { margin: 0 0 0.5em; max-width: var(--measure); }
.doc .caps { color: var(--accent-ink); margin: 0 0 0.75rem; }

/* store grid */
.wrap { max-width: var(--max-w); margin: 0 auto; padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 2.5rem); }
.grid { display: grid; gap: 2rem; }
@media (min-width: 700px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.card { display: flex; flex-direction: column; gap: 0.75rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg); }
/* height:auto is load-bearing, not tidiness: the markup carries width/height
   attributes to reserve the ratio, and overriding only width leaves height
   resolving to the raw attribute pixels (a 750px-tall box in a 271px slot). */
.card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: #E9E1D1; }
/* Plan plates are pre-fitted to a uniform 4:3 linen frame, so nothing is cropped:
   a 6-foot trellis and a wine-bottle holder both sit whole in the same card. */
.card--plan img { aspect-ratio: 4 / 3; object-fit: contain; }

/* Detail-page plate: the finished piece, above the spec list. Capped so it
   introduces the piece without pushing the cut list off the first screen. */
.plate { margin: 0 0 2rem; max-width: 32rem; }
.plate img { display: block; width: 100%; height: auto; background: #E9E1D1; border: 1px solid var(--rule); }
.plate figcaption { margin-top: 0.5rem; color: var(--ink-soft); font-size: 0.875rem; }
.card__body { padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.card__body h3 { margin: 0; }
.card__spec { color: var(--ink-soft); font-size: 0.9375rem; margin: 0; }
.card__price { font-family: var(--font-display); font-size: 1.5rem; margin: 0.25rem 0 0; }
.card .btn { align-self: flex-start; margin-top: 0.5rem; }

/* status words, never colour alone */
.badge { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-soft); }
.badge::before { content: ""; width: 6px; height: 6px; background: var(--accent); }

/* notices */
.notice { border: 1px solid var(--rule); border-left: 3px solid var(--accent); padding: 0.75rem 1rem; background: #E9E1D1; font-size: 0.9375rem; }
.notice p { margin: 0; }

/* forms */
label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.35rem; }
input[type="email"], input[type="text"], input[type="number"], select {
  width: 100%; max-width: 28rem; min-height: 44px; padding: 0.6rem 0.75rem;
  border: 1px solid var(--ink); border-radius: var(--radius); background: #fff; color: var(--ink);
  font: 400 1rem var(--font-text);
}
.form-row { margin: 0 0 1rem; }
.form-error { color: #8A2E1E; font-size: 0.9375rem; }

/* cart line items: reuses .card for the border/radius/background, laid out as a row */
.cart-line { flex-direction: row; align-items: center; gap: 1rem; padding: 1rem; margin: 0 0 0.75rem; }
.cart-line .card__body { flex: 1; padding: 0; gap: 0.25rem; }
.cart-line .card__body h3 { margin: 0; }
.cart-line input[type="number"] { width: 4.5rem; max-width: 4.5rem; min-height: 40px; padding: 0.4rem; text-align: center; }
.cart-line .card__price { font-size: 1.125rem; margin: 0; min-width: 4.5rem; text-align: right; }
@media (max-width: 480px) { .cart-line { flex-wrap: wrap; } }