/* The story book — production layer for /literature/.
   Adapted from the corrected mobile-ready source
   (working/review/felt-book-mobile-2026-09-10/book.css): identical desktop
   geometry, timing, palette and motion structure, with the mobile single-page
   behaviour (one felt page of four stories at <=720px, no panning or cropping,
   flexible controls). Every rule is scoped to the book's own container
   (.book-page) or its dedicated production classes, so nothing leaks into the
   surrounding site and no site styles leak in. curl.css is linked after this
   file and owns the page-turn motion. */

.book-page {
  /* Turn timing — keep in sync with TURN_MS in book.js. */
  --fb-turn-ms: 900ms;
  --fb-book-max: 1300px;
  /* rem, not px: browser font enlargement widens the page floor with the
     text instead of shrinking titles into tiny cells. */
  --fb-page-min: 20rem;
  --fb-gutter: clamp(16px, 2.4vw, 30px);

  /* Deep teal ground from the Story Time opening; warm pages and gold details. */
  --fb-bg: #041821;
  --fb-felt: #07384a;
  --fb-letter: #fff6e5;
  --fb-muted: #c6d2d1;
  --fb-stitch: rgba(120, 174, 186, 0.52);
  --fb-valley: rgba(0, 0, 0, 0.26);

  /* Focus ring inside the always-dark book: the site token flips to a dark
     rust under the light theme, which would vanish on the felt — the only
     theme-derived value the book pins itself (the light override below
     repins it for the light felt). */
  --fb-focus: #ffd15c;

  /* Fine wool fibre recoloured as the opening card's richly dyed teal felt. */
  --fb-skin-tint-a: rgba(8, 79, 99, 0.78);
  --fb-skin-tint-b: rgba(3, 35, 48, 0.86);
  --fb-end-note: rgba(255, 248, 235, 0.42);
  --fb-wool: url('wool-felt-v3.webp');
  --fb-wool-page: 640px;
  --fb-wool-card: 460px;

  /* Whispered page layers at the outer margins: 1-4px, low contrast. */
  --fb-edge-1: rgba(104, 200, 231, 0.35);
  --fb-edge-2: rgba(59, 106, 120, 0.32);
  --fb-edge-3: rgba(4, 30, 41, 0.28);

  /* Small closed books: cream faces, forest ink. */
  --fb-cream: #fff7e8;
  --fb-cream-deep: #eadcc5;
  --fb-card-ink: #30253d;
  --fb-card-muted: #695d70;

  /* Warm brass controls. */
  --fb-brass: #f5bd2e;
  --fb-brass-bright: #ffd76b;
  --fb-brass-deep: #8a6210;
  --fb-brass-ink: #30213a;

  /* Matte controls: sunny gold with an aubergine edge. */
  --fb-ochre: #f5bd2e;
  --fb-ochre-light: rgba(255, 215, 107, 0.94);
  --fb-ochre-deep: #8a6210;

  /* Frame shadow: softer when the dark book sits on the light page. */
  --fb-frame: 0 22px 48px -28px rgba(3, 22, 30, 0.5);
}
:root[data-theme=dark] .book-page { --fb-frame: 0 28px 56px -30px rgba(0, 0, 0, 0.55); }

/* Light / system-light: pale violet pages sit on the warm paper ground,
   keeping the artwork colourful and the small-book cards easy to read. */
:root[data-theme=light] .book-page {
  --fb-bg: var(--paper, #fff9f1);
  --fb-felt: #eadff4;
  --fb-letter: var(--ink, #28213a);
  --fb-muted: var(--muted, #665e74);
  --fb-stitch: rgba(154, 107, 170, 0.48);
  --fb-valley: rgba(48, 37, 61, 0.14);
  --fb-focus: #a51449;
  --fb-skin-tint-a: rgba(244, 235, 251, 0.82);
  --fb-skin-tint-b: rgba(217, 196, 234, 0.87);
  --fb-end-note: rgba(48, 37, 61, 0.38);
  --fb-edge-1: rgba(213, 47, 100, 0.24);
  --fb-edge-2: rgba(118, 86, 181, 0.22);
  --fb-edge-3: rgba(74, 174, 208, 0.18);
  --fb-frame: 0 22px 48px -30px rgba(52, 32, 78, 0.3);
}

.book-page,
.book-page *,
.book-page *::before,
.book-page *::after { box-sizing: border-box; }

/* Book container (draft body.book-page, adapted): the pane that holds the
   whole book section inside <main>, carrying its own felt ground. The
   surrounding <main class="originals-wrap"> already adds horizontal padding,
   so at phone widths the container's own padding collapses to zero — one
   gutter, not two — and nothing is clipped to disguise a width bug. */
.felt-book-catalogue {
  margin: 1.5rem 0 4rem;
  padding: clamp(14px, 3vw, 28px);
  border-radius: 26px;
  background-color: var(--fb-bg);
  background-image: var(--felt-grain, none);
  background-blend-mode: soft-light;
  color: var(--fb-letter);
  font: 400 16px/1.55 var(--font-body, 'Avenir Next', Avenir, 'Segoe UI', sans-serif);
  box-shadow: var(--fb-frame);
}

.book-page a { color: inherit; }

.book-page a:focus-visible,
.book-page button:focus-visible,
.book-page [tabindex]:focus-visible {
  outline: 2px solid var(--fb-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* View panes and controls ------------------------------------------------- */

/* display declarations below must never defeat the hidden attribute. */
.literature-pane[hidden] { display: none !important; }

.literature-view-controls { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; }
.literature-view-controls[hidden] { display: none; }
.literature-view-controls button {
  border: 1px solid var(--line);
  border-radius: 2rem;
  padding: .65rem 1.1rem;
  min-height: 44px;
  background: transparent;
  color: var(--ink);
  font: 500 .875rem/1.4 var(--font-body, 'Avenir Next', Avenir, 'Segoe UI', sans-serif);
  cursor: pointer;
}
.literature-view-controls button[aria-pressed=true] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Compact main-view heading (replaces the site's large shelf intro; the
   book pane itself carries only a screen-reader h2). */
.shelf-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .25rem .9rem;
  margin: 0 0 1rem;
}
.shelf-heading h1 {
  margin: 0;
  font-family: var(--font-display, Georgia, 'Times New Roman', serif);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.15;
  color: var(--ink);
}
.shelf-heading-count {
  margin: 0;
  font-size: .875rem;
  color: var(--muted);
}

/* The open book ---------------------------------------------------------- */

.book-page .book-viewport { outline: none; }

.book-page .book-stage {
  perspective: 2400px;
  padding-inline: clamp(18px, 2.5vw, 26px);
}

.book-page .book {
  position: relative;
  display: flex;
  width: min(100%, var(--fb-book-max));
  margin-inline: auto;
  /* Definite height: the frame no longer depends on how many slots a spread
     populates (the final spread holds 2 titles + empties), so turning to and
     from the end never resizes the book. rem floor and ceiling scale with
     browser font enlargement; vw between them keeps the frame responsive.
     38rem (not 36) because the longest actual title wraps to 7 lines in a
     ~145px column at 200% enlargement — 36rem overflows that record. */
  height: clamp(38rem, 44vw, 40rem);
  border-radius: 26px;
  transform-style: preserve-3d;
  box-shadow: 0 32px 60px -30px rgba(0, 0, 0, 0.55);
}

.book-page .book[data-turning] * { pointer-events: none; }

/* Dyed-wool skin shared by resting pages and turning leaf faces. */
.book-page .skin {
  position: relative;
  background-color: var(--fb-felt);
  background-image:
    linear-gradient(168deg, var(--fb-skin-tint-a), var(--fb-skin-tint-b)),
    var(--fb-wool);
  background-blend-mode: normal;
  background-size: auto, var(--fb-wool-page);
  padding: var(--fb-gutter);
}
/* A fine stitched seam sits just inside the clean-cut page edge. */
.book-page .skin::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px dashed var(--fb-stitch);
  border-radius: 20px;
  opacity: .45;
  pointer-events: none;
}
/* Soft central fold: a wide, diffuse valley towards the spine edge. */
.book-page .skin--spine-right::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.12) 82%, var(--fb-valley) 100%);
  box-shadow: inset -6px 0 14px -8px rgba(0, 0, 0, 0.25);
}
.book-page .skin--spine-left::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(270deg,
    rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.12) 82%, var(--fb-valley) 100%);
  box-shadow: inset 6px 0 14px -8px rgba(0, 0, 0, 0.25);
}

.book-page .page { flex: 1 1 0; min-width: 0; display: flex; }
/* Supple sheets: 24-26px outer corners with a touch of asymmetry,
   whispered 1-4px low-contrast layers and one diffuse shadow —
   sheets of felt, not stacked bricks. */
.book-page .page-left {
  border-radius: 26px 8px 10px 24px;
  box-shadow:
    inset 0 12px 20px -16px rgba(0, 0, 0, 0.28),
    inset 0 -12px 20px -16px rgba(0, 0, 0, 0.28),
    -1px 0 0 var(--fb-edge-1),
    -2px 0 0 var(--fb-edge-2),
    -4px 0 0 var(--fb-edge-3),
    -8px 0 22px -10px rgba(0, 0, 0, 0.4);
}
.book-page .page-right {
  border-radius: 8px 24px 26px 10px;
  box-shadow:
    inset 0 12px 20px -16px rgba(0, 0, 0, 0.28),
    inset 0 -12px 20px -16px rgba(0, 0, 0, 0.28),
    1px 0 0 var(--fb-edge-1),
    2px 0 0 var(--fb-edge-2),
    4px 0 0 var(--fb-edge-3),
    8px 0 22px -10px rgba(0, 0, 0, 0.4);
}

/* Card grid: four per page, always two columns by two rows. The .book's
   definite height stretches every page — so the grid — to one fixed size,
   and the 1fr auto-rows share it equally: two rows stay reserved even on
   the final spread, where two titles face empty felt. */
.book-page .page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(min-content, 1fr);
  gap: clamp(10px, 1.6vw, 16px);
  width: 100%;
  align-self: stretch;
}

.book-page .slot--empty {
  border-radius: 13px;
  background: rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 8px rgba(0, 0, 0, 0.14);
}

.book-page .end-note {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, Georgia, 'Times New Roman', serif);
  font-style: italic;
  font-size: 1.125rem;
  letter-spacing: .1em;
  color: var(--fb-end-note);
  pointer-events: none;
}

/* Story cards: small closed books ---------------------------------------- */

.book-page .card {
  --fb-card-accent: var(--story-berry, #d52f64);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: clamp(8px, 1.1vw, 12px) clamp(8px, 1.1vw, 12px) clamp(8px, 1.1vw, 12px) clamp(13px, 1.3vw, 16px);
  /* Warm flax felt card; titles stay dark and readable. */
  background-color: var(--fb-cream);
  background-image:
    linear-gradient(165deg, rgba(255, 248, 233, 0.84), rgba(232, 216, 189, 0.88)),
    var(--fb-wool);
  background-blend-mode: normal;
  background-size: auto, var(--fb-wool-card);
  border-radius: 13px;
  text-decoration: none;
  box-shadow:
    0 3px 10px -2px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px color-mix(in srgb, var(--fb-card-accent), transparent 72%);
  transition: transform .18s ease, box-shadow .18s ease;
}
/* Thin coloured card spine. */
.book-page .card::before {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 4px;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(90deg, var(--fb-card-accent), color-mix(in srgb, var(--fb-card-accent), transparent 70%));
}
.book-page .slot:nth-child(4n+2) .card { --fb-card-accent: var(--story-sun, #f5bd2e); }
.book-page .slot:nth-child(4n+3) .card { --fb-card-accent: var(--story-sky, #4aaed0); }
.book-page .slot:nth-child(4n) .card { --fb-card-accent: var(--story-leaf, #3c9b72); }
@media (hover: hover) {
  .book-page .card:hover {
    transform: translateY(-3px);
    box-shadow:
      0 10px 22px -8px rgba(0, 0, 0, 0.42),
      inset 0 0 0 1px color-mix(in srgb, var(--fb-card-accent), transparent 72%);
  }
}

.book-page .card-art {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 9px;
  overflow: hidden;
  background: #221b35;
  box-shadow: inset 0 0 0 1px rgba(48, 37, 61, 0.32), 0 1px 3px rgba(0, 0, 0, 0.18);
}
.book-page .card-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* covers are already 16:10, so effectively uncropped */
}

.book-page .card-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 4px;
}
.book-page .card-title {
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 650;
  color: var(--fb-card-ink);
  overflow-wrap: break-word;
}
.book-page .card-meta {
  font-size: .75rem;
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--fb-card-muted);
}

/* Controls ---------------------------------------------------------------- */

/* Three columns — Previous | readout | Next — so 320px viewports and
   enlarged text share the row; min-width: 0 and wrappable labels stop
   any clipping. The visually-hidden status is out of flow and ignores
   the grid. The fade under the sticky row follows the theme ground. */
.book-page .book-controls {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(.6rem, 2vw, 1.4rem);
  padding: 16px 0 22px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), var(--fb-bg) 62%);
}
.book-page .felt-button {
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--fb-brass-ink);
  /* Matte golden felt control with a fine stitched edge. */
  background-color: var(--fb-ochre);
  background-image:
    linear-gradient(180deg, rgba(255, 215, 107, 0.8), rgba(232, 170, 30, 0.87)),
    var(--fb-wool);
  background-blend-mode: normal;
  background-size: auto, 360px;
  border: 1px dashed var(--fb-ochre-deep);
  border-radius: 999px;
  padding: 9px 18px;
  min-width: 0;
  justify-self: center;
  overflow-wrap: anywhere;
  cursor: pointer;
  box-shadow:
    0 4px 12px -4px rgba(0, 0, 0, 0.45),
    inset 0 1px 2px rgba(0, 0, 0, 0.12);
}
.book-page .felt-button:hover:not(:disabled) {
  background-image:
    linear-gradient(180deg, rgba(255, 233, 143, 0.76), rgba(245, 189, 46, 0.84)),
    var(--fb-wool);
}
.book-page .felt-button:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow:
    0 2px 6px -3px rgba(0, 0, 0, 0.4),
    inset 0 1px 2px rgba(0, 0, 0, 0.12);
}
.book-page .felt-button:disabled {
  opacity: .45;
  cursor: default;
  box-shadow: none;
}
.book-page .spread-readout {
  margin: 0;
  min-width: 11ch;
  text-align: center;
  font-size: .875rem;
  color: var(--fb-muted);
  font-variant-numeric: tabular-nums;
}

.book-page .pan-hint {
  display: none;
  margin: 8px 0 0;
  text-align: center;
  font-size: .8125rem;
  color: var(--fb-muted);
}

/* Responsive ----------------------------------------------------------------
   Phones (<=720px): ONE whole felt page — four stories in the same 2x2
   grid — inside a flexible-height frame. No second page, no sideways
   panning or cropping, no page min-width that could overflow a narrow
   viewport; book.js pages through it four stories at a time. The
   surrounding .originals-wrap already pads the page, so the container's
   own padding collapses to zero to avoid double gutters narrowing the
   cards. Nothing is hidden or clipped to disguise a width bug. */

@media (max-width: 480px) {
  .felt-book-catalogue { padding-inline: 0; }
  .book-page .felt-button { padding: 8px 10px; }
  .shelf-heading h1 { font-size: 2rem; } /* ~32px compact title */
}

@media (max-width: 720px) {
  .felt-book-catalogue { padding-inline: 0; }
  .book-page .book-stage { padding-inline: clamp(10px, 3vw, 20px); }
  .book-page .book {
    width: 100%;
    max-width: none;
    /* The desktop .book height (clamp) would still win on mobile via the
       cascade, pinning the frame shut; height:auto releases it so the
       min-height below governs and the book can grow for enlarged text. */
    height: auto;
    /* ~520-580px at ordinary 16px text (537px at 375vw, 528px floor at
       320vw); the rem bounds scale with browser font enlargement, and the
       always-reserved four slots keep the final 2-story page the same
       height as every other page at a given viewport/text setting.
       min-height, not height: at large text enlargement the frame grows
       with the content (readable text outranks a fixed height), while the
       definite min still stretches the grid so both rows stay reserved
       whenever the content fits inside it. */
    min-height: clamp(33rem, 58vw + 20rem, 36.25rem);
    border-radius: 20px;
  }
  .book-page .page-left { border-radius: 20px 12px 12px 20px; }
  /* The right page is hidden by CSS, not removed: returning to desktop
     just unhides it, and book.js keeps its content in sync. */
  .book-page .page-right { display: none; }
  .book-page .skin { padding: clamp(10px, 3vw, 16px); }
  .book-page .page-grid { gap: clamp(8px, 2.4vw, 12px); }
  .book-page .card { gap: 6px; padding: 8px 8px 8px 12px; }
  /* Long titles must wrap within the narrow card, not stretch the grid:
     mobile-only so the desktop card rules stay exactly as they were. */
  .book-page .card-copy { min-width: 0; }
  .book-page .card-meta { overflow-wrap: break-word; }
  /* Compact but legible: 15px titles, 14px meta at the default 16px root. */
  .book-page .card-title { font-size: .9375rem; }
  .book-page .card-meta { font-size: .875rem; }
  .book-page .felt-button { padding: 8px 12px; min-height: 44px; }
  /* Wrapping control row: at ordinary sizes Previous | readout | Next still
     share one line (the flex order matches the desktop grid columns), but
     under text enlargement the readout wraps to its own row instead of
     overflowing the viewport. Buttons keep a 44px touch target and their
     labels may wrap; nothing is clipped or shrunk. */
  .book-page .book-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-block: 12px 18px;
  }

  /* Mobile page arrival: a brief, subtle fade/lift on the freshly
     committed single page (book.js sets data-arrive for ~180ms). Desktop
     never carries the attribute and keeps the full curl instead. */
  .book-page .book[data-arrive] .page-left .page-grid {
    animation: fb-page-arrive 180ms ease-out;
  }
}

@keyframes fb-page-arrive {
  from { opacity: .35; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Motion preferences ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .book-page .card { transition: none; }
  .book-page .card:hover { transform: none; }
  .book-page .felt-button:active:not(:disabled) { transform: none; }
  .book-page .book[data-arrive] .page-grid { animation: none; }
}

/* Utilities ----------------------------------------------------------------- */

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

/* Independent reading and video links within each album card. */
.book-page .card-reader { display: flex; flex-direction: column; gap: 8px; color: inherit; text-decoration: none; min-width: 0; }
.book-page .card-video { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: auto; min-height: 44px; padding: 6px 8px; font-size: .75rem; font-weight: 650; line-height: 1.3; text-decoration: none; text-align: center; }
/* Crop the original transparent canvas to its measured alpha bounds:
   source 1255x1075; visible logo x214 y248, 827x579. */
.book-page .card-video .card-video-icon { position: relative; display: block; width: 24px; aspect-ratio: 827 / 579; flex: 0 0 24px; overflow: hidden; margin: 0; padding: 0; }
.book-page .card-video .card-video-icon img { position: absolute; display: block; width: 151.7533%; height: 185.665%; max-width: none; left: -25.8767%; top: -42.8325%; margin: 0; padding: 0; object-fit: fill; }
.book-page .card-video span { min-width: 0; overflow-wrap: break-word; }
.book-page .card-reader:focus-visible, .book-page .card-video:focus-visible { outline: 3px solid #147fa3; outline-offset: 3px; border-radius: 8px; }
@media (max-width: 720px) { .book-page .card-reader { gap: 6px; } }

/* A compact felt Originals tag and page count sit between cover and title. */
.book-page .card-copy { gap: 6px; }
.book-page .card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .75rem; }
.book-page .card-pages { white-space: nowrap; margin-left: auto; }
.book-page .card-original-tag { position: relative; display: inline-block; padding: 4px 8px; border-radius: 5px 7px 5px 6px; color: #fff9ed; background-color: #32685b; background-image: linear-gradient(#32685bb3,#32685bb3),var(--fb-wool); background-size: auto,180px; box-shadow: inset 0 1px 2px #ffffff42,0 2px 0 #20463b; font-size: .6875rem; font-weight: 650; line-height: 1.3; }
.book-page .card-original-tag::after { content: ''; position: absolute; inset: 2px; border: 1px dashed #c6dec58c; border-radius: 3px 5px 3px 4px; pointer-events: none; }

/* Felt swallowtail category flags hang from the card corner. */
.book-page .card-art { position: relative; }
.book-page .card-kind-tag {
  position: absolute; top: 0; right: 0; width: 32px; height: 42px; z-index: 1; opacity: .88;
  display: grid; place-items: start center; padding-top: 6px; box-sizing: border-box;
  border-radius: 0 13px 0 0;
  clip-path: polygon(0 0,100% 0,100% 100%,50% 79%,0 100%);
  color: #fff9ed; background-color: #32685b;
  background-image: linear-gradient(#32685bb3,#32685bb3),var(--fb-wool);
  background-size: auto,180px;
  box-shadow: inset 0 1px 2px #ffffff42,0 2px 2px #142d3970;
}
.book-page .card-kind-rhyme { color: #332814; background-color: #f2c34d; background-image: linear-gradient(#f2c34dcc,#f2c34dcc),var(--fb-wool); }

.book-page .card-kind-tag::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 42'%3E%3Cpath d='M3 3H19Q29 3 29 13V37L16 30L3 37Z' fill='none' stroke='%23fff9ed' stroke-opacity='.55' stroke-width='1' stroke-dasharray='2 2'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.book-page .card-kind-tag svg { display: block; width: 20px; height: 20px; }

.book-page .card-kind-rhyme::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 42'%3E%3Cpath d='M3 3H19Q29 3 29 13V37L16 30L3 37Z' fill='none' stroke='%23512d52' stroke-width='1' stroke-dasharray='2 2'/%3E%3C/svg%3E");
}