/*
Theme Name: Temwa Art Auction
Theme URI: https://temwa.org/
Template: lantern-theme
Author: The Charity Auctioneer
Description: Temwa's Summer 2026 Art Auction. A child of The Lantern Gala that re-skins it in Temwa's brand — sky blue, warm charcoal, Montserrat — and strips the event-night furniture the art auction doesn't use.
Version: 1.3.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: temwa-art-auction
*/

/* =========================================================
   TEMWA BRAND TOKENS

   The parent theme is built entirely on the custom properties in its :root
   block, so re-pointing them here re-skins every component at once —
   buttons, cards, the nav, the bid box, WooCommerce — without overriding a
   single selector. Anything below the token block is a real deviation from
   the parent's design, and each one says why.

   Palette taken from temwa.org: the wordmark blue is #58beea, body copy on
   their site is a warm charcoal-brown #51463e rather than a cool grey, and
   that warmth is most of what makes their brand feel like theirs.
   ========================================================= */
:root{
  /* Canvas: a warm off-white, not the parent's cream, so artwork photographed
     against white paper doesn't look grubby next to it. */
  --cream:#fbfaf8;
  --cream-2:#eef7fc;   /* palest tint of the brand blue, for banded sections */
  --white:#ffffff;

  --ink:#3b332d;       /* headings — a shade deeper than body for contrast */
  --ink-soft:#51463e;  /* Temwa's own body colour */
  --muted:#7d7268;

  /* The parent's "blue" is its primary action colour. Temwa's brand blue is
     much lighter, and light blue on white fails contrast for text and small
     UI, so: brand blue for large areas and fills, a darkened version of the
     same hue for anything that has to be legible at body size. */
  --blue:#2b9fd4;
  --blue-deep:#1d7fae;
  --navy:#155f83;
  --navy-deep:#11506e;

  /* Accent. Temwa's site uses a warm amber against the blue; it's also the
     right colour for a bid price — money should look like money. */
  --yellow:#ffb000;
  --amber:#e89a00;

  --line:rgba(59,51,45,.13);
  --shadow-sm:0 4px 18px -6px rgba(60,50,42,.14);
  --shadow:0 24px 60px -24px rgba(60,50,42,.20);
  --shadow-lg:0 40px 90px -30px rgba(60,50,42,.26);

  --f-display:"Bebas Neue", "Montserrat", system-ui, sans-serif;
  --f-body:"Montserrat", system-ui, sans-serif;

  /* Brand blue at full strength, for the logo lockup and large flat fills
     where contrast isn't a concern. */
  --temwa:#58beea;
  --temwa-pale:#dff1fa;
}

/* ---------------------------------------------------------
   Bebas Neue is all-caps and very condensed. It is superb for short display
   lines and unreadable for anything longer, so it is scoped to the biggest
   headings only and given back its lost letter-spacing; everything else stays
   Montserrat.
   --------------------------------------------------------- */
h1, .h1, .hero__title, .display{
  font-family:var(--f-display);
  letter-spacing:.015em;
  font-weight:400;
  line-height:1.02;
}
.h2, h2{ font-family:var(--f-body); font-weight:700; letter-spacing:-.015em }

/* The parent tints italics with its own blue; ours is lighter, so use the
   deepened one or the emphasis disappears against the page. */
em{ color:var(--blue-deep) }
::selection{ background:var(--temwa); color:#fff }

/* ---------------------------------------------------------
   Logo lockup
   --------------------------------------------------------- */
.nav__brand{ gap:.6rem }

/* The selectors are ancestor-qualified on purpose. WooCommerce ships
   `.woocommerce img, .woocommerce-page img { height:auto }`, and on the
   catalogue and lot pages — the only pages carrying the `woocommerce-page`
   body class — that outranks a bare `.temwa-logo` and lets the logo render at
   its full intrinsic 640x209. Which is what pushed the header onto three rows
   there while the home page looked fine. Two classes beats one class plus an
   element, so this wins wherever it lands in the cascade. */
.nav .temwa-logo,
.footer .temwa-logo,
.mobile-menu .temwa-logo{ display:block; width:auto; height:38px }
.footer .temwa-logo{ height:30px }
@media (max-width:560px){ .nav .temwa-logo{ height:30px } }

/* The parent draws a lantern glyph next to its wordmark. We have a real
   logo, so the glyph and the text name both go. */
.nav__mark, .nav__name{ display:none }

/* ---------------------------------------------------------
   The custom cursor is a demo flourish. On a site whose whole job is taking
   money from people who may be neither young nor confident with computers,
   hiding the real pointer is a liability, so the parent's `cursor:none` is
   put back.
   --------------------------------------------------------- */
body{ cursor:auto }
.cursor{ display:none !important }

/* ---------------------------------------------------------
   Lot cards. The parent's product grid is built for hospitality packages
   photographed landscape; this catalogue is paintings, prints and sculpture
   in wildly different aspect ratios, several of them tall. `contain` keeps
   every piece whole — cropping someone's donated artwork to fill a box is
   not acceptable — and the pale blue behind it gives the ragged edges a
   consistent mount.
   --------------------------------------------------------- */
.woocommerce ul.products li.product img,
.lot-card__img img{
  object-fit:contain;
  background:var(--temwa-pale);
  aspect-ratio:1/1;
  padding:.5rem;
}

/* The estimate matters as much as the current bid in an art auction, so give
   it real presence rather than the parent's fine print. */
.cha-lot__estimate{
  display:inline-block;
  font-weight:600;
  color:var(--ink-soft);
  background:var(--temwa-pale);
  border-radius:999px;
  padding:.2rem .7rem;
  font-size:.85rem;
}

/* ---------------------------------------------------------
   BUTTON SHINE SWEEP — the glitch on "Browse the catalogue".

   The parent gives every button a ::before holding a white diagonal gradient,
   parked at translateX(-130%) and swept to +130% on hover. But the button is
   overflow:visible, so that band is never clipped to the pill: at rest it sits
   as a translucent white smear about 300px to the LEFT of the button, painted
   over whatever is behind it, and on hover it drags across the page. On the
   hero, over the artwork, it reads as a rendering fault.

   Clipping it is the fix. The parent also lifts only `span` and `svg` above
   the sweep (z-index:1), which tells you its buttons are expected to have
   their labels wrapped — the hero's are, now, so the shine passes behind the
   words instead of washing them out.
   --------------------------------------------------------- */
.btn, .button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce ul.products li.product .button,
.woocommerce div.product form.cart .button,
a.add_to_cart_button, button.single_add_to_cart_button,
.woocommerce a.checkout-button{
  overflow:hidden;
  isolation:isolate;
}

/* Confetti on click. The colours are hard-coded in the parent's JavaScript to
   the demo's blue and yellow, so on Temwa's pages it fires a burst of the
   wrong brand's palette out of an ordinary navigation button. */
.burst{ display:none !important }

/* ---------------------------------------------------------
   The closing clock. Hidden rather than removed: the plugin's script rewrites
   its text every second, so this is the only place the change actually holds.
   The honest replacement is printed by the temwa-trim mu-plugin.
   --------------------------------------------------------- */
.cha-timer{ display:none !important }
.temwa-closing{
  background:var(--temwa-pale);
  border-left:3px solid var(--temwa);
  border-radius:8px;
  padding:.7rem .9rem;
  margin:.9rem 0;
  font-size:.9rem;
  color:var(--ink-soft);
}

/* ---------------------------------------------------------
   Hero wash. Static, not animated — the lantern animation that used to sit in
   front of it is gone — but the parent's gradients are hard-coded to the
   demo's blue and yellow rather than tokens, so on Temwa's hero they were the
   wrong brand's colours. Retinted to Temwa's blue and amber.
   --------------------------------------------------------- */
.phero__glow{
  background:
    radial-gradient(60% 70% at 85% -10%, rgba(88,190,234,.20), transparent 60%),
    radial-gradient(50% 60% at 5% 110%, rgba(255,176,0,.14), transparent 60%),
    var(--cream);
}

/* ---------------------------------------------------------
   NAV ON ONE LINE.
   Five links plus the logo and two buttons wrapped onto a second row, which
   looked heavier than the pages it sits above. Tightening the gaps and letting
   the logo shrink a little brings it back to one line without dropping a link.
   --------------------------------------------------------- */
.nav{ flex-wrap:nowrap; gap:1rem }
.nav__links{ gap:clamp(.6rem,1.6vw,1.4rem); white-space:nowrap }
.nav__links a{ font-size:.92rem }
.nav__actions{ gap:.5rem; flex:0 0 auto }
.nav__brand{ flex:0 0 auto }
.nav .temwa-logo{ height:clamp(28px,3.2vw,36px) }
@media (max-width:1024px){ .nav__links a{ font-size:.86rem } }

/* ---------------------------------------------------------
   Lot titles: artist and work in different weights, no dash. Set the way
   Temwa's printed catalogue does it — the artist announced, the work beneath.
   --------------------------------------------------------- */
.lot-title{ display:block }
.lot-title .lot-no{
  display:block;
  font-family:var(--f-body);
  font-weight:700;
  font-size:.66em;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blue-deep);
  margin-bottom:.15em;
}
.lot-title--single .lot-no{ font-size:.38em; margin-bottom:.5em }
.lot-title .lot-artist{
  display:block;
  font-family:var(--f-body);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.82em;
  line-height:1.25;
  color:var(--ink);
}
.lot-title .lot-work{
  display:block;
  /* Same typeface as the artist above it, and upright. Without the explicit
     family this inherits --f-display (Bebas Neue) from the h1 rule, so the
     artist read in Montserrat and the work in a condensed display face — two
     different fonts in one title. The weight still separates them. */
  font-family:var(--f-body);
  font-weight:400;
  font-style:normal;
  color:var(--ink-soft);
  line-height:1.3;
}
.lot-title--single .lot-artist{ font-size:.5em; margin-bottom:.25em }
.lot-title--single .lot-work{ font-size:1em }

/* ---------------------------------------------------------
   Labelled prices. One bare figure on an auction lot is ambiguous — is it the
   value, the start, or a live bid? So each amount carries its label.
   --------------------------------------------------------- */
.lot-price{ display:block }
.lot-price__row{
  display:flex; align-items:baseline; gap:.5rem;
  flex-wrap:wrap; line-height:1.35;
}
.lot-price__label{
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); flex:0 0 auto;
}
.lot-price__amt{ font-weight:700; color:var(--ink) }
.lot-price__row--now .lot-price__amt{ color:var(--blue-deep); font-size:1.25em }
.lot-price__row--est .lot-price__amt{ font-weight:600; color:var(--ink-soft) }
.woocommerce ul.products li.product .lot-price{ margin-top:.35rem }
.woocommerce div.product .lot-price{ margin:.5rem 0 1rem }
/* The theme styles bare `.price` for a single figure; these rows supply their
   own layout, so stop it forcing them onto one line. */
.woocommerce div.product p.price,
.woocommerce ul.products li.product .price{ display:block }

/* Breathing room under the last spec row — "Estimated value" was sitting hard
   against whatever followed it. */
.lot-specs{ width:100%; margin:1rem 0 2.25rem; border-collapse:collapse }
.lot-specs th,
.lot-specs td{ text-align:left; padding:.5rem .75rem .5rem 0; vertical-align:top;
  border-bottom:1px solid var(--line); font-size:.94rem }
.lot-specs th{ width:34%; font-weight:700; color:var(--ink) }
.lot-specs tr:last-child th,
.lot-specs tr:last-child td{ border-bottom:0; padding-bottom:0 }

/* Back to the catalogue. It now renders after the gallery rather than inside
   it — inside made it a fifth FlexSlider slide and flattened every photograph
   to nothing on the lots with more than one shot.

   Sitting between the two floated columns, a full-width block would push the
   lot info below the picture. So it joins the left column: float left, the
   same width as the gallery, and clear:left — which clears the gallery's float
   and ONLY the gallery's. clear:both was the original mistake, because it
   clears the summary's right float too and drops the whole lot-info column.
   Below WooCommerce's stacking width there are no floats left to reason about. */
.temwa-back{ clear:both; margin:1.1rem 0 0 }
.temwa-back .btn{ width:100% }
@media (min-width:768px){ .temwa-back .btn{ width:auto } }

.lead-register{ font-size:1.05rem }

/* The two intro paragraphs on the home page need air between them. */
.phero__lead + .phero__lead{ margin-top:1rem }

/* ---------------------------------------------------------
   The Live Room. The shortcode ships its own (dark) styling, so all the theme
   has to do is give it room: the parent's page container is narrower than a
   video wants to be, and on a phone the panel needs the full width for the
   bid buttons to be thumb-sized.
   --------------------------------------------------------- */
.cha-liveroom{
  max-width:min(1280px, 100% - 2*var(--pad));
  margin:0 auto 3rem;
  box-shadow:var(--shadow);
}
@media (max-width:900px){
  .cha-liveroom{ max-width:100%; margin-bottom:0; border-radius:0 }
}

/* ---------------------------------------------------------
   Pre-bid banner — the single most important thing on the site until 7pm on
   10 August, and then the second most important thing after the live board.
   --------------------------------------------------------- */
.temwa-strip{
  background:var(--navy);
  color:#fff;
  text-align:center;
  padding:.75rem clamp(1rem,4vw,2rem);
  font-size:.92rem;
  line-height:1.4;
}
.temwa-strip strong{ color:var(--yellow) }
.temwa-strip a{ text-decoration:underline; text-underline-offset:.2em }

/* ---------------------------------------------------------
   Impact figures on the home page.
   --------------------------------------------------------- */
.temwa-impact{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  gap:1.25rem;
  margin:2rem 0;
}
.temwa-impact__item{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:1.4rem 1.25rem;
  box-shadow:var(--shadow-sm);
}
.temwa-impact__n{
  font-family:var(--f-display);
  font-size:clamp(2rem,5vw,2.9rem);
  line-height:1;
  color:var(--blue-deep);
  letter-spacing:.02em;
}
.temwa-impact__l{ margin-top:.4rem; color:var(--ink-soft); font-size:.95rem }

/* ---------------------------------------------------------
   Footer: Temwa's own contact block, so it needs to read as an address
   rather than a link farm.
   --------------------------------------------------------- */
.footer__contact{ font-style:normal; line-height:1.7 }
.footer__reg{ color:var(--muted); font-size:.82rem }


/* ---------------------------------------------------------
   HOME PAGE TITLE — the logo itself, with the words beside it.
   Arial for "Art Auction" as asked, rather than the condensed display face:
   next to the rounded wordmark, Bebas was doing too much.
   --------------------------------------------------------- */
.temwa-title .line > span{ display:flex; align-items:center; gap:.45em; flex-wrap:wrap }
.temwa-title__logo{
  height:1.05em; width:auto; display:block;
  /* Beats WooCommerce's `.woocommerce-page img{height:auto}` — see the header
     logo note above, same trap. */
}
.nav .temwa-title__logo,
.temwa-title .temwa-title__logo{ height:1.05em; width:auto }
.temwa-title__words{
  font-family:Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--ink);
}
@media (max-width:560px){
  .temwa-title .line > span{ gap:.3em }
}

/* ---------------------------------------------------------
   CATALOGUE TILES — centred.
   Ragged left-aligned text under images of wildly different heights read as
   untidy; centring the number, artist, work, price and button lines them up
   down the grid.
   --------------------------------------------------------- */
.woocommerce ul.products li.product{ text-align:center }
.woocommerce ul.products li.product .lot-title,
.woocommerce ul.products li.product .lot-price{ text-align:center }
.woocommerce ul.products li.product .lot-price__row{ justify-content:center }
.woocommerce ul.products li.product .button{ margin-left:auto; margin-right:auto }

/* ---------------------------------------------------------
   "How the live auction works" — the ground rules under the
   live box on Watch Live. A separate branded section, not part
   of the dark live-room widget: bigger, scannable, with a line
   icon per rule.
   --------------------------------------------------------- */
.temwa-howto .howto-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1rem;
  margin-top:1.6rem;
}
.howto-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:18px;
  padding:1.6rem 1.5rem;
  box-shadow:var(--shadow-sm);
}
.howto-card--soft{ background:var(--temwa-pale); border-color:transparent }
/* The price rule is the one people get wrong, so it leads and spans the row. */
.howto-card--lead{
  grid-column:1 / -1;
  background:var(--temwa-pale);
  border-color:transparent;
  border-left:4px solid var(--blue);
}
.howto-card--lead h3{ font-size:1.35rem }
.howto-card--lead p{ font-size:1.05rem }
.howto-card--lead p + p{ margin-top:.7rem }
.howto-card--lead .howto-card__icon{ background:var(--white) }
.howto-card__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:3rem; height:3rem; border-radius:14px;
  background:var(--temwa-pale); color:var(--blue-deep);
  margin-bottom:1rem;
}
.howto-card--soft .howto-card__icon{ background:var(--white) }
.howto-card__icon svg{ width:1.6rem; height:1.6rem }
.howto-card h3{
  font-family:var(--f-body);
  font-size:1.15rem; font-weight:700; letter-spacing:-.01em;
  color:var(--ink); margin:0 0 .45rem;
}
.howto-card p{ font-size:1rem; line-height:1.55; color:var(--ink-soft); margin:0 }
.howto-card a{ color:var(--blue-deep); font-weight:600 }
@media (max-width:560px){
  .howto-card{ padding:1.3rem 1.2rem }
}

/* ---------------------------------------------------------
   Footer: the auctioneer credit, promoted from fine print at
   the very bottom to its own column, with the Generosity Works
   link alongside.
   --------------------------------------------------------- */
.footer__host{ color:var(--cream); font-size:.95rem; line-height:1.5; margin:0 0 .6rem }
.footer__host a{ display:inline; margin:0; font-weight:700; color:#fff }
.footer__col--host a{ font-weight:600 }


/* =========================================================
   PHOTOGRAPHY

   About Temwa and How to Bid were walls of prose. On a page whose
   job is to make a stranger care about Nkhata Bay before they bid,
   text alone was doing none of the work — the charity's own
   photographs do it in a second. Everything below exists to put
   those photographs next to the words without either shouting over
   the other.

   The photographs are Temwa's, resized and re-encoded, and served
   from this theme rather than hotlinked from temwa.org: a page that
   takes card payments should not have its images disappear because
   somebody tidied a media library.
   ========================================================= */

/* Image beside text. Stacks on a phone with the picture first,
   because a photograph is a better invitation into a block of copy
   than its heading is. */
.temwa-split{
  display:grid;
  gap:clamp(1.5rem,4vw,3rem);
  align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:860px){
  .temwa-split{ grid-template-columns:1fr 1fr }
  /* Alternating sides down a long page stops it reading as a list. */
  .temwa-split--flip .temwa-split__media{ order:2 }
}
.temwa-split__media{ margin:0 }
.temwa-split__media img{
  display:block; width:100%; height:auto;
  border-radius:20px;
  box-shadow:var(--shadow);
}
/* Portraits are much taller than landscape shots, and an unconstrained
   one pushes the text it sits beside off the screen. */
.temwa-split__media--tall img{ aspect-ratio:4/5; object-fit:cover }
.temwa-split__body > :first-child{ margin-top:0 }
.temwa-split__body h3{
  font-family:var(--f-body); font-weight:700; letter-spacing:-.015em;
  font-size:clamp(1.35rem,3vw,1.8rem); color:var(--ink); margin:0 0 .75rem;
}
.temwa-split__body p{ color:var(--ink-soft); line-height:1.65 }
.temwa-split__body p + p{ margin-top:.9rem }

/* A caption under a photograph. Small, quiet, and factual — these are
   real people in a real place, and saying where they are is part of
   treating them as such. */
.temwa-cap{
  margin:.7rem 0 0; font-size:.85rem; color:var(--muted); line-height:1.5;
}

/* Facts about a place, set as a list rather than buried in a sentence.
   Numbers this stark are the argument. */
.temwa-facts{ list-style:none; margin:1.2rem 0 0; padding:0 }
.temwa-facts li{
  position:relative; padding:.6rem 0 .6rem 1.6rem;
  border-bottom:1px solid var(--line);
  color:var(--ink-soft); line-height:1.5;
}
.temwa-facts li:last-child{ border-bottom:0 }
.temwa-facts li::before{
  content:""; position:absolute; left:0; top:1.05em;
  width:.5rem; height:.5rem; border-radius:50%;
  background:var(--blue);
}
.temwa-facts strong{ color:var(--ink) }

/* The three programmes, as picture cards. */
.temwa-pillars{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:1.25rem;
  margin-top:1.6rem;
}
.temwa-pillar{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;                 /* clips the photo to the rounded corner */
  box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
}
.temwa-pillar img{
  display:block; width:100%; height:210px; object-fit:cover;
  background:var(--temwa-pale);
}
.temwa-pillar__body{ padding:1.4rem 1.35rem }
.temwa-pillar h3{
  font-family:var(--f-body); font-size:1.15rem; font-weight:700;
  letter-spacing:-.01em; color:var(--ink); margin:0 0 .5rem;
}
.temwa-pillar p{ margin:0; color:var(--ink-soft); font-size:.98rem; line-height:1.55 }
.temwa-pillar__stat{
  display:block; margin-top:.9rem; padding-top:.9rem;
  border-top:1px solid var(--line);
  font-weight:700; color:var(--blue-deep); font-size:.95rem;
}

/* The founding story. It is the most affecting thing Temwa has to
   say and it was not on this site at all, so it gets a panel of its
   own rather than another paragraph. */
.temwa-story{
  background:var(--temwa-pale);
  border-radius:22px;
  padding:clamp(1.6rem,4vw,2.6rem);
  border-left:4px solid var(--blue);
}
.temwa-story h3{
  font-family:var(--f-body); font-weight:700; letter-spacing:-.015em;
  font-size:clamp(1.3rem,3vw,1.7rem); color:var(--ink); margin:0 0 .8rem;
}
.temwa-story p{ color:var(--ink-soft); line-height:1.7; margin:0 }
.temwa-story p + p{ margin-top:.9rem }
.temwa-story__name{
  display:block; margin-top:1.2rem; font-weight:700; color:var(--blue-deep);
  font-size:.9rem; letter-spacing:.06em; text-transform:uppercase;
}

/* Patrons. Names people recognise are a shortcut to trust, so they
   are listed plainly rather than dressed up. */
.temwa-patrons{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  gap:1rem; margin-top:1.5rem; padding:0; list-style:none;
}
.temwa-patrons li{
  background:var(--white); border:1px solid var(--line);
  border-radius:16px; padding:1.1rem 1.2rem;
}
.temwa-patrons b{ display:block; color:var(--ink); font-size:1.02rem; margin-bottom:.2rem }
.temwa-patrons span{ color:var(--ink-soft); font-size:.92rem; line-height:1.5 }

/* A row of photographs used as punctuation between sections. */
.temwa-strip-photos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:1rem; margin-top:1.6rem;
}
.temwa-strip-photos figure{ margin:0 }
.temwa-strip-photos img{
  display:block; width:100%; height:230px; object-fit:cover;
  border-radius:16px; box-shadow:var(--shadow-sm);
}
.temwa-strip-photos figcaption{
  margin-top:.6rem; font-size:.88rem; color:var(--ink-soft); line-height:1.45;
}

/* =========================================================
   HOW TO BID — the three steps.

   The page had every fact on it and no shape: register, pre-bid and
   the live night were all the same weight, so a first-time bidder
   could not see that there were only three things to do. Numbering
   them is the whole fix.
   ========================================================= */
/* Exactly three, so the track count is stated rather than derived.
   auto-fit was laying out four tracks at desktop width and collapsing the
   spare, which left the three cards narrower than the row they sit in. */
.temwa-steps{
  display:grid;
  grid-template-columns:1fr;
  gap:1.1rem;
  margin-top:1.6rem;
  counter-reset:step;
}
@media (min-width:760px){
  .temwa-steps{ grid-template-columns:repeat(3,1fr) }
}
.temwa-step{
  position:relative;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:20px;
  padding:1.5rem 1.4rem 1.4rem;
  box-shadow:var(--shadow-sm);
}
.temwa-step::before{
  counter-increment:step;
  content:counter(step);
  display:flex; align-items:center; justify-content:center;
  width:2.4rem; height:2.4rem; border-radius:50%;
  background:var(--blue); color:#fff;
  font-family:var(--f-body); font-weight:700; font-size:1.1rem;
  margin-bottom:.9rem;
}
.temwa-step h3{
  font-family:var(--f-body); font-size:1.12rem; font-weight:700;
  letter-spacing:-.01em; color:var(--ink); margin:0 0 .45rem;
}
.temwa-step p{ margin:0; color:var(--ink-soft); font-size:.98rem; line-height:1.55 }
.temwa-step p + p{ margin-top:.6rem }
.temwa-step a{ color:var(--blue-deep); font-weight:600 }
/* The step that is due right now. Until the auction starts that is
   pre-bidding, and it should be the one the eye lands on. */
.temwa-step--now{ background:var(--temwa-pale); border-color:transparent }

/* Questions people actually ask, after the three steps rather than
   before them — the detail should not stand between a newcomer and
   the "Register" button. */
.temwa-qa{ margin-top:1.5rem }
.temwa-qa > div{
  padding:1.2rem 0;
  border-bottom:1px solid var(--line);
}
.temwa-qa > div:first-child{ padding-top:0 }
.temwa-qa > div:last-child{ border-bottom:0 }
.temwa-qa h3{
  font-family:var(--f-body); font-size:1.08rem; font-weight:700;
  color:var(--ink); margin:0 0 .4rem; letter-spacing:-.01em;
}
.temwa-qa p{ margin:0; color:var(--ink-soft); line-height:1.6 }
.temwa-qa p + p{ margin-top:.6rem }
.temwa-qa a{ color:var(--blue-deep); font-weight:600 }

/* A closing call to action that is not another paragraph. */
.temwa-cta{
  background:var(--navy);
  color:#fff;
  border-radius:22px;
  padding:clamp(1.8rem,4vw,2.8rem);
  text-align:center;
}
.temwa-cta h3{
  font-family:var(--f-body); font-weight:700; letter-spacing:-.015em;
  font-size:clamp(1.4rem,3.4vw,2rem); margin:0 0 .7rem; color:#fff;
}
.temwa-cta p{ margin:0 auto; max-width:52ch; color:rgba(255,255,255,.88); line-height:1.6 }
.temwa-cta .btn{ margin-top:1.4rem }