/* ======================== PUBLIC EVENT PAGE ===========================
   A photograph, then a schedule, with the ticket held beside it. The page
   has one job: make the programme readable enough that the price on the
   right stops being the first thing you think about.
   ====================================================================== */

.pv{
    --pv-line: rgba(21,21,21,0.14);
    --pv-muted: #5a5a5a;
    --pv-ground: #ececeb;
    --pv-card: #ffffff;
    --pv-ink: #151515;
    --pv-opening:    #14b8a6;
    --pv-conference: #8b5cf6;
    --pv-panel:      #4f46e5;
    --pv-roundtable: #3b82f6;
    --pv-workshop:   #e07b39;
    --pv-break:      #8a8a8a;
    --pv-closing:    #db2777;
}
.dark .pv{
    --pv-line: rgba(255,255,255,0.16);
    --pv-muted: #a8a8a8;
    --pv-ground: #131313;
    --pv-card: #1c1c1c;
    --pv-ink: #ffffff;
}

/* the site is content-box by default; every width below assumes otherwise */
.pv *, .pv *::before, .pv *::after{ box-sizing: border-box; }

/* This page carries no masthead, so the 60px #mainwrapper reserves for one
   is dead space above the photograph. */
#mainwrapper:has(> .pv){ padding-top: 0; }
.pv{ background: var(--pv-ground); color: var(--pv-ink); min-height: 100vh; }

/* --------------------------- the footer ------------------------------ */
.pv_foot{
    padding: 26px 40px 34px;
    border-top: 1px solid var(--pv-line);
    font-size: 13px; color: var(--pv-muted);
}
.pv_foot a{ color: var(--pv-muted); text-decoration: none; }
.pv_foot a:hover{ color: var(--pv-ink); text-decoration: underline; }
.pv_foot span{ padding: 0 4px; opacity: 0.5; }

.pv_preview{
    padding: 12px 24px; text-align: center;
    background: rgba(255,170,60,0.20); border-bottom: 1px solid rgba(255,170,60,0.5);
    font-size: 14px; font-weight: 700;
}

/* ------------------------------- hero -------------------------------- */
.pv_hero{ position: relative; min-height: 250px; display: flex; align-items: flex-end; }
.pv_hero.is_plain{ min-height: 340px; }

/* the photograph. On a wide screen it fills the hero and the headline sits on
   top of it; on a phone it becomes a banner with the headline underneath. */
.pv_hero_media{
    position: absolute; inset: 0;
    background-size: cover; background-position: center; background-repeat: no-repeat;
}
.pv_hero.is_plain .pv_hero_media{ background-color: #1c1c1c; }
.pv_hero_shade{
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.30) 45%, rgba(0,0,0,0.82) 100%);
}
.pv_hero_media .pv_badges{
    position: absolute; left: 40px; top: 40px; padding: 0;
}
.pv_hero_in{ position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 40px 40px 38px; color: white; }

.pv_badges{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 0 16px; }
.pv_hero_in{ align-self: flex-end; }
.pv_badge{
    display: inline-flex; align-items: center; padding: 6px 15px;
    border: 1px solid rgba(255,255,255,0.55); border-radius: 15px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.07em; color: white; white-space: nowrap;
}
.pv_badge.is_lime{ background: var(--primary-color); border-color: var(--primary-color); color: #151515; }

.pv_hero_in h1{ font-size: 54px; line-height: 1.02; color: white; padding: 0 0 14px; max-width: 15ch; }
.pv_when{ font-size: 17px; color: rgba(255,255,255,0.88); padding: 0 0 26px; }

.pv_hero_actions{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pv_cta, .pv_ghost{
    display: inline-flex; align-items: center; justify-content: center;
    padding: 16px 30px; border-radius: 30px;
    font-size: 16px; font-weight: 700; text-decoration: none; white-space: nowrap;
    transition-duration: 0.2s;
}
/* `.dark a{color: var(--off-white)}` in adapt-main.css beats a single class,
   so every lime button here needs the extra specificity: the label has to be
   dark in both themes because the button is lime in both. */
.pv .pv_cta, .dark .pv .pv_cta,
.pv .pv_cta:hover, .dark .pv .pv_cta:hover{ color: #151515; }
.pv_cta{ background: var(--primary-color); border: 1px solid var(--primary-color); }
.pv_cta:hover{ opacity: 0.88; }
/* The ghost button was written for the hero, where it sits on a photograph
   and so is white on white-ish. It is used in the ticket card too, where that
   made it invisible in the light theme. The white version is now scoped to
   the hero; everywhere else it reads against the page's own ground.
   The `.pv` prefix is there because `.dark a` in adapt-main.css outranks a
   single class. */
.pv_ghost{ border: 1px solid var(--pv-line); text-align: center; }
.pv .pv_ghost, .dark .pv .pv_ghost,
.pv .pv_ghost:hover, .dark .pv .pv_ghost:hover{ color: var(--pv-ink); }
.pv_ghost:hover{ border-color: var(--pv-ink); }

/* over the photograph, where the ground is the image */
.pv_hero .pv_ghost{ border-color: rgba(255,255,255,0.6); }
.pv .pv_hero .pv_ghost, .dark .pv .pv_hero .pv_ghost,
.pv .pv_hero .pv_ghost:hover, .dark .pv .pv_hero .pv_ghost:hover{ color: white; }
.pv_hero .pv_ghost:hover{ border-color: white; }
.pv_seats{ font-size: 15px; color: rgba(255,255,255,0.8); }
/* how it works, stated where the price used to be */
.pv_gate{
    font-size: 15px; color: rgba(255,255,255,0.82);
    padding: 18px 0 0; max-width: 60ch;
}

/* ------------------------------- body -------------------------------- */
.pv_body{
    max-width: 1280px; margin: 0 auto; padding: 34px 40px 70px;
    display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 46px; align-items: start;
}

.pv_intro{ font-size: 19px; line-height: 1.6; max-width: 62ch; padding: 0 0 30px; }
.pv_intro.is_clamped{
    display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
    overflow: hidden; padding-bottom: 0;
}
.pv_more{
    display: inline-block; padding: 10px 0 30px;
    border: 0; background: none;
    color: #5c7a1e; font-family: inherit; font-size: 16px; font-weight: 700;
    cursor: pointer;
}
.dark .pv_more{ color: var(--primary-color); }
.pv_more[hidden]{ display: none; }

.pv_stats{
    display: flex; align-items: flex-start; gap: 54px; flex-wrap: wrap;
    padding: 26px 0 0; border-top: 2px solid var(--pv-ink);
}
.dark .pv_stats{ border-top-color: rgba(255,255,255,0.6); }
.pv_stat_n{ font-size: 30px; font-weight: 700; line-height: 1; padding: 0; }
.pv_stat_l{ font-size: 14px; color: var(--pv-muted); padding: 5px 0 0; }

.pv_section_head{ display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 46px 0 0; }
.pv_section_head h2{ font-size: 30px; padding: 0; }
.pv_section_note{ font-size: 14px; color: var(--pv-muted); }
.pv_spaced{ padding-top: 54px; }

/* ------------------------------- days -------------------------------- */
.pv_days{ display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; padding: 22px 0 8px; }
.pv_day{
    display: flex; flex-direction: column; gap: 3px; text-align: left;
    padding: 13px 22px; border: 1px solid var(--pv-line); border-radius: 14px;
    background: transparent; color: var(--pv-ink);
    font-family: inherit; cursor: pointer; transition-duration: 0.2s;
}
.pv_day:hover{ border-color: var(--pv-ink); }
.pv_day.is_on{ background: var(--pv-ink); border-color: var(--pv-ink); color: var(--pv-ground); }
.pv_day_name{ font-size: 16px; font-weight: 700; white-space: nowrap; }
.pv_day_count{ font-size: 13px; opacity: 0.68; white-space: nowrap; }

/* ----------------------------- schedule ------------------------------ */
.pv_schedule[hidden]{ display: none; }
.pv_empty{ padding: 34px 0; color: var(--pv-muted); font-size: 16px; }

.pv_row{
    display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 22px;
    padding: 22px 0; border-bottom: 1px solid var(--pv-line);
}
.pv_row:last-child{ border-bottom: 0; }
/* A divider already draws its own rule. The row above it was drawing one too,
   so a separator arrived with a full-width line stacked right on top of it. */
.pv_row:has(+ .pv_divider){ border-bottom: 0; }

.pv_time_start{ font-size: 17px; font-weight: 700; padding: 0; white-space: nowrap; }
.pv_time_len{ font-size: 13px; color: var(--pv-muted); padding: 3px 0 0; }

.pv_meta{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 0 0 8px; }
.pv_type{
    display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 13px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.07em; color: white; white-space: nowrap;
}
.pv_type_opening{ background: var(--pv-opening); }
.pv_type_conference{ background: var(--pv-conference); }
.pv_type_panel{ background: var(--pv-panel); }
.pv_type_roundtable{ background: var(--pv-roundtable); }
.pv_type_workshop{ background: var(--pv-workshop); }
.pv_type_break{ background: var(--pv-break); }
.pv_type_closing{ background: var(--pv-closing); }

/* a separator: a heading that divides the day, with a rule running off it */
.pv_divider{
    display: flex; align-items: center; gap: 16px;
    padding: 30px 0 12px;
}
.pv_divider span{
    flex: none; font-size: 12px; font-weight: 700;
    letter-spacing: 0.09em; text-transform: uppercase; color: var(--pv-muted);
}
.pv_divider::after{ content: ''; flex: 1; height: 0; border-top: 1px solid var(--pv-line); }
.pv_row + .pv_divider{ padding-top: 22px; }
.pv_room, .pv_places{ font-size: 14px; color: var(--pv-muted); }

/* ------------------------ the description ---------------------------- */
/* The badge becomes the control when there is something to show. It keeps
   the badge's own look -- a button element resets too much of it otherwise --
   and gains a chevron so it reads as something you can press. */
button.pv_type{
    border: 0; font-family: inherit; cursor: pointer;
    gap: 7px; transition-duration: 0.2s;
}
button.pv_type:hover{ opacity: 0.85; }
button.pv_type:focus-visible{ outline: 2px solid var(--pv-ink); outline-offset: 2px; }

.pv_chev{
    width: 7px; height: 7px; display: inline-block;
    border: solid currentColor; border-width: 0 1.5px 1.5px 0;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.25s;
}
.pv_row.is_open .pv_chev{ transform: translateY(1px) rotate(-135deg); }

.pv_title.is_toggle{ cursor: pointer; }
.pv_title.is_toggle:hover{ opacity: 0.7; }

.pv_desc{
    overflow: hidden; height: 0;
    transition: height 0.28s ease;
}
.pv_desc[hidden]{ display: none; }
.pv_desc_in{
    padding: 14px 0 2px; max-width: 68ch;
    font-size: 16px; line-height: 1.6; color: var(--pv-muted);
}
.pv_desc_in p{ padding: 0 0 10px; }
.pv_desc_in p:last-child{ padding-bottom: 0; }
.pv_desc_in ul, .pv_desc_in ol{ padding: 0 0 10px 22px; }
/* a global `li` rule paints list items with --text-color, which is a shade
   brighter than the description around them */
.pv_desc_in li{ color: inherit; }
.pv_desc_in a{ color: var(--pv-ink); text-decoration: underline; }
.dark .pv_desc_in a{ color: white; }

/* somebody who prefers less movement gets the panel without the slide */
@media (prefers-reduced-motion: reduce){
    .pv_desc, .pv_chev{ transition: none; }
}
.pv_full{ font-size: 13px; font-weight: 700; color: #c0392b; }
.dark .pv_full{ color: #ffb4b4; }

.pv_title{ font-size: 21px; font-weight: 700; line-height: 1.3; padding: 0; }

.pv_speakers{ display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 12px 0 0; }
.pv_speaker{ display: inline-flex; align-items: center; gap: 9px; font-size: 15px; }
.pv_speaker img, .pv_speaker_blank{
    width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
    background: var(--pv-break); display: inline-block;
}

/* ------------------------------ venue -------------------------------- */
.pv_venue{ display: grid; grid-template-columns: minmax(0, 1fr) 1fr; gap: 34px; padding: 22px 0 0; align-items: start; }
.pv_venue_name{ font-size: 19px; font-weight: 700; padding: 0 0 8px; }
.pv_venue_line{ font-size: 16px; color: var(--pv-muted); padding: 0 0 2px; }
.pv_directions{ display: inline-block; font-size: 15px; font-weight: 700; color: #5c7a1e; text-decoration: none; padding: 14px 0 0; }
.dark .pv_directions{ color: var(--primary-color); }
.pv_directions:hover{ opacity: 0.75; }

.pv_map{
    display: flex; align-items: center; justify-content: center;
    min-height: 250px; border-radius: 14px;
    background: var(--pv-card); border: 1px solid var(--pv-line);
    color: var(--pv-muted); font-size: 15px; text-decoration: none; transition-duration: 0.2s;
}
.pv_map:hover{ border-color: var(--pv-ink); color: var(--pv-ink); }

/* the embedded map, when the venue has been placed */
.pv_map_box{
    border-radius: 14px; overflow: hidden;
    border: 1px solid var(--pv-line); background: var(--pv-card);
}

.pv_map_frame{
    display: block; width: 100%; height: 280px; border: 0;
}

/* the tiles are drawn light whatever the page is, so the frame keeps a
   little of its own light ground rather than a hard dark seam */
.dark .pv_map_box{ background: #fff; }

.pv_map_foot{
    padding: 10px 14px; margin: 0;
    background: var(--pv-card);
    border-top: 1px solid var(--pv-line);
    font-size: 13.5px;
}

.pv_map_foot a{ color: #5c7a1e; font-weight: 700; text-decoration: none; }
.dark .pv_map_foot a{ color: var(--primary-color); }
.pv_map_foot a:hover{ opacity: 0.75; }

/* ------------------------------ aside -------------------------------- */
.pv_aside{ position: sticky; top: 24px; }

.pv_ticket{
    padding: 26px 28px 28px; border-radius: 18px;
    background: var(--pv-card); border: 1px solid var(--pv-line);
}
.pv_ticket_label{ font-size: 11px; font-weight: 700; letter-spacing: 0.09em; color: var(--pv-muted); padding: 0 0 16px; }

/* The three steps, numbered down the left. The price now lives inside step
   three at body size -- it is one fact among three, not the headline. */
.pv_steps{ list-style: none; margin: 0; padding: 0; counter-reset: pv_step; }
.pv_steps li{
    position: relative; counter-increment: pv_step;
    padding: 0 0 18px 38px;
}
.pv_steps li::before{
    content: counter(pv_step);
    position: absolute; left: 0; top: -1px;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--pv-line); border-radius: 50%;
    font-size: 12px; font-weight: 700; color: var(--pv-muted);
}
/* the line joining one step to the next, so they read as a sequence */
.pv_steps li::after{
    content: ''; position: absolute; left: 12px; top: 26px; bottom: 6px;
    width: 1px; background: var(--pv-line);
}
.pv_steps li:last-child{ padding-bottom: 4px; }
.pv_steps li:last-child::after{ display: none; }
.pv_steps li:last-child::before{
    background: var(--pv-ink); border-color: var(--pv-ink); color: var(--pv-ground);
}
.pv_steps strong{ display: block; font-size: 16px; }
.pv_steps span{ display: block; font-size: 14px; color: var(--pv-muted); padding: 3px 0 0; line-height: 1.45; }

.pv_included_label{
    font-size: 11px; font-weight: 700; letter-spacing: 0.09em;
    color: var(--pv-muted); padding: 22px 0 0;
    border-top: 1px solid var(--pv-line); margin-top: 20px;
}

.pv_included{ list-style: none; padding: 14px 0 0; margin: 0; }
.pv_included li{
    position: relative; padding: 0 0 11px 26px;
    font-size: 15px; line-height: 1.45;
}
.pv_included li::before{
    content: ''; position: absolute; left: 2px; top: 5px;
    width: 5px; height: 10px; border: solid var(--primary-color); border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.pv_bar{ display: flex; align-items: center; gap: 12px; padding: 18px 0 0; }
.pv_bar_track{ flex: 1; height: 6px; border-radius: 3px; background: rgba(21,21,21,0.12); overflow: hidden; }
.dark .pv_bar_track{ background: rgba(255,255,255,0.16); }
.pv_bar_fill{ display: block; height: 100%; background: var(--primary-color); }
.pv_bar_text{ font-size: 13px; font-weight: 700; color: var(--pv-muted); white-space: nowrap; }

.pv_book{
    display: block; margin: 22px 0 0; padding: 16px 20px;
    border-radius: 28px; background: var(--primary-color); color: #151515;
    font-size: 16px; font-weight: 700; text-align: center; text-decoration: none;
    transition-duration: 0.2s;
}
.pv .pv_book, .dark .pv .pv_book,
.pv .pv_book:hover, .dark .pv .pv_book:hover{ color: #151515; }
.pv_book:hover{ opacity: 0.88; }
.pv_terms{ font-size: 13px; color: var(--pv-muted); text-align: center; padding: 12px 0 0; line-height: 1.45; }

.pv_promo{
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin: 16px 0 0; padding: 16px 18px; border-radius: 14px;
    background: rgba(202,231,111,0.24); border: 1px solid rgba(202,231,111,0.6);
}
.pv_promo_code{ font-size: 15px; padding: 0; }
.pv_promo_note{ font-size: 13px; color: var(--pv-muted); padding: 3px 0 0; }
.dark .pv_promo_note{ color: rgba(255,255,255,0.7); }
.pv_copy{
    flex: none; padding: 8px 18px; border-radius: 18px;
    border: 1px solid var(--pv-ink); color: var(--pv-ink);
    font-size: 14px; font-weight: 700; text-decoration: none; transition-duration: 0.2s;
}
.pv_copy:hover{ background: var(--pv-ink); color: var(--pv-card); }
.pv_copy.is_done{ background: var(--pv-ink); color: var(--pv-card); }

.pv_by_label{ font-size: 11px; font-weight: 700; letter-spacing: 0.09em; color: var(--pv-muted); padding: 30px 0 12px; }
.pv_by{ display: flex; align-items: center; gap: 14px; }
.pv_by_mark{
    flex: none; width: 44px; height: 44px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary-color); color: #151515; font-size: 14px; font-weight: 700;
}
.pv_by_text strong{ display: block; font-size: 16px; }
.pv_by_text span{ display: block; font-size: 13px; color: var(--pv-muted); padding: 2px 0 0; }

/* --------------------------- the bottom bar --------------------------- */
.pv_bottom{ display: none; }

/* ----------------------------- narrower ------------------------------ */
@media(max-width: 1080px){
    .pv_body{ grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .pv_aside{ position: static; }
    .pv_venue{ grid-template-columns: minmax(0, 1fr); }
}
@media(max-width: 720px){
    /* ---- the photograph becomes a banner, the headline sits under it ---- */
    .pv_hero{ display: block; min-height: 0; height: 120px; }
    .pv_hero.is_plain{ min-height: 0; }
    .pv_hero_media{ position: relative; inset: auto; height: 0px; }
    .pv_hero.is_plain .pv_hero_media{ height: 0; }
    /* only enough shade to keep the badges legible */
    .pv_hero_shade{ background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 45%); }
    .pv_hero_media .pv_badges{ left: 20px; top: 18px; }

    .pv_hero_in{ padding: 22px 20px 0; color: var(--pv-ink); }
    .pv_hero_in h1{ color: var(--pv-ink); font-size: 31px; max-width: none; padding: 0 0 8px; }
    .pv_when{ color: var(--pv-muted); font-size: 15px; font-weight: 700; padding: 0; }

    /* the hero's own buttons go: the bar at the foot of the screen carries
       the action from here on, and two of them would be one too many */
    .pv_hero_actions, .pv_gate{ display: none; }

    .pv_body{ padding: 18px 20px 110px; }   /* room for the bar */
    .pv_intro{ font-size: 17px; padding-bottom: 0; }

    /* ---- the numbers pair up: four of them make a tidy 2x2 rather than a
           long column that pushes the programme off the screen ---- */
    .pv_stats{
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 18px; padding: 22px 0 0;
    }
    .pv_stat{ padding: 0; }
    .pv_stat_n{ font-size: 27px; }
    .pv_stat_l{ font-size: 14px; padding: 2px 0 0; }

    .pv_section_head{ padding: 34px 0 0; }
    .pv_section_head h2{ font-size: 26px; }
    .pv_spaced{ padding-top: 38px; }

    /* ---- the day reads as a line, not a card ---- */
    .pv_days{ gap: 10px; padding: 18px 0 4px; }
    .pv_day{
        flex-direction: row; align-items: baseline; gap: 10px;
        min-width: 0; padding: 0; border: 0; border-radius: 0;
    }
    .pv_day:hover{ border: 0; }
    .pv_day.is_on{ background: none; border: 0; color: var(--pv-ink); }
    .pv_day_name{ font-size: 16px; }
    .pv_day_count{ font-size: 14px; opacity: 1; color: var(--pv-muted); }

    /* ---- each session gets its type as a coloured spine ---- */
    .pv_row{
        grid-template-columns: minmax(0, 1fr); gap: 6px;
        padding: 16px 0 16px 14px;
        border-bottom: 0; border-left: 3px solid var(--pv-break);
        margin: 0 0 14px;
    }
    .pv_row_opening{ border-left-color: var(--pv-opening); }
    .pv_row_conference{ border-left-color: var(--pv-conference); }
    .pv_row_panel{ border-left-color: var(--pv-panel); }
    .pv_row_roundtable{ border-left-color: var(--pv-roundtable); }
    .pv_row_workshop{ border-left-color: var(--pv-workshop); }
    .pv_row_closing{ border-left-color: var(--pv-closing); }

    /* time, length and type all on one line above the title */
    .pv_time{ display: flex; align-items: baseline; gap: 10px; order: 1; }
    .pv_time_start{ font-size: 16px; }
    .pv_time_len{ padding: 0; }
    .pv_what{ order: 2; display: flex; flex-direction: column; }
    .pv_meta{ order: -1; padding: 0 0 4px; gap: 8px; }
    /* the badge loses its pill on a phone: the spine already says the type */
    .pv_type{
        padding: 0; border-radius: 0; background: none !important;
        font-size: 11px; letter-spacing: 0.08em;
    }
    .pv_type_opening{ color: var(--pv-opening); }
    .pv_type_conference{ color: var(--pv-conference); }
    .pv_type_panel{ color: var(--pv-panel); }
    .pv_type_roundtable{ color: var(--pv-roundtable); }
    .pv_type_workshop{ color: var(--pv-workshop); }
    .pv_type_break{ color: var(--pv-break); }
    .pv_type_closing{ color: var(--pv-closing); }
    button.pv_type{ gap: 6px; }
    .pv_room, .pv_places{ font-size: 13px; }
    .pv_title{ font-size: 18px; }
    .pv_speakers{ gap: 10px; padding: 8px 0 0; }
    .pv_speaker{ font-size: 13px; }
    .pv_speaker img, .pv_speaker_blank{ width: 22px; height: 22px; }
    .pv_divider{ padding: 22px 0 6px; }

    /* ---- venue ---- */
    .pv_foot{ padding: 22px 20px 28px; line-height: 1.8; }

    .pv_venue{ gap: 20px; }
    .pv_map{ min-height: 180px; }

    /* ---- the ticket card is already said by the bar; keep the steps ---- */
    .pv_ticket{ padding: 0; border: 0; background: none; }
    .pv_ticket_label{ padding-top: 6px; }
    .pv_book, .pv_terms{ display: none; }
    .pv_aside{ padding: 8px 0 0; }

    /* ---- the bar ---- */
    .pv_bottom{
        display: flex; align-items: center; justify-content: space-between; gap: 14px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: var(--pv-card); border-top: 1px solid var(--pv-line);
        box-shadow: 0 -4px 18px rgba(0,0,0,0.10);
    }
    .pv_bottom_price{ min-width: 0; }
    .pv_bottom_price strong{ display: block; font-size: 18px; font-weight: 700; line-height: 1.1; }
    .pv_bottom_price span{ display: block; font-size: 12px; color: var(--pv-muted); line-height: 1.25; padding: 2px 0 0; }
    .pv_bottom_cta{
        flex: 0 1 auto; padding: 14px 18px; border-radius: 26px;
        background: var(--primary-color); font-size: 15px; font-weight: 700;
        text-decoration: none; white-space: nowrap;
    }
    /* on a very narrow phone the note can have the line to itself */
    @media(max-width: 360px){
        .pv_bottom_price span{ display: none; }
    }
    .pv .pv_bottom_cta, .dark .pv .pv_bottom_cta{ color: #151515; }
}