/*
 * The studio's own pages — about, FAQ, shipping, returns, contact, and the legal ones.
 * Reading pages: one measure of text, the shell's type roles, nothing new in the palette.
 * The FAQ accordion is `.qa` from shell.css, the same one /voice and /painted use.
 */
.site-page { padding-top: var(--s4); max-width: 820px; }
.page-h { font-size: 34px; line-height: 1.08; margin: var(--s2) 0 var(--s4); }
@media (min-width: 760px) { .page-h { font-size: 52px; } }
.page-lede { font-size: 18px; line-height: 1.55; color: var(--ink); max-width: 58ch; margin: 0 0 var(--s4); }
.site-page p { max-width: 62ch; line-height: 1.6; }
.site-page a:not(.addcart):not(.wall-more):not(.about-art):not(.about-custom) { color: var(--forest); }

.page-block { margin-top: var(--s8); }
.faq-h { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--tomato); margin: 0 0 var(--s3); }
.faq-group { margin-top: var(--s8); }
.qa-body p { margin: 0 0 var(--s2); }
.page-jump { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.page-jump a {
  font-size: 14px; padding: 7px 13px; border-radius: var(--r-pill); text-decoration: none;
  background: var(--sheet-2); border: 1px solid var(--rule);
}
.page-jump a:hover { background: var(--butter); border-color: var(--butter); }
.page-more { margin-top: var(--s8); color: var(--muted); }

/* the markers a lawyer, or the printer, has to clear */
.legal-flag {
  margin: var(--s4) 0 0; padding: 10px 14px; border-radius: var(--r-chip);
  background: var(--butter); font-size: 14px;
}
.legal-mark { font-size: 12px; font-weight: 600; color: var(--tomato); white-space: nowrap; }

/* ── about ──────────────────────────────────────────────────────────────── */
.about-room { margin-top: var(--s12); display: grid; gap: var(--s6); }
@media (min-width: 900px) {
  .about-room { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}
.about-room-copy p { margin: 0 0 var(--s4); }
.about-wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.about-art {
  display: block; aspect-ratio: 5 / 7; background: var(--sheet-2);
  box-shadow: 0 1px 3px rgba(42, 42, 40, .08), 0 14px 28px -16px rgba(42, 42, 40, .42);
  transition: transform 160ms ease;
}
.about-art img { width: 100%; height: 100%; object-fit: fill; }
.about-art:hover { transform: translateY(-3px); }

/*
 * The six custom products: a grid on the steps section's own rhythm — the same breakpoints,
 * the same gaps, the same heading and body sizes — so the two sections read as one hand.
 *
 * Each cell spans two rows of the parent grid through `subgrid`, which is what lines every
 * name up with the names beside it and every description with the descriptions, whatever
 * a line wraps to. Whitespace separates the cells; there are no rules.
 */
.about-made { margin-top: var(--s12); }
.customs {
  list-style: none; padding: 0; margin: var(--s6) 0 0;
  display: grid; gap: var(--s8) var(--s6); grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 680px) { .customs { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--s8); } }
@media (min-width: 1040px) { .customs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.custom-cell, .custom-link { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--s2); }
.custom-link { text-decoration: none; color: inherit; border-radius: var(--r-chip); }
.custom-link:focus-visible { outline: 2px solid var(--tomato); outline-offset: 6px; }
.custom-name { margin: 0; font-size: 19px; line-height: 1.25; font-weight: 600; color: var(--ink); align-self: end; }
@media (min-width: 760px) { .custom-name { font-size: 20px; } }
.custom-name::after { content: ' →'; color: var(--tomato); opacity: 0; transition: opacity 140ms ease; }
.custom-link:hover .custom-name, .custom-link:focus-visible .custom-name { color: var(--forest); }
.custom-link:hover .custom-name::after, .custom-link:focus-visible .custom-name::after { opacity: 1; }
.custom-line { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 34ch; align-self: start; }
@media (min-width: 760px) { .custom-line { font-size: 15.5px; } }
.about-made .about-close { margin-top: var(--s8); }
@media (prefers-reduced-motion: reduce) { .custom-name::after { transition: none; } }
.about-close { font-weight: 600; }
.about-materials { margin-top: var(--s12); }
.about-materials p { margin: 0 0 var(--s4); }
/* the sign-off, in the hand the posters are lettered in */
.signoff { margin-top: var(--s8) !important; color: var(--muted); }
.signoff-hand {
  display: block; margin-top: var(--s2); font-family: 'Belmonte', 'Fraunces', Georgia, serif;
  font-size: 38px; line-height: 1.1; color: var(--forest);
}

/* ── shipping ───────────────────────────────────────────────────────────── */
.ships-by {
  display: inline-block; margin: var(--s2) 0 0; padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--forest); color: var(--sheet); font-size: 15px;
}
.ships-by strong { color: var(--butter); }
.times { border-collapse: collapse; width: 100%; max-width: 560px; font-size: 15px; }
.times th, .times td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); }
.times thead th { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* ── contact ────────────────────────────────────────────────────────────── */
.contact-form { margin-top: var(--s6); max-width: 560px; }
.contact-form input[type="email"] {
  width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--rule);
  border-radius: var(--r-input); background: var(--sheet); color: var(--ink);
}
.contact-form .opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-status { margin: var(--s3) 0 0; font-size: 14px; }
.contact-status[data-ok="0"] { color: var(--tomato); }
.contact-status[data-ok="1"] { color: var(--forest); font-weight: 600; }