/* =====================================================================
   DRAFTS PAGE · page-scoped additions (drafts.html only)
   Everything here uses site.css tokens; nothing hard-codes a theme colour.
   ===================================================================== */

/* ---------- hero: the in-page jump link points down ---------- */
.drafts-jump .arr { top: 0; }

/* ---------- gallery ---------- */
.drafts-gallery { padding-top: 16px; }
@media (max-width: 720px) { .drafts-gallery { padding-top: 8px; } }

/* the in-page jump arrow dips on hover (card art gestures live in site.css §21/§29) */
@media (prefers-reduced-motion: no-preference) {
  .drafts-jump .arr { transition: top .18s var(--ease); }
  .drafts-jump:hover .arr { left: 0; top: 3px; }
}

/* ---------- start band: one CTA, right after the gallery ---------- */
.start-band {   /* with .panel.panel--banded */
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px 36px; align-items: center;
  padding: 30px 38px 32px;
  margin-bottom: 8px;
}
.start-band__art { width: 76px; height: 76px; }
.start-band h2 { font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem); }
.start-band__text p { margin-top: 8px; color: var(--ink-2); max-width: 46ch; }
.start-band__action .action-note { margin-top: 10px; }
@media (max-width: 900px) {
  .start-band { grid-template-columns: auto minmax(0, 1fr); }
  .start-band__action { grid-column: 2; }
}
@media (max-width: 720px) {
  .start-band { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px 20px 24px; }
  .start-band__action { grid-column: auto; margin-top: 6px; }
  .start-band__art { width: 56px; height: 56px; }
}

/* ---------- feedback wall ---------- */
.wall__head { border-top: 4px double var(--rule); padding-top: 22px; }
.quote--text-only .quote__text { margin-top: 0; }
.quote[tabindex="-1"]:focus-visible { outline: var(--ring) solid var(--focus); outline-offset: 5px; }
.wall__summary > span { display: inline-flex; align-items: baseline; }
.wall__summary .vh { position: absolute; }

/* [shared?] Empty wall: a cork board with the first slot waiting.
   The message is the first "note"; two blank taped slots show where
   responses will pin up. Blank slots are decorative (aria-hidden). */
.wall-empty {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: 30px; margin-top: 34px; align-items: stretch;
}
.wall-empty .wall-state.is-empty {
  position: relative; margin: 0;
  flex-direction: column; align-items: flex-start; gap: 16px;
  padding: 30px 24px 26px;
  background: var(--surface); border-style: dashed;
  transform: rotate(-.6deg);
}
.wall-empty .wall-state.is-empty::before,
.wall-slot::before {   /* tape strip, as on a real quote card */
  content: ""; position: absolute; left: 50%; top: -9px; width: 72px; height: 17px; margin-left: -36px;
  background: var(--wash); opacity: .8; transform: rotate(-3deg);
}
.wall-empty .wall-state__art { width: 72px; height: 72px; }
.wall-empty .wall-state.is-empty p { font: italic 400 1.3rem/1.45 var(--f-display); color: var(--ink); }
.wall-empty .wall-state.is-empty a { font-style: normal; font-family: var(--f-text); font-weight: 700; white-space: nowrap; }
.wall-slot {
  position: relative; display: grid; place-items: center; min-height: 190px;
  border: 1.5px dashed var(--hair);
  background: repeating-linear-gradient(135deg, transparent 0 9px, var(--hatch-soft) 9px 10px);
  transform: rotate(.5deg);
}
.wall-slot + .wall-slot { transform: rotate(-.2deg); }
.wall-slot::before { opacity: .45; transform: rotate(2deg); }
.wall-slot .hand-note { color: var(--ink-2); opacity: .9; }
/* Fixed columns so a slot never wraps onto a row by itself:
   3 across on wide screens, note + one slot on mid widths, note alone on phones. */
@media (min-width: 1092px) { .wall-empty { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 721px) and (max-width: 1091px) {
  .wall-empty { grid-template-columns: repeat(2, 1fr); }
  .wall-slot + .wall-slot { display: none; }
}
@media (max-width: 720px) {
  .wall-empty { grid-template-columns: 1fr; }
  .wall-slot { display: none; }   /* phones: just the one waiting note */
}

/* the load-error state keeps the base look; give it a little air */
#wall-error, #wall-loading { margin-top: 30px; }

/* ---------- drafts note (small, above the footer) ---------- */
.drafts-note { margin-top: 64px; }
.drafts-note .fine { padding-top: 14px; border-top: 1px solid var(--hair); }

/* ---------- forced colours: decorative bits drop out ---------- */
@media (forced-colors: active) {
  .wall-slot, .wall-empty .wall-state.is-empty::before { display: none; }
}

/* ---------- two groups: personal portfolios, business sites ---------- */
.drafts-group__head { max-width: 62ch; margin-bottom: 34px; }
.drafts-group__note { margin-top: 10px; color: var(--ink-2); }
.drafts-gallery + .drafts-gallery { padding-top: clamp(28px, 4vw, 56px); }
/* the diner card's own hover gesture: the sign tips like it's swinging */
.specimen__sheet .d-sign { transform-box: fill-box; transform-origin: 50% 0; }
@media (prefers-reduced-motion: no-preference) {
  .specimen__sheet .d-sign { transition: transform .45s var(--ease); }
  .specimen:hover .specimen__sheet .d-sign { transform: rotate(-6deg); }
}
/* the Hrish Dave card's hover gesture: the tracking points lift a little */
.specimen__sheet .hd-face { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .specimen__sheet .hd-face { transition: transform .6s var(--ease); }
  .specimen:hover .specimen__sheet .hd-face { transform: translateY(-3px) scale(1.04); }
}