/* Retrove skin v2 — the Claude Design website handoff (17 Aug 2026).
   Shared chrome + tokens for redesigned pages. Load AFTER retrove-tokens.css:
   the :root block below overrides the handful of values the handoff finalised
   differently (ink, muted, hairline, rust). Pages migrate onto this skin one
   at a time; un-ported pages keep the old skin untouched.
   Fonts stay SELF-HOSTED via retrove-fonts.css — never Google Fonts. */

:root {
  --ink: #22362f;
  --muted: #5b6a62;
  --line: #e4ddd0;
  --rust: #c65a33;
  --rust-ink: #a8431f;
  --rust-tint: #f7e4da;
  --forest: #2f4a42;
  --forest-ink: #22362f;
  --forest-tint: #e8ede9;
  --cream: #f6f1e6;
  --canvas: #efe8d8;
  --paper: #ffffff;
  --text-on-dark: #f6f1e6;

  --radius-sm: 12px;   /* inputs, small controls */
  --radius-md: 14px;   /* buttons */
  --radius-lg: 16px;   /* cards */
  --radius-pill: 999px;/* chips, search, status */

  --shadow-rest: 0 1px 2px rgba(34, 54, 47, .06);
  --shadow-raised: 0 2px 4px rgba(34, 54, 47, .05), 0 8px 20px rgba(34, 54, 47, .07);

  --font-display: 'Bricolage Grotesque', 'Avenir Next', sans-serif;
  --font-body: 'Hanken Grotesk', 'Helvetica Neue', sans-serif;
  --font-stamp: 'Special Elite', 'Courier New', monospace; /* wordmark ONLY */
}

/* ---------- base ---------- */
.v2, .v2 body { background: var(--cream); color: var(--ink); font-family: var(--font-body); }
body.v2 { margin: 0; -webkit-font-smoothing: antialiased; }
.v2 * { box-sizing: border-box; }
.v2 a { color: var(--forest); text-decoration: none; transition: color .18s ease; }
.v2 a:hover { color: var(--rust); }
.v2 ::selection { background: var(--rust-tint); color: var(--ink); }
.v2 img { max-width: 100%; }
.v2 button, .v2 input, .v2 select, .v2 textarea { font-family: var(--font-body); }
.v2 input:focus, .v2 select:focus, .v2 textarea:focus { outline: none; border-color: var(--forest); }

.v2 .wrap { max-width: 1180px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 720px) { .v2 .wrap { padding: 0 20px; } }

.v2 .eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.v2 .eyebrow.rust { color: var(--rust-ink); letter-spacing: .24em; }

/* ---------- topbar ---------- */
.v2 .topbar2 { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 20px 40px; border-bottom: 1px solid var(--line); background: rgba(246, 241, 230, .9); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); }
.v2 .topbar2 .brand { display: flex; flex-direction: column; gap: 2px; color: var(--ink); }
.v2 .topbar2 .wm { font-family: var(--font-stamp); font-size: 26px; letter-spacing: .04em; }
.v2 .topbar2 .wm b { color: inherit; font-weight: 400; } /* single-colour wordmark, founder ruling 17 Aug */
.v2 .nav2 { display: flex; gap: 34px; }
.v2 .nav2 a { font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.v2 .nav2 a:hover { color: var(--ink); }
.v2 .nav2 a.active { color: var(--ink); }
.v2 .acts2 { display: flex; align-items: center; gap: 20px; }
.v2 .searchpill { display: flex; align-items: center; gap: 9px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 9px 16px; width: 230px; cursor: pointer; }
.v2 .searchpill svg { width: 16px; height: 16px; flex: none; stroke: var(--muted); }
.v2 .searchpill span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.v2 .iconbtn2 { display: inline-flex; background: none; border: none; padding: 0; cursor: pointer; color: var(--ink); }
.v2 .iconbtn2 svg { width: 20px; height: 20px; }
.v2 .iconbtn2:hover { color: var(--rust); }
.v2 .baglink { font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.v2 .hamburger2 { display: none; background: none; border: none; padding: 0; cursor: pointer; color: var(--ink); }
.v2 .hamburger2 svg { width: 20px; height: 20px; }

@media (max-width: 920px) {
  .v2 .topbar2 { padding: 16px 18px; gap: 14px; }
  .v2 .nav2 { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--cream); border-bottom: 1px solid var(--line); }
  .v2 .nav2.open { display: flex; }
  .v2 .nav2 a { padding: 14px 20px; border-top: 1px solid var(--line); }
  .v2 .searchpill { display: none; }
  .v2 .hamburger2 { display: inline-flex; }
}

/* ---------- buttons ---------- */
.v2 .btn2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--forest); color: #fff; font-size: 15px; font-weight: 600; padding: 14px 24px; border: 1px solid var(--forest); border-radius: var(--radius-md); cursor: pointer; transition: background .18s ease, transform .18s ease, color .18s ease; }
.v2 .btn2:hover { background: var(--forest-ink); border-color: var(--forest-ink); color: #fff; transform: translateY(-2px); }
.v2 .btn2.ghost { background: none; color: var(--forest); }
.v2 .btn2.ghost:hover { background: var(--forest); color: #fff; }
.v2 .btn2.cream { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.v2 .btn2.cream:hover { background: #fff; border-color: #fff; color: var(--ink); }
.v2 .btn2.full { width: 100%; }

/* ---------- cards ---------- */
.v2 .card2 { display: block; color: var(--ink); transition: transform .18s ease; }
.v2 .card2 .ph { position: relative; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); background: var(--canvas); }
.v2 .card2 .ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.v2 .card2:hover { transform: translateY(-4px); }
.v2 .card2:hover .ph img { transform: scale(1.05); }
.v2 .card2 .nm { font-family: var(--font-display); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
.v2 .card2 .pr { font-family: var(--font-display); font-weight: 700; }

/* ---------- chips + status pills ---------- */
.v2 .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: var(--radius-pill); padding: 9px 15px; cursor: pointer; transition: border-color .18s ease; }
.v2 .chip:hover { border-color: var(--forest); }
.v2 .chip.on { background: var(--forest); border-color: var(--forest); color: #fff; }
.v2 .pill2 { display: inline-flex; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--radius-pill); }

/* ---------- footer ---------- */
.v2 .footer2 { max-width: 1180px; margin: 0 auto; padding: 56px 40px 70px; display: flex; align-items: flex-start; justify-content: space-between; gap: 44px; flex-wrap: wrap; }
.v2 .footer2 .fbrand { flex: 0 1 300px; min-width: 240px; }
.v2 .footer2 .fbrand .wm { font-family: var(--font-stamp); font-size: 24px; color: var(--ink); }
.v2 .footer2 .fbrand .wm b { color: inherit; font-weight: 400; }
.v2 .footer2 .fbrand p { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin: 18px 0 0; max-width: 300px; }
/* .cols takes the remaining row width so the three columns spread out instead of
   wrapping on mid-width windows while empty space sits beside them */
.v2 .footer2 .cols { display: flex; gap: clamp(24px, 4vw, 44px); flex-wrap: wrap; flex: 1 1 460px; justify-content: space-between; max-width: 640px; }
.v2 .footer2 .col { display: flex; flex-direction: column; gap: 11px; }
.v2 .footer2 .col b { font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); margin-bottom: 4px; }
.v2 .footer2 .col a { font-size: 14px; color: var(--muted); }
.v2 .footer2 .col a:hover { color: var(--rust); }
@media (max-width: 860px) {
  .v2 .footer2 { flex-direction: column; justify-content: flex-start; padding: 44px 20px 56px; }
  /* The row-layout flex bases (300px / 460px) must not carry into column
     direction, where flex-basis means HEIGHT and pads the boxes with dead space. */
  .v2 .footer2 .fbrand, .v2 .footer2 .cols { flex: 0 0 auto; }
  .v2 .footer2 .cols { justify-content: flex-start; max-width: none; }
}