/* ============================================================
   Limerick Press — home page
   Minimal grid of tiles. First tile links to the Dumb Daddy Jokes book;
   the other 11 are unlabeled placeholders for future works.
   ============================================================ */
:root {
  --cream: #f4ecd8;
  --cream-deep: #ecdfc1;
  --ink: #2b2724;
  --ink-soft: #4a423b;
  --rule: #d6c79a;
  --accent: #ee0a14;
  --tile-bg: #fffaee;
  --tile-bg-feature: #fff4d9;
  --tile-shadow: 0 1px 0 rgba(43,39,36,0.04), 0 8px 24px rgba(43,39,36,0.08);
  --tile-shadow-hover: 0 1px 0 rgba(43,39,36,0.04), 0 16px 36px rgba(43,39,36,0.16);
  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Fraunces", Georgia, serif;
  --gut: clamp(1.25rem, 4vw, 4rem);
  --maxw: 1200px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(1100px 700px at 50% -10%, #fff6e0 0%, var(--cream) 55%, var(--cream-deep) 100%);
  color: var(--ink);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
}

/* Full-width red warning stripe across the very top of the home page.
   Replaces the older triangular corner violator. The NOT-PC badge sits
   inside the stripe at the left; the headline "For Adults Only" is
   reversed out in white and centered on the rest of the stripe. */
.adult-stripe {
  position: relative;
  width: 100%;
  background: #ee0a14;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(0.6rem, 2.5vw, 1.4rem);
  /* Slim padding so the badge can grow tall and the text can run big. */
  padding: clamp(0.5rem, 1.8vw, 1rem) clamp(0.75rem, 3vw, 1.6rem);
  z-index: 50;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  overflow: hidden;
}
/* NOT-PC badge sits at the LEFT end of the red stripe. Square, square-ish
   white card with the printed mark; sized to match the band height. */
.adult-stripe-badge {
  flex: 0 0 auto;
  width: clamp(54px, 13vw, 96px);
  height: auto;
  background: #fff;
  border-radius: 6px;
  padding: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.adult-stripe-text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  /* One-line phrase: scales with viewport width so it always fits on a
     single line from ≥3 20 px phones up to wide desktops. The vw factor
     is tuned so even after subtracting badge + gaps + padding the text
     stays inside the band. */
  font-size: clamp(1.05rem, 5.4vw, 2.8rem);
  line-height: 1;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  white-space: nowrap;
}
/* NOT-PC badge floated at the START of the hero copy, top-left corner.
   Sized 50% larger than the previous corner-violator (clamp 56-96 became
   clamp 84-144). With float: left + shape-outside: margin-box, the first
   few lines of copy sit just to the right of the badge and run to the
   tile's right edge; once text clears the badge's bottom edge the
   remaining lines flow the full horizontal width of the tile. Hyphenation
   on the copy lets tight lines break cleanly instead of leaving large
   right-side gaps. */
.hero-badge {
  float: left;
  width: clamp(84px, 18vw, 144px);
  height: auto;
  margin: 0.15rem 0.6rem 0.2rem 0;
  shape-outside: margin-box;
  filter: drop-shadow(0 1px 2px rgba(43,39,36,0.18));
  pointer-events: none;
}

/* Forces text after this point to clear the floated badge and start at the
   true left edge of the tile. Used to push “Could cause inappropriate
   giggles.” to its own full-width line. */
.hero-break {
  display: block;
  clear: left;
  height: 0;
  line-height: 0;
}

/* Small superscript asterisk that links down to the footnote. Reads as a
   gentle wink at the warning, not a separate UI element. */
.adult-stripe-asterisk {
  color: #fff;
  text-decoration: none;
  font-size: 0.65em;
  font-weight: 700;
  margin-left: 0.15em;
  vertical-align: super;
  line-height: 1;
}
.adult-stripe-asterisk:hover,
.adult-stripe-asterisk:focus-visible {
  text-decoration: underline;
  outline: none;
}

.page {
  max-width: var(--maxw);
  margin: 0 auto;
  /* Top padding is smaller now — the red stripe handles the top band and
     no longer needs the title to clear a corner triangle. */
  padding: clamp(1.5rem, 4vw, 3rem) var(--gut) clamp(3rem, 6vw, 5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 5vw, 4rem);
  min-height: 100vh;
  min-height: 100dvh;
}

.masthead {
  text-align: center;
  padding-top: clamp(0.25rem, 2vw, 1rem);
}
.smallcaps {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: clamp(0.7rem, 2vw, 0.85rem);
  color: var(--ink-soft);
  margin: 0 0 1rem;
}
.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.05rem, 8.4vw, 5rem);
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
.lede {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-soft);
  font-size: clamp(1rem, 2.6vw, 1.3rem);
  margin: 0.8rem 0 0;
}

/* ===== Tile grid =====
   Both mobile and desktop use a 2-column grid:
   - On mobile the hero spans both columns (full width) and the 6 small tiles
     stack into a 3-row 2-column layout below it.
   - On desktop the same structure scales up — hero is one wide banner, the
     six small tiles form a symmetric 2x3 grid below it. */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 2.2vw, 1.4rem);
}

.tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--tile-bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: var(--tile-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  padding: 1rem;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
  overflow: hidden;
}

.tile--feature {
  background: var(--tile-bg-feature);
  border-color: #c9a44a;
  box-shadow: var(--tile-shadow);
}
.tile--feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 50% 10%, rgba(201,164,74,0.18), transparent 70%),
    radial-gradient(60% 50% at 50% 100%, rgba(179,38,30,0.10), transparent 70%);
  pointer-events: none;
}
.tile--feature:hover,
.tile--feature:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--tile-shadow-hover);
  outline: none;
}

/* Alternate feature tile (Click For Limericks): cool charcoal-ink accent */
.tile--alt {
  background: #fff8e5;
  border-color: #2b2724;
}
.tile--alt::before {
  background:
    radial-gradient(60% 50% at 50% 10%, rgba(43,39,36,0.10), transparent 70%),
    radial-gradient(60% 50% at 50% 100%, rgba(179,38,30,0.10), transparent 70%);
}
.tile--alt .tile-title { color: var(--ink); }

.tile-label {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  line-height: 1.05;
}
.tile-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1rem, 3.6vw, 1.7rem);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.tile-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(0.78rem, 2.4vw, 1.05rem);
  color: var(--ink-soft);
}

/* Suggestion Box tile: warm teal accent so it reads as the “invitation” tile */
.tile--suggest {
  background: #fff8e5;
  border-color: #2f6e6a;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.tile--suggest::before {
  background:
    radial-gradient(60% 50% at 50% 10%, rgba(47,110,106,0.18), transparent 70%),
    radial-gradient(60% 50% at 50% 100%, rgba(201,164,74,0.14), transparent 70%);
}
.tile--suggest .tile-title { color: var(--ink); }
.tile--suggest .tile-icon {
  color: #2f6e6a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.35rem;
}

/* Back Story tile: deep red/ink accent so it reads as the “story” tile */
.tile--backstory {
  background: #fff4d9;
  border-color: var(--accent);
  color: var(--ink);
}
.tile--backstory::before {
  background:
    radial-gradient(60% 50% at 50% 10%, rgba(179,38,30,0.16), transparent 70%),
    radial-gradient(60% 50% at 50% 100%, rgba(43,39,36,0.10), transparent 70%);
}
.tile--backstory .tile-title { color: var(--ink); }
.tile--backstory .tile-label {
  width: 100%;
  container-type: inline-size;
  /* Center the beetle icon and title within the tile. */
  align-items: center;
  text-align: center;
}
.tile-title--backstory {
  display: block;
  white-space: nowrap;
  /* Stretched so "THE BACK STORY" spans the tile width edge-to-edge.
     cqi sizing scales with container width; ceiling raised so we don't
     cap before reaching the edges on wider mobile tiles. */
  font-size: clamp(0.85rem, 12.6cqi, 4rem);
  letter-spacing: -0.01em;
  line-height: 1.05;
  width: 100%;
}
.tile--backstory .tile-icon {
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.35rem;
}
.tile-icon--beetle {
  width: clamp(56px, 18vw, 88px);
  height: clamp(56px, 18vw, 88px);
  margin: 0 auto 0.25rem;
}
.tile-icon--beetle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* Subtle drop shadow so the white-background PNG floats on the cream tile */
  filter: drop-shadow(0 2px 6px rgba(43,39,36,0.18));
}

/* Shop tile: warm gold/amber accent — the “buy stuff” tile */
.tile--shop {
  background: #fff4d9;
  border-color: #c9a44a;
  color: var(--ink);
}
.tile--shop::before {
  background:
    radial-gradient(60% 50% at 50% 10%, rgba(201,164,74,0.26), transparent 70%),
    radial-gradient(60% 50% at 50% 100%, rgba(179,38,30,0.10), transparent 70%);
}
.tile--shop .tile-title {
  color: var(--ink);
  /* Long title — shrink the font and let it wrap onto three lines */
  font-size: clamp(0.78rem, 2.6vw, 1.15rem);
  line-height: 1.12;
}
.tile--shop .tile-icon--shop {
  color: #a07a1f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.35rem;
}
.tile--shop .tile-icon--shop svg {
  width: clamp(30px, 9vw, 44px);
  height: clamp(30px, 9vw, 44px);
}
/* With 7 tiles total — one wide hero tile (Click For Limericks) that spans
   two columns on desktop plus six standard tiles — the grid lays out as:
     Row 1: [Click For Limericks —————————] [Suggestion Box]
     Row 2: [Back Story] [Post A Limerick] [Dumb Daddy Jokes]
     Row 3: [Free Limerick Downloads] [Shop]
   On mobile the wide tile drops to a single full-width row. */

.tile--wide {
  grid-column: span 2;
  /* Wide rectangle. Height is driven by the copy plus its (reduced)
     padding — no aspect-ratio lock — so the tile sits as compact as the
     text allows. */
  align-self: start;
  min-height: auto;
  aspect-ratio: auto;
}
.tile--wide .tile-label--wide {
  /* Copy fills the rectangle edge-to-edge. No right-padding reservation
     for the badge — the badge floats inside the copy and nests into the
     leftover space at the bottom-right of the last line. */
  position: relative;
  display: block;
  height: 100%;
  padding: clamp(0.45rem, 1vw, 0.7rem) clamp(1rem, 2.5vw, 1.75rem);
}
.tile--wide .tile-copy {
  display: block;
  text-align: left;
}
/* Legacy in-tile badge — no longer used (badge moved to corner violator). */
.tile-badge { display: none; }

.tile-title--wide {
  font-size: clamp(1.4rem, 4.2vw, 2.6rem);
  letter-spacing: -0.02em;
  line-height: 1;
  text-align: center;
}
.tile-sub--wide {
  /* Copy fills the tile. flow-root contains the floated badge so the
     tile shrink-wraps the copy block correctly. Text is left-aligned
     and allowed to hyphenate so long words split cleanly across lines
     instead of leaving a ragged right-side gap. */
  display: flow-root;
  font-size: clamp(1.35rem, 4.1vw, 2.55rem);
  letter-spacing: 0;
  font-style: normal;
  font-weight: 600;
  opacity: 1;
  line-height: 1.18;
  text-align: left;
  hyphens: auto;
  -webkit-hyphens: auto;
  max-width: none;
  width: 100%;
  margin: 0;
}

/* "Scroll" CTA: looks like a clickable link inside the hero copy. */
.hero-cta {
  font-style: normal;
  font-weight: 700;
  color: #ee0a14;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.12em;
  opacity: 1;
}
.tile:hover .hero-cta,
.tile:focus-visible .hero-cta {
  text-decoration-thickness: 0.14em;
}

/* Legacy: the tile that used to sit to the right of the wide hero on row 1
   stretched vertically to match the hero. The grid is now 2-column on both
   mobile and desktop so the hero spans both columns and no tile sits next to
   it — the stretch is a no-op (kept as `auto` to be explicit). */
.tile--hero-right { align-self: auto; }

/* DIY tile sits directly under Back Story (row 2, col 3) on desktop. */
.tile--post-right { grid-column: 3; grid-row: 2; }
@media (max-width: 540px) {
  .tile--post-right { grid-column: auto; grid-row: auto; }
}

/* DIY tile: title above a 2x2 colored-word grid. The label is a natural-
   height column (title + two capsule rows with a fixed gap between them)
   that the tile vertically centers — then translated slightly upward to
   compensate for the uppercase title's leading, so the *visible* empty
   space above the headline equals the visible empty space below the
   bottom capsule row. The title reuses .tile-title--backstory styling so
   the two adjacent tiles have visually identical headings. */
.tile--post {
  align-items: center;
  justify-content: center;
}
.tile--post .tile-label {
  width: 100%;
  height: auto;
  padding-left: 0;
  padding-right: 0;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  container-type: inline-size;
  /* Vertical rhythm: gap between title → row 1 → row 2. */
  gap: clamp(0.4rem, 3cqi, 0.95rem);
  /* Small upward nudge so the visible head space (above the cap-height of
     the title letters) matches the visible foot space (below the capsule
     outlines). Without this, the title's line-height leading makes the top
     read as larger empty space than the bottom. */
  transform: translateY(-0.5rem);
}
.tile--post .tile-title {
  margin-top: 0;
}

/* Each row holds two capsules side by side. The two rows are siblings of the
   title in .tile-label, which uses space-evenly to balance vertical gaps. */
.tile-diy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: 100%;
  align-items: center;
  justify-items: stretch;
  /* Column gap between the two capsules in this row. */
  gap: 0 0.4em;
}
.tile-diy-cell {
  /* Each capsule: outlined pastel container with a word above and a badge
     below, both centered. All four capsules are the same size because the
     grid columns are equal and each cell has identical content structure. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  width: 100%;
  min-width: 0;
  /* Capsule shape — rounded rectangle with a soft outline so each one reads
     as a discrete container. */
  border: 1.5px solid rgba(43, 39, 36, 0.35);
  border-radius: 10px;
  padding: 0.35em 0.35em;
  box-sizing: border-box;
}
@media (max-width: 540px) {
  .tile-diy-cell {
    /* On the smaller mobile tile, shrink capsule padding and border radius so
       the bottom row still clears the tile's bottom edge. */
    border-width: 1px;
    border-radius: 8px;
    padding: 0.25em 0.25em;
    gap: 0.1em;
  }
}
.tile-diy-word {
  /* Uniform sizing across all four words; all rendered in the same black ink
     color so the pastel backgrounds carry the per-cell identity. */
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 1.0;
  font-size: clamp(0.9rem, 11cqi, 2.6rem);
  white-space: nowrap;
  color: var(--ink);
}
/* ILLUSTRATE is significantly longer than the others; tighten its tracking
   further so it still fits within its capsule at the same nominal font size. */
.tile-diy-cell--illustrate .tile-diy-word { letter-spacing: -0.15em; }
/* Icon badge sits under each word. Color inherits via currentColor from the
   .tile-diy-cell--* class. Sized in cqi so it scales with the tile. */
.tile-diy-badge {
  display: block;
  width: clamp(28px, 17cqi, 64px);
  height: clamp(28px, 17cqi, 64px);
  /* Slight drop shadow so the line-art icons feel like soft badges, not
     decals. */
  filter: drop-shadow(0 1px 1px rgba(43, 39, 36, 0.18));
}
/* Per-cell pastel background + matching badge stroke color. Words stay black
   (.tile-diy-word above) so the pastel fills are the only color identifier. */
.tile-diy-cell--write {
  background: #e4e4e7;            /* pastel grey */
  color: #4b4b4b;                  /* badge ink — deep grey to match the surface */
  border-color: rgba(75, 75, 75, 0.4);
}
.tile-diy-cell--illustrate {
  background: #fbd4de;            /* pastel pink */
  color: #b03a5b;                  /* badge ink — rose */
  border-color: rgba(176, 58, 91, 0.45);
}
.tile-diy-cell--partner {
  background: #c9e7c9;            /* pastel green */
  color: #2f6f3f;                  /* badge ink — forest green */
  border-color: rgba(47, 111, 63, 0.45);
}
.tile-diy-cell--post {
  background: #cfe2f3;            /* pastel light blue */
  color: #3a5a80;                  /* badge ink — slate blue */
  border-color: rgba(58, 90, 128, 0.45);
}
/* Force every word to render in the same dark ink, regardless of which
   pastel cell wraps it. The per-cell color set on .tile-diy-cell--* drives
   ONLY the badge (via currentColor); the words stay uniformly black. */
.tile-diy-word--write,
.tile-diy-word--illustrate,
.tile-diy-word--partner,
.tile-diy-word--post,
.tile-diy-word--books,
.tile-diy-word--posters,
.tile-diy-word--tshirts,
.tile-diy-word--cards { color: var(--ink); }

/* ============================================================
   Shop tile — same DIY capsule pattern as the Do-It-Yourself
   tile, but with a distinct palette so the two tiles read as
   siblings, not duplicates. Pastels chosen to contrast with
   the DIY palette (yellow / lavender / peach / mint).
   ============================================================ */
.tile-diy-cell--books {
  background: #fdf2c4;            /* pastel butter yellow */
  color: #8a6a1f;                  /* badge ink — warm amber */
  border-color: rgba(138, 106, 31, 0.42);
}
.tile-diy-cell--posters {
  background: #e2d7f4;            /* pastel lavender */
  color: #5b4a8c;                  /* badge ink — deep violet */
  border-color: rgba(91, 74, 140, 0.45);
}
.tile-diy-cell--tshirts {
  background: #ffd8c2;            /* pastel peach */
  color: #a85220;                  /* badge ink — burnt orange */
  border-color: rgba(168, 82, 32, 0.42);
}
.tile-diy-cell--cards {
  background: #c8eadc;            /* pastel mint */
  color: #2f7a5c;                  /* badge ink — teal-green */
  border-color: rgba(47, 122, 92, 0.45);
}
/* T-SHIRTS is the longest word on the Shop tile; tighten letter-spacing so
   it still fits its capsule at the shared 11cqi size. */
.tile-diy-cell--tshirts .tile-diy-word { letter-spacing: -0.12em; }

/* Shop tile headline — same font, weight, and tracking as the Back Story
   and Do-It-Yourself titles. "SHOP LIMERICK STUFF" is longer than
   "DO-IT-YOURSELF", so reduce the size just enough to fit on one line. */
.tile--shop-diy .tile-title--backstory {
  font-size: clamp(0.7rem, 9.2cqi, 2.9rem);
}


/* Dumb Daddy Jokes tile — mirrors the book's title page: bold title at
   the top, lighter subtitle below it, and the cover illustration filling
   the bottom half. Container queries scale the type so the longer
   subtitle fills edge-to-edge without wrapping. */
.tile--book {
  padding: 0;
  background: #f7ecd0;
}
.tile--book::before { display: none; }
.tile-label--book {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  align-items: stretch;
  text-align: center;
  container-type: inline-size;
}
.tile-title--book-stretch {
  display: block;
  white-space: nowrap;
  font-size: clamp(0.78rem, 9.6cqi, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 0;
  padding: 6cqi 4cqi 0;
  color: var(--ink);
}
.tile-sub--book-stretch {
  display: block;
  white-space: nowrap;
  font-size: clamp(0.45rem, 4.45cqi, 1.08rem);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  color: var(--ink);
  opacity: 0.78;
  padding: 2.2cqi 4cqi 4cqi;
}
.tile-cover {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  overflow: hidden;
  background: #ece1c8;
  border-top: 1px solid rgba(60, 40, 30, 0.12);
}
.tile-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
/* CTA line beneath the cover image on the book tile. The cover still expands
   to fill leftover space because of its own flex: 1 1 auto; this row just
   takes its own intrinsic height under the image. */
.tile-cta--book {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(0.6rem, 4.8cqi, 1.05rem);
  line-height: 1.1;
  color: #ee0a14;
  background: #ece1c8;
  border-top: 1px solid rgba(60, 40, 30, 0.12);
  padding: 3cqi 4cqi;
  white-space: nowrap;
  text-align: center;
}

/* Blank placeholder tile — keeps the grid slot reserved without showing
   any content. Faded outline, no hover/cursor, no shimmer. */
.tile--blank {
  background: transparent;
  border-style: dashed;
  border-color: rgba(60, 40, 30, 0.18);
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}
.tile--blank::before,
.tile--blank::after { content: none; display: none; }
.tile--blank:hover { transform: none; box-shadow: none; }

/* On mobile (2 cols) the wide tile still spans both. Stack badge above copy
   so each gets full width and the badge stays readable. */
@media (max-width: 540px) {
  /* No min-height — tile shrinks to fit copy plus reduced padding. */
  .tile--wide { aspect-ratio: auto; min-height: 0; }
  .tile--wide .tile-label--wide {
    /* Symmetric padding on mobile — badge floats into the natural empty
       corner at the bottom-right of the wrapped copy. */
    padding: 0.6rem 0.9rem;
  }
  /* No bottom padding reservation needed — the badge is now inside the
     copy block, just under "and" / right of "cause". */
  .tile-sub--wide { padding-bottom: 0; text-align: left; }
  .tile-badge { display: none; }
}

/* Find an Artist tile: sage-green accent — the “illustrators for hire” tile */
.tile--artist {
  background: #fff8e5;
  border-color: #5a7a4a;
  color: var(--ink);
}
.tile--artist::before {
  background:
    radial-gradient(60% 50% at 50% 10%, rgba(90,122,74,0.20), transparent 70%),
    radial-gradient(60% 50% at 50% 100%, rgba(201,164,74,0.14), transparent 70%);
}
.tile--artist .tile-title { color: var(--ink); }
.tile--artist .tile-icon--artist {
  color: #3f5832;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.35rem;
}

/* Free Limerick Downloads tile: terracotta/orange accent — the “free goods” tile */
.tile--downloads {
  background: #fff8e5;
  border-color: #c45a1a;
  color: var(--ink);
}
.tile--downloads::before {
  background:
    radial-gradient(60% 50% at 50% 10%, rgba(196,90,26,0.20), transparent 70%),
    radial-gradient(60% 50% at 50% 100%, rgba(179,38,30,0.10), transparent 70%);
}
.tile--downloads .tile-title {
  color: var(--ink);
  /* Long title — shrink the font and let it wrap onto two lines */
  font-size: clamp(0.88rem, 3vw, 1.45rem);
  line-height: 1.1;
}
.tile--downloads .tile-icon--downloads {
  color: #8e3f10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.35rem;
}

/* Post A Limerick tile: plum/purple accent so it reads as the “submit your own” tile */
.tile--post {
  background: #fff8e5;
  border-color: #6a3a78;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.tile--post::before {
  background:
    radial-gradient(60% 50% at 50% 10%, rgba(106,58,120,0.20), transparent 70%),
    radial-gradient(60% 50% at 50% 100%, rgba(201,164,74,0.14), transparent 70%);
}
.tile--post .tile-title { color: var(--ink); }
.tile--post .tile-icon--post {
  color: #6a3a78;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.35rem;
}

/* Wider modal card for the Post A Limerick form (5 lines + notes need room) */
.sb-card--wide { width: min(640px, 100%); }

/* Five verse-line inputs stacked tight, with a hairline rule between */
.pl-lines {
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 0.55rem 0.7rem 0.7rem;
  margin: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.pl-lines legend {
  padding: 0 0.35rem;
  margin-left: -0.35rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  font-weight: 600;
}
.pl-lines input[type="text"] {
  font: inherit;
  width: 100%;
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.45rem 0.15rem;
  color: var(--ink);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.pl-lines input[type="text"]:last-of-type { border-bottom: 0; }
.pl-lines input[type="text"]:focus {
  outline: none;
  border-color: #6a3a78;
  box-shadow: 0 2px 0 -1px #6a3a78;
}

/* Primary submit button for the Post A Limerick form — plum to match the tile */
.sb-btn--post {
  background: #6a3a78;
  color: #fffaee;
  border-color: #6a3a78;
}
.sb-btn--post:hover { background: #532e60; border-color: #532e60; }
.sb-btn--post:disabled { background: #a589ad; border-color: #a589ad; cursor: wait; }

/* Focus ring for Post-A-Limerick inputs/textareas inside the modal */
#pl-form textarea:focus,
#pl-form input[type="text"]:focus,
#pl-form input[type="email"]:focus {
  border-color: #6a3a78;
  box-shadow: 0 0 0 3px rgba(106,58,120,0.18);
}

/* ===== Suggestion Box modal ===== */
.sb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(43, 39, 36, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vw, 2rem);
  z-index: 1000;
  animation: sb-fade 160ms ease-out;
}
.sb-overlay[hidden] { display: none; }
@keyframes sb-fade { from { opacity: 0 } to { opacity: 1 } }

.sb-card {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  background: #fffaee;
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(43, 39, 36, 0.25);
  padding: clamp(1.25rem, 3vw, 2rem);
  font-family: var(--font-display);
  color: var(--ink);
}
.sb-close {
  position: absolute;
  top: 0.65rem;
  right: 0.85rem;
  background: transparent;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft);
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
}
.sb-close:hover { background: rgba(43,39,36,0.06); color: var(--ink); }

.sb-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 4vw, 1.75rem);
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
  text-transform: uppercase;
}
.sb-lede {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
  font-size: 0.98rem;
  line-height: 1.45;
}
.sb-form { display: flex; flex-direction: column; gap: 0.9rem; }
.sb-field { display: flex; flex-direction: column; gap: 0.35rem; }
.sb-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  font-weight: 600;
}
.sb-optional {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-style: italic;
  opacity: 0.7;
}
.sb-form textarea,
.sb-form input {
  font: inherit;
  width: 100%;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  color: var(--ink);
  resize: vertical;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.sb-form textarea:focus,
.sb-form input:focus {
  outline: none;
  border-color: #2f6e6a;
  box-shadow: 0 0 0 3px rgba(47,110,106,0.18);
}
.sb-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
@media (max-width: 480px) {
  .sb-row { grid-template-columns: 1fr; }
}
.sb-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  margin-top: 0.3rem;
}
.sb-btn {
  font: inherit;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}
.sb-btn--ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--rule);
}
.sb-btn--ghost:hover { background: rgba(43,39,36,0.05); color: var(--ink); }
.sb-btn--primary {
  background: #2f6e6a;
  color: #fffaee;
}
.sb-btn--primary:hover { background: #245855; }
.sb-btn--primary:disabled { background: #8aa9a6; cursor: wait; }
.sb-status {
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
  min-height: 1.2em;
  color: var(--ink-soft);
}
.sb-status.is-error { color: var(--accent); }
.sb-status.is-success { color: #1f6c43; }

/* ===== Placeholder tiles ===== */
.tile--placeholder {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(214,199,154,0.20) 0 6px,
      rgba(214,199,154,0.00) 6px 14px
    ),
    var(--tile-bg);
  border-style: dashed;
  border-color: rgba(214,199,154,0.9);
  box-shadow: none;
}
.tile-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(74,66,59,0.18);
}

/* ===== Full-width red footer band =====
   Mirrors the .adult-stripe at the top of the page so the warning
   bookends the layout. Lives OUTSIDE .page so the red band reaches
   edge to edge regardless of .page's max-width and gutters.
   Uses the same display font as the top banner so the two bands feel
   like a matched pair. */
.adult-footer {
  position: relative;
  width: 100%;
  background: #ee0a14;
  color: #fff;
  /* More vertical padding so the bigger two-line note has breathing room
     above and below — the band reads as a confident bookend, not a
     squeezed strip. */
  padding: clamp(1.3rem, 4.5vw, 2.2rem) clamp(1rem, 4vw, 2rem);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.18);
  margin-top: clamp(2rem, 5vw, 4rem);
}
.adult-footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: center;
}
.adult-footer-note {
  /* Two-line warning that fills the red band on every screen. Sized so the
     sentence wraps cleanly after “moral health.” — one break, two lines.
     The font scales aggressively down on phones to keep both lines intact;
     desktop reads as a confident, large two-liner. */
  margin: 0 auto;
  max-width: 50rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.78rem, 3.05vw, 1.75rem);
  letter-spacing: 0;
  line-height: 1.22;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  text-wrap: balance;
}
.adult-footer-mark {
  font-weight: 700;
  margin-right: 0.15em;
}
.adult-footer-copyright {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: #fff;
  opacity: 0.85;
}