/* ————————————————————————————————————————————————
   FORMA · The Catalog of Making
   A library card catalog for real-life workshops.
   ———————————————————————————————————————————————— */

@font-face {
  font-family: "Fraunces";
  src: url("/artifacts/forma-frontend--v1--s4-whacky--glm-5.3--vanilla--2026-09-18T13-17-15-671Z/assets/fonts/fraunces-normal.woff2") format("woff2");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/artifacts/forma-frontend--v1--s4-whacky--glm-5.3--vanilla--2026-09-18T13-17-15-671Z/assets/fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("/artifacts/forma-frontend--v1--s4-whacky--glm-5.3--vanilla--2026-09-18T13-17-15-671Z/assets/fonts/courier-prime-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("/artifacts/forma-frontend--v1--s4-whacky--glm-5.3--vanilla--2026-09-18T13-17-15-671Z/assets/fonts/courier-prime-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("/artifacts/forma-frontend--v1--s4-whacky--glm-5.3--vanilla--2026-09-18T13-17-15-671Z/assets/fonts/courier-prime-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --paper: #f2ebd8;
  --paper-deep: #e7dcc0;
  --card: #faf4e4;
  --ink: #2b2416;
  --ink-soft: #6a5c3e;
  --red: #bf3b23;
  --cobalt: #1f4f9e;
  --terracotta: #a44a2a;
  --moss: #47693f;
  --ochre: #a06f10;
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono: "Courier Prime", "Courier New", monospace;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.6'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

/* the `hidden` attribute must always win over author display rules */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    repeating-linear-gradient(0deg, rgba(43, 36, 22, 0.035) 0 2px, transparent 2px 5px),
    var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100dvh;
}

/* paper grain over everything */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.08;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 40;
}

/* ————— focus ————— */
:focus-visible {
  outline: 3px dashed var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 1rem;
  font-family: var(--font-mono);
  font-weight: 700;
  z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ————————————————— masthead ————————————————— */

.masthead {
  padding: 0 clamp(1rem, 4vw, 4rem);
  border-bottom: 3px solid var(--ink);
}

.masthead-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0;
  padding: 0.55rem 0 0.45rem;
  border-bottom: 1.5px solid var(--ink);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--ink);
}
.masthead-top span:nth-child(2) { color: var(--red); }

.masthead-main {
  display: grid;
  grid-template-columns: 1fr minmax(200px, 300px);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: center;
  padding: clamp(1rem, 3vw, 2.2rem) 0 clamp(1.2rem, 3vw, 2.4rem);
  max-width: 1280px;
  margin: 0 auto;
}

.masthead-title { position: relative; }

.forma {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(4.2rem, 11vw, 9.5rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-shadow:
    0.035em 0.035em 0 rgba(31, 79, 158, 0.30),
    -0.025em -0.022em 0 rgba(191, 59, 35, 0.32);
}
.forma-star { color: var(--red); font-size: 0.5em; vertical-align: 0.55em; }

.masthead-sub {
  margin: 0.7rem 0 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.3rem, 3vw, 2rem);
  color: var(--ink);
}
.masthead-sub em {
  font-style: italic;
  color: var(--red);
  border-bottom: 2px solid var(--red);
}

.masthead-note {
  margin: 0.9rem 0 0;
  max-width: 46ch;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.seal {
  position: absolute;
  right: -0.5rem;
  top: -1.2rem;
  width: clamp(84px, 10vw, 120px);
  color: var(--red);
  transform: rotate(10deg);
  opacity: 0.85;
  mix-blend-mode: multiply;
}
.seal-ring { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; fill: currentColor; font-family: var(--font-mono); }
.seal-line { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; fill: currentColor; font-family: var(--font-mono); }

.masthead-photo {
  margin: 0;
  position: relative;
  transform: rotate(1.6deg);
}
.masthead-photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 rgba(43, 36, 22, 0.18);
}
.masthead-photo::before,
.masthead-photo::after {
  content: "";
  position: absolute;
  width: 58px;
  height: 18px;
  background: rgba(160, 111, 16, 0.35);
  z-index: 1;
}
.masthead-photo::before { top: -9px; left: 14%; transform: rotate(-4deg); }
.masthead-photo::after { top: -9px; right: 14%; transform: rotate(3deg); }
.masthead-photo figcaption {
  margin-top: 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-align: right;
}

/* ————————————————— lookup desk ————————————————— */

.lookup {
  padding: clamp(1.2rem, 3vw, 2rem) clamp(1rem, 4vw, 4rem) 0;
  max-width: 1280px;
  margin: 0 auto;
}

.lookup-heading {
  margin: 0 0 1rem;
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
}
.caret {
  display: inline-block;
  width: 0.5em;
  height: 0.9em;
  margin-left: 0.25rem;
  background: var(--red);
  vertical-align: -0.08em;
  animation: caret-blink 1.15s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

.lookup-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.6rem;
  align-items: end;
}

.field { display: flex; flex-direction: column; gap: 0.3rem; flex: 1 1 240px; }
.field label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

#search {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  padding: 0.5rem 0.2rem;
  border: none;
  border-bottom: 2.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
}
#search::placeholder { color: rgba(106, 92, 62, 0.6); }
/* keep the global dashed :focus-visible outline; just redden the underline */
#search:focus-visible {
  border-bottom-color: var(--red);
  box-shadow: 0 3px 0 rgba(191, 59, 35, 0.25);
}

#filter {
  font-family: var(--font-mono);
  font-size: 1rem;
  padding: 0.45rem 0.6rem;
  border: 2px solid var(--ink);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 4px 4px 0 rgba(43, 36, 22, 0.18);
}

.hold-toggle {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  padding: 0.55rem 0.9rem;
  border: 2px solid var(--ink);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 4px 4px 0 rgba(43, 36, 22, 0.18);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.hold-toggle:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 rgba(43,36,22,0.18); }
.hold-toggle .hold-count { color: var(--red); }
.hold-toggle[aria-pressed="true"] {
  background: var(--red);
  color: var(--paper);
  border-color: var(--red);
  box-shadow: 4px 4px 0 rgba(191, 59, 35, 0.35);
}
.hold-toggle[aria-pressed="true"] .hold-count { color: var(--paper); }

.result-count {
  display: inline-block;
  margin: 1.1rem 0 0;
  padding: 0.3rem 0.7rem;
  border: 2px solid var(--red);
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  transform: rotate(-1.2deg);
  text-transform: uppercase;
  mix-blend-mode: multiply;
}

/* ————————————————— catalog ————————————————— */

.catalog {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(1.2rem, 3vw, 2rem) clamp(1rem, 4vw, 4rem) clamp(3rem, 6vw, 5rem);
}

.drawer-front {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 0.9rem;
  border: 2px solid var(--ink);
  border-bottom: 4px solid var(--ink);
  background:
    linear-gradient(180deg, #7a5a38 0%, #644726 40%, #55391b 100%);
  color: #efdfb8;
}
.drawer-label {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
}
.drawer-pulls { display: flex; gap: 0.9rem; }
.drawer-pulls span {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f0d78c, #a97f2e 70%);
  border: 1.5px solid #3a2410;
  box-shadow: 0 2px 0 rgba(0,0,0,0.35);
}

.card-list {
  list-style: none;
  margin: 0;
  padding: clamp(0.8rem, 2vw, 1.4rem) clamp(0.4rem, 1vw, 1rem) 0.4rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  background: var(--paper-deep);
  border: 2px solid var(--ink);
  border-top: none;
  box-shadow: inset 0 10px 14px -10px rgba(43, 36, 22, 0.4);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 2px solid var(--ink);
  padding: 0.85rem 0.95rem 0;
  transform: rotate(var(--tilt, 0deg));
  box-shadow: 7px 7px 0 var(--cat, rgba(43,36,22,0.25));
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.card:hover, .card:focus-within {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 10px 12px 0 var(--cat, rgba(43,36,22,0.25));
  z-index: 2;
}
.card.is-hidden { display: none; }
/* drawer pulled out with nothing inside: hide the tray, keep the cabinet */
.card-list.is-empty { display: none; }

.card-top {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.45rem;
  border-bottom: 1.5px dashed var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}
.card-no { color: var(--red); }

.card-body {
  position: relative;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 0.85rem;
  padding: 0.8rem 0 0.9rem;
}

.card-photo {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border: 1.5px solid var(--ink);
  transform: rotate(-2deg);
  box-shadow: 3px 3px 0 rgba(43, 36, 22, 0.22);
  justify-self: start;
  align-self: start;
}

.card-cat {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--cat, var(--ink));
  padding: 0.15rem 0.5rem;
  margin-bottom: 0.35rem;
}

.card-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.08;
  color: var(--ink);
}

.card-desc { margin: 0.45rem 0 0; font-size: 0.78rem; font-style: italic; color: var(--ink-soft); }
.card-meta { margin: 0.35rem 0 0; font-size: 0.8rem; }

.price-stamp {
  position: absolute;
  right: -0.2rem;
  bottom: 0.2rem;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--red);
  border: 2.5px solid var(--red);
  padding: 0.05rem 0.4rem;
  transform: rotate(-7deg);
  mix-blend-mode: multiply;
  opacity: 0.9;
}

.hold-flag {
  position: absolute;
  top: -0.9rem;
  right: 0.4rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--red);
  border: 2px solid var(--red);
  padding: 0.12rem 0.45rem;
  background: var(--card);
  transform: rotate(6deg);
  display: none;
}
.card.is-saved .hold-flag { display: block; animation: stamp-slam 0.4s ease-out; }

.card-open {
  margin: 0 -0.95rem;
  padding: 0.6rem;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: none;
  border-top: 1.5px dashed var(--ink-soft);
  cursor: pointer;
}
.card-open::after { content: " →"; color: var(--red); }
.card-open:hover { background: var(--ink); color: var(--paper); }

/* ————————————————— empty state ————————————————— */

.empty-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem;
  margin-top: 1rem;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border: 2px dashed var(--ink-soft);
  background: var(--paper-deep);
}
.empty-stamp {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.15;
  letter-spacing: 0.14em;
  text-align: center;
  color: var(--red);
  border: 3px solid var(--red);
  padding: 0.7rem 1.2rem;
  transform: rotate(-6deg);
  mix-blend-mode: multiply;
  opacity: 0.85;
}
.empty-copy { flex: 1 1 260px; }
.empty-title {
  margin: 0 0 0.4rem;
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 1.4rem;
}
.empty-copy p { margin: 0 0 0.9rem; color: var(--ink-soft); }
.empty-copy p:first-child { color: var(--ink); }

.btn {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.55rem 1rem;
  border: 2px solid var(--ink);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 4px 4px 0 rgba(43, 36, 22, 0.25);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 rgba(43,36,22,0.25); }
.btn:hover { background: var(--ink); color: var(--paper); }

/* ————————————————— colophon ————————————————— */

.colophon {
  border-top: 3px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1rem, 4vw, 4rem);
}
.colophon-inner, .colophon-cols {
  max-width: 1280px;
  margin: 0 auto;
}
.colophon-brand {
  margin: 0 0 1rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--paper);
}
.colophon-brand::after { content: ""; display: block; height: 2px; background: var(--red); margin-top: 0.6rem; }
.colophon-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  font-size: 0.78rem;
  line-height: 1.6;
}
.colophon-cols p { margin: 0; color: rgba(242, 235, 216, 0.8); }
.colophon-fine { font-style: italic; }

/* ————————————————— detail dialog ————————————————— */

.detail-dialog {
  margin: auto;
  padding: 0;
  border: none;
  background: transparent;
  max-width: min(920px, 100%);
  width: calc(100% - 2rem);
}
.detail-dialog::backdrop {
  background:
    radial-gradient(circle at 50% 40%, rgba(43,36,22,0.55), rgba(43,36,22,0.78));
}
dialog[open].detail-dialog { animation: dialog-in 0.28s ease-out; }
dialog[open].detail-dialog::backdrop { animation: backdrop-in 0.28s ease-out; }
@keyframes dialog-in {
  from { opacity: 0; transform: translateY(26px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }

.detail-card {
  position: relative;
  background: var(--card);
  border: 2.5px solid var(--ink);
  box-shadow:
    0 0 0 6px var(--paper),
    0 0 0 8px var(--ink),
    14px 18px 0 rgba(0, 0, 0, 0.3);
  padding: clamp(1.1rem, 3vw, 2rem);
  max-height: calc(100dvh - 3rem);
  overflow: auto;
  --cat: var(--ink);
}

.detail-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 0.6rem;
  border-bottom: 1.5px dashed var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  padding-right: 8rem;
}
.detail-top .detail-call { color: var(--red); }

.detail-close {
  position: absolute;
  top: clamp(0.7rem, 2vw, 1.1rem);
  right: clamp(0.7rem, 2vw, 1.1rem);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  padding: 0.45rem 0.7rem;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.detail-close:hover { background: var(--red); border-color: var(--red); color: var(--paper); }

.detail-head { padding-right: 7rem; }

.detail-chip {
  display: inline-block;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--cat);
  padding: 0.2rem 0.6rem;
  margin: 1rem 0 0.5rem;
}

.detail-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1;
}

.detail-instructor {
  margin: 0.5rem 0 0;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--ink-soft);
}

.detail-columns {
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  margin-top: 1.2rem;
}

.detail-figure {
  margin: 0;
  position: relative;
  transform: rotate(-1.2deg);
  align-self: start;
}
.detail-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--ink);
  padding: 5px;
  background: var(--paper);
  box-shadow: 6px 6px 0 var(--cat);
}
.detail-figure::before,
.detail-figure::after {
  content: "";
  position: absolute;
  width: 64px;
  height: 20px;
  background: rgba(160, 111, 16, 0.4);
  z-index: 1;
}
.detail-figure::before { top: -10px; left: 12%; transform: rotate(-4deg); }
.detail-figure::after { top: -10px; right: 12%; transform: rotate(5deg); }
.detail-figure figcaption {
  margin-top: 0.5rem;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  text-align: center;
}

.detail-body {
  margin: 0 0 1.2rem;
  font-size: 1rem;
  line-height: 1.7;
}
.detail-body .typed-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.35rem;
}

.detail-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0;
  margin: 1.4rem 0 0;
  border: 1.5px solid var(--ink);
  background: var(--card);
}
.detail-facts > div {
  padding: 0.6rem 0.8rem;
  border: 1.5px solid var(--ink);
  margin: -0.75px;
}
.detail-facts dt {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.detail-facts dd {
  margin: 0.25rem 0 0;
  font-size: 0.92rem;
  font-weight: 700;
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1.5px dashed var(--ink-soft);
}

.due-slip {
  position: relative;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 0.55rem 0.8rem;
  box-shadow: 3px 3px 0 rgba(43,36,22,0.18);
  max-width: 240px;
}
.due-label {
  margin: 0 0 0.4rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.due-stamp {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--red);
  transform: rotate(-2deg);
}
.due-day { font-size: 1.5rem; letter-spacing: 0.06em; }
.due-year { font-size: 1.1rem; }
.due-time { margin: 0.3rem 0 0; font-size: 0.72rem; color: var(--ink-soft); }

.save-btn {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.85rem 1.6rem;
  border: 2.5px solid var(--red);
  background: var(--card);
  color: var(--red);
  cursor: pointer;
  box-shadow: 5px 5px 0 rgba(191, 59, 35, 0.3);
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease, color 0.15s ease;
}
.save-btn:hover { background: rgba(191,59,35,0.08); }
.save-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 rgba(191,59,35,0.3); }
.save-btn[aria-pressed="true"] {
  background: var(--red);
  color: var(--paper);
}

.hold-stamp {
  position: absolute;
  top: 5.6rem;
  right: 5.2rem;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  letter-spacing: 0.3em;
  color: var(--red);
  border: 3px solid var(--red);
  padding: 0.3rem 0.8rem 0.3rem 1.1rem;
  transform: rotate(-12deg);
  mix-blend-mode: multiply;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
.hold-stamp::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px dashed var(--red);
}
.hold-stamp.is-on {
  opacity: 0.88;
  animation: stamp-slam 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}
/* already-saved card reopened: stamp shows, no slam */
.hold-stamp.pre {
  opacity: 0.88;
  transform: rotate(-12deg);
}
@keyframes stamp-slam {
  0% { opacity: 0; transform: rotate(-16deg) scale(1.9); }
  55% { opacity: 1; transform: rotate(-11deg) scale(0.92); }
  100% { opacity: 0.88; transform: rotate(-12deg) scale(1); }
}

/* ————————————————— toast ————————————————— */

.toast {
  position: fixed;
  inset: auto;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%) rotate(-1.5deg);
  background: var(--card);
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 rgba(43, 36, 22, 0.35);
  padding: 0.55rem 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  z-index: 80;
  max-width: calc(100vw - 2rem);
  text-align: center;
}
.toast strong { color: var(--red); }
.toast.show { animation: toast-in 0.3s ease-out; }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(14px) rotate(-1.5deg); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) rotate(-1.5deg); }
}

/* ————————————————— responsive ————————————————— */

@media (max-width: 760px) {
  .masthead-main { grid-template-columns: 1fr; }
  .masthead-photo { max-width: 320px; }
  .seal { right: 0; top: -0.6rem; }
  .detail-columns { grid-template-columns: 1fr; }
  .detail-top { padding-right: 7rem; }
  .colophon-cols { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .masthead-photo { display: none; }
  .masthead-top span:nth-child(3) { display: none; }
  .detail-dialog { width: 100%; margin: 0; }
  .detail-card {
    max-height: 100dvh;
    height: 100dvh;
    box-shadow: none;
    border-width: 2px 0 0 0;
  }
  .detail-head { padding-right: 0; }
  .detail-top { padding-right: 7.5rem; }
  .detail-close { padding: 0.5rem 0.6rem; }
  .detail-close .close-word { display: none; }
  .detail-actions { flex-direction: column; align-items: stretch; }
  .save-btn { width: 100%; }
  .hold-stamp { right: 0.5rem; top: 3.6rem; bottom: auto; }
  .card-body { grid-template-columns: 1fr; }
  .card-photo { width: 100%; height: 130px; }
  .price-stamp { bottom: auto; top: 0.9rem; }
}

/* ————————————————— reduced motion ————————————————— */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .caret { animation: none; }
  dialog[open].detail-dialog,
  dialog[open].detail-dialog::backdrop { animation: none; }
  .hold-stamp.is-on { animation: none; opacity: 0.88; }
  .card.is-saved .hold-flag { animation: none; }
  .toast.show { animation: none; }
  .card, .card:hover, .card:focus-within,
  .hold-toggle, .btn, .save-btn { transition: none; }
}