/*
 * Additions to the imported design (styles.css is generated by
 * scripts/site/import-design.mjs and never edited by hand). Everything here
 * extends the design's own vocabulary: its tokens, its type and its marks.
 */

/* Company logos on the Public markets rows, set like the funding rows' marks. */
.quote-company.has-mark{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-content:start}
.quote-company.has-mark>.company-mark{grid-row:1/span 3;align-self:start;width:58px;height:58px;margin:0}
.quote-company.has-mark>:not(.company-mark){grid-column:2}
.quote-company.has-mark>.quote-symbol{justify-self:start}
@media(max-width:800px){.quote-company.has-mark{column-gap:12px}.quote-company.has-mark>.company-mark{width:41px;height:41px;padding:5px}}

/* The ship sails across the After hours sea as the page scrolls (js/sail.js).
   Only while motion is on; otherwise the design's own placement applies. */
.sail-live .sailing-journey{left:0;transform:translate3d(var(--sail-x,8vw),0,0) scale(calc(.86 + var(--sail,0)*.16));will-change:transform}
.sail-live .sailing-vessel img{transform:rotate(var(--sail-heel,0deg));transform-origin:50% 92%;transition:transform .35s ease-out}
.sail-live .sailing-wake{filter:opacity(calc(.45 + var(--sail-speed,0)*.55))}

/* Paging for long boards (all companies, every new funding round). */
.market-more{display:flex;justify-content:space-between;align-items:center;width:100%;margin:22px 0 6px;padding:15px 18px;font:12px var(--sans);color:inherit;background:none;border:1px solid var(--rule);cursor:pointer}
.market-more span{color:var(--muted)}
.market-more:hover{border-color:var(--ink)}
.market-more:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* A company whose own site offers no usable logo: its ticker, set in the
   display face inside the same tile, so the column stays even. */
.company-mark.monogram{font:600 15px/1 var(--display);letter-spacing:-.01em;color:var(--ink);background:var(--wash);text-transform:uppercase}
@media(max-width:800px){.company-mark.monogram{font-size:12px}}

/* On air (js/live-status.js switches it automatically). Only when a live
   player is on the page, so the off-air design is untouched. */
.live-page:has(.media-stage.has-media) .live-heading{display:flex;align-items:center;gap:8px}
.live-page:has(.media-stage.has-media) .live-heading .status-dot{background:var(--accent)}
.live-page:has(.media-stage.has-media) .section-intro h1{font-size:clamp(36px,4.5vw,64px)}
.home-experience:has(.opening-frame .has-media) .hero-bottom a:first-child:before{background:var(--accent)}

/* The host on the About page (js/host-profile.js). His photograph fills the
   design's portrait box, 4:5 on wide screens and landscape on phones, face kept
   in frame, in grayscale like every portrait in the design; his own profiles sit
   under his name in the design's small capitals, each with the design's icon for
   the platform. */
.host-portrait.has-photo{position:relative;overflow:hidden}
.host-portrait.has-photo img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 15%;filter:grayscale(1)}
.host-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin:-8px 0 26px}
.host-links a{display:inline-flex;align-items:center;gap:9px;padding-bottom:5px;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none;font-size:10px;font-weight:600;letter-spacing:.12em;line-height:1.5;text-transform:uppercase}
.host-links a:hover,.host-links a:focus-visible{border-bottom-color:currentColor}
.host-links svg{width:15px;height:15px;flex:none}