/* ============================================================
   Car Deal Finder — the walabi design language, applied to a
   collector-car product.

   Faces and values taken from rendervideo.ai and hotelvideo.ai:
   Fraunces over Hanken Grotesk, warm near-black ink, a terracotta
   accent on warm paper, pill controls, two-layer soft shadows and
   a fluid type scale. The auction-catalogue soul stays — oxblood
   and brass survive as secondary accents, photography is still
   treated as plates — but the execution is now the family's.
   ============================================================ */

:root {
  /* --- surfaces: warm, never grey --- */
  --paper: #f4f1ec;
  --card: #fffefb;
  --card-2: #faf7f1;

  /* --- ink --- */
  --ink: #2b2722;
  --ink-2: #6b6359;
  --ink-3: #9a9186;
  --hairline: #eae5dc;
  --hairline-2: #ddd6c9;

  /* --- accents --- */
  --accent: #c2522f;          /* the family terracotta */
  --accent-dark: #a2411f;
  --accent-soft: #fbeee7;
  --accent-light: #e8835a;
  --oxblood: #8c1d18;         /* kept: the auction register */
  --brass: #9a7b3f;
  --brass-soft: #f5ecd9;
  --green: #2f5d50;
  --green-soft: #e7efe9;
  --night: #1a1714;           /* photographic bands */
  --night-2: #241f1a;
  --good: #2e6b46;
  --warn-bg: #f9efdc;
  --warn-ink: #7a5417;
  --bad-bg: #f8e6e1;
  --bad-ink: #8c1d18;

  /* --- type --- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-ui: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* fluid scale: a headline should own the viewport, not sit in it */
  --t-hero: clamp(2.6rem, 5.2vw, 4.2rem);
  --t-h1: clamp(2.1rem, 3.6vw, 3rem);
  --t-h2: clamp(1.6rem, 2.6vw, 2.1rem);
  --t-h3: clamp(1.15rem, 1.5vw, 1.4rem);
  --t-lead: clamp(1.02rem, 1.25vw, 1.18rem);

  /* --- shape --- */
  --r-pill: 9999px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;

  /* --- depth: two layers, tinted with the ink, never black --- */
  --sh-sm: 0 1px 2px rgba(43, 39, 34, .05);
  --sh-md: 0 1px 2px rgba(43, 39, 34, .05), 0 10px 28px -14px rgba(43, 39, 34, .20);
  --sh-lg: 0 2px 4px rgba(43, 39, 34, .05), 0 24px 56px -20px rgba(43, 39, 34, .28);
  --sh-plate: 0 4px 10px rgba(43, 39, 34, .06), 0 30px 70px -26px rgba(43, 39, 34, .34);

  /* --- rhythm --- */
  --gap: 20px;
  --section: clamp(44px, 7vw, 88px);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

* { box-sizing: border-box; }
img { max-width: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--paper);
  color: var(--ink);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;      /* Fraunces carries an opsz axis */
  font-variation-settings: "SOFT" 20, "WONK" 1;   /* the warmth in the family faces */
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.08;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -.01em; line-height: 1.2; }

/* motion vocabulary — one shared curve set (emilkowalski/animation-vocabulary) */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
main { max-width: 1120px; margin: 0 auto; padding: 30px 24px 90px; }

/* ---- masthead ---- */
.topbar {
  display: flex; align-items: center; gap: 30px;
  padding: 16px 32px; background: var(--card);
  border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(180%) blur(12px);
  background: color-mix(in srgb, var(--card) 88%, transparent);
}
.brand {
  font-family: var(--font-display); font-weight: 600;
  color: var(--ink); text-decoration: none; font-size: 1.25rem;
  white-space: nowrap; letter-spacing: -.01em; flex: 0 0 auto;
}
/* the three product destinations sit centre-left, weighted like a masthead */
.mainnav { display: flex; align-items: center; gap: 26px; flex: 1; }
.mainnav a {
  color: var(--ink); text-decoration: none; position: relative;
  font-size: .82rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
  padding: 4px 0;
}
.mainnav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--oxblood); transform: scaleX(0); transform-origin: left;
  transition: transform 200ms var(--ease-out);
}
.mainnav a:hover::after, .mainnav a.on::after { transform: scaleX(1); }
.mainnav a.on { color: var(--oxblood); }

/* account side: quieter, smaller, folds into a menu */
.navright { display: flex; align-items: center; gap: 18px; }
.navright > a {
  color: var(--ink-2); text-decoration: none; white-space: nowrap;
  font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
}
.navright > a:hover { color: var(--oxblood); }
.alertlink { position: relative; }
.alertlink .dot {
  display: inline-block; margin-left: 6px; min-width: 17px; height: 17px;
  line-height: 17px; padding: 0 4px; border-radius: 9px; text-align: center;
  background: var(--oxblood); color: var(--card); font-size: .62rem; letter-spacing: 0;
}

.accountmenu { position: relative; }
.accountmenu > summary {
  list-style: none; cursor: pointer; user-select: none; white-space: nowrap;
  padding: 6px 14px; border: 1px solid var(--hairline-2); border-radius: var(--r-pill);
  color: var(--ink-2); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.accountmenu > summary::-webkit-details-marker { display: none; }
.accountmenu > summary::after { content: " ▾"; opacity: .6; }
.accountmenu > summary:hover, .accountmenu[open] > summary { border-color: var(--oxblood); color: var(--oxblood); }
.accountpanel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 40;
  min-width: 216px; padding: 8px; background: var(--card);
  border: 1px solid var(--hairline-2); border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  animation: sectionIn 180ms var(--ease-out);
}
.accountplan {
  margin: 4px 10px 8px; padding-bottom: 8px; border-bottom: 1px solid var(--hairline);
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: var(--brass);
}
.accountpanel a, .accountpanel button {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: var(--r-md);
  color: var(--ink); text-decoration: none; font-size: .88rem; font-weight: 500;
  background: none; border: none; cursor: pointer; font-family: inherit;
  text-transform: none; letter-spacing: normal;
}
.accountpanel a:hover, .accountpanel button:hover { background: var(--paper); color: var(--oxblood); }
.accountpanel form { margin-top: 4px; border-top: 1px solid var(--hairline); padding-top: 4px; }

/* refined tricolor hairline — a whisper of the livery */
.checker {
  height: 3px; opacity: 1;
  background: linear-gradient(90deg, var(--brass) 0 34%, var(--oxblood) 34% 67%, var(--green) 67% 100%);
}

/* ---- hero ---- */
.hero { text-align: center; padding: 44px 0 24px; position: relative; }
.hero-stripes { display: none; }
.herocar {
  width: min(620px, 94%); margin: 0 auto 26px;
  position: relative; z-index: 1;
}
.herocar img {
  width: 100%; max-height: 42vh; object-fit: cover; height: auto;
  display: block; border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  border: 6px solid var(--card);
  outline: 1px solid var(--hairline-2);
}
.hero h1 { font-size: var(--t-hero); margin: 6px 0 10px; }
.sub { color: var(--ink-2); max-width: 640px; margin: 0 auto 30px; font-size: 1.02rem; text-wrap: pretty; }

/* ---- search form ---- */
.searchform .fields {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px; text-align: left; margin-bottom: 20px;
}
.searchform label {
  display: flex; flex-direction: column; gap: 7px;
  font-size: .82rem; font-weight: 600; color: var(--ink-2); letter-spacing: 0;
}
.searchform input {
  background: var(--card); border: 1px solid var(--hairline-2); border-radius: var(--r-md);
  padding: 13px 15px; color: var(--ink); font-size: 1rem; font-family: inherit;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.searchform input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
button {
  background: var(--accent); color: #fffefb; font-weight: 600; border: none;
  border-radius: var(--r-pill); padding: 14px 30px; font-size: .95rem; cursor: pointer;
  letter-spacing: .01em; font-family: inherit; box-shadow: var(--sh-sm);
  transition: transform 180ms var(--ease-out), background 180ms var(--ease-out),
              box-shadow 180ms var(--ease-out);
}
button:hover { box-shadow: var(--sh-md); transform: translateY(-1px); }
button:hover { background: var(--accent-dark); }
/* press feedback — near-imperceptible, per the frequency tier */
button:active, .watchbtn:active, .viewbtn:active { transform: scale(0.98); }

.recent { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.recentchip {
  background: var(--card); border: 1px solid var(--hairline-2); border-radius: var(--r-pill);
  padding: 6px 16px; color: var(--ink); text-decoration: none; font-size: .86rem;
}
.recentchip:hover { border-color: var(--brass); }
.recent a.muted { text-decoration: none; font-size: .86rem; }

/* ---- search page ---- */
.titlerow { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.searchtitle { font-size: 1.9rem; margin: 8px 0 4px; }
.watchbtn {
  background: var(--card); color: var(--ink); border: 1px solid var(--hairline-2);
  border-radius: var(--r-pill); padding: 10px 20px; font-size: .84rem;
  text-transform: none; letter-spacing: 0; box-shadow: var(--sh-sm);
}
.watchbtn:hover { border-color: var(--accent); color: var(--accent); background: var(--card); }
.watchbtn:hover { background: var(--green); color: var(--card); }

/* agents: quiet index of sources */
.agents { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 24px; }
.agent {
  display: flex; align-items: center; gap: 7px;
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-pill);
  padding: 5px 13px; font-size: .8rem; color: var(--ink-2);
}
.agent .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.agent[data-state="running"] .dot { background: var(--brass); animation: pulse 1s infinite; }
.agent[data-state="done"] .dot { background: var(--good); }
.agent[data-state="failed"] .dot { background: var(--oxblood); }
.agent .afound { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
@keyframes pulse { 50% { opacity: .35; } }

/* ---- the roadway: a photographic plate, kept dark ---- */
.roadway {
  position: relative; height: 122px; margin: 18px 0 10px;
  border-radius: var(--r-md); overflow: hidden;
  background: linear-gradient(180deg, var(--night) 0%, var(--night) 62%, var(--night-2) 62%, var(--night-2) 100%);
  border: 6px solid var(--card);
  outline: 1px solid var(--hairline-2);
  box-shadow: var(--sh-lg);
}
.carwrap {
  position: absolute; bottom: 6px; left: 8px; width: 235px;
  transition: transform 1.1s cubic-bezier(.25,.9,.35,1);
  will-change: transform;
}
.car-img { width: 100%; height: auto; display: block; }
.roadway.driving .car-img { animation: bounce .5s ease-in-out infinite; }
@keyframes bounce { 50% { transform: translateY(1.5px); } }
.speedlines {
  position: absolute; right: 92%; top: 38%; width: 150px; height: 42%;
  opacity: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg,
    transparent 0 9px, rgba(240, 231, 210, .5) 9px 11px, transparent 11px 22px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%);
  mask-image: linear-gradient(90deg, transparent, #000 70%);
}
.roadway.driving .speedlines { opacity: 1; animation: whoosh .35s linear infinite; }
@keyframes whoosh { from { background-position: 0 0; } to { background-position: -44px 0; } }
.road {
  position: absolute; left: 0; right: 0; bottom: 18px; height: 3px;
  background-image: linear-gradient(90deg, #8b8577 0 42px, transparent 42px 78px);
  background-size: 78px 3px; opacity: .55;
}
.roadway.driving .road { animation: roadmove .45s linear infinite; }
@keyframes roadmove { to { background-position: -78px 0; } }
.finishflag { position: absolute; right: 12px; bottom: 32px; font-size: 1.6rem; }
.roadway.parked .carwrap, .roadway.parked .wheel { animation: none; }
.car911 { width: 100%; height: auto; display: block; }

/* ---- banners ---- */
.banner { border-radius: var(--r-md); padding: 12px 18px; margin-bottom: 18px; font-size: .95rem; }
.banner.warn { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid #e3cfa4; }
.banner.error { background: var(--bad-bg); color: var(--bad-ink); border: 1px solid #e0b7b3; }

/* ---- KPIs: catalog figures ---- */
.kpis { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
.kpi {
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-md);
  border-top: 2px solid var(--brass);
  padding: 14px 20px; display: flex; flex-direction: column; gap: 5px; min-width: 130px;
}
.klabel { font-size: .68rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: .14em; font-weight: 600; }
.kval {
  font-family: var(--font-display); font-size: 1.3rem;
  color: var(--ink); font-weight: 700;
  font-variant-numeric: tabular-nums;  /* prices must not jiggle */
}

/* ---- cards ---- */
.card {
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm);
  padding: 26px 30px; margin-bottom: var(--gap);
  position: relative;
}
.card::before { display: none; }
.card h3 { margin: 0 0 6px; font-size: 1.25rem; }
.cardsub { color: var(--ink-2); font-size: .92rem; margin: 2px 0 16px; max-width: 780px; }

/* ---- tables ---- */
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th {
  text-align: left; color: var(--ink-2); font-weight: 600; padding: 9px 10px;
  border-bottom: 1px solid var(--hairline-2);
  font-size: .7rem; text-transform: uppercase; letter-spacing: .12em;
}
.table td {
  padding: 10px; border-bottom: 1px solid var(--hairline);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}
.table.small { font-size: .86rem; }
.table a { color: var(--oxblood); text-decoration: none; }
.table a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.muted { color: var(--ink-3); }
.lowconf td { opacity: .72; }
.pending { color: var(--ink-2); font-style: italic; }

/* ---- gems: the plates of the catalog ---- */
.gem { border: 1px solid var(--hairline-2); border-radius: var(--r-md); margin-bottom: 12px; background: var(--card); }
.gem summary {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  cursor: pointer; list-style: none;
}
.gem summary::-webkit-details-marker { display: none; }
.gem summary:hover { background: #faf7ef; }
.gemscore {
  font-family: var(--font-display);
  background: var(--brass); color: var(--card);
  font-weight: 700; border-radius: var(--r-md); padding: 7px 11px; min-width: 42px; text-align: center;
}
.gemtitle { flex: 1; color: var(--ink); font-weight: 600; overflow-wrap: break-word; }
.gemprice {
  font-family: var(--font-display); color: var(--ink); font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.gemdisc { color: var(--good); font-size: .85rem; font-weight: 600; white-space: nowrap; }
.gemcollector {
  background: var(--green-soft); color: var(--green); border: 1px solid var(--green);
  border-radius: var(--r-pill); padding: 2px 11px; font-size: .74rem; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}
.gemcountry { color: var(--ink-3); font-size: .84rem; }

.verdict { padding: 6px 20px 18px; border-top: 1px solid var(--hairline); }
/* state indication: the verdict plate settles in rather than teleporting
   (occasional frequency; transform+opacity only; 220ms ease-out) */
details[open] .verdict { animation: verdictIn 220ms var(--ease-out); }
@keyframes verdictIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.verdict .prose {
  font-family: var(--font-display); font-style: italic;
  color: var(--ink); font-size: 1.04rem; line-height: 1.6;
}
.vgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.vblock h4, .verdict h4 {
  color: var(--ink-2); text-transform: uppercase; font-size: .68rem;
  letter-spacing: .14em; margin: 14px 0 8px; font-family: var(--font-ui);
}
.vblock ul { margin: 0; padding-left: 18px; line-height: 1.75; }
.tag { display: inline-block; border-radius: var(--r-md); padding: 5px 12px; font-size: .84rem; margin: 4px 6px 0 0; }
.tag.gold { background: var(--brass-soft); color: var(--brass); border: 1px solid var(--brass); }
.tag.blue { background: #e8edf3; color: #34557e; border: 1px solid #b6c4d6; }
.tag.warn { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid #e3cfa4; display: block; }
.chips { margin: 10px 0; }
.chip {
  display: inline-block; background: var(--paper); border: 1px solid var(--hairline-2);
  border-radius: var(--r-pill); padding: 3px 12px; font-size: .78rem; margin: 2px 4px 2px 0; color: var(--ink-2);
}
.disclaimer { font-size: .8rem; }
.viewbtn {
  display: inline-block; background: var(--oxblood); color: var(--card); font-weight: 600;
  border-radius: var(--r-md); padding: 9px 20px; text-decoration: none; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .06em;
}
.viewbtn:hover { background: var(--accent-dark); }

.flipblock {
  background: var(--green-soft); border: 1px solid #c4d5c9; border-radius: var(--r-md);
  padding: 14px 18px; margin: 14px 0;
}
.flipblock h4 { color: var(--green) !important; margin-top: 0 !important; }
.flipblock ul { margin: 0; padding-left: 18px; line-height: 1.75; }
.pos { color: var(--good); }
.neg { color: var(--oxblood); }

.collectorblock {
  background: var(--brass-soft); border: 1px solid #dcc99a; border-radius: var(--r-md);
  padding: 14px 18px; margin: 14px 0;
}
.collectorblock h4 { color: var(--brass) !important; margin-top: 0 !important; }
.collectorblock ul { margin: 0; padding-left: 18px; line-height: 1.75; }

/* ---- quick scan ---- */
.quickcard { border-top-color: var(--green); }

/* ---- alerts ---- */
.linkbtn { background: none; border: none; color: var(--oxblood); cursor: pointer; padding: 0; font-size: .88rem; text-transform: none; letter-spacing: 0; }
.alertrow {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px; border-bottom: 1px solid var(--hairline);
}
.alertrow.unseen { background: var(--brass-soft); border-left: 3px solid var(--brass); }
.alertrow a { color: var(--oxblood); text-decoration: none; }

/* history snapshots */
.snaptoggle { color: var(--ink-2); text-decoration: none; font-size: .86rem; }
.snaptoggle:hover { color: var(--oxblood); }

/* ---- business: pricing, auth, garage ---- */
.offerlabel {
  font-size: .72rem; font-weight: 600; color: var(--brass);
  text-transform: uppercase; letter-spacing: .22em; margin-bottom: 6px;
}
.plangrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px; align-items: stretch; margin-top: 10px;
}
.plancard {
  background: var(--card); border: 1px solid var(--hairline-2); border-radius: var(--r-md);
  padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 8px;
  position: relative;
}
.plancard.featured { border: 2px solid var(--oxblood); box-shadow: 0 14px 36px rgba(140, 29, 24, .12); }
.planbadge {
  position: absolute; top: -11px; left: 24px;
  background: var(--oxblood); color: var(--card); font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; border-radius: var(--r-pill); padding: 3px 12px;
}
.planbadge.gold { background: var(--brass); }
.plancard h3 { margin: 4px 0 0; }
.planprice {
  font-family: var(--font-display); font-size: 2rem; font-weight: 700;
  margin: 2px 0 4px; font-variant-numeric: tabular-nums;
}
.permo { font-size: 1rem; color: var(--ink-2); font-family: var(--font-ui); font-weight: 400; }
.planlist { list-style: none; margin: 4px 0 14px; padding: 0; line-height: 2; flex: 1; }
.planlist .off { color: var(--ink-3); }
/* ---- the button component ------------------------------------------
   Applied to <a> and <button> identically. Before this, .planbtn set only
   width/display, so the same class rendered as a terracotta pill on a
   <button> and as a default blue underlined link on an <a> — which is what
   the homepage's primary CTA was doing. */
.btn, a.btn, button.btn,
.planbtn, a.planbtn, button.planbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 30px; border: 1px solid transparent; border-radius: var(--r-pill);
  font-family: var(--font-ui); font-size: .95rem; font-weight: 600;
  letter-spacing: .01em; line-height: 1; text-align: center; text-decoration: none;
  cursor: pointer; box-shadow: var(--sh-sm);
  background: var(--accent); color: #fffefb;
  transition: background 180ms var(--ease-out), transform 180ms var(--ease-out),
              box-shadow 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.btn:hover, .planbtn:hover {
  background: var(--accent-dark); color: #fffefb;
  transform: translateY(-1px); box-shadow: var(--sh-md);
}
.btn:active, .planbtn:active { transform: translateY(0); box-shadow: var(--sh-sm); }

.btn-secondary, a.btn-secondary {
  background: var(--card); color: var(--ink); border-color: var(--hairline-2);
}
.btn-secondary:hover, a.btn-secondary:hover {
  background: var(--card); color: var(--accent); border-color: var(--accent);
}
.btn-block, .planbtn { width: 100%; }

/* nothing on this site should be reachable by keyboard without showing it */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.periodrow { display: flex; gap: 16px; margin-bottom: 12px; font-size: .9rem; color: var(--ink-2); }
.periodrow label { display: flex; gap: 6px; align-items: center; cursor: pointer; }

.authbox { max-width: 460px; margin: 30px auto; text-align: center; }
.authform { text-align: left; display: flex; flex-direction: column; gap: 14px; margin: 18px 0; }
.authform label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: .72rem; font-weight: 600; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .12em;
}
.authform input {
  background: var(--card); border: 1px solid var(--hairline-2); border-radius: var(--r-md);
  padding: 12px 13px; font-size: 1rem; font-family: inherit;
}
.authbox a { color: var(--oxblood); }

.navcta {
  background: var(--oxblood); color: var(--card) !important;
  border-radius: var(--r-md); padding: 7px 14px;
}
.navplan {
  background: none; border: 1px solid var(--hairline-2); color: var(--ink-2);
  border-radius: var(--r-md); padding: 6px 12px; font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; cursor: pointer;
}
.navplan:hover { border-color: var(--oxblood); color: var(--oxblood); background: none; }

.garagerow { display: flex; gap: 24px; flex-wrap: wrap; }
.garageimg { flex: 0 0 320px; max-width: 100%; }
.garageimg img {
  width: 100%; border-radius: var(--r-md); border: 5px solid var(--card);
  outline: 1px solid var(--hairline-2); box-shadow: var(--sh-md);
}
.noimg {
  width: 100%; aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--ink-3); border: 1px dashed var(--hairline-2); border-radius: var(--r-md);
}
.garageinfo { flex: 1; min-width: 260px; }
.garagevalue {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  margin: 4px 0; font-variant-numeric: tabular-nums;
}
.garageactions { display: flex; gap: 16px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.garagegain { font-weight: 600; margin: 6px 0; font-variant-numeric: tabular-nums; }

/* portfolio total banner */
.portfoliototal {
  display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start;
  border-top: 3px solid var(--oxblood);
}
.portfoliototal .klabel { margin-bottom: 2px; }
.portfoliototal .garagevalue { font-size: 1.7rem; }

/* faster add-a-car form */
.urlrow { display: flex; gap: 10px; margin-bottom: 6px; }
.urlrow input {
  flex: 1; padding: 12px 14px; font-size: 1rem; font-family: inherit;
  background: var(--paper); border: 1px solid var(--hairline-2); border-radius: var(--r-md); color: var(--ink);
}
.urlrow button { flex: 0 0 auto; white-space: nowrap; }
.prefillnote { margin: 2px 0 10px; font-size: .92rem; }
.moreopts { margin: 8px 0 14px; }
.moreopts summary {
  cursor: pointer; color: var(--ink-3); font-size: .92rem; letter-spacing: .04em;
  text-transform: uppercase; user-select: none;
}
.moreopts summary:hover { color: var(--oxblood); }

/* Atelier credit card */
.creditcard { border-left: 3px solid var(--brass); max-width: 720px; margin: 24px auto; }
model-viewer { --poster-color: transparent; }

/* ---- photographic plates: images are framed like catalog plates ---- */
.platebanner {
  width: min(900px, 100%); margin: 0 auto 26px; border-radius: var(--r-md); overflow: hidden;
  border: 6px solid var(--card); outline: 1px solid var(--hairline-2);
  box-shadow: var(--sh-lg);
}
.platebanner img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.platebanner.slim { width: min(1120px, 100%); margin-bottom: 20px; }
.platebanner.slim img { aspect-ratio: 21/6; }

.emptyplate { text-align: center; margin: 20px auto; max-width: 640px; }
.emptyplate img {
  width: 100%; border-radius: var(--r-md); border: 6px solid var(--card);
  outline: 1px solid var(--hairline-2); box-shadow: var(--sh-lg);
  filter: saturate(.85);
}
.emptyplate p { margin-top: 14px; }

/* auth pages: plate beside the form */
.authsplit {
  display: grid; grid-template-columns: 0.85fr 1fr; gap: 40px;
  align-items: center; max-width: 940px; margin: 20px auto;
}
.authplate {
  border-radius: var(--r-md); overflow: hidden; border: 6px solid var(--card);
  outline: 1px solid var(--hairline-2); box-shadow: var(--sh-lg);
}
.authplate img { width: 100%; display: block; aspect-ratio: 3/4; object-fit: cover; }
.authsplit .authbox { margin: 0; text-align: left; }
.authsplit .authbox .sub { margin-left: 0; }

/* beta tag in the masthead */
.betatag {
  font-family: var(--font-ui); font-size: .6rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em; color: var(--brass);
  border: 1px solid var(--brass); border-radius: var(--r-sm); padding: 2px 6px;
  vertical-align: middle; margin-left: 6px;
}

/* everything a member commissioned stays reachable under the main visual */
.mediastrip { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.mediastrip a {
  flex: 0 0 auto; width: 78px; text-decoration: none; color: var(--ink-3);
  font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; text-align: center;
}
.mediastrip img {
  width: 78px; height: 52px; object-fit: cover; display: block; border-radius: var(--r-sm);
  border: 2px solid var(--card); outline: 1px solid var(--hairline-2);
  transition: outline-color 160ms var(--ease-out);
}
.mediastrip a:hover img { outline-color: var(--brass); }
.mediastrip span { display: block; margin-top: 4px; }

/* add a vehicle: a quiet button that opens the form only when wanted */
.addcar { margin: 18px 0 26px; }
.addcarbtn {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  list-style: none; width: fit-content;
  padding: 9px 20px 9px 16px; border: 1px solid var(--hairline-2); border-radius: var(--r-pill);
  background: var(--card); color: var(--ink-2);
  font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
  transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out);
  user-select: none;
}
.addcarbtn::-webkit-details-marker { display: none; }
.addcarbtn:hover { border-color: var(--oxblood); color: var(--oxblood); }
.addcarbtn .plus {
  font-size: 1.1rem; line-height: 1; font-weight: 400;
  transition: transform 220ms var(--ease-out);
}
.addcar[open] > .addcarbtn { border-color: var(--brass); color: var(--ink); margin-bottom: 14px; }
.addcar[open] > .addcarbtn .plus { transform: rotate(45deg); }
.addcarpanel { animation: sectionIn 240ms var(--ease-out); }

/* ---- the cinematic hero: the image is the page, not a framed plate ---- */
.cinehero {
  position: relative; isolation: isolate;
  min-height: min(80vh, 720px);
  display: flex; align-items: center; justify-content: center;
  /* break out of main's 1120px column to the full viewport */
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  margin-top: -30px; margin-bottom: var(--section);
  padding: clamp(70px, 10vw, 130px) 24px;
  overflow: hidden;
}
.cinehero-bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
/* the scrim carries the text, so the photograph never has to be flat */
.cinehero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(26,23,20,.55) 0%, rgba(26,23,20,.28) 45%, rgba(26,23,20,.72) 100%),
    radial-gradient(130% 95% at 50% 42%, transparent 34%, rgba(26,23,20,.46) 100%);
}
.cinehero-body { max-width: 860px; text-align: center; color: #fffefb; }
.cinehero h1 {
  font-size: var(--t-hero); color: #fffefb; margin: 0 0 18px;
  letter-spacing: -.03em; line-height: 1.02;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}
.cinehero h1 em {
  font-style: italic; color: var(--accent-light);
  font-variation-settings: "SOFT" 40, "WONK" 1;
}
.eyebrow {
  display: inline-block; margin: 0 0 22px; padding: 7px 18px;
  border: 1px solid rgba(255, 254, 251, .30); border-radius: var(--r-pill);
  background: rgba(255, 254, 251, .10); backdrop-filter: blur(10px);
  color: #fffefb; font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em;
}
.cinelead {
  font-size: var(--t-lead); color: rgba(255, 254, 251, .88);
  max-width: 620px; margin: 0 auto 30px; text-wrap: pretty;
}
.cinenote { margin-top: 14px; }
.cinenote a { color: rgba(255, 254, 251, .82); font-size: .92rem; }
.cinehero .quickhunt { max-width: 560px; margin: 0 auto; }
.cinehero .quickhunt input {
  background: rgba(255, 254, 251, .96); border-color: transparent;
  box-shadow: var(--sh-lg);
}

/* the two hero actions */
.btn-primary, .btn-ghost {
  display: inline-block; text-decoration: none; border-radius: var(--r-pill);
  padding: 15px 30px; font-weight: 600; font-size: .96rem;
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out),
              background 180ms var(--ease-out);
}
.btn-primary { background: var(--accent); color: #fffefb; box-shadow: var(--sh-md); }
.btn-primary:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: var(--sh-lg); }
.btn-ghost {
  background: rgba(255, 254, 251, .12); color: #fffefb;
  border: 1px solid rgba(255, 254, 251, .34); backdrop-filter: blur(10px);
}
.btn-ghost:hover { background: rgba(255, 254, 251, .22); transform: translateY(-2px); }
.herocta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ================= homepage ================= */
.homehero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: 48px; align-items: center; padding: 30px 0 34px;
}
.homehero h1 { font-size: var(--t-hero); margin: 6px 0 14px; }
.homehero-plate img {
  width: 100%; border-radius: var(--r-md); border: 6px solid var(--card);
  outline: 1px solid var(--hairline-2); box-shadow: var(--sh-plate);
}
.herocta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 24px; }
.herocta .planbtn { max-width: 340px; margin: 0; }
.quickhunt { display: flex; gap: 10px; margin: 24px 0 10px; }
.quickhunt input {
  flex: 1; padding: 15px 18px; font-size: 1.05rem; font-family: inherit;
  background: var(--card); border: 1px solid var(--hairline-2); border-radius: var(--r-md); color: var(--ink);
}
.quickhunt input:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px var(--brass-soft); }
.quickhunt button { padding: 15px 34px; }

.proofbar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px; padding: 30px 34px; margin-bottom: var(--section);
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm);
}
.proofbar div { text-align: center; }
.proofbar strong {
  display: block; font-family: var(--font-display); font-size: 1.9rem; font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.proofbar span {
  display: block; margin-top: 4px; color: var(--ink-3);
  font-size: .7rem; text-transform: uppercase; letter-spacing: .13em;
}

.homemember { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-bottom: var(--section); }
.recentlist { list-style: none; padding: 0; margin: 8px 0 14px; }
.recentlist li { padding: 7px 0; border-bottom: 1px solid var(--hairline); }
.recentlist li:last-child { border-bottom: none; }
.recentlist a { color: var(--ink); text-decoration: none; font-weight: 500; }
.recentlist a:hover { color: var(--oxblood); }
.gemcount { float: right; color: var(--brass); font-size: .82rem; }

.homefeatures {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 30px; margin-bottom: var(--section);
}
.feature img {
  width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--r-lg);
  box-shadow: var(--sh-md); margin-bottom: 16px;
  transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.feature:hover img { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.feature h3 { font-size: 1.35rem; margin: 0 0 8px; }
.feature p { color: var(--ink-2); font-size: .93rem; margin: 0 0 10px; }

.homeproof { border-left: 3px solid var(--green); margin-bottom: var(--section); }
.homeclose { text-align: center; padding: var(--section) 0 24px; border-top: 1px solid var(--hairline); }
.homeclose h2 { font-size: var(--t-h2); margin-bottom: 10px; }

/* ============ the catalogue: vehicles presented as pieces ============ */
.piecegrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 22px; margin-top: 8px;
}
.piececard {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--r-md); overflow: hidden;
  transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out),
              transform 180ms var(--ease-out);
}
.piececard:hover {
  border-color: var(--brass); box-shadow: var(--sh-lg);
  transform: translateY(-2px);
}
.piecethumb { position: relative; background: var(--paper); }
.piecethumb img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.piecethumb .noimg { aspect-ratio: 4/3; border: none; border-radius: 0; }
.pctbadge {
  position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: var(--r-sm);
  font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--card); border: 1px solid var(--hairline-2);
}
.pctbadge.pos { color: var(--good); border-color: #bcd4c4; }
.pctbadge.neg { color: var(--oxblood); border-color: #e2c3c0; }
.tagbadge {
  position: absolute; top: 10px; right: 10px; padding: 3px 8px; border-radius: var(--r-sm);
  font-size: .64rem; font-weight: 700; letter-spacing: .1em;
  background: var(--night); color: var(--brass-soft);
}
.piecebody { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 2px; }
.cardbrand {
  font-weight: 700; font-size: .95rem; margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cardmodel {
  color: var(--ink-2); font-size: .86rem; margin: 0 0 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cardprice {
  font-family: var(--font-display); font-size: 1.32rem; font-weight: 700;
  margin: 0; font-variant-numeric: tabular-nums;
}
.cardmeta { color: var(--ink-3); font-size: .74rem; margin: 0; }
.cardfoot {
  color: var(--ink-2); font-size: .76rem; margin: 10px 0 0;
  padding-top: 9px; border-top: 1px solid var(--hairline);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- the piece page ---- */
.crumbs { color: var(--ink-3); font-size: .8rem; margin: 4px 0 18px; }
.crumbs a { color: var(--ink-2); }
.crumbs span { margin: 0 6px; color: var(--hairline-2); }
.piece { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.piecemedia img {
  width: 100%; border-radius: var(--r-md); border: 6px solid var(--card);
  outline: 1px solid var(--hairline-2); box-shadow: var(--sh-lg);
}
.pricecue { font-size: .84rem; font-weight: 600; margin: 0 0 6px; }
.piecebrand { font-size: var(--t-h1); margin: 0; }
.piecemodel { color: var(--ink-2); font-size: 1.05rem; margin: 2px 0 10px; }
.pieceline { color: var(--ink-2); font-size: .88rem; margin: 0 0 16px; }
.piecevalue {
  font-family: var(--font-display); font-size: 2.1rem; font-weight: 700;
  margin: 0 0 4px; font-variant-numeric: tabular-nums;
}
.ledger {
  display: flex; gap: 32px; margin: 18px 0 4px; padding: 14px 0;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.ledger div { display: flex; flex-direction: column; gap: 2px; }
.ledger strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.pieceactions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 18px; }

.spectable, .comptable { width: 100%; border-collapse: collapse; }
.spectable th, .comptable th {
  text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3); font-weight: 600; padding: 9px 14px 9px 0; white-space: nowrap;
  vertical-align: top; width: 150px;
}
.spectable td, .comptable td { padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.spectable tr:last-child td { border-bottom: none; }
.comptable th { width: auto; border-bottom: 1px solid var(--hairline-2); }
.comptable .num { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.vin { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.piecenotes { margin-top: 16px; color: var(--ink-2); white-space: pre-line; }
.notesfield { display: flex; flex-direction: column; gap: 6px; font-size: .72rem;
  font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .12em; }
.notesfield textarea {
  font-family: inherit; font-size: 1rem; font-weight: 400; text-transform: none;
  letter-spacing: normal; color: var(--ink); padding: 12px 13px;
  background: var(--card); border: 1px solid var(--hairline-2); border-radius: var(--r-md);
}

/* a listing that contradicts itself — flagged, never silently resolved */
.conflictcard { border-left: 3px solid var(--brass); }

/* footer: the legal pages reachable from anywhere */
.sitefoot {
  max-width: 1120px; margin: 0 auto; padding: 28px 24px 40px;
  border-top: 1px solid var(--hairline-2);
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  color: var(--ink-3); font-size: .8rem;
}
.sitefoot nav { display: flex; gap: 18px; }
.sitefoot a { color: var(--ink-2); text-decoration: none; }
.sitefoot a:hover { color: var(--oxblood); }
.sitefoot .muted { margin-left: auto; }

.legal { max-width: 720px; margin: 0 auto; }
.legal h1 { font-size: var(--t-h1); margin-bottom: 4px; }
.legal h3 { font-size: 1.2rem; margin: 30px 0 8px; }
.legal p { color: var(--ink-2); margin: 0 0 12px; }
.legal ul { color: var(--ink-2); padding-left: 20px; margin: 0 0 14px; }
.legal li { margin-bottom: 7px; }

/* social sign-in: the fastest way in, offered before the form */
.ssobox { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.ssobtn {
  display: block; text-align: center; text-decoration: none;
  padding: 13px 18px; border-radius: var(--r-md); font-weight: 600; font-size: .92rem;
  border: 1px solid var(--hairline-2); background: var(--card); color: var(--ink);
  transition: border-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.ssobtn:hover { border-color: var(--brass); }
.ssobtn:active { transform: scale(0.99); }
.ssodivider {
  text-align: center; color: var(--ink-3); font-size: .74rem;
  text-transform: uppercase; letter-spacing: .12em; margin: 8px 0 0; position: relative;
}
.ssodivider::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: var(--hairline-2);
}
.ssodivider span { background: var(--paper); padding: 0 12px; position: relative; }

.inlineform { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.inlineform select, .inlineform input[type=text], .inlineform input:not([type=checkbox]) {
  padding: 6px 8px; font-size: .82rem; font-family: inherit; border-radius: var(--r-sm);
  border: 1px solid var(--hairline-2); background: var(--card); color: var(--ink); max-width: 130px;
}
.inlineform .watchbtn { padding: 6px 14px; font-size: .78rem; }
.inlineform .toggle { font-size: .74rem; gap: 5px; }

/* settings */
.settingsgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.stackform { display: flex; flex-direction: column; gap: 14px; max-width: 460px; }
.stackform label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; color: var(--ink-2); font-size: .95rem; }
.stackform input:not([type=checkbox]), .stackform select {
  padding: 11px 13px; font-size: 1rem; font-family: inherit; font-weight: 400;
  background: var(--paper); border: 1px solid var(--hairline-2); border-radius: var(--r-md); color: var(--ink);
}
.togglegroup { border: 1px solid var(--hairline-2); border-radius: var(--r-md); padding: 12px 14px; }
.togglegroup legend { font-weight: 700; color: var(--ink-2); padding: 0 6px; font-size: .9rem; }
.toggle { flex-direction: row !important; align-items: center; gap: 10px; font-weight: 400 !important; color: var(--ink) !important; cursor: pointer; }
.toggle input { width: auto; }
.banner.ok { background: var(--green-soft); color: var(--green); border: 1px solid #c4d5c9; }

/* prevent the jarring swap when quick scan / results are injected:
   children settle in on insertion (occasional frequency) */
#quick > *, #results > * { animation: sectionIn 240ms var(--ease-out); }
@keyframes sectionIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* reduced motion: gentler, not zero — and stop the continuous loops */
@media (prefers-reduced-motion: reduce) {
  .roadway.driving .car-img,
  .roadway.driving .speedlines,
  .roadway.driving .road,
  .agent[data-state="running"] .dot { animation: none; }
  details[open] .verdict, #quick > *, #results > * { animation-duration: 80ms; }
  .carwrap { transition-duration: 200ms; }
}

/* responsive — keep last so overrides win by order */
@media (max-width: 760px) {
  .hero h1 { font-size: 1.8rem; }
  .topbar { flex-wrap: wrap; gap: 14px 20px; }
  .mainnav { order: 3; flex-basis: 100%; gap: 20px; }
  .navright { margin-left: auto; }
  .searchform .fields { grid-template-columns: 1fr 1fr; }
  .topbar nav a { margin-left: 14px; letter-spacing: .08em; }
}
@media (max-width: 900px) {
  .settingsgrid { grid-template-columns: 1fr; }
  .homehero { grid-template-columns: 1fr; gap: 26px; }
  .homehero h1 { font-size: 2.2rem; }
  .homemember { grid-template-columns: 1fr; }
  .piece { grid-template-columns: 1fr; gap: 24px; }
  .authsplit { grid-template-columns: 1fr; gap: 24px; }
  .authplate { max-width: 380px; margin: 0 auto; }
  .authplate img { aspect-ratio: 16/10; }
}
@media (max-width: 460px) {
  .searchform .fields { grid-template-columns: 1fr; }
  .urlrow { flex-direction: column; }
  .portfoliototal { gap: 20px; }
}