/* iM Media Labs — press section. Loads after site.css.
   Card treatment, radii and type scale deliberately mirror the homepage
   (.resource / .strip-item / .panel) so the section doesn't read as bolted on. */

/* ---- Listing ----------------------------------------------------------- */

.press-list {
    display: grid;
    gap: var(--space-3, 24px);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Same visual language as .strip-item / .resource on the homepage:
   no border, 16px radius, translucent white fill, soft drop shadow. */
.press-item {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--space-3, 28px);
    align-items: start;
    border: none;
    border-radius: 16px;
    padding: var(--space-3, 28px);
    background: rgba(255,255,255,.08);
    box-shadow: 0 14px 36px rgba(0,0,0,.10);
    transition: background 220ms ease, transform 220ms ease;
}

.press-item:hover {
    background: rgba(255,255,255,.11);
}

.press-figure {
    margin: 0;
    align-self: start;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,.06);
    aspect-ratio: 16 / 9;
}

.press-figure a {
    display: block;
    width: 100%;
    height: 100%;
}

.press-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 320ms ease;
}

/* Hovering anywhere on the card lifts the image a touch, so the picture reads
   as part of the same target as the headline and the button. */
.press-item:hover .press-figure img {
    transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
.press-figure img { transition: none; }
.press-item:hover .press-figure img { transform: none; }
}

.press-body { min-width: 0; }

.press-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .1em;
}

.press-source {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px 10px;
    letter-spacing: .06em;
}

.press-item h2 {
    margin: 0 0 10px;
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    line-height: 1.3;
    color: var(--text);
}

.press-item h2 a {
    color: inherit;
    text-decoration: none;
}

.press-item h2 a:hover { color: #fff; }

.press-item p {
    margin: 0 0 18px;
    font-size: var(--fs-md);
    line-height: 1.55;
    color: rgba(255,255,255,.90);
}

/* ---- Release page ------------------------------------------------------ */

.release { max-width: 800px; margin: 0 auto; }

.release-hero {
    margin: 0 0 var(--space-4, 32px);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 14px 36px rgba(0,0,0,.10);
}

.release-hero img {
    display: block;
    width: 100%;
    height: auto;
}

.release-hero figcaption {
    padding: 12px 16px;
    background: rgba(255,255,255,.08);
    font-size: var(--fs-xs);
    color: var(--muted);
}

/* Points at a partner's primary release. Sits between the dek and the
   dateline, quiet enough not to compete with the headline. */
/* A quiet source note above the dateline, used when a partner publishes the
   primary announcement and we are carrying a secondary version. We expect one
   on most releases from here on, so the treatment deliberately stays out of
   the way: one step below body copy, muted, no panel. It was a filled box,
   which put the least important line on the page in the loudest container
   above the headline's own dateline.

   NOTE ON THE SELECTOR: this has to out-specify .release-body p, which sets
   font-size, line-height, colour and margin for every paragraph in the body.
   A bare .release-source is (0,1,0) and loses to (0,1,1) no matter where it
   sits in the file, so every declaration here was being silently discarded.
   Same applies to .dateline just below.

   The link takes the paragraph's colour rather than a.link's brighter one, so
   the whole line reads as a single piece of metadata instead of a call to
   action. Hover brings it up to full text colour, which is enough of a cue at
   this size. */
.release-body p.release-source {
    margin: 0 0 var(--space-3, 28px);
    font-size: var(--fs-2xs);
    line-height: 1.55;
    color: var(--muted2);
}

.release-body p.release-source a.link {
    color: inherit;
    opacity: 1;
    text-decoration-color: rgba(255,255,255,.32);
    text-underline-offset: 3px;
}

.release-body p.release-source a.link:hover,
.release-body p.release-source a.link:focus-visible {
    color: var(--text);
    text-decoration-color: currentColor;
}

/* A second image inside the body - the partnership lockup, a product shot.
   Same treatment as the hero, with space above so it reads as a break in the
   copy rather than an illustration of the paragraph it follows. */
.release-figure {
    margin: var(--space-4, 32px) 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 14px 36px rgba(0,0,0,.10);
}

.release-figure img {
    display: block;
    width: 100%;
    height: auto;
}

.release-header {
    margin-bottom: var(--space-4, 32px);
    padding-bottom: var(--space-3, 24px);
    border-bottom: 1px solid var(--line);
}

.release h1 {
    margin: 0 0 16px;
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    line-height: 1.22;
}

.release-dek {
    margin: 0;
    font-size: var(--fs-md);
    line-height: 1.55;
    color: rgba(255,255,255,.92);
}

.release-body p {
    margin: 0 0 22px;
    font-size: var(--fs-md);
    line-height: 1.65;
    color: rgba(255,255,255,.90);
}

.release-body p.dateline { color: var(--text); }

.release-body .dateline strong {
    text-transform: uppercase;
    letter-spacing: .04em;
}

.release-body blockquote {
    margin: var(--space-3, 24px) 0;
    padding: 22px 24px;
    border: none;
    border-radius: 16px;
    background: rgba(255,255,255,.08);
    box-shadow: 0 14px 36px rgba(0,0,0,.10);
}

.release-body blockquote p {
    margin: 0;
    font-size: var(--fs-md);
    line-height: 1.55;
    color: var(--text);
}

.release-body blockquote cite {
    display: block;
    margin-top: 12px;
    font-style: normal;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
}

.release-body h2 {
    margin: var(--space-4, 32px) 0 14px;
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    color: var(--text);
}

/* Two-up portraits inside a release */
.portrait-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3, 24px);
    margin: var(--space-3, 24px) 0 var(--space-4, 32px);
}

.portrait {
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255,255,255,.08);
    box-shadow: 0 14px 36px rgba(0,0,0,.10);
}

.portrait img {
    display: block;
    width: 100%;
    height: auto;
}

.portrait figcaption {
    padding: 14px 16px;
    font-size: var(--fs-sm);
    line-height: 1.4;
    color: rgba(255,255,255,.90);
}

.portrait figcaption strong {
    display: block;
    font-weight: var(--fw-semibold);
    color: var(--text);
}

/* One row on desktop: navigation and download on the left, share pushed to
   the right. flex-wrap alone handles narrow screens - when the share row
   wraps to its own line it aligns left, no media query needed. */
.release-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 24px);
    margin-top: var(--space-4, 32px);
    padding-top: var(--space-3, 24px);
    border-top: 1px solid var(--line);
}

.release-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--space-2, 18px);
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-decoration: none;
}

.release-back:hover { color: var(--text); }

/* ---- Press kit --------------------------------------------------------- */

.kit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-3, 24px);
}

/* A lone card in an auto-fit grid stretches the full container width and
   stops reading as a card. Cap it instead. */
.kit-grid-single {
    grid-template-columns: minmax(0, 520px);
}

.kit-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: none;
    border-radius: 16px;
    padding: var(--space-3, 24px);
    background: rgba(255,255,255,.08);
    box-shadow: 0 14px 36px rgba(0,0,0,.10);
}

.kit-card h3 {
    margin: 0 0 8px;
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    line-height: 1.3;
}

.kit-card p {
    margin: 0 0 auto;
    padding-bottom: 18px;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: rgba(255,255,255,.88);
}

.kit-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 18px;
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    object-fit: contain;
    /* Generous inset so the logo's own clear space is never crowded,
       per the iM Media Labs logo usage guidelines. */
    padding: 22px;
}

/* Positive logo needs a light panel to be legible on this dark page. */
.kit-thumb.on-light {
    background: #ffffff;
}

/* Photographs fill their frame edge to edge. The padding and contain fit
   above exist so a logo's built-in clear space is never crowded; applied to
   a photo they leave it floating inside the card. */
.kit-thumb.is-photo {
    object-fit: cover;
    padding: 0;
    background: none;
}

/* One bio per row: the four-up grid crowded the copy. */
.bio-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3, 28px);
}

.bio {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--space-2, 24px);
    align-items: start;
    border: none;
    border-radius: 16px;
    padding: var(--space-3, 24px);
    background: rgba(255,255,255,.08);
    box-shadow: 0 14px 36px rgba(0,0,0,.10);
}

.bio img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255,255,255,.10);
}

.bio h3 {
    margin: 0 0 2px;
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
}

.bio .bio-role {
    margin: 0 0 10px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: .02em;
    color: var(--accent);
}

.bio p {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: rgba(255,255,255,.88);
}

.bio .bio-actions {
    margin-top: 18px;
    align-items: center;
    gap: 12px;
}

/* Placeholder while a headshot is outstanding: same circle as a real photo,
   with a translucent silhouette. Keeps the row rhythm intact instead of
   collapsing the column, so the grid does not jump when photos land. */
.bio-placeholder {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.22);
}

/* The figure is drawn to fill the full 100x100 box: shoulders run to the
   bottom edge and are clipped by the circle, head centered at 35% so it sits
   in the upper two thirds. */
.bio-placeholder svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor;
}

.bio-pending {
    font-size: var(--fs-xs);
    font-style: italic;
    color: var(--muted2);
}

/* Retained as a safety net: if a real photo 404s the column collapses
   rather than showing a broken-image icon. */
.bio.no-photo { grid-template-columns: 1fr; }

/* ---- Boilerplate ------------------------------------------------------- */

.kit-stack {
    display: grid;
    gap: var(--space-3, 28px);
    margin-bottom: var(--space-3, 28px);
}

.kit-panel {
    border: none;
    border-radius: 16px;
    padding: var(--space-3, 28px);
    background: rgba(255,255,255,.08);
    box-shadow: 0 14px 36px rgba(0,0,0,.10);
}

.panel-head {
    margin-bottom: var(--space-2, 24px);
}

.panel-head h3 {
    margin: 0;
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    line-height: 1.3;
}

/* The two lengths sit side by side under one heading, so it reads as one
   description offered at two lengths rather than two different things. */
/* Symmetric inner padding, so both content boxes end up exactly the same
   width. Padding on only one side (which is what a gap + one-sided divider
   gives you) made the second column 29px narrower and the logo previews
   visibly different sizes. The +1px compensates for the divider border. */
.variants {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.variant {
    display: flex;
    flex-direction: column;
}

/* Divider between the columns, so the shorter one doesn't look unfinished. */
.variant:not(:last-child) {
    padding-right: calc(var(--space-3, 28px) + 1px);
}

.variant + .variant {
    padding-left: var(--space-3, 28px);
    border-left: 1px solid var(--line);
}

/* Small orange labels. Sentence case rather than caps - the role lines run
   long ("Advisory Board Member, iM Media Labs; Managing Partner, VectoIQ")
   and all-caps makes them hard to scan. Tracking pulled back to match, since
   the wide letter-spacing exists to open up capitals. */
.variant h4 {
    margin: 0 0 12px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: .02em;
    color: var(--accent);
}

/* Logo previews inside a variant column. */
.variant .kit-thumb {
    margin-bottom: 14px;
}

.variant p {
    margin: 0 0 4px;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: rgba(255,255,255,.90);
}

/* Lets the copy buttons line up along the bottom despite unequal text. */
.variant .panel-text,
.variant p {
    flex: 1 1 auto;
}

/* Actions sit below the content they act on, matching every other card. */
.panel-actions {
    margin-top: var(--space-2, 24px);
}

/* The confirmation must beat .btn.btn-ghost:hover (0,3,0) — and it always
   competes with it, because the cursor is still on the button you just
   clicked. Hover is listed explicitly rather than relying on !important. */
.btn.boiler-copy.is-copied,
.btn.boiler-copy.is-copied:hover,
.btn.boiler-copy.is-copied:focus-visible {
    background: var(--accent);
    color: #fff;
}

.panel-text p {
    margin: 0 0 16px;
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: rgba(255,255,255,.92);
}

.panel-text p:last-child { margin-bottom: 0; }

.panel-list {
    margin: 0;
    padding-left: 20px;
    list-style: disc;
}

.panel-list li {
    margin: 0 0 12px;
    font-size: var(--fs-sm);
    line-height: 1.65;
    color: rgba(255,255,255,.90);
}

.panel-list li:last-child { margin-bottom: 0; }

.panel-list strong {
    color: var(--text);
    font-weight: var(--fw-semibold);
}

/* ---- Responsive ------------------------------------------------------- */
/* Kept at the end of the file, and ordered widest breakpoint first, so these
   always win over the base rules above. A merged media block that ended up
   above the rules it modified is what stopped the boilerplate columns
   collapsing on mobile. */

/* ---- Responsive -------------------------------------------------------- */

@media (max-width: 920px) {
.press-item {
    grid-template-columns: 1fr;
    gap: 18px;
}
.portrait-pair { gap: 18px; }
.bio { grid-template-columns: 72px 1fr; gap: 14px; padding: 20px; }
.bio img,
.bio-placeholder { width: 72px; height: 72px; }

.variants {
    grid-template-columns: 1fr;
    row-gap: var(--space-2, 24px);
}
.variant:not(:last-child) {
    padding-right: 0;
}
.variant + .variant {
    padding-left: 0;
    padding-top: var(--space-2, 24px);
    border-left: none;
    border-top: 1px solid var(--line);
}
}

@media (max-width: 560px) {
.portrait-pair { grid-template-columns: 1fr; }

/* Phone widths: the copy beside a 72px circle is squeezed to roughly 310px,
   which is too narrow to read comfortably. Stack the headshot above the bio
   instead so the text uses the full column. */
.bio {
    grid-template-columns: 1fr;
    gap: 16px;
}
}

/* ---- Share ------------------------------------------------------------- */
/* Intent URLs only - plain links, no third-party widget, no cookies.
   Circular icon buttons rather than a row of pills: the same shape language
   as .resource-icon on the homepage, and far less weight for what is a
   secondary action sitting under the primary download button. */

.share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.share-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.88);
    cursor: pointer;
    text-decoration: none;
    transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}

/* Both icons occupy the same grid cell, so each is centered by place-items
   and the sizing is relative to the circle rather than a wrapper span. */
.share-btn svg {
    grid-area: 1 / 1;
    width: 44%;
    height: 44%;
    display: block;
}

.share-btn:hover,
.share-btn:focus-visible {
    background: rgba(255,255,255,.18);
    color: #fff;
    transform: translateY(-1px);
}

/* Copy link swaps a chain icon for a tick, rather than replacing the label
   text - the button has no text to replace. */
.share-copy .share-icon-done { display: none; }

.share-copy.is-copied {
    background: var(--accent);
    color: #fff;
}

.share-copy.is-copied:hover,
.share-copy.is-copied:focus-visible {
    background: var(--accent);
    color: #fff;
}

.share-copy.is-copied .share-icon-default { display: none; }
.share-copy.is-copied .share-icon-done    { display: block; }

@media (prefers-reduced-motion: reduce) {
.share-btn { transition: none; }
.share-btn:hover, .share-btn:focus-visible { transform: none; }
}