@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Barlow+Condensed:wght@600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

/* ---------------------------------------------------------------
   TOKENS
   Palette pulled straight from the photographed shovel: forged
   iron, oxidised rust, brass hardware, worn canvas. Nothing here
   is a generic SaaS blue/cream — it's the object's own materials.
----------------------------------------------------------------*/
:root{
  --iron:#161512;         /* forged steel / near-black */
  --iron-soft:#232019;
  --rust:#b5501f;         /* oxidised metal, primary accent */
  --rust-deep:#8a3c16;
  --brass:#c69a3a;        /* hardware / tag-stamp gold */
  --canvas:#efe8d6;       /* worn canvas background */
  --canvas-deep:#e2d8bd;
  --paper:#faf7ee;        /* card surface */
  --steel:#6d6a5e;        /* muted secondary text */
  --line:#d8cfb5;
  --safety:#b23a2b;       /* live/urgent marker only */
  --ok:#3f6b3a;

  --display: 'Barlow Condensed', 'Archivo Black', sans-serif;
  --stamp: 'Archivo Black', 'Barlow Condensed', sans-serif;
  --body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation-duration:.01ms !important;transition-duration:.01ms !important}}

body{margin:0;font-family:var(--body);color:var(--iron);background:var(--canvas)}
a{text-decoration:none;color:inherit}
button,input{font:inherit}
:focus-visible{outline:3px solid var(--rust);outline-offset:2px}

/* ---------------------------------------------------------------
   HEADER
----------------------------------------------------------------*/
.site-header{
  height:64px;border-bottom:2px solid var(--iron);
  display:flex;align-items:center;justify-content:center;gap:72px;
  position:sticky;top:0;background:var(--canvas)f2;backdrop-filter:blur(10px);z-index:20;
}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:.01em;text-transform:uppercase}
.brand-mark{
  font-size:15px;font-family:var(--mono);font-weight:600;
  background:var(--iron);color:var(--canvas);
  padding:3px 6px;border-radius:3px;letter-spacing:.02em;
}
.nav{display:flex;gap:30px;font-size:13px;font-weight:600;color:var(--steel);text-transform:uppercase;letter-spacing:.04em}
.nav a{border-bottom:2px solid transparent;padding-bottom:2px}
.nav a:hover{color:var(--iron);border-color:var(--rust)}
.header-actions{display:flex;align-items:center;gap:12px}

.button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:3px;padding:13px 24px;font-weight:700;font-size:13px;cursor:pointer;text-transform:uppercase;letter-spacing:.04em;transition:transform .12s ease, box-shadow .12s ease}
.button:active{transform:translateY(1px)}
.button:disabled{opacity:.5;cursor:not-allowed;transform:none}
.button-dark{background:var(--iron);color:var(--canvas);padding:10px 18px}
.button-dark:hover{background:var(--iron-soft)}
.button-blue{background:var(--rust);color:#fff;box-shadow:0 3px 0 var(--rust-deep)}
.button-blue:hover{filter:brightness(1.05)}
.button-blue:active{box-shadow:0 1px 0 var(--rust-deep)}
.button-full{width:100%}

/* ---------------------------------------------------------------
   HERO
----------------------------------------------------------------*/
.hero{text-align:center;padding:30px 24px 65px;overflow:hidden}
.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;
  color:var(--rust);margin:0 0 14px;text-transform:uppercase;
}
.hero h1{
  font-family:var(--stamp);font-size:64px;line-height:.96;letter-spacing:-.01em;
  margin:22px 0 10px;font-weight:400;text-transform:uppercase;color:var(--iron);
}
.punchline{
  font-family:var(--mono);font-size:14px;font-weight:600;color:var(--rust);
  text-transform:uppercase;letter-spacing:.03em;margin:0 0 18px;
}
.hero-subtitle{font-size:16px;color:var(--steel);margin:0 auto;max-width:620px;line-height:1.5}

.auction-meta{width:min(560px,100%);margin:32px auto 0;font-family:var(--mono);font-size:12px;color:var(--steel)}
.auction-meta strong{font-size:24px;color:var(--iron);font-weight:600}
.auction-meta b{color:var(--rust)}
.auction-meta span{padding:0 8px;color:var(--line)}
.progress{height:8px;background:var(--canvas-deep);border:1px solid var(--iron);border-radius:1px;margin:12px 0 9px;overflow:hidden}
.progress span{display:block;height:100%;background:repeating-linear-gradient(135deg,var(--rust),var(--rust) 8px,var(--rust-deep) 8px,var(--rust-deep) 16px);width:0;transition:width .3s}
.auction-meta small{font-size:11px;display:block;font-family:var(--body);color:var(--steel)}

.shovel-stage-3d{
  position:relative;max-width:900px;height:560px;margin:34px auto 0;
  border-radius:6px;border:1px solid var(--iron);overflow:hidden;
  background:
    radial-gradient(circle at 35% 25%, #2a2620, transparent 60%),
    var(--iron);
  box-shadow:0 20px 50px #00000030;
  cursor:grab;
}
.shovel-stage-3d:active{cursor:grabbing}
.shovel-stage-3d::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--canvas)09 1px, transparent 1px),linear-gradient(90deg, var(--canvas)09 1px, transparent 1px);
  background-size:24px 24px;opacity:.5;
}
#shovel-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.stage-hint{
  position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:2;
  font-family:var(--mono);font-size:10.5px;color:#fff;letter-spacing:.05em;
  text-transform:uppercase;background:#000000aa;border:1px solid #ffffff33;border-radius:99px;padding:5px 12px;
  pointer-events:none;
}
.stage-loading,.stage-error{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:3;
  font-family:var(--mono);font-size:12.5px;color:var(--canvas);text-align:center;padding:20px;
}
.stage-loading{display:flex}
.stage-error{color:var(--rust)}

/* ---------------------------------------------------------------
   MANIFESTO / BANNER
----------------------------------------------------------------*/
.manifesto{text-align:center;padding:46px 24px 60px}
.manifesto p{font-family:var(--display);font-size:24px;font-weight:600;margin:0 0 12px;letter-spacing:0}
.manifesto span{font-size:15px;color:var(--steel)}
.cta-row{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:30px}

.black-banner{
  background:var(--iron);color:var(--canvas);min-height:400px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:50px 20px;position:relative;
}
.black-banner::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
  background:repeating-linear-gradient(90deg,var(--brass),var(--brass) 14px,transparent 14px,transparent 28px);
}
.black-banner h2{font-family:var(--stamp);font-size:58px;letter-spacing:0;margin:0;line-height:.96;text-transform:uppercase}
.black-banner h3{font-family:var(--stamp);font-size:46px;letter-spacing:0;color:var(--rust);margin:8px 0 0;line-height:1.02;text-transform:uppercase}

/* ---------------------------------------------------------------
   AUCTION SECTION + TAG-STYLE SPOT CARDS
   Signature element: cards are shaped like the actual brass price
   tags photographed on the shovel handle — a die-cut notch and a
   punched hole, tying the UI directly back to the product photo.
----------------------------------------------------------------*/
.auction-section{background:var(--paper);padding:90px 24px 100px;border-top:2px solid var(--iron);border-bottom:2px solid var(--iron)}
.auction-intro{max-width:760px;margin:0 auto 34px}
.live{font-family:var(--mono);font-size:12px;color:var(--steel);text-transform:uppercase;letter-spacing:.06em}
.live span{display:inline-block;width:8px;height:8px;background:var(--safety);border-radius:50%;margin-right:8px;box-shadow:0 0 0 3px #b23a2b22}
.auction-intro h2{font-family:var(--stamp);font-size:38px;margin:16px 0 10px;letter-spacing:0;text-transform:uppercase;font-weight:400}
.auction-intro p{font-size:14px;color:var(--steel);line-height:1.55;margin:7px 0}
.rule-note{padding:13px 15px;background:var(--canvas);border:1px solid var(--iron);border-radius:3px;font-family:var(--mono);font-size:12.5px}

.spot-grid{max-width:1280px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.spot-card{
  position:relative;background:var(--paper);
  border:2px dashed var(--rust);border-radius:4px;
  padding:20px 20px 20px 34px;
}
.spot-card::before{
  /* punched hole, like the tags in the shovel photo */
  content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;background:var(--iron);
  box-shadow:0 0 0 3px var(--canvas-deep);
}
.spot-card-top{display:flex;justify-content:space-between;align-items:center}
.spot-code{font-family:var(--mono);font-weight:700;font-size:11px;background:var(--iron);color:var(--canvas);padding:4px 8px;border-radius:2px;letter-spacing:.03em}
.side-tag{font-family:var(--mono);font-size:9px;color:var(--steel);letter-spacing:.1em;text-transform:uppercase}
.spot-card h3{font-family:var(--display);font-size:19px;margin:16px 0 6px;font-weight:700;text-transform:uppercase}
.current-label{font-family:var(--mono);font-size:10px;color:var(--steel);margin:0;text-transform:uppercase;letter-spacing:.05em}
.current-price{font-family:var(--stamp);font-size:32px;letter-spacing:0;color:var(--rust)}
.bidder{font-size:12px;color:var(--steel);min-height:16px;margin:2px 0 0}
.minimum{font-family:var(--mono);font-size:11.5px;color:var(--steel);border-top:1px dashed var(--line);padding-top:12px;margin-top:14px}
.spot-card.is-sold{border-style:solid;border-color:var(--steel);opacity:.85}
.spot-card.is-sold .current-price{color:var(--iron)}
.spot-card.is-reserved{border-color:var(--brass)}

/* ---------------------------------------------------------------
   HOW IT WORKS
----------------------------------------------------------------*/
.how{padding:90px 24px;max-width:1080px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:80px}
.how h2{font-family:var(--stamp);font-size:36px;line-height:1.05;letter-spacing:0;margin:0;text-transform:uppercase;font-weight:400}
.steps{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.steps article{border-top:2px solid var(--iron);padding-top:16px}
.steps span{font-family:var(--mono);font-size:11px;color:var(--rust);font-weight:600}
.steps h3{font-family:var(--display);font-size:18px;margin:9px 0;font-weight:700;text-transform:uppercase}
.steps p{font-size:13.5px;line-height:1.55;color:var(--steel);margin:0}

/* ---------------------------------------------------------------
   FAQ
----------------------------------------------------------------*/
.faq{max-width:680px;margin:auto;padding:70px 24px 110px}
.faq h2{font-family:var(--stamp);font-size:34px;letter-spacing:0;margin:0 0 28px;text-transform:uppercase;font-weight:400}
details{border-top:1px solid var(--line);padding:18px 0}
details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:650;font-size:15px;font-family:var(--body)}
details p{font-size:13.5px;line-height:1.6;color:var(--steel);max-width:590px}

.footer{padding:26px 30px;border-top:2px solid var(--iron);display:flex;justify-content:space-between;color:var(--steel);font-family:var(--mono);font-size:11px}

/* ---------------------------------------------------------------
   BID DIALOG
----------------------------------------------------------------*/
.bid-dialog{border:2px solid var(--iron);border-radius:6px;padding:0;width:min(470px,calc(100% - 28px));box-shadow:0 25px 80px #00000040}
.bid-dialog::backdrop{background:#0b0a08cc}
.bid-card{position:relative;padding:28px;background:var(--paper)}
.dialog-close{position:absolute;right:15px;top:12px;border:0;background:transparent;font-size:27px;cursor:pointer;color:var(--steel)}
.bid-card h2{margin:0 0 5px;font-family:var(--stamp);font-size:26px;letter-spacing:0;text-transform:uppercase;font-weight:400}
.dialog-muted{font-family:var(--mono);font-size:12px;color:var(--steel);margin:0 0 22px}
.bid-card label{display:block;font-size:12px;font-weight:700;margin:13px 0;text-transform:uppercase;letter-spacing:.03em;color:var(--iron)}
.bid-card input{width:100%;margin-top:7px;border:1px solid var(--iron);border-radius:3px;padding:11px 12px;outline:none;background:var(--canvas);font-weight:500}
.bid-card input:focus{border-color:var(--rust);box-shadow:0 0 0 3px #b5501f22}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field-row label{margin:13px 0}
.logo-drop{
  margin-top:7px;border:2px dashed var(--line);border-radius:6px;padding:16px;
  text-align:center;font-size:11.5px;color:var(--steel);cursor:pointer;background:var(--canvas);
}
.logo-drop:hover{border-color:var(--rust)}
.logo-drop input{display:none}
.logo-drop .logo-drop-name{display:block;margin-top:4px;font-weight:700;color:var(--iron)}
.logo-preview-wrap{margin:16px 0 0;display:flex;flex-direction:column;align-items:center;text-align:center}
.logo-preview-label{margin:0 0 8px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--iron)}
/* Shown at its true shape — tall and narrow, matching the real curved
   decal on the shovel handle exactly (this is the same canvas buffer
   used as that sticker's texture). We deliberately don't rotate this for
   display: rotating the frame also rotates whatever photo is drawn
   inside it, which made photos/text look sideways here while still
   appearing correctly oriented on the real 3D shovel — worse than just
   showing the tag's true tall shape. */
#logo-preview-canvas{width:150px;height:auto;border-radius:8px;box-shadow:0 6px 18px #00000030;background:var(--paper)}
.logo-preview-hint{margin:8px 0 0;max-width:280px}
.personal-note{font-family:var(--body);font-style:italic;font-size:11.5px;color:var(--rust-deep);text-align:center;margin:10px 0 0}
.bid-summary{margin:18px 0;padding:14px;background:var(--canvas);border:1px dashed var(--rust);border-radius:4px;font-family:var(--mono);font-size:11.5px;color:var(--steel)}
.bid-summary>div{display:flex;justify-content:space-between;padding:5px 0}
.bid-summary strong{color:var(--iron)}
.bid-summary .summary-main{border-top:1px solid var(--line);margin-top:5px;padding-top:9px;color:var(--rust);font-weight:700}
.dialog-note{font-size:10.5px;line-height:1.5;color:var(--steel)}
.form-message{min-height:18px;font-size:11.5px;color:var(--safety);margin:10px 0 0;font-family:var(--mono)}
.form-message.success{color:var(--ok)}

@media(max-width:850px){
  .site-header{gap:18px;padding:0 14px;justify-content:space-between}
  .nav{display:none}
  .hero h1{font-size:48px}
  .black-banner h2{font-size:44px}
  .black-banner h3{font-size:35px}
  .how{grid-template-columns:1fr;gap:45px}
  .spot-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .hero{padding-top:30px}
  .hero h1{font-size:38px}
  .shovel-stage-3d{height:460px}
  .spot-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .footer{flex-direction:column;gap:8px}
  .black-banner{min-height:330px}
  .black-banner h2{font-size:34px}
  .black-banner h3{font-size:27px}
  .bid-card{padding:24px 18px}
}