/* Pedestal press – public site.
   Built from the canvas boards "Presse A · som pedestal.com" (PressAHome, PressACategory, PressAMoonConcept)
   and their responsive rules. Desktop measures follow the 1440 px boards; everything scales down to 390 px. */
@font-face { font-family: "Suisse Intl"; src: url("/fonts/SuisseIntl-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Suisse Intl"; src: url("/fonts/SuisseIntl-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "FK Display"; src: url("/fonts/FKDisplay-RegularAlt.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root { --ink: #212121; --ink65: rgba(33,33,33,0.65); --ink45: rgba(33,33,33,0.45); --line: rgba(33,33,33,0.1); --bg: #fafafa; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Suisse Intl", Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.4; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
.disp { font-family: "FK Display", Helvetica, Arial, sans-serif; font-weight: 400; }
.caps { font-size: 12px; font-weight: 500; letter-spacing: 0.48px; text-transform: uppercase; color: var(--ink65); }
.lbl { font-size: 15px; line-height: 1.2; letter-spacing: -0.15px; }
.ulink { all: unset; cursor: pointer; font-size: 13px; color: var(--ink65); text-decoration: underline; text-decoration-color: rgba(33,33,33,0.25); text-underline-offset: 3px; }
.ulink:hover { color: var(--ink); }
.th { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Buttons (.cl light, .cd dark, .chip) */
.cl, .cd { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 120px; padding: 10px 16px 12px; border-radius: 4px; border: 0; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: -0.15px; cursor: pointer; white-space: nowrap; }
.cl { background: #efefef; color: var(--ink); } .cl:hover { background: #e5e5e5; }
.cd { background: var(--ink); color: #fff; } .cd:hover { background: #111; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 8px; border-radius: 4px; background: rgba(33,33,33,0.05); border: 1px solid transparent; font-size: 15px; line-height: 1.2; letter-spacing: -0.15px; color: var(--ink); cursor: pointer; }
.chip:hover { background: rgba(33,33,33,0.1); } .chip.on { background: rgba(33,33,33,0.1); border-color: rgba(33,33,33,0.1); }
.cta-light, .cta-glass { display: inline-flex; align-items: center; justify-content: center; min-width: 150px; padding: 10px 16px 12px; border-radius: 4px; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: -0.15px; }
.cta-light { background: #f5f5f5; color: var(--ink); } .cta-light:hover { background: #eaeaea; }
.cta-glass { background: rgba(255,255,255,0.1); backdrop-filter: blur(17px); -webkit-backdrop-filter: blur(17px); border: 1px solid rgba(255,255,255,0.25); color: #fff; } .cta-glass:hover { background: rgba(255,255,255,0.2); }

/* Header: 48 px, logo at 40 px, nav from 368 px, search + selection right */
.top { position: relative; z-index: 10; height: 48px; border-bottom: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.top .logo { position: absolute; left: 40px; top: 12px; display: flex; align-items: flex-start; gap: 7px; }
.top .logo .wm { width: 97.5px; height: 26.34px; }
.top .logo .pm { width: 38.8px; height: 13.2px; margin-top: 0.7px; opacity: 0.6; }
.top .mainnav { position: absolute; left: 368px; top: 0; height: 47px; display: flex; align-items: center; gap: 4px; }
.top .right { position: absolute; right: 40px; top: 0; height: 47px; display: flex; align-items: center; gap: 4px; }
.navit { display: flex; align-items: center; gap: 2px; padding: 4px 10px 5px; border-radius: 2px; font-size: 15px; line-height: 1.5; letter-spacing: -0.15px; white-space: nowrap; }
.navit:hover, .navit[aria-current="page"] { background: rgba(33,33,33,0.05); }
.navit .n { align-self: flex-start; font-size: 9px; font-weight: 500; line-height: 2; }
.navit svg { width: 24px; height: 24px; }
body.home .top { position: absolute; left: 0; right: 0; top: 0; z-index: 3; background: transparent; border-bottom-color: rgba(255,255,255,0.2); color: #fff; }
body.home .top .wm, body.home .top .pm { filter: invert(1); }
body.home .top .pm { opacity: 0.7; }
body.home .navit:hover, body.home .navit[aria-current="page"] { background: rgba(255,255,255,0.1); }

/* Footer */
.foot { position: relative; height: 511px; box-sizing: border-box; background: var(--ink); border: 8px solid var(--bg); border-top-width: 4px; overflow: hidden; color: #fff; margin-top: 96px; }
.foot .pmark { position: absolute; left: 34px; top: 46px; width: 248.24px; height: 364px; }
.foot .fr { position: absolute; left: calc(50% - 4px); top: 20px; width: min(690px, calc(50% - 24px)); }
.foot h3 { margin: 0 0 16px; height: 20px; display: flex; gap: 2px; align-items: flex-start; font-size: 17px; font-weight: 400; line-height: 1.2; letter-spacing: -0.34px; }
.foot h3 svg { width: 12px; height: 12px; }
.plist { display: flex; gap: 4px; width: 100%; max-width: 677px; }
.fld { position: relative; display: block; height: 74px; border-radius: 4px; }
.fld span { position: absolute; left: 13px; top: 9px; font-size: 15px; line-height: 1.2; letter-spacing: -0.15px; pointer-events: none; }
.fld input { position: absolute; inset: 0; border: 0; background: transparent; font: inherit; font-size: 15px; letter-spacing: -0.15px; padding: 30px 13px 8px; outline: none; width: 100%; }
.plist .fld { background: rgba(255,255,255,0.07); } .plist .fld span { color: #b3b3b3; } .plist .fld input { color: #fff; }
.plist .fld:focus-within { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45); }
.chunky { display: flex; justify-content: space-between; align-items: flex-start; height: 74px; padding: 4px; border-radius: 4px; border: 0; cursor: pointer; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: -0.15px; }
.chunky .l { padding: 4px 8px; }
.foot .chunky { width: 150px; flex-shrink: 0; background: #fff; color: #111; } .foot .chunky:hover { background: #eaeaea; }
.foot .fr { position: absolute; } .foot .msg { position: absolute; left: 0; top: 116px; margin: 0; font-size: 13px; color: #b3b3b3; }
.flinks { margin-top: 97px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 24px; }
.flinks div { display: flex; flex-direction: column; gap: 2px; }
.flinks span { font-size: 13px; color: #b3b3b3; margin-bottom: 1px; }
.flinks a { font-size: 13px; line-height: 1.4; color: #fff; } .flinks a:hover { color: #b3b3b3; }
.fbar { position: absolute; left: 0; right: 0; bottom: 0; height: 58px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 13px; display: flex; justify-content: space-between; align-items: center; padding: 0 260px 0 32px; }
.fbar div { display: flex; gap: 12px; align-items: baseline; }
.fbar .g { color: #b3b3b3; } .fbar b { font-weight: 500; } .fbar a { color: #fff; }

/* ---------- Home ---------- */
.hhero { position: relative; padding-bottom: 4px; background: var(--bg); }
.hhero .stage { position: relative; height: min(max(810px, 56.25vw), 100vh); height: min(max(810px, 56.25vw), 100svh); min-height: 560px; overflow: hidden; background: var(--ink); }
/* Focus ring that reads as intentional, keyboard only */
a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }
.top a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }
.hhero video, .hhero .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hhero .grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 8.6%, rgba(0,0,0,0.04) 20.1%, rgba(0,0,0,0) 28.7%); pointer-events: none; }
.hhero h1 { position: absolute; left: 40px; bottom: 20px; margin: 0; font-size: min(max(160px, 11.1vw), 22vh); line-height: 1; letter-spacing: -0.04em; color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,0.35); white-space: nowrap; }
.hhero .ctas { position: absolute; left: 40px; bottom: calc(min(max(160px, 11.1vw), 22vh) + 36px); display: flex; gap: 8px; }
.hsearch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 96px 40px 104px; }
.stmt { margin: 0; font-size: 40px; line-height: 1.15; letter-spacing: -0.8px; color: var(--ink); max-width: 600px; }
.brand .stmt { max-width: 660px; }
.stmt span { color: var(--ink45); }
.sbox { display: flex; flex-direction: column; gap: 20px; padding-top: 4px; }
.sbox { position: relative; }
.hdd { position: absolute; left: 0; right: 0; top: 92px; z-index: 6; background: #fff; border-radius: 2px; box-shadow: 0 12px 40px rgba(0,0,0,0.12); padding: 12px; max-height: min(560px, 70vh); overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.hdd[hidden] { display: none; }
.hdd .hdl { margin: 8px 8px 4px; font-size: 13px; color: rgba(33,33,33,0.6); }
.hdd .hp { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; padding: 6px 8px; border-radius: 2px; text-decoration: none; }
.hdd .hp:hover, .hdd .hp:focus-visible, .hdd .hall:hover, .hdd .hall:focus-visible { background: rgba(33,33,33,0.05); outline: none; }
.hdd .hph { position: relative; width: 48px; height: 60px; background: #f2f2f2; overflow: hidden; display: block; }
.hdd .hph img, .hdd .hph img.th { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hdd .hpn { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .hdd .hpn b { font-weight: 500; } .hdd .hpn small { font-size: 13px; color: rgba(33,33,33,0.6); }
.hdd .hpf { font-size: 13px; color: rgba(33,33,33,0.6); }
.hdd .hcs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 8px 4px; }
.hdd .hcs .pill { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.hdd .hcs .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 1px rgba(33,33,33,0.15); }
.hdd .hall { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding: 12px 8px; border-top: 1px solid rgba(33,33,33,0.1); font-weight: 500; text-decoration: none; }
@media (max-width: 900px) { .hdd { top: 64px; } }
.sbox .field { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); color: rgba(33,33,33,0.35); }
.sbox .field { align-items: center; color: var(--ink); cursor: text; }
/* A blinking caret that sits on the word, from the top of the S to the baseline, like a real cursor before you click */
.sbox .field .caret { width: 2px; height: 54px; background: var(--ink); flex-shrink: 0; margin-right: -15px; transform: translateY(-3px); animation: caretBlink 1.1s steps(1, end) infinite; }
@keyframes caretBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sbox .field .caret { animation: none; } }
.sbox .field:focus-within .caret, .sbox .field.has .caret { visibility: hidden; }
.sbox .field input { all: unset; flex: 1; min-width: 0; font-family: "FK Display", Helvetica, Arial, sans-serif; color: var(--ink); caret-color: var(--ink); }
.sbox .field input::placeholder { color: rgba(33,33,33,0.35); opacity: 1; }
.sbox .field input::-webkit-search-cancel-button { display: none; }
.sbox .field button { all: unset; cursor: pointer; display: flex; align-self: flex-end; }
.sbox .field .w { font-size: 72px; line-height: 1; letter-spacing: -2.88px; }
.sbox .field svg { margin-bottom: 10px; }
.sbox .sugg { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; }
.sbox .sugg span { color: rgba(33,33,33,0.6); } .sbox .sugg a { font-weight: 500; } .sbox .sugg a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hrow { padding: 4px 8px; display: flex; gap: 8px; }
.tile { position: relative; display: block; flex: 1 1 0; min-width: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; color: #fff; background: #e6e6e6; transition: opacity 200ms linear; }
.tile:hover { opacity: 0.8; }
.tile .tshade { position: absolute; left: 0; right: 0; top: 0; height: 160px; background: linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0)); pointer-events: none; }
.tile .ttl { position: absolute; left: 20px; top: 16px; white-space: nowrap; font-size: 40px; line-height: 1.1; letter-spacing: -1.2px; text-shadow: 0 2px 40px rgba(0,0,0,0.35); }

/* ---------- Category ---------- */
.cintro { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 40px 64px; align-items: start; }
.cintro h1 { margin: 0; display: flex; gap: 4px; font-weight: 400; }
.cintro h1 .disp { font-size: 56px; line-height: 1; letter-spacing: -2.24px; }
.cintro h1 .n { font-size: 13px; font-weight: 500; padding-top: 6px; }
.cstmt { margin: 0; font-size: 32px; line-height: 1.2; letter-spacing: -0.64px; max-width: 660px; }
.cstmt span { color: var(--ink45); }
.cnew { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; letter-spacing: -0.15px; }
.cnew .ctag { font-size: 10px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; padding: 4px 7px; border-radius: 9999px; background: var(--ink); color: #fff; }
.cnew .t { text-decoration: underline; text-decoration-color: rgba(33,33,33,0.3); text-underline-offset: 4px; } .cnew:hover .t { text-decoration-color: var(--ink); }
.cmeta { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); max-width: 660px; }
.cmeta .f { font-size: 13px; color: var(--ink65); display: flex; gap: 16px; flex-wrap: wrap; }
.cbtn { all: unset; cursor: pointer; font-size: 13px; font-weight: 500; padding: 8px 12px; border-radius: 4px; background: rgba(33,33,33,0.05); color: var(--ink); white-space: nowrap; }
.cbtn:hover { background: rgba(33,33,33,0.1); } .cbtn.dk { background: var(--ink); color: #fff; } .cbtn.dk:hover { background: #111; }
.ctiles { padding: 0 8px 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gt { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 2px; overflow: hidden; color: #fff; background: #e8e8e8; transition: opacity 200ms linear; }
.gt:hover { opacity: 0.8; }
.gt .shade { position: absolute; left: 0; right: 0; top: 0; height: 160px; background: linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0)); pointer-events: none; }
.gt .ttl { position: absolute; left: 20px; right: 20px; white-space: normal; top: 16px; font-size: 40px; line-height: 1.1; letter-spacing: -1.2px; text-shadow: 0 2px 40px rgba(0,0,0,0.35); }
.gt.empty { background: #e8e8e8; color: var(--ink); } .gt.empty .ttl { text-shadow: none; }

/* ---------- Concept / product ---------- */
.crumbs { padding: 16px 40px 24px; display: flex; flex-wrap: wrap; gap: 6px; font-size: 15px; letter-spacing: -0.15px; }
.crumbs a { color: var(--ink65); } .crumbs a:hover { color: var(--ink); } .crumbs .s { color: var(--ink45); }
.phero { display: flex; gap: 8px; padding: 0 8px; }
.phero .cov { width: 49.17%; flex-shrink: 0; aspect-ratio: 708 / 885; border-radius: 2px; background: #e8e8e8; position: relative; overflow: hidden; }
.phero .info { flex: 1; min-width: 0; padding: 8px 32px 0 40px; display: flex; flex-direction: column; gap: 28px; }
.phero h1 { margin: 0; font-size: 80px; line-height: 1; letter-spacing: -3.2px; }
.models { display: flex; gap: 8px; flex-wrap: wrap; }
.mcard { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 6px; width: 96px; }
.mcard .ph { position: relative; display: block; width: 96px; height: 120px; border-radius: 2px; background: #efefef; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(33,33,33,0.06); transition: box-shadow 200ms; }
.mcard .ph img { mix-blend-mode: multiply; object-fit: contain; }
.mcard[aria-pressed="true"] .ph { box-shadow: inset 0 0 0 2px var(--ink); }
.mcard:hover .ph { box-shadow: inset 0 0 0 1px rgba(33,33,33,0.35); }
.mcard[aria-pressed="true"]:hover .ph { box-shadow: inset 0 0 0 2px var(--ink); }
.mcard .ml { font-size: 13px; line-height: 1.3; letter-spacing: -0.1px; color: rgba(33,33,33,0.55); transition: color 200ms; }
.mcard[aria-pressed="true"] .ml { color: var(--ink); }
.mcard:focus-visible, .swb:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pdesc { display: flex; flex-direction: column; gap: 12px; font-size: 17px; line-height: 1.45; letter-spacing: -0.2px; color: rgba(33,33,33,0.8); max-width: 560px; }
.pdesc p { margin: 0; }
.facts .row { display: flex; justify-content: space-between; gap: 24px; padding: 10px 0; border-top: 1px solid var(--line); }
.facts .row span:first-child { color: var(--ink65); } .facts .row span:last-child { text-align: right; }
.swatches { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-height: 34px; }
/* As on pedestal.com: 24 px round, the chosen one grows to 52 px, width eases out over 300 ms */
.swb { all: unset; cursor: pointer; display: block; flex-shrink: 0; width: 24px; height: 24px; border-radius: 9999px; overflow: hidden; transition: width 300ms cubic-bezier(0, 0, 0.2, 1); will-change: width; }
.swb[aria-pressed="true"] { width: 52px; }
@media (max-width: 1023px) { .swatches { min-height: 36px; } .swb { width: 36px; height: 36px; } .swb[aria-pressed="true"] { width: 72px; } }
details summary { cursor: pointer; color: var(--ink65); font-size: 13px; }
.eanrow { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid rgba(33,33,33,0.06); font-size: 13px; }
.brand .stmtrow { padding: 96px 40px 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.brand .figs { display: flex; gap: 8px; padding: 0 8px; }
.brand figure { margin: 0; position: relative; flex: 1 1 0; min-width: 0; aspect-ratio: 708 / 885; border-radius: 2px; overflow: hidden; background: #e8e8e8; }
.brand figcaption { position: absolute; left: 16px; bottom: 14px; color: #fff; }
.byc { padding: 48px 8px 0; }
.byc .hd { padding: 0 32px 16px; display: flex; justify-content: space-between; align-items: baseline; }
.byc h2, .shd h2 { margin: 0; font-size: 32px; letter-spacing: -1.28px; font-weight: 400; }
.byc .row { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 4px; }
.vbox { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 6px; width: 111px; flex-shrink: 0; transition: opacity 200ms; }
.vbox .ph { position: relative; display: block; width: 111px; height: 139px; border-radius: 2px; background: #efefef; overflow: hidden; }
.vbox .ph img { object-fit: contain; mix-blend-mode: multiply; }
.vbox .ph.on { box-shadow: inset 0 0 0 2px var(--ink); }
.vbox .miss { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--ink45); }
.vbox .nm { font-size: 11px; font-weight: 500; letter-spacing: 0.44px; text-transform: uppercase; }
.vbox.dim { opacity: 0.3; }
.jump { padding: 48px 40px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.jump nav { display: flex; gap: 2px; flex-wrap: wrap; }
.jump .chip .caps { margin-left: 2px; }
.jump .rm { all: unset; cursor: pointer; font-size: 15px; color: var(--ink65); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.shd { display: flex; align-items: baseline; gap: 8px; padding: 48px 32px 16px; border-top: 1px solid var(--line); margin-top: 40px; }
.grid { padding: 0 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 8px; }
.card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.card .im { align-self: stretch; }
.card .im { position: relative; aspect-ratio: 4 / 5; border-radius: 2px; overflow: hidden; background: #efefef; cursor: zoom-in; }
.card .im.ps .th { object-fit: contain; }
.card .im.dark { background: #2a2a2a; }
.card .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.card .ext { position: absolute; left: 12px; top: 12px; color: #fff; }
.card .dl { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; gap: 2px; opacity: 0; transform: translateY(4px); transition: opacity 150ms, transform 200ms; }
.card:hover .dl, .card:focus-within .dl { opacity: 1; transform: none; }
.card .dl button { flex: 1; height: 32px; border: 0; border-radius: 2px; background: rgba(255,255,255,0.92); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.card .dl button:hover { background: #fff; }
.sel { all: unset; cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.4; padding: 2px; }
.sel .bx { width: 14px; height: 14px; border-radius: 2px; border: 1px solid rgba(33,33,33,0.35); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; }
.sel.on .bx { background: var(--ink); border-color: var(--ink); color: #fff; }
.empty { margin: 0 8px; padding: 40px 24px; border-radius: 4px; background: #efefef; }
.more { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 24px 8px 0; padding-top: 28px; border-top: 1px solid rgba(33,33,33,0.1); }
.more .cd { min-width: 260px; padding: 14px 24px 15px; }
@media (max-width: 600px) { .more .cd { width: 100%; } }

/* Viewer */
.vw { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 24px; }
.vw .scrim { position: absolute; inset: 0; background: rgba(33,33,33,0.45); }
.vw .box { position: relative; width: 1120px; height: 760px; max-width: 100%; max-height: 100%; background: var(--bg); border-radius: 4px; overflow: hidden; display: flex; }
.vw .stage { position: relative; width: 680px; flex-shrink: 0; background: #ecebe8; display: flex; align-items: center; justify-content: center; }
.vw .pos { position: absolute; left: 20px; top: 16px; font-size: 13px; color: rgba(33,33,33,0.55); font-variant-numeric: tabular-nums; }
.vw .big { position: relative; margin-top: -24px; width: 480px; height: 600px; max-width: calc(100% - 120px); max-height: calc(100% - 140px); display: flex; align-items: center; justify-content: center; }
.vw .big img, .vw .big video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 2px; }
.vw .big img.vph, .vw .big img.vfull { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
.vw .big img.vfull { opacity: 0; transition: opacity 0.2s ease-out; }
.vw .big img.vfull.ok { opacity: 1; }
.vw .nav { all: unset; cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 9999px; background: var(--bg); display: flex; align-items: center; justify-content: center; }
.vw .nav.p { left: 16px; } .vw .nav.n { right: 16px; }
.vw .strip { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 4px; overflow: hidden; padding: 0 16px; }
.vw .strip button { all: unset; cursor: pointer; position: relative; display: block; flex-shrink: 0; width: 32px; height: 40px; border-radius: 2px; overflow: hidden; background: #e2e1de; opacity: 0.6; }
.vw .strip button.on { opacity: 1; box-shadow: inset 0 0 0 2px var(--ink); }
.vw .side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 28px; padding: 16px 16px 24px 32px; overflow-y: auto; }
.vw .hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin: -8px -8px 0 0; }
.vw .hd .c { display: flex; gap: 6px; font-size: 13px; letter-spacing: -0.1px; min-width: 0; padding-top: 16px; }
.vcls { all: unset; cursor: pointer; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; width: 80px; height: 80px; padding: 8px 8px 10px; border: 1px solid rgba(33,33,33,0.15); font-size: 15px; letter-spacing: -0.15px; }
.vcls:hover { background: rgba(33,33,33,0.04); }
.vw .nm { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -0.4px; word-break: break-all; }
.vw .spec { margin: 0; font-size: 13px; color: rgba(33,33,33,0.6); }
.kv { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.kv > span:first-child { font-size: 13px; color: rgba(33,33,33,0.6); padding-top: 4px; flex-shrink: 0; }
.kv .tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.vtag { font-size: 13px; line-height: 1; padding: 5px 9px 6px; border-radius: 9999px; border: 1px solid rgba(33,33,33,0.15); color: rgba(33,33,33,0.8); white-space: nowrap; }
a.vtag:hover { border-color: var(--ink); color: var(--ink); }
.vcol { display: flex; align-items: center; gap: 8px; font-size: 15px; letter-spacing: -0.15px; }
.vcol:hover { text-decoration: underline; text-decoration-color: rgba(33,33,33,0.4); text-underline-offset: 3px; }
.vcol .dot { display: inline-block; width: 16px; height: 16px; border-radius: 9999px; box-shadow: inset 0 0 0 1px rgba(33,33,33,0.12); }
.capbox { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; border-radius: 4px; background: rgba(33,33,33,0.04); margin-right: 8px; }
.capbox p { margin: 0; font-size: 15px; line-height: 1.4; letter-spacing: -0.15px; }
.dlbar { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 8px; }
.res { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; border-radius: 6px; background: rgba(33,33,33,0.05); }
.res button { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 4px; transition: background-color 150ms, box-shadow 150ms; }
.res button[aria-checked="true"] { background: #fff; box-shadow: 0 1px 2px rgba(33,33,33,0.12); }
.res b { font-size: 13px; font-weight: 500; } .res small { font-size: 11px; color: rgba(33,33,33,0.55); }
.selbtn { all: unset; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px 12px; border-radius: 4px; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: -0.15px; background: #efefef; transition: background-color 150ms, box-shadow 150ms; }
.selbtn[aria-pressed="true"] { background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* Plain text pages */
.textpage { padding: 40px; max-width: 760px; }
.textpage h1 { margin: 0 0 24px; font-size: 56px; line-height: 1; letter-spacing: -2.24px; }
.textpage p { font-size: 17px; line-height: 1.45; color: rgba(33,33,33,0.8); }

/* ---------- Responsive (from the boards' rules) ---------- */
@media (max-width: 1100px) {
  .top .mainnav { left: 200px; }
  .ctiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .phero { flex-direction: column; } .phero .cov { width: 100%; aspect-ratio: 4 / 5; }
  .phero .info { padding: 32px 16px 0; }
  .cintro, .hsearch, .brand .stmtrow { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .brand .figs { flex-direction: column; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vw .stage { width: 55%; }
  .foot .fr { left: 300px; width: auto; right: 24px; }
  .fbar { padding-right: 24px; }
}
@media (max-width: 760px) {
  .top { height: 92px; }
  .top .logo { left: 16px; }
  .top .right { right: 8px; }
  .top .right .navit.search .t { display: none; }
  .top .mainnav { left: 8px; right: 0; top: 44px; height: 44px; overflow-x: auto; scrollbar-width: none; }
  .top .mainnav::-webkit-scrollbar { display: none; }
  .hhero .stage { height: 86vh; height: 86svh; min-height: 560px; }
  .hhero h1 { font-size: 56px; white-space: normal; left: 16px; right: 16px; }
  .hhero .ctas { bottom: 150px; left: 16px; }
  .hsearch { padding: 48px 16px 56px; }
  .sbox .field .w { font-size: 48px; } .sbox .field .caret { height: 36px; transform: translateY(-2px); margin-right: -14px; }
  .stmt { font-size: 28px; letter-spacing: -0.4px; }
  .hrow { flex-direction: column; }
  .hrow .tile { flex: none; width: 100%; }
  .shd { flex-wrap: wrap; } .shd h2, .byc h2 { font-size: 26px; letter-spacing: -0.8px; }
  .gt .ttl { font-size: 24px; left: 12px; top: 10px; }
  .tile .ttl { white-space: normal; right: 20px; }
  .cintro { padding: 48px 16px 56px; }
  .cintro h1 .disp { font-size: 40px; }
  .cstmt { font-size: 24px; }
  .cmeta { flex-wrap: wrap; }
  .ctiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crumbs { padding-left: 16px; }
  .phero h1 { font-size: 48px; letter-spacing: -1.6px; }
  .brand .stmtrow { padding: 56px 16px 32px; }
  .stmt { font-size: 28px; }
  .shd { padding: 32px 16px 12px; }
  .byc .hd { padding: 0 8px 12px; }
  .jump { padding-left: 16px; padding-right: 16px; flex-wrap: wrap; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 8px; }
  .card { gap: 4px; }
  .card .dl { opacity: 1; transform: none; }
  .card .dl button { height: 28px; font-size: 12px; }
  .vw { padding: 0; }
  .vw .box { width: 100%; height: 100%; border-radius: 0; display: block; overflow-y: auto; overscroll-behavior: contain; }
  .vw .stage { width: 100%; height: 520px; max-height: 64svh; }
  .vw .big { max-width: calc(100% - 24px); max-height: calc(100% - 96px); }
  .vw .strip { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .vw .nav { width: 34px; height: 34px; } .vw .nav.p { left: 8px; } .vw .nav.n { right: 8px; }
  .vw .side { padding: 16px; gap: 20px; overflow: visible; }
  .vcls { width: auto; height: auto; flex-direction: row; gap: 8px; padding: 8px 10px; align-items: center; }
  .dlbar { position: sticky; bottom: 0; background: var(--bg); margin: 0 -16px; padding: 10px 16px 14px; border-top: 1px solid var(--line); }
  .foot { height: auto; padding: 24px 16px 0; border-width: 0; margin-top: 64px; }
  .foot .pmark { display: none; }
  .foot .fr { position: static; width: auto; } .foot .msg { position: static; margin-top: 10px; }
  .plist { flex-wrap: wrap; } .plist .fld { flex: 1 1 100% !important; width: auto !important; } .foot .chunky { flex: 1 1 100%; height: 56px; }
  .flinks { margin-top: 32px; }
  .fbar { position: relative; height: auto; margin: 24px -16px 0; padding: 16px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .textpage { padding: 24px 16px; } .textpage h1 { font-size: 40px; }
}
/* download gate + toasts */
.gov{position:fixed;inset:0;z-index:40;background:rgba(17,17,17,0.45);display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}
.gov .gbox{width:560px;max-width:100%;max-height:100%;overflow-y:auto;background:#fafafa;border-radius:4px;box-sizing:border-box;padding:20px 24px 24px;display:flex;flex-direction:column;gap:24px;color:#212121;font-family:"Suisse Intl",Helvetica,Arial,sans-serif}
.gtop{display:flex;justify-content:space-between;align-items:center;margin-bottom:-8px}
.gx{all:unset;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;color:#212121}
.gx:hover{background:rgba(33,33,33,0.05)}
.gh{margin:0;font-family:"FK Display",Helvetica,Arial,sans-serif;font-weight:400;font-size:40px;line-height:1;letter-spacing:-1.6px}
.gp{margin:12px 0 0;font-size:15px;line-height:1.4;letter-spacing:-0.15px;color:rgba(33,33,33,0.65);max-width:440px}
.gfs{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.gf{position:relative;display:block;height:64px;border-radius:4px;background:rgba(33,33,33,0.05)}
.gf.w{grid-column:1/-1}
.gf>span{position:absolute;left:13px;top:10px;font-size:13px;line-height:1.2;color:rgba(33,33,33,0.55);pointer-events:none}
.gf>input{position:absolute;inset:0;border:0;background:transparent;font:inherit;font-size:15px;letter-spacing:-0.15px;padding:28px 13px 8px;outline:none;width:100%;box-sizing:border-box;color:#212121}
.gf:focus-within{box-shadow:inset 0 0 0 1px #212121}
.gf.err{box-shadow:inset 0 0 0 1px #c4361c}
.gf.err>span{color:#c4361c}
.glab{font-size:13px;color:rgba(33,33,33,0.55);margin-bottom:8px;display:block}
.groles{display:flex;flex-wrap:wrap;gap:4px}
.grole{all:unset;cursor:pointer;padding:6px 10px 8px;border-radius:4px;background:rgba(33,33,33,0.05);border:1px solid transparent;font-size:15px;line-height:1.2;letter-spacing:-0.15px;color:#212121}
.grole:hover{background:rgba(33,33,33,0.1)}
.grole[aria-pressed="true"]{background:#212121;color:#ffffff}
.gcks{display:flex;flex-direction:column;gap:12px}
.gck{all:unset;cursor:pointer;display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.35;letter-spacing:-0.15px;color:#212121}
.gck .bx{width:16px;height:16px;border-radius:2px;border:1px solid rgba(33,33,33,0.35);box-sizing:border-box;flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1;color:#ffffff}
.gck[aria-checked="true"] .bx{background:#212121;border-color:#212121}
.gck.err .bx{border-color:#c4361c}
.gbtn{all:unset;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;width:100%;height:74px;padding:4px;border-radius:4px;background:#212121;color:#ffffff;font-size:15px;font-weight:500;line-height:1.2;letter-spacing:-0.15px}
.gbtn:hover{background:#111111}
.gbtn>span{padding:4px 8px}
.gbtn>svg{margin:6px 8px}
.gerr{font-size:13px;line-height:1.4;color:#c4361c;margin-top:-12px}
.gfine{margin:0;font-size:13px;line-height:1.4;color:rgba(33,33,33,0.55)}
.gfine a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.who{display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:1.4;color:rgba(33,33,33,0.65);white-space:nowrap}
.who .av{width:20px;height:20px;border-radius:9999px;background:#212121;color:#ffffff;font-size:10px;font-weight:500;display:inline-flex;align-items:center;justify-content:center}
.who button{all:unset;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.who button:hover{color:#212121}
.tst{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:35;width:520px;max-width:calc(100% - 16px);box-sizing:border-box;background:#212121;color:#ffffff;border-radius:4px;padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px;font-family:"Suisse Intl",Helvetica,Arial,sans-serif;font-size:15px;line-height:1.3;letter-spacing:-0.15px}
.tst .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.tst .sub{font-size:13px;color:#b3b3b3}
.tst .bar{height:2px;background:rgba(255,255,255,0.15);border-radius:2px;overflow:hidden}
.tst .bar>i{display:block;height:100%;width:100%;background:#ffffff;transform-origin:left;animation:tbar 2.6s cubic-bezier(.3,.1,.3,1) forwards}
.tst .bar.st>i{animation:none;transform:scaleX(.42)}
@keyframes tbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.tst .acts{display:flex;gap:16px;flex-shrink:0}
.tst button,.tst a{all:unset;cursor:pointer;text-decoration:underline;text-underline-offset:3px;color:#ffffff;white-space:nowrap}
.tst .dot{display:inline-block;width:8px;height:8px;border-radius:9999px;background:#e5533a;margin-right:8px;vertical-align:1px}
.tst .ok{display:inline-block;width:8px;height:8px;border-radius:9999px;background:#7bc47f;margin-right:8px;vertical-align:1px}
@media (max-width:760px){
.gov{padding:0!important;align-items:stretch}
.gov .gbox[role="dialog"]{width:100%;max-height:none;height:100%;border-radius:0;padding:12px 16px 16px!important;gap:20px}
.gh{font-size:32px;letter-spacing:-1.28px}
.gfs{grid-template-columns:1fr}
.tst{left:8px;right:8px;width:auto;max-width:none;transform:none;bottom:8px}
.tst .row{flex-direction:column;gap:8px}
}

body.home .foot { margin-top: 0; }

/* ---------- Search panel (PressASearch) ---------- */
.sx { position: fixed; inset: 0; z-index: 15; overflow: hidden; overflow: clip; }
.sx .bk { position: absolute; inset: 0; width: 100%; height: 100%; }
.sx .bk2 { position: absolute; inset: 0; cursor: pointer; background: url(/brand/overlay-texture.png) repeat center center, rgba(33,33,33,0.2); }
.sx .sp { position: absolute; right: 8px; top: 8px; bottom: 8px; width: 724px; max-width: calc(100% - 16px); background: var(--bg); border-radius: 2px; display: flex; flex-direction: column; overflow: hidden; will-change: transform; }
.sx .srow { display: flex; gap: 12px; align-items: flex-start; padding: 4px 4px 0 24px; }
.sx .ql { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 14px; }
.sx #toks { display: contents; }
.sx .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sx .tok { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 2px 14px; border-radius: 4px; background: var(--ink); color: #fff; font-size: 17px; letter-spacing: -0.2px; white-space: nowrap; flex-shrink: 0; }
.sx .tok:hover { background: #000; }
.sx .q { all: unset; flex: 1; min-width: 120px; font-family: "FK Display", Helvetica, Arial, sans-serif; font-size: 56px; line-height: 1.15; letter-spacing: -2.24px; color: var(--ink); }
.sx .q::placeholder { color: rgba(33,33,33,0.4); }
.sx .q::-webkit-search-cancel-button { display: none; }
.sx .clrw { display: flex; gap: 8px; align-items: flex-start; padding-top: 12px; }
.sx .clr { all: unset; cursor: pointer; height: 32px; padding: 0 10px 2px; border-radius: 4px; background: rgba(33,33,33,0.06); font-size: 15px; letter-spacing: -0.15px; display: inline-flex; align-items: center; }
.sx .cls { margin-top: 4px; display: flex; flex-direction: column; justify-content: space-between; width: 80px; height: 80px; padding: 8px 8px 10px; border: 1px solid rgba(33,33,33,0.15); color: var(--ink); font-size: 15px; letter-spacing: -0.15px; flex-shrink: 0; }
.sx .cls:hover { background: rgba(33,33,33,0.04); }
.sx .sugrow { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; padding: 16px 24px 12px; border-bottom: 1px solid var(--line); font-size: 15px; letter-spacing: -0.15px; }
.sx .sl, .sx .lab { font-size: 15px; letter-spacing: -0.15px; color: rgba(33,33,33,0.6); }
.sx .sug { all: unset; cursor: pointer; font-size: 15px; line-height: 1.2; letter-spacing: -0.15px; font-weight: 500; color: var(--ink); display: inline-flex; align-items: baseline; gap: 3px; }
.sx .sug:hover { color: #606060; }
.sx .sug .n { font-size: 9px; font-weight: 500; color: rgba(33,33,33,0.45); }
.sx .body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 24px 104px; overscroll-behavior: contain; }
.sx .row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.sx .pc { display: flex; flex-direction: column; gap: 8px; width: 160px; flex-shrink: 0; color: var(--ink); }
.sx .pc .ph { position: relative; display: block; border-radius: 2px; background: #efefef; overflow: hidden; transition: opacity 150ms; }
.sx .pc .ph img { object-fit: contain; mix-blend-mode: multiply; }
.sx .pc:hover .ph { opacity: 0.88; }
.sx .pn { display: flex; gap: 6px; font-size: 15px; font-weight: 500; letter-spacing: -0.15px; }
.sx .dots { display: flex; gap: 3px; padding-left: 16px; flex-wrap: wrap; }
.sx .sdot { display: inline-block; width: 12px; height: 12px; border-radius: 9999px; box-shadow: inset 0 0 0 1px rgba(33,33,33,0.12); }
.sx .sdot.on { box-shadow: 0 0 0 1.5px #fafafa, 0 0 0 2.5px #212121; }
.sx .grp { display: flex; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.sx .gk { width: 112px; flex-shrink: 0; font-size: 13px; color: rgba(33,33,33,0.6); padding-top: 4px; }
.sx .gt2 { display: flex; gap: 4px; flex-wrap: wrap; }
.sx .pill { all: unset; cursor: pointer; font-size: 13px; line-height: 1; padding: 6px 9px 7px; border-radius: 9999px; border: 1px solid rgba(33,33,33,0.15); color: rgba(33,33,33,0.8); }
.sx .pill:hover { border-color: var(--ink); color: var(--ink); }
.sx .hd2 { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.sx .cnt { font-size: 13px; color: rgba(33,33,33,0.55); }
.sx .ig { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 8px; }
.sx .ic2 { display: flex; flex-direction: column; gap: 8px; color: var(--ink); min-width: 0; }
.sx .ic2 .ph { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 2px; background: #efefef; overflow: hidden; }
.sx .ic2 .ph .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.sx .chip2 { position: absolute; left: 8px; top: 8px; padding: 4px 6px 3px; border-radius: 2px; background: var(--bg); font-size: 11px; font-weight: 500; letter-spacing: 0.44px; text-transform: uppercase; color: rgba(33,33,33,0.75); }
.sx .nm2 { font-size: 13px; font-weight: 500; letter-spacing: -0.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: -6px; }
.sx .sub2 { font-size: 12px; color: rgba(33,33,33,0.55); margin-top: -6px; }
.sx .seeall { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 64px; font-size: 15px; }
.sx .none { padding: 32px 0; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.sx .drop { all: unset; cursor: pointer; display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 14px 12px; border-radius: 4px; background: rgba(33,33,33,0.05); font-size: 15px; letter-spacing: -0.15px; }
.sx .drop b { font-weight: 500; } .sx .drop span { font-size: 13px; color: rgba(33,33,33,0.6); }
.vw { z-index: 25; }
@media (max-width: 760px) {
  .sx .sp { left: 0; right: 0; top: 0; bottom: 0; width: auto; max-width: none; border-radius: 0; }
  .sx .srow { padding-left: 16px; } .sx .sugrow { padding: 12px 16px; } .sx .body { padding: 16px 16px 96px; }
  .sx .q { font-size: 36px; letter-spacing: -1.2px; }
  .sx .ig { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx .cls { width: 64px; height: 64px; }
}

/* ---------- Selection + shared selection (PressASelection, PressAShared) ---------- */
.selhd { padding: 12px 40px 32px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.selacts { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.txt { all: unset; cursor: pointer; font-size: 15px; color: var(--ink65); text-decoration: underline; text-underline-offset: 3px; } .txt:hover { color: var(--ink); }
.resb { margin: 0 8px 24px; padding: 16px 24px; border-radius: 4px; background: #efefef; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.seg { all: unset; cursor: pointer; padding: 6px 10px 8px; border-radius: 4px; font-size: 15px; line-height: 1.2; letter-spacing: -0.15px; color: var(--ink); white-space: nowrap; }
.seg.on { background: rgba(33,33,33,0.1); } .seg:hover { background: rgba(33,33,33,0.05); }
.shareb { margin: 0 8px 24px; padding: 20px 24px; border-radius: 4px; border: 1px solid var(--line); background: #fff; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.shurl { flex: 1 1 320px; height: 44px; display: flex; align-items: center; padding: 0 14px; border-radius: 4px; background: rgba(33,33,33,0.05); font-size: 15px; color: var(--ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.selgrid { padding: 0 8px 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 8px; }
.selgrid .ph { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 2px 2px 0 0; background: #efefef; overflow: hidden; transition: opacity 150ms; }
.selgrid .ph .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.exc { all: unset; cursor: pointer; display: flex; align-items: center; justify-content: center; height: 36px; border-radius: 0 0 2px 2px; background: #efefef; font-size: 13px; color: var(--ink); }
.exc:hover { background: #e5e5e5; } .exc.on { background: var(--ink); color: #fff; }
.selempty { margin: 0 8px; padding: 120px 24px; text-align: center; border-radius: 4px; background: #efefef; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.shgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 8px; padding: 0 8px 8px; }
.shc { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.shc .im { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 2px; overflow: hidden; background: #efefef; transition: opacity 150ms; }
.shc:hover .im { opacity: 0.8; }
.shc .im .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.shc .meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; line-height: 1.4; }
.shc .meta .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.shc .meta button { all: unset; cursor: pointer; flex-shrink: 0; color: var(--ink65); text-decoration: underline; text-underline-offset: 2px; } .shc .meta button:hover { color: var(--ink); }
.note { display: flex; gap: 12px; align-items: flex-start; max-width: 520px; padding: 14px 16px 16px; border-radius: 4px; background: #efefef; }
.note .av { width: 32px; height: 32px; border-radius: 9999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 500; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.shmore { margin: 96px 8px 0; padding: 48px 32px; border-radius: 4px; background: #efefef; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.exp { min-height: 620px; margin: 0 8px; border-radius: 4px; background: #efefef; display: flex; flex-direction: column; justify-content: space-between; padding: 32px; }

/* ---------- News (PressANews) ---------- */
.nint { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 48px 40px 40px; }
.stm { margin: 0; font-size: 40px; line-height: 1.15; letter-spacing: -0.8px; max-width: 620px; } .stm span { color: var(--ink45); }
.fil { display: flex; gap: 4px; flex-wrap: wrap; padding: 0 40px 24px; }
.feat { margin: 0 8px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.feat .im { position: relative; aspect-ratio: 4 / 5; border-radius: 2px; background: #efefef; overflow: hidden; transition: opacity 150ms; }
.feat a.imw:hover .im { opacity: .8; }
.fbox { border-radius: 4px; background: #efefef; padding: 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 6px; border-radius: 9999px; background: var(--ink); color: #fff; font-size: 13px; line-height: 1; }
.pill i { width: 6px; height: 6px; border-radius: 9999px; background: #e5533a; display: inline-block; }
.meta3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-top: 1px solid rgba(33,33,33,0.15); padding-top: 14px; }
.meta3 span { display: block; font-size: 13px; color: rgba(33,33,33,0.6); margin-bottom: 4px; }
.nlist { padding: 64px 40px 0; }
.nrow { display: grid; grid-template-columns: 180px 140px minmax(0, 1fr) 248px 96px; gap: 24px; align-items: start; padding: 20px 0 24px; border-top: 1px solid var(--line); color: var(--ink); }
a.nrow:hover .nt { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.nrow .ths { display: flex; gap: 4px; }
.nrow .ths span { position: relative; width: 80px; aspect-ratio: 4 / 5; border-radius: 2px; background: #efefef; overflow: hidden; display: block; }
.nrow .go { display: flex; justify-content: flex-end; align-items: center; gap: 6px; font-size: 15px; padding-top: 4px; }
.nt { font-family: "FK Display", Helvetica, Arial, sans-serif; font-size: 32px; line-height: 1.05; letter-spacing: -1.28px; }
.cband { margin: 96px 8px 0; border-radius: 4px; background: #efefef; padding: 40px 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.cband h3 { margin: 0 0 10px; font-size: 13px; font-weight: 400; color: rgba(33,33,33,0.6); }
.cband p { margin: 0; font-size: 17px; line-height: 1.4; letter-spacing: -0.2px; }
.cband a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(33,33,33,0.3); }
@media (max-width: 1100px) {
  .selgrid, .shgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nint, .feat { grid-template-columns: 1fr; }
  .nrow { grid-template-columns: 120px minmax(0, 1fr) 168px; gap: 16px; } .nrow .ty, .nrow .go { display: none; } .nrow .ths span { width: 52px; }
  .cband { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .selhd { flex-direction: column; align-items: stretch; padding: 12px 16px 24px; }
  .selacts { align-items: stretch; width: 100%; } .selacts > div { flex-wrap: wrap; } .selacts .cl, .selacts .cd { flex: 1 1 0; }
  .resb { margin: 0 0 24px; padding: 20px 16px; border-radius: 0; flex-direction: column; align-items: stretch; gap: 16px; }
  .resb [role=radiogroup] { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; border-radius: 6px; background: rgba(33,33,33,0.05); }
  .resb .seg { text-align: center; padding: 10px 0 12px; } .resb .seg.on { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
  .resb > .lbl { font-size: 13px; line-height: 1.4; padding-top: 14px; border-top: 1px solid var(--line); }
  .selgrid, .shgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 8px; }
  .shmore { margin: 64px 0 0; border-radius: 0; padding: 40px 16px; } .shmore .disp { font-size: 32px !important; }
  .exp { margin: 0; border-radius: 0; padding: 24px 16px; min-height: 520px; } .exp .disp { font-size: 40px !important; }
  .nint { padding: 28px 16px 24px; gap: 20px; } .nint h1 { font-size: 56px !important; letter-spacing: -2.24px !important; }
  .stm { font-size: 24px; letter-spacing: -0.4px; }
  .fil { padding: 0 16px 20px; flex-wrap: nowrap; overflow-x: auto; }
  .feat { margin: 0; } .feat .im { border-radius: 0; } .fbox { border-radius: 0; padding: 24px 16px; } .fbox .disp { font-size: 44px !important; letter-spacing: -1.76px !important; }
  .meta3 { grid-template-columns: 1fr 1fr; }
  .nlist { padding: 48px 16px 0; }
  .nrow { grid-template-columns: minmax(0, 1fr) 104px; gap: 12px; padding: 16px 0 20px; } .nrow .dt { grid-column: 1 / -1; margin-bottom: -6px; }
  .nrow .ths span { width: 50px; } .nrow .ths span:nth-child(n+3) { display: none; }
  .nt { font-size: 24px; letter-spacing: -0.8px; }
  .cband { margin: 64px 0 0; border-radius: 0; padding: 32px 16px; }
}

/* ---------- Release (PressARelease) ---------- */
.rel { display: grid; grid-template-columns: 708fr 724fr; gap: 8px; margin: 0 8px; }
.rel .hero { position: relative; aspect-ratio: 4 / 5; border-radius: 2px; background: #efefef; overflow: hidden; }
.rtxt { padding: 16px 32px 32px 40px; display: flex; flex-direction: column; gap: 28px; max-width: 640px; }
.emb { display: flex; gap: 10px; align-items: baseline; padding: 12px 14px 14px; border-radius: 4px; background: var(--ink); color: #fff; font-size: 15px; line-height: 1.35; }
.emb i { width: 8px; height: 8px; border-radius: 9999px; background: #e5533a; flex-shrink: 0; display: inline-block; transform: translateY(-1px); }
.dek { margin: 0; font-size: 22px; line-height: 1.3; letter-spacing: -0.4px; }
.rbody p { margin: 0 0 14px; font-size: 17px; line-height: 1.5; letter-spacing: -0.2px; color: rgba(33,33,33,0.85); }
.seh { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 96px 40px 20px; }
.rfacts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 40px; }
.frow { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.4; letter-spacing: -0.15px; }
.frow > span:first-child { color: rgba(33,33,33,0.6); }
.tagl { display: flex; flex-wrap: wrap; gap: 4px; }
.tagl a { font-size: 13px; line-height: 1; padding: 5px 9px 6px; border-radius: 9999px; border: 1px solid rgba(33,33,33,0.15); color: rgba(33,33,33,0.8); }
.tagl a:hover { border-color: var(--ink); color: var(--ink); }
.pg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 8px; padding: 0 8px; }
.rpc { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rpc .im { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 2px; background: #efefef; overflow: hidden; cursor: zoom-in; transition: opacity 150ms; }
.rpc:hover .im { opacity: .8; }
.rpc .mt { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; line-height: 1.4; }
.rpc .mt .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.rpc .mt button { all: unset; cursor: pointer; flex-shrink: 0; color: var(--ink65); text-decoration: underline; text-underline-offset: 2px; }
.film { margin: 0 8px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; border-radius: 4px; overflow: hidden; background: var(--ink); color: #fff; }
.film .im { position: relative; min-height: 420px; background: #333; }
.film .tx { padding: 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
@media (max-width: 1100px) {
  .rel, .rfacts, .film { grid-template-columns: 1fr; }
  .rel .hero { max-height: 80vh; } .rtxt { padding: 24px 32px 0; max-width: none; }
  .pg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .rel { margin: 0; } .rel .hero { border-radius: 0; }
  .rtxt { padding: 20px 16px 0; gap: 22px; } .rtxt h1 { font-size: 48px !important; letter-spacing: -1.92px !important; }
  .dek { font-size: 19px; }
  .rfacts { padding: 0 16px; } .frow { grid-template-columns: 1fr; gap: 4px; }
  .seh { padding: 64px 16px 16px; flex-wrap: wrap; }
  .pg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 8px; }
  .film { margin: 0; border-radius: 0; } .film .im { min-height: 260px; } .film .tx { padding: 24px 16px; }
  .racts { flex-direction: column; align-items: stretch !important; } .racts .cd, .racts .cl { width: 100%; }
}

/* ---------- Not found / error (PressAStates 08) ---------- */
.nf { padding: 64px 40px 96px; display: flex; flex-direction: column; gap: 28px; }
.nfh { font-size: 120px; line-height: 0.92; letter-spacing: -4.8px; }
@media (max-width: 760px) { .nf { padding: 40px 16px 64px; gap: 20px; } .nfh { font-size: 56px; letter-spacing: -2.24px; } }

/* Logos & guides */
.brd { padding: 40px; display: flex; flex-direction: column; gap: 56px; }
.brhd { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.brhd h1 { margin: 0; font-size: 56px; line-height: 1; letter-spacing: -2.24px; }
.brhd .lbl { color: var(--ink65); font-size: 17px; line-height: 1.45; }
.brj { display: flex; gap: 6px; flex-wrap: wrap; }
.brd .brs { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.brd .brs h2 { margin: 0; font-size: 32px; letter-spacing: -1px; }
.brg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.brg.gd { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.brc { display: flex; flex-direction: column; gap: 10px; }
.brp { aspect-ratio: 4 / 3; background: #f5f5f5; border-radius: 4px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.brc.dk .brp { background: var(--ink); }
.brp img { max-width: 56%; max-height: 40%; object-fit: contain; }
.brp.v { background: #000; } .brp.v video { width: 100%; height: 100%; object-fit: contain; }
.brp.doc .disp { font-size: 48px; color: var(--ink65); }
.brm { display: flex; flex-direction: column; gap: 8px; }
.brf { display: flex; gap: 6px; flex-wrap: wrap; }
.brno { color: var(--ink65); }
@media (max-width: 1023px) { .brg { grid-template-columns: repeat(2, minmax(0, 1fr)); } .brg.gd { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .brd { padding: 24px 16px; gap: 40px; } .brhd h1 { font-size: 40px; } .brg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .brg.gd { grid-template-columns: 1fr; } .brd .brs { flex-wrap: wrap; } }
.brb { all: unset; cursor: pointer; font-size: 13px; line-height: 1; padding: 7px 10px 8px; border-radius: 9999px; border: 1px solid rgba(33,33,33,0.15); color: rgba(33,33,33,0.8); }
.brb:hover, .brb:focus-visible { border-color: var(--ink); color: var(--ink); }
.phero .cov.ps { background: #fff; } .phero .cov.ps img { object-fit: contain; }
/* Touch: small text links get a tap area of at least 28-32 px without changing the look */
@media (pointer: coarse) {
  .flinks div { gap: 0; } .flinks a { display: inline-flex; align-items: center; min-height: 28px; }
  .fbar a, .crumbs a, .sbox .sugg a, .selhd a.lbl { display: inline-flex; align-items: center; min-height: 32px; }
  .crumbs { align-items: center; padding-top: 8px; padding-bottom: 16px; }
  .sel { min-height: 32px; padding: 0 2px; }
}
/* Six menu items on small phones: tighter so Contract fits without scrolling */
@media (max-width: 420px) { .top .mainnav { gap: 0; } .top .mainnav .navit { padding: 4px 6px 5px; font-size: 14px; letter-spacing: -0.2px; } }
.fil .chip { white-space: nowrap; flex-shrink: 0; }
/* Keep the footer below the fold while a page loads, so it does not jump (layout shift) */
#app { min-height: 100vh; min-height: 100svh; }
/* Smoother page changes: images fade in as they arrive, and a new page fades in quickly */
img.th { opacity: 0; transition: opacity .28s ease; }
img.th.ok { opacity: 1; }
#app.enter { animation: appin .16s ease-out; }
@keyframes appin { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { img.th { transition: none; } #app.enter { animation: none; } }
svg.play { z-index: 1; }

/* Selection that follows the page: black tile top right on desktop (as Filters on pedestal.com), pill at the bottom on phones */
.selfab { position: fixed; z-index: 9; top: 8px; right: 8px; width: 132px; height: 84px; box-sizing: border-box; padding: 8px 10px; border-radius: 4px; background: var(--ink); color: #fff; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), background 0.2s; }
.selfab.on { opacity: 1; transform: none; pointer-events: auto; }
.selfab:hover { background: #000; color: #fff; }
.selfab .c { align-self: flex-end; font-size: 11px; font-weight: 500; line-height: 1; }
.selfab .l { font-size: 15px; line-height: 1.2; }
.selfab.bump { animation: fabBump 0.45s cubic-bezier(0.215, 0.61, 0.355, 1); }
@keyframes fabBump { 0% { transform: scale(1); } 35% { transform: scale(1.06); } 100% { transform: scale(1); } }
@media (max-width: 899px) {
  .selfab { top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); right: 12px; width: auto; height: 48px; padding: 0 18px; flex-direction: row-reverse; align-items: center; gap: 8px; border-radius: 9999px; transform: translateY(8px); }
  .selfab .c { align-self: auto; font-size: 13px; opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) { .selfab, .selfab.bump { transition: none; animation: none; } }

/* Contract page: group headings (Pro, Projects) sit above the project headings */
.grh { margin: 0; font-size: 56px; line-height: 1; letter-spacing: -2.2px; font-weight: 400; }
@media (max-width: 760px) { .grh { font-size: 40px; letter-spacing: -1.6px; } }

/* Film player (Watch the film on the front page): Pedestal ink, white type, words instead of icons, a hairline for time.
   Top and bottom rows take the width of the picture (--fpw, set from the film's shape). */
.fpl { --fpw: 960px; position: fixed; inset: 0; z-index: 30; background: var(--ink); color: #fff; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 88px minmax(0, 1fr) 104px; outline: none; }
.fp-top, .fp-bot, .fp-stage { min-width: 0; }
.fpl:not(.ui) { cursor: none; }
.fp-top, .fp-bot { display: flex; justify-content: center; padding: 0 24px; transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.fpl:not(.ui) .fp-top, .fpl:not(.ui) .fp-bot { opacity: 0; }
.fp-in { width: var(--fpw); max-width: 100%; }
.fp-top .fp-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; align-self: center; }
.fp-logo { display: flex; align-items: flex-start; gap: 4px; }
.fp-logo img { filter: invert(1); height: 17px; width: auto; } .fp-logo img + img { height: 8.5px; margin-top: 1px; opacity: 0.6; }
.fp-title { font-size: 20px; line-height: 1; letter-spacing: -0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(255,255,255,0.92); }
.fp-t { all: unset; cursor: pointer; font-size: 13px; line-height: 1; letter-spacing: -0.1px; color: rgba(255,255,255,0.6); padding: 10px 0; transition: color 0.25s; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.fp-t:hover { color: #fff; } .fp-t:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.fp-x { justify-self: end; } .fp-x .k { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); align-items: center; justify-content: center; transition: border-color 0.25s; }
.fp-x:hover .k { border-color: #fff; } .fp-x svg { width: 9px; height: 9px; }
.fp-stage { position: relative; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 24px; }
.fp-stage video { width: 100%; height: 100%; object-fit: contain; display: block; outline: none; }
.fp-play { all: unset; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 12px; padding: 13px 22px 15px 18px; border-radius: 4px; cursor: pointer;
  background: rgba(255,255,255,0.12); backdrop-filter: blur(17px); -webkit-backdrop-filter: blur(17px); border: 1px solid rgba(255,255,255,0.3); color: #fff; font-size: 15px; font-weight: 500; letter-spacing: -0.15px; transition: background 0.25s; }
.fp-play:hover { background: rgba(255,255,255,0.22); } .fp-play[hidden] { display: none; }
.fp-play .tri { width: 0; height: 0; border-left: 9px solid #fff; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; margin-top: 1px; }
.fp-load { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: rgba(255,255,255,0.6); } .fp-load[hidden] { display: none; }
.fp-bot .fp-in { align-self: start; padding-top: 18px; }
.fp-seek { position: relative; height: 24px; margin: -11px 0 2px; cursor: pointer; touch-action: none; outline: none; }
.fp-seek::before, .fp-buf, .fp-done { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 1px; transform-origin: left; transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1), top 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.fp-seek::before { background: rgba(255,255,255,0.16); }
.fp-buf { background: rgba(255,255,255,0.24); transform: scaleX(0); }
.fp-done { background: #fff; transform: scaleX(0); }
.fp-seek:hover::before, .fp-seek:hover .fp-buf, .fp-seek:hover .fp-done, .fp-seek.drag::before, .fp-seek.drag .fp-buf, .fp-seek.drag .fp-done, .fp-seek:focus-visible::before, .fp-seek:focus-visible .fp-buf, .fp-seek:focus-visible .fp-done { height: 3px; top: 10px; }
.fp-tip { position: absolute; bottom: 20px; transform: translateX(-50%); font-size: 11px; font-weight: 500; letter-spacing: 0.4px; font-variant-numeric: tabular-nums; color: var(--ink); background: #fff; border-radius: 2px; padding: 3px 6px 4px; pointer-events: none; }
.fp-tip[hidden] { display: none; }
.fp-row { display: flex; align-items: baseline; gap: 20px; }
.fp-pp { font-family: "FK Display", Helvetica, Arial, sans-serif; font-size: 22px; letter-spacing: -0.6px; color: #fff; min-width: 64px; padding: 6px 0; }
.fp-pp:hover { color: rgba(255,255,255,0.7); }
.fp-time { font-size: 13px; letter-spacing: 0.1px; font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap; } .fp-time .of { color: rgba(255,255,255,0.45); }
.fp-sp { flex: 1; }
@media (max-width: 760px) {
  .fpl { grid-template-rows: 64px minmax(0, 1fr) 96px; }
  .fp-top, .fp-bot { padding: 0 16px; } .fp-stage { padding: 0; }
  .fp-title { font-size: 17px; } .fp-logo img { height: 14px; } .fp-logo img + img { height: 7px; }
  .fp-x { font-size: 0; gap: 0; } .fp-fs { display: none; } .fp-row { gap: 14px; } .fp-pp { font-size: 20px; }
}