/* Mobile-only refinement layer. The parent site is intentionally untouched. */
:root {
  --paper: #f6f0e6;
  --cream: #ede4d3;
  --card: #fbf7ee;
  --ink: #141414;
  --gold: #e8a33d;
  --coral: #e23d6b;
  --pink: #e23d6b;
  --sea: #1b77b5;
  --forest: #0a2a43;
  --forest2: #1b77b5;
  --deep: #0a2a43;
  --muted: #706d66;
  --line: #d8cfc1;
  --serif: "DM Serif Display", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --script: "Mrs Saint Delafield", cursive;
}
body { background: var(--paper); color: var(--ink); font-family: var(--sans); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
.site-header { background: rgba(246,240,230,.97); }
.market-tools { background: var(--cream); }
.quick-nav, .mobile-dock { background: var(--card); }
.button-dark, .header-cta { background: var(--deep); }
.button-light { background: var(--card); color: var(--deep); }
.eyebrow { color: #ef6258; }
.site-footer { background: var(--deep); }
.footer-tagline { font-family: var(--script); font-size: 24px; letter-spacing: 0; }
.mobile-search-button, .mobile-site-search, .mobile-sea-finale, .home-melan-play, .home-melan-gamebar { display: none; }

@media (max-width: 760px) {
  :root { --mobile-gutter: 20px; --mobile-header: 68px; --mobile-dock: 64px; }
  html { scroll-padding-top: calc(var(--mobile-header) + 12px); }
  body { min-width: 320px; padding-bottom: calc(var(--mobile-dock) + env(safe-area-inset-bottom)); overflow-x: clip; }

  /* One compact header plus the bottom dock is enough on a phone. */
  .site-header { height: var(--mobile-header); }
  .head-inner { position: relative; justify-content: center; padding-inline: 14px; }
  .market-tools, .quick-nav { display: none !important; }
  .head-inner > .brand-pack { position: absolute; left: 50%; transform: translateX(-50%); }
  body[data-page="home"] .head-inner > .brand-pack { min-width: 0; gap: 7px; }
  body[data-page="home"] .brand-divider { display: block; height: 28px; }
  body[data-page="home"] .brand-partner { display: block; }
  .menu-toggle { display: none !important; }
  .mobile-search-button {
    position: absolute;
    right: 14px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid #bdb6aa;
    border-radius: 50%;
    background: var(--card);
    color: var(--deep);
    padding: 0;
  }
  .mobile-search-button svg { width: 19px; height: 19px; stroke: currentColor; }
  .brand-main img { width: 94px; max-height: 42px; }
  .brand-partner img { width: 40px; height: 31px; }
  .brand-partner.gov img { width: 29px; }
  body[data-page="home"] .brand-main img { width: 78px; }
  body[data-page="home"] .brand-partner img { width: 36px; height: 29px; }
  body[data-page="home"] .brand-partner.gov img { width: 27px; }

  /* Clear, consistent mobile type hierarchy. */
  .eyebrow, .section-label, .section-label b, .section-label > span { font-size: 11px !important; line-height: 1.35; }
  .page-hero h1 { font-size: clamp(40px, 12vw, 52px); line-height: .98; }
  .page-hero > p, .home-events-intro, .home-theme-intro, .inauguration-copy > p,
  .home-about-copy > p, .home-good p, .home-melan p, .home-visit p, .events-lead p,
  .experience-copy p, .melan-hero-copy > p, .melan-about p, .contact-hero-copy > p,
  .partner-section > div > p, .route-copy > p { font-size: 15px !important; line-height: 1.65 !important; }
  .home-section-head h2, .inauguration-copy h2, .home-good h2, .home-about h2,
  .home-themes h2, .home-melan h2, .home-visit h2, .vision-grid h2,
  .about-explainer h2, .about-global h2, .programme-day-head h2,
  .venue-details > .section-head-row h2, .route-copy h2, .melan-about h2,
  .partner-section h2, .contact-map h2 { font-size: 32px !important; line-height: 1.08 !important; }

  /* Mobile controls must feel tappable, not like scaled-down desktop UI. */
  .button-dark, .button-light, .hero-register, .line-link,
  .home-all-events, .experience-copy > a { min-height: 44px; }
  .menu-toggle, .close-menu, .hero-arrow, .venue-arrows button, .reel-controls button,
  .save-event, .agenda-stepper button, .programme-dialog-head > button { min-width: 44px; min-height: 44px; }
  .menu-toggle { width: 44px; height: 44px; }
  .hero-arrow, .venue-arrows button, .reel-controls button { width: 44px !important; height: 44px !important; }

  /* Keep the phone carousel calm: swipe or tap a compact, accessible dot. */
  body[data-page="home"] .hero-controls { right: 12px; bottom: 14px; gap: 2px; }
  body[data-page="home"] .hero-arrow { display: none !important; }
  body[data-page="home"] .hero-dots { gap: 0; }
  body[data-page="home"] .hero-dot {
    position: relative;
    width: 28px !important;
    height: 36px !important;
    min-width: 28px !important;
    min-height: 36px !important;
    padding: 0;
    border: 0;
    background: transparent !important;
  }
  body[data-page="home"] .hero-dot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.62);
    transform: translate(-50%,-50%);
    transition: width .2s ease, background-color .2s ease;
  }
  body[data-page="home"] .hero-dot.is-active::after { width: 22px; background: #f5d8bd; }
  body[data-page="home"] .hero-count { margin-inline: 4px 0; white-space: nowrap; }

  /* Search opens in place instead of sending visitors straight to Events. */
  .mobile-site-search {
    position: fixed;
    z-index: 38;
    top: var(--mobile-header);
    left: 0;
    right: 0;
    display: block;
    padding: 16px 18px 18px;
    border-top: 1px solid rgba(21,55,48,.08);
    border-bottom: 1px solid rgba(21,55,48,.18);
    background: var(--card);
    box-shadow: 0 16px 30px rgba(32,28,22,.14);
  }
  .mobile-site-search[hidden] { display: none; }
  .mobile-site-search-form label { display: block; margin-bottom: 9px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  .mobile-site-search-row { display: grid; grid-template-columns: minmax(0,1fr) 46px; border: 1px solid #aaa397; border-radius: 8px; overflow: hidden; background: #fff; }
  .mobile-site-search input { width: 100%; min-height: 46px; padding: 0 14px; border: 0; background: transparent; font: 15px/1.2 "DM Sans",sans-serif; }
  .mobile-site-search-submit { display: grid; place-items: center; min-height: 46px; padding: 0; border: 0; border-left: 1px solid #d8d1c6; background: var(--forest); color: #fff; font-size: 19px; }
  .mobile-search-quick { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
  .mobile-search-quick::-webkit-scrollbar { display: none; }
  .mobile-search-quick a { flex: 0 0 auto; padding: 8px 11px; border: 1px solid #d6cfc4; border-radius: 999px; color: inherit; font-size: 12px; text-decoration: none; }
  .day-pill, .event-cat, .home-event-filter { min-height: 40px; padding-inline: 14px !important; }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
  textarea:focus-visible, summary:focus-visible { outline: 3px solid #e23d6b; outline-offset: 3px; }

  /* Full-width app menu with safe spacing and readable links. */
  .mobile-menu { width: 100%; padding: max(24px, env(safe-area-inset-top)) 22px calc(88px + env(safe-area-inset-bottom)); }
  .mobile-menu > a { min-height: 49px; align-items: center; font-size: 20px !important; }
  .close-menu { display: grid; place-items: center; padding: 0; }

  body[data-page="home"] .mobile-dock, .mobile-dock {
    display: flex !important;
    height: calc(var(--mobile-dock) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-dock a, .mobile-dock button { min-width: 60px; min-height: 52px; gap: 4px; }
  .mobile-dock span { font-size: 19px; }
  .mobile-dock small { font-size: 10px; }
  .listing-toolbar, .programme-date-nav { top: var(--mobile-header) !important; }
  .programme-day { scroll-margin-top: calc(var(--mobile-header) + 74px); }
  body[data-page="home"] .closing-band { display: none !important; }

  /* Homepage Melan game: transparent character cutout and desktop-style Joy score. */
  body[data-page="home"] .home-melan { position: relative; overflow: hidden; background:#fff!important; }
  body[data-page="home"] .home-melan > img {
    position:relative;
    z-index:2;
    width:min(58%,190px)!important;
    height:175px!important;
    margin:8px auto 0;
    object-fit:contain!important;
    background:transparent!important;
    mix-blend-mode:normal!important;
    filter:drop-shadow(0 12px 16px rgba(51,39,23,.13));
    transform-origin:50% 55%;
    will-change:transform
  }
  body[data-page="home"] .home-melan-play {
    position: absolute;
    z-index: 4;
    top: 8px;
    left: 50%;
    right: auto;
    display: block;
    width:min(58%,190px);
    height:175px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius:48% 48% 35% 35%;
    background: transparent;
    transform:translateX(-50%);
    touch-action: manipulation;
  }
  body[data-page="home"] .home-melan-play > span {
    position: absolute;
    right: -18px;
    bottom: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(8,58,52,.9);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    box-shadow: 0 5px 15px rgba(7,45,40,.2);
  }
  body[data-page="home"] .home-melan-play.is-complete > span { background: #e79829; }
  body[data-page="home"] .home-melan-gamebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -2px 0 14px; padding: 10px 0; border-block: 1px solid #d8cec0; }
  .home-melan-gamebar > div:first-child { display: flex; flex-direction: column; gap: 2px; }
  .home-melan-gamebar b { color: var(--forest); font-size: 8px; letter-spacing: .14em; }
  .home-melan-gamebar span { color: #716f67; font-size: 10px; }
  .home-melan-gamebar strong { color:#e14972;font:500 28px/1 var(--serif);letter-spacing:-.04em; }
  body[data-page="home"] .home-melan-hop { animation:home-melan-hop .68s cubic-bezier(.22,.8,.3,1); }
  body[data-page="home"] .home-melan-wiggle { animation:home-melan-wiggle .68s cubic-bezier(.22,.8,.3,1); }
  body[data-page="home"] .home-melan-spin { animation:home-melan-spin .68s cubic-bezier(.22,.8,.3,1); }
  .home-melan-confetti { position: absolute; z-index: 5; left: 50%; top: 145px; width: 7px; height: 10px; border-radius: 2px; pointer-events: none; background: var(--c); animation: home-melan-confetti .7s ease-out forwards; }
  /* Keep Melan centred in the reserved frame: big -> small -> big -> normal. */
  @keyframes home-melan-hop {
    0%,100% { transform:scale(1); }
    28% { transform:scale(1.14); }
    52% { transform:scale(.9); }
    76% { transform:scale(1.08); }
  }
  @keyframes home-melan-wiggle {
    0%,100% { transform:scale(1) rotate(0); }
    28% { transform:scale(1.14) rotate(-3deg); }
    52% { transform:scale(.9) rotate(2deg); }
    76% { transform:scale(1.08) rotate(-1deg); }
  }
  @keyframes home-melan-spin {
    0%,100% { transform:scale(1) rotate(0); }
    28% { transform:scale(1.14) rotate(4deg); }
    52% { transform:scale(.9) rotate(-3deg); }
    76% { transform:scale(1.08) rotate(1deg); }
  }
  @keyframes home-melan-confetti { to { transform: translate(var(--x),var(--y)) rotate(300deg); opacity: 0; } }

  /* Ocean finale shared by every mobile page, echoing the main site's sea footer. */
  .mobile-sea-finale {
    display: block;
    position: relative;
    min-height: 430px;
    margin-top: -1px;
    padding: 120px 24px 72px;
    overflow: hidden;
    color: #fff;
    text-align: center;
    background:
      radial-gradient(circle at 18% 8%, rgba(27,119,181,.56), transparent 34%),
      linear-gradient(180deg,var(--sea) 0%,#0e5f91 52%,var(--deep) 100%);
  }
  .sea-wave { position: absolute; left: 0; top: -1px; width: 200%; height: 82px; }
  .sea-wave path { fill: var(--paper); }
  .sea-wave-back { top: 17px; opacity: .5; transform: translateX(-18%); }
  .sea-wave-back path { fill: #bddae2; }
  .sea-wave-front { animation: mobile-wave-drift 18s linear infinite; }
  .mobile-sea-copy { position: relative; z-index: 2; max-width: 390px; margin-inline: auto; }
  .mobile-sea-copy > span { display: block; color: #d8ebef; font-size: 10px; font-weight: 700; letter-spacing: .2em; }
  .mobile-sea-copy h2 { margin: 18px 0 15px; color: #fff; font: 600 42px/.98 var(--serif); letter-spacing: -.04em; }
  .mobile-sea-copy h2 i { color: #eda236; font-style: normal; }
  .mobile-sea-copy p { max-width: 310px; margin: 0 auto 26px; color: #dce9ed; font-size: 14px; line-height: 1.55; }
  .mobile-sea-copy a { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 20px; padding: 0 19px; border: 1px solid rgba(255,255,255,.78); border-radius: 999px; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-decoration: none; text-transform: uppercase; }
  .mobile-sea-copy a b { font-size: 18px; transition: transform .2s ease; }
  .mobile-sea-copy a:active b { transform: translateX(4px); }
  .mobile-sea-boat { position: absolute; z-index: 1; width: 62px; filter: drop-shadow(0 8px 8px rgba(0,20,34,.28)); animation: mobile-boat-bob 3s ease-in-out infinite; }
  .mobile-sea-boat > path:first-child { stroke: #fff; stroke-width: 2; }
  .mobile-sea-boat .sail-light { fill: #fff7e9; }
  .mobile-sea-boat .sail-blue { fill: #cfe6ec; }
  .mobile-sea-boat .boat-hull { fill: #ef9b31; }
  .mobile-sea-boat-one { left: 7%; bottom: 36px; }
  .mobile-sea-boat-two { right: 5%; top: 100px; width: 46px; opacity: .72; transform: scaleX(-1); animation-delay: -1.2s; }
  .site-footer { position: relative; margin-top: -1px; border-top-color: rgba(255,255,255,.16); background: var(--deep); padding-bottom: calc(32px + var(--mobile-dock) + env(safe-area-inset-bottom)); }

  @keyframes mobile-wave-drift { to { transform: translateX(-50%); } }
  @keyframes mobile-boat-bob { 50% { translate: 0 -7px; rotate: 2deg; } }
}

@media (prefers-reduced-motion: reduce) {
  .sea-wave-front, .mobile-sea-boat, .home-melan-hop, .home-melan-wiggle, .home-melan-spin, .home-melan-confetti { animation: none !important; }
}

/* Home inauguration portrait: mirror the desktop sun-and-frame composition. */
body[data-page="home"] .inauguration-art {
  display: grid;
  place-items: center;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 36%,rgba(255,239,205,.35),transparent 48%),
    linear-gradient(145deg,#dfbd86 0%,#cfa66b 100%);
}
body[data-page="home"] .inauguration-art::after { display: none; }
body[data-page="home"] .inauguration-portrait {
  position: relative;
  width: min(76%,330px);
  height: calc(100% - 22px);
  margin: 11px auto 0;
  overflow: hidden;
  isolation: isolate;
  border: 1.5px solid rgba(255,255,255,.9);
  border-radius: 190px 190px 18px 18px;
  background: #f7efe2;
  box-shadow: 0 16px 30px rgba(70,46,15,.18);
}
body[data-page="home"] .inauguration-art .inauguration-sun {
  position: absolute;
  z-index: 0;
  inset: 50% auto auto 50%;
  width: 128%;
  height: auto;
  max-width: none;
  object-fit: contain;
  transform: translate(-50%,-50%);
  filter: drop-shadow(0 14px 25px rgba(199,126,20,.2));
}
body[data-page="home"] .inauguration-art .inauguration-person {
  position: absolute;
  z-index: 1;
  inset: auto auto -2px 50%;
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(-50%);
  filter: saturate(.9) contrast(1.04) drop-shadow(0 15px 18px rgba(70,46,15,.16));
}
body[data-page="home"] .inauguration-art > span { z-index: 3; }

body[data-page="home"] .inauguration-countdown{
 margin:14px 0 12px;
 padding:12px 0;
 border-top:1px solid #d5cdbf;
 border-bottom:1px solid #d5cdbf
}
body[data-page="home"] .inauguration-countdown>span{
 display:block;
 margin-bottom:8px;
 color:#98724b;
 font-size:9px;
 font-weight:700;
 letter-spacing:.12em;
 text-transform:uppercase
}
body[data-page="home"] .inauguration-countdown>div{
 display:grid;
 grid-template-columns:repeat(4,auto 1fr);
 align-items:baseline;
 gap:4px 7px
}
body[data-page="home"] .inauguration-countdown b{font:500 21px/1 var(--serif);color:var(--forest)}
body[data-page="home"] .inauguration-countdown small{font-size:7px;color:#77766e;text-transform:uppercase}
body[data-page="home"] .inauguration-countdown[hidden]{display:none}

@media (max-width: 760px) {
  body[data-page="home"] .inauguration-art { height: 330px !important; }
  body[data-page="home"] .inauguration-portrait { width:62%;max-width:260px;height:calc(100% - 24px);margin-top:12px;border-radius:150px 150px 14px 14px; }
  body[data-page="home"] .inauguration-art .inauguration-sun { width:148%;top:45%; }
  body[data-page="home"] .inauguration-art .inauguration-person { height:100%; }
}

@media (max-width: 360px) {
  .brand-pack { gap: 5px; }
  .brand-main img { width: 82px; }
  .brand-partner img { width: 34px; }
  .brand-partner.gov img { width: 25px; }
}

/* Programme discovery: compact poster marketplace on phones. */
.programme-mobile-discovery { display: none; }
@media (max-width: 760px) {
  body[data-page="programme"] .page-hero { display: none; }
  body[data-page="programme"] .programme-mobile-discovery {
    display: block;
    padding: 14px 14px 8px;
    background: var(--card);
  }
  .programme-mobile-search {
    position: relative;
    display: flex;
    align-items: center;
  }
  .programme-mobile-search svg {
    position: absolute;
    left: 14px;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--sea);
    stroke-width: 1.8;
    pointer-events: none;
  }
  .programme-mobile-search input {
    width: 100%;
    min-height: 48px;
    padding: 0 15px 0 43px;
    border: 1px solid #d5cec2;
    border-radius: 12px;
    outline: 0;
    background: #fff;
    color: var(--ink);
    font: 15px var(--sans);
  }
  .programme-mobile-search input:focus { border-color: var(--sea); box-shadow: 0 0 0 3px rgba(27,119,181,.12); }
  body[data-page="programme"] .programme-date-nav {
    position: sticky;
    top: var(--mobile-header) !important;
    z-index: 18;
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 4px;
    padding: 8px 12px 10px;
    overflow: visible;
    background: var(--card);
    border-bottom: 1px solid var(--line);
  }
  body[data-page="programme"] .programme-date-nav a {
    min-width: 0;
    min-height: 48px;
    padding: 7px 3px;
    justify-content: center;
    border: 0;
    border-radius: 9px;
    text-align: center;
    background: transparent;
  }
  body[data-page="programme"] .programme-date-nav a:first-child { background: #ece5ff; color: #30205f; }
  body[data-page="programme"] .programme-date-nav b { font-size: 17px; }
  body[data-page="programme"] .programme-date-nav span { font-size: 5px; letter-spacing: .04em; }
  body[data-page="programme"] .programme-day {
    padding: 34px 14px 32px;
    scroll-margin-top: calc(var(--mobile-header) + 68px);
    background: #fff;
  }
  body[data-page="programme"] .programme-day:nth-of-type(even) { background: #f8f5ef; }
  body[data-page="programme"] .programme-day-head { margin-bottom: 15px; }
  body[data-page="programme"] .programme-day-head > span { font-size: 8px; }
  body[data-page="programme"] .programme-day-head h2 { margin: 6px 0 4px; font-size: 24px; line-height: 1.05; }
  body[data-page="programme"] .programme-day-head > p { margin: 0; font-size: 11px; line-height: 1.45; }
  body[data-page="programme"] .agenda-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 18px; }
  body[data-page="programme"] .agenda-card {
    display: block;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #ddd7cd;
    border-radius: 15px;
    background: #fff;
    box-shadow: none;
  }
  body[data-page="programme"] .agenda-card > img,
  body[data-page="programme"] .agenda-card > img.agenda-thumb-poster {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 3/4;
    object-fit: cover;
  }
  body[data-page="programme"] .agenda-card > div { padding: 10px 10px 9px; }
  body[data-page="programme"] .agenda-card small { font-size: 7px; letter-spacing: .08em; }
  body[data-page="programme"] .agenda-card h3 { margin: 5px 0 0; font-size: 16px; line-height: 1.08; }
  body[data-page="programme"] .agenda-card > div > p { display: none; }
  body[data-page="programme"] .agenda-book-now {
    display: flex;
    min-height: 44px;
    margin: 0 10px 10px;
    padding: 0 13px;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px;
    background: var(--deep);
    color: #fff;
    font: 700 10px var(--sans);
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  body[data-page="programme"] .agenda-book-now::after { content: '→'; font-size: 16px; font-weight: 400; }
  body[data-page="programme"] .agenda-book-now:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
  body[data-page="programme"] .agenda-booking { border-top: 1px solid #e5dfd5; }
  body[data-page="programme"] .agenda-booking summary { min-height: 42px; padding: 0 10px; font-size: 10px; }
  body[data-page="programme"] .agenda-booking-panel { padding: 10px; }
  body[data-page="programme"] .agenda-ticket-type,
  body[data-page="programme"] .agenda-headcount label { font-size: 8px; }
  body[data-page="programme"] .agenda-ticket-type select,
  body[data-page="programme"] .agenda-headcount input { font-size: 11px; }
  body[data-page="programme"] .agenda-add-button { min-height: 42px; font-size: 9px; }
  body[data-page="programme"] .agenda-card.is-search-hidden,
  body[data-page="programme"] .programme-day.is-search-hidden { display: none; }
  body[data-page="programme"] .source-note { padding-inline: 14px; }
}