/*
 * PhoneStamp sites, default CSS for markup v1: the classic look.
 *
 * The design values are custom properties. The fallbacks below are declared in :where(:root), which has no
 * specificity, so the site's own :root block in the page always wins over them. Every URL is under /static/,
 * so this stylesheet passes the checks for a site's own CSS and can be saved back as one.
 */

@font-face {
  font-family: "Lato";
  src: url("/static/sites/fonts/lato/Lato-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("/static/sites/fonts/lato/Lato-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("/static/sites/fonts/lato/Lato-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display";
  src: url("/static/sites/fonts/playfair-display/PlayfairDisplay.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display";
  src: url("/static/sites/fonts/playfair-display/PlayfairDisplay-Italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

:where(:root) {
  --ps-primary: #1f2937;
  --ps-secondary: #2563eb;
  /* Black or white, whichever reads on the colour; browsers without relative colours inherit the text colour */
  --ps-on-primary: oklch(from var(--ps-primary) clamp(0, (0.65 - l) * 1000, 1) 0 0);
  --ps-on-secondary: oklch(from var(--ps-secondary) clamp(0, (0.65 - l) * 1000, 1) 0 0);
  /* Neutral colours follow the page's color-scheme, which comes from the app's theme */
  --ps-surface: light-dark(#ffffff, #121212);
  --ps-text: light-dark(#6c757d, #adb5bd);
  --ps-heading: light-dark(#212529, #f8f9fa);
  --ps-border: light-dark(rgb(33 37 41 / 0.12), rgb(248 249 250 / 0.15));
  /* Header and footer are dark in both themes */
  --ps-dark: #000000;
  --ps-on-dark: rgb(255 255 255 / 0.75);
  --ps-font-body: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ps-font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  /* The brand colours as text on the page: dark enough on a light page and light enough on a dark one,
     whatever the colour; browsers without relative colours use the colour as it is */
  --ps-link: var(--ps-primary);
  --ps-link: light-dark(oklch(from var(--ps-primary) min(l, 0.5) c h), oklch(from var(--ps-primary) max(l, 0.75) c h));
  --ps-link-hover: var(--ps-secondary);
  --ps-link-hover: light-dark(oklch(from var(--ps-secondary) min(l, 0.5) c h), oklch(from var(--ps-secondary) max(l, 0.75) c h));
  --ps-radius: 0.25rem;
  --ps-gap: 1.5rem;
  --ps-width: 72rem;
}

/* Browsers without light-dark() get the light theme */
@supports not (color: light-dark(#000, #fff)) {
  :where(:root) {
    --ps-surface: #ffffff;
    --ps-text: #6c757d;
    --ps-heading: #212529;
    --ps-border: rgb(33 37 41 / 0.12);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body.ps-body {
  margin: 0;
  background: var(--ps-surface);
  color: var(--ps-text);
  font-family: var(--ps-font-app, var(--ps-font-body));
  font-size: 1rem;
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3 {
  color: var(--ps-heading);
  font-family: var(--ps-font-app-heading, var(--ps-font-app, var(--ps-font-heading)));
  font-weight: 400;
  line-height: 1.3;
}

h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
}

h2 {
  font-size: 1.5rem;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--ps-link);
}

a:hover {
  color: var(--ps-link-hover);
}

.ps-skip-link {
  position: absolute;
  left: -9999px;
}

.ps-skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  padding: 0.5rem 1rem;
  background: var(--ps-surface);
}

/* Header and menu */

.ps-header {
  position: relative;
  z-index: 3;
  background: var(--ps-dark);
  color: #ffffff;
}

/* On the home page the header lies over the hero */
.ps-body--home .ps-header {
  position: absolute;
  inset: 0 0 auto;
  background: transparent;
}

.ps-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ps-gap);
  max-width: var(--ps-width);
  margin: 0 auto;
  padding: 1.25rem 1rem;
}

.ps-header__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: inherit;
  text-decoration: none;
  font-family: var(--ps-font-app-heading, var(--ps-font-app, var(--ps-font-heading)));
  font-size: 1.25rem;
}

.ps-header__brand:hover {
  color: inherit;
}

.ps-header__icon {
  border-radius: var(--ps-radius);
}

.ps-nav__list {
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ps-nav__link {
  color: var(--ps-on-dark);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ps-nav__link:hover,
.ps-nav__link[aria-current="page"] {
  color: #ffffff;
}

.ps-nav__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--ps-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.5em;
}

.ps-nav__mobile {
  display: none;
}

.ps-nav__toggle {
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media (max-width: 40rem) {
  .ps-nav > .ps-nav__list {
    display: none;
  }

  .ps-nav__mobile {
    display: block;
    position: relative;
  }

  .ps-nav__list--mobile {
    position: absolute;
    right: 0;
    z-index: 5;
    flex-direction: column;
    gap: 1rem;
    min-width: 12rem;
    padding: 1.25rem;
    background: var(--ps-dark);
  }
}

/* Language menu, after the main menu */

.ps-nav {
  margin-left: auto;
}

.ps-languages {
  position: relative;
}

.ps-languages__toggle {
  cursor: pointer;
  color: var(--ps-on-dark);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ps-languages__list {
  position: absolute;
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 8rem;
  margin: 0;
  padding: 1rem 1.25rem;
  list-style: none;
  background: var(--ps-dark);
}

.ps-languages__link {
  color: var(--ps-on-dark);
  text-decoration: none;
  font-size: 0.75rem;
}

.ps-languages__link[aria-current="true"],
.ps-languages__link:hover {
  color: #ffffff;
}

/* App banner on phones, linking the app in its store; wide screens do not show it. It is kept at the bottom
   of the screen, since the home page's header lies over the top, and the page leaves room for it */

.ps-app-banner {
  display: none;
}

@media (max-width: 40rem) {
  .ps-app-banner {
    position: fixed;
    inset: auto 0 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: var(--ps-surface);
    color: var(--ps-text);
    border-top: 1px solid var(--ps-border);
  }

  .ps-body:has(> .ps-app-banner) {
    padding-bottom: 4rem;
  }

  .ps-app-banner__icon {
    border-radius: var(--ps-radius);
  }

  .ps-app-banner__name {
    flex: 1;
    font-weight: 700;
  }

  .ps-app-banner__link {
    color: var(--ps-link);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
}

.ps-open-in-app {
  margin-top: 2rem;
}

/* Content */

.ps-main {
  flex: 1;
  width: 100%;
  max-width: var(--ps-width);
  margin: 0 auto;
  padding: 3rem 1rem;
}

.ps-body--home .ps-main {
  max-width: none;
  padding: 0;
}

/* Hero: the background image under a dark overlay, filling the screen */

.ps-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: #000000;
  color: #ffffff;
  text-align: center;
}

/* The image every site had before it chose its own; the site's image covers it */
.ps-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("/static/sites/v1/hero.jpg") center / cover no-repeat;
}

.ps-hero__image {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ps-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(0 0 0 / 0.5);
}

/* Parallax: the image moves at half the scroll speed, only where the browser can tie it to scrolling */
@keyframes ps-parallax {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(50%);
  }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .ps-hero::before,
    .ps-hero__image {
      animation: ps-parallax linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
    }
  }
}

.ps-hero__content {
  position: relative;
  max-width: 48rem;
  padding: 6rem 1rem 4rem;
}

.ps-hero__pretitle {
  margin: 0;
  color: rgb(255 255 255 / 0.75);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ps-hero__title {
  margin: 1rem 0 1.5rem;
  color: #ffffff;
  font-size: clamp(2.75rem, 8vw, 5rem);
  font-weight: 700;
  line-height: 1.2;
}

.ps-hero__subtitle {
  margin: 0;
  color: rgb(255 255 255 / 0.75);
}

.ps-home__blocks {
  max-width: 48rem;
  margin: 0 auto;
  padding: 4rem 1rem;
}

/* Lists */

.ps-list__title {
  margin-top: 0;
}

.ps-list__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--ps-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ps-card {
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
}

.ps-card__link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.ps-card__link:hover {
  color: inherit;
}

.ps-card__link:hover .ps-card__title {
  color: var(--ps-link);
}

.ps-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.ps-card__title,
.ps-card__meta {
  margin: 1rem 1.25rem;
}

.ps-card__title {
  font-size: 1.375rem;
}

.ps-card__meta {
  font-size: 0.875rem;
}

[data-cancelled] .ps-event__start,
.ps-card__status {
  text-decoration: line-through;
}

.ps-card__status {
  text-decoration: none;
  font-weight: 700;
}

/* Detail pages */

.ps-place,
.ps-event,
.ps-route,
.ps-page,
.ps-information {
  display: grid;
  gap: var(--ps-gap);
  max-width: 48rem;
}

.ps-place > *,
.ps-event > *,
.ps-route > *,
.ps-page > *,
.ps-information > * {
  margin: 0;
}

.ps-place__title,
.ps-event__title,
.ps-route__title,
.ps-information__title {
  margin: 0;
}

.ps-event__when,
.ps-event__status,
.ps-route__facts {
  margin: 0.5rem 0 0;
  font-family: var(--ps-font-app-heading, var(--ps-font-app, var(--ps-font-heading)));
}

.ps-event__status {
  font-weight: 700;
}

.ps-gallery {
  display: flex;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  list-style: none;
}

.ps-gallery__item {
  flex: 0 0 min(80%, 24rem);
  scroll-snap-align: start;
}

.ps-gallery__open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.ps-gallery__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ps-radius);
}

.ps-lightbox {
  max-width: 90vw;
  max-height: 90vh;
  padding: 0;
  border: 0;
  background: transparent;
}

.ps-lightbox::backdrop {
  background: rgb(0 0 0 / 0.85);
}

.ps-lightbox__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

.ps-place__details,
.ps-content__details {
  display: grid;
  gap: 0.5rem;
}

/* The app's contents on the information page, each a block of its own like on the app's information screen */

.ps-information__contents {
  display: grid;
  gap: calc(var(--ps-gap) * 2);
}

.ps-content {
  display: grid;
  gap: var(--ps-gap);
}

.ps-content > *,
.ps-content__description > :last-child {
  margin: 0;
}

.ps-links {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ps-address {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.5rem;
  font-style: normal;
}

.ps-address__street::after {
  content: ",";
}

.ps-contact {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ps-contact__item,
.ps-event__place {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ps-icon {
  flex: none;
}

/* Opening hours: the day as a small label, the hours in the heading font */

.ps-hours__title,
.ps-hours__period-title {
  margin: 0 0 1rem;
}

.ps-hours__period-title {
  font-size: 1.125rem;
}

.ps-hours__list {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: baseline;
  gap: 0.25rem 2rem;
  margin: 0;
}

.ps-hours__day {
  grid-column: 1;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ps-hours__time {
  grid-column: 2;
  margin: 0;
  font-family: var(--ps-font-app-heading, var(--ps-font-app, var(--ps-font-heading)));
}

.ps-hours__period + .ps-hours__period {
  margin-top: var(--ps-gap);
}

.ps-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ps-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--ps-primary);
  border-radius: var(--ps-radius);
  background: var(--ps-primary);
  color: var(--ps-on-primary);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ps-button:hover {
  border-color: var(--ps-secondary);
  background: var(--ps-secondary);
  color: var(--ps-on-secondary);
}

.ps-route__map,
.ps-page__cover,
.ps-information__cover,
.ps-block__image {
  display: block;
  width: 100%;
  border-radius: var(--ps-radius);
}

.ps-route__facts {
  display: flex;
  gap: 1rem;
}

.ps-route__places {
  margin: 0;
  padding-left: 1.25rem;
}

.ps-block {
  margin: 0 0 1.5rem;
}

.ps-block--image {
  margin-inline: 0;
}

.ps-out-of-service {
  padding: 4rem 0;
  text-align: center;
}

/* Footer */

.ps-footer {
  background: var(--ps-dark);
  color: var(--ps-on-dark);
}

.ps-footer a {
  color: inherit;
}

.ps-footer a:hover {
  color: #ffffff;
}

.ps-footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 2rem var(--ps-gap);
  max-width: var(--ps-width);
  margin: 0 auto;
  padding: 4rem 1rem 3rem;
}

/* The social links as icons only; their names are in the links' labels */
.ps-social {
  grid-column: 1 / -1;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ps-social__link {
  display: inline-flex;
}

.ps-social__link .ps-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.ps-footer__legal {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.ps-footer__copyright {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
}

.ps-footer__copyright::before {
  content: "";
  width: 2rem;
  border-top: 2px solid #ffffff;
}

/* Cookie banner: the dialog at the bottom of the screen, and the button that opens it again */

.ps-cookie {
  position: fixed;
  inset: auto 1rem 1rem;
  z-index: 20;
  display: flex;
  justify-content: center;
}

.ps-cookie[hidden] {
  display: none;
}

.ps-cookie__dialog {
  position: static;
  width: 100%;
  max-width: 40rem;
  margin: 0;
  padding: 1.5rem;
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  background: var(--ps-surface);
  color: var(--ps-text);
  box-shadow: 0 0.5rem 2rem rgb(0 0 0 / 0.25);
}

.ps-cookie__accept,
.ps-cookie__reject,
.ps-cookie__settings,
.ps-cookie__open {
  display: inline-block;
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--ps-primary);
  border-radius: var(--ps-radius);
  background: transparent;
  color: var(--ps-heading);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}

.ps-cookie__accept {
  background: var(--ps-primary);
  color: var(--ps-on-primary);
}

.ps-cookie__settings {
  border-color: transparent;
  text-decoration: underline;
}

.ps-cookie__open {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 19;
  border-color: var(--ps-border);
  background: var(--ps-surface);
}