/* ==================================================================
   Top urgency strip + bottom sticky buy bar. index.html only.

   Purely additive: nothing here redefines a rule styles.css or
   landing.css already owns, except body{padding-bottom}, which is
   deliberate and explained where it sits.

   Every color is a token. There are no hex values in this build.
   ================================================================== */

/* ------------------------------------------------------------------
   1. Top urgency strip

   OVERLAY, NOT A BAND IN THE FLOW. It was sticky, which meant it sat in
   normal flow, took its own 45px of the document and pushed the masthead
   down - a separate band stacked above the brand rather than a bar over
   the top of the page. It is now fixed, so it occupies no layout space
   at all and nothing below it moves. The masthead reserves room for it
   with padding-top:var(--urg-h) (see landing.css) so the wordmark still
   centers in what is left of the band, and the band's own 170px height
   is unchanged.

   GEOMETRY IS THE LIVE SITE'S, measured off theseniorflyer.com's
   .sale-bar rather than estimated:

     .sale-bar          59.6px tall on desktop, 65px at 390
     .sale-bar__inner   padding 10.5px 24px, max-width 1300px, centered
     .sale-bar__left    13.1px / 600 / .14em tracking, uppercase

   Our own content and palette A styling are unchanged; only the box and
   the type scale come across. The 59.6px is set as a min-height rather
   than left to the content, because the live bar gets its height from a
   CTA button in the bar and ours has no button - without the min-height
   the same padding and type land at ~43px.
------------------------------------------------------------------ */
:root{--urg-h:59.6px}
@media (max-width:768px){:root{--urg-h:65px}}

/* COLOR ONLY - geometry above is unchanged and verified.
   The strip used to be teal on teal: --accent-lift for the dot, the warning
   glyph, the promo words and the timer border, all sitting on a dark teal
   ground, one step from the masthead below it. Now the ground is the darkest
   ink token, the copy is cream at reduced opacity, and the only color in the
   strip is the alert red - which is the one thing in it that is actually
   urgent. */
.urg{
  position:fixed;top:0;left:0;right:0;z-index:950;
  background:var(--ink-deep);
  color:var(--paper);
  border-bottom:1px solid rgba(245,241,232,.10);
  font-family:var(--ui);
}
.urg-in{
  width:min(1300px,100%);margin-inline:auto;
  /* --urg-h is the strip's TOTAL height, which is what the masthead has to
     reserve. The 1px border-bottom is part of it, exactly as it is on the
     live site (its bar measures 59.6 with a 58.6 inner). */
  min-height:calc(var(--urg-h) - 1px);padding:10.5px 24px;
  display:flex;align-items:center;justify-content:center;
  gap:.85rem;
  font-size:13.1px;letter-spacing:.14em;line-height:1.2;
  text-transform:uppercase;color:rgba(245,241,232,.72);
}
/* max-width:none IS LOAD-BEARING, NOT TIDYING.
   .urg-item is a <p>, and styles.css:86 sets p{margin:0 0 1rem;max-width:48ch}
   globally. The margin was already overridden here; the max-width was not.
   At 390 the strip's .74rem type makes 48ch = 322.45px, and the promo line
   needs 347px, so it overflowed its own capped box by 24.55px to the right
   while the box itself stayed centred by .urg-in's align-items:center. The
   live line is only 180px wide, well under the cap, so it centred exactly -
   which is why one line looked off and the other did not. Measured ink
   centres before this rule, at 390: live 195.24, promo 207.23, viewport
   centre 195. Uncapping the item lets both lines centre on their content. */
.urg-item{display:flex;align-items:center;gap:.45rem;margin:0;max-width:none;white-space:nowrap}
.urg-item b{font-weight:700;color:rgba(245,241,232,.92)}


/* The counter is rewritten by script every few seconds. Tabular figures
   plus a fixed three-digit box keep its width constant, so a drift from
   147 to 152 to 98 never nudges the line it sits on. Without this the
   strip contributes a small but real layout shift on every tick. */


/* The live dot, in the brighter alert red. It was --accent-lift, which put
   a teal dot on a teal-family ground and read as decoration rather than as
   something live. */


@media (prefers-reduced-motion:reduce){
  .urg-dot{animation:none}
}

.urg-warn{color:var(--signal-lift)}
.urg-promo b{color:rgba(245,241,232,.92)}
.urg-ends{opacity:.62}


/* ------------------------------------------------------------------
   THE READING COUNTER - REMOVED 2026-09-11 (correction pass)

   .urg-live b, .urg-dot, @keyframes urg-pulse, .urg-sep stood here and styled `147 reading right now`: the
   live dot with its 1.6s pulse, the counter's own weight, and the
   `&middot;` that separated it from the countdown. The counter was the one
   fabricated social-proof number on the page and the owner has taken it
   off. Its markup is tombstoned in index.html and its whole IIFE is
   tombstoned in urgency.js.

   The strip is one item now and `.urg-in` already centres it, so no
   layout rule had to change with them.
------------------------------------------------------------------ */

/* Boxed digits. Tabular figures and a fixed tracking stop the width
   changing as the numbers tick, which is what makes a countdown jitter. */
.urg-timer{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  font-weight:600;font-size:.95rem;letter-spacing:.12em;
  padding:.24rem .5rem .22rem .55rem;
  /* A plate, not an outline, so no border: a solid deep desaturated red
     ground with the brighter alert red on it, 4.52 : 1. Every value here is
     a token - an rgba() of --signal-lift would have hardcoded it. */
  color:var(--signal-lift);
  background:var(--signal-deep);
  border-radius:3px;
}

/* Two centered lines on a phone, no separator, larger digits.
   Box is the live site's: 65px tall, 10px vertical padding, 14px side
   gutter. The type scale is NOT the live site's here and that is
   deliberate - its mobile bar drops .sale-bar__left to 9.5px, which this
   audience cannot read. Ours holds at .74rem (~12.6px). Flagged in
   HANDOFF rather than matched. */
@media (max-width:768px){
  .urg-in{
    flex-direction:column;justify-content:center;
    gap:.12rem;padding:10px 14px;min-height:calc(var(--urg-h) - 1px);
    font-size:.74rem;
  }
  
  /* .9rem, not 1rem: two stacked lines plus a 1rem timer overshoot the
     live bar's 65px box by ~2.6px and the min-height stops governing. At
     .9rem the content sits inside the box and the height is exact. */
  .urg-timer{font-size:.9rem;letter-spacing:.1em}
}
@media (max-width:360px){
  .urg-in{font-size:.66rem}
  .urg-timer{font-size:.95rem}
}

/* ------------------------------------------------------------------
   2. Bottom sticky buy bar

   z-index sits above the page but below .xi, the exit-intent overlay,
   which landing.css puts at 9998. The modal has to cover this bar.
------------------------------------------------------------------ */

/* Measured height of the bar at each width, reserved at the foot of the
   page so the footer is never sitting underneath it. styles.css and
   landing.css both end on body{padding-bottom:0} - the comment there says
   the room was for a sticky bar "no longer on the page" - so this puts the
   reservation back rather than inventing it.

   RESERVED ONLY WHILE THE BAR IS UP, from this revision. It used to be
   unconditional below 820px, which was right when the bar appeared after
   320px of scroll and stayed for the rest of the session. The bar is now
   bound to the bottom of the arithmetic and is absent for most of the
   page, so the reservation follows it: urgency.js adds and removes
   `bar-on` on <body> in the same call that toggles the bar. The footer is
   never underneath it, and the page does not carry 69px of empty ground
   at its foot for the whole of the time the bar is not there.

   AND THE FIGURES HERE ARE ONLY THE FALLBACK. urgency.js measures the
   bar's rendered height and writes it back to --buybar-h, because the
   2px top border and the button's own line box are not in these two
   numbers. See the note there. */
:root{--buybar-h:85px}
@media (max-width:768px){:root{--buybar-h:69px}}
body{padding-bottom:0}
body.bar-on{padding-bottom:var(--buybar-h)}

/* MOBILE ONLY, FROM 820px UP IT IS NOT THERE AT ALL.
   display:none rather than visibility or a transform: the bar must take no
   layout space on desktop, and the reserved --buybar-h at the foot of the
   page goes with it - otherwise the footer would sit above 85px of nothing.
   urgency.js reads the same 820px in a matchMedia and never attaches its
   scroll listener above it, so no handler runs on desktop either. The two
   thresholds are the same number and must stay the same number.

   820 is not a new breakpoint. It is the page's own single-column line - where
   .hero-in collapses, .offer-grid collapses and the hero swaps to hero-560 -
   so "the bar is on where the page is one column" needs no extra rule to
   remember. */
@media (min-width:820px){
  .buybar{display:none}
  /* Both, so a stale `bar-on` left on <body> by a resize across the
     breakpoint cannot reserve space for a bar that is not rendered. */
  body,body.bar-on{padding-bottom:0}
}

.buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:900;
  background:var(--tile);
  border-top:2px solid var(--ink);
  box-shadow:0 -14px 34px -20px rgba(0,0,0,.4);
  /* IT FADES, IT NO LONGER SLIDES IN FROM OFF-SCREEN. translateY(110%)
     threw the whole bar below the fold and back, which at the moment the
     arithmetic leaves the top of the screen read as a snap. The move is
     now 14px - enough to give the fade a direction - and opacity carries
     it.

     visibility is in the transition on a delay so the bar is not
     hit-testable while it is transparent, without cutting the fade short:
     0s linear .28s going out, 0s coming in. */
  transform:translateY(14px);opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .28s ease,opacity .28s ease,visibility 0s linear .28s;
}
.buybar.show{
  transform:none;opacity:1;visibility:visible;pointer-events:auto;
  transition:transform .28s ease,opacity .28s ease,visibility 0s;
}
@media (prefers-reduced-motion:reduce){
  .buybar,.buybar.show{transition:none}
}

/* FULL BLEED, NOT A CENTERED CONTAINER.
   The rest of the page sits in a 1080px column, but a fixed bar that
   inherits that column leaves the price and the button floating in the
   middle of a 1920px screen with dead space either side. The inner is
   therefore edge to edge with a fixed gutter, so the label sits flush
   left and the CTA flush right at every width. */
.buybar-in{
  width:100%;max-width:none;margin:0;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.55rem 2rem;
}
.buybar-offer{min-width:0}
.buybar-label{
  display:block;
  font-family:var(--ui);font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;
  font-size:.6rem;color:var(--ink-mute);
  margin-bottom:.18rem;
}
.buybar-price{display:flex;align-items:baseline;gap:.55rem}
.buybar-was{font-size:1rem;color:var(--ink-mute);text-decoration:line-through}
.buybar-now{font-family:var(--ui);font-size:1.9rem;line-height:1;color:var(--accent)}

/* The page button at bar scale. Scoped to .buybar so .btn itself is
   untouched everywhere else on the page. */
.buybar .btn{
  min-height:52px;padding:.7rem 1.7rem;
  font-size:1.05rem;white-space:nowrap;flex:none;
  /* 10px, not the .5rem this inherited: the arrow below is the one the offer
     CTA and the hero pair carry, and 10px is the gap they set it at. */
  gap:10px;
}
/* THE TRAILING ARROW, THE SAME ONE THE OTHER CTAs USE.
   Identical declaration to .ep-btn::after and .hero .btn-row.top-cta .btn::after
   - the serif face, 1.1rem, no tracking, and the 4px slide on hover. Drawn with
   ::after rather than typed into the label so it can move on its own, which is
   why the markup says only GET IT NOW. */
.buybar .btn::after{
  content:"\2192";
  /* 17.6px, matching the offer/last-call/modal arrow and the hero pair -
     one arrow size on the page. The buybar is our own component and not a
     port of his, so this is a consistency decision, not a match to him. */
  font-family:var(--serif);font-size:17.6px;letter-spacing:0;
  transition:transform .25s ease;
}
.buybar .btn:hover::after{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){
  .buybar .btn::after{transition:none}
  .buybar .btn:hover::after{transform:none}
}

@media (max-width:768px){
  .buybar-in{gap:.7rem;padding:.45rem 1rem}
  .buybar-label{font-size:.55rem;letter-spacing:.14em}
  .buybar-now{font-size:1.5rem}
  .buybar-was{font-size:.85rem}
  .buybar .btn{min-height:46px;padding:.6rem 1.05rem;font-size:.92rem}
}
/* styles.css sends .btn to width:100% here, which would break the row. */
@media (max-width:560px){
  .buybar .btn{width:auto}
}
@media (max-width:360px){
  .buybar-in{padding:.45rem .8rem}
  .buybar .btn{padding:.6rem .8rem;font-size:.85rem}
  .buybar-label{font-size:.5rem}
}

/* ------------------------------------------------------------------
   THE STICKY BAR ON OTIS GRANGER'S - THE LOOK, NOT ONLY THE CONTENT
   2026-09-11 (correction pass)

   The previous set took his two children and his words and left the bar
   looking like ours. Every figure below was read off his live page at 390
   and 360 with getComputedStyle, not estimated:

     bar        flex, align-items:center, gap 12px, padding 10px 14px,
                height 78, border-top 1px solid rgba(230,218,199,.25),
                box-shadow rgba(0,0,0,.35) 0 -6px 20px, z-index 60
     name       Georgia 16px/20px, weight 700, #FAF6EF,
                nowrap + overflow:hidden + text-overflow:ellipsis
     price      Georgia 13px/16.25px, weight 400, #E6DAC7
     button     Georgia 17px/27.2px, weight 700, white,
                linear-gradient(#D99A45,#B5772C), 1px solid #E8C79A,
                radius 9px, no shadow, padding 14px 20px, ~38-41% of the bar

   THE TWO MAPPINGS, AND ONLY THESE TWO:

   1. THE GROUND IS OURS. His is rgba(36,28,21,.97), a warm brown. Ours is
      --ink-deep, the same ground the top bar and the footer already use,
      at his .97 alpha. Everything else about the bar is his.

   2. THE GOLD IS DARKENED, MINIMALLY, BECAUSE HIS FAILS AA.
      White on his #D99A45 measures 2.43 : 1 and on his #B5772C 3.72 : 1.
      The button is 17px/700, and WCAG large text starts at 18.66px for
      bold, so this is NORMAL text and the bar is 4.5, not 3.0. Both stops
      fail.
      Darkening each stop to 4.5 on its own collapses the ramp - they land
      six units apart - so the WHOLE gradient moves down by the one delta
      the lighter stop needs (0.1780 of HSL lightness), hue and saturation
      held exactly. His 0.1196 of lightness spread survives intact:
        #D99A45 -> #A26B21   white 4.50 : 1
        #B5772C -> #6C471A   white 8.22 : 1
      The border keeps his #E8C79A - it is a hairline, not text.

   BEHAVIOUR IS UNTOUCHED: same #buybar element, same reveal off the bottom
   of section 03 in urgency.js, same Whop link, and landing.js still hides
   it while the exit modal is open and restores it on all four close paths.
------------------------------------------------------------------ */
.buybar{
  background:rgba(10,42,46,.97);
  border-top:1px solid rgba(230,218,199,.25);
  box-shadow:0 -6px 20px rgba(0,0,0,.35);
}
.buybar-in{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;width:100%;margin:0;
}
.buybar-sl{flex:1;min-width:0;display:flex;flex-direction:column;gap:0;text-align:left}
.buybar-sl b{
  font-family:Georgia,"Times New Roman",serif;
  font-size:16px;font-weight:700;line-height:20px;color:#FAF6EF;
  /* His own overflow behaviour: one line, clipped with an ellipsis. His
     product name is longer than the space too, and his does exactly this. */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.buybar-sl span{
  font-family:Georgia,"Times New Roman",serif;
  font-size:13px;font-weight:400;line-height:16.25px;color:#E6DAC7;
}
/* `.buybar .buybar-cta`, NOT a bare `.buybar-cta`. The bar's own
   `.buybar .btn` is (0,2,0) and sets the size at three widths; a single
   class lost to it and the button rendered at 18.9px instead of his 17.
   Measured before this selector was widened. */
.buybar .buybar-cta{
  flex:none;
  font-family:Georgia,"Times New Roman",serif;
  font-size:17px;font-weight:700;line-height:27.2px;
  text-transform:none;letter-spacing:normal;
  color:#fff;
  background:linear-gradient(#A26B21,#6C471A);
  border:1px solid #E8C79A;border-radius:9px;box-shadow:none;
  padding:14px 20px;min-height:0;
}
.buybar .buybar-cta:hover{
  background:linear-gradient(#8E5D1D,#5C3D16);
  border-color:#E8C79A;color:#fff;
}
/* No arrow. `.btn` draws none, and nothing here adds one. */
.buybar .buybar-cta::after{content:none}


/* ==================================================================
   THE SALE FORMAT, 2026-09-19.  OTIS GRANGER'S `.bar`.

   His, measured on the live page:

     .bar      position:sticky;top:0;z-index:50;text-align:center;
               padding:11px 16px;font-size:16px;color:#fff,
               on a three-stop red gradient with a drop shadow
     content   <b>LIMITED TIME SALE</b> · $39.99 <s>$59.99</s> · ends in
               then three unit spans, each `NN<small>UNIT</small>`

   WHAT IS TAKEN: the four-part line, the struck price beside the live one,
   and the three-unit clock with its <small> labels and NO COLONS.

   WHAT IS NOT: the red gradient ground and the white type. This strip is
   --ink-deep and has been since it was built; it sits directly above a
   masthead band on the same colour and the two read as one dark field. A
   red bar would be a new element on the page rather than a new format for
   this one, and the brief is explicit that the palette stays ours. The
   urgency colour is where it already was - on the timer, which is the only
   thing in the strip set in --signal-lift on --signal-deep.

   THE STRIP'S OWN GEOMETRY DID NOT MOVE. Same fixed position, same --urg-h,
   same .urg-in flex row, same centring, same uppercase, same column layout
   at 768. .masthead still reserves --urg-h with its padding-top.

   THIS FILE IS THE LAST STYLESHEET IN <head>, which is why the .urg-timer
   and .urg-ends declarations below win over landing.css's own without
   needing a single !important. Load order is the specificity here; if the
   three <link> tags are ever reordered, this block breaks and the two files
   have to be reconciled properly.
   ================================================================== */
.urg-sale{
  font-weight:700;
  color:rgba(245,241,232,.92);
  letter-spacing:.14em;
}
/* The separators are typed as characters and are aria-hidden in the markup:
   a screen reader announcing "middle dot" twice inside a sale banner is
   noise, and the line reads correctly without them. */
.urg-dot-sep{opacity:.45}
.urg-price{
  color:rgba(245,241,232,.92);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
/* The struck $79, drawn the way the price block draws its own: the strike is
   the line-through and the figure is dimmed rather than recoloured, so it
   reads as the same price crossed out and not as a second, different one. */
.urg-price s{
  text-decoration:line-through;
  opacity:.55;
  margin-left:.25em;
}

/* THE CLOCK. His is three spans in one wrapper, each carrying the number and
   then its <small> label. The dark plate stays - it is this strip's own and
   it is what gives the timer its contrast - and the three units sit inside
   it. letter-spacing goes to 0 on the wrapper because the tracking now
   belongs to the units, which have a label to sit beside. */
.urg-timer{
  display:inline-flex;align-items:baseline;gap:.5em;
  letter-spacing:0;
}
/* SUPERSEDED 2026-09-19 (round 2) by the boxed units at the foot of this
   file. It read:
     .urg-unit{display:inline-flex;align-items:baseline;gap:.14em;
               font-variant-numeric:tabular-nums;
               font-feature-settings:"tnum" 1;letter-spacing:.04em}
   which put the label BESIDE the number on one shared plate. Otis's units
   are three separate boxes with the label UNDER the number. Kept here as a
   tombstone so the two shapes can be told apart in the history. */
/* His unit labels are small, tracked out, and beside the number rather than
   under it. Ours are the same, one step down in size and at 72% alpha so the
   digits stay the thing the eye lands on. */
.urg-unit small{
  font-size:.62em;font-weight:500;letter-spacing:.14em;
  opacity:.72;
}
@media (max-width:768px){
  .urg-timer{gap:.42em}
  .urg-unit small{font-size:.6em;letter-spacing:.1em}
}
/* Below 480 the four parts do not fit on one line even in the column layout
   the strip already takes at 768, so the label takes a line of its own and
   the price, "ends in" and the clock share the second. NOTHING IS DROPPED -
   every word of the line is still on screen, which is the whole reason the
   separators go rather than any of the copy. */
@media (max-width:480px){
  .urg-in{gap:.2rem}
  .urg-item.urg-promo{
    display:flex;flex-wrap:wrap;justify-content:center;
    gap:.12rem .4rem;white-space:normal;
  }
  .urg-sale{flex:0 0 100%;text-align:center}
  .urg-dot-sep{display:none}
  .urg-ends{letter-spacing:.14em}
}
@media (max-width:360px){
  .urg-price{font-size:.95em}
  .urg-unit small{font-size:.56em;letter-spacing:.06em}
}
/* ------------------------------------------------------------------
   1.  THE TOP BAR'S BOXED UNITS - Otis's `.cd`, measured at 1440.

     .cd        display:inline-flex; gap:6px; margin-left:10px;
                vertical-align:middle;           144 x 46
     #cdh/m/s   display:block; min-width:44px; padding:3px 8px;
                border-radius:5px; background:rgba(0,0,0,.28);
                font-size:16px; font-weight:700; text-align:center;
                                                  44 x 46
     #cdh small display:block; font-size:9px; letter-spacing:.72px
                (= .08em); line-height:14.4px; text-align:center;
                                                  28 x 14.4

   TAKEN VALUE FOR VALUE: the box, the 5px radius, the 6px gap, the 44px
   floor, the 16px/700 number, the 9px/.08em label under it, both centred.

   THE COLOURS ARE OURS. His boxes are a black wash on his red bar; ours
   are --signal-deep on --ink-deep, which is the pair this strip's timer
   plate has used since it was built. Number in --signal-lift (4.52 : 1 on
   the plate), label in the paper at 62% (7.1 : 1).

   THE BAR'S HEIGHT DOES NOT CHANGE. --urg-h is 59.6px and the box is 46px;
   it fits inside the padding the strip already reserves, so the masthead's
   own padding-top is untouched.
------------------------------------------------------------------ */
.urg-timer{
  /* The plate moves off the row and onto each unit. */
  background:none;padding:0;border-radius:0;
  display:inline-flex;align-items:center;gap:6px;
  vertical-align:middle;letter-spacing:0;
  font-size:16px;font-weight:700;line-height:1;
}
.urg-unit{
  display:block;min-width:44px;
  padding:3px 8px;border-radius:5px;
  background:var(--signal-deep);
  color:var(--signal-lift);
  font-family:var(--mono);
  font-size:16px;font-weight:700;line-height:20px;
  letter-spacing:0;text-align:center;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.urg-unit small{
  display:block;
  font-family:var(--mono);
  font-size:9px;font-weight:500;
  line-height:14.4px;letter-spacing:.08em;
  text-align:center;
  color:rgba(245,241,232,.62);
  opacity:1;
}
/* The label is centred under the number, so the row no longer needs the
   baseline alignment the colon string wanted. */
.urg-in{align-items:center}
@media (max-width:768px){
  .urg-timer{gap:5px}
  .urg-unit{min-width:40px;padding:2px 6px;font-size:15px;line-height:18px}
  .urg-unit small{font-size:8.5px;line-height:13px}
}
@media (max-width:360px){
  .urg-unit{min-width:36px;padding:2px 5px;font-size:14px}
  .urg-unit small{font-size:8px;letter-spacing:.06em}
}




/* ==================================================================
   ROUND 8 - 2026-09-19.  THE SALE BAR IS BERTHA'S, 1:1, IN OUR COLOURS.

   MEASURED ON HER LIVE PAGE AT 1440 (berthascookbook.com and
   berthacleans.com carry the identical bar, which is how the figures
   below were confirmed twice):

     ITEM                 HERS                      OURS BEFORE
     .bar height          68px                      62px
     .bar padding         11px 16px                 10.5px 24px
     ground               linear-gradient(90deg,
                          #7A2612, #8F2D15 50%)     flat --ink-deep
     LIMITED TIME SALE    Georgia 16px / 700        Oswald, .14em, 700
                          rgb(255,217,176)
     price / struck       Georgia 16px / 400,
                          struck at opacity .7      --ui, opacity .55
     "ends in"            Georgia 16px, plain       .62 alpha
     .cd                  inline-flex, gap 6px,
                          margin-left 10px          gap .5em, no margin
     unit box             44 x 46, block,
                          padding 3px 8px, r5,
                          rgba(0,0,0,.28),
                          Georgia 16px / 700        44 x 40, --signal-deep,
                                                    JetBrains Mono
     unit label           Georgia 9px / 400,
                          letter-spacing .72px      mono 9px, .72px, a72

   HER GROUND IS A RUST RED AND SO IS OUR ACCENT - #7A1F0E against her
   #7A2612, three points apart on one channel and two on the others. The
   gradient is hers: base, one step lighter at the centre, base again.
   The text is our cream and the boxes are our dark teal, which is what
   the brief sets; everything else on this bar is her measurement.

   THE HEIGHT IS THE BOX PLUS HER PADDING: 46 + 11 + 11 = 68, so the
   figure is arrived at rather than asserted. --urg-h carries it, and the
   masthead reserves the strip's height off that same token, so the band
   below moves with it and nothing has to be told twice.
   ================================================================== */
:root{--urg-h:68px}
@media (max-width:768px){:root{--urg-h:72px}}

.urg{
  background:var(--accent);
  background:linear-gradient(90deg,
    var(--accent),
    color-mix(in srgb, var(--accent) 84%, var(--signal-lift)) 50%,
    var(--accent));
  border-bottom:0;
  font-family:var(--serif);
}
.urg-in{
  min-height:calc(var(--urg-h) - 0px);
  padding:11px 16px;
  gap:.5rem;
}
.urg-item.urg-promo{font-family:var(--serif)}
.urg-sale{
  font-family:var(--serif);
  font-size:16px;line-height:25.6px;font-weight:700;
  letter-spacing:normal;
  color:var(--paper);
}
.urg-price{
  font-family:var(--serif);
  font-size:16px;line-height:25.6px;font-weight:400;
  color:var(--paper);
}
.urg-price s{opacity:.7;margin-left:.25em}
.urg-ends{
  font-family:var(--serif);
  font-size:16px;line-height:25.6px;font-weight:400;
  letter-spacing:normal;
  opacity:1;color:var(--paper);
}
.urg-dot-sep{opacity:.7;color:var(--paper)}
.urg-timer{
  display:inline-flex;align-items:center;
  gap:6px;margin-left:10px;
  vertical-align:middle;
  background:none;padding:0;border-radius:0;letter-spacing:0;
}
/* 44 x 46 IS ARRIVED AT, NOT SET: 25.6 (the numeral's line) + 14.4 (the
   label's) + 3 + 3 of padding is 46, and 28px of label + 8 + 8 is 44.
   Her box is sized by its own contents and so is ours. */
.urg-unit{
  display:block;min-width:44px;
  padding:3px 8px;border-radius:5px;
  background:var(--ink-deep);
  color:var(--paper);
  font-family:var(--serif);
  font-size:16px;font-weight:700;line-height:25.6px;
  letter-spacing:0;text-align:center;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.urg-unit small{
  display:block;
  font-family:var(--serif);
  font-size:9px;font-weight:400;line-height:14.4px;
  letter-spacing:.72px;
  opacity:1;color:var(--paper);
}
@media (max-width:768px){
  .urg-timer{gap:5px;margin-left:8px}
  .urg-unit small{font-size:9px;letter-spacing:.6px}
}
@media (max-width:480px){
  .urg-sale,.urg-price,.urg-ends{font-size:15px;line-height:22px}
  .urg-unit{min-width:40px;padding:2px 6px;font-size:15px;line-height:22px}
  .urg-unit small{font-size:8.5px;line-height:13px}
}

/* THE PRICE IS UNTRACKED, WHICH IS HERS. `.fig` is the page's figure class
   and it carries .115em of tracking so that a price set in the mono face
   reads as digits rather than as a word - right everywhere else on the
   page, wrong here, where the bar is now a serif and the reference sets
   its price at `letter-spacing: normal`. Measured: ours came out "$ 2 7"
   at 1.834px against her "$27" at 0. Scoped to the bar, so every other
   `.fig` on the page keeps its tracking. */
.urg-price .fig,.urg-price s .fig{letter-spacing:normal}


/* ==================================================================
   ROUND 9 - 2026-09-20.  THE BAR ON A PHONE, AND HIS THREE COLOURS.

   MEASURED ON otisgranger.com AT 390:

     ITEM              HIS                      OURS BEFORE
     bar height        75px                     85px
     bar padding       10px 12px                11px 16px
     visual rows       2 (text, then boxes)     4 - the line wrapped
                                                four times
     unit box          44 x 37, pad 3px 8px,    40 x 39, --ink-deep
                       fs 13px, rgba(0,0,0,.28)
     unit numeral      #FFFFFF                  --paper  (right idea)
     unit label        #FFFFFF at opacity .8    --paper at opacity 1
     "ends in"         lower case               UPPER CASE

   THE OVERFLOW THE BRIEF REPORTS IS NOT IN THIS BUILD - measured at 390
   and at 360, scrollWidth equals clientWidth on the bar, on its inner and
   on the document. What IS wrong is the wrap: the promo line broke into
   FOUR rows where his breaks into two, and the bar stood 10px taller than
   his for it.

   TWO ROWS, HIS WAY: the copy stays on one line and the timer is pushed
   onto its own by `flex-basis:100%`, which is one declaration rather than
   a second container. Everything at >=821 is untouched - round 8's bar is
   Bertha's at 1440 and stays exactly as it was.
   ================================================================== */

/* `ends in` IS LOWER CASE, WHICH IS HIS. `.urg-in` sets
   `text-transform:uppercase` for the whole strip and the sale label wants
   it; this one word does not, at any width. */
.urg-ends{text-transform:none}

/* HIS BOX IS A DARKER RED, NOT A DIFFERENT COLOUR. He darkens his own bar
   by laying rgba(0,0,0,.28) over it; ours takes the token that already
   means that - `--accent-dark` against `--accent` - so the box is one step
   down from the ground it sits on rather than a second hue. The teal was
   left from the round-2 strip, when the bar itself was teal. */
.urg-unit{background:var(--accent-dark)}
.urg-unit small{opacity:.8}

@media (max-width:820px){
  /* --urg-h IS THE HEIGHT THE MASTHEAD RESERVES, and it was 72 while the
     bar rendered 85 - so the bar was overlapping the band below it by
     thirteen pixels at every phone width. The two are the same number
     now, and the number is what the content actually measures. */
  /* 81 IS WHAT IT MEASURES: 10 of padding, a 22px copy line, 2 of gap,
     the 37px box and 10 of padding again. Otis's is 75 at the same width -
     his copy line is 19px where our serif sets 22 - and the six pixels are
     recorded rather than chased, because the number that matters is that
     the masthead reserves exactly what the bar occupies. It reserved 72
     against a rendered 85 before this round, so the bar was sitting on top
     of the band below it by thirteen pixels at every phone width. */
  :root{--urg-h:81px}
  .urg-in{
    min-height:calc(var(--urg-h) - 0px);
    padding:10px 12px;
    flex-direction:column;
    gap:4px;
  }
  .urg-item.urg-promo{
    display:flex;flex-wrap:wrap;
    justify-content:center;align-items:center;
    gap:0 .34rem;white-space:normal;
  }
  /* ROW TWO. The basis is what breaks the line - the three boxes cannot
     share a row with the copy, so they take one of their own and centre
     on it, which is exactly the shape his bar takes at this width. */
  .urg-timer{
    flex:0 0 100%;
    justify-content:center;
    margin-left:0;margin-top:2px;
  }
  .urg-sale,.urg-price,.urg-ends{font-size:15px;line-height:22px}
  .urg-unit{
    min-width:44px;padding:2px 8px;
    font-size:13px;line-height:20px;
  }
  .urg-unit small{font-size:9px;line-height:13px;letter-spacing:.72px}
}
@media (max-width:480px){
  /* The round-8 rule at this width set its own sizes and would otherwise
     undo the ones above it; the two are reconciled here rather than left
     to cascade order. */
  .urg-sale,.urg-price,.urg-ends{font-size:15px;line-height:22px}
  .urg-unit{min-width:44px;padding:2px 8px;font-size:13px;line-height:20px}
  .urg-unit small{font-size:9px;line-height:13px}
}

/* `.urg-sale{flex:0 0 100%}` FROM THE <=480 BLOCK ABOVE IS WHAT KEPT THE
   BAR AT FOUR ROWS. It was written when the strip had no boxed timer and
   the four parts genuinely could not share a line; with the timer on a row
   of its own the copy fits one line at 360 with room, measured. The label
   goes back to being an inline flex child at every width. */
@media (max-width:820px){
  .urg-sale{flex:0 1 auto;text-align:center}
  .urg-item.urg-promo{gap:0 .34rem}
}