/* ===========================================================================
   Sample 01 — STICKER SHEET
   The whole catalogue as one peel-off die-cut sheet on perforated paper.
   Everything here is layered on top of /demo_fable/shared/shared.css.
   Lead hue: coral. No serif anywhere; Fredoka display, Nunito body.
   ======================================================================== */

/* ------------------------------------------------- the perforated ground */
.sheet-ground{
  background-color:var(--ground);
  background-image:radial-gradient(circle, rgba(51,43,66,.085) 1.15px, transparent 1.3px);
  background-size:26px 26px;
  background-position:0 0;
}
.sheet-ground--strong{ background-color:var(--ground-2) }

/* Every section boundary is a perforation with two punched holes. */
main > section + section{ position:relative; border-top:2.5px dashed rgba(51,43,66,.30) }
main > section + section::before,
main > section + section::after{
  content:""; position:absolute; top:-10px; width:17px; height:17px;
  border-radius:50%; background:var(--card); border:2.5px solid var(--ink);
}
main > section + section::before{ left:clamp(10px,3vw,34px) }
main > section + section::after{ right:clamp(10px,3vw,34px) }

/* --------------------------------------------------------- section heads */
.sh-head{ max-width:none; margin-bottom:clamp(26px,3.4vw,44px) }
.sh-head h2{ margin:.42em 0 .3em; max-width:20ch }
.sh-head .lede{ margin:0 }
.sh-head--center{ text-align:center }
.sh-head--center h2,
.sh-head--center .lede{ margin-inline:auto }

/* ================================================================== hero */
.hero{ padding-block:clamp(30px,4.4vw,58px) clamp(38px,5.4vw,76px) }
.hero__inner{
  display:grid; gap:clamp(26px,3.6vw,54px);
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  align-items:start;
}
.sheet-label{ padding-top:clamp(4px,1.4vw,16px) }
.sheet-label__mark{ display:flex; gap:clamp(12px,1.6vw,20px); align-items:flex-start; margin-top:18px }
.sheet-label__mark > .fable-bloom{ margin-top:4px }
.sheet-label h1{
  font-size:clamp(2.25rem,4.8vw,3.7rem); margin:0 0 .18em; letter-spacing:-.025em;
}
.sheet-label__tag{
  margin:0; font-family:var(--font-display); font-weight:500;
  font-size:clamp(1rem,1.5vw,1.16rem); letter-spacing:.005em; color:var(--accent-text);
}
.sheet-label .lede{ margin:20px 0 22px; max-width:52ch }

/* barcode: the rainbow rule broken into ten bars, read as a product code */
.barcode{
  display:flex; gap:5px; align-items:flex-end; height:52px; max-width:430px;
  margin:0 0 18px; padding:8px 12px; background:var(--card);
  border:2.5px solid var(--ink); border-radius:14px; box-shadow:var(--sh-chip);
}
.barcode__bar{ flex:1; border:1.5px solid var(--ink); border-radius:4px }
.barcode__bar.b0{ height:100% }
.barcode__bar.b1{ height:66% }
.barcode__bar.b2{ height:88% }
.barcode__bar.b3{ height:52% }

.sheet-spec{
  display:flex; flex-wrap:wrap; margin:0 0 22px;
  border:2px dashed var(--ink); border-radius:16px; overflow:hidden;
  background:rgba(255,255,255,.6);
}
.sheet-spec > div{ flex:1 1 84px; padding:9px 14px 11px; border-right:1.5px dashed var(--hairline) }
.sheet-spec > div:last-child{ border-right:0 }
.sheet-spec dt{
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:800;
}
.sheet-spec dd{ margin:2px 0 0; font-family:var(--font-display); font-weight:600; font-size:1.3rem; line-height:1.1 }

.sheet-label__cta{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 4px; max-width:none }

.sh-chips__lead{
  margin:26px 0 9px; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:800; color:var(--ink-faint); max-width:none;
}
.sh-chips{ display:flex; flex-wrap:wrap; gap:9px; list-style:none; padding:0; margin:0 }
/* real anchors into the six perforated blocks — chrome earns its affordance */
.sh-chip-sticker{
  display:inline-flex; align-items:center; gap:7px; padding:7px 14px 7px 10px;
  border-radius:var(--r-pill); background:var(--card); border:2.5px solid var(--ink);
  box-shadow:var(--sh-chip); color:var(--ink); text-decoration:none;
  font-family:var(--font-display); font-weight:500; font-size:.84rem; line-height:1.15;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.sh-chip-sticker:hover{ transform:translateY(-2px); box-shadow:var(--sh-chip-lift) }
.sh-chip-sticker:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--ink) }

.hero__tile-wrap{ max-width:430px; margin-inline:auto; width:100% }
.hero__cut{
  margin:22px 0 0; text-align:center; font-family:var(--font-display);
  font-weight:500; letter-spacing:.02em;
}

@media (min-width:1001px){ .hero__inner{ align-items:center } }
/* Below the two-column breakpoint the hero stacks, and the brief puts the
   photographs first — so the Meadow tile is lifted out of last place and
   ordered directly under the H1 and tagline. `display:contents` on the label
   column promotes its children into the same flex flow as the tile so a single
   `order` scale can interleave them; each child already carries its own
   margins, hence `gap:0`. */
@media (max-width:1000px){
  .hero__inner{ display:flex; flex-direction:column; gap:0 }
  .sheet-label{ display:contents }
  .sheet-label > .eyebrow{ order:1 }
  .sheet-label__mark{ order:2 }
  .sheet-label > .lede{ order:3 }
  .hero__tile-wrap{ order:4; margin-top:4px; margin-bottom:26px }
  .barcode{ order:5 }
  .sheet-spec{ order:6 }
  .sheet-label__cta{ order:7 }
  .sh-chips__lead{ order:8 }
  .sh-chips{ order:9 }
}
@media (max-width:1000px){
  .hero__inner{ grid-template-columns:1fr }
  .sheet-label .lede{ max-width:60ch }
}

/* ========================================================= the die-cut tiles */
.sh-grid{
  /* auto-FILL, not auto-fit: a two-piece block must print the same tile size
     as a seven-piece block, or the sheet stops being a uniform die-cut sheet. */
  display:grid; gap:clamp(22px,2.3vw,34px);
  grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  align-items:stretch;
}
/* "Four favourites" keeps the roomier 4-up rhythm and its full descriptions;
   the sheet proper runs tighter so all 24 land in three screenfuls. */
.sh-grid--picks{ grid-template-columns:repeat(auto-fit,minmax(250px,1fr)) }
/* A one-piece block cannot print a full row of die-cuts, so it stops
   pretending to: the studio photo takes a real column of its own and the two
   offcuts stack in a single narrow column beside it, with the block held to a
   shorter measure. Empty ground to the right reads as the end of the sheet;
   two stretched dashed rectangles read as filler. */
.sh-group--solo .sh-grid{
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  max-width:980px; align-items:start;
}
.sh-group--solo .sh-group__head{ max-width:980px }
.sh-notes-col{ display:flex; flex-direction:column; gap:clamp(18px,2vw,26px) }
/* the stacked pair keeps the same 200px note presence as the rest of the sheet */
@media (max-width:760px){ .sh-group--solo .sh-grid{ grid-template-columns:1fr } }
/* The sheet cards and the pair cards carry a short, self-contained one-line
   caption authored per piece, so the printed card always reads as a complete
   phrase rather than a sentence cut mid-word at 216px of column. The full
   description still lives on `data-desc` and is read out in the lightbox.
   The two-line clamp stays only as a guard for the narrowest columns. */
.sh-grid:not(.sh-grid--picks) .tile__desc,
.sh-pair-block .tile__desc{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2;
  overflow:hidden;
}
.sh-tile{ border-width:3px }
.sh-tile .tile__mat{ padding:44px 11px 0 }
.sh-tile .tile__shot{ border:2.5px solid var(--ink); background:var(--ground-3) }
.sh-tile .tile__body{ padding:13px 15px 17px; gap:8px }
.sh-tile .tile__title{ font-size:1.08rem }
.sh-tile .tile__badge{ background:var(--hue,var(--accent)) }
.sh-tile .swatches{ margin-top:2px }

/* resting tilt + the peel: hover lifts and flips the tilt the other way */
.sh-tile.tilt-a{ transform:rotate(-1.7deg) }
.sh-tile.tilt-b{ transform:rotate(1.5deg) }
.sh-tile.tilt-c{ transform:rotate(-.8deg) }
.sh-tile--hero{ transform:rotate(-1.5deg) }
.sh-tile.tilt-a:hover, .sh-tile.tilt-a:focus-within{ transform:translateY(-6px) rotate(1.7deg); box-shadow:var(--sh-sticker-lift) }
.sh-tile.tilt-b:hover, .sh-tile.tilt-b:focus-within{ transform:translateY(-6px) rotate(-1.5deg); box-shadow:var(--sh-sticker-lift) }
.sh-tile.tilt-c:hover, .sh-tile.tilt-c:focus-within{ transform:translateY(-6px) rotate(.8deg); box-shadow:var(--sh-sticker-lift) }
.sh-tile--hero:hover, .sh-tile--hero:focus-within{ transform:translateY(-6px) rotate(1.5deg); box-shadow:var(--sh-sticker-lift) }

/* -------------------------------------------------- perforation dividers */
.sh-group + .sh-group{ margin-top:clamp(18px,2.4vw,30px) }
.sh-perf{
  margin:clamp(38px,4.6vw,64px) 0 0; border-top:2.5px dashed var(--ink);
  display:flex; justify-content:center; opacity:.9;
}
.sh-group:first-child .sh-perf{ margin-top:clamp(6px,1.4vw,16px) }
.sh-perf__tab{
  display:inline-flex; align-items:center; gap:8px; transform:translateY(-50%);
  background:var(--card); border:2.5px solid var(--ink); border-radius:var(--r-pill);
  padding:7px 17px; box-shadow:var(--sh-chip);
  font-family:var(--font-display); font-weight:500; font-size:.74rem;
  letter-spacing:.17em; text-transform:uppercase; white-space:nowrap;
}
.sh-group__head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 28px;
  margin:clamp(6px,1.2vw,14px) 0 clamp(20px,2.4vw,30px);
}
.sh-group__head h3{ margin:0; font-size:clamp(1.3rem,2.3vw,1.75rem) }
.sh-group__note{ margin:0; flex:1 1 300px; font-size:.94rem; line-height:1.55; color:var(--ink-soft); max-width:46ch }

/* ============================================================== palette */
.palette-split{
  display:grid; gap:clamp(24px,3vw,46px);
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); align-items:start;
}
.palette-split__widget{
  padding:clamp(18px,2.4vw,30px); background:var(--card);
  border:3px solid var(--ink); border-radius:var(--r-lg); box-shadow:var(--sh-sticker);
}
.palette-split__aside h3{ margin:0 0 14px; font-size:1.35rem }
.blob-strip{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:10px; list-style:none; padding:0; margin:0 0 20px;
}
.blob-sticker{
  display:flex; align-items:center; gap:9px; width:100%; cursor:pointer;
  padding:7px 13px 7px 9px; background:var(--card); border:2.5px solid var(--ink);
  border-radius:var(--r-pill); box-shadow:var(--sh-chip);
  font-family:var(--font-display); font-weight:500; font-size:.84rem; text-align:left;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.blob-sticker:hover{ transform:translateY(-2px); box-shadow:var(--sh-chip-lift) }
.blob-sticker:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--ink) }
/* current mix = fill AND ring AND aria-pressed (never colour alone) */
.blob-sticker[aria-pressed="true"]{
  background:var(--hue);
  box-shadow:0 0 0 2.5px var(--card), 0 0 0 5px var(--ink), var(--sh-chip);
}
.blob-sticker[aria-pressed="true"] .blob-sticker__blob{ background:var(--card) }
.blob-sticker__blob{
  width:22px; height:22px; flex:none; background:var(--hue);
  border:2px solid var(--ink);
  border-radius:56% 44% 48% 52% / 52% 56% 44% 48%;
}
.sig-demo{
  margin-top:22px; padding:16px 18px 18px; border:2px dashed var(--ink);
  border-radius:var(--r-md); background:rgba(255,255,255,.62);
}
.sig-demo .plate-no{ font-family:var(--font-display); margin:0 0 10px }
.sig-demo .caption{ margin:12px 0 0 }

/* ============================================================ keepsakes */
.sh-pairs{
  display:grid; gap:clamp(22px,2.3vw,34px);
  grid-template-columns:repeat(auto-fit,minmax(500px,1fr));
}
@media (max-width:620px){ .sh-pairs{ grid-template-columns:1fr } }
.sh-pair-block{
  padding:clamp(18px,2vw,26px);
  border:2.5px dashed var(--ink); border-radius:var(--r-xl);
  background:rgba(255,255,255,.55);
}
.sh-pair-title{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:0 0 clamp(16px,2vw,24px); font-size:clamp(1.12rem,1.9vw,1.4rem); line-height:1.25;
}
.sh-pair-no{
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  padding:5px 12px; border-radius:var(--r-pill);
  border:2.5px solid var(--ink); background:var(--hue,var(--accent)); box-shadow:var(--sh-chip);
}
.sh-pair-block .pair{ align-items:start; gap:clamp(12px,1.5vw,20px); grid-template-columns:1fr auto 1fr }
.sh-pair-block .pair__arrow{ width:46px }
/* the pair tiles are the SAME die-cut size as every other tile on the sheet */
.sh-pair-block .pair > .tile{ width:100%; max-width:270px }
.sh-pair-block .pair > .tile:first-child{ justify-self:end }
.sh-pair-block .pair > .tile:nth-child(3){ justify-self:start }
.sh-pair-block .pair__arrow{ align-self:center; padding-top:40px }
@media (max-width:760px){
  .sh-pair-block .pair > .tile:first-child,
  .sh-pair-block .pair > .tile:nth-child(3){ justify-self:center }
  .sh-pair-block .pair__arrow{ padding-top:0 }
}
.sh-pair-block .pair__note{ margin-top:20px; text-align:center; max-width:52ch; margin-inline:auto }
.sh-pair-block .pair__strip{ margin-top:14px }
.sh-arrow{ display:grid; justify-items:center; gap:6px }
.sh-arrow__glyph{
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:var(--hue,var(--card)); border:2.5px solid var(--ink); box-shadow:var(--sh-chip);
  font-family:var(--font-display); font-weight:600; font-size:1.35rem; line-height:1;
}
@media (max-width:760px){
  .sh-pair-block .pair__arrow{ transform:none; margin:2px 0 }
  .sh-arrow{ grid-auto-flow:column; justify-content:center }
  .sh-arrow__glyph{ transform:rotate(90deg) }
}

/* ================================================================ about */
.about-split{
  display:grid; gap:clamp(26px,3.6vw,58px);
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); align-items:start;
}
.about-split__tile{ max-width:390px; width:100%; margin-inline:auto }
.about-split__copy h2{ margin:.4em 0 .45em }
.about-split__copy p{ max-width:56ch }
.about-split__h3{ margin:1.3em 0 .6em; font-size:1.16rem }
.tag-list{ display:flex; flex-wrap:wrap; gap:9px; list-style:none; padding:0; margin:0 }
.about-split__cta{ display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 0; max-width:none }
@media (max-width:900px){
  .palette-split, .about-split{ grid-template-columns:1fr }
}

/* ============================================================== contact */
.contact__inner{ text-align:center; display:flex; flex-direction:column; align-items:center }
.contact__inner h2{ margin:.5em 0 .4em }
.contact__inner p{ max-width:56ch }
.contact__cta{ margin:12px 0 30px }
.contact__btn{ font-size:1.05rem; padding:14px 26px }
.contact .rainbow-rule{ width:min(100%,520px); margin:0 auto }

/* =============================================================== footer */
.fable-footer h3{ display:flex; align-items:center; gap:9px; font-size:1.12rem }
.foot-list{ list-style:none; padding:0; margin:0; display:grid; gap:6px; font-size:var(--fs-sm) }
.foot-list a{ font-weight:700 }

/* ======================================================= small screens */
@media (max-width:560px){
  /* the four-up spec strip becomes a 2x2 label block rather than four
     one-word columns that break "Die-cut" over two lines */
  .sheet-spec{ display:grid; grid-template-columns:1fr 1fr }
  .sheet-spec > div{ border-right:1.5px dashed var(--hairline); border-bottom:1.5px dashed var(--hairline) }
  .sheet-spec > div:nth-child(2n){ border-right:0 }
  .sheet-spec > div:nth-child(n+3){ border-bottom:0 }
  .sh-chips{ gap:8px }
  .sh-chip-sticker{ font-size:.8rem; padding:6px 12px 6px 9px }
  /* the shared palette FAB is fixed bottom-right at 56px. Stack the hero CTAs
     into a left-aligned column of shrink-to-fit stickers (not full-width bars)
     so the right edge of the first screenful stays empty ground and the FAB
     never lands on a button, and keep a safe strip under the hero as well. */
  .sheet-label__cta{ flex-direction:column; align-items:flex-start }
  .sheet-label__cta .btn{ justify-content:flex-start; text-align:left; max-width:calc(100% - 74px) }
  .sh-chips__lead{ margin-top:20px }
  .hero{ padding-bottom:clamp(72px,18vw,96px) }
}
@media (max-width:760px){
  .sh-tile.tilt-a{ transform:rotate(-.7deg) }
  .sh-tile.tilt-b{ transform:rotate(.65deg) }
  .sh-tile.tilt-c{ transform:rotate(-.4deg) }
  .sh-tile--hero{ transform:rotate(-.7deg) }
  .sh-tile.tilt-a:hover,.sh-tile.tilt-a:focus-within{ transform:translateY(-6px) rotate(.7deg) }
  .sh-tile.tilt-b:hover,.sh-tile.tilt-b:focus-within{ transform:translateY(-6px) rotate(-.65deg) }
  .sh-tile.tilt-c:hover,.sh-tile.tilt-c:focus-within{ transform:translateY(-6px) rotate(.4deg) }
  .sh-tile--hero:hover,.sh-tile--hero:focus-within{ transform:translateY(-6px) rotate(.7deg) }
  .sh-tile .sticker-corner{ right:-6px; bottom:-6px }
  .sheet-label__mark{ gap:14px }
  .sheet-label__mark > .fable-bloom{ width:64px; height:64px }
  .sh-perf__tab{ font-size:.68rem; letter-spacing:.13em; padding:6px 13px }
  .sh-head h2{ max-width:none }
}

/* ======================================================= reduced motion */
@media (prefers-reduced-motion:reduce){
  .sh-tile.tilt-a:hover,.sh-tile.tilt-a:focus-within{ transform:rotate(-1.7deg) }
  .sh-tile.tilt-b:hover,.sh-tile.tilt-b:focus-within{ transform:rotate(1.5deg) }
  .sh-tile.tilt-c:hover,.sh-tile.tilt-c:focus-within{ transform:rotate(-.8deg) }
  .sh-tile--hero:hover,.sh-tile--hero:focus-within{ transform:rotate(-1.5deg) }
  .blob-sticker:hover{ transform:none }
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .sh-tile.tilt-a:hover,.sh-tile.tilt-a:focus-within{ transform:rotate(-.7deg) }
  .sh-tile.tilt-b:hover,.sh-tile.tilt-b:focus-within{ transform:rotate(.65deg) }
  .sh-tile.tilt-c:hover,.sh-tile.tilt-c:focus-within{ transform:rotate(-.4deg) }
  .sh-tile--hero:hover,.sh-tile--hero:focus-within{ transform:rotate(-.7deg) }
}


/* ------------------------------------------ offcuts: notes printed on the
   leftover sheet space, so short blocks still print a full row of die-cuts */
.sh-note{
  /* An offcut is a note, not a tile: it must never inherit the height of the
     4:5 photo beside it. `align-self:start` opts it out of the grid row
     stretch; every note then prints label-top, text directly under it, so all
     eight read as the same object. The modest min-height keeps a little
     sticker presence without the row dictating it. */
  align-self:start;
  display:flex; flex-direction:column; justify-content:flex-start; gap:10px;
  padding:20px 20px 22px; border:2.5px dashed var(--ink); border-radius:var(--r-lg);
  background:rgba(255,255,255,.55);
}
@media (min-width:721px){ .sh-note{ min-height:200px } }
/* A double-width offcut closes the ragged end of a short block instead of
   leaving a hole beside a tall 4:5 tile. Collapsed below two columns. */
.sh-note--wide{ grid-column:span 2 }
@media (max-width:520px){ .sh-note--wide{ grid-column:auto } }
.sh-note__label{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  font-family:var(--font-display); font-weight:500; font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase;
  padding:5px 12px; border-radius:var(--r-pill);
  border:2px solid var(--ink); background:var(--hue,var(--accent));
}
.sh-note p{ margin:0; font-size:.95rem; line-height:1.55; color:var(--ink-soft); max-width:none }
.sh-note .btn{ align-self:flex-start; margin-top:2px }

/* --------------------------------- dark contact band: keep buttons legible */
.contact .btn{ color:var(--ink) }
.contact .btn-ink{ color:var(--ground) }
.contact__inner > .fable-bloom{ margin-bottom:6px }


/* ------------------------------------------------ the palette band's tint
   `band-wash` paints the whole section in the active hue, which is the one
   place on the page where a single hue owns a full screen — against the
   brief's "no single hue dominating". Cut the field back to a hint of the hue
   on neutral ground and let the widget card and the blob strip carry the
   saturated version, so the hue reads as a highlight. */
#palette.band-wash{
  background:color-mix(in srgb, var(--accent-wash) 34%, var(--ground));
}
#palette .palette-split__widget{ background:var(--accent-wash) }