/* ripvault-landing.css — /rips, the front door to both products.
 *
 * DESIGN PLAN
 *
 *   Colour — the product's own tokens, used as a SWITCH rather than a palette.
 *     ground   #04070F lifting to #080D1A (cosmos), the same night this whole
 *              product lives on
 *     Local Rips   Sacred Gold #C9A84C + Teal #00B8A9
 *     Mint or Print  MGU Orange #E8782C + Green #7CDB3A
 *     neutrals #A8B5BD silver and #FAF5EE ink — both already warm-biased
 *              toward the gold, which is why they read as chosen rather than
 *              as grey that happened to be there
 *
 *   Type — Cinzel for display, Exo 2 for reading, DM Mono for labels and
 *     figures. Not a new pairing: it is the pairing every other Rips screen
 *     uses, and a front door that introduced a fourth face would be announcing
 *     a different product from the one behind it.
 *
 *   Layout — a header rail, a centred two-item switch, two large product
 *     thumbnails side by side, and one panel below that swaps.
 *
 * THE ONE BOLD MOVE: picking a product RETINTS THE PAGE. `data-product` on the
 * wrapper reassigns two accent tokens and everything downstream follows — the
 * switch, the selected card's frame, the CTA, the proof figures. The page you
 * are looking at feels like the product you picked before you have read a word
 * of it. It is the subject's own logic (two products, two palettes, one shell)
 * rather than decoration, and it costs two custom properties.
 *
 * Everything is prefixed .lr- and nothing here relies on ripvault.css's
 * .landing / .thesis / .proof rules — those still style the older surfaces and
 * a shared class name would have the two files quietly fighting over padding.
 *
 * SINGLE THEME, deliberately. This is a night-time product with a gold seal;
 * a light mode would be a different design, not the same one inverted. Every
 * colour is painted explicitly so the page never borrows a host ground.
 */

.lr{
  --lr-accent:#C9A84C;      /* retinted by [data-product] below */
  --lr-accent-2:#00B8A9;
  --lr-ink:#FAF5EE;
  --lr-silver:#A8B5BD;
  --lr-dim:#5E6872;
  --lr-panel:rgba(13,20,38,.72);
  --lr-line:rgba(201,168,76,.18);
  color:var(--lr-ink);
  background:#04070F;
  background-image:radial-gradient(ellipse 900px 560px at 50% -8%,#101d33 0%,#04070F 62%);
  min-height:100vh;
  font-family:'Exo 2',system-ui,sans-serif;
  transition:background-image .5s ease;
}
.lr[data-product="mint"]{
  --lr-accent:#E8782C;
  --lr-accent-2:#7CDB3A;
  --lr-line:rgba(232,120,44,.20);
  background-image:radial-gradient(ellipse 900px 560px at 50% -8%,#0e2119 0%,#04070F 62%);
}

/* ── header rail ─────────────────────────────────────────────────────── */
.lr-bar{display:flex;align-items:center;gap:14px;padding:20px clamp(18px,5vw,56px);
  border-bottom:1px solid var(--lr-line)}
.lr-mark{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.lr-mark .lr-seal{width:34px;height:34px;color:var(--lr-accent);flex:0 0 auto;transition:color .4s ease}
.lr-seal svg{width:100%;height:100%;display:block}
.lr-mark b{font-family:Cinzel,serif;font-size:16px;font-weight:700;letter-spacing:.1em}
.lr-mark span{display:block;font-family:'DM Mono',monospace;font-size:8.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--lr-dim);margin-top:2px}
.lr-bar .lr-signin{margin-left:auto}

/* ── the switch ──────────────────────────────────────────────────────── */
.lr-switch{display:flex;justify-content:center;padding:clamp(26px,5vw,44px) 18px 0}
.lr-switch div{display:inline-flex;padding:4px;gap:4px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--lr-line)}
.lr-switch button{appearance:none;background:none;border:0;cursor:pointer;border-radius:999px;
  padding:9px 20px;font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--lr-silver);transition:background .25s,color .25s}
.lr-switch button[aria-selected="true"]{background:var(--lr-accent);color:#0B1412}
.lr-switch button:focus-visible{outline:2px solid var(--lr-accent-2);outline-offset:3px}

/* ── the two products ────────────────────────────────────────────────── */
.lr-shelf{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.5vw,28px);
  max-width:1120px;margin:0 auto;padding:clamp(22px,4vw,38px) clamp(18px,5vw,56px) 0}
@media (max-width:840px){.lr-shelf{grid-template-columns:1fr}}

/* A card is always its own product's colour, whatever the page is set to.
   Without this the retint reached inside the cards too, and in Mint mode the
   Local Rips card's "Build your game" button came out orange — a button
   wearing the other product's paint, which is just a lie about where it goes.
   The chrome follows your choice; the products don't change colour. */
.lr-card[data-for="local"]{--lr-accent:#C9A84C;--lr-accent-2:#00B8A9}
.lr-card[data-for="mint"]{--lr-accent:#E8782C;--lr-accent-2:#7CDB3A}

.lr-card{display:flex;flex-direction:column;background:var(--lr-panel);
  border:1px solid rgba(168,181,189,.14);border-radius:18px;overflow:hidden;
  transition:border-color .3s,transform .3s,box-shadow .3s}
.lr-card[data-on="true"]{border-color:var(--lr-accent);
  box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 0 1px var(--lr-accent) inset}
.lr-card:hover{transform:translateY(-3px)}

/* The thumbnail is a real frame from the real screen, so it gets room and a
   ground of its own rather than being cropped into a banner. */
.lr-shot{position:relative;padding:22px 22px 0;display:flex;justify-content:center;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 70%)}
.lr-shot img{width:min(230px,64%);height:auto;display:block;border-radius:14px;
  box-shadow:0 22px 44px rgba(0,0,0,.6)}
.lr-body{padding:20px 24px 24px;display:flex;flex-direction:column;gap:11px;flex:1}
.lr-kicker{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--lr-accent-2)}
.lr-card h2{font-family:Cinzel,serif;font-size:clamp(20px,2.4vw,25px);font-weight:700;
  line-height:1.22;text-wrap:balance;margin:0}
.lr-card p{font-weight:300;font-size:14.5px;line-height:1.68;color:var(--lr-silver);
  margin:0;max-width:46ch}
.lr-card .lr-go{margin-top:auto;padding-top:6px}

/* ── buttons ─────────────────────────────────────────────────────────── */
.lr-btn{display:inline-block;text-decoration:none;cursor:pointer;border:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--lr-accent) 82%,#fff),var(--lr-accent));
  color:#0B1412;font-family:Cinzel,serif;font-weight:700;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:13px 22px;border-radius:10px}
.lr-btn:focus-visible{outline:2px solid var(--lr-accent-2);outline-offset:3px}
.lr-btn.ghost{background:none;border:1px solid var(--lr-line);color:var(--lr-silver)}
.lr-btn.ghost:hover{color:var(--lr-ink);border-color:var(--lr-accent)}
.lr-btn.sm{padding:10px 16px;font-size:11px}

/* ── the swapping panel ──────────────────────────────────────────────── */
.lr-panel{max-width:900px;margin:0 auto;padding:clamp(30px,4vw,48px) clamp(18px,5vw,32px) 76px}
.lr-pane[hidden]{display:none}
.lr-thesis{border-left:2px solid var(--lr-accent);padding:4px 0 4px 20px;max-width:66ch}
.lr-thesis p{font-size:16.5px;line-height:1.7;font-weight:300;margin:0}
.lr-thesis p b{font-weight:600;color:var(--lr-ink)}
.lr-thesis small{display:block;font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--lr-dim);margin-top:12px}
/* Separators are drawn by the CELLS, not by a background showing through a
   1px gap. The gap trick paints any leftover grid area too, so at phone width
   — five items over two rows of three — the empty sixth slot came out as a
   solid gold block. Outlines only exist where a cell does. */
.lr-proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  border:1px solid var(--lr-line);border-radius:14px;overflow:hidden;margin-top:26px}
.lr-proof div{outline:1px solid var(--lr-line);background:#080D1A;padding:18px 16px;font-family:'DM Mono',monospace;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--lr-dim);line-height:1.7}
.lr-proof b{display:block;font-family:Cinzel,serif;font-size:23px;letter-spacing:.02em;
  color:var(--lr-accent);text-transform:none;margin-bottom:4px;font-variant-numeric:tabular-nums}
.lr-fine{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.16em;line-height:1.9;
  color:var(--lr-dim);margin-top:26px}
.lr-fine a{color:var(--lr-silver)}

/* The demo cabinet, revealed rather than shown — it is a flourish, and it waits
   until somebody asks for it. */
.lr-demo{margin-top:26px}
.lr-demo[hidden]{display:none}

@media (prefers-reduced-motion:reduce){
  .lr,.lr-card,.lr-switch button,.lr-mark .lr-seal{transition:none}
  .lr-card:hover{transform:none}
}