/* THE OWNEDBYSIR SALE BAND (21 Oct to 19 Nov 2026). goes with js/sale.js and the SALE block in index.html.
   where it sits: the first thing inside the hero, above the header. the hero stays exactly one screen (100svh) and its
   stage (the ring and the tub) gives up the band's height, so paging, the logo and every other section are untouched.
   two strips:
     the tape  a red strip of caps crawling right to left, stars between the items (stands still, wrapped, with motion off)
     the row   the countdown, the three tiers as checkout links (old price struck through in red), the code (tap to copy)
   the phase (data-phase, set by js) changes the words and the urgency:
     on            black row, paper type
     last3/last2   the clock grows, its label goes red
     final         the row inverts to paper, the tape goes black with red caps
     hours         the row goes red, the tape black with paper caps, the clock at its biggest
   hard cuts only: nothing fades or slides between states. */

.sale {
  --s-ink: var(--ink, #f2ede4);
  --s-ink-60: rgba(242, 237, 228, .6);    /* 8.2:1 on black */
  --s-rule: rgba(242, 237, 228, .22);     /* rules only */
  --s-ground: #000;
  --s-red: var(--red, #ff0000);
  --s-hover-bg: var(--s-red); --s-hover-ink: #000;
  --s-face: 'Franklin Gothic Bold', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  --s-clock: clamp(1.35rem, 2.1vw, 1.9rem);
  --s-price: clamp(1rem, 1.35vw, 1.22rem);
  flex: none; position: relative; z-index: 1;
  font-family: var(--s-face); font-weight: 700; text-transform: uppercase; color: var(--s-ink);
}
.sale[hidden] { display: none; }
.sale-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- the tape ---- */
.sale-tape {
  background: var(--s-red); color: #000; overflow: hidden;
  font-size: clamp(.72rem, .95vw, .95rem); line-height: 1; letter-spacing: .06em;
}
.sale-track { display: flex; justify-content: center; padding: .55em var(--frame, 1.25rem) .48em; }
.sale-run { display: inline; text-align: center; }
.sale:not(.is-live) .sale-track { line-height: 1.45; padding-top: .35em; padding-bottom: .3em; }      /* no js: the words wrap */
.sale-run > span { white-space: nowrap; }
.sale-run .it { display: inline-flex; align-items: center; }
.sale-star { display: inline-block; width: .95em; height: .95em; margin: 0 1em; vertical-align: -.12em; fill: currentColor; }
/* js running: one long line, crawling. the run is repeated so one half is wider than the window; the track moves exactly
   half its own width and starts again where it already looked identical, so there is no seam */
.sale.is-live .sale-track { justify-content: flex-start; width: max-content; padding-left: 0; padding-right: 0; }
.sale.is-live .sale-run { display: flex; align-items: center; flex: none; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .sale.is-live .sale-track { animation: sale-crawl var(--s-loop, 40s) linear infinite; }
  html.loading .sale-track, html.gated .sale-track, .sale.is-away .sale-track { animation-play-state: paused; }
}
@keyframes sale-crawl { to { transform: translateX(-50%); } }
/* motion off: the tape stands still, so every item must be readable where it is: it wraps, centred, one copy */
@media (prefers-reduced-motion: reduce) {
  .sale.is-live .sale-track { display: block; width: auto; text-align: center; padding-left: var(--frame, 1.25rem); padding-right: var(--frame, 1.25rem); line-height: 1.5; }
  .sale.is-live .sale-run { display: inline; white-space: normal; }
  .sale.is-live .sale-run ~ .sale-run, .sale.is-live .it:not(.k), .sale.is-live .k-last .sale-star { display: none; }
  .sale.is-live .it { display: inline; white-space: nowrap; }
}

/* ---- the row ---- */
/* 720 and up (his ~780 window included): one line. clock left, tiers and the code to the right.
   phones: the clock and the code share a line, the tiers are a row of three under them */
.sale-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "clock code" "tiers tiers";
  align-items: center; gap: .6rem 1rem;
  padding: .62rem var(--frame, 1.25rem) .6rem;
  background: var(--s-ground); border-bottom: 1px solid var(--s-rule);
}
.sale-k { display: block; font-size: clamp(.62rem, .66vw, .7rem); line-height: 1; letter-spacing: .15em; color: var(--s-ink-60); margin-bottom: .4rem; white-space: nowrap; }
.sale-v { display: block; line-height: .9; white-space: nowrap; }

/* the clock. every figure in a fixed slot (the face's figures are proportional), colons narrower */
.sale-clock { grid-area: clock; min-width: 0; }
.sale-count { font-size: var(--s-clock); letter-spacing: 0; }
.sale-count b { font-weight: 700; }
.sale-count .dg { display: inline-block; width: .74em; text-align: center; }
.sale-count .cl { display: inline-block; width: .3em; text-align: center; position: relative; top: -.06em; }
.sale-count i { font-style: normal; font-size: .42em; letter-spacing: .12em; margin: 0 .9em 0 .3em; color: var(--s-ink-60); vertical-align: .12em; }
.sale-count .is-gone { display: none; }

/* the tiers: a ladder row of three, hairlines between, no boxes. the whole cell is the link; hover is the family's
   hard-cut invert */
.sale-tiers { grid-area: tiers; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 calc(var(--frame, 1.25rem) * -.5); }
.sale-tiers li { border-left: 1px solid var(--s-rule); }
.sale-tiers li:first-child { border-left: 0; }
.sale-tier { display: block; height: 100%; padding: .35rem calc(var(--frame, 1.25rem) * .5) .4rem; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.sale-tier .sale-v { font-size: var(--s-price); }
.sale-tier s { font-size: .78em; color: var(--s-ink-60); text-decoration: line-through; text-decoration-color: var(--s-red); text-decoration-thickness: .14em; margin-right: .25em; vertical-align: .08em; }
.sale-tier:hover, .sale-tier:focus-visible { background: var(--s-hover-bg); color: var(--s-hover-ink); outline: none; }
.sale-tier:hover .sale-k, .sale-tier:focus-visible .sale-k, .sale-tier:hover s, .sale-tier:focus-visible s { color: inherit; text-decoration-color: currentColor; }
.sale-pig { display: none; }

/* the code: the one box in the row, dashed like a coupon. tap = copied; the label cuts to "copied" for a moment. the label
   holds both words on top of each other so the cut never changes the box's size */
.sale-code {
  grid-area: code; justify-self: end; display: block; text-align: left;
  padding: .5rem .7rem .55rem; border: 1.5px dashed var(--s-ink-60); border-radius: 10px;
  font: inherit; color: inherit; background: none; text-transform: inherit; letter-spacing: inherit;
  -webkit-user-select: all; user-select: all;
}
.sale-code .sale-v { font-size: var(--s-price); letter-spacing: .05em; }
.sale-code .sale-k { display: grid; }
.sale-code .sale-k > * { grid-area: 1 / 1; }
.sale-code .sale-k .is-off { visibility: hidden; }
button.sale-code { cursor: copy; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
button.sale-code:hover, button.sale-code:focus-visible, .sale-code.is-copied { background: var(--s-ink); border-color: var(--s-ink); border-style: solid; color: #000; outline: none; }
button.sale-code:hover .sale-k, button.sale-code:focus-visible .sale-k, .sale-code.is-copied .sale-k { color: rgba(0, 0, 0, .6); }

@media (min-width: 720px) {
  .sale-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "clock tiers code"; gap: 0 clamp(1rem, 2.4vw, 2.4rem); padding-top: .6rem; padding-bottom: .62rem; }
  .sale-tiers { grid-template-columns: repeat(3, auto); justify-content: end; margin: 0; }
  .sale-tier { padding: .4rem clamp(.7rem, 1.4vw, 1.3rem) .45rem; }
  .sale-tiers li:first-child { border-left: 1px solid var(--s-rule); }
  .sale-tiers li:last-child { border-right: 1px solid var(--s-rule); }
}
@media (min-width: 1000px) { .sale-pig { display: inline; } }

/* ---- phases ---- */
.sale[data-phase="last3"], .sale[data-phase="last2"] { --s-clock: clamp(1.55rem, 2.5vw, 2.25rem); }
.sale[data-phase="last3"] .sale-clock .sale-k, .sale[data-phase="last2"] .sale-clock .sale-k { color: var(--s-red); }
/* from the last 3 days on, the phase is said at the size of a price, not a footnote */
.sale:not([data-phase="on"]) .sale-clock .sale-k { font-size: clamp(.74rem, .9vw, .9rem); letter-spacing: .12em; margin-bottom: .32rem; }

.sale[data-phase="final"] { --s-clock: clamp(1.75rem, 2.9vw, 2.6rem); }
.sale[data-phase="final"] .sale-tape { background: #000; color: var(--s-red); }
.sale[data-phase="final"] .sale-row {
  --s-ground: var(--s-ink); --s-ink-60: rgba(0, 0, 0, .62); --s-rule: rgba(0, 0, 0, .25);
  color: #000; border-bottom-color: #000;
}
.sale[data-phase="final"] .sale-clock .sale-k { color: var(--s-red); }

.sale[data-phase="hours"] { --s-clock: clamp(1.95rem, 3.4vw, 3rem); --s-hover-bg: #000; --s-hover-ink: var(--ink, #f2ede4); }
.sale[data-phase="hours"] .sale-tape { background: #000; color: var(--s-ink); }
.sale[data-phase="hours"] .sale-row {
  --s-ground: var(--s-red); --s-ink-60: rgba(0, 0, 0, .66); --s-rule: rgba(0, 0, 0, .3);
  color: #000; border-bottom-color: #000;
}
.sale[data-phase="hours"] .sale-tier s { text-decoration-color: #000; }

/* on the paper and red rows the code inverts to black */
.sale[data-phase="final"] button.sale-code:hover, .sale[data-phase="final"] button.sale-code:focus-visible, .sale[data-phase="final"] .sale-code.is-copied,
.sale[data-phase="hours"] button.sale-code:hover, .sale[data-phase="hours"] button.sale-code:focus-visible, .sale[data-phase="hours"] .sale-code.is-copied { background: #000; border-color: #000; color: var(--s-ink); }
.sale[data-phase="final"] button.sale-code:hover .sale-k, .sale[data-phase="final"] .sale-code.is-copied .sale-k,
.sale[data-phase="hours"] button.sale-code:hover .sale-k, .sale[data-phase="hours"] .sale-code.is-copied .sale-k { color: rgba(242, 237, 228, .6); }