/* coming-soon.css: the Coming soon page (spec 2026-09-29 §7), the arrivals
   board (theme 0.55.0), ported from the approved page
   brand-assets/landing-page/coming-soon-arrivals/vince-motorsports-coming-soon-arrivals.html
   (.hdr → .vm-cs__hdr, .board → .vm-board, .row → .vm-board__row, .f → .vm-flap, and so on).
   - Only template-parts/coming-soon/page.php loads it, with fonts.css and
     tokens.css and nothing else (inc/coming-soon.php), so it carries its own
     reset and button.
   - wp-theme/visual-checks/check_coming_soon.py measures the page: contrast,
     one screen, the board's words and its motion. compare_layout.py coming-soon
     compares its boxes with the approved page. Re-run both after any change. */

html,body.vm-cs-page{ height:100%; }
body.vm-cs-page{ margin:0; background:var(--vm-lp-ink); color:#fff; font-family:var(--vm-body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; font-feature-settings:"calt" 0; font-synthesis:none; }
.vm-cs,.vm-cs *{ box-sizing:border-box; margin:0; padding:0; }
.vm-cs a{ color:inherit; text-decoration:none; }
.vm-cs a:focus-visible{ outline:2px solid var(--vm-amber); outline-offset:3px; }
/* Text links get a rounded ring; a button's ring follows its own corners, which must not change on focus. */
.vm-cs a:not(.vm-cta):focus-visible{ border-radius:4px; }
.vm-cs img{ display:block; max-width:100%; }
.vm-cs .vm-wrap{ width:100%; max-width:calc(var(--vm-measure) + 2*var(--vm-gutter)); margin:0 auto; padding:0 var(--vm-gutter); }
.vm-cs .vm-nw,.vm-cs .vm-tel{ white-space:nowrap; }
.vm-cs .vm-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.vm-cs .vm-cta{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:0 22px; border-radius:var(--vm-btn-radius); background:var(--vm-amber); color:var(--vm-amber-ink); font-family:var(--vm-ui); font-size:15.5px; font-weight:600; white-space:nowrap; }
.vm-cs .vm-cta:hover,.vm-cs .vm-cta:focus-visible{ background:var(--vm-amber-hover); color:var(--vm-amber-ink); }
.vm-cs .vm-cta svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* One screen from 700 px wide up: the header, the text and the board, the
   address line. Phones scroll. A warm glow sits behind the board. */
.vm-cs{ position:relative; display:flex; flex-direction:column; min-height:100vh; min-height:100svh; overflow:hidden; isolation:isolate;
  background:radial-gradient(55% 60% at 72% 52%,rgba(var(--vm-amber-rgb),.10),rgba(var(--vm-amber-rgb),0) 70%),radial-gradient(120% 80% at 50% 120%,#161b22,rgba(22,27,34,0) 60%); }

.vm-cs__hdr .vm-wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:80px; }
.vm-cs .vm-cs__logo-full{ display:block; }
.vm-cs .vm-cs__logo-ph{ display:none; }
.vm-cs__acts{ display:flex; align-items:center; gap:24px; }
.vm-cs__login{ font-family:var(--vm-ui); font-size:15px; font-weight:600; white-space:nowrap; }
.vm-cs .vm-cs__login:hover{ color:var(--vm-amber); }
.vm-cs__hdr .vm-cta{ height:42px; padding:0 18px; font-size:15px; }

/* The text at left, the board at right; stacked below 1100 px. */
.vm-cs__main{ display:flex; flex:1 0 auto; align-items:center; }
.vm-cs .vm-cs__grid{ display:grid; grid-template-columns:minmax(0,420px) auto; justify-content:space-between; align-items:center; gap:48px; padding-top:24px; padding-bottom:40px; }
.vm-cs__eyebrow{ font-family:var(--vm-ui); font-stretch:125%; font-size:clamp(13px,.9vw,16px); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--vm-amber); }
.vm-cs h1{ margin:.3em 0 .35em; font-family:var(--vm-display); font-size:clamp(44px,5vw,92px); font-weight:800; line-height:1; letter-spacing:-.012em; }
.vm-cs__sub{ font-size:clamp(16px,1.05vw,19px); color:#C9CED6; }
.vm-cs .vm-cs__ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; margin-top:28px; }
.vm-cs__signin{ font-size:15.5px; color:#C9CED6; }
.vm-cs .vm-cs__signin a{ color:#fff; font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.vm-cs .vm-cs__signin a:hover{ color:var(--vm-amber); }
.vm-cs__foot .vm-wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; padding-top:14px; padding-bottom:18px; font-size:13.5px; color:#9AA3AE; }

/* The board. --cw is a letter cell's width and --ch its height. --g is the gap
   between cells. --vm-name-cells and --vm-status-cells come from the markup
   (vince_coming_soon_board_html). */
.vm-cs .vm-board{ --cw:clamp(19px,2.02vw,30px); --ch:calc(var(--cw)*1.46); --g:3px; position:relative; padding:22px 24px 24px; border-radius:14px;
  background:linear-gradient(180deg,#0e1115,#07090b); border:1px solid #232a33; box-shadow:0 40px 90px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05); }
.vm-cs .vm-board__hd{ display:flex; justify-content:space-between; align-items:baseline; gap:24px; padding-bottom:14px; margin-bottom:12px; border-bottom:1px solid #1f262e; }
.vm-board__title{ font-family:var(--vm-ui); font-stretch:125%; font-weight:700; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--vm-amber); white-space:nowrap; }
.vm-board__title::before{ content:""; display:inline-block; width:9px; height:9px; margin-right:10px; border-radius:2px; background:var(--vm-amber); vertical-align:1px; }
.vm-board__place{ font-family:var(--vm-ui); font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#7F8995; white-space:nowrap; }
.vm-cs .vm-board__clock{ margin-left:10px; color:#E8E4DA; font-weight:600; font-variant-numeric:tabular-nums; }
.vm-board__tz{ display:none; }
.vm-cs .vm-board__cols{ display:grid; grid-template-columns:calc(var(--vm-name-cells)*(var(--cw) + var(--g))) auto; column-gap:18px; margin-bottom:8px; font-family:var(--vm-ui); font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#8A94A0; }
.vm-board__row{ display:flex; align-items:center; gap:18px; }
.vm-cs .vm-board__row + .vm-board__row{ margin-top:8px; }
.vm-board__cells{ display:flex; gap:var(--g); }
.vm-flap{ position:relative; display:grid; place-items:center; width:var(--cw); height:var(--ch); border-radius:3px; overflow:hidden;
  background:linear-gradient(180deg,#1f242c 0,#1a1e25 49%,#050607 49%,#050607 51.5%,#171b21 51.5%,#121519 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 0 rgba(0,0,0,.7); }
.vm-flap b{ display:block; font-family:var(--vm-ui); font-stretch:85%; font-weight:650; font-size:calc(var(--ch)*.68); line-height:1; color:#EFEBE1; transform-origin:50% 50%; }
/* Until the script starts turning them, the letters wait hidden. The vm-cs-flip
   class is set in the head only when motion is allowed
   (vince_coming_soon_flip_flag), so a slow script never shows the finished
   board first. If the script never runs, the words show after 4 s. */
.vm-cs-flip .vm-flap b{ visibility:hidden; animation:vm-flap-show 0s linear 4s forwards; }
@keyframes vm-flap-show{ to{ visibility:visible; } }
.vm-board__row.is-soon .vm-flap b{ color:var(--vm-amber); }
.vm-cs .vm-board__led{ width:9px; height:9px; border-radius:50%; background:#2FD36B; box-shadow:0 0 10px rgba(47,211,107,.7); margin-left:-4px; }
/* The orange light pulses three times, then stays on. It waits while the
   script turns the letters (is-flipping) or has yet to start (vm-cs-flip), so
   it pulses once they have settled. Without the script it pulses soon after
   the page opens. */
.vm-cs .vm-board__row.is-soon .vm-board__led{ background:var(--vm-amber); box-shadow:0 0 12px rgba(var(--vm-amber-rgb),.9); animation:vm-board-led 1.6s ease-in-out .6s 3; }
.vm-cs-flip .vm-cs .vm-board__row.is-soon .vm-board__led,
.vm-cs .vm-board.is-flipping .vm-board__row.is-soon .vm-board__led{ animation:none; }
@keyframes vm-board-led{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
@media (prefers-reduced-motion:reduce){
  .vm-cs *{ animation:none!important; }
}

@media (max-width:1100px){
  .vm-cs .vm-cs__grid{ grid-template-columns:minmax(0,1fr); justify-items:start; gap:32px; }
  /* The letters also follow the screen's height, so 1024 x 768 stays one screen. */
  .vm-cs .vm-board{ --cw:clamp(12px,min(3.1vw,2.45vh),30px); }
}
/* A short, narrow landscape screen such as 1024 x 768: less space around the stack. */
@media (max-width:1100px) and (max-height:800px) and (min-width:641px){
  .vm-cs .vm-cs__grid{ padding-top:12px; padding-bottom:24px; gap:24px; }
}
@media (max-width:640px){
  .vm-cs__hdr .vm-wrap{ height:64px; }
  .vm-cs .vm-cs__logo-full{ display:none; }
  .vm-cs .vm-cs__logo-ph{ display:block; }
  .vm-cs__hdr .vm-cta{ display:none; }
  .vm-cs .vm-cs__grid{ padding-top:8px; padding-bottom:28px; gap:26px; container-type:inline-size; }
  .vm-cs h1{ font-size:clamp(40px,11vw,60px); }
  /* The board fills the column: its cells share the width that is left after
     its padding, the gaps and the lights. 100cqi is the column's width, which
     leaves out a desktop window's scrollbar, unlike 100vw. */
  .vm-cs .vm-board{ --g:2px; --vm-cells:calc(var(--vm-name-cells) + var(--vm-status-cells));
    --cw:calc((100vw - 2*var(--vm-gutter) - 59px - var(--g)*var(--vm-cells))/var(--vm-cells));
    width:100%; padding:14px 14px 16px; border-radius:12px; }
  @supports (width:1cqi){
    .vm-cs .vm-board{ --cw:calc((100cqi - 59px - var(--g)*var(--vm-cells))/var(--vm-cells)); }
  }
  .vm-cs .vm-board__hd{ padding-bottom:10px; margin-bottom:10px; }
  .vm-board__title{ font-size:11px; }
  .vm-board__place{ font-size:10.5px; }
  .vm-cs .vm-board__row,.vm-cs .vm-board__cols{ gap:10px; }
  .vm-cs .vm-board__row + .vm-board__row{ margin-top:6px; }
  .vm-cs .vm-board__led{ width:7px; height:7px; margin-left:-2px; }
}
/* Narrow phones: the title line keeps to one line, so the city gives way to "PT" after the time. */
@media (max-width:420px){
  .vm-board__city{ display:none; }
  .vm-board__tz{ display:inline; }
}
/* No script, no clock: the time and its "PT" are left out. */
.vm-cs .vm-board__clock:empty,.vm-cs .vm-board__clock:empty + .vm-board__tz{ display:none; }