/* Hero (css/case-hero.css): the map on three devices in layers, tablet at the
   back, laptop in the middle, phone in front, scaling as one piece in a 1760 x
   840 stage, with equal space from the stage's sides to the tablet on the left
   and to the phone on the right, so the group is centred rather than the
   laptop. Measured from what's visible, not the image boxes, and in pixels of
   the stage:
   - laptop, 1408 wide (the whole 1408 x 785 image, its base the widest part;
     the lid is x 134-1273, its screen x 173-1233);
   - tablet, 480 wide (visible x 20-498, y 20-386 of 519 x 408), 425 down so
     its bottom edge is lost in the fade, its right side behind the lid with
     62% of its screen showing;
   - phone, 70% of the laptop's height (the whole 289 x 607 image), 330 down,
     below the kayak, covering 9% of the laptop's width at the map's river edge.
   The stage's shared mask (.case-hero__image in css/case-hero.css, the same as
   UX Was Here's) fades all three at one line, into the scene's own gradient
   (.case-hero-shell--blend), which eases to the page colour in either theme.
   The phone runs past the stage, where the mask hides it. */
.case-hero-shell .qwc-hero-devices {
    position: relative;
    width: min(1100px, 100%);
    max-width: none;
    aspect-ratio: 1760 / 840;
    margin: clamp(40px, 3.6vw, 52px) auto 0;
    transform: none;
}

.qwc-hero-devices img {
    position: absolute;
    display: block;
    max-width: none;
    height: auto;
    margin: 0;
}

/* A soft shadow so the layers read as depth; the tablet image has its own */
.qwc-hero-devices img:not(.qwc-hero-devices__tablet) {
    filter: drop-shadow(0 6px 14px rgb(14 10 28 / 18%));
}

.qwc-hero-devices img.qwc-hero-devices__tablet {
    z-index: 0;
    top: 48.2%;
    left: 4.313%;
    width: 29.614%;
}

.qwc-hero-devices img.qwc-hero-devices__laptop {
    z-index: 1;
    top: 0;
    left: 14.545%;
    width: 80%;
}

.qwc-hero-devices img.qwc-hero-devices__phone {
    z-index: 2;
    top: 39.286%;
    left: 79.659%;
    width: 14.864%;
}

/* The subtitle's two lines even, not one long line and a short one */
.case-study-page .case-hero-shell .case-hero__subtitle {
    text-wrap: balance;
}

/* Small phones: just the laptop and a larger phone, in a 1454 x 840 stage, so
   neither is too small to read. The phone is 336 wide and 320 down, covering
   11% of the laptop's width. */
@media (max-width: 480px) {
    .case-hero-shell .qwc-hero-devices {
        aspect-ratio: 1454 / 840;
        margin-top: 34px;
    }

    .qwc-hero-devices img.qwc-hero-devices__tablet {
        display: none;
    }

    .qwc-hero-devices img.qwc-hero-devices__laptop {
        left: 0;
        width: 96.836%;
    }

    .qwc-hero-devices img.qwc-hero-devices__phone {
        top: 38.095%;
        left: 76.891%;
        width: 23.109%;
    }
}

/* Section titles and links in the Carnaval de Québec site's red (#da373e)
   instead of purple, as PhoenixRise has its blue and UX Was Here its green.
   Deep in light mode (7.6:1 on white) and a soft coral in dark mode (10.5:1 on
   the page), the same contrast as those. The sidebar keeps the site's purple,
   as on them. (More specific than the defaults in css/case-study-layout.css,
   which loads after this file.) */
.case-study-page .case-study-shell {
    --case-accent: #a01f27;
    --case-link: #a01f27;
    --case-link-hover: #7a151b;
    --case-tint: #fbeeee;
}

:root[data-portfolio-theme="dark"] .case-study-page .case-study-shell {
    --case-accent: #f9aaad;
    --case-link: #f9aaad;
    --case-link-hover: #fcc8ca;
    --case-tint: #2a181c;
}

/* Solution: each point beside its picture, spaced like UX Was Here's rows */
.qwc-solution {
    display: grid;
    gap: clamp(36px, 5vw, 56px);
    margin-top: 28px;
}

.qwc-solution__row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: start;
    gap: clamp(28px, 4vw, 48px);
}

.qwc-solution__copy {
    min-width: 0;
}

.qwc-solution__copy > :last-child {
    margin-bottom: 0;
}

.case-study__content .qwc-solution__image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    border-radius: 10px;
}

@media (max-width: 767px) {
    .qwc-solution__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
}

/* Visitor Reviews: the review cards, set like PhoenixRise's Reddit posts */
.qwc-review-examples {
    display: grid;
    gap: 28px;
    margin-top: 28px;
}

.case-study__content .qwc-review-examples img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

/* Design Rationale's pictures and captions (the old figcaption styles in
   main.css and main2.css dim, narrow and space captions out; reset here) */
.qwc-figure {
    min-width: 0;
    margin: 0;
}

.qwc-figure figcaption {
    width: auto;
    margin: 8px 0 0;
    opacity: 1;
    color: var(--case-nav-text);
    font: 400 14px/1.45 "Plus Jakarta Sans", sans-serif;
    text-align: left;
}

/* Design Rationale: two pictures to a pair, stacked on phones. Every picture gets
   the same 10:7 frame; a picture of another shape is fitted inside it whole, on a
   plain ground, so nothing is cropped. */
.qwc-compare {
    --qwc-frame: #f1f2f6;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

:root[data-portfolio-theme="dark"] .qwc-compare {
    --qwc-frame: #1e1b2e;
}

.case-study__content .qwc-compare:where(:not(.qwc-compare--natural)) .qwc-solution__image {
    aspect-ratio: 10 / 7;
    object-fit: contain;
    background: var(--qwc-frame);
}

/* The two maps fill their frames, trimmed at the sides; the lightbox shows them whole */
.case-study__content .qwc-compare--fill .qwc-solution__image {
    object-fit: cover;
}

/* Keeps the official map's title whole */
.case-study__content .qwc-compare--fill .qwc-figure:first-child .qwc-solution__image {
    object-position: 0% 50%;
}

/* Keeps everything from the sled to the kayak in view */
.case-study__content .qwc-compare--fill .qwc-figure:last-child .qwc-solution__image {
    object-position: 70% 50%;
}

@media (max-width: 767px) {
    .qwc-compare {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
}

/* Design Review: built like Design Rationale, with plain Before and After labels
   above each picture ("Before" is muted and "After" carries the accent) */
.case-study__content .qwc-compare .qwc-design-review__label {
    margin: 0 0 10px;
    color: var(--case-nav-text);
    font: 700 14px/1.4 "Plus Jakarta Sans", sans-serif;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
    opacity: 0.7;
}

.case-study__content .qwc-compare .qwc-figure:last-child .qwc-design-review__label {
    color: var(--case-accent);
    opacity: 1;
}

/* Each screenshot keeps its own shape, uncropped and with no frame showing: its
   width and height attributes reserve its space before it loads. Columns are sized
   to each picture's width-to-height ratio, so a pair stays the same height */
@media (min-width: 768px) {
    .qwc-compare--popup {
        grid-template-columns: minmax(0, 1.923fr) minmax(0, 2.196fr);
    }

    .qwc-compare--homepage {
        grid-template-columns: minmax(0, 1.778fr) minmax(0, 1.782fr);
    }

    .qwc-compare--activity {
        grid-template-columns: minmax(0, 1.42391fr) minmax(0, 1.92308fr);
    }
}

@media (max-width: 767px) {
    .case-study__content .qwc-design-review .case-note {
        padding: 20px;
    }
}

/* Responsiveness: the map on each device, standing on one line with even gaps.
   The tablet image has its own shadow around the device (20px at the sides and
   21px below, of its 519 width), so it's pulled out by that much and the gaps
   and baseline are measured from the device itself. Where they'd get too small,
   the laptop takes the full width with the tablet and phone below it. */
.qwc-devices {
    --qwc-tablet-width: 30%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: clamp(24px, 3vw, 36px);
}

.case-study__content .qwc-devices img {
    display: block;
    max-width: none;
    height: auto;
    margin: 0;
}

.case-study__content .qwc-devices .qwc-devices__laptop {
    width: 53%;
    filter: drop-shadow(0 6px 14px rgb(14 10 28 / 18%));
}

.case-study__content .qwc-devices .qwc-devices__tablet {
    width: var(--qwc-tablet-width);
    margin: 0 calc(var(--qwc-tablet-width) * -20 / 519) calc(var(--qwc-tablet-width) * -21 / 519);
}

.case-study__content .qwc-devices .qwc-devices__phone {
    width: 13%;
    filter: drop-shadow(0 6px 14px rgb(14 10 28 / 18%));
}

@media (max-width: 900px) {
    .qwc-devices {
        --qwc-tablet-width: 74%;
        row-gap: 24px;
    }

    .case-study__content .qwc-devices .qwc-devices__laptop {
        width: 100%;
    }

    .case-study__content .qwc-devices .qwc-devices__phone {
        width: 28%;
    }
}

/* References and citations: UX Was Here's rules (css/ux-was-here.css isn't loaded
   here), in this page's red and tint. A citation lands below the toolbar, as the
   sections do. */
.phoenixrise-references__details {
    width: min(100%, 960px);
    box-sizing: border-box;
    margin: 28px 0 0;
    overflow: hidden;
    border: 2px solid var(--case-tint);
    border-radius: 10px;
}

.phoenixrise-references__summary {
    display: flex;
    min-height: 76px;
    align-items: center;
    gap: 16px;
    padding: 16px 22px;
    color: var(--case-nav-text);
    background: var(--case-tint);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
}

.phoenixrise-references__summary::-webkit-details-marker {
    display: none;
}

.phoenixrise-references__summary:focus-visible {
    outline: 2px solid var(--case-accent);
    outline-offset: -4px;
}

.phoenixrise-references__icon {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--case-accent);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.phoenixrise-references__chevron {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    margin-left: auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    transition: transform 180ms ease;
}

.phoenixrise-references__details[open] .phoenixrise-references__chevron {
    transform: rotate(180deg);
}

.phoenixrise-references__list {
    display: grid;
    gap: 28px;
    padding: clamp(20px, 3vw, 32px);
    border-top: 1px solid var(--case-tint);
}

/* (more specific than the shared paragraph margin in
   css/case-study-layout.css, which loads after this file) */
.case-study__content .phoenixrise-references .phoenixrise-references__list p {
    margin: 0;
    overflow-wrap: anywhere;
}

.phoenixrise-reference__number {
    margin-right: 0.35em;
    font-weight: 700;
    white-space: nowrap;
}

.case-study__content .phoenixrise-references__list a {
    color: var(--case-accent);
    font-family: inherit;
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.case-study__content .phoenixrise-citation {
    font-size: 0.72em;
    line-height: 0;
    vertical-align: super;
}

.case-study__content .phoenixrise-citation a {
    color: var(--case-link);
    font-size: inherit;
    text-decoration: none;
    text-underline-offset: 2px;
}

.case-study__content .phoenixrise-citation a:hover {
    color: var(--case-accent);
    text-decoration: underline;
}

.case-study__content .phoenixrise-citation a:focus-visible {
    border-radius: 2px;
    outline: 2px solid var(--case-accent);
    outline-offset: 2px;
}

/* A citation lands clear of the top of the screen and, on phones, the sticky
   bar: the same offsets as the page's sections */
.phoenixrise-references__list article {
    scroll-margin-top: calc(var(--case-view-h) + 28px);
}

@media (max-width: 767px) {
    .phoenixrise-references__list article {
        scroll-margin-top: calc(var(--case-view-h) + 72px);
    }
}

.phoenixrise-references__list article:focus {
    outline: 2px solid var(--case-accent);
    outline-offset: 4px;
}

/* Playfair Display Bold: the heading font on the Carnaval de Québec site
   itself, festive and a little ceremonial. The rest of the page stays in Plus
   Jakarta Sans. */
.case-study-page .case-hero-shell .case-hero__title {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
}

/* With no logo or project-details box beside it, the overview spans the
   full width like the sections below */
.project-overview {
    width: 100%;
}

/* #qwc-project-hero-section{
    background-image: url('../image/quebec-winter-carnival/parallax.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
} */


/* What I Learned and Future Steps: spaced like UX Was Here's */
.case-study__content .qwc-reflection {
    display: grid;
    gap: clamp(28px, 3.5vw, 40px);
    margin: 0;
}

.case-study__content .qwc-reflection .project-section-subheading {
    margin: 0 0 8px;
}

.case-study__content .qwc-reflection .project-section-paragraph {
    margin: 0;
}

/* Prototype: a preview of the live microsite with a link to explore it,
   laid out like PhoenixRise's prototype section */
.qwc-prototype {
    --qwc-prototype-rule: #d3d8df;
    --qwc-prototype-surface: #ffffff;
    --qwc-prototype-tint: var(--case-tint);
    --qwc-prototype-text: #0e0a1c;
    --qwc-prototype-shadow: 0 18px 40px rgb(14 10 28 / 0.12);
}

:root[data-portfolio-theme="dark"] .qwc-prototype {
    --qwc-prototype-rule: #4a4560;
    --qwc-prototype-surface: #0e0a1c;
    --qwc-prototype-tint: var(--case-tint);
    --qwc-prototype-text: #f5f1fa;
    --qwc-prototype-shadow: 0 18px 40px rgb(0 0 0 / 0.4);
}

.qwc-prototype__preview {
    display: block;
    margin-top: clamp(24px, 3vw, 36px);
    overflow: hidden;
    border: 1px solid var(--qwc-prototype-rule);
    border-radius: 12px;
    box-shadow: var(--qwc-prototype-shadow);
}

.qwc-prototype__preview img {
    display: block;
    width: 100%;
    height: auto;
}

.qwc-prototype__action {
    display: flex;
    justify-content: center;
    margin-top: clamp(28px, 4vw, 40px);
}

.qwc-prototype__link {
    display: inline-flex;
    box-sizing: border-box;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 22px;
    border: 1px solid var(--case-accent);
    border-radius: 999px;
    color: var(--qwc-prototype-text);
    background: var(--qwc-prototype-surface);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color 180ms ease;
}

.qwc-prototype__link:hover {
    color: var(--qwc-prototype-text);
    background: var(--qwc-prototype-tint);
}

.qwc-prototype__link:focus-visible {
    outline: 2px solid var(--case-accent);
    outline-offset: 3px;
}

.qwc-prototype__link svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ===== Read / Map view (js/qwc-case-view.js) =====
   Read view is the page as it is. Map view hides the text and sidebar and
   shows the sections as stops along a winter road; the sidebar stays in
   both, going to the stops in Map view. The toggle sits in one toolbar above
   both views, over the content column and sticky, so it never moves when
   the view changes. The script measures the toolbar into --case-view-h (and
   --case-view-top, the height of the site header if that ever sticks), and
   everything else that sticks or scrolls to a section leaves room for it. */

.case-study-shell {
    --case-view-top: 0px;
    --case-view-h: 66px;
}

.case-view-bar {
    position: sticky;
    top: var(--case-view-top);
    z-index: 6;
    padding: 12px 0;
    background: color-mix(in srgb, var(--white, #ffffff) 90%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* The same columns as the case study (css/case-study-layout.css), so the
   toggle lines up with the content column */
.case-view-bar__inner {
    display: grid;
    box-sizing: border-box;
    width: min(1320px, calc(100% - clamp(40px, 8vw, 128px)));
    grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
    gap: clamp(36px, 5vw, 72px);
    margin: 0 auto;
}

.case-view-bar__inner > .case-view {
    grid-column: 2;
    justify-self: start;
}

@media (max-width: 767px) {
    .case-view-bar__inner {
        display: block;
        width: auto;
        padding: 0 20px;
    }
}

.case-view {
    display: inline-flex;
    gap: 2px;
    margin: 0;
    padding: 3px;
    border: 1px solid var(--case-nav-rule);
    border-radius: 999px;
    background: var(--white, #ffffff);
}

.case-view__option {
    display: inline-flex;
    min-width: 84px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
    padding: 6px 16px;
    border: 0;
    border-radius: 999px;
    color: var(--case-nav-text);
    background: transparent;
    font: 600 14px/1.2 "Plus Jakarta Sans", sans-serif;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease;
}

.case-view__option svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linejoin: round;
}

.case-view__option:hover {
    background: color-mix(in srgb, var(--case-accent) 14%, transparent);
}

.case-view__option[aria-pressed="true"] {
    color: #ffffff;
    background: var(--case-accent);
}

:root[data-portfolio-theme="dark"] .case-view__option[aria-pressed="true"] {
    color: #0e0a1c;
}

.case-view__option:focus-visible {
    outline: 2px solid var(--case-accent);
    outline-offset: 2px;
}

/* Sticky things and section links leave room for the toolbar
   (specific enough to outrank css/case-study-layout.css, which loads later) */
.case-study-shell .case-study__sidebar {
    top: calc(var(--case-view-h) + 20px);
    max-height: calc(100vh - var(--case-view-h) - 40px);
}

.case-study-shell .case-study__content [data-case-section],
.case-study-shell .case-study__content .project-section-title,
.case-study-shell .qwc-map__stop {
    scroll-margin-top: calc(var(--case-view-h) + 28px);
}

@media (max-width: 767px) {
    .case-study-shell .case-study__sidebar {
        top: var(--case-view-h);
        max-height: calc(min(100dvh, 100vh) - var(--case-view-h));
    }

    .case-study-shell .case-nav__panel {
        max-height: calc(100dvh - 64px - var(--case-view-h));
    }

    .case-study-shell .case-study__content [data-case-section],
    .case-study-shell .case-study__content .project-section-title,
    .case-study-shell .qwc-map__stop {
        scroll-margin-top: calc(var(--case-view-h) + 72px);
    }
}

/* Desktop and tablet: the sidebar beside whichever view is showing, which
   takes the content column */
@media (min-width: 768px) {
    .case-study__sidebar {
        grid-column: 1;
        grid-row: 1;
    }

    .case-study__content,
    .qwc-map {
        grid-column: 2;
        grid-row: 1;
    }
}

.qwc-map {
    display: none;
}

:root[data-case-view="map"] .case-study__content {
    display: none;
}

:root[data-case-view="map"] .qwc-map {
    display: block;
}

/* ----- The map ----- */

.qwc-map {
    --map-snow-top: #f4f8fc;
    --map-snow-bottom: #e2ecf6;
    --map-drift: #ffffff;
    --map-tree: #2f6b55;
    --map-tree-snow: #ffffff;
    --map-trunk: #6b4a35;
    --map-road-edge: #c3d3e4;
    --map-road: #ffffff;
    --map-road-line: #9cb1c8;
    --map-marker-bg: #c4303a;
    --map-marker-text: #ffffff;
    --map-marker-ring: #ffffff;
    --map-card-bg: #ffffff;
    --map-card-border: #cfdae6;
    --map-card-title: #13223f;
    --map-card-text: #3d4a63;
    --map-card-shadow: 0 4px 14px rgb(30 50 80 / 10%);
    --map-post: #4a5568;
    --map-light: #f2cf7e;
    --map-glow: transparent;
    --map-focus: var(--case-accent);
    --map-heading: #13223f;
    --map-hint: #3d4a63;
    box-sizing: border-box;
    width: 100%;
    max-width: 1000px;
    justify-self: start;
    overflow: hidden;
    padding: clamp(24px, 3vw, 40px);
    border-radius: 24px;
    background: linear-gradient(180deg, var(--map-snow-top), var(--map-snow-bottom));
    font-family: "Plus Jakarta Sans", sans-serif;
}

/* Night on the carnival grounds: deep blue snow under warm lamp light */
:root[data-portfolio-theme="dark"] .qwc-map {
    --map-snow-top: #142544;
    --map-snow-bottom: #0b162c;
    --map-drift: #1c3054;
    --map-tree: #1f4d42;
    --map-tree-snow: #c7d4e8;
    --map-trunk: #4c372a;
    --map-road-edge: #0a1428;
    --map-road: #2a3e62;
    --map-road-line: #f2c46b;
    --map-marker-bg: #f2b544;
    --map-marker-text: #1a1204;
    --map-marker-ring: #0b162c;
    --map-card-bg: #0e1b33;
    --map-card-border: #35507b;
    --map-card-title: #f4f6fb;
    --map-card-text: #c9d3e5;
    --map-card-shadow: 0 6px 18px rgb(0 0 0 / 35%);
    --map-post: #8c98b0;
    --map-light: #ffd27a;
    --map-glow: rgb(255 196 92 / 26%);
    --map-focus: var(--case-accent);
    --map-heading: #f4f6fb;
    --map-hint: #c9d3e5;
}

.qwc-map__intro {
    margin: 0 0 clamp(16px, 2.4vw, 28px);
}

.qwc-map .qwc-map__title {
    margin: 0 0 6px;
    padding: 0;
    color: var(--map-heading);
    font: 700 24px/1.3 "Plus Jakarta Sans", sans-serif;
    text-transform: uppercase;
}

.qwc-map .qwc-map__hint {
    margin: 0;
    padding: 0;
    color: var(--map-hint);
    font: 400 16px/1.5 "Plus Jakarta Sans", sans-serif;
}

.qwc-map__ground {
    position: relative;
}

.qwc-map__art {
    position: absolute;
    top: 0;
    left: 0;
    overflow: visible;
}

.qwc-map__road-edge,
.qwc-map__road,
.qwc-map__road-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.qwc-map__road-edge {
    stroke: var(--map-road-edge);
    stroke-width: 44;
}

.qwc-map__road {
    stroke: var(--map-road);
    stroke-width: 36;
}

.qwc-map__road-line {
    stroke: var(--map-road-line);
    stroke-width: 2.5;
    stroke-dasharray: 10 12;
}

.qwc-map__drift {
    fill: var(--map-drift);
}

.qwc-map__needles {
    fill: var(--map-tree);
}

.qwc-map__tree-snow {
    fill: var(--map-tree-snow);
}

.qwc-map__trunk {
    fill: var(--map-trunk);
}

.qwc-map__post {
    fill: var(--map-post);
}

.qwc-map__light {
    fill: var(--map-light);
}

.qwc-map__glow {
    fill: var(--map-glow);
}

.qwc-map__scenery {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.qwc-map__icon {
    position: absolute;
    height: auto;
    margin: 0;
}

:root[data-portfolio-theme="dark"] .qwc-map__icon {
    filter: brightness(0.88);
}

.qwc-map .qwc-map__stops {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qwc-map .qwc-map__stop {
    position: absolute;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.qwc-map .qwc-map__link {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 14px;
    color: var(--map-card-title);
    text-decoration: none;
}

.qwc-map__stop.is-left .qwc-map__link {
    flex-direction: row-reverse;
}

.qwc-map__marker {
    display: grid;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 3px solid var(--map-marker-ring);
    border-radius: 50%;
    color: var(--map-marker-text);
    background: var(--map-marker-bg);
    box-shadow: 0 2px 6px rgb(20 30 50 / 25%);
    font: 800 15px/1 "Plus Jakarta Sans", sans-serif;
}

.qwc-map__card {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px;
    border: 1px solid var(--map-card-border);
    border-radius: 12px;
    background: var(--map-card-bg);
    box-shadow: var(--map-card-shadow);
    transition: border-color 160ms ease;
}

.qwc-map__label {
    color: var(--map-card-title);
    font: 700 16px/1.35 "Plus Jakarta Sans", sans-serif;
}

.qwc-map__summary {
    color: var(--map-card-text);
    font: 400 14px/1.45 "Plus Jakarta Sans", sans-serif;
}

.qwc-map__link:hover .qwc-map__card {
    border-color: var(--map-focus);
}

.qwc-map .qwc-map__link:focus-visible {
    outline: 3px solid var(--map-focus);
    outline-offset: 4px;
}

/* The one bit of motion: a stop's marker hops, like the icons on the
   carnival map */
.qwc-map__link:hover .qwc-map__marker,
.qwc-map__link:focus-visible .qwc-map__marker {
    animation: qwc-map-hop 460ms ease-out;
}

@keyframes qwc-map-hop {
    0%,
    100% {
        transform: translateY(0);
    }
    35% {
        transform: translateY(-7px);
    }
    65% {
        transform: translateY(0);
    }
    82% {
        transform: translateY(-2px);
    }
}

@media (max-width: 767px) {
    .qwc-map {
        width: auto;
        justify-self: stretch;
        margin: 20px 20px 0;
        padding: 20px 16px;
        border-radius: 18px;
    }

    .qwc-map .qwc-map__title {
        font-size: 20px;
    }
}

/* A map pin beside the sections about the map */
.case-nav__pin {
    width: 13px;
    height: 13px;
    margin-right: 5px;
    vertical-align: -1px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

@media (prefers-reduced-motion: reduce) {
    .qwc-map__link:hover .qwc-map__marker,
    .qwc-map__link:focus-visible .qwc-map__marker {
        animation: none;
    }

    .case-view__option {
        transition: none;
    }
}