/* Content pages: guide, wholesale, about, shipping.
   Reading measure is held near 65 characters; everything else is the same
   grid and the same tables as the catalogue, so the site reads as one thing. */

.prose{max-width:68ch;padding-bottom:34px}
.prose h2{font-size:clamp(20px,2.4vw,26px);font-weight:800;letter-spacing:-.015em;
  margin-top:30px;margin-bottom:10px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:17px;font-weight:700;margin-top:20px;margin-bottom:5px}
.prose p{margin-bottom:12px;color:var(--ink-soft)}
.prose p strong{color:var(--ink)}
.prose a{color:var(--accent-ink);text-underline-offset:2px}
.prose .tablewrap{margin:14px 0 18px}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  background:var(--accent-soft);color:var(--accent-ink);padding:2px 7px;border-radius:2px;
  font-weight:600}

.bullets{margin:4px 0 14px}
.bullets li{position:relative;padding-inline-start:20px;padding-block:5px;
  color:var(--ink-soft)}
.bullets li::before{content:"";position:absolute;inset-inline-start:4px;top:14px;
  width:6px;height:6px;border-radius:50%;background:var(--accent)}

.small{font-size:13.5px;color:var(--ink-faint);max-width:68ch}

/* three short cards, used on the wholesale page */
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;
  padding-bottom:34px}
.infocard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:17px 19px;box-shadow:var(--shadow-1);min-width:0}
.infocard h3{font-size:16px;font-weight:700;margin-bottom:6px}
.infocard p{font-size:14px;color:var(--ink-soft)}

/* text beside a picture */
.split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:30px;
  align-items:start;padding-bottom:20px}
.split>*{min-width:0}
.shot{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--surface-2)}
.shot img{width:100%;height:auto;display:block}

/* a quiet closing call to action, not a banner */
.cta{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 24px;margin-bottom:50px;box-shadow:var(--shadow-1);max-width:68ch}
.cta h2{font-size:20px;font-weight:800;margin-bottom:5px}
.cta p{color:var(--ink-soft);margin-bottom:14px}

/* the wholesale quote form */
.formpanel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px 24px;margin-bottom:52px;box-shadow:var(--shadow-1);max-width:720px}
.formpanel h2{font-size:20px;font-weight:800;margin-bottom:14px}
.formpanel form{display:grid;gap:13px}
.formpanel .row2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.formpanel .field{display:grid;gap:5px;min-width:0}
.formpanel label{font-size:13px;font-weight:600;color:var(--ink-soft)}
.formpanel .req{color:var(--warn)}
.formpanel input,.formpanel textarea{width:100%;padding:11px 13px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg);
  min-height:44px;font-size:15px}
.formpanel textarea{min-height:84px;resize:vertical}
.formpanel input:focus,.formpanel textarea:focus{border-color:var(--accent);
  outline:none;box-shadow:0 0 0 1px var(--accent)}
.formpanel input[aria-invalid="true"]{border-color:var(--warn)}
.formpanel .err{font-size:12.5px;color:var(--warn);font-weight:600}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;margin:-1px;padding:0;border:0}
.result{padding:14px 16px;border-radius:var(--r);font-weight:600;font-size:14.5px}
.result.ok{background:var(--ok-soft);color:var(--ok)}
.result.bad{background:var(--warn-soft);color:var(--warn)}

@media (max-width:860px){
  .split{grid-template-columns:1fr;gap:22px}
  .shot{order:-1}
}
@media (max-width:520px){
  .formpanel{padding:18px 16px 20px}
  .formpanel .row2{grid-template-columns:1fr}
}

/* phone and WhatsApp links get a real tap area on mobile */
/* Inline links in a sentence are exempt from the 24px target rule, but a
   phone number is there to be tapped, so these get the room anyway. */
.prose a[href^="tel:"],.prose a[href*="wa.me"],
.small a[href^="tel:"],.small a[href*="wa.me"],
.formnote a[href^="tel:"]{display:inline-flex;align-items:center;
  min-height:26px;padding-block:3px}