/* ==========================================================================
   aquarius.css — shared by the Yoga, Astrology, Gifts, Weddings and 404 pages.
   Class names follow BEM: .block, .block__element, .block--modifier.
   ========================================================================== */

/* Base
   ========================================================================== */
:root {
  --content: #333;
  --blue: #e9f0f5;
  --pink: #a8175f;
  --background-alt: #fff;
  --column: 36rem; /* width of the text column: paragraphs, headings, lists, footer */
  --gutter: 1.5rem; /* minimum space either side of the content */
  --line-height: 1.5; /* body text: paragraphs, lists, gift descriptions, footer (headings, nav and buttons set their own) */
  --font-body: "Jost", "Josefin Sans", sans-serif; /* regular text: paragraphs, list items, small text (headings, nav and buttons stay Josefin Sans) */
  --bold-body: "wght" 450; /* bold within regular text (Jost's weights run 100-900) */
  --pink-bright: #dc3f86; /* pink on dark backgrounds (the phone nav and menu), where --pink is too dim */
  --violet: #1c1823; /* a dark violet-grey: behind popups, and the title area on phones */
  --small: 0.8rem; /* small text: notes, footers, the cookie banner */
  --small-line: 1.4; /* its line height: a little tighter than normal text */
}
@media (min-width: 600px) {
  :root {
    --gutter: 3rem;
  }
}
/* two-column layout (960px+, the photo panel on the left): the content column needs no side gutters of its
   own (single-column pages, like the account page, keep theirs) */
@media (min-width: 960px) {
  .wrapper:not(.wrapper--single) {
    --gutter: 0;
  }
}
/* very wide screens: a slightly wider text column (paragraphs, lists, boxes, the title area and footer all
   follow it) */
@media (min-width: 1600px) {
  .wrapper:not(.wrapper--single) {
    --column: 40rem;
  }
}

@font-face {
  font-family: "Josefin Sans";
  src: url("/fonts/JosefinSans-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 700;
  font-style: normal;
}
@font-face {
  font-family: "Jost";
  src: url("/fonts/Jost-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  size-adjust: 94%; /* Jost a little smaller than the size set, so all regular text shrinks evenly (headings untouched) */
}
@font-face {
  font-family: "Jost";
  src: url("/fonts/Jost-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  size-adjust: 94%; /* Jost a little smaller than the size set, so all regular text shrinks evenly (headings untouched) */
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("/fonts/BodoniModa-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 400 900;
  font-style: normal;
}

html {
  background: var(--background-alt);
}
/* phones: everything a little bigger (all sizes are in rem, so this scales the whole site) */
@media (max-width: 599px) {
  html {
    font-size: 106.25%; /* 17px rather than 16px */
  }
}
/* very wide screens (1600px+): everything a little bigger too */
@media (min-width: 1600px) {
  html {
    font-size: 106.25%;
  }
}
body {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  font-size: 100%;
  font-family: "Josefin Sans";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  font-variation-settings: "wght" 400;
  background: var(--background-alt);
}
body * {
  margin: 0;
  padding: 0;
  text-indent: 0;
  border: none;
  background: none;
  outline: none;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
}
/* lists have no bullets unless they ask for them (e.g. .list__item); only lists, so other elements
   keep their own markers, like the <details> triangle */
ul,
ol,
li {
  list-style-type: none;
}
/* regular text in the body font; anything inside it that's part of the design (buttons, the "~" titles…) keeps
   Josefin Sans */
p,
li,
small,
blockquote,
.timetable__description,
.gifts__description {
  font-family: var(--font-body);
}
/* all headings, titles, names and labels stay Josefin Sans, wherever they are */
h1, h2, h3, h4, h5, h6,
.btn,
.nav,
.title,
.heading,
.subheading,
.box__title,
.box__subtitle,
.modal__header,
.modal__title,
.modal__principle,
.wrapper__header,
.gifts__name,
.gifts__title,
.gifts__label,
.timetable__name,
.registrations__name,
.registrations__all-title,
.certifications__name,
.rising__label {
  font-family: "Josefin Sans";
}
/* bold within regular text (only there: titles and buttons keep their own weights) */
:is(p, li, small, .timetable__description, .gifts__description) :is(strong, b):not([class]) {
  font-variation-settings: var(--bold-body);
}

/* links: thin pink line under the text, which drops and turns the text pink on hover.
   The line is a real underline measured from the text (em), so it sits the same distance under the
   letters whatever the font size or line height (small notes, nav, buttons…). Anything that shouldn't
   have it sets text-decoration: none (e.g. .btn, .modal__close). */
a {
  position: relative;
  z-index: 0;
  display: inline-block;
  margin: auto;
  text-decoration: underline 1px var(--pink);
  text-decoration-skip-ink: none; /* one continuous line, not broken by g, y, p… */
  text-underline-offset: 0.28em;
  transition: text-underline-offset 0.15s;
}
a:link, a:visited, a:hover, a:active {
  color: var(--content);
}
a span {
  position: relative;
  z-index: 1;
}
a:hover {
  text-underline-offset: 0.45em;
}
a:hover,
a:hover span {
  color: var(--pink);
}

/* Wrapper: page layout, hero image and page modifiers
   ========================================================================== */
.wrapper {
  /* the hero photo and its framing on phones (pages change these with a modifier, below); used by the
     photo and, on phones, behind the title */
  --hero-image: url("/images/marianne-yoga-astrology.jpg");
  --hero-position: center 33%;
  position: relative; /* so the nav scrolls away with the page */
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1;
  justify-content: center;
  display: grid;
  grid-template-columns: 1fr;
}
/* hero image */
.wrapper:before {
  grid-row-start: 1;
  grid-column-start: 1;
  content: "";
  background-repeat: no-repeat;
  background-size: cover;
  background-image: var(--hero-image);
  background-position: var(--hero-position);
  border-bottom: 10px solid var(--blue);
  box-shadow: inset 0 -1px 0 var(--pink);
  height: 62vw;
}
/* white fade over the top of the hero image */
.wrapper:after {
  grid-row-start: 1;
  grid-column-start: 1;
  content: "";
  background-image: linear-gradient(var(--background-alt) 0, transparent 30%);
  pointer-events: none;
}
.wrapper__header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 3rem auto 0;
  position: relative;
  font-variation-settings: "wght" 350;
  width: 100%;
  text-align: center;
  transform: scale(0.9);
}
.wrapper__main {
  grid-column-start: 1;
}
.wrapper__footer {
  grid-column-start: 1;
}
/* notice between the header and the main content (gift card box on the gifts page);
   on large screens it floats on top of the hero image instead */
.wrapper__notice {
  grid-column-start: 1;
}
@media (min-width: 420px) {
  .wrapper__header {
    margin-top: 4rem;
  }
}
/* the title area is shrunk to 90% until it moves into the two-column layout (960px) */
@media (min-width: 960px) {
  .wrapper__header {
    transform: none;
  }
}
@media (min-width: 960px) {
  .wrapper {
    grid-template-columns: 1fr 53vw;
  }
  .wrapper:before {
    grid-column-start: 1;
    grid-row-start: 1;
    height: 50vw;
    background-position: center;
    box-shadow: inset -1px 0 0 var(--pink), inset 0 -1px 0 var(--pink);
  }
  .wrapper__header {
    grid-column-start: 2;
    grid-row-start: 1;
    padding-bottom: 4rem;
    align-self: stretch;
    justify-content: center;
    border-bottom: 10px solid var(--blue);
    box-shadow: inset 0 -1px 0 var(--pink);
  }
  .wrapper__main {
    grid-column-start: 1;
    grid-column-end: span 2;
    grid-row-start: 2;
  }
  .wrapper__footer {
    grid-column-start: 1;
    grid-column-end: span 2;
    grid-row-start: 3;
  }
  .wrapper__notice {
    grid-column-start: 1;
    grid-column-end: span 2;
    grid-row-start: 2;
  }
  .wrapper__notice ~ .wrapper__main {
    grid-row-start: 3;
  }
  .wrapper__notice ~ .wrapper__footer {
    grid-row-start: 4;
  }
}
@media (min-width: 960px) {
  .wrapper {
    grid-template-columns: 1fr 44vw 5vw; /* the content column: 6vw clear of the 45vw photo panel */
  }
  .wrapper:before,
  .wrapper:after {
    border-bottom: none;
    position: fixed;
    top: 0;
    height: 100%;
    width: 45vw;
    left: 0;
  }
  .wrapper:before {
    box-shadow: inset -1px 0 0 var(--pink);
  }
  .wrapper__header {
    margin-top: 10vh;
    padding-bottom: 0;
    border-bottom: none;
    box-shadow: none;
  }
  .wrapper__main,
  .wrapper__footer {
    grid-column-start: 2;
    grid-column-end: span 1;
  }
  /* the main content: no wider than the text column, so
     everything in it (lists, boxes…) lines up with the footer however wide the screen (not the account
     page, which is a single column with its own wider layout) */
  .wrapper:not(.wrapper--single) > .wrapper__main,
  .wrapper:not(.wrapper--single) > .wrapper__header {
    width: 100%;
    max-width: var(--column);
  }
  /* the title area too: at the left of its column, so the title is centred over the content below */
  .wrapper:not(.wrapper--single) > .wrapper__header {
    margin-left: 0;
    margin-right: 0;
  }
  /* and the footer: the text column's width, at the left of its column like the content above it */
  .wrapper:not(.wrapper--single) > .wrapper__footer {
    max-width: var(--column);
    margin-left: 0;
    margin-right: 0;
  }
  /* notice: floats on top of the hero image panel, bottom left (the page has no hero logo) */
  .wrapper__notice {
    position: fixed;
    z-index: 10; /* above the image and its fade */
    bottom: 1.5rem;
    left: 0;
    width: 45vw;
    box-sizing: border-box;
    padding: 0 1.5rem;
  }
  .wrapper__notice > .section {
    margin: 0;
  }
  /* the login banner also sits bottom left: while it shows, the notice moves up above it */
  body:has(.banner--cookies:not([hidden])) .wrapper__notice,
  body:has(.banner:not(.banner--cookies) .banner__toggle:not(:checked)) .wrapper__notice {
    bottom: 10rem;
  }
  .wrapper__notice .box {
    margin: 0;
  }
}
@media (min-width: 1200px) {
  .wrapper {
    grid-template-columns: 1fr 44vw 10vw; /* 6vw clear of the 40vw photo panel */
  }
  .wrapper:before,
  .wrapper:after,
  .wrapper__notice {
    width: 40vw;
  }
}
@media (min-width: 1600px) {
  .wrapper:before,
  .wrapper:after,
  .wrapper__notice {
    width: 40rem;
  }
}

/* under 960px (single column): the hero image (with its fade and small logo) at the bottom of the page, just
   above the footer, rather than at the top */
@media (max-width: 959px) {
  .wrapper {
    grid-template-areas: "header" "notice" "main" "hero" "footer";
  }
  .wrapper__header {
    grid-area: header;
    margin-top: 6rem; /* more room under the nav, now the photo isn't above it */
  }
  /* the title area dark violet over the page's photo, the full width of the screen, with 2rem below it; its contents shrunk to 90%
     rather than the whole area */
  .wrapper:not(.wrapper--single) > .wrapper__header,
  .wrapper.wrapper--single > .wrapper__header {
    margin: 0 0 2rem;
    padding: 6rem var(--gutter) 3rem;
    box-sizing: border-box;
    transform: none;
    /* the page's photo, under a translucent layer of the dark violet */
    background: linear-gradient(rgba(28, 24, 35, 0.8), rgba(28, 24, 35, 0.8)), var(--hero-image) var(--hero-position) / cover no-repeat;
  }
  .wrapper > .wrapper__header > * {
    transform: scale(0.9);
  }
  /* on it: the title's words (pink ones too) and the O's dot pale blue; its ~, heart and moon pink and
     softened; the tagline, nav links and buttons white */
  .wrapper > .wrapper__header .title__word,
  .wrapper > .wrapper__header .title__highlight,
  .wrapper > .wrapper__header .title__sub {
    color: var(--blue);
  }
  .wrapper > .wrapper__header .title__dot:after {
    background: var(--blue);
  }
  .wrapper > .wrapper__header .title__tilde {
    color: var(--pink);
    opacity: 0.45;
  }
  .wrapper > .wrapper__header .title__heart {
    opacity: 0.6; /* (on the whole heart, so its two overlapping halves fade evenly) */
  }
  .wrapper > .wrapper__header .title__heart:before,
  .wrapper > .wrapper__header .title__heart:after {
    background: var(--pink);
  }
  .wrapper > .wrapper__header .title__moon {
    box-shadow: -3rem 0.75rem 0 0 var(--pink), 3rem -0.75rem 0 0 var(--pink);
    opacity: 0.6;
  }
  .wrapper > .wrapper__header .tagline {
    color: white;
  }
  .wrapper > .wrapper__header .btn:not(:hover) {
    background: white;
    color: black;
  }
  .wrapper > .nav a:link,
  .wrapper > .nav a:visited {
    color: white;
  }
  /* pink on the dark: a brighter pink (the current page, and links on hover) */
  .wrapper > .nav .nav__item--current,
  .wrapper > .nav a:hover,
  .wrapper > .nav a:hover span {
    color: var(--pink-bright);
  }
  /* and less space between the title and the first section */
  .wrapper__main > .section:first-child {
    margin-top: 0;
    padding-top: 1rem; /* (sections usually have 2rem) */
  }
  .wrapper__notice {
    grid-area: notice;
  }
  .wrapper__main {
    grid-area: main;
  }
  .wrapper:before,
  .wrapper:after,
  .wrapper__logo {
    grid-area: hero;
  }
  .wrapper:before {
    height: 70vw; /* 70% as tall as it is wide */
    border-bottom: none;
    border-top: 10px solid var(--blue);
    box-shadow: inset 0 1px 0 var(--pink);
  }
  .wrapper__footer {
    grid-area: footer;
  }
  /* the small logo in the photo's top-left corner (just under its blue band) */
  .wrapper > .wrapper__logo {
    grid-area: hero; /* (repeated here: the logo's own rules further down would put it back in row 1) */
    align-self: start;
    margin: calc(10px + 1.5rem) 0 0 1.5rem;
  }
  /* straight under the photo (pages without one, like the account page, keep the footer's space) */
  .wrapper:not(.wrapper--single) > .wrapper__footer.footer {
    margin-top: 0;
  }
}

/* page modifiers: --astrology (astrology, gifts, weddings), --gifts, --love: their photo, and how it's
   framed on phones (larger screens anchor it to the top) */
.wrapper--astrology {
  --hero-image: url("/images/astrologer-tyneside.jpg");
  --hero-position: center 10%; /* keep her face in frame */
}
.wrapper--gifts {
  --hero-image: url("/images/astrology-gifts.jpg");
  --hero-position: center 28%;
}
.wrapper--love {
  --hero-image: url("/images/wedding-astrology.jpg");
  --hero-position: center 25%; /* room for the board's title under the nav */
}
@media (min-width: 960px) {
  .wrapper--astrology:before {
    background-position: center top;
  }
}

/* Nav: full width; links left-aligned, Contact at the right-hand end of the window
   ========================================================================== */
.nav {
  position: absolute;
  z-index: 20000;
  top: 1rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: flex-start;
  gap: min(2rem, 3vw); /* tighter on small screens so the links fit */
  padding: 0 1.5rem;
  box-sizing: border-box;
  line-height: 1.6rem;
}
.nav__item {
  margin: auto 0;
  padding-bottom: 0.15rem;
  text-align: center;
}
.nav__item--current {
  color: var(--pink);
}
/* pushed to the right-hand end of the nav (Contact) */
.nav__item--end {
  margin-left: auto;
}
/* Sign in and Contact: in the header from 600px; on phones they're in the footer instead (footer__links) */
.nav__item--wide {
  display: none;
}
/* the menu button: only on phones (below) */
.nav__menu {
  display: none;
}
/* links only in the phone menu (e.g. the mailing list), and the logo under them */
.nav__item--menu,
.nav > .nav__logo { /* (.nav > : outranks the logo's own display: block) */
  display: none;
}
/* under 960px (single column, with the dark title area): a menu button (top right) instead of the links;
   tapped, the links fill the screen */
@media (max-width: 959px) {
  .nav {
    justify-content: flex-end;
  }
  .nav > .nav__item {
    display: none;
  }
  .nav__menu {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: -0.45rem -0.5rem 0 0;
    cursor: pointer;
  }
  /* the checkbox itself: invisible, over the button (so it can be tapped and reached with the keyboard) */
  .nav__toggle {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }
  .nav__toggle:focus-visible + .nav__burger {
    outline: 2px solid var(--pink);
    outline-offset: 0.6rem;
  }
  /* three lines, turning into an X when open */
  .nav__burger,
  .nav__burger:before,
  .nav__burger:after {
    position: relative;
    display: block;
    width: 1.5rem;
    height: 2px;
    background: white;
    transition: transform 0.2s, background 0.2s;
  }
  .nav__burger:before,
  .nav__burger:after {
    content: "";
    position: absolute;
    left: 0;
  }
  .nav__burger:before {
    top: -7px;
  }
  .nav__burger:after {
    top: 7px;
  }
  .nav__toggle:checked + .nav__burger {
    background: transparent;
  }
  .nav__toggle:checked + .nav__burger:before {
    transform: translateY(7px) rotate(45deg);
  }
  .nav__toggle:checked + .nav__burger:after {
    transform: translateY(-7px) rotate(-45deg);
  }
  /* open: the links, one under another, over the whole screen (Bookings and Contact too) */
  .nav:has(.nav__toggle:checked) {
    position: fixed;
    inset: 0;
    top: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 1rem 1.5rem;
    background: rgba(28, 24, 35, 0.9); /* the dark violet, translucent */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px); /* the page behind softly blurred, so the links read */
  }
  .nav:has(.nav__toggle:checked) > .nav__item:not([hidden]) {
    display: block;
    margin: 0;
    font-size: 1.5rem;
  }
  /* no underlines on the links; the page you're on is white, underlined with a line */
  .nav:has(.nav__toggle:checked) > a.nav__item {
    text-decoration: none;
    border-bottom: 1px solid transparent; /* there all along, so the line appearing on hover doesn't shift anything */
  }
  .nav:has(.nav__toggle:checked) > .nav__item--current,
  .nav:has(.nav__toggle:checked) > a.nav__item:hover {
    color: white;
    border-bottom: 1px solid white;
  }
  .nav:has(.nav__toggle:checked) > a.nav__item:hover span {
    color: white;
  }
  /* the logo between the pages (Yoga … Weddings) and the rest (Bookings, Contact, Mailing list) */
  .nav:has(.nav__toggle:checked) > .nav__logo {
    order: 1;
    display: block;
    height: 5rem;
    margin: 0.75rem 0;
  }
  .nav:has(.nav__toggle:checked) > .nav__item--end,
  .nav:has(.nav__toggle:checked) > .nav__item--end ~ .nav__item {
    order: 2;
  }
  /* on the dark: the outline white rather than black (the triangle stays pink) */
  .nav__logo path:not(.logo__background) {
    fill: white;
  }
  .nav__logo .logo__accent {
    stroke: white;
  }
  /* no translucent white fill inside it (that's for showing on photos) */
  .nav__logo .logo__background {
    fill: none;
  }
  .nav:has(.nav__toggle:checked) > .nav__menu {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    margin: -0.45rem -0.5rem 0 0;
  }
  /* the page underneath doesn't scroll while it's open */
  .wrapper:has(.nav__toggle:checked) {
    overflow: hidden;
  }
}
@media (min-width: 600px) {
  .nav__item--wide {
    display: inline-block;
  }
}
/* large screens: stays at the top while the page scrolls */
@media (min-width: 960px) {
  .nav {
    position: fixed;
  }
}


/* Title: the big page heading
   ========================================================================== */
.title {
  align-self: center;
  display: grid;
  font-size: 1.36rem;
  position: relative;
  grid-template-columns: 18rem;
}
.title__word {
  z-index: 10;
  grid-column-start: 1;
  grid-row-start: 1;
  position: relative;
  justify-self: center;
  text-transform: uppercase;
  letter-spacing: 0.4rem;
  padding-left: 0.4rem; /* balances the letter-spacing after the last letter */
  color: black;
  font-size: 3.1rem;
  font-variation-settings: "wght" 200;
}
/* pink dot in the centre of an O — tweak size/position here */
.title__dot {
  position: relative;
}
.title__dot:after {
  content: "";
  position: absolute;
  width: 0.35rem;
  height: 0.35rem;
  top: calc(50% - 0.3rem);
  left: calc(50% - 0.2rem); /* half the letter-spacing, which sits after the O */
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--pink);
}
.title__highlight {
  color: var(--pink);
}
.title__sub {
  grid-column-start: 1;
  grid-row-start: 2;
  z-index: 100;
  color: var(--pink);
  font-size: 1.6rem;
  font-variation-settings: "wght" 300;
}
/* the big ~ behind the heading */
.title__tilde {
  position: absolute;
  z-index: 0;
  bottom: -0.5rem;
  right: 0.5rem;
  font-family: "Bodoni Moda";
  font-size: 1800%;
  line-height: 0;
  font-variation-settings: "wght" 700;
  color: var(--blue);
  pointer-events: none;
}
/* stacked heading (weddings): words on separate rows, heart behind */
.title--stacked {
  grid-row-gap: 0.4rem;
}
.title--stacked .title__word,
.title--stacked .title__sub {
  grid-row-start: auto;
}
/* the heart behind the heading (weddings, gifts) — tweak size/position here */
.title__heart {
  pointer-events: none;
  position: absolute;
  z-index: 0;
  top: 0.5rem;
  left: 0;
  right: 0;
  height: 10rem;
}
.title__heart:before,
.title__heart:after {
  content: "";
  position: absolute;
  top: 0;
  width: 5rem;
  height: 8rem;
  border-radius: 2.5rem 2.5rem 0 0;
  background: var(--blue);
}
.title__heart:before {
  left: 50%;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
.title__heart:after {
  left: calc(50% - 5rem);
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

/* tagline under the title (homepage) */
.tagline {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin: 2rem 0 0;
  padding: 0 1rem;
  font-size: 1rem;
  line-height: var(--line-height);
  color: var(--content);
  font-variation-settings: "wght" 350;
}
@media (min-width: 600px) {
  .tagline {
    padding: 0 2rem;
  }
}

/* Section: a block of page content
   ========================================================================== */
/* everything in a section is left-aligned (button labels stay centred) */
.section {
  margin: 3rem var(--gutter) 0;
  padding-top: 2rem;
  text-align: left;
}
.btn {
  text-align: center;
}
/* body text inside a section */
.section p {
  font-size: 1rem;
  line-height: var(--line-height);
  margin: 0.6rem auto 1rem;
  max-width: var(--column);
  color: var(--content);
  font-variation-settings: "wght" 350;
}
.section p strong {
  font-variation-settings: var(--bold-body);
}
.section p a:not(.btn) {
  margin: 0;
}
/* a heading or box that starts a new group partway through a section gets extra space above it
   (mixed onto the element: class="heading section__group") */
.section > .section__group {
  margin-top: 5rem;
}

/* heading with the big ~ behind it (also used by .box__title) */
.heading,
.box__title {
  position: relative;
  font-size: 1.36rem;
  line-height: 1.3;
  font-variation-settings: "wght" 400;
}
.heading {
  max-width: var(--column); /* same column as the paragraphs */
  margin: 0 auto;
}
.heading:before,
.box__title--tilde:before {
  content: "~";
  position: absolute;
  z-index: 0;
  bottom: -0.2rem;
  left: 0;
  right: 0;
  font-family: "Bodoni Moda";
  font-size: 14rem;
  line-height: 0;
  font-variation-settings: "wght" 450;
  color: var(--blue);
  pointer-events: none;
}
/* text that sits above a decorative ~ or quote mark */
.heading__text,
.box__title > span,
.testimonial__text {
  position: relative;
  z-index: 1;
}

/* small all-caps heading */
.subheading {
  max-width: var(--column);
  margin: 4rem auto 0;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: -0.02em; /* a little tighter than the font's own spacing */
  font-variation-settings: "wght" 300;
}
/* inside a blue box, less space above (e.g. the class types in a schedule) */
.box .subheading {
  margin-top: 2rem;
}
.subheading:first-child {
  margin-top: 0;
}
.heading + .subheading,
.subheading--close {
  margin-top: 2rem;
}
.list + .subheading {
  margin-top: 3rem;
}

/* address + contact lines under "Get in Touch" */
p.contact-details {
  margin-bottom: 2rem;
}

/* Logo
   ========================================================================== */
/* the viewBox is cropped to the drawing, so size logos by height */
.logo {
  display: block;
  height: 9rem;
  width: auto;
  margin: 2rem auto;
}
/* translucent white fill in the shape of the logo, so it reads on the hero photo */
.logo__background {
  fill: white;
  fill-opacity: 0.35;
}
.logo__accent {
  fill: var(--pink);
  stroke: black;
  stroke-width: 0.5;
}
/* logo between sections */
.logo--divider + .section {
  padding-top: 0;
}
/* small logo in the bottom-left corner of the hero image (fixed with the image on large screens) */
.wrapper__logo {
  grid-row-start: 1;
  grid-column-start: 1;
  align-self: end;
  justify-self: start;
  position: relative;
  z-index: 1; /* above the hero image */
  width: 2.5rem;
  height: auto;
  margin: 0 0 1.5rem 1.5rem;
}
@media (min-width: 960px) {
  .wrapper__logo {
    width: 3.75rem;
  }
}
@media (min-width: 960px) {
  .wrapper__logo {
    position: fixed;
    left: 1.5rem;
    bottom: 1.5rem;
    margin: 0;
  }
}
/* Footer: contact details, mailing list and copyright
   ========================================================================== */
.footer {
  /* side margins keep the footer (and its border) on the text column */
  margin: 4rem max(var(--gutter), calc((100% - var(--column)) / 2)) 0;
  padding: 2rem 0 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  text-align: left;
}
.footer__about,
.footer__contact,
.footer__info {
  margin: 0;
  padding: 0;
}
/* About (gifts page) above Get in Touch */
.footer__about + .footer__contact {
  margin-top: 2rem;
}
.footer__about p,
.footer__contact p,
.footer__contact .subheading,
.footer__info p {
  margin-left: 0;
  margin-right: 0;
}
/* Sign in and Contact in the footer, on phones only (from 600px they're in the header) */
p.footer__links {
  margin: 1rem 0 0;
  font-size: 0.9rem;
}
@media (min-width: 600px) {
  p.footer__links {
    display: none;
  }
}
.footer__copyright {
  display: block;
  margin: 1rem 0;
  font-size: 80%;
  line-height: var(--line-height);
}

/* Button
   ========================================================================== */
/* buttons set their own sizing, so a <button> and an <a> look the same wherever they sit
   (rather than inheriting line height and weight from the text around them) */
.btn, .btn:link, .btn:visited {
  display: block;
  box-sizing: content-box; /* <button>s are border-box by default; links aren't */
  position: relative;
  width: calc(100% - 2rem);
  max-width: 20rem;
  margin: 1rem 0 0;
  padding: 1.15rem 1rem 0.85rem; /* extra top padding: the font sits high */
  border-radius: 2px;
  background: black;
  color: white;
  line-height: 1.6;
  font-variation-settings: "wght" 400;
  text-transform: uppercase;
  transition: all 0.15s;
  cursor: pointer;
}
.btn:hover {
  background: var(--pink);
  color: white;
}
/* buttons: no underline, and any text inside (e.g. a <span>) keeps the button's own colour, also on
   hover (rather than the links' pink) */
.btn {
  text-decoration: none;
}
.btn span,
.btn:hover span {
  color: inherit;
}
.btn__label {
  font-variation-settings: "wght" 400;
}
/* secondary button: white (no outline), pink when hovered or selected; e.g. Buy credits, Cancel */
.btn--secondary,
.btn--secondary:link,
.btn--secondary:visited {
  background: white;
  color: var(--content);
}
.btn--secondary:hover,
.btn--secondary[aria-selected="true"] {
  background: var(--pink);
  color: white;
}
/* small button (log out, shop "Buy") */
.btn--small,
.btn--small:link,
.btn--small:visited {
  display: inline-block;
  width: auto;
  padding: 0.45rem 0.9rem 0.3rem; /* much less than the big buttons */
  font-size: 0.7rem;
  line-height: 1.4;
}

/* Box: blue panel
   ========================================================================== */
.box {
  max-width: 24rem;
  padding: 2rem;
  border-radius: 0.2rem;
  margin: 0 auto;
  background: var(--blue);
  scroll-margin-top: 5rem; /* clear the fixed nav when linked to */
}
.box--wide {
  max-width: 32rem;
}
/* full width of the text column */
.box--full {
  max-width: var(--column);
  box-sizing: border-box;
}
/* phones: every box the full width of the screen (over the section's side gutters), square-cornered */
@media (max-width: 599px) {
  .section .box {
    max-width: none;
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    padding-left: var(--gutter); /* the text lined up with the rest of the page */
    padding-right: var(--gutter);
    border-radius: 0;
  }
}
.box > p:last-child {
  margin-bottom: 0;
}
/* big ~ behind the title, white so it shows on the blue box */
.box__title--tilde {
  margin-bottom: 2rem;
}
.box__title--tilde:before {
  color: white;
}
/* box titles: always left-aligned, even on pages that centre their text (e.g. the account page) */
.box__title {
  text-align: left;
}
/* portrait beside the box text */
/* phones: portrait above the text; side by side from 600px */
.box__body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 600px) {
  .box__body {
    flex-direction: row;
    gap: 1.5rem;
  }
}
.box__portrait {
  flex: none;
  display: block;
  width: 7rem;
  height: 7rem;
  border: 1px solid white;
  border-radius: 50%;
  object-fit: cover;
}
.box__body > p {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}

.box__subtitle {
  text-transform: uppercase;
  font-variation-settings: "wght" 350;
}

/* List: bulleted list on the text column
   ========================================================================== */
.list {
  max-width: var(--column);
  margin: 0.3rem auto 1rem;
  padding-left: 1.2rem; /* room for the bullets */
  box-sizing: border-box;
  text-align: left;
  line-height: var(--line-height);
  font-variation-settings: "wght" 350;
}
.list__item {
  margin-top: 0.25rem;
  list-style-type: disc;
}
/* a numbered list (e.g. the steps for joining classes) */
.list--numbered .list__item {
  list-style-type: decimal;
}
/* a list straight under a heading gets the same gap a paragraph would */
.subheading + .list {
  margin-top: 1rem;
}
/* item set apart from the ones above it */
.list__item--divided {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.list strong {
  font-variation-settings: var(--bold-body);
}

/* Gifts: gift list with prices
   ========================================================================== */
.gifts {
  display: grid;
  grid-gap: 2.5rem; /* space between the gift groups (keyrings, charts) */
  max-width: var(--column);
  margin: 1.5rem auto 2rem;
}
/* the display: grid above would otherwise override the hidden attribute (homepage passes, until they load) */
.gifts[hidden] {
  display: none;
}
.gifts__item {
  font-size: 1rem;
  line-height: var(--line-height);
  font-variation-settings: "wght" 350;
}
/* same style as .subheading */
.gifts__name {
  display: inline-block;
  text-transform: uppercase;
  font-variation-settings: "wght" 350;
}
.gifts .list {
  margin-top: 0;
}
/* small "what is…?" link opening a popup: beside a gift group's name, or beside a product's Buy button */
.gifts__info {
  margin: 0 0 0 0.75rem;
  font-size: var(--small);
  line-height: var(--small-line);
}
/* "how to order" under a group's hand-written list (hidden once its products load from Stripe) */
p.gifts__fallback {
  margin: 0.5rem 0 0;
}
.gifts__price {
  white-space: nowrap; /* keep "+£100" together */
  font-style: normal;
  color: var(--pink);
  font-variation-settings: "wght" 400;
}
/* products loaded from Stripe: square image (or placeholder), name, description and options */
.gifts__products {
  display: grid;
  grid-gap: 1.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
/* phones: image full width above the text; side by side from 600px */
.gifts__product {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  align-items: start;
}
@media (min-width: 600px) {
  .gifts__product {
    grid-template-columns: 14rem 1fr;
    grid-gap: 1.5rem;
  }
}
.gifts__image {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 2px;
  object-fit: cover;
}
.gifts__image--placeholder {
  background: var(--blue);
}
.gifts__title {
  display: block;
  font-variation-settings: "wght" 400;
}
.gifts__description {
  display: block;
  font-size: 0.9rem;
}
.gifts__options {
  display: grid;
  grid-gap: 0.75rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
/* buttons side by side (wrapping on narrow screens), e.g. the gift card's two buttons */
.gifts__options--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
/* the option's wording, with its Buy button underneath */
.gifts__label {
  display: block;
}
.gifts__buy,
.gifts__buy:link,
.gifts__buy:visited {
  margin: 0.25rem 0 0;
  background: var(--pink);
}
.gifts__buy:hover {
  background: black;
}

/* Timetable: upcoming classes with a Book button (homepage Group Classes)
   phones: each class as a small block; from 600px, one row per class
   ========================================================================== */
.timetable {
  max-width: var(--column);
  margin: 2rem auto;
}
.timetable__list {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
/* notes under a month's sessions (e.g. "Notes on the January schedule") */
.timetable__notes {
  margin-top: auto; /* at the bottom of the timetable when there are only a few sessions */
  padding-top: 1rem; /* and always a gap after the last session's line */
  font-size: var(--small);
  line-height: var(--small-line);
  font-variation-settings: "wght" 350; /* the same weight as paragraphs (the page default is heavier) */
}
.timetable__notes-title {
  margin-bottom: 0.25rem;
  font-variation-settings: "wght" 450;
}
.timetable__notes strong {
  font-variation-settings: var(--bold-body);
}
.timetable__notes p + p {
  margin-top: 0.5rem;
}
/* the popup's footer, always at its bottom (under the scrolling timetable): credits available
   (when logged in) on the left, Buy credits on the right */
.modal__box > .timetable__footer {
  display: flex;
  flex: none;
  align-items: center;
  gap: 1rem;
  max-width: none;
  margin: 0;
  padding: 0.75rem 2rem; /* 2rem in, like the text in the other popups */
  background: var(--blue);
}
/* the email they're logged in with, then their credits, on one line: right-aligned, next to Buy credits */
p.timetable__balance {
  flex: 1;
  margin: 0;
  font-size: var(--small);
  line-height: var(--small-line);
  font-variation-settings: "wght" 350;
  text-align: right;
}
.timetable__email {
  overflow-wrap: anywhere; /* a long address wraps rather than pushing the button off */
}
/* on phones: no "|", the credits on the line under the email */
@media (max-width: 599px) {
  .timetable__email {
    display: block;
  }
  .timetable__divider {
    display: none;
  }
}
/* weeks above the timetable: a dropdown on phones, tabs from 600px (the open one filled in) */
/* the weeks, pinned to the top of the timetable while the sessions scroll: a dropdown on phones, tabs from 825px */
.timetable__nav {
  position: sticky;
  z-index: 5;
  top: 0;
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  padding: 0 0 0.5rem;
  margin-bottom: 0.5rem;
  background: white;
}
.timetable__select {
  display: block;
  box-sizing: border-box;
  flex: 1;
  min-width: 0;
  padding: 0.5rem;
  border: 1px solid var(--content);
  border-radius: 2px;
  background: white;
  font-family: inherit;
  font-size: 1rem;
}
.timetable__select[hidden] {
  display: none;
}
.timetable__tabs {
  display: none;
  flex: 1;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}
@media (min-width: 825px) {
  .timetable__select {
    display: none;
  }
  .timetable__tabs {
    display: flex;
  }
}
/* "Buy credits": a small secondary button on the right of the footer, opening the Buy credits popup */
.timetable__buy-button,
.timetable__buy-button:link,
.timetable__buy-button:visited {
  margin: 0 0 0 auto;
}
/* "Log in" (when not logged in): a small button like Buy credits, but black, on its left */
.timetable__login,
.timetable__login:link,
.timetable__login:visited {
  margin: 0;
}
.timetable__login[hidden] {
  display: none;
}
/* the Buy credits popup: the buttons in a row, then the note */
.modal__box > p.passes__note {
  font-variation-settings: "wght" 350;
  margin-top: 1rem;
}
.timetable__tabs[hidden] {
  display: none;
}
/* the tabs are plain text; the open one is pink and underlined */
.timetable__tab {
  padding: 0.25rem 0;
  border: none;
  background: none;
  font-size: 0.9rem;
  cursor: pointer;
}
.timetable__tab:hover {
  color: var(--pink);
}
.timetable__tab[aria-selected="true"] {
  color: var(--pink);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
/* one session (a <details> when it has a description, otherwise a <div>), its row in a grid */
.timetable__class {
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  line-height: 1.4;
  font-variation-settings: "wght" 350; /* the same weight as paragraphs (the page default is heavier) */
}
.timetable__row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 0.25rem 1rem;
  align-items: center;
}
/* when and what: their two lines side by side (wrapping when they don't fit) */
.timetable__when,
.timetable__what {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.3em; /* the space between the lines when they're side by side */
}
.timetable__when {
  margin-left: 0.3rem;
}
.timetable__what {
  grid-column: 1;
  font-size: 0.9rem;
}
.timetable__action {
  grid-column: 2;
  grid-row: 1 / span 2;
  text-align: right;
}
.timetable__action .btn {
  margin: 0;
}
/* on phones: one column, the Sign up / Cancel button under the session's details */
@media (max-width: 599px) {
  .timetable__row {
    grid-template-columns: 1fr;
  }
  .timetable__action {
    grid-column: 1;
    grid-row: auto;
    margin: 0.4rem 0 0 0.3rem; /* lined up with the text above */
    text-align: left;
  }
}
.timetable__status {
  font-size: 0.9rem;
}
/* a session with a description: a plain <details>, with the browser's own triangle to the left of its
   row; sessions without one are indented to line up */
.timetable__summary {
  margin-left: 1rem;
  list-style-position: outside;
  cursor: pointer;
}
div.timetable__class {
  padding-left: 1rem;
}

/* a session that opens: its name is pink (no underline, no change on hover) */
details.timetable__class .timetable__name {
  color: var(--pink);
}
/* **bold** in a description (the font's weight is set with font-variation-settings, so <strong> needs a heavier one) */
.timetable__description strong {
  font-variation-settings: var(--bold-body);
}
/* {{small text}} in a description: small, on its own with a little space above */
.timetable__small {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--small);
  line-height: var(--small-line);
}
.timetable__description {
  margin: 0.5rem 0 0 1rem; /* lined up with the row above */
  line-height: 1.4;
}
.timetable__status--booked {
  margin-right: 1rem;
  color: var(--pink);
}
/* how many credits a class takes, after its name: "(1 credit)", "(2 credits)" */
.timetable__credits {
  font-style: italic;
}
/* venue, on the line under the class name (with the credits after it) */
.timetable__venue {
  font-size: 0.9rem;
}
/* Sign up and Cancel: the same width; Cancel is a secondary button, so it's less of a call to action */
.timetable__book,
.timetable__cancel {
  min-width: 6rem;
  margin: 0;
  text-align: center;
}
/* Cancel sits on white, so it gets the pale blue instead of the secondary button's white (pink on hover) */
.timetable__cancel:not(:hover) {
  background: var(--blue);
}
p.timetable__note {
  margin-top: 1rem;
  font-size: 0.9rem;
}
/* in the Group Sessions popup: pinned to the bottom while the sessions scroll, so a message after Sign up /
   Cancel (e.g. "You need credits to book") is always in view, however far down the session was */
.modal--schedule p.timetable__note {
  position: sticky;
  z-index: 5;
  bottom: 0;
  order: 1; /* (the timetable is a column: after the notes too) */
  margin: 1rem -2rem 0; /* the full width of the popup, over the timetable's 2rem sides */
  padding: 0.75rem 2rem;
  border-top: 1px solid var(--pink);
  background: white;
}

/* Passes: the Buy credits buttons (at-193 "How to Join", and the "Buy credits" tab in the account page's Group Sessions popup)
   phones: one under another; from 600px, side by side
   ========================================================================== */
.passes {
  display: grid;
  grid-gap: 0.75rem;
  max-width: var(--column);
  margin: 1.5rem auto 0;
}
.passes__buy,
.passes__buy:link,
.passes__buy:visited {
  width: auto;
  max-width: none;
  margin: 0;
}
@media (min-width: 600px) {
  .passes {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* buttons side by side, left-aligned at their own width (the "Buy credits" tab) */
.passes.passes--inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.75rem;
  margin: 1rem 2rem;
}
/* phones: one under another, all full width */
@media (max-width: 599px) {
  .passes.passes--inline {
    flex-direction: column;
  }
  .passes--inline .passes__buy {
    box-sizing: border-box; /* (buttons are content-box) so full width includes their padding */
    width: 100%;
    text-align: center;
  }
}
@media (min-width: 600px) {
  .passes--stacked {
    grid-template-columns: 1fr;
  }
}

/* Testimonial: quote box with a credit underneath
   ========================================================================== */
/* full width of the text column */
.testimonial {
  max-width: var(--column);
  margin: 0 auto;
}
.testimonial__quote {
  position: relative;
  padding: 2rem;
  border-radius: 0.2rem;
  background: var(--blue);
  line-height: 1.3;
  font-variation-settings: "wght" 400;
}
.testimonial__quote:before,
.testimonial__quote:after {
  position: absolute;
  z-index: 0;
  font-family: "Bodoni Moda";
  font-size: 9.6rem;
  line-height: 0;
  font-variation-settings: "wght" 450;
  color: black;
  pointer-events: none;
}
.testimonial__quote:before {
  content: "“";
  left: -1rem;
  top: 2.5rem;
}
.testimonial__quote:after {
  content: "”";
  right: -0.75rem;
  bottom: -1.75rem;
}
.testimonial__credit {
  margin-top: 0.5rem;
  text-align: left;
  line-height: var(--line-height);
  font-variation-settings: "wght" 350;
}

/* Modal: opened with :target (href="#id"), closed by linking anywhere else
   ========================================================================== */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none; /* fully removed until opened, so the lazy mailing list iframe doesn't load */
  justify-content: center;
  align-items: center;
  padding: 0 1rem; /* popups never quite reach the screen's edges */
}
.modal:target {
  z-index: 100000;
  display: flex;
}
.modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.96;
  background: var(--violet);
}
.modal__overlay {
  text-decoration: none;
}
.modal__box {
  position: relative;
  max-height: calc(90vh - 2rem);
  padding-bottom: 1.5rem;
  border: 2px solid var(--pink);
  border-radius: 1px;
  background: white;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: left; /* even inside a centred footer (e.g. on pages with wrapper--single) */
}
.modal__box > * {
  display: block;
  max-width: var(--column);
  margin: 1rem;
}
/* the display: block above would otherwise override the hidden attribute */
.modal__box > [hidden] {
  display: none;
}
/* the Group Sessions popup: always full height (not shrinking to fit); the header and footer stay
   put and only the timetable between them scrolls, with its week tabs / dropdown pinned to its top */
.modal--schedule .modal__box {
  display: flex;
  flex-direction: column;
  min-width: min(calc(var(--column) + 4rem), calc(90vw - 2rem)); /* full width while the sessions load (the column + the timetable's 2rem sides) */
  height: calc(90vh - 2rem);
  padding-bottom: 0;
  overflow: hidden;
}
.modal--schedule .modal__box > .timetable {
  display: flex;
  flex-direction: column; /* so the notes can sit at the bottom */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 0 2rem 1.5rem; /* 2rem in, like the text in the other popups */
}
/* the pinned weeks bar reaches the popup's edges (over the timetable's 2rem sides), so sessions scrolling
   underneath don't show beside it */
.modal--schedule .timetable__nav {
  margin-left: -2rem;
  margin-right: -2rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* body text gets the same side spacing as the certifications list */
.modal__box > p {
  margin-left: 2rem;
  margin-right: 2rem;
}
.modal__header {
  position: sticky;
  z-index: 10;
  top: 0;
  left: 0;
  display: flex;
  min-width: calc(100% - 7rem);
  margin: 0;
  padding: 1.5rem 6rem 1rem 1rem; /* a little more room above the title and its big ~ */
  background: var(--background-alt);
  line-height: 1.6rem;
  text-align: left;
}
/* modal titles look like the big section headings: the same size and weight, with the blue ~ behind
   (isolation keeps the ~ behind the title's text but in front of the header's background) */
.modal__title {
  position: relative;
  isolation: isolate;
  margin: 0 1rem; /* with the header's 1rem padding: 2rem in, lined up with the popup's text */
  font-size: 1.36rem;
  line-height: 1.3;
  font-variation-settings: "wght" 400;
}
.modal__title:before {
  content: "~";
  position: absolute;
  z-index: -1;
  bottom: -0.2rem;
  left: 0;
  right: 0;
  font-family: "Bodoni Moda";
  font-size: 14rem;
  line-height: 0;
  font-variation-settings: "wght" 450;
  color: var(--blue);
  pointer-events: none;
}
.modal__close,
.modal__close:link,
.modal__close:visited {
  position: absolute;
  z-index: 11; /* above the header and any iframe */
  margin: 0;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.4rem;
  font-variation-settings: "wght" 300;
  line-height: 1;
  color: var(--pink);
  transition: all 0.15s;
}
.modal__close {
  text-decoration: none;
}
.modal__close:hover {
  transform: scale(1.35);
}
.modal__close span {
  display: inline-block;
  transform: scaleY(0.85);
}
/* small icon used as a bullet in a modal's text (e.g. the zodiac glyphs in "The Big 3"):
   drawn in the text colour, outlines with filled dots */
.modal__icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin: 0.5rem 0.5em 0 1rem; /* space above each line with an icon, and indented 1rem */
  vertical-align: -0.15em;
  overflow: visible; /* the outline is drawn half outside the 0 0 100 100 viewBox: don't clip it */
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
/* a 1.5px line at any icon size (vector-effect isn't inherited, so it's set on each shape) */
.modal__icon > * {
  vector-effect: non-scaling-stroke;
}
.modal__icon-dot {
  fill: currentColor;
  stroke: none;
}
/* the mailing list sign-up at the foot of the contact popup: the text and button, with the logo on
   their right, separated from the content above by a thin line */
.modal__box > .modal__signup {
  display: flex;
  align-items: center;
  gap: 2.5rem; /* space between the text and the logo */
  margin: 1.5rem 2rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.modal__signup-logo {
  flex: none;
  height: 5.4rem;
  order: 1; /* after the text: on the right */
  margin: 0 1rem 0 2rem; /* 2rem more space on its left, by the text (on top of the gap), 1rem on its right */
}
/* no logo on phones: the text and button get the whole width */
@media (max-width: 599px) {
  .modal__signup-logo {
    display: none;
  }
}
/* the text and button fill the rest of the row, left-aligned */
.modal__box p.modal__signup-text {
  flex: 1;
  margin: 0;
}
.modal__signup-text .modal__btn {
  margin: 1rem 0 0;
}
.modal__btn {
  margin: 1rem 0;
  padding: 0.75rem 1rem 0.55rem;
}
/* a bulleted list in a popup's text (e.g. About Consultations): lined up with the paragraphs */
.modal__box > .list {
  margin: 1rem 2rem;
}
.modal__principle {
  display: inline-block;
  margin-top: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}
.modal__frame {
  width: min(var(--column), calc(90vw - 2rem));
  height: 70vh;
}
/* a modal that holds an iframe (mailing list form, privacy policy) */
.modal--frame .modal__box {
  padding-bottom: 0;
}
.modal--privacy .modal__box {
  border-color: black;
}
/* centred content (contact modal); the header keeps its own left alignment */

/* Certifications: list of trainings in the certifications modal
   ========================================================================== */
.certifications {
  padding: 0 1rem;
  text-align: left;
}
.certifications__school {
  margin-bottom: 1rem;
  line-height: var(--line-height);
  font-variation-settings: "wght" 350;
}
.certifications__name {
  font-variation-settings: "wght" 400;
}
.certifications__courses {
  margin-left: 1rem;
}
.certifications__course {
  list-style-type: disc;
}

/* Banner: fixed notice along the bottom of the screen (cookie / privacy notices)
   ========================================================================== */
.banner {
  position: fixed;
  z-index: 1000;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 1rem;
  padding: 1rem 3rem 1rem 1.5rem; /* room on the right for the close X */
  border-radius: 5px;
  background: var(--pink);
  color: white;
  font-size: var(--small);
  line-height: 1.6; /* more room than other small text: several lines, with links */
  text-align: left;
}
/* links in the banner: same style as every other link, but white on the pink */
.banner a:link,
.banner a:visited,
.banner a:hover,
.banner a span {
  color: white;
}
.banner a {
  text-decoration-color: white;
}
/* from 960px: bottom left, the width of the hero image panel (45vw, 40vw, 40rem), on every page */
@media (min-width: 960px) {
  .banner {
    right: auto;
    box-sizing: border-box;
    width: calc(45vw - 2rem); /* within its 1rem margins */
  }
}
@media (min-width: 1200px) {
  .banner {
    width: calc(40vw - 2rem);
  }
}
@media (min-width: 1600px) {
  .banner {
    width: calc(40rem - 2rem);
  }
}
/* the login notice has no X, so no room for one on the right */
.banner--cookies {
  padding-right: 1.5rem;
}
/* its options: two buttons, OK, keep me logged in (white) and Log me out (outlined) */
.banner__text {
  margin: 0;
}
.banner__list {
  margin: 0.75rem 0 0;
}
.banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.banner .banner__dismiss,
.banner .banner__clear {
  width: auto;
  margin: 0;
}
.banner .banner__dismiss:link,
.banner .banner__dismiss:visited {
  background: white;
  color: var(--pink);
}
.banner .banner__clear:link,
.banner .banner__clear:visited {
  background: transparent;
  box-shadow: inset 0 0 0 1px white; /* an outline that doesn't change its size */
  color: white;
}
.banner .banner__dismiss:hover,
.banner .banner__clear:hover {
  background: black;
  color: white;
}
.banner__list[hidden] {
  display: none;
}
/* close button (no JS), on the rising sign page's notice: ticking the hidden checkbox inside it hides the
   banner (the login notice has a "dismiss" link instead, handled by cookies.js) */
.banner__close {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.1rem;
  font-variation-settings: "wght" 300;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s;
}
.banner__close:hover {
  transform: scale(1.35);
}
.banner__close span {
  display: inline-block;
  transform: scaleY(0.85); /* same squished X as the modals */
}
.banner__close:has(.banner__toggle:focus-visible) {
  outline: 1px solid white;
}
.banner__toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.banner:has(.banner__toggle:checked) {
  display: none;
}
/* leave room at the bottom of the page while the banner is showing */
body:has(.banner--cookies:not([hidden])) .wrapper,
body:has(.banner:not(.banner--cookies) .banner__toggle:not(:checked)) .wrapper {
  padding-bottom: 10rem;
}

/* Loader: three dots (pink, black, pink), each rising and fading in turn, while something loads
   (e.g. "Logging you in" on the account page, "Loading gift card details" on the gift card page) */
.loader {
  display: block;
  width: 3rem;
  height: 0.75rem;
  margin: 1rem auto 0;
  overflow: visible;
}
.loader__dot {
  fill: var(--pink);
  animation: loader-dot 1.2s ease-in-out infinite;
}
.loader__dot:nth-child(2) {
  fill: black;
  animation-delay: 0.2s;
}
.loader__dot:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes loader-dot {
  0%, 60%, 100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
/* no movement for people who've asked for less (the dots just stay) */
@media (prefers-reduced-motion: reduce) {
  .loader__dot {
    animation: none;
  }
}

/* Single centred column, no hero image (rising sign + user pages)
   ========================================================================== */
.wrapper--single {
  grid-template-columns: 1fr;
}
.wrapper--single:before,
.wrapper--single:after {
  display: none;
}
.wrapper--single .wrapper__header,
.wrapper--single .wrapper__main,
.wrapper--single .wrapper__footer {
  grid-column: 1;
  grid-row: auto;
}
/* the nav scrolls away with the page at every size (not fixed on large screens) */
.wrapper--single .nav {
  position: absolute;
}


/* everything centred on this page, footer included */
.wrapper--single .section,
.wrapper--single .footer {
  text-align: center;
}
/* (not in popups, which are laid out on their own) */
.wrapper--single .btn:not(.modal .btn) {
  margin-left: auto;
  margin-right: auto;
}
.wrapper--single .wrapper__header {
  margin-top: 8rem;
  padding-bottom: 0;
  border-bottom: none;
  box-shadow: none;
}