/* F · Stack — the product pages (city, golf, race). The product's panel colour becomes the page's theme: a full-colour
   hero with the giant word and the tile live in 3D (with its two colour choices), then what you get, who it's for,
   close-ups, how it works, the details, questions and a closing panel in the same colour. Loads after f.css. */
html.p-city{--pc:var(--city)}
html.p-golf{--pc:var(--golf)}
html.p-race{--pc:var(--race)}
.dir-f.prod{--accent:var(--pc);--accent-hover:color-mix(in srgb,var(--pc) 80%,#000)}
.dir-f.prod[data-season="holiday"]{--accent:var(--pc);--accent-hover:color-mix(in srgb,var(--pc) 80%,#000)}
.prod .link{text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
.prod .menu a[aria-current="page"]{color:var(--pc)}
.dir-f.prod .ph{background:color-mix(in srgb,var(--pc) 12%,transparent)}
.dir-f.prod .on-color .ph{background:rgba(255,255,255,.2)}

/* ---------------------------------------------------------------- hero */
.p-hero{background:var(--pc);color:#FFFFFF;padding-block:var(--s4) var(--s5);overflow:hidden}
.p-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"word" "copy" "tile"}
.p-word{grid-area:word;font:var(--w-3) var(--fs-6)/var(--lh-display) var(--font-display);letter-spacing:var(--display-track)}
.p-copy{grid-area:copy;margin-top:var(--s3)}
.p-h1{max-width:14em;font:var(--w-3) var(--fs-4)/1.05 var(--font-display);letter-spacing:var(--h-track)}
.p-copy .t-lead{margin-top:var(--s2);max-width:26em}
.p-copy .actions{margin-top:var(--s4)}
@media (max-width:479px){ .p-copy .actions{flex-direction:column;align-items:flex-start;gap:var(--s2)} }   /* phones: the link under the button on all three pages (it
                                                                                                 wrapped on some and not others, 10-09) */
.p-copy .facts{margin-top:var(--s3);color:rgba(255,255,255,.86)}
.p-tile{grid-area:tile;display:flex;flex-direction:column;align-items:center;margin-top:var(--s4)}
.p-tile .live{width:116vw;flex:none;margin-bottom:-6%}
/* the two colours a tile comes in, tried on the tile itself */
.p-colors{position:relative;z-index:3;display:inline-flex;gap:4px;padding:4px;border-radius:var(--btn-radius);background:rgba(0,0,0,.24)}
.p-colors button{min-height:44px;padding:0 var(--s3);border:0;border-radius:var(--btn-radius);background:none;color:#FFFFFF;font:var(--w-2) var(--fs-1)/1 var(--font-body);cursor:pointer;transition:background-color .25s,color .25s}
.p-colors button[aria-pressed="true"]{background:#FFFFFF;color:var(--ink)}
@media (hover:hover) and (pointer:fine){ .p-colors button[aria-pressed="false"]:hover{background:rgba(255,255,255,.14)} }
.p-colors button:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
html.js.dir-f:not(.reduce) .p-tile .live{animation:f-drop 1.1s var(--spring) .2s both}
@media (min-width:1024px){
  .p-hero{min-height:calc(100svh - var(--stick-top));display:flex;align-items:center;padding-block:var(--s5) var(--s6)}
  .p-hero-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);grid-template-areas:none;align-items:center}
  .p-word{grid-column:1/-1;grid-row:1}
  .p-copy{grid-column:1/6;grid-row:2;align-self:start;margin-top:var(--s4)}
  .p-tile{grid-column:6/-1;grid-row:1/3;margin:var(--s4) calc(-1 * var(--s3)) 0 0}
  .p-tile .live{width:100%;margin-bottom:-4%}
}

/* ---------------------------------------------------------------- what you get: a close-up held while the list passes */
.feat-grid{display:grid;gap:var(--s5)}
.feat-media{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;background:var(--surface)}
.feat-media img{width:100%;height:100%;object-fit:cover}
.feats{border-top:1px solid var(--line)}
.feat{display:grid;grid-template-columns:2.5em minmax(0,1fr);column-gap:var(--s2);padding-block:var(--s4);border-bottom:1px solid var(--line)}
.feat-n{font:var(--w-2) var(--fs-1)/1.6 var(--font-body);color:var(--pc);font-variant-numeric:tabular-nums}
.feat h3{font:var(--w-3) var(--fs-4)/1.05 var(--font-display);letter-spacing:var(--h-track)}
.feat p{grid-column:2;margin-top:var(--s2);max-width:30em;color:var(--muted)}
.feat-mark{display:inline-block;width:.7em;height:.7em;margin-left:.3em;border-radius:3px;background:var(--route);vertical-align:.05em}
@media (min-width:1024px){
  .feat-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
  .feat-media{grid-column:1/6;position:sticky;top:calc(var(--stick-top) + var(--s4))}
  .feats{grid-column:7/-1}
  .feat{padding-block:var(--s5)}
}

/* ---------------------------------------------------------------- who it's for */
/* phones: a picture and its line side by side; wider screens: three cards */
.for-grid{display:grid;gap:var(--s3)}
.for{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--s3);align-items:center}
.for-media{display:block;border-radius:var(--radius);overflow:hidden;aspect-ratio:1/1;background:var(--surface)}
.for-media img{width:100%;height:100%;object-fit:cover}
.for figcaption{display:grid;gap:4px}
@media (min-width:768px){
  .for-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
  .for{display:block}
  .for-media{aspect-ratio:6/7}
  .for figcaption{margin-top:var(--s2)}
}
.for figcaption b{font:var(--w-2) var(--fs-3)/1.2 var(--font-body)}
.for figcaption span{color:var(--muted)}


/* ---------------------------------------------------------------- race: what's ready */
.ready{background:var(--surface);padding-block:var(--section)}
.ready-grid{display:grid;gap:var(--s4)}
.cities{display:flex;flex-wrap:wrap;gap:var(--s1)}
.cities a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s2);border:1px solid color-mix(in srgb,var(--pc) 35%,var(--line));border-radius:var(--btn-radius);background:var(--bg);
  color:var(--text);text-decoration:none;transition:border-color .2s,background-color .2s}
@media (hover:hover) and (pointer:fine){ .cities a:hover{border-color:var(--pc)} }
.ready-note{color:var(--muted)}
@media (min-width:1024px){
  .ready-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
  .ready-grid .sec-head{grid-column:1/6;margin:0}
  .ready-list{grid-column:7/-1}
}

/* ---------------------------------------------------------------- how it works (the home's, in this colour) */
.prod .steps li{border-top-color:var(--pc)}
.prod .step-n{color:var(--pc)}

/* ---------------------------------------------------------------- details */
.prod .detail-media{aspect-ratio:4/5}
@media (min-width:1024px){ .prod .detail-media{aspect-ratio:16/11} }

/* ---------------------------------------------------------------- closing panel in the product's colour */
.p-close{background:var(--pc)}
.p-close .closing-row>p{color:rgba(255,255,255,.88)}
.p-close .others{display:grid;gap:var(--s2)}
.p-close .kind{background:rgba(0,0,0,.22)}
@media (hover:hover) and (pointer:fine){ .p-close .kind:hover{background:rgba(0,0,0,.3)} }
@media (min-width:1024px){
  .p-close .closing-row .btn{grid-column:1/5;grid-row:2;align-self:start}
  .p-close .others{grid-column:6/-1;grid-row:1/3;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter)}
}

/* reduced motion: the hero tile is simply there */
html.reduce.dir-f .p-tile .live{animation:none}

/* a framed tile on a transparent ground sits on a soft card instead of being cropped */
.for-media.cut-bg{display:grid;place-items:center}
.for-media.cut-bg img{width:88%;height:auto;object-fit:contain;filter:drop-shadow(0 14px 16px rgba(0,0,0,.2))}
.prod .detail-media:has(> img[src*="soft-"]),.prod .detail-media.cut{display:grid;place-items:center}
.prod .detail-media > img[src*="soft-"],.prod .detail-media.cut > img{width:86%;height:auto;object-fit:contain;filter:drop-shadow(0 18px 20px rgba(0,0,0,.22))}