/* My little collection.... — the look. Edit this file; the next build wears it.
   6 September 2026, third pass. Red, white and black. Red is used for exactly
   four things: the active filter, the primary button, the "letting go" badge
   and the search focus. Everything else is black on white. Phone first. */

:root{
  --ink:#0b0b0b; --mute:#6a6a6a; --line:#e4e4e2; --tile:#fff; --bg:#f6f6f4; --head:"Archivo","Inter",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --red:#d81f26; --red-dark:#b8161c; --r:12px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.5 "Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;letter-spacing:-.005em}
a{color:inherit;text-decoration:none}
img{max-width:100%}
:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:6px}
.wrap{max-width:1280px;margin:0 auto;padding:0 20px}
@media(min-width:900px){.wrap{padding:0 40px}}

/* ---------- top bar: black on white, a red rule underneath */
header.top{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(0,0,0,.02)}
header.top::after{content:"";display:block;height:3px;background:var(--red)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:20px}
.brand{font-family:var(--head);font-weight:800;font-size:21px;letter-spacing:-.02em;white-space:nowrap}
.tag{display:none;color:var(--mute);font-size:13.5px}
.tagbrand{font-family:var(--head);font-weight:800;font-size:17px;letter-spacing:-.01em;text-transform:uppercase;white-space:normal;color:var(--ink)}
@media(min-width:700px){.tag{display:inline}}
.back{color:var(--ink);font-size:14px;font-weight:600;padding:10px 0}

/* ---------- the note */
.note{margin:34px 0 14px;padding:28px 28px 24px;border-left:4px solid var(--red);background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04);border-radius:0 var(--r) var(--r) 0}
.note p{margin:0 0 18px;color:#222;font-size:15.5px;line-height:1.65}
.note p:last-child{margin:0;color:var(--mute)}

/* ---------- search + chips */
.bar{margin:44px 0 36px;position:relative}
.bar input{width:100%;padding:18px 48px 18px 52px;font:inherit;font-size:17px;border:2px solid var(--ink);
  border-radius:999px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.05);outline:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230b0b0b' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:20px center;background-size:20px}
.bar input:focus{border-color:var(--red);outline:none}
.bar span{display:block;margin:10px 0 0 22px;color:var(--red);font-size:13px;font-weight:700;min-height:16px}
.chips{display:flex;gap:12px;overflow-x:auto;padding:4px 0 52px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:0 0 auto;font:inherit;font-family:var(--head);font-size:14px;font-weight:700;min-height:42px;padding:0 18px;border-radius:999px;
  border:1.5px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer}
.chips button.on{background:var(--red);border-color:var(--red);color:#fff}
.chips .sep{flex:0 0 1px;background:var(--line);margin:6px 4px}
.none{color:var(--mute);padding:30px 0;text-align:center}

/* ---------- headings */
h2.cat{font-family:var(--head);font-size:24px;font-weight:900;letter-spacing:-.01em;text-transform:uppercase;margin:44px 0 22px;display:flex;align-items:baseline;gap:8px}
h2.cat span{font-size:13px;font-weight:600;color:var(--mute)}

/* ---------- grid */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 16px}
.chips+.grid{margin-top:0}
@media(min-width:600px){.grid{grid-template-columns:repeat(3,1fr);gap:30px 22px}}
@media(min-width:900px){.grid{grid-template-columns:repeat(4,1fr);gap:36px 26px}}
@media(min-width:1200px){.grid{grid-template-columns:repeat(5,1fr)}}

/* ---------- card */
.card{display:block;position:relative;border-radius:var(--r);background:transparent;transition:transform .15s ease,box-shadow .15s ease}
@media(hover:hover){.card:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.09)}.card:hover img{transform:scale(1.02)}.card:hover .n{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}}
.card:active{transform:scale(.985)}
.card .ph{overflow:hidden;border-radius:var(--r);background:#fff;border:1px solid var(--line);box-shadow:0 1px 3px rgba(0,0,0,.05)}
.card img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--tile);transition:transform .25s ease}
.card .t{padding:12px 6px 6px}
.card .n{font-family:var(--head);font-weight:700;font-size:14.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .m{color:var(--mute);font-size:12.5px;margin-top:5px}
.card .p{margin-top:10px;font-family:var(--head);font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.card .p .fx,.price .fx{display:block;font-weight:500;color:var(--mute);font-size:12px;margin-top:1px}
.badge{position:absolute;top:10px;left:10px;z-index:1;background:var(--red);color:#fff;font-size:10.5px;
  letter-spacing:.08em;padding:6px 10px;border-radius:999px;text-transform:uppercase;font-weight:700}
.browse .badge{background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
.sold .badge{background:var(--ink)}
.sold .p,.sold .n{color:var(--mute)}.sold img{filter:grayscale(1);opacity:.55}
.browse .p{font-weight:600;color:var(--mute);font-size:13.5px}

/* ---------- item page: hero photo, then the facts and the button, then the rest */
.item{display:flex;flex-direction:column;gap:22px;padding-top:22px}
.hero{display:block;order:0}
.hero img{display:block;width:100%;border-radius:var(--r);background:var(--tile);border:1px solid var(--line)}
.item .facts{order:1}
.item .photos{order:2;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.photos a{display:block}
.photos img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r);background:var(--tile);border:1px solid var(--line)}
@media(min-width:820px){
  .item{display:grid;grid-template-columns:3fr 2fr;grid-template-areas:"hero facts" "photos facts";gap:20px 56px;padding-top:36px}
  .hero{grid-area:hero}.item .photos{grid-area:photos;grid-template-columns:repeat(3,1fr)}
  .item .facts{grid-area:facts;position:sticky;top:90px;align-self:start}}
.facts h2{margin:0 0 4px;font-family:var(--head);font-size:28px;font-weight:900;letter-spacing:-.025em;line-height:1.15}
.facts .m{color:var(--mute);font-size:14px}
.price{font-family:var(--head);font-size:30px;font-weight:900;margin:18px 0 22px;letter-spacing:-.02em}
.price .fx{font-size:14px;margin-top:3px}
.facts dl{display:grid;grid-template-columns:auto 1fr;gap:12px 24px;margin:0 0 26px;font-size:15px;border-top:1px solid var(--line);padding-top:20px}
.facts dt{color:var(--mute)}.facts dd{margin:0;font-weight:600}
.btn{display:block;text-align:center;background:var(--red);color:#fff;padding:17px 18px;border-radius:999px;font-family:var(--head);font-weight:800;font-size:16px;letter-spacing:.01em;transition:background .12s}
.btn:hover{background:var(--red-dark)}
.btn.off{background:#ececec;color:#8a8a8a;pointer-events:none}
.ship{color:var(--mute);font-size:13px;margin-top:16px;line-height:1.6}

/* ---------- footer */
footer{margin-top:72px;border-top:1px solid var(--line);background:#efefed}
footer .wrap{padding-top:34px;padding-bottom:56px;color:var(--mute);font-size:13px;line-height:1.9}
.fcol{flex:1}

/* 4 Oct 2026, System Manager: the status badge sat on top of the ColTiv card's
   wordmark and number. On the grid it now sits under the picture, above the
   name, so the card image is never covered. */
.card{display:flex;flex-direction:column}
.card .ph{order:1}
.card .badge{order:2;position:static;align-self:flex-start;margin:12px 6px 0}
.card .t{order:3;padding-top:8px}


/* The photo viewer, 6 Oct 2026: tap a photo, then swipe through them like a reel. */
.viewer{position:fixed;inset:0;z-index:50;background:#0c0c0e;overflow:hidden;touch-action:none}
.viewer[hidden]{display:none}
.v-track{display:flex;height:100%;transition:transform .28s ease}
.v-track img{flex:0 0 100%;width:100%;height:100%;object-fit:contain;padding:56px 0 48px;box-sizing:border-box;transform-origin:center center;will-change:transform}
.viewer button{position:absolute;background:none;border:0;color:#f2eee6;font-size:44px;line-height:1;cursor:pointer;padding:12px 16px}
.v-x{top:4px;right:6px}
.v-p{left:2px;top:50%;transform:translateY(-50%)}
.v-n{right:2px;top:50%;transform:translateY(-50%)}
.v-c{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#c8c4bc;font:14px/1 system-ui,sans-serif;letter-spacing:.08em}
@media (hover:none){.v-p,.v-n{display:none}}