/* Hub page: ground, layout, the two tiles. Chrome (rail, menu, burger) is in
   chrome.css. Carried from the Aug draft (_archive/visualisers-hub-20260831),
   with the 36GT row and the "coming soon" state removed: both tiles are live. */

/* Jost ships as a VARIABLE font - 300, 400 and 600 all resolve to one file. */
@font-face { font-family: 'Jost'; src: url('/assets/fonts/jost-var.woff2') format('woff2-variations');
             font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bebas Neue'; src: url('/assets/fonts/bebas-neue-400.woff2') format('woff2');
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/assets/fonts/poppins-300.woff2') format('woff2');
             font-weight: 300; font-style: normal; font-display: swap; }
/* Twisted brand heading font (menu). Licensed; same face as twisted.co. The
   TTF, not the RRC's woff2: that file's hyphen glyph is broken (renders as a
   block of tiny text). Same file as twisted-platform's. */
@font-face { font-family: 'Sugar Magic'; src: url('/assets/fonts/sugarmagic.ttf') format('truetype');
             font-weight: 500; font-style: normal; font-display: swap; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

/* Values read off twisted.co/automotive with getComputedStyle, not eyedropped. */
:root {
  --paper:    #ccc2b8;
  --ink:      #161616;
  --ink-soft: #6b6760;
  --rule:     #aba094;
  --gold:     #d19e38;
  --rail:     rgba(0, 0, 0, .73);
}
body { font-family: 'Jost', sans-serif; background: var(--paper); color: var(--ink); overflow: hidden; }

.layout { display: grid; grid-template-columns: 60px 1fr; height: 100vh; }
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.split { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0;
         }

/* ---- the diagonal break ----
   Both tiles cover the whole split and are clipped along ONE shared diagonal:
   60% across at the top, 40% at the bottom (Luca's line, 2026-10-05). Each
   tile has its own ground and ink; clip-path also clips hit-testing, so each
   link is exactly its shape.
   Content sits in the outer 48% of each side, clear of the line. */
.half { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
        justify-content: center; min-width: 0; min-height: 0;
        padding-top: 16vh; padding-bottom: 2vh; text-decoration: none; color: inherit;
        background: var(--ground); }
/* Everything inside a tile, as one box, for the load fade (hero.js reveal). */
.tile-in { display: flex; flex-direction: column; align-items: center; justify-content: inherit;
           flex: 1 1 auto; width: 100%; min-width: 0; min-height: 0; transition: opacity .5s ease; }
html.hub-loading .tile-in { opacity: 0; }
.half.side-left  { clip-path: polygon(0 0, 60% 0, 40% 100%, 0 100%); padding-left: 1.5vw; padding-right: 52%; }
.half.side-right { clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%); padding-left: 52%; padding-right: 1.5vw; }
/* Deep grey: the site's own charcoal (the rail, #33312e). Both cars are cut
   out of their studios, so any ground works. --ink is caption and pill. */
.ground-dark  { --ground: #33312e; --ink: #ffffff; }
.ground-white { --ground: #ffffff; --ink: #161616; }

/* the page heading, for assistive tech only (index.html) */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Sized by HEIGHT: both frame sets share one canvas and one body height, so
   one height here renders both cars at the same scale. */
.car-box { flex: 0 1 auto; width: 100%; min-height: 0;
           display: flex; align-items: flex-end; justify-content: center; }
/* The layers of one car: base under the word (its studio shadow alone, so the
   tile's own ground shows through), body in front of it. */
.car-stack { position: relative; --car-h: clamp(170px, 51vh, 544px);
             /* the layers' own proportions (989x691), so a narrow
                window scales the whole car down instead of squeezing it: the
                width is the smaller of "full height" and "the space there is",
                and the height always follows the width */
             width: min(100%, calc(var(--car-h) * 989 / 691)); aspect-ratio: 989 / 691; }
.car-base, .car-body, .car-body img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.car-body { z-index: 2; isolation: isolate; }
/* The pointer ON THE CAR (.hot, set by home.js from the car's own shape) or
   tabbing to the tile flips the car to its opposite paint (Luca, 2026-10-05):
   the Defender Jet Black to white, the RRC white to black.
   Both bodies have translucent edges, so they cross-fade with plus-lighter -
   one out as the other comes in, the two ADD, exactly linear, no dip at the
   outline. isolation keeps the addition inside the car. */
.car-body img { mix-blend-mode: plus-lighter; transition: opacity .35s linear; }
.car-body .body-b, .half.hot .body-a, .half:focus-visible .body-a { opacity: 0; }
.half.hot .body-b, .half:focus-visible .body-b { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .car-body img { transition: none; } }

.cap { position: relative; z-index: 2; flex: none; width: 100%; max-width: 460px; text-align: center; padding-top: 3vh; }
.model { font-family: 'Jost', sans-serif; font-size: clamp(17px, 1.5vw, 21px); letter-spacing: 3px;
         text-transform: uppercase; color: var(--ink); font-weight: 400; }

/* twisted.co's EXPLORE pill geometry, drawn in ink. Filled at rest; hover empties it. */
.go { display: inline-block; margin-top: 20px; padding: 8px 10px 8px 20px;
      background: var(--ink); border: 2px solid var(--ink); border-radius: 30px;
      font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 600;
      letter-spacing: 8px; text-transform: uppercase; color: var(--ground);
      transition: background-color .45s ease, color .45s ease, border-color .45s ease; }
/* The pill's hover look follows the car: on while the car is flipped (.hot,
   pointer on the car or on the pill - home.js), not merely anywhere in the tile. */
.half.hot .go, .half:focus-visible .go { background: transparent; color: var(--ink); }
.half:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }

/* No hover lift on the car any more: a transform makes .car-box a stacking
   context, which would pull the word in front of the car while hovered. */

@media (max-width: 900px) {
  body { overflow: auto; }
  .layout { display: block; min-height: 100vh; min-height: 100dvh; }
  /* No divider between the stacked tiles: the draft's border-top here was
     the one rule left on mobile after the accent lines were removed. */
  /* No diagonal on a phone: the tiles stack. */
  .split { display: block; padding-top: 52px; background: #33312e; }   /* the Defender tile below it */
  .half, .half.side-left, .half.side-right { position: relative; clip-path: none;
          justify-content: flex-start; padding: 4vh 20px 6vh; min-height: 44vh; }
  .car-stack { --car-h: clamp(153px, 32vh, 323px); }
}