/* ==========================================================================
   FLIPBOOK
   --------------------------------------------------------------------------
   Pages are real HTML laid out at a fixed logical size (620x820) and then
   scaled to fit the viewport. Designing at a fixed page size keeps the
   typography predictable; the scale factor is set on --fb-scale by JS.

   Three render modes share one renderPage(): the 3D sheet book (wide screens),
   a single-page slider (narrow screens), and a plain vertical list (the
   accessibility / no-JS / reduced-motion path).
   ========================================================================== */

.fb {
  --page-w: 620px;
  --page-h: 820px;
  --fb-scale: 1;
  --t: 0;                     /* turn progress 0..1, set per frame by JS */
  position: relative;
  background:
    radial-gradient(120% 80% at 50% 0%, #14666E 0%, var(--teal-2) 60%, #073238 100%);
  color: var(--sand);
  padding: var(--sp-4) 0 var(--sp-3);
}

/* ---- Toolbar ---------------------------------------------------------- */
.fb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: min(100% - 2rem, 1300px);
  margin: 0 auto var(--sp-3);
  flex-wrap: wrap;
}
.fb-bar__group { display: flex; align-items: center; gap: 0.5rem; }

.fb-issue-label {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(251,243,230,.72);
}
.fb-issue-label strong { color: var(--citrus); font-weight: 500; }

.fb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 42px;
  height: 42px;
  padding: 0 0.85rem;
  border: 2px solid rgba(251,243,230,.45);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.05);
  color: var(--sand);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.fb-btn:hover:not(:disabled) { background: var(--citrus); border-color: var(--citrus); color: var(--ink); }
.fb-btn:disabled { opacity: .32; cursor: default; }
.fb-btn[aria-pressed="true"] { background: var(--citrus); border-color: var(--citrus); color: var(--ink); }
.fb-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.fb-counter {
  font-family: var(--mono);
  font-size: 0.8rem;
  min-width: 12ch;
  text-align: center;
  color: rgba(251,243,230,.9);
}

/* ---- Viewport + book -------------------------------------------------- */
.fb-viewport {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
  overflow: hidden;
}
.fb-viewport.is-zoomed { overflow: auto; cursor: grab; touch-action: none; }
.fb-viewport.is-grabbing { cursor: grabbing; }

.fb-stage {
  position: relative;
  perspective: 2800px;
  perspective-origin: 50% 45%;
  width:  calc(var(--page-w) * 2 * var(--fb-scale));
  height: calc(var(--page-h) * var(--fb-scale));
  flex: none;
}
.fb--single .fb-stage { width: calc(var(--page-w) * var(--fb-scale)); }

.fb-book {
  position: absolute;
  inset: 0;
  width:  calc(var(--page-w) * 2);
  height: var(--page-h);
  transform: scale(var(--fb-scale));
  transform-origin: top left;
  transform-style: preserve-3d;
  transition: transform 620ms var(--ease);
}
.fb--single .fb-book { width: var(--page-w); }

/* A closed book shows one page. Slide the spread so that page sits centred
   instead of hugging one edge with an empty half beside it. The book then
   visibly opens as the first page turns. 25% of the two-page width is exactly
   half a page. */
.fb:not(.fb--single).fb--first .fb-book {
  transform: scale(var(--fb-scale)) translateX(-25%);
}
.fb:not(.fb--single).fb--last .fb-book {
  transform: scale(var(--fb-scale)) translateX(25%);
}

@media (prefers-reduced-motion: reduce) {
  .fb-book { transition: none; }
}

/* Drop shadow beneath the whole book */
.fb-book::before {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: -26px;
  height: 44px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(0,0,0,.5), rgba(0,0,0,0) 72%);
  filter: blur(6px);
  pointer-events: none;
}

/* ---- Sheets ----------------------------------------------------------- */
.fb-sheet {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--page-w);
  height: var(--page-h);
  transform-origin: left center;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
}
.fb-sheet.is-turned { transform: rotateY(-180deg); }
.fb-sheet.is-animating { transition: transform 620ms var(--ease); }

.fb-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  background: var(--paper);
  /* Drawn as an inset shadow rather than a border so the 620x820 page inside
     is not shrunk by the border box and clipped at the edges. At the spine the
     two facing pages' edges meet and read as the fold. */
  box-shadow: inset 0 0 0 2px var(--line);
}
.fb-face--back { transform: rotateY(180deg); }

/* Static gutter shading — darkest at the spine.
   Front face: spine is its local LEFT.  Back face: spine is its local RIGHT. */
.fb-face::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 46px;
  pointer-events: none;
  z-index: 5;
}
.fb-face--front::before {
  left: 0;
  background: linear-gradient(to right, rgba(28,23,20,.20), rgba(28,23,20,0));
}
.fb-face--back::before {
  right: 0;
  background: linear-gradient(to left, rgba(28,23,20,.20), rgba(28,23,20,0));
}

/* Turn shading — driven by --t on the sheet. Darkest at the OUTER edge,
   which is the edge that swings furthest from the light. */
.fb-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 6;
}
.fb-sheet.is-turning .fb-face--front .fb-shade,
.fb-sheet.is-animating .fb-face--front .fb-shade {
  background: linear-gradient(to left, rgba(8,26,30,.78), rgba(8,26,30,.12) 78%);
  opacity: var(--t);
}
.fb-sheet.is-turning .fb-face--back .fb-shade,
.fb-sheet.is-animating .fb-face--back .fb-shade {
  background: linear-gradient(to right, rgba(8,26,30,.82), rgba(8,26,30,.10) 78%);
  opacity: calc(1 - var(--t));
}

/* Shadow the turning sheet casts across the spread beneath it. */
.fb-sheet.is-turning::after,
.fb-sheet.is-animating::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 100%;
  transform: translateZ(-1px);
  background: linear-gradient(to right, rgba(8,26,30,.34), rgba(8,26,30,0) 72%);
  opacity: calc(1 - var(--t));
  pointer-events: none;
}

/* Grab affordance on the outer edges */
.fb-edge {
  position: absolute;
  top: 0; bottom: 0;
  width: 13%;
  z-index: 7;
  cursor: grab;
}
.fb-edge--next { right: 0; }
.fb-edge--prev { left: 0; }
.fb-viewport.is-zoomed .fb-edge { display: none; }

/* ---- Single-page slider (narrow screens) ------------------------------ */
.fb--single .fb-track {
  position: absolute;
  inset: 0;
  display: flex;
  width: var(--page-w);
  height: var(--page-h);
  transition: transform 380ms var(--ease);
}
.fb--single .fb-slide {
  flex: none;
  width: var(--page-w);
  height: var(--page-h);
  background: var(--paper);
  overflow: hidden;
  box-shadow: inset 0 0 0 2px var(--line);
}
.fb--single .fb-track.no-anim { transition: none; }

/* ---- Thumbnail rail --------------------------------------------------- */
.fb-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: var(--sp-3) 1rem calc(var(--sp-2));
  width: min(100% - 2rem, 1300px);
  margin: 0 auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(251,243,230,.3) transparent;
}
.fb-thumbs::-webkit-scrollbar { height: 6px; }
.fb-thumbs::-webkit-scrollbar-thumb { background: rgba(251,243,230,.3); border-radius: 3px; }

.fb-thumb {
  flex: none;
  width: 46px;
  height: 61px;
  border: 2px solid rgba(251,243,230,.42);
  border-radius: 4px;
  background: rgba(255,255,255,.06);
  color: rgba(251,243,230,.7);
  font-family: var(--mono);
  font-size: 0.66rem;
  display: grid;
  place-items: center;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.fb-thumb:hover { border-color: var(--citrus); color: var(--citrus); }
.fb-thumb[aria-current="true"] {
  background: var(--citrus);
  border-color: var(--citrus);
  color: var(--ink);
  font-weight: 500;
}

/* ---- List view (a11y / no-JS / reduced-motion path) ------------------- */
.fb-list { display: none; }
.fb.is-list .fb-list {
  display: grid;
  gap: var(--sp-4);
  justify-items: center;
  padding: var(--sp-4) 1rem;
}
.fb-zoomgroup { display: inline-flex; gap: 0.5rem; }

/* In list view the page-turn chrome is meaningless — but the toggle that got
   the reader here must stay reachable, so only the viewer controls hide. */
.fb.is-list .fb-viewport,
.fb.is-list .fb-thumbs,
.fb.is-list .fb-navgroup,
.fb.is-list .fb-zoomgroup { display: none; }

.fb-list__item {
  width: var(--page-w);
  max-width: 100%;
  background: var(--paper);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.fb-list__item .fb-page { transform-origin: top left; }

/* Scale list pages down on narrow screens without reflowing them */
.fb-list__scaler { overflow: hidden; }

/* ==========================================================================
   PAGE CONTENT
   All measurements inside a page are fixed px — the page is scaled as a unit.
   ========================================================================== */

.fb-page {
  position: relative;
  width: var(--page-w);
  height: var(--page-h);
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Running foot on every page */
.fb-page__foot {
  margin-top: auto;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 26px 14px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--rule);
}
.fb-page__foot .fb-demo { color: var(--coral-dark); }

.fb-page__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ---- Page header strip ---- */
.fb-cat-strip {
  flex: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 26px 14px;
  border-bottom: 4px solid var(--line);
}
.fb-cat-strip h2 {
  font-size: 30px;
  letter-spacing: -0.03em;
  line-height: 1;
}
.fb-cat-strip span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ==========================================================================
   AD UNITS
   ========================================================================== */

.fb-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 14px;
  padding: 16px 26px 18px;
}

.ad {
  position: relative;
  display: flex;
  min-height: 0;
  border: 3px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.ad:hover { border-color: var(--coral); box-shadow: 0 6px 18px rgba(255,90,60,.20); }
.ad:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }

.ad--half    { grid-column: span 2; flex-direction: row; }
.ad--quarter { grid-column: span 1; flex-direction: column; }

.ad__media { position: relative; flex: none; overflow: hidden; background: var(--sand-2); }
.ad--half    .ad__media { width: 41%; border-right: 2px solid var(--line); }
.ad--quarter .ad__media { width: 100%; height: 44%; border-bottom: 2px solid var(--line); }
.ad__media img { width: 100%; height: 100%; object-fit: cover; }

/* One shared warm wash on every ad photo — see --photo-grade in tokens.css.
   Per-advertiser tints used to live here and made the set look unmatched. */
.ad__media::after {
  content: "";
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  background: var(--photo-wash);
  opacity: var(--photo-wash-opacity);
}

.ad__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 13px 15px 12px;
}
/* Centre the composed block in the leftover height rather than stacking it at
   the top with a void above the footer. */
.ad__main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ad__cat {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.ad__name {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 3px;
}
.ad--half    .ad__name { font-size: 23px; }
.ad--quarter .ad__name { font-size: 17px; }

.ad__tag { font-size: 11.5px; color: var(--muted); line-height: 1.35; }

.ad__offer {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--coral-dark);
  margin-top: 9px;
}
.ad--half    .ad__offer { font-size: 21px; }
.ad--quarter .ad__offer { font-size: 15px; }

.ad__detail {
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--muted);
  margin-top: 5px;
}
.ad--quarter .ad__detail { display: none; }

.ad__terms {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 8px;
}
.ad--quarter .ad__terms { display: none; }

.ad__foot {
  margin-top: auto;
  padding-top: 9px;
  border-top: 1px dashed var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
}
.ad__phone { font-weight: 500; letter-spacing: 0.02em; }
.ad__code {
  background: var(--citrus-pale);
  border: 1.5px dashed var(--line);
  border-radius: 4px;
  padding: 2px 6px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.ad--quarter .ad__code { display: none; }

.ad__demo {
  position: absolute;
  top: 0; right: 0;
  background: var(--ink);
  color: var(--citrus);
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-bottom-left-radius: 6px;
  z-index: 2;
}

/* ---- Full-page ad ---- */
.fp {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.fp__media { position: relative; flex: none; height: 46%; overflow: hidden; border-bottom: 3px solid var(--line); }
.fp__media img { width: 100%; height: 100%; object-fit: cover; }
.fp__media::after { content: ""; position: absolute; inset: 0; mix-blend-mode: multiply; background: var(--photo-wash); opacity: var(--photo-wash-opacity); }

.fp__burst {
  position: absolute;
  right: 26px;
  /* .fp__media is 46% tall; sit the burst astride that boundary. */
  top: calc(46% - 66px);
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--citrus);
  color: var(--ink);
  clip-path: polygon(50% 0%,61% 12%,76% 6%,80% 22%,96% 24%,92% 40%,105% 50%,92% 60%,96% 76%,80% 78%,76% 94%,61% 88%,50% 100%,39% 88%,24% 94%,20% 78%,4% 76%,8% 60%,-5% 50%,8% 40%,4% 24%,20% 22%,24% 6%,39% 12%);
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1;
  letter-spacing: -0.03em;
  padding: 0 22px;
  z-index: 3;
}

.fp__body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 46px 34px 20px; }
.fp__main { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.fp__cat {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.fp__name { font-size: 42px; line-height: 1; letter-spacing: -0.035em; margin: 8px 0 6px; }
.fp__tag { font-size: 15px; color: var(--muted); }
.fp__offer {
  font-family: var(--display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--coral-dark);
  margin-top: 22px;
}
.fp__detail { font-size: 13px; color: var(--muted); margin-top: 10px; max-width: 42ch; }
.fp__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 2px solid var(--ink);
  padding-top: 12px;
  font-family: var(--mono);
  font-size: 12px;
}
.fp__code {
  background: var(--citrus-pale);
  border: 1.5px dashed var(--line);
  border-radius: 5px;
  padding: 4px 9px;
  letter-spacing: 0.07em;
}

/* ==========================================================================
   COVER
   ========================================================================== */
.fb-cover { position: relative; flex: 1; min-height: 0; color: var(--white); overflow: hidden; }
.fb-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fb-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(14,92,99,.72) 0%, rgba(14,92,99,.30) 38%, rgba(10,40,44,.90) 100%);
}
.fb-cover__inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; padding: 34px 32px 26px; }

.fb-masthead { font-size: 62px; line-height: .9; letter-spacing: -0.05em; text-transform: uppercase; }
.fb-masthead .accent { color: var(--citrus); }
.fb-cover__kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--citrus);
  margin-bottom: 12px;
}
.fb-cover__rule { height: 3px; background: var(--citrus); margin: 16px 0 0; }
.fb-cover__issue {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  margin-top: 10px;
}
.fb-cover__head { font-size: 44px; line-height: 1.02; letter-spacing: -0.035em; margin-top: auto; }
.fb-cover__stand { font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.9); margin-top: 14px; max-width: 34ch; }
.fb-cover__teasers { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.fb-cover__teasers li {
  list-style: none;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  background: var(--citrus);
  color: var(--ink);
  border-radius: var(--r-pill);
  padding: 5px 11px;
}
.fb-cover__free {
  position: absolute;
  top: 30px; right: 30px;
  z-index: 3;
  background: var(--coral);
  color: var(--white);
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.02em;
  padding: 9px 13px;
  border-radius: 6px;
  transform: rotate(6deg);
  text-align: center;
  line-height: 1.05;
}
.fb-cover__demo {
  position: relative;
  z-index: 2;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

/* ==========================================================================
   CONTENTS
   ========================================================================== */
.fb-contents { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 26px 26px 8px; }
.fb-contents__list { list-style: none; padding: 0; margin: 14px 0 0; }
.fb-contents__list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
}
.fb-contents__list b { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; }
.fb-contents__dots { flex: 1; border-bottom: 1px dotted var(--rule-strong); transform: translateY(-3px); }
.fb-contents__pg { font-family: var(--mono); font-size: 11px; color: var(--muted); }

.fb-note {
  margin-top: 18px;
  background: var(--sand);
  border: 3px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
}
.fb-note h3 { font-size: 20px; letter-spacing: -0.025em; margin-bottom: 8px; }
.fb-note p { font-size: 12px; line-height: 1.5; color: var(--muted); }
.fb-note p + p { margin-top: 8px; }
.fb-note__sign {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral-dark);
  margin-top: 12px;
}

/* ==========================================================================
   ARTICLE
   ========================================================================== */
.fb-article { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 26px 26px 8px; }
.fb-article__kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--coral-dark);
}
.fb-article__head { font-size: 38px; line-height: 1.02; letter-spacing: -0.035em; margin: 8px 0 10px; }
.fb-article__stand { font-size: 14px; line-height: 1.45; color: var(--muted); }
.fb-article__img { height: 168px; margin: 16px 0; border-radius: 8px; overflow: hidden; }
.fb-article__img img { width: 100%; height: 100%; object-fit: cover; }
.fb-article__cols { columns: 2; column-gap: 20px; font-size: 12px; line-height: 1.55; }
.fb-article__cols p + p { margin-top: 8px; }
.fb-article__pull {
  break-inside: avoid;
  margin: 12px 0;
  padding: 12px 0;
  border-top: 2px solid var(--coral);
  border-bottom: 2px solid var(--coral);
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.fb-article__link {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--teal);
  color: var(--white);
  border-radius: 8px;
  padding: 12px 15px;
  text-decoration: none;
  font-size: 12px;
}
.fb-article__link b { font-family: var(--display); font-size: 15px; letter-spacing: -0.02em; }
.fb-article__link span { font-family: var(--mono); font-size: 10.5px; color: var(--citrus); }

/* ==========================================================================
   COUPONS
   ========================================================================== */
.fb-coupons { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 20px 26px 10px; }
.fb-coupons__note { font-size: 11.5px; color: var(--muted); margin: 8px 0 14px; }
.fb-coupons__grid { flex: 1; min-height: 0; display: grid; grid-template-rows: repeat(4, 1fr); gap: 11px; }

.coupon {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 3px dashed var(--line);
  border-radius: 8px;
  background: var(--sand);
  padding: 11px 15px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.coupon:hover { background: var(--citrus-pale); border-color: var(--coral); }
.coupon::before,
.coupon::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  background: var(--paper);
  border-radius: 50%;
  left: -8px;
}
.coupon::before { top: -7px; }
.coupon::after  { bottom: -7px; }

.coupon__main { flex: 1; min-width: 0; }
.coupon__name { font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: -0.025em; line-height: 1.1; }
.coupon__offer { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -0.025em; color: var(--coral-dark); margin-top: 2px; }
.coupon__detail { font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.coupon__stub {
  flex: none;
  width: 132px;
  border-left: 2px dashed var(--line);
  padding-left: 13px;
  text-align: center;
  font-family: var(--mono);
}
.coupon__code {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: var(--ink);
}
.coupon__exp { display: block; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.coupon__phone { display: block; font-size: 10.5px; color: var(--teal); margin-top: 4px; }

/* ==========================================================================
   INDEX PAGE
   ========================================================================== */
.fb-index { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 22px 26px 8px; }
.fb-index__note { font-size: 11.5px; color: var(--muted); margin: 6px 0 12px; }
.fb-index__groups { flex: 1; min-height: 0; columns: 2; column-gap: 20px; font-size: 11px; }
.fb-index__group { break-inside: avoid; margin-bottom: 12px; }
.fb-index__group h3 {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coral-dark);
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 3px;
  margin-bottom: 5px;
}
.fb-index__group ul { list-style: none; padding: 0; margin: 0; }
.fb-index__group li { display: flex; justify-content: space-between; gap: 6px; padding: 2.5px 0; }
.fb-index__group a { text-decoration: none; font-weight: 600; }
.fb-index__group a:hover { color: var(--coral-dark); text-decoration: underline; }
.fb-index__group span { font-family: var(--mono); font-size: 10px; color: var(--muted); white-space: nowrap; }

/* ==========================================================================
   BACK COVER (house ad)
   ========================================================================== */
.fb-back {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 40px 34px;
  background: var(--teal);
  color: var(--sand);
  position: relative;
  overflow: hidden;
}
.fb-back::before {
  content: "";
  position: absolute;
  width: 460px; height: 460px;
  right: -180px; top: -160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,176,32,.30), rgba(255,176,32,0) 68%);
}
.fb-back > * { position: relative; z-index: 1; }
.fb-back__kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--citrus);
}
.fb-back__head { font-size: 46px; line-height: 1.0; letter-spacing: -0.04em; color: var(--white); }
.fb-back__body { font-size: 14px; line-height: 1.5; color: rgba(251,243,230,.85); max-width: 38ch; }
.fb-back__cta {
  align-self: flex-start;
  background: var(--citrus);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.02em;
  padding: 13px 22px;
  border-radius: var(--r-pill);
  text-decoration: none;
}
.fb-back__cta:hover { background: var(--coral); color: var(--white); }
.fb-back__sizes { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.fb-back__sizes li {
  list-style: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  border: 1.5px solid rgba(251,243,230,.34);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  color: rgba(251,243,230,.85);
}

/* ==========================================================================
   RESPONSIVE + MOTION
   ========================================================================== */
@media (max-width: 640px) {
  .fb-bar { justify-content: center; }
  .fb-issue-label { width: 100%; text-align: center; }
  .fb-btn span.fb-btn__label { display: none; }
  .fb-btn { padding: 0 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fb-sheet.is-animating { transition: none; }
  .fb--single .fb-track { transition: none; }
  .fb-shade { display: none; }
}