/* ==========================================================================
   BiddyUp /v2 — the one shared stylesheet (tokens, base, components, motion).
   Source of truth: 09-Attachments/design-system/shared.css
   Built to 13-Site/v2/site.css by build_preview.py. Page-specific rules live
   in each page's own <style> block, never here twice.
   ========================================================================== */
:root{
  /* --- palette, with a JOB for every colour --- */
  --bone:   #F7EAD2;   /* page ground            */
  --cream:  #FDF6E7;   /* card / raised surface  */
  --walnut: #33200F;   /* ink + inverted bands   */
  --rust:   #C0552C;   /* THE action colour      */
  --secondary: #2F6B4F;   /* status: won/paid/ships. NEVER beside rust: green next to
                             orange reads as the Mexican flag (Braden, 2026-09-10 and
                             again 2026-09-12: "just know that for the future"). A green
                             word sits with walnut, never under a rust number or next
                             to a rust button. */
  --sun:    #F2C14E;   /* highlight + numerals   */

  --walnut-70: rgba(51,32,15,.70);
  --bone-72:   rgba(247,234,210,.72);

  --display: "Chubbo", Georgia, serif;
  --dw: 700;
  --body: "Pally", system-ui, -apple-system, sans-serif;
  --data: "Tabular", ui-monospace, Menlo, monospace;

  --col: 1140px;
  /* ONE Buck size per device. Braden, 2026-09-10: "I need him to be the same size
     throughout the whole scroll so it doesn't look like he's growing and getting
     smaller." Every full-body Buck on the site is set from this - hero, burger,
     couch, the subpage heroes, the refund stages. The lot-card peek is the one
     exception by design: it is a close-up of his head on a ledge, not a figure. */
  /* 310, not 360 (Braden, 2026-09-22: "the smaller he is on desktop the less grainey
     he looks - that goes for the burger eating part as well"). Every full-body clip is
     420px wide at source, so 360 was a 0.86x downsample - barely throwing a pixel away,
     which is exactly when a browser's resampler looks soft. 310 is 0.74x and reads crisp.
     Do not push this back up without shipping a wider asset first. */
  --buck-w: 310px;
  --hero-buck-w: clamp(230px, 21vw, 310px);   /* desktop jump; phone keeps its own lane.
     Cap now matches --buck-w, so he is one size the whole scroll again. */
  --pad: clamp(18px, 4.5vw, 56px);

  /* type scale + stroke weight of the whole frame */
  --hero:  clamp(44px, 9vw, 128px);   /* was capped at 96px, which left the
                                          hero looking empty on wide screens */
  --h2:    clamp(30px, 4.6vw, 52px);
  --track: -.028em;
  --lh:    1.02;
  --bd:    3px;
  --drop:  5px;

  /* motion */
  --fast: 120ms; --mid: 200ms; --slow: 320ms;
  --out: cubic-bezier(0,0,.2,1);
  --pop: cubic-bezier(.2,.9,.3,1.3);   /* slight overshoot, decays instantly */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ overflow-x:hidden;
  margin:0;
  background: var(--bone);
  color: var(--walnut);
  font-family: var(--body);
  font-size:17px; line-height:1.55; font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
svg{ display:block; }
/* height:auto matters: the width/height ATTRIBUTES are presentational hints, so a
   CSS width without it leaves the attribute height standing and stretches the image
   (the peek Buck rendered 189x541 on 2026-08-24 before this line). */
img{ max-width:100%; height:auto; display:block; }
:focus-visible{ outline:3px solid var(--rust); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

/* width:100% is load-bearing, not decoration. `.wrap` centres with margin:0 auto,
   which works in block layout - but .fold makes the page a FLEX COLUMN, and in a
   flex container an auto cross-axis margin makes the item shrink to fit its CONTENT
   instead of stretching. The nav collapsed to 792px inside a 1440px window and
   looked "scrunched". width:100% makes it stretch first, then cap at --col. */
.wrap{ width:100%; max-width: var(--col); margin:0 auto; padding:0 var(--pad); }

.disp{
  font-family: var(--display); font-weight: var(--dw);
  letter-spacing: var(--track); line-height: var(--lh);
  text-wrap:balance; margin:0;
}
h1.disp{ font-size: var(--hero); }
h2.disp{ font-size: var(--h2); }

/* Marker highlight — an SVG stroke centred on the INK (not the line box), with
   chisel ends and horizontal overshoot so it reads as a highlighter, not a box.
   Measured: 'a buck.' in Chubbo 700 inks .281em–1.073em, so the .92em band
   starts at .217em. Background-image so it cannot inflate the line box. */
.hl{
  color: var(--walnut);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 64' preserveAspectRatio='none'%3E%3Cpath d='M14,8.5 C70,6 150,6.5 208,5.2 C252,4.2 292,4.6 310,5.6 C314,5.9 317,6.5 317,8 C316.6,16 314,30 311,44 C309.6,50 308,52 306,52.6 C262,57 160,55.2 100,56.6 C60,57.6 20,58 9,56 C5,55.2 3,53.4 3,50.5 C3.2,40 6,20 9.5,11 C10.6,9.3 12,8.7 14,8.5 Z' fill='%23F2C14E' fill-opacity='.92'/%3E%3Cpath d='M5,43 C60,49.5 140,50.5 200,49 C250,47.8 288,47 311,44 C310,49.4 308.4,52 306,52.6 C262,57 160,55.2 100,56.6 C60,57.6 20,58 9,56 C5.4,55.2 4.2,49 5,43 Z' fill='%23DFA124' fill-opacity='.32'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% .92em;
  background-position: 0 .217em;
  margin: 0 -.07em;
  padding: 0 .17em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--body); font-weight:700; font-size:17px;
  padding:16px 28px; border-radius:999px; border:var(--bd) solid var(--walnut);
  background: var(--rust); color: var(--cream); cursor:pointer;
  box-shadow: var(--drop) var(--drop) 0 var(--walnut);
  transition: transform .12s ease, box-shadow .12s ease;
  text-decoration:none;
  will-change: transform;
}
.btn:hover{ transform: translate(2px,2px); box-shadow: calc(var(--drop) - 2px) calc(var(--drop) - 2px) 0 var(--walnut); }
.btn.ghost{ background: var(--cream); color: var(--walnut); }
.btn.ghost:hover{ background: var(--sun); }
.btn svg{ width:17px; height:17px; }
.btn:active{ transform: translate(var(--drop),var(--drop)) !important; box-shadow:none !important; }
.btn svg{ transition: transform var(--fast) var(--out); }
.btn:hover svg{ transform: translateX(3px); }

/* -- scroll reveal: content rises INTO place, so the page assembles as you go.
      Hidden-by-default is gated on html.js: with JS off the page is complete. -- */
html.js [data-rise]{ opacity:0; transform: translateY(16px); }
.rise-in{ opacity:1 !important; transform:none !important;
  transition: opacity var(--slow) var(--out), transform var(--slow) var(--out); }

/* -- the marker draws itself, left to right, once ----------------------------- */
html.js .hl{ background-size: 0% .92em; }
html.js .hl.drawn{ background-size: 100% .92em; transition: background-size 620ms var(--out) 260ms; }

/* ---------- nav ---------- */
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 0 14px;
  /* Buck reaches up INTO this row, so the nav must sit ABOVE him. The Bid now
     button has to stay fully legible and clickable with his hoof passing behind
     it, never in front. Braden 2026-08-24: "make the video underneath all that". */
  position:relative; z-index:20;
}
/* The hat lives in the nav now. Braden, 2026-09-10: "the hat also needs to be
   displayed on the site somewhere... maybe we could put the hat in the top left, at
   the nav bar at the top, and maybe the BiddyUp wordmark at the footer at the
   bottom." It used to appear only inside the cropped logo bleeding off the footer,
   so removing that would have taken the hat off the site entirely. */
.brand{ display:flex; align-items:center; gap:9px; text-decoration:none; }
/* Desktop: the HAT alone, top-left (Braden, 2026-09-12: "I just want the hat in the
   top left"). The wordmark lives in the footer. Phones keep the centred wordmark. */
.brand .logo{ display:none; color: var(--walnut); }   /* colour stays: on a phone it shows, and without this it inherited link-blue */
.brand .logo-hat{ height:44px; width:auto; color: var(--walnut); display:block; margin-top:0; }
.brand:hover .logo-hat{ transform: rotate(-7deg) translateY(-2px); }
.brand .logo-hat{ transition: transform var(--fast) var(--pop); transform-origin: 50% 90%; }
/* On a phone the HAT is the brand mark and the wordmark waits in the footer - three
   separate objects on the left (burger, hat, wordmark) with uneven gaps read as
   clutter in the first loop. Two clusters now: [menu + mark] ... [Bid now]. */
/* On a phone the centred wordmark IS the mark; the hat rides with it only where
   the bar has room (desktop lockup). */
@media (max-width:600px){
  .brand .logo{ display:block; height:30px; }
  .brand .logo-hat{ display:none; }
}
.navlinks{ display:flex; gap:26px; }
.navlinks a{ font-weight:700; font-size:15px; color: var(--walnut); text-decoration:none; }
.navlinks a:hover{ text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:5px; }
.navlinks a[aria-current="page"]{ text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:5px; text-decoration-color: var(--rust); }

.nav .btn{ height:42px; padding:0 17px; font-size:14px; }   /* Braden 2026-09-10: "a little smaller" - and exactly the burger's 42px */
/* DESKTOP ONLY, 2026-09-22: Braden asked for a bigger bar - "we have middle-aged people.
   They need to be able to see and view our stuff." Scoped to min-width:901px on purpose:
   he asked for the phone to be left exactly as it was, and `.nav .btn` is shared by every
   page and every width. */
@media (min-width:901px){
  .nav .btn{ height:50px; padding:0 22px; font-size:16px; }
  .navlinks{ gap:30px; }
  .navlinks a{ font-size:17px; }
  .brand .logo-hat{ height:52px; }
}
/* "Bid now" where there is room, "Bid" on a phone (Braden, 2026-09-10). */
.nav .btn .bid-short{ display:none; }
@media (max-width:600px){ .nav .btn .bid-long{ display:none; } .nav .btn .bid-short{ display:inline; } }

/* ---------- Help menu ----------
   Five explanatory links crowded the bar, and Refunds + Alerts still needed a home.
   They fold under Help, leaving three top-level items and the CTA. Opens on hover
   for mice and on click/keyboard for everyone else - hover alone is unusable on
   touch and invisible to a keyboard. */
.navmenu{ position:relative; }
.navmenu-btn{
  display:inline-flex; align-items:center; gap:5px;
  font-family:inherit; font-weight:700; font-size:15px; color: var(--walnut);
  background:none; border:0; padding:0; cursor:pointer;
}
.navmenu-btn svg{ width:13px; height:13px; transition: transform var(--fast) var(--out); }
.navmenu-btn:hover{ text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:5px; }
.navmenu-panel{
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(-6px);
  display:flex; flex-direction:column; min-width:210px; padding:8px;
  background: var(--cream); border: var(--bd) solid var(--walnut); border-radius:14px;
  box-shadow: var(--drop) var(--drop) 0 var(--walnut);
  opacity:0; visibility:hidden; z-index:60;
  transition: opacity var(--fast) var(--out), transform var(--fast) var(--out), visibility 0s linear var(--fast);
}
.navmenu-panel a{ padding:9px 12px; border-radius:9px; font-size:15px; white-space:nowrap; }
.navmenu-panel a:hover{ background: var(--sun); text-decoration:none; }
.navmenu:hover .navmenu-panel,
.navmenu:focus-within .navmenu-panel,
.navmenu-btn[aria-expanded="true"] + .navmenu-panel{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); transition-delay:0s;
}
.navmenu:hover .navmenu-btn svg,
.navmenu-btn[aria-expanded="true"] svg{ transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce){ .navmenu-panel{ transition:none; } }

/* ---------- mobile menu (<=860px) ----------
   The bar used to be a flat `display:none` here, which left a phone with NO way
   to reach Auctions / Alerts / Refunds / How / Shipping / FAQ / About from the
   header - only a "Bid now" button that leaves the site. Caught 2026-09-02 in
   the pre-promotion pass.

   The panel REUSES .navlinks rather than duplicating the markup: the Help
   dropdown is flattened in place (.navmenu -> display:contents, its button
   hidden, its panel turned into a plain static list), so a link added to the
   nav partial shows up on mobile automatically and the two can never drift.

   No-JS: the toggle is hidden and the links fall back to a wrapped row, so the
   header still navigates with scripting off. */
.navtoggle{ display:none; }
@media (max-width:860px){
  html.js .navtoggle{
    display:inline-flex; align-items:center; justify-content:center;
    /* The SAME box as the Bid now pill - height, stroke, hard shadow - so the two
       read as a matched pair either side of the wordmark. Braden, 2026-09-10: "I
       want the dialog box and the Bid Now button to be the same size on the nav bar
       so it looks like it's supposed to be there." */
    width:42px; height:42px;
    background: var(--cream); color: var(--walnut);
    border: var(--bd) solid var(--walnut); border-radius:12px;
    box-shadow: var(--drop) var(--drop) 0 var(--walnut);
    padding:0; cursor:pointer; flex:0 0 auto;
  }
  /* DOM order is brand, toggle, links, CTA (the panel is revealed with a
     general-sibling selector, which only reaches FORWARD). `order` puts the
     toggle back on the right of the CTA where a thumb expects it. */
  /* Braden, 2026-09-10: "the nav looks jacked and the bid now button is in a weird
     spot." It sat wedged between the wordmark and the burger, so the one button the
     hero's whole gag points at was the SECOND thing from the corner. The burger
     moves to the left edge (where a drawer control lives in most phone apps) and
     Bid now takes the corner, the same corner it owns on desktop. */
  /* A three-column grid, not flex: the wordmark sits in the exact centre of the bar
     regardless of the burger and the pill being different widths. Braden,
     2026-09-10: "bring the word mark back to the top, and put it in the center." */
  html.js .nav{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:8px; }
  /* grid-row is NOT optional: the brand precedes the burger in the DOM, so once it
     lands in column 2 the auto-placement cursor has passed column 1 and the burger
     gets bumped to a second row - the wordmark sat alone above the two buttons. */
  html.js .navtoggle{ grid-column:1; grid-row:1; justify-self:start; }
  html.js .brand{ grid-column:2; grid-row:1; justify-self:center; margin:0; }
  html.js .nav .btn{ grid-column:3; grid-row:1; justify-self:end; }
  .navtoggle-bars{ display:block; width:19px; height:14px; position:relative; }
  .navtoggle-bars span{
    position:absolute; left:0; width:100%; height:2.5px; border-radius:2px;
    background: currentColor; transition: transform var(--fast) var(--out),
                opacity var(--fast) var(--out);
  }
  .navtoggle-bars span:nth-child(1){ top:0; }
  .navtoggle-bars span:nth-child(2){ top:5.75px; }
  .navtoggle-bars span:nth-child(3){ top:11.5px; }
  /* open = an X, so the control reads as a toggle and not a second "menu" */
  .navtoggle[aria-expanded="true"] .navtoggle-bars span:nth-child(1){ transform: translateY(5.75px) rotate(45deg); }
  .navtoggle[aria-expanded="true"] .navtoggle-bars span:nth-child(2){ opacity:0; }
  .navtoggle[aria-expanded="true"] .navtoggle-bars span:nth-child(3){ transform: translateY(-5.75px) rotate(-45deg); }

  /* the panel itself */
  html.js .navlinks{
    position:absolute; top:calc(100% - 6px); left:0; right:auto;   /* under the burger, which is now on the LEFT */
    display:flex; flex-direction:column; align-items:stretch; gap:2px;
    min-width:min(268px, calc(100vw - 2 * var(--pad)));
    padding:8px; z-index:60;
    background: var(--cream); border: var(--bd) solid var(--walnut); border-radius:16px;
    box-shadow: var(--drop) var(--drop) 0 var(--walnut);
    opacity:0; visibility:hidden; transform: translateY(-6px);
    transition: opacity var(--fast) var(--out), transform var(--fast) var(--out),
                visibility 0s linear var(--fast);
  }
  html.js .navtoggle[aria-expanded="true"] ~ .navlinks{
    opacity:1; visibility:visible; transform:none; transition-delay:0s;
  }
  .navlinks a{ padding:11px 12px; border-radius:10px; font-size:16px; }
  .navlinks a:hover{ background: var(--sun); text-decoration:none; }
  .navlinks a[aria-current="page"]{ background: var(--sun); text-decoration:none; }

  /* flatten the Help dropdown into the same list */
  .navmenu{ display:contents; }
  .navmenu-btn{ display:none; }
  .navmenu-panel{
    position:static; transform:none; opacity:1; visibility:visible;
    display:flex; min-width:0; padding:0; margin:0;
    background:none; border:0; border-radius:0; box-shadow:none; transition:none;
  }
  .navmenu-panel a{ white-space:normal; }

  /* JS off: the toggle is dead weight (base rule keeps it display:none), so the
     links have to stand on their own. Naively un-hiding them stacked into a ~450px
     column that shoved the hero off-screen, because .navmenu-panel is a COLUMN and
     display:contents had made it a flex item of the bar. Fix: flatten the panel too
     (display:contents), then drop the whole set onto its own full-width second row
     under the brand, wrapping like a normal link list. */
  html:not(.js) .nav{ flex-wrap:wrap; row-gap:10px; }
  html:not(.js) .navlinks{
    order:4; width:100%; flex-direction:row; flex-wrap:wrap;
    gap:9px 17px; padding:0; font-size:14.5px;
  }
  html:not(.js) .navmenu-panel{ display:contents; }
  html:not(.js) .navlinks a{ padding:2px 0; border-radius:0; font-size:14.5px; }
}
@media (max-width:860px) and (prefers-reduced-motion: reduce){
  html.js .navlinks{ transition:none; }
  .navtoggle-bars span{ transition:none; }
}

/* ---------- the fold: nav + hero + ticker fill the first screen ----------
   Braden 2026-08-24: "I want the landing page to be full frame." The fold is a
   flex column; the hero grows to fill, the ticker closes the frame at the
   bottom. 31px = the preview banner - switch to 100svh when it's deleted. */
/* NB: no overflow-x here. Setting overflow-x:clip forces overflow-y to compute as
   auto (a visible/clip pair is not allowed), which cropped Buck's hooves off at the
   bottom of the fold. Horizontal overflow is contained on <body> instead. */
/* Was `calc(100svh - 31px)` - the 31px paid for the design-preview banner that used
   to sit above it. The banner is gone (2026-09-10), so the fold gets the whole
   screen back and the hero is no longer 31px short of a full phone screen. */
.fold{ min-height: 100svh; display:flex; flex-direction:column;
  /* CLIP on the x axis at every width, not hidden: Buck's measured hoof shift can
     land him a few px past the right edge (+10px at 1100 wide, +7 on a phone once
     the button shrank), and hidden would make the fold a scroll container. */
  overflow-x: clip; }
/* Phones: one full screen of green too, the logo strip just below it (2026-09-30; --tick-h is
   the strip's height, set by site.js). Desktop has its own rule further down. */
@media (max-width:900px){ .fold{ min-height: calc(100svh + var(--tick-h, 0px)); } }
.fold .hero{ flex:1; display:flex; padding-bottom: clamp(20px,3vw,36px); }
/* LARGE screen height, not small (Braden, 2026-09-30: "the whole bottom of the hero section on
   mobile is supposed to be that green color"). iPhone Safari now draws the page UNDER its
   see-through bottom toolbar, so on first load the screen is 100lvh tall, not 100svh - and the
   cream logo strip, parked at 100svh, sat in that bottom band. The fold now runs to 100lvh, and
   the gap (lvh - svh, 0 on phones without a sliding bar) is added as grass under the buttons,
   so the buttons stay above the toolbar exactly where they were. It MUST sit after the plain
   `.fold .hero` padding rule: same specificity, so the later one wins, and on 2026-09-30 it sat
   before it - the grass never got added and the second button slid under Safari's toolbar. */
/* 100lvh was NOT enough (Braden, 2026-09-30, screenshot: "It should be green all the way down
   the phone"). On iOS 26 Safari the floating toolbar sits OUTSIDE both svh and lvh - the page
   just keeps drawing below the viewport, under the glass - so lvh - svh is 0 there and the cream
   strip still showed through. Fix: a fixed 120px green skirt below the screen (the glass bar plus
   home-indicator is ~100px), or the lvh gap if that is ever bigger. Viewport units alone cannot
   reach under that toolbar; do not go back to them. */
@media (max-width:900px){
  .fold{ min-height: calc(100svh + var(--tick-h, 0px) + 120px); }
  .fold .hero{ padding-bottom: calc(clamp(20px,3vw,36px) + 120px + var(--edge-reserve, 0px)); }
}
@supports (height:100lvh){
  @media (max-width:900px){
    .fold{ min-height: calc(100svh + var(--tick-h, 0px) + max(120px, 100lvh - 100svh)); }
    .fold .hero{ padding-bottom: calc(clamp(20px,3vw,36px) + max(120px, 100lvh - 100svh) + var(--edge-reserve, 0px)); }
  }
}
/* --edge-reserve (site.js, 2026-10-20): iOS 26 Safari reports the whole screen as 100svh but
   hides ~150px of it behind the status bar and the glass toolbar. The fold keeps its height
   (green still runs under the toolbar); only the buttons rise above it. */
.fold .hero .hero-grid{ width:100%; align-items:stretch; }
.fold .hero .hero-copy{ display:flex; flex-direction:column; justify-content:center; }

/* The status chip in the top-left of the hero - the air under the menu button on a
   phone was empty, and this is the one true thing worth putting there. */
.hero-kicker{ display:none !important; }
.hero-kicker-old{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  font-family: var(--body); font-size:14px; letter-spacing:normal; text-transform:none;
  color: var(--walnut); background: var(--cream); border: 2px solid var(--walnut); border-radius:999px;
  padding:7px 12px 7px 10px; margin:6px 0 0;
}
.hero-kicker i{ width:8px; height:8px; border-radius:50%; background: var(--secondary); box-shadow:0 0 0 0 rgba(47,107,79,.7); animation: livepulse 2.2s infinite; }
.hero-kicker.idle i{ background: var(--sun); animation:none; }
.hero-kicker[hidden]{ display:none; }
@media (min-width:901px){ .hero-kicker{ margin-bottom:18px; } }

/* The headline is five <span class="ln"> words. On a phone each is its own line
   (see the phone block); on desktop they read as three lines with a break after
   "lot" and after "at a" - the same headline it always was. */
.hero h1 .ln{ display:inline; }
.hero h1 .ln + .ln::before{ content:" "; }
.hero h1 .ln:nth-child(2)::after, .hero h1 .ln:nth-child(4)::after{ content:"\A"; white-space:pre; }
/* ---------- homepage hero ---------- */
/* padding-BLOCK, not the 4-value shorthand: this element is `class="wrap hero"`,
   and `padding: x 0 y` re-set the inline axis to 0, throwing away the --pad
   gutter .wrap gives every other section. Only visible below --col (1140px),
   where .wrap has no centering margin left to fake a gutter with - i.e. on
   every phone and tablet. Fixed 2026-09-03. */
.hero{ padding-block: clamp(28px,5vw,60px) clamp(34px,5vw,64px); }
.hero .sub{
  font-size: clamp(17px,2vw,20px); font-weight:400; color: var(--walnut-70);
  /* 48ch, not 56 (2026-09-17): the paragraph's right edge is the wall the background
     ranges have to climb out from behind, and at 56ch it stood so close to Buck that a
     ridge could only cross the ground line right at his hooves - which reads as him
     standing on two hills. A shorter measure is better typography anyway. */
  max-width:48ch; margin:22px 0 32px; line-height:1.5;
}
.hero h1{ margin-top:20px; }
.hero .rust{ color: var(--rust); }
.ctas{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* The hero CTA is the single most important control on the site, so it scales with
   the page instead of sitting at a fixed 17px while the headline grows to 118px.
   Braden 2026-08-24: "the main call to action could be bigger... it needs to be able
   to scale well". Only the HERO buttons grow - nav and in-page CTAs stay compact. */
.hero .ctas .btn{
  /* Scaled back 2026-08-25: 22px / 84px tall overpowered the hero. They grow
     with the page but stay clearly secondary to the headline. */
  font-size: clamp(16px, 1.05vw, 18px);
  padding: clamp(14px,1.05vw,17px) clamp(24px,1.9vw,30px);
}
.hero .ctas .btn svg{ width:16px; height:16px; }

/* Buck now has a JOB, not just a spot: he is straining for the Bid now button in
   the nav and never quite reaching it. That only reads if the button sits just
   above his hoof, so he hangs from the TOP of his column, hugs the right edge,
   and is pulled upward toward it. Nothing is drawn above him in the clip itself -
   the button IS the thing he is reaching for. */
.hero-grid{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,.62fr);
  gap: clamp(8px,2vw,28px); align-items:start;
}
/* He reaches TOWARD the button, never over it - a mascot whose arm covers the CTA
   is worse than no mascot. His hoof stops just below the nav so the button stays
   fully legible and clickable, and the gap is the joke. */
.hero-buck{
  align-self:start;
  margin-top: clamp(-40px,-2.4vw,-8px);   /* clear of the button, still reaching for it */
  position:relative; z-index:1;           /* behind the nav */
}
.hero-buck img, .hero-buck video{
  /* --hero-buck-w, not --buck-w: Braden, 2026-09-17: "make Buck smaller and make him go
     up higher, and maybe make it seem like he's further back". The other Bucks on the page
     (alerts band, consign band, how-it-works) keep --buck-w. */
  display:block; width:100%; max-width: var(--hero-buck-w, var(--buck-w)); height:auto;
  /* The clip's ground is baked to bone, but video decodes through limited-range
     bt709 and lands a shade lighter than the page - a faint rectangle around him
     in every screenshot. `darken` keeps each pixel only where it is darker than
     the page behind it: his linework and fills survive, the ground vanishes. */
  mix-blend-mode: darken;
  /* Smaller on purpose, for two reasons that point the same way. At 430px he stood
     807px tall in about 779px of hero - he did not fit, which is why he read as
     oversized. And a 554px asset shown at 350px downsamples 0.63x instead of 0.77x,
     which is what actually makes the linework crisp: the browser is throwing pixels
     away rather than stretching them. Braden 2026-08-24: "still fuzzy... he could be
     a tad smaller he is huge on the hero". Both complaints, one fix. */
  margin: 0 0 0 auto;
  /* His raised hoof sits at 65% across the clip (measured, not guessed), while the
     Bid now button's centre is only ~49px in from the container's right edge. So a
     right-aligned Buck lands his hoof well left of the button - he has to OVERHANG
     the column to line up. .fold clips the overflow so this can never produce a
     horizontal scrollbar. The numbers are MEASURED, not guessed: at 1440px this puts
     his hoof within a few px of the button's centre and ~6px below its bottom edge.
     The clip is cropped to 496px wide (the dead background right of his arm removed),
     which put his hoof at 74% of the frame instead of 65% and cut the overhang from
     46px to 9px - far less to contain. */
  /* Align his hoof to the button with a formula, not a magic number.
     His hoof sits at 65.8% across the clip (measured), so it is 34.2% of his own
     width in from his right edge. The button's centre is half a button-width in from
     the SAME container edge. So the shift is: 34.2% of Buck - half a button.
     Using vw here was the bug: the container stops growing at 1140px while a vw shift
     keeps growing, so they lined up at one window width and drifted at every other. */
  transform: translateX(var(--buck-shift, calc(34.2% - 49px)));
  transform-origin: 62% 92%;
  animation: none;
  transition: transform var(--mid) var(--pop);
}
/* The webp carries its own motion - never stack the CSS breathe on top. */
.hero-buck > img.buck-loop{ animation:none; }
@keyframes buck-breathe{
  0%,100%{ transform: translateX(var(--buck-shift, calc(34.2% - 49px))) rotate(0deg); }
  50%    { transform: translateX(var(--buck-shift, calc(34.2% - 49px))) rotate(-.6deg) translateY(-5px); }
}
.hero.buck-perk .hero-buck img, .hero.buck-perk .hero-buck video{
  animation-play-state: paused;
  transform: translateX(var(--buck-shift, calc(34.2% - 49px))) rotate(-3deg) translateY(-8px) scale(1.02);
}
/* PHONES: he keeps his job. -----------------------------------------------------
   The mobile hero used to collapse to one column and park Buck underneath the
   buttons, centred, at 210px, with the reaching transform switched off. So on the
   device 71% of our traffic uses, the one thing the whole hero is built around -
   a horse straining for the Bid now button and never quite getting it - was a
   horse standing on his own under some text, reaching for nothing. Braden,
   2026-09-10: "he needs to be jumping and reaching that Bid Now button, like
   trying to reach it, because that's what he's doing on desktop."

   He does NOT get his own column here. That was the first attempt and it fails on
   arithmetic: "Every lot" sets about 237px wide at the hero's 44px floor, and a
   column beside a 129px Buck leaves 219px, so every headline line was clipped by
   .fold's overflow. A phone cannot hold a shouting headline and a tall mascot side
   by side.

   So he goes BEHIND the headline instead, which is the choreography law anyway -
   Buck treats the UI as scenery and overlap is what creates depth. The headline
   keeps its full size and full width; he fills the empty right-hand air beside its
   three short lines, rising out from under the nav toward the button. Only the
   sub-paragraph is narrowed, to keep prose off his body. */
@media (max-width:900px){
  :root{ --buck-w: 182px; }
  /* overflow-x CLIP, not hidden: Buck's measured hoof shift can land a few px past
     the right edge (it went +7px the moment the button shrank to "Bid"), and a
     hidden value would make the fold a scroll container. clip just cuts. Found as a
     398px document on a 390px phone, 2026-09-10. */
  .hero{ position:relative; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-copy{ position:relative; z-index:2; }        /* text always over him */
  /* The sub needs no narrowing now: he is pulled up under the button and ends
     about 40px above where the paragraph starts, so prose never sits on him. The
     headline is the only thing he overlaps, which is the choreography law working
     as intended - "in heroes he bleeds into the headline's bounding box, never
     floats in his own empty column". */

  /* Hero Buck only: 160, not the 182 every other phone Buck keeps. Braden, 2026-09-19:
     the hoof must reach the "Bid" button AND "I don't want him coming off the site."
     His tail sits 131/420 of his width to the right of the raised hoof and the button
     centre is only 40px from the screen edge, so at 182 he either missed by 19px or lost
     his tail off the edge. 160 lands the hoof under the button with all of him on screen.
     Smaller than ~150 and the hill climbs into "buck." - do not keep shrinking to chase 0. */
  /* 2026-09-20, Braden again: "make Buck smaller again... I don't want his tail to even be
     touching the side of the screen. I want there to be some good margin there." 140, with
     the tail held a full page-gutter (18px) off the edge by site.js. */
  .hero{ --buck-w: 140px; }
  .hero-buck{
    position:absolute; right:0; z-index:1; margin:0;
    /* Up under the button, not floating in the middle of the copy. The negative top
       pulls his raised hoof to within ~15px of the button's bottom edge, which is
       the same distance desktop leaves - close enough to read as straining, far
       enough that he never covers it. */
    top: clamp(-26px,-4vw,-10px);
    width: var(--buck-w); pointer-events:none;
  }
  /* And the headline starts BELOW his head. Otherwise his face sits behind "Every
     lot" and the two fight; with this, only his torso and legs run behind the right
     edge of the type, which is the same relationship desktop has. */
  /* Bigger, and set off ONE rhythm. Braden, 2026-09-10: "the words on the hero
     could go taller and bigger... there is just a lot of dead space there, I wanna
     make sure spacing is consistent." The headline was pinned to the 44px floor of
     --hero on every phone; it now scales with the screen (58px at 390) and the
     three gaps below it - headline to paragraph, paragraph to buttons, button to
     button - are the same 20px. It still starts below his head; only his legs run
     behind the type. */
  /* The headline is FIVE short lines - "Every / lot / opens / at a / buck." - set as
     large as its own column allows, and Buck stands in the other column. Nothing
     overlaps any more (Braden, 2026-09-11: "buck is overlapping the every lot opens
     at a buck text... that text should be taller"). */
  .hero h1{ margin-top: clamp(10px,3vw,18px); font-size: clamp(46px,13.4vw,60px); line-height:.94; }
  .hero h1 .ln{ display:block; }
  /* The highlighted line must NOT be a block: the marker is a background image sized
     to the element, and a block is the whole column wide - the yellow ran 140px past
     "buck." (Braden, 2026-09-12: "the highlight on Buck on the hero is jacked").
     inline-block still takes its own line after block siblings, but shrinks to the
     word. */
  .hero h1 .ln.hl{ display:inline-block; }
  .hero h1 .ln + .ln::before, .hero h1 .ln::after{ content:none; }
  .hero-copy{ padding-right: calc(var(--buck-w) + 8px); }   /* his lane */
  .hero .sub, .hero .ctas{ margin-right: calc(-1 * (var(--buck-w) + 8px)); }   /* copy below him spans the full width */
  /* The copy no longer floats in the middle of the fold: the chip, the headline and
     the paragraph read as one block from the top, the buttons sit on the bottom, so
     there is no dead band under the menu button or under the buttons (Braden,
     2026-09-10). Whatever air a tall phone has left lands above the buttons. */
  .fold .hero .hero-copy{ justify-content:flex-start; }
  /* 18px is the FLOOR. site.js grows it (up to 22px) only while there is real spare room
     between the paragraph and the buttons on that particular screen - see "fill the air". */
  .hero .sub{ margin:20px 0 0; max-width:none; font-size:18px; line-height:1.5; }
  .hero .sub{ margin-right: calc(-1 * (var(--buck-w) + 8px)); }
  .hero .ctas{ gap:20px; margin-top:auto; padding-top:28px; padding-bottom:6px; }
  .hero-buck img, .hero-buck video{
    display:block; width:100%; max-width:none; height:auto; margin:0;
    /* --buck-shift is MEASURED by site.js against the real button box. Desktop can
       use a constant because the container stops growing at 1140px; on a phone the
       button, the burger and the gutter all scale, and the distance from the right
       edge to the button's centre ran 137px at 360 wide, 152px at 390 and 171px at
       430 - so any single number is wrong at two of those three. The fallback is
       the 390px case so a no-JS phone still looks deliberate. */
    transform: translateX(var(--buck-shift, calc(34.2% - 152px)));
    transform-origin: 62% 92%;
  }
  /* No CSS motion on the box itself. Braden, 2026-09-11: "the video should be static
     and not move, just the playing of the video should move." A hop (translate +
     rotate on the whole element) used to live here. */
}
@media (prefers-reduced-motion: reduce){
  .hero-buck video, .hero-buck img{ animation:none; }
}

/* ---------- subpage hero: same voice, smaller stage ---------- */
/* same shorthand bug as .hero above - `class="wrap page-hero"`. Fixed 2026-09-03. */
.page-hero{ padding-block: clamp(26px,4.5vw,52px) clamp(28px,4.5vw,54px); }
.page-hero .grid{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,.40fr);
  gap: clamp(8px,2vw,28px); align-items:end;
}
.page-hero h1{ font-size: clamp(38px,6.4vw,72px); }
.page-hero .sub{
  font-size: clamp(16px,1.9vw,19px); color: var(--walnut-70);
  max-width:54ch; margin:18px 0 0; line-height:1.5;
}
.page-hero .buck{ align-self:end; }
.page-hero .buck img{
  width:100%; max-width: var(--buck-w); height:auto; margin:0 0 -4px auto;
  transform-origin:50% 95%;
  animation: none;   /* was buck-breathe: the box rocked on an axis (Braden, 2026-09-11) */
}
@media (max-width:760px){
  .page-hero .grid{ grid-template-columns:1fr; }
  .page-hero .buck img{ max-width: var(--buck-w); margin:12px auto 0; }
}

/* ---------- the peek-a-boo gag ------------------------------------------------
   Buck pops up from BEHIND an edge (a lot card, the footer, a page title): a
   window whose bottom edge sits a few px below the host's top border, overflow
   hidden, and Buck rises inside it. Hooves land ON the border = the grip.
   Pointer-events none: the gag never intercepts a click. */
.peekwrap{ position:relative; }
/* Buck's card sits inside this wrapper, so the grid stretched the WRAPPER and left
   the card at its own height - one short card in the row (Braden, 2026-09-30: "I
   want all of these lot cards to be the same length"). Stretch the card to fill. */
.lots > .peekwrap{ display:flex; flex-direction:column; }
.lots > .peekwrap > .lot{ flex:1; }
.peek-window{
  /* Geometry is DERIVED, not eyeballed. The clip is square (480x480) and Buck's
     hooves drape ~27 source-px below the grip point, i.e. 13.5px at half scale.
     So: window bottom sits 13px INTO the card, which lands the grip point exactly
     on the card's top border and lets the hooves hang over it (the whole gag).
     Height must exceed the rendered video height (= width, it's square) or the
     window clips the top of his HAT - it clipped 8px before this was fixed. */
  position:absolute; bottom:calc(100% - 13px); left:50%;
  width:min(240px, 86%); height:258px; margin-left:calc(min(240px,86%) / -2);
  overflow:hidden; pointer-events:none; z-index:3;
}
/* When the browser can play alpha webm (Chrome/Edge/Firefox/Android), site.js swaps
   the still for the climb CLIP: Buck physically climbs up from behind the edge.
   The hidden state lives INSIDE the video (fully transparent frames), so the video
   itself never moves - no CSS transform, just segment playback. */
.peek-window video{
  position:absolute; bottom:0; left:0; width:100%; height:auto;
}
.peek-window.has-clip img{ display:none; }
/* WebKit path (iPhone/Safari can't render VP9 alpha): the still is swapped for an
   ALPHA animated webp that plays the climb itself - so the img must sit parked
   in place with no CSS transform fighting the baked-in motion. */
.peek-window img.clip-playing{
  transform:none !important; transition:none !important;
}
.peek-window img{
  position:absolute; bottom:0; left:0; width:100%;
  transform: translateY(103%);
  transition: transform 260ms var(--out);
}
.peekwrap:hover .peek-window img,
.peekwrap.peeked .peek-window img{
  transform: translateY(0) rotate(-2deg);
  transition: transform 340ms var(--pop);
}
/* no-JS + reduced motion: Buck is simply there, parked */
html:not(.js) .peek-window img{ transform:none; }
@media (prefers-reduced-motion: reduce){
  .peek-window img{ transform:none; transition:none; }
}


/* ---------- ticker: a rodeo announcer strip. Pure CSS, pauses on hover ------- */
/* Brands that have crossed the block: a wall of real marks, one even row, on its
   own band directly UNDER the fold. Braden, 2026-09-10: "I don't like the carousel. I
   want logos and I don't want it seen on the hero." Every mark is rendered walnut at
   the same height with the same gap, the Lyssna / Supabase logo-wall pattern, so a
   wordmark and a badge read as one set. Nominative use: we sold these brands. */
.ticker{
  background: var(--cream); color: var(--walnut);
  border-top: var(--bd) solid var(--walnut); border-bottom: var(--bd) solid var(--walnut);
  overflow:hidden; white-space:nowrap; padding: 22px 0;
}
.ticker-k{
  display:block; text-align:center;
  font-family: var(--body); font-size:14px; letter-spacing:normal; text-transform:none;
  color: var(--walnut-70); margin-bottom:14px;
}
.ticker-track{ display:flex; align-items:center; gap: clamp(34px,5vw,64px); width:max-content; animation: ticker 96s linear infinite; }
.ticker:hover .ticker-track{ animation-play-state: paused; }
.ticker-track img{
  /* --s is an OPTICAL scale per mark. A wall set to one height makes a wide
     wordmark (KOHLER, KitchenAid) shout and a compact one (Samsung, Siemens,
     Maytag) whisper; logo walls balance visual weight, not pixel height. */
  display:block; flex:none; height: calc(clamp(22px,3.2vw,32px) * var(--s,1)); width:auto; max-width:160px;
  /* every source mark is a different colour; one filter makes them all walnut */
  filter: brightness(0) saturate(100%) invert(11%) sepia(28%) saturate(1200%) hue-rotate(345deg) brightness(92%);
  opacity:.9;
}
.ticker-track span, .ticker-track span::after{ display:none; }
@keyframes ticker{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ---------- stat band (inverted) ---------- */
/* The walnut numbers band under the hero is retired (Braden, 2026-09-10: "I also
   don't like the number section below it"). Rules kept for the count-up module,
   which still runs wherever a .stats block exists on a subpage. */
.stats{ background: var(--walnut); color: var(--bone); padding: clamp(26px,4vw,44px) 0; }
.stats .grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap:26px; }
.stats .n{
  font-family: var(--data); font-weight:700; font-size: clamp(30px,4.4vw,50px);
  color: var(--cream); line-height:1; font-variant-numeric: tabular-nums;
}
.stats .l{
  font-family: var(--body); font-size:14px; letter-spacing:normal; text-transform:none;
  color: var(--bone-72); margin-top:9px;
}

/* ---------- lots ---------- */
.lots-sec{ padding-block: clamp(40px,6vw,76px); }
.sechead{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:28px; }
.sechead p{ margin:8px 0 0; color: var(--walnut-70); max-width:44ch; }
.lots{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:20px; }
.lot{
  background: var(--cream); border: var(--bd) solid var(--walnut); border-radius:20px;
  overflow:hidden; box-shadow: var(--drop) var(--drop) 0 var(--walnut);
  display:flex; flex-direction:column;
  transition: transform var(--fast) var(--out), box-shadow var(--fast) var(--out);
}
.lot:hover{ transform: translateY(-4px); }
/* The PEEK card never lifts. Braden 2026-08-24: "when i hover on that card it moves
   up in a little micro animation. the card needs to stay still or you're going to
   have to move buck up more to account for the card moving up." Exactly right - the
   card is Buck's ledge, so lifting it 4px slides the ledge out from under his hooves
   at the same moment he arrives. The ledge holds still; Buck does the moving. */
.peekwrap:hover .lot{ transform:none; }
/* Braden, 2026-09-17: "the lot cards need to make the products more visible."
   Two things were hiding the goods: a 4/3 window (short) and object-fit:cover
   (which CROPS - most of our photos are portrait retailer shots, so the top and
   bottom of the chair/vac/panel were sliced off). Square window + contain =
   the whole product, nothing cut, ~33% more image height per card. */
.lot .ph{
  aspect-ratio: 1/1; background: var(--bone);
  border-bottom: var(--bd) solid var(--walnut);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.lot .ph .num{
  font-family: var(--body); font-size:14px; color: var(--walnut-70);
}
/* lot state rides on the meta line below the price - never a badge */
.lot .body{ padding:15px 17px 18px; display:flex; flex-direction:column; gap:9px; flex:1; }
.lot .t{ font-weight:700; font-size:15.5px; line-height:1.3; margin:0; }
.lot .meta{ font-family: var(--body); font-size:14px; color: var(--walnut-70); margin:0; }
.lot .meta.urgent{ color: var(--walnut); font-weight:700; }
.lot .foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-top:auto; }
.lot .price{
  font-family: var(--data); font-weight:700; font-size:34px; color: var(--secondary);
  line-height:1; font-variant-numeric: tabular-nums;
  /* GREEN numbers. Braden, 2026-09-12: "those numbers could be green, not just the
     sold." Every lot price on the site - homepage, browse grid, refund rails - and
     the refund amount. The urgent "closes in 4 min" line beside it is walnut, not
     rust, so green never sits next to orange. */
  transition: transform var(--fast) var(--pop); display:inline-block;
}
.lot:hover .price, .peekwrap:hover .price{ transform: scale(1.08); }
.lot .bids{ font-family: var(--body); font-size:14px; letter-spacing:normal; text-transform:none; color: var(--walnut-70); }

/* live cards: the whole card is the link to its HiBid lot page */
a.lot{ text-decoration:none; color:inherit; cursor:pointer; }
.lot .ph img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block;
  /* white, not bone: retailer photos are shot on white, so a contained photo melts
     into the window instead of sitting in a visible rectangle. The padding keeps the
     product off the card's walnut border. */
  background:#fff; padding:10px; box-sizing:border-box;
}
/* the window turns white too, or the contain letterbox reads as a bone frame */
.lot .ph.has-img{ background:#fff; }
/* once a photo lands, the lot number rides it as a legible tag (data, not decor) */
.lot .ph.has-img .num{
  position:absolute; left:10px; top:10px; z-index:1;
  background: var(--cream); border: 1px solid var(--walnut); border-radius:8px;
  padding:3px 8px; color: var(--walnut);
}
.lot .meta.closed{ color: var(--walnut-70); }
/* Green, in minute amounts, and only where it MEANS something (Braden, 2026-09-12): a lot
   that sold, the live dot, an approved refund. --secondary's job was always status. */
.lot .meta.sold{ color: var(--secondary); font-weight:700; }
/* (prices are green everywhere now, so a green Sold under one is green on green) */
.rail-label::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background: var(--secondary); margin:0 8px 1px 0; vertical-align:middle; }
.rail-label.idle::before{ background: var(--sun); }

/* PHONES: the four homepage lots are a 2x2 GRID, not a stack ------------------
   Braden, 2026-09-10: "on those four lots that it's previewing, each one is the
   entire size of the phone. I just want it to be four in a 2x2 grid... That
   top-right one will have the buck pop up behind it."

   auto-fit/minmax(220px) cannot do this: 220px x2 does not fit a 390px screen, so
   it collapsed to one column and each card ran the height of the phone. Four cards
   became four full screens of scrolling to see four lots. Fixed columns instead,
   and the card scales down with them.

   The 2x2 also fixes Buck's ledge for free. His peek assumes his card is in the
   grid's TOP row - true on desktop, false in a single column, where his 245px of
   body landed on the title and price of the card above (measured at every width
   from 360 to 760px). Two columns put row one back, and `order` moves his card to
   the TOP-RIGHT slot, which is the one Braden asked for and the only slot with
   nothing above it but open background. */
@media (max-width:779px){
  .lots{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }

  /* Buck's card takes the top-RIGHT slot. Order alone would put it first, so the
     first card is pulled ahead of it and the pair lands 1,2 across row one.
     paintHome() re-reads this computed order, so the top-priced lot still fills
     the card the eye reaches first. */
  .lots > .lot:first-child{ order:-2; }
  .lots > .peekwrap{ order:-1; }

  /* At ~170px wide the desktop card's type is out of proportion to its box. */
  .lot{ border-radius:14px; }
  .lot .body{ padding:10px 11px 12px; gap:6px; }
  .lot .t{
    font-size:13px; line-height:1.25;
    /* Two lines then ellipsis: lot titles run 60+ characters ("New One Trip 40ft
       High Cube Side Door Container") and would otherwise set the row height off
       the wordiest of the four. */
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .lot .price{ font-size:23px; }
  .lot .meta{ font-size:10px; }
  /* The bid count is the first thing to go when the card gets narrow - the price
     and the state are what a bidder is actually reading. */
  .lot .bids{ display:none; }
  .lot .foot{ gap:6px; }

  /* His head rises into the section intro above the grid, so the intro's paragraph
     stops short of the right-hand column - otherwise his hat sat on the end of
     "this is what the next one looks like" every time he came up. */
  .lots-sec .sechead p{ max-width:56%; }
  /* He is sized off HIS CARD, not the screen, so he grips its edge at any width. */
  .peek-window{
    --peek-w: 96%;
    width: var(--peek-w); height:auto; aspect-ratio: 1 / 1.11;   /* square clip + hat room */
    left:50%; margin-left: calc(var(--peek-w) / -2);
  }
}

/* ---------- how it works (pine band) ---------- */
/* SUN, not green. Braden, 2026-09-10: "my only concern is the green and orange is
   giving Mexico" - a green band above a cream one above a rust one is the flag, and
   once seen it cannot be unseen. Green's job in this palette was always STATUS
   (won / paid / ships), never a band, so this also puts the token back in its role.
   Yellow header/footer blocks are the Le Puzz move from the reference lock: loud,
   flat, pop-art, and warm alongside rust and walnut rather than tricolour. */
/* Braden, 2026-09-17: "on top of the yellow section there's no line dividing the
   colours like on all the other sections." Correct - .ticker/.give/.alerts/.consign
   all carry walnut rules top and bottom and this band carried none. Top rule only:
   the band below it (.alerts) already draws its own border-top, and two 3px rules
   meeting would read as a 6px bar. */
.how{ background: var(--sun); color: var(--walnut); padding: clamp(40px,6vw,76px) 0; position:relative; overflow:hidden;
  border-top: var(--bd) solid var(--walnut); }
.how h2{ color: var(--walnut); }   /* was cream - on the sun band that read as washed out */
.steps{ display:grid; grid-template-columns: 1fr; gap:26px; margin-top:30px; max-width:560px; }
/* Braden, 2026-09-12: "you didn't make the yellow section vertical." The three steps
   stack top to bottom at EVERY width with the rail running down beside the numbers,
   and on desktop Buck bids from the couch to the right of them - the words live
   around him. */
.how-in{ display:grid; grid-template-columns: minmax(0,1fr) auto; gap: clamp(20px,4vw,64px); align-items:center; }
.how-art img{ display:block; width: calc(var(--buck-w) * 1.45); max-width:100%; height:auto; }
.how h2{ max-width:none; }
@media (max-width:900px){
  .how-in{ grid-template-columns:1fr; }
  .how-art{ justify-self:center; margin-top:8px; }
  .how-art img{ width: calc(var(--buck-w) * 1.35); }
}
/* Couch Buck bidding, 2026-09-29: portrait, top-down, two stacked layers (see index.html).
   The moving layer sits exactly on the still; with reduced motion it is simply not shown. */
.how-art.couch-bid{ position:relative; width: var(--buck-w); max-width:100%; }
.how-art.couch-bid img{ width:100%; height:auto; }
.how-art.couch-bid .cb-move{ position:absolute; inset:0; }
/* Phones shrink --buck-w to 182px for a standing Buck; this art carries a whole couch, so Buck
   himself would be ~110px. Braden already called the couch Buck "too small" - give it its own size. */
/* The couch lives INSIDE .how-copy (so it can float on phones). Desktop: copy is its own grid,
   couch in a right column spanning the heading and the steps - the same picture as before. */
.how-in:has(.with-couch){ grid-template-columns: minmax(0,1fr); }
.how-copy.with-couch{ display:grid; grid-template-columns: minmax(0,1fr) auto; column-gap: clamp(20px,4vw,64px); align-items:center; }
.how-copy.with-couch > h2{ grid-column:1; grid-row:1; }
.how-copy.with-couch > .steps{ grid-column:1; grid-row:2; }
.how-copy.with-couch > .couch-bid{ grid-column:2; grid-row:1 / span 2; }
/* Phones (Braden, 2026-09-29): couch BIG and beside the steps, not below them. It floats right at
   about half the width; steps 1-2 wrap beside it and step 3 runs full width underneath, so the
   text never gets squeezed into a skinny column. .steps drops to block so its lines can wrap. */
@media (max-width:900px){
  .how-copy.with-couch{ display:flow-root; }
  .how-copy.with-couch > .couch-bid{ float:right; width: min(50%, 300px); margin: 22px 0 0 12px; justify-self:auto; }
  .how-copy.with-couch > .steps{ display:block; }
  .how-copy.with-couch > .steps > .step + .step{ margin-top:26px; }
}
/* The still has a HOLE where the tail swings (the moving layer draws the tail), so on its own
   Buck has no tail. Reduced motion hides the moving layer, so it gets the whole frame instead
   (Braden 2026-10-15: "it cutoff his tail and the shadow again it needs to stop that"). */
.how-art.couch-bid .cb-whole{ display:none; }
@media (prefers-reduced-motion: reduce){
  .how-art.couch-bid .cb-move, .how-art.couch-bid .cb-still{ display:none; }
  .how-art.couch-bid .cb-whole{ display:block; }
}
.step .n{
  font-family: var(--data); font-weight:700; font-size:44px; color: var(--walnut); line-height:1;
  font-variant-numeric: tabular-nums;
}
.step h3{ font-family: var(--display); font-weight: var(--dw); font-size:24px; letter-spacing: var(--track); word-spacing:.14em; margin:12px 0 7px; }
.step p{ margin:0; color: var(--walnut-70); font-size:15.5px; }
/* Buck bids from the couch in the band's bottom-right corner - he IS step 2.
   height:auto is NOT optional: this is a <video> now, and a video with width/height
   ATTRIBUTES keeps its attribute height when CSS sets only the width - measured on prod,
   290px wide by 924px tall, which shoved him a third of a band above where he belongs.
   An <img> derives the height from the intrinsic ratio; a video does not. */
/* only when the viewport leaves real margin beyond the 1140px column - below
   that he lands on step 3's text */

/* ---------- journey rows (how page): step rows that alternate sides --------- */
.journey{ padding-block: clamp(36px,5vw,64px); }
.jrow{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,.38fr);
  gap: clamp(18px,4vw,48px); align-items:center;
  padding: clamp(24px,4vw,44px) 0;
  border-bottom: 2px solid rgba(51,32,15,.14);
}
.jrow:last-child{ border-bottom:0; }
.jrow.flip{ grid-template-columns: minmax(0,.38fr) minmax(0,1fr); }
.jrow.flip .jart{ order:-1; }
.jrow .jnum{
  font-family: var(--data); font-weight:700; font-size:15px; letter-spacing:.14em;
  color: var(--rust);
}
.jrow h3{ font-family: var(--display); font-weight: var(--dw); font-size: clamp(24px,3.2vw,36px); letter-spacing: var(--track); line-height:1.08; margin:10px 0 12px; }
.jrow p{ margin:0 0 10px; color: var(--walnut-70); max-width:52ch; }
.jrow .jart img{ width:100%; max-width: var(--buck-w); margin:0 auto; }
@media (max-width:700px){
  .jrow, .jrow.flip{ grid-template-columns:1fr; }
  .jrow.flip .jart{ order:0; }
  .jrow .jart img{ max-width: var(--buck-w); }
}

/* ---------- inverted callout band (the outbid moment, CTAs) ---------- */
.callout{ background: var(--walnut); color: var(--bone); padding: clamp(34px,5vw,60px) 0; position:relative; overflow:hidden; }
.callout h2{ color: var(--cream); }
.callout p{ color: var(--bone-72); max-width:56ch; }
.callout .inner{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,.34fr); gap:clamp(16px,3vw,40px); align-items:center; }
.callout .art img{ width:100%; max-width: var(--buck-w); margin:0 auto; }
@media (max-width:700px){ .callout .inner{ grid-template-columns:1fr; } .callout .art img{ max-width:180px; } }

/* ---------- coin band (/about) - a pose in a disc beside a line of copy ---------- */
.meal{
  background: var(--cream); color: var(--walnut);
  padding: clamp(30px,4.5vw,52px) 0;
  border-top: var(--bd) solid var(--walnut);
  border-bottom: var(--bd) solid var(--walnut);
}
.meal .disc{
  background: var(--bone); border:var(--bd) solid var(--walnut);
  border-radius:999px; padding:0 18px; flex:none;
  display:flex; align-items:flex-start; justify-content:center;
  overflow:hidden; width:clamp(120px,17vw,175px); height:clamp(120px,17vw,175px);
}
.meal .disc img{ width:96%; margin-top:10%; }
.meal .inner{ display:flex; align-items:center; gap:clamp(20px,4vw,44px); flex-wrap:wrap; }
.meal .copy{ flex:1; min-width:240px; }
.meal .eq{ font-family: var(--display); font-weight: var(--dw); font-size: clamp(24px,3.4vw,40px); letter-spacing: var(--track); line-height:1.1; margin:0; }
.meal .eq b{ color: var(--rust); font-weight:inherit; }
.meal p{ margin:12px 0 0; color: var(--walnut-70); max-width:46ch; font-size:15.5px; }

/* ---------- feeding america band (home) - built AROUND Buck ------------------
   Bone ground on purpose: it is the exact colour baked into buck-burger-loop.mp4 by
   make_hero_loop.py GROUND, so the clip's opaque rectangle vanishes into the band and
   he is simply standing there. Change this background and he gets his box back. */
.give{
  background: var(--bone); color: var(--walnut);
  border-top: var(--bd) solid var(--walnut);
  border-bottom: var(--bd) solid var(--walnut);
  padding: clamp(24px,2.6vw,34px) 0;  /* symmetric: equal air above and below Buck */
  overflow:hidden;
}
.give .ggrid{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,.58fr);
  gap: clamp(20px,3vw,40px); align-items:center;
}
.give .geq{
  font-family: var(--display); font-weight: var(--dw);
  font-size: clamp(27px,4.1vw,50px); letter-spacing: var(--track);
  line-height:1.08; margin:0; text-wrap:balance;
}
.give .geq b{ color: var(--rust); font-weight:inherit; }
.give .gcopy p{ margin:14px 0 0; color: var(--walnut-70); max-width:48ch; font-size:16px; line-height:1.55; }
/* Braden 2026-08-24: "I want the top of the section to be equdistant to the bottom of
   him." Centring the VIDEO BOX is not the same as centring BUCK - the clip carries
   unequal ground: measured over 72 frames, a median 39px above his hat and 12px below
   his hooves (of 856). Centre the box and he sits visibly low. translateY(-1.57%) is
   half that difference expressed against the video's own height, so it holds at every
   width. Verify by measuring his PIXELS against the band's rules, not the box. */
.give .gbuck{ align-self:center; }
.give .gbuck video, .give .gbuck img{
  display:block; width:100%; max-width: var(--buck-w); height:auto; margin:0 0 0 auto;
  transform: translateY(-1.57%);
}
/* Desktop keeps the two-column grid, Buck in column two. The markup now puts him
   FIRST (a float has to precede the text it wraps), so `order` walks him back to
   the right on wide screens. */
.give .gbuck{ order:2; }
/* PHONES: words AROUND him. Braden, 2026-09-10: "less of words then buck under. I
   want it to be buck and words around buck. I think I want the website to feel
   less structured but make sense." So the grid goes away and he becomes a float
   with an elliptical shape - the headline and the paragraph wrap his outline
   instead of stacking above him. The video's ground is baked to bone, which is
   this band's colour, so the rectangle he actually occupies is invisible. */
@media (max-width:780px){
  .give .ggrid{ display:block; }
  .give .gbuck{
    float:right; width: var(--buck-w);
    margin: -14px -4px 6px 14px;
    shape-outside: ellipse(46% 48% at 52% 52%); shape-margin: 10px;
  }
  .give .gbuck video, .give .gbuck img{ margin:0; max-width:none; }
  .give .gcopy{ padding-bottom: clamp(20px,4vw,28px); }
  .give .geq{ font-size: clamp(26px,7.4vw,34px); text-wrap: pretty; }
  .give .gcopy p{ max-width:none; }
  .give::after{ content:""; display:block; clear:both; }
}

/* ---------- FAQ accordion: native details, springy marker ---------- */
.faq-list{ display:grid; gap:14px; margin-top:30px; }
.qa{
  background: var(--cream); border:var(--bd) solid var(--walnut); border-radius:18px;
  box-shadow: var(--drop) var(--drop) 0 var(--walnut);
}
.qa summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:18px 22px;
  font-family: var(--display); font-weight: var(--dw); font-size: clamp(17px,2.2vw,22px);
  letter-spacing: var(--track);
  /* Chubbo's space is thin, and the tight track eats it at this size: "Why doeseverything"
     (caught 2026-09-29). Big headlines don't need it; anything display-face under ~30px does. */
  word-spacing: .14em;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{
  content:""; flex:none; width:16px; height:16px;
  background: var(--rust);
  clip-path: polygon(50% 0, 100% 40%, 68% 40%, 68% 100%, 32% 100%, 32% 40%, 0 40%);
  transform: rotate(180deg);
  transition: transform var(--mid) var(--pop);
}
.qa[open] summary::after{ transform: rotate(0deg); }
.qa .a{ padding:0 22px 20px; color: var(--walnut-70); }
.qa .a p{ margin:0 0 10px; max-width:64ch; }
.qa .a p:last-child{ margin-bottom:0; }
.qa .a strong{ color: var(--walnut); }

/* ---------- two-up info cards (shipping page) ---------- */
.twoup{ display:grid; grid-template-columns: repeat(auto-fit,minmax(290px,1fr)); gap:22px; margin-top:30px; }
.infocard{
  background: var(--cream); border:var(--bd) solid var(--walnut); border-radius:20px;
  box-shadow: var(--drop) var(--drop) 0 var(--walnut);
  padding: clamp(20px,3vw,30px);
}
.infocard h3{ font-family: var(--display); font-weight: var(--dw); font-size: clamp(22px,2.8vw,30px); letter-spacing: var(--track); margin:0 0 12px; }
.infocard p{ margin:0 0 10px; color: var(--walnut-70); }
.infocard .meta{ font-family: var(--body); font-size:15px; color: var(--walnut-70); margin:0 0 6px; }
.infocard .addr{ font-family: var(--body); font-size:16px; color: var(--walnut); margin:0 0 4px; }

/* ---------- forms (register + refunds share this) ---------- */
.formcard{
  background: var(--cream); border: var(--bd) solid var(--walnut); border-radius:20px;
  box-shadow: var(--drop) var(--drop) 0 var(--walnut);
  padding: clamp(22px,3.4vw,40px);
  position:relative;
}
.vform{ display:grid; gap: clamp(15px,2vw,18px); }
.vform[hidden]{ display:none; }   /* [hidden] must beat display:grid, or success can't hide the form */
.field{ display:grid; gap:6px; }
.field.row-2{ grid-template-columns:1fr 1fr; gap: clamp(14px,2vw,18px); }
@media (max-width:560px){ .field.row-2{ grid-template-columns:1fr; } }
.field label, .field .flabel{
  font-family: var(--body); font-size:14px; letter-spacing:normal; text-transform:none;
  color: var(--walnut-70);
  display:flex; justify-content:space-between; align-items:baseline; gap:8px;
}
.field label .opt, .field .hint{
  font-family: var(--body); font-size:12.5px; color: var(--walnut-70);
  text-transform:none; letter-spacing:0; opacity:.75;
}
.field input, .field textarea{
  font-family: var(--body); font-size:17px; color: var(--walnut);   /* >=16px: no iOS zoom */
  background: #fff; border:2px solid var(--walnut); border-radius:12px;
  padding:14px 15px; width:100%; min-height:52px;
  transition: box-shadow var(--fast) var(--out);
}
.field textarea{ min-height:108px; resize:vertical; line-height:1.45; }
.field input::placeholder, .field textarea::placeholder{ color: rgba(51,32,15,.38); }
.field input:focus, .field textarea:focus{
  outline:none; box-shadow: 0 0 0 3px var(--sun);
}
/* honeypot - hidden from people, catnip for bots */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-error{
  font-size:14.5px; color: var(--rust); font-weight:700;
  background: rgba(192,85,44,.08); border:2px solid var(--rust);
  border-radius:12px; padding:11px 14px; margin:0;
}
.form-error[hidden]{ display:none; }
.vform .btn[disabled]{ opacity:.65; cursor:progress; }
.reassure{
  display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:center;
  margin:10px 0 0; padding:0;
  font-family: var(--body); font-size:14px; letter-spacing:normal; text-transform:none;
  color: var(--walnut-70);
}
.reassure span{ display:inline-flex; align-items:center; gap:7px; }
.reassure .dot{ width:5px; height:5px; border-radius:50%; background: var(--rust); }
.finelegal{
  font-size:12.5px; line-height:1.55; color: var(--walnut-70); text-align:center;
  margin:14px auto 0; max-width:60ch;
}
.finelegal a{ color: var(--rust); display:inline-block; padding:8px 3px; margin:-8px -1px; }

/* success / verdict stage inside a formcard */
.stage[hidden]{ display:none; }
.stage{ text-align:center; padding: clamp(8px,2vw,16px) 0; }
.stage .stage-buck{ width: var(--buck-w); margin:0 auto 14px; }
.stage h2{ font-family: var(--display); font-weight: var(--dw); letter-spacing: var(--track); font-size:clamp(28px,4.6vw,44px); line-height:1.05; margin:0 0 12px; }
.stage p{ font-size:17px; color: var(--walnut-70); max-width:44ch; margin:0 auto 16px; }
.stage .amount{
  display:inline-block; margin:2px 0 10px; font-family: var(--data); font-weight:700;
  font-size: clamp(30px,5.4vw,44px); color: var(--secondary); font-variant-numeric: tabular-nums;
  color: var(--secondary);
}
.stage .stage-btns{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* ---------- footer: three bands, one job each ---------------------------------
   1. .joinband - THE ASK. SMS consent is the whole Phase-1 objective, so it gets
      the loudest slot in the footer instead of a bordered box in column four.
      Borrowed rail language from .ticker (rust field, walnut rules) so it reads
      as the same system rather than a stray CTA bolted on the end.
   2. .fgrid    - THE MAP. Flat sitemap: everything the nav folds into "Help" is
      plainly listed, because a footer is where you look when the nav didn't have it.
   3. .fmark    - THE BRAND. Full lockup at page width, cropped by the bottom edge.
   Buck leans over band 1's top rail (data-peek="stay") - last thing you see.
   ---------------------------------------------------------------------------- */
/* The live bar reserves its height HERE, not on <body>: padding on the body showed
   as a strip of cream between the walnut footer and the bar (Braden, 2026-09-10:
   "the footer's jacked up"). --livebar-h is written by site.js. */
footer{ background: var(--walnut); color: var(--bone); position:relative; padding-bottom: var(--livebar-h,0px); }

/* --- band 1: the ask --- */
.joinband{
  background: var(--rust); color: var(--cream);
  border-top: var(--bd) solid var(--walnut);
  border-bottom: var(--bd) solid var(--walnut);
  padding: clamp(30px,4.4vw,52px) 0;
}
.joinband-in{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(20px,3vw,44px);
  align-items:center;
}
.joincopy h2{ font-size: clamp(27px,3.6vw,44px); color: var(--cream); }
.joincopy p{ margin:10px 0 0; font-size:16px; color: rgba(253,246,231,.85); max-width:40ch; }
.joinact{ justify-self:end; text-align:right; }
/* The button is .ghost (cream on walnut border): a rust .btn on a rust band is
   invisible, and rust is the ACTION colour - it cannot also be the ground here. */
.joinbtn{ font-size: clamp(15px,1.55vw,19px); padding:15px 26px; }
.joinbtn .k{
  font-family: var(--display); font-weight: var(--dw);
  font-size:1.45em; line-height:.75; color: var(--rust); letter-spacing: var(--track);
}
.fine{ margin:13px 0 0; font-size:13px; color: rgba(253,246,231,.8); }
/* display:inline is load-bearing: `footer a` is display:block for the link columns,
   which shoved the sentence-ending "." after "Register online" onto its own line as
   a lone floating dot. Any footer link that sits INSIDE a sentence needs this. */
.fine a{ color: var(--cream); text-decoration:underline; display:inline; }
@media (max-width:820px){
  .joinband-in{ grid-template-columns:1fr; }
  .joinact{ justify-self:start; text-align:left; }
}

/* --- band 2: the map --- */
.fgrid{
  display:grid; grid-template-columns: 1.25fr 1fr 1.3fr 1fr; gap:30px;
  padding: clamp(30px,3.8vw,46px) 0 0;
}
/* auto-fit collapsed to ONE column below ~740px, which turned the footer into an
   1,188px single-file list of links on a phone - measured at 390x844. Two fixed
   columns with the blurb spanning both keeps it to roughly one thumb-scroll. */
@media (max-width:760px){
  .fgrid{ grid-template-columns: 1fr 1fr; gap:24px 18px; }
  .fabout{ grid-column: 1 / -1; }
  .fabout p{ max-width:none; }
  footer a, footer p{ font-size:14px; }
  /* Three link groups in two columns always leaves one empty cell. Rather than
     park a ~150px hole next to Company, Pickup (the group with the longest lines,
     so the one that wraps worst in a half-width column) goes last and spans both. */
  .fabout{ order:1; }
  .fnav-auctions{ order:2; }
  .fnav-company{ order:3; }
  .fnav-pickup{ order:4; grid-column: 1 / -1; }
}
footer h4{
  font-family: var(--body); font-size:14px; letter-spacing:normal; text-transform:none;
  color: var(--sun); margin:0 0 13px; font-weight:400;
}
footer a, footer p{ color: var(--bone-72); text-decoration:none; font-size:15px; margin:0 0 8px; display:block; }
footer a:hover{ color: var(--bone); text-decoration:underline; }
.fabout p{ max-width:32ch; }
/* Sister-company backlink (Braden, 2026-10-23): a quiet line under the about blurb,
   the first thing in the footer. Small on purpose - an SEO link, not an ad.
   display:inline for the same reason as .fine a (footer a is display:block). */
footer p.fsister{ font-size:13px; margin-top:10px; color: var(--bone-72); }
footer p.fsister a{ display:inline; font-size:inherit; margin:0; color: var(--bone); text-decoration:underline; text-underline-offset:2px; }
/* Braden, 2026-09-17: "I don't know why that line is there." Neither did it - a
   1px hairline above one line of fine print, the only rule on the site that wasn't
   a real 3px walnut section divider. The space alone separates it. */
.fbot{
  margin-top:26px; padding-top:16px;
  font-family: var(--body); font-size:14px; color: rgba(247,234,210,.7);   /* words: Pally, not Tabular (2026-09-11 rule) */
}

/* --- band 3: the mark.
   The clip box carries an aspect-ratio instead of a fixed height so the crop line
   holds at every width instead of drifting: the lockup is 1804x1119 (.62 tall),
   and a 1804x700 window shows ~63% of it - the whole hat, arrow included, plus the
   top edge of the wordmark, which then bleeds off the bottom of the page. */
/* Was the FULL logo clipped to 63% of its height so the hat showed and the wordmark
   bled off the bottom of the page. Braden, 2026-09-10: "I don't like how we have the
   half BiddyUp logo at the bottom. We could probably get rid of that entirely, or
   just have the wordmark at the bottom." So: the wordmark, whole, sitting on its own
   baseline - and the hat it used to carry moved up into the nav. No crop, nothing
   running off the edge. */
/* The bottom margin lives on the FOOTER, not on this block. Braden, 2026-09-17: "there's
   this line at the bottom, for some reason, that is tan and not dark brown like the rest
   under the logo." That was margin collapsing: .fmark's bottom margin escaped the footer
   (no bottom padding or border to stop it), so those pixels were page bone, below the
   walnut. Same spacing, inside the walnut now. */
/* + --livebar-h (Braden, 2026-09-30: "the bottom part where it shows the current auctions
   is hiding the bottom of the footer"). This line used to REPLACE the livebar reserve set at
   the top of the footer block, so on phones the fixed bar sat on top of the wordmark. The
   reserve is added here, and again in the phone rule below, so it can't be dropped twice. */
footer{ padding-bottom: calc(clamp(14px,2.4vw,26px) + var(--livebar-h,0px)); }
.fmark{
  width:100%; max-width: 440px;
  margin: clamp(16px,2.6vw,28px) auto 0;
  padding:0 var(--pad); opacity:.9;
}
.fmark svg{ width:100%; height:auto; color: var(--bone); display:block; }
/* On a phone it sits LEFT at 60% so the answer-widget button in the corner never
   covers its last letters - it was full width and the bubble sat on the "p". */
@media (max-width:600px){
  .fmark{ max-width:none; }
  .fmark svg{ width:60%; margin:0; }
}

/* Buck is a mascot, not a media player. When iOS refuses a muted autoplay (Low Power
   Mode) Safari paints a play glyph over the paused frame - site.js then swaps in the
   still, and this hides the glyph for the moment before that lands (2026-09-11). */
.buck-vid::-webkit-media-controls-start-playback-button{ display:none !important; -webkit-appearance:none; }
.buck-vid::-webkit-media-controls{ display:none !important; }

/* ---------- reduced motion: stillness, not throttled animation ---------- */
@media (prefers-reduced-motion: reduce){
  html.js [data-rise]{ opacity:1; transform:none; }
  .rise-in{ transition: opacity 150ms linear; }
  .hero-buck > img, .page-hero .buck img, .buck-vid, .ticker-track{ animation:none; }
  html.js .hl{ background-size:100% .92em; }
  .btn:hover svg, .lot:hover, .lot:hover .price, .peekwrap:hover .lot, .peekwrap:hover .price{ transform:none; }
}

/* ---------- the live bar: the auction follows you down the page --------------
   Researched, not invented. Fanatics Live, eBay and Whatnot all pin the item, its
   current price and the primary action to the bottom of a phone screen so the action
   never scrolls away; OpenSea and OKX both render the countdown as SEGMENTED labelled
   units rather than a sentence. This page did neither: the only CTA lived in the hero,
   the nav is position:relative, and the phone page runs about 5,500px - so for roughly
   85% of a scroll there was no way to act and no sign an auction was even running.

   It is deliberately NOT a floating overlay. It is a band that reserves its own height
   at the bottom of the document (--livebar-h), because the thing we just removed from
   this site was a floating widget that covered a fifth of every screen. Colour roles are
   the ones site.css already defines and are not repurposed: walnut = inverted band,
   sun = numerals, rust = THE action, secondary = live status.                        */
.livebar{
  position:fixed; left:0; right:0; bottom:0; z-index:900;
  display:flex; align-items:center; gap:12px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  /* Cream, not walnut (Braden, 2026-09-10: "it should be a different color"): it
     reads as part of the page, like the nav, instead of a dark tray under it. */
  background:var(--cream); color:var(--walnut);
  border-top:var(--bd) solid var(--walnut);
  box-shadow:0 -6px 22px rgba(51,32,15,.14);
  transform:translateY(110%);
  /* Hidden, not just slid off. On iPhones the page draws under Safari's see-through
     bottom toolbar, so a bar parked one height below the screen still peeked through
     it on first load, half there (Braden, 2026-09-30). visibility waits for the slide. */
  visibility:hidden;
  transition:transform .26s var(--out), visibility 0s linear .26s;
}
.livebar.on{ transform:none; visibility:visible; transition:transform .26s var(--out), visibility 0s; }
@media (prefers-reduced-motion:reduce){ .livebar, .livebar.on{ transition:none; } }
/* Desktop keeps its own always-visible header CTA, so the band is a phone/tablet
   device. Same 780px line the peek gag uses - below it the page is 1-2 columns. */
@media (min-width:780px){ .livebar{ display:none; } }

.livebar-txt{ flex:1 1 auto; min-width:0; }
.livebar-k{
  display:flex; align-items:center; gap:6px;
  font-family: var(--body); font-size:14px; letter-spacing:normal; text-transform:none;
  color:var(--walnut-70);
}
.livebar-dot{
  width:7px; height:7px; border-radius:50%; background:var(--secondary); flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(47,107,79,.7); animation:livepulse 2.2s infinite;
}
@keyframes livepulse{ 70%{ box-shadow:0 0 0 7px rgba(47,107,79,0);} 100%{ box-shadow:0 0 0 0 rgba(47,107,79,0);} }
@media (prefers-reduced-motion:reduce){ .livebar-dot{ animation:none; } }
/* Between auctions there is nothing live, so the dot must not claim there is. */
.livebar.idle .livebar-dot{ background:var(--sun); animation:none; }

.livebar-v{
  font-family:var(--data); font-weight:700; font-size:19px; line-height:1.1;
  color:var(--rust); margin-top:3px;
  font-variant-numeric:tabular-nums;   /* or the countdown jitters every second */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.livebar.idle .livebar-v{ font-size:15px; color:var(--walnut); }
.livebar-v u{ text-decoration:none; color:var(--walnut-70); font-size:.62em; margin:0 5px 0 1px; }

.livebar .btn{
  flex:0 0 auto; padding:12px 16px; font-size:14px; min-height:46px;
  box-shadow: var(--drop) var(--drop) 0 var(--walnut);
}
.livebar .btn:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--walnut); }

/* ---------- the green band walks you through it as you scroll ------------------
   Braden, 2026-09-10: "in the green section, I want that to be more fun and
   interactive as you're scrolling down, doing something."

   The section already says "it takes about a minute" and lists three steps, so the
   honest interaction is the one the content is already asking for: walk the steps.
   A rail fills in step with how far the band has travelled through the viewport and
   each step lights as the fill reaches it - the same progress-indicator idea every
   onboarding flow uses, driven by scroll instead of by taps. --how-p is 0 to 1 and
   is written by site.js. */
.how .steps{ position:relative; }
/* The rail. Horizontal on desktop where the steps sit side by side, vertical on a
   phone where they stack - it always runs the way the eye is already travelling. */
.how .steps::before,
.how .steps::after{
  content:""; position:absolute; border-radius:99px; pointer-events:none;
}
.how .steps::before{ background: rgba(51,32,15,.16); }
.how .steps::after{ background: var(--walnut); transition: none; }
.how .steps{ padding-left:26px; }
.how .steps::before{ top:6px; bottom:6px; left:6px; width:4px; }
.how .steps::after{ top:6px; left:6px; width:4px; height: calc(var(--how-p,0) * (100% - 12px)); }
/* Each step waits its turn. Unlit is legible, not hidden - a visitor who never
   scrolls (or who has JS off) must still be able to read all three. */
.how .step{
  opacity:.6; transform: translateY(6px);
  transition: opacity .34s var(--out), transform .34s var(--out);
}
.how .step.lit{ opacity:1; transform:none; }
.how .step .n{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%;
  border:3px solid rgba(51,32,15,.28); font-size:24px;
  transition: background .3s var(--out), color .3s var(--out), border-color .3s var(--out), transform .3s var(--pop);
}
.how .step.lit .n{
  background: var(--walnut); color: var(--sun); border-color: var(--walnut);
  transform: scale(1.06);
}
html:not(.js) .how .step{ opacity:1; transform:none; }
html:not(.js) .how .step .n{ background: var(--walnut); color: var(--sun); border-color: var(--walnut); }
@media (prefers-reduced-motion: reduce){
  .how .step{ opacity:1; transform:none; transition:none; }
  .how .step .n{ transition:none; }
}

/* ---------- nothing animates off screen (site.js toggles .offscreen) ------------ */
.offscreen, .offscreen *{ animation-play-state: paused !important; }

/* ---------- the give band points at the join band ------------------------------
   Braden, 2026-09-10: "I want the Feeding America section to point to the join
   section... a fun arrow or something hinting at that, because right now they
   look like two separate things." A hand-drawn arrow drops out of the band's copy
   and across its bottom edge into the rust band, with the one line that joins the
   two ideas. */
.give-hint{ display:none; }
.give-hint-old{
  display:flex; align-items:flex-end; gap:10px; margin: 14px 0 -10px;
  font-family: var(--display); font-weight: var(--dw); font-size: clamp(17px,1.9vw,22px); color: var(--rust);
  position:relative; z-index:2;
}
.give-hint svg{ width:54px; height:64px; flex:none; overflow:visible; }
.give-hint svg path{ fill:none; stroke: var(--rust); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:780px){ .give-hint{ clear:both; margin-top:6px; } }

/* ---------- lot rails on the refund page ----------------------------------------
   Two columns of live lots run up and down either side of the claim form on a
   desktop; on a phone one row scrolls sideways above it - the horizontal scroll
   Braden asked for a home for. Cards are the homepage's own. */
.rf-stage{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,700px) minmax(0,1fr); gap: clamp(16px,2.5vw,36px); align-items:start; max-width:1320px; }
/* Explicit placement: the "how refunds work" steps sit between the form and the
   second rail in the DOM, and auto-placement handed them column 3 - the right rail
   wrapped under the form (loop one, 2026-09-10). */
.rf-stage > .rail-label{ grid-row:1; grid-column:1 / -1; }
.rf-stage > .lot-rail:first-of-type{ grid-row:2; grid-column:1; }
.rf-stage > .formcard{ grid-row:2; grid-column:2; }
.rf-stage > .lot-rail:last-of-type{ grid-row:2; grid-column:3; }
.rf-stage > .rf-how{ grid-row:3; grid-column:1 / -1; }
.lot-rail{ position:relative; overflow:hidden; border-radius:18px; }
.lot-rail[hidden]{ display:none; }
.lot-rail-track{ display:flex; flex-direction:column; gap:14px; width:100%; animation: railup 48s linear infinite; }
.lot-rail:nth-of-type(2) .lot-rail-track{ animation-name: raildown; }
.lot-rail:hover .lot-rail-track{ animation-play-state:paused; }
.lot-rail .lot{ flex:none; width:100%; }
.lot-rail .lot .ph{ aspect-ratio: 4/3; }
.lot-rail .lot .t{ font-size:13.5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lot-rail .lot .price{ font-size:24px; }
.lot-rail .lot .bids{ display:none; }
@keyframes railup{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
@keyframes raildown{ from{ transform:translateY(-50%); } to{ transform:translateY(0); } }
.rail-label{
  grid-column:1 / -1; text-align:center; margin:0 0 4px;
  font-family: var(--body); font-size:14px; letter-spacing:normal; text-transform:none; color: var(--walnut-70);
}
@media (min-width:1101px){
  .lot-rail{ height: min(78vh, 720px); position:sticky; top:18px; }
  /* fade the rails' top and bottom edges so the cards arrive rather than pop */
  .lot-rail::before, .lot-rail::after{ content:""; position:absolute; left:0; right:0; height:56px; z-index:2; pointer-events:none; }
  .lot-rail::before{ top:0; background: linear-gradient(var(--bone), transparent); }
  .lot-rail::after{ bottom:0; background: linear-gradient(transparent, var(--bone)); }
}
@media (max-width:1100px){
  .rf-stage{ grid-template-columns: 1fr; }
  .rf-stage > .rail-label, .rf-stage > .lot-rail, .rf-stage > .formcard, .rf-stage > .rf-how{ grid-column:1; grid-row:auto; }
  .lot-rail:nth-of-type(2){ display:none; }   /* one row is plenty on a phone */
  .lot-rail{ border-radius:0; margin:0 calc(-1 * var(--pad)) 8px; padding:4px var(--pad) 12px;
    overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .lot-rail::-webkit-scrollbar{ display:none; }
  .lot-rail-track{ flex-direction:row; width:max-content; gap:12px; animation:none; }
  .lot-rail .lot{ width: clamp(150px,44vw,200px); scroll-snap-align:start; }
}

/* ---------- the join band shows the texts themselves ---------------------------- */
.sms-mock{ margin:18px 0 0; max-width:340px; display:flex; flex-direction:column; gap:7px; }
.sms-meta{ font-family: var(--body); font-size:14px; letter-spacing:normal; text-transform:none; color: rgba(253,246,231,.7); margin-bottom:2px; }
.sms-in, .sms-out{
  font-family: var(--body); font-size:14.5px; line-height:1.4; padding:10px 13px;
  border: 2px solid var(--walnut); border-radius:16px; max-width:88%; position:relative;
  box-shadow: 3px 3px 0 var(--walnut);
}
.sms-in{ background: var(--cream); color: var(--walnut); align-self:flex-start; border-bottom-left-radius:5px; }
.sms-out{ background: var(--walnut); color: var(--sun); align-self:flex-end; border-bottom-right-radius:5px; font-family: var(--data); font-weight:700; letter-spacing:.12em; }
/* they arrive one after another when the band comes into view */
html.js .sms-in, html.js .sms-out{ opacity:0; transform: translateY(8px); transition: opacity .3s var(--out), transform .3s var(--out); }
html.js .rise-in .sms-in, html.js .rise-in .sms-out{ opacity:1; transform:none; }
/* five children now: meta, JOIN, welcome, meta, alert - the two metas are not animated */
html.js .rise-in .sms-mock > :nth-child(2){ transition-delay:.15s; }
html.js .rise-in .sms-mock > :nth-child(3){ transition-delay:.85s; }
html.js .rise-in .sms-mock > :nth-child(5){ transition-delay:1.7s; }
@media (prefers-reduced-motion: reduce){ html.js .sms-in, html.js .sms-out{ opacity:1; transform:none; transition:none; } }

/* ---------- the Feeding America badge -------------------------------------------
   Braden, 2026-10-17: "make it more apparent on the website that a signup for texts
   donates to feeding america." Was one sentence at the end of a paragraph. Now a badge
   that sits ABOVE the ask, on the home alerts band and the /register hero. It only
   promises a meal for a WEBSITE sign-up (doc 22: a texted JOIN is not counted), so on
   the home page it links to the form. */
.give-badge{
  display:inline-flex; align-items:center; gap:10px;
  background: var(--cream); color: var(--walnut);
  border: var(--bd) solid var(--rust); border-radius: 999px;
  padding: 10px 18px 10px 12px; min-height:44px; box-sizing:border-box;
  font-family: var(--display); font-weight: var(--dw); letter-spacing: var(--track);
  font-size: clamp(17px,1.9vw,20px); line-height:1.2; text-decoration:none;
}
.give-badge svg{ flex:none; width:26px; height:26px; color: var(--rust); }
.give-badge b{ color: var(--rust); font-weight:inherit; }
a.give-badge:hover{ background: var(--bone); }
.alerts-copy .give-badge{ margin:0 0 16px; }
.reg-head .give-badge{ margin:18px auto 0; }

/* ---------- the alerts band: one section, one ask ------------------------------- */
.alerts{
  background: var(--bone); color: var(--walnut);
  border-top: var(--bd) solid var(--walnut); border-bottom: var(--bd) solid var(--walnut);
  padding: clamp(30px,4.4vw,56px) 0; overflow:hidden;
}
/* Braden, 2026-09-12: "I wanna live with the idea on the site that it's Buck and the
   text should live around him" - and on a phone, "I want this section to be vertical."
   Desktop: three columns with Buck in the MIDDLE - headline and paragraph to his left,
   the text thread and the ask to his right. Phone: one column, top to bottom. */
.alerts-in{ display:grid; grid-template-columns: minmax(0,1.05fr) auto minmax(0,1fr); gap: clamp(18px,3vw,44px); align-items:center; }
.alerts-copy h2{ font-size: clamp(32px,4.2vw,52px); color: var(--walnut); margin:0; }
.alerts-copy p{ margin:14px 0 0; font-size: clamp(16px,1.6vw,18px); color: var(--walnut-70); max-width:44ch; line-height:1.5; }
.alerts-copy p b{ color: var(--rust); }
.alerts-art{ justify-self:center; }
.alerts-art .gbuck{ width: var(--buck-w); }
.alerts-art .gbuck video, .alerts-art .gbuck img{ display:block; width:100%; height:auto; mix-blend-mode:darken; }
.alerts-thread .sms-mock{ margin:0 0 18px; max-width:330px; }
.alerts-cta{ margin-top:0; }
.alerts-cta .fine{ font-size:13.5px; margin:12px 0 0; color: var(--walnut-70); max-width:none; }
.alerts-cta .fine a{ color: var(--walnut); }
/* Phone vs computer "Holler at me" (Braden, 2026-09-29): a phone opens Messages with JOIN typed,
   a computer goes to the form. Default = computer, so anything unsure gets the form, which works
   everywhere. */
.alerts-cta .only-phone{ display:none; }
@media (hover:none) and (pointer:coarse){
  .alerts-cta .btn.only-phone{ display:inline-flex; }
  .alerts-cta p.only-phone{ display:block; }
  .alerts-cta .only-desk{ display:none; }
}
.alerts .sms-mock{ display:block; }
.alerts .sms-in, .alerts .sms-out{ display:block; width:fit-content; margin:0 0 7px; }
.alerts .sms-out{ margin-left:auto; }
.alerts .sms-meta{ color: var(--walnut-70); }
/* PHONE (Braden, 2026-09-14: "on mobile, it's stacked weird"). It was: headline, then
   Buck alone on the left of an empty row, then the whole thread, then the button. The
   "Buck beside the thread" rule below it still targeted .alerts-art .sms-mock, which
   stopped existing when the thread moved into .alerts-thread - so it never matched.
   Now Buck shares the thread's grid cell, bottom-right, looking left INTO the texts he
   is reading, and the bubbles keep out of his lane. Headline, thread, button: one read. */
@media (max-width:900px){
  .alerts{ --al-buck: clamp(118px, 34vw, 170px); }
  .alerts-in{ grid-template-columns:minmax(0,1fr); grid-template-areas: "copy" "thread" "cta"; gap:0; }
  .alerts-copy{ grid-area:copy; }
  .alerts-copy p{ max-width:none; }
  .alerts-thread{ display:contents; }
  .alerts-thread .sms-mock{ grid-area:thread; max-width:none; margin:22px 0 0; position:relative; z-index:1; }
  .alerts-art{ grid-area:thread; justify-self:end; align-self:end; margin:0 -8px -4px 0; }
  .alerts-art .gbuck{ width: var(--al-buck); }
  /* bubbles stop 4px short of Buck's box - they used to tuck 14px under him (Braden, 2026-09-30: "he
     kind of goes over the little text paragraphs a little bit") */
  .alerts .sms-in{ max-width: calc(100% - var(--al-buck) - 4px); font-size:14px; }
  .alerts .sms-out{ max-width:60%; margin-right: calc(var(--al-buck) + 4px); }   /* every bubble stays in the thread's lane; Buck owns the right edge (at tablet width he stood on JOIN) */
  .alerts-cta{ grid-area:cta; margin-top:20px; }
  .alerts-cta .btn{ width:100%; justify-content:center; }
}
/* the bubbles arrive one after another when the band comes into view */
html.js .alerts .sms-in, html.js .alerts .sms-out{ opacity:0; transform: translateY(8px); transition: opacity .3s var(--out), transform .3s var(--out); }
html.js .alerts.rise-in .sms-in, html.js .alerts.rise-in .sms-out{ opacity:1; transform:none; }
html.js .alerts.rise-in .sms-mock > :nth-child(2){ transition-delay:.15s; }
html.js .alerts.rise-in .sms-mock > :nth-child(3){ transition-delay:.75s; }
html.js .alerts.rise-in .sms-mock > :nth-child(4){ transition-delay:1.3s; }

/* ---------- footer: half the height it was ------------------------------------- */
@media (max-width:600px){
  footer .fgrid{ grid-template-columns: 1fr 1fr; gap:14px 16px; padding-top:22px; }
  footer .fabout{ grid-column:1 / -1; }
  footer .fabout p{ font-size:14px; margin:6px 0 0; }
  footer .fgrid a, footer .fgrid p, footer .fgrid li{ font-size:14px; line-height:1.35; }
  footer .fbot{ font-size:13px; margin-top:16px; padding-top:12px; }
  .fmark{ margin:10px auto 0; }
  footer{ padding-bottom: calc(8px + var(--livebar-h,0px)); }
  .fmark svg{ width:44%; }
}

/* ---------- footer reveal: the page lifts off the footer ----------------------------
   Braden, 2026-09-30: "it's like physically under it, revealing it rather than just the
   next section down." The footer is pinned to the bottom of the screen BEHIND the page
   (sticky + z-index -1 inside body's own stacking context), so the last section slides
   up off it like a curtain. body's z-index:0 keeps it above the page background, so its
   links stay tappable.
   It is HIDDEN until the page actually reaches it (html.fshow). The first version left it
   visible the whole time, and pinned behind the whole page it showed through every clear
   section from the top down (Braden: "the footer is there the entire time"). site.js only
   turns this on (html.freveal) when safe - see the Footer reveal block there - and
   07-Automations/scripts/scroll_shots.py must pass on every screen after any change. */
html.freveal body{ position:relative; z-index:0; }
html.freveal footer{ position:sticky; bottom:0; z-index:-1; visibility:hidden; }
html.freveal.fshow footer{ visibility:visible; }
/* The section lifting off the footer gets rounded bottom corners, like a card being slid
   off the page (Braden, 2026-09-30: "the bottom section of orange should have rounded
   corners at the bottom"). Only under freveal: that is the only time the footer sits
   behind the corners - anywhere else they would show a notch of page cream. The section
   already has overflow:hidden, so Buck and the boxes clip to the curve too. */
html.freveal .flift{ border-radius: 0 0 28px 28px; }   /* .flift = that section, set by site.js */
/* .fcover = every section the footer slides under. Never faded or shifted: see site.js. */
html.freveal .fcover{ opacity:1 !important; transform:none !important; }
/* Walnut BEHIND the corners, carried by the footer. The curves cut into the section just
   ABOVE the footer's top edge, so at the very bottom of the page nothing was behind them but
   page cream (Braden, 2026-09-30: "on the other side of the rounded corners it's like white").
   This strip reaches up behind the section; only the two corner cut-outs ever show it. */
html.freveal footer::before{ content:""; position:absolute; left:0; right:0; bottom:100%; height:32px; background: var(--walnut); }

/* ---------- consign: the orange band ----------------------------------------------
   Braden, 2026-09-12: "make an orange section that is for consignment." Rust, cream
   type, a cream button (rust-on-rust is invisible), Buck with the boxes acting the
   verb - he is the one hauling - and the words living around him. */
.consign{
  background: var(--rust); color: var(--cream);
  border-top: var(--bd) solid var(--walnut); border-bottom: var(--bd) solid var(--walnut);
  padding: clamp(30px,4.4vw,56px) 0; overflow:hidden;
}
/* Round 3 (2026-09-30): words on the left, Buck big on the right, standing on the thin ground
   line the band always had. A rust hill under him was tried and pulled the same night (Braden:
   "I don't like what you did with the bottom... it looks funky") - keep the bottom plain.
   --slack is the strip of the clip below his hooves, as a share of the clip's own height
   (buck_cross.py prints the ground row), so his hooves land on the line. */
.consign{ position:relative; --slack: 2.7%; }
.consign-in{ position:relative; display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 0 clamp(20px,3vw,48px); align-items:end; }
.consign-copy{ position:relative; z-index:1; align-self:center; }   /* the button stays in front of flying boxes */
.consign-copy h2{ font-size: clamp(34px,4.4vw,56px); color: var(--cream); margin:0; }
.consign-copy p{ margin:14px 0 0; font-size:18px; line-height:1.55; color: rgba(253,246,231,.9); max-width:44ch; }
.consign .ctas{ display:flex; align-items:center; flex-wrap:wrap; gap:14px 18px; margin-top:22px; }
.btn.cream{ background: var(--cream); color: var(--walnut); }
/* "Holler at me" wears the hill's grass green (Braden, 2026-09-30: "should be green... the same
   as the grass that we use"). Cream on --secondary is 5.85:1, past the 4.5 floor. */
.alerts-cta .btn{ background: var(--secondary); }
.consign-fine{ font-family: var(--body); font-size:14px; letter-spacing:normal; text-transform:none; color: rgba(253,246,231,.78); }
.consign-lane .cw{ display:block; }
/* The video (see site.js 4b2) is only a source: it plays unseen (not display:none - iOS stops
   decoding a hidden video) and WebGL draws Buck onto the transparent canvas. The canvas shows once
   the first frame is drawn; then the picture steps aside. */
.consign-lane .cw-vid{ position:absolute; left:0; top:0; width:2px; height:2px; opacity:0; pointer-events:none; }
.consign-lane .cw-gl{ display:none; width:100%; max-width:480px; height:auto; margin-left:auto; transform: translateY(var(--slack)); }
.consign-lane.vid-on .cw-gl{ display:block; }
.consign-lane.vid-on .cw{ display:none; }
.consign-lane{ position:relative; }   /* no floor line - Braden, 2026-09-30: "the floor below him I don't love it"; his baked shadow grounds him */
.consign-lane .cw-move{ display:block; width:100%; max-width:480px; height:auto; margin-left:auto;
  transform: translateY(var(--slack)); }
.consign-lane .cw-still{ display:none; width: min(240px, 60vw); height:auto; margin-left:auto; transform: translateY(6px); }
@media (prefers-reduced-motion: reduce){
  .consign-lane .cw, .consign-lane .cw-gl{ display:none; }
  .consign-lane .cw-still{ display:block; }
}
/* Phone: words, button, then Buck walking the full width of the line. */
@media (max-width:780px){
  .consign-in{ grid-template-columns: minmax(0,1fr); }
  .consign-copy{ padding-bottom:0; }
  .consign-lane{ margin-top: 14px; pointer-events:none; }   /* clear of the button: the boxes fly to the clip's top edge (Braden, 2026-09-30: "slightly touching the Sell with us button") */
  .consign-lane .cw-move, .consign-lane .cw-gl{ max-width:none; }
  .consign-copy h2{ font-size: clamp(30px,8vw,38px); }
  .consign-copy p{ max-width:none; }
  .consign .ctas{ margin-top:16px; }
}

/* ---------- the hills under the hero ------------------------------------------------
   Three layers of the brand green from back to front, a little lighter at the back so
   the stack reads as depth; site.js slides them at different rates on scroll. The
   buttons sit on the grass, Buck jumps above it. Green-next-to-orange law: the buttons
   ON the grass are walnut and cream, never rust. */
/* Each hill is a 300px SVG cap with a solid tail running down past the fold, so a layer
   can sit anywhere and drift without ever showing bone underneath. --ground is the top of
   the grass under Buck's hooves, measured by site.js, and every cap starts 240px above
   it (y=240 of the path is the ground). site.js redraws all three paths around him; the
   static paths in the HTML are the no-JS picture. */
.fold{ position:relative; }
.hills{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; --ground: calc(100% - 170px); }
/* 900 tall, not 300 (2026-09-17): y=240 is the ground, so a 300px cap could only draw
   60px BELOW it - and every deeper shape (the foreground range's crest under the paragraph,
   the front hill diving out of the left of the frame) was silently clipped and replaced by
   the solid tail, i.e. a flat slab starting 60px under the ground. That was the bug behind
   "you made it look worse on the website". */
.hill{ position:absolute; left:0; right:0; top: calc(var(--ground) - 240px); bottom:-60vh;
  background: linear-gradient(to bottom, transparent 899px, var(--c) 899px); will-change: transform; }
.hill svg{ display:block; width:100%; height:900px; }
.hill path{ fill: var(--c); }
/* four clear steps of value, not three near-identical greens: distance is read from the
   value staircase before it is read from the motion (2026-09-17) */
/* ONE green - ours - at five distances. Braden, 2026-09-17: "it's also not using the green
   that's in our color scheme anymore. It added a bunch of greens." Correct: the ladder had
   become five invented hues. Every step is now mixed from the BRAND pair only - our green
   thinned toward our own bone for distance (which is what haze actually does to a colour)
   and deepened with our own walnut for the foreground. His hill is the brand green itself,
   undiluted. The hex fallbacks are those same mixes, for browsers without color-mix. */
/* TWO shapes. Braden, 2026-09-17: "I don't like this part, and I don't like the faint tail.
   I think you can just redo it entirely. Redo it entirely, start from scratch." So: the grass
   he stands on, and ONE hill behind it. No foreground band (that was the part he pointed at),
   no pale distant range (that was the faint tail). Both are our own green - the hill behind is
   the brand green thinned a little toward our bone, enough to sit behind and no more. The
   unused layers stay in the markup, switched off. */
.hill-far, .hill-mid, .hill-near{ display:none; }
/* One main hill on every screen; the lighter mobile layer was removed on review. */
.hill-back{ display:none; }
.hill-back { --c:#4A8168; --c: color-mix(in srgb, var(--secondary) 74%, var(--bone)); }
.hill-front{ --c: var(--secondary); }   /* the brand green, exactly - the hill he stands on */
/* THE FOREGROUND. Braden, 2026-09-17: "There needs to be another effect in front of the
   hill... We have one on mobile, but I want that to be on desktop as well... It needs to be
   like a hilly background and a hilly foreground." On a phone it stays a swell anchored to
   the bottom of the fold; on desktop it is a fourth drawn range, ground-anchored like the
   others, darkest of the four and the only one that runs AHEAD of the page on scroll. */
/* Ground-anchored on every screen since 2026-09-17: it used to hang off the BOTTOM of the
   fold on phones, which meant its crest could not be placed relative to Buck - and the
   thing it has to stay clear of is Buck. It dips away under him (site.js) so the hill he
   stands on, and the shadow baked under his hooves, are never split across two hills. */
.hill-near { --c:#245240; --c: color-mix(in srgb, var(--secondary) 82%, var(--walnut)); top: calc(var(--ground) - 240px);
  background: linear-gradient(to bottom, transparent 899px, var(--c) 899px); }
.hill-near svg{ height:900px; }
.fold .hero{ position:relative; z-index:1; }
.fold .ticker{ position:relative; z-index:2; }   /* the wall's top rule cuts the grass off clean */
/* buttons on the grass */
/* Rust face, SOLID walnut depth - the same button as the nav's "Bid now". It was a walnut
   face with a translucent-black drop, which on the grass rendered as a muddy dark GREEN edge.
   Braden, 2026-09-21: "I don't like how it's brown and I don't like how the depth effect is
   also green." He was shown yellow, brown-with-yellow-depth and yellow+brown pairs, liked
   none, asked for orange and picked this one ("I like A").
   THE ONE SANCTIONED EXCEPTION to "rust never beside green" (see --secondary above): he chose
   it with the rule in front of him. It holds because the 3px walnut outline and the walnut
   drop keep the orange from ever touching the green. Do not "fix" it back, and do not read it
   as licence for rust text/bands on green anywhere else. */
.hero .ctas .btn{ background: var(--rust); color: var(--cream); box-shadow: var(--drop) var(--drop) 0 var(--walnut); }
.hero .ctas .btn.ghost{ background: var(--cream); color: var(--walnut); box-shadow: var(--drop) var(--drop) 0 var(--walnut); }
@media (min-width:901px){
  /* THE FOLD IS ONE BLOCK NOW: nav -> scene -> grass -> logo wall, and the wall's bottom
     rule is where the hero stops. Braden, 2026-09-22: "the hero is bleeding into the next
     section", then "should the carousel be at the very bottom of the hero?" - yes. With the
     wall outside the fold it was a third cream band after a cream sky and a green floor, so
     nothing said the hero had ended.
     Three numbers shape what is inside it, and they only work together:
       .fold min-height   - EXACTLY one screen (100svh). It used to be min(100svh,900px),
                            and that cap is why the wall floated 150px off the bottom of a
                            tall monitor (Braden, 2026-09-22: "the carousel is not all the
                            way on the bottom of my screen"). Never cap it again.
       .fold .hero padding - top sets where the headline sits, bottom is PURE GRASS
       reachGap (site.js)  - drops Buck, and his hooves are the crest
     The mound's height is not a number anywhere: the grass is drawn 44px under the button
     row, so lowering the copy raises the mound and vice versa. Move the padding, re-shoot. */
  /* One screen tall - but never taller than the scene can fill (2026-09-23).
     Braden, on a tall narrow window: "it's jacked up... it needs to look correct throughout
     the entire size of what a TV or a monitor would be like." A plain 100svh gave a
     1500x2000 window a 2000px hero, and nothing in it can grow to match: the headline is
     capped by its COLUMN (which is set by width) and Buck is capped by his 420px artwork.
     So the height was pure green. The cap is an ASPECT, not a number: up to 3:2 the fold is
     still exactly one screen (every 16:9 and 16:10 monitor, and Braden's own 2320x1305),
     and anything taller than that gets a hero in proportion to its width with the next
     section peeking - which is what a page should do on a portrait or square window. */
  .fold{ min-height: min(100svh, max(640px, 70vw)); }
  /* + the logo strip, so the strip starts just below the first screen (2026-09-29, see
     --tick-h in site.js). The fold minus the strip is still exactly the old fold. */
  .fold{ min-height: calc(min(100svh, max(640px, 70vw)) + var(--tick-h, 0px)); }
  /* The scene is TOP-anchored on desktop, not centred (2026-09-22). Braden: "I don't
     like this half and half hero section - I want the main thing to be the whole hero",
     and "I don't like the taller hill". Both come from the same place: the copy was
     vertically centred, so every pixel added to the fold pushed the headline DOWN, and
     the grass line (which is drawn 44px under the button row) had to climb with it -
     a taller mound and a hero cut in two. Anchored to the top, extra fold height becomes
     GRASS instead: the mound stays low and the flat green under the carousel deepens. */
  /* `.fold .hero`, not `.hero`: line ~332 sets padding-bottom on `.fold .hero`, which
     outranks a bare `.hero` no matter how far down the file it sits. Every earlier attempt
     to tune this from `.hero` was dead CSS. */
  .fold .hero .hero-copy{ justify-content:flex-start; }
  /* padding-bottom 0 on purpose: site.js owns the gap under the buttons, because it is the
     SAME number as the other two gaps in the green block. A CSS padding here would be a
     fourth, different value - which is what "the spacing is not consistent" meant. */
  .fold .hero{ padding-top: clamp(48px, 8vh, 120px); padding-bottom: 0; }

  /* THE COPY MOVES ONTO THE GRASS (2026-09-22). Braden: "make 'Every lot opens at a buck'
     taller, and move the two buttons and that little prompt down on top of the green...
     right now we have a bunch of dead space where all that green is." The headline takes
     the bone; the paragraph and the buttons drop to the bottom of the hero, which is deep
     in the grass, and the hill rises from just above them to Buck's hooves (site.js sets
     the grass line off the "buck." marker and the paragraph's top). Phones already worked
     this way and are untouched. */
  /* min(vw, svh), same reasoning as the phone: the headline is three lines and the
     paragraph is pinned to the bottom of the hero, so on a short window a width-only size
     runs "buck." down into the paragraph and there is no band left to draw the grass line
     in - the copy ends up half on bone and half on green, unreadable in bone. Height caps it. */
  .fold .hero h1{ font-size: clamp(46px, min(11.2vw, 13.2svh), 142px); }
  /* no margin here: site.js sets it to G, the hero's one spacing unit (2026-09-23) */
  /* 20px was the hero paragraph's ceiling on every desktop, which is fine on a laptop and
     small on a 27". It is also the one piece of running text on the page a customer has to
     read, so the readability law (10-Documents/12) points the same way. */
  /* Cap 24 -> 32 (2026-09-24). Braden, full screen on a 2560: "the paragraph is too small and
     needs to resize with the viewport." It was pinned at 24px from 1920 up, next to a 168px
     headline. 1.25vw is unchanged, so every screen at or below 1920 reads exactly as before. */
  .fold .hero .sub{ font-size: clamp(19px, 1.25vw, 32px); }
  /* margin-top:auto is what carries the copy down onto the grass, and bone is what makes it
     readable once it gets there. Both lived in the >=1700px block by accident until
     2026-09-23, so on a 1500px-wide window the paragraph sat straight under the headline in
     dark walnut on green, with ~700px of empty grass below it. That was the "it's jacked up
     on this size of pane" bug. They belong to EVERY desktop width. */
  .fold .hero .sub{ margin-top:auto; margin-bottom:0; }
  .fold .hero .sub, .fold .hero .sub strong{ color: var(--bone); }
}
/* BIG MONITORS: the scene gets the extra width, not just extra margin (2026-09-22).
   Braden, on a ~2300px screen: "on my screen they have way too much room and... probably
   not big enough in proportion." The headline is capped by its COLUMN, not by the font
   rule - "opens at a" is 625px wide at 142px inside a 617px column, so it was already at
   its ceiling and no font-size would have moved it. The fold's wrap widens instead, which
   widens the copy column, which lets the clamp above actually reach 168px. Only the FOLD
   widens; every section below it keeps the 1140px measure, because a 48ch paragraph is
   still the right line length no matter how big the monitor is. */
@media (min-width:1700px){
  .fold .wrap{ max-width: min(1400px, 76vw); }
  /* Buck grows with the screen too, but only to 340px: the clip is 420px wide, and past
     about 0.8x the browser stops throwing pixels away and starts stretching them - which is
     the graininess Braden pointed at on 2026-09-22 ("the smaller he is the less grainy").
     max(310px, ...) so a 1080p screen keeps exactly what it has. */
  :root{ --hero-buck-w: min(340px, max(310px, min(21vw, 26svh))); }
  .fold .hero .ctas .btn{ font-size: clamp(18px, 1.2vw, 26px); }   /* grows with the paragraph */
  /* The headline may be bigger here only because the column is - see .fold .wrap above.
     9.1vw tracks that column between 1700px and ~1850px, where 168 would still overflow it. */
  .fold .hero h1{ font-size: clamp(52px, min(9.1vw, 13.2svh), 168px); }
}

/* SHORT DESKTOP WINDOWS (2026-09-23). A 900px-tall window has to fit nav + Buck + the copy
   standing on the grass + the logo wall, and between-auctions the paragraph runs three lines
   instead of two - which is exactly when it stopped fitting. Give height back where it costs
   least: the hero's own padding and a few points off the headline. Nothing above 1000px tall
   is touched, so every screen already signed off stays as it is. */
@media (min-width:901px) and (max-height:1000px){
  .fold .hero{ padding-top: clamp(40px, 5.5vh, 90px); padding-bottom: 0; }
  .fold .hero h1{ font-size: clamp(46px, min(11.2vw, 12.2svh), 142px); }
}

@media (max-width:860px){
  /* Matched controls balance the centered wordmark; Buck adapts to this header. */
  .fold .nav .btn, html.js .fold .navtoggle{
    width:44px; min-width:44px; height:44px; padding:0;
    border-radius:12px; justify-content:center;
  }
  /* "Bid now" again on the hero header. Braden, 2026-09-20: "make the bid button say 'bid
     now' instead. It'll give him more room to center on the button with his hand." A wider
     button puts its centre further from the screen edge, which is the only thing that lets
     Buck centre under it AND keep a real margin off the edge. Same height as the burger. */
  .fold .nav .btn{ width:auto; min-width:0; padding:0 14px; }
  .fold .nav .bid-long{ display:inline; }
  .fold .nav .bid-short{ display:none; }
  .fold .brand .logo{ display:block; height:30px; }
  .fold .brand .logo-hat{ display:none; }
}
@media (max-width:900px){
  /* On a phone the grass comes up to his hooves, so the paragraph lives on the hillside
     too (site.js starts it below the crest). Cream on the brand green is 6:1. */
  /* bone, not cream: Braden, 2026-09-21, on his phone: "It looks like the text is white and
     the background like a tan... I would like them to be the same color." The words on the
     grass now match the bone sky above the hill exactly. */
  .hero .sub, .hero .sub strong{ color: var(--bone); }
}
@media (prefers-reduced-motion: reduce){ .hill{ transform:none !important; } }