/* ============================================================
   African print, applied inside the page.

   backdrop.css lays the orange cloth *behind* the card. This file
   works *within* the design: it replaces the card's flat cream
   with a cream print, then adds four small accents, all chosen so
   the print is felt rather than read.

   Every rule here is background paint on a box that already
   exists. No markup, no layout, no copy, no new colours — see
   CLAUDE.md Rule 1. Each does change rendered pixels, so the
   visual baseline is re-captured alongside them.

   Two rules govern all four:

   1. The print is always held under a wash of the colour the box
      already was, so the box keeps its palette identity and the
      type on it keeps its contrast. The wash never drops below
      86%; anywhere text is involved it stays at 93%+.

   2. The tile renders small. The source is a 2x2 mirror composite
      (see backdrop.css), so at a small background-size several
      motifs cross even a thin band, which is what makes it read
      as cloth instead of as a smear of colour.

   Unlike backdrop.css this file is NOT scoped to desktop. The
   360px column is the PRD's primary target and was getting no
   print at all, so mobile is included here deliberately.

   That has a cost worth stating: a phone now fetches both tiles,
   62KB orange + 86KB cream. Both were cut specifically for this —
   the orange from 205KB, once measurement showed a 360px viewport
   pulling it for nothing more than a 10px footer band, a 56px ring
   and a 120px hangtag. Every accent below sits under a wash of 58%
   or heavier, so a small tile costs nothing visible.
   ============================================================ */

/* ---- 0. the page surface ----

   .frame is the cream card every page sits on (styles.css:48), and
   it was flat --card. It is now that same cream with a print in it.

   The art is the owner's own supplied file, prepared two ways:

   Tiled — the source is 630x907 and does NOT wrap. Its left and
   right edges nearly match (avg delta 11.7) but top and bottom are
   badly mismatched (62.2), so a plain repeat drew a hard seam
   straight across every page. It is composited 2x2 as original /
   h-flip / v-flip / both, which makes every outer edge identical to
   its opposite by construction. Same fix backdrop.css documents for
   the orange tile.

   Recoloured — the supplied art sits on near-white (254,253,251).
   Dropped in as-is it pulled every page cool and fought the warm
   bands either side of it (--band-3 is 233,223,206). It is remapped
   onto --card so the base is exactly the approved cream and the
   motif is 8.2% darker — the same base-to-motif ratio the original
   art had, so the print keeps its own character and only its hue
   moved.

   Rendered at 420px against an 840px-wide tile, so it stays exact
   on a 2x screen, at 86KB for the whole site. A first pass mapped
   the art against its global min and max, which let a handful of
   dark JPEG pixels define the range and flattened the motif to a
   ~2% swing — measurably present, invisible on screen. The white
   point is now the 98th percentile, holding the art's own 8%.

   Lossless was tried and is far worse here (856KB): the source is
   a JPEG, so its noise is expensive to encode exactly.

   styles.css:48 sets `background:var(--card)` as a shorthand, which
   zeroes background-image. This longhand loads afterwards and
   restores only the image, so the cream underneath is untouched and
   a page whose tile fails to load looks exactly as it did before.

   Only .frame changes. The coloured bands stacked on top of it —
   .hero, .promise (wine), .cats and .edit (--band-2), .bespoke
   (--band-3), .story-panel, .foot — keep their own fills, because
   that alternation is the page's rhythm and is signed off. */
.frame{
  background-image:url("../img/brand/cream-print.webp");
  background-size:420px auto;
  background-repeat:repeat;
}

/* Painting .frame alone was not enough: seven other rules paint the same
   flat --card on top of it, so the print was buried on every page except
   the homepage. Measured nesting:

     .pdp .chapter .split .empty  ->  inside .frame
     .form-wrap .cart-wrap        ->  inside .split

   The fix is to let exactly ONE element carry the tile. Giving each of
   them their own copy would restart the pattern at every boundary, since
   background-position resolves against each element's own box — a visible
   seam wherever two cream surfaces met. Making them transparent instead
   means .frame's single continuous print runs unbroken under all of them.
   It also costs nothing: same one request, same one tile.

   Safe if the image never loads — .frame keeps its --card background-color,
   so these stay exactly the cream they were.

   .empty is deliberately NOT in this list. It has a border and a radius,
   so it is a raised panel rather than a background field; left solid, it
   reads as paper laid on the cloth, and it keeps the busiest text in the
   empty states on a plain surface. Its ◆ ring carries the print instead. */
.pdp,
.chapter,
.split,
.form-wrap,
.cart-wrap{background-color:transparent}

/* ---- 1. the house line, printed on cloth ----

   .pull is story.html's one deliberately slow moment: a 30px
   Playfair quote in --gold-lt on --wine, with a single 10px
   kicker beneath it. No body copy shares the band, so it is the
   largest surface on the site that can carry print at the lowest
   legibility cost — the line about cloth now sits on some.

   93% wine. styles.css:488 sets `background:var(--wine)` as a
   shorthand, which zeroes background-image; this longhand loads
   afterwards and restores only the image, so the wine
   background-color underneath is still the approved colour and
   still shows if the tile fails to load. */
.pull{
  background-image:
    linear-gradient(rgba(76,23,29,.93),rgba(76,23,29,.93)),
    url("../img/brand/african-print-360.webp");
  background-size:auto,240px 240px;
  background-position:center,center;
}

/* ---- 2. the footer selvedge ----

   A 10px band of cloth along the very top of the footer, on every
   page — the seam where the page ends. This is the closest honest
   reading of "print in between pages", and it borders no text at
   all: .foot's own top padding is 52px, so the band sits entirely
   inside dead space.

   Drawn as an absolutely positioned ::before rather than a
   layered background so it cannot affect flow. A block-level
   ::after with height would push every footer down 10px on every
   page, which is a layout change and a Rule 1 violation.
   position:relative on .foot is required to anchor it and is
   visually inert.

   Tiled at 120px, half the size used elsewhere: a 10px slot
   through a 240px tile would show one meaningless sliver, the
   same trap backdrop.css documents. At 120px the band crosses
   recognisable pattern. The ink wash is lighter here (58%) than
   anywhere else in this file because nothing has to stay legible
   on top of it — it is pure edge decoration. */
.foot{position:relative}
.foot::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:10px;
  background-color:var(--ink-dk);
  background-image:
    linear-gradient(rgba(33,28,24,.58),rgba(33,28,24,.58)),
    url("../img/brand/african-print-360.webp");
  background-size:auto,120px 120px;
  background-position:center,center;
  pointer-events:none;
}

/* ---- 3. the hangtag, cut from the cloth ----

   .hangtag is a literal garment tag — 120x158, aria-hidden,
   decorative by construction (index.html:208, story.html:179).
   Giving it a print under a 94% wash makes it read as a tag cut
   from the same bolt as the clothes. Its only content is its own
   gold lettering, which stays on a 94% solid field, so there is
   no contrast exposure. 150px tile puts roughly one motif behind
   a tag this size. */
.hangtag{
  background-image:
    linear-gradient(rgba(74,20,28,.94),rgba(74,20,28,.94)),
    url("../img/brand/african-print-360.webp");
  background-size:auto,150px 150px;
  background-position:center,center;
}

/* ---- 4. the empty state, still warm ----

   .empty .ring is the 56px circle holding the diamond on "nothing
   here" states — an empty cart, a filter combination with no
   matches. Filling it with cloth turns "there is nothing" into
   "the cloth is still here".

   border-radius:50% on the element clips the tile to the circle
   for free. The wash is cream (--card, the panel colour) at 88%,
   which keeps the --wine-2 diamond well clear of the print
   behind it. 90px tile against a 56px circle shows part of a
   single motif rather than a busy crowd of small ones. */
.empty .ring{
  background-image:
    linear-gradient(rgba(247,242,233,.88),rgba(247,242,233,.88)),
    url("../img/brand/african-print-360.webp");
  background-size:auto,90px 90px;
  background-position:center,center;
}