@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/outfit-latin-variable.woff2") format("woff2");
}
.page-motion {
  --motion-duration: 1250ms;
  --motion-stagger: 110ms;
  --motion-pop-duration: 1500ms;
  --motion-pop-stagger: 520ms;
  --motion-ease: var(--ease-site);
  overflow-x: clip;
}
@media (max-width: 767px) {
  .page-motion {
    --motion-duration: 1000ms;
  }
}
@media (max-width: 767px) {
  [data-motion-process] {
    --motion-duration: 300ms;
    --motion-stagger: 40ms;
  }
}
.page-motion:has([data-motion-pace="reading"]) {
  --motion-duration: 780ms;
}
.page-motion:has([data-motion-pace="slow"]) {
  --motion-duration: 1900ms;
  --motion-stagger: 160ms;
  --motion-image-distance: calc(var(--space-lg) * 2);
  --motion-ease: cubic-bezier(0.2, 0.65, 0.3, 1);
  --motion-answer-duration: var(--motion-duration);
  --motion-answer-ease: var(--motion-ease);
}
@media (max-width: 767px) {
  .page-motion:has([data-motion-pace="slow"]) {
    --motion-image-distance: calc(var(--space-md) * 2);
  }
}
[data-team-morning-chart] {
  --team-morning-playback: 9000ms;
}
.team-morning-tone-bride,
.team-morning-tone-outside {
  --team-morning-tone: var(--color-calendar-bride);
}
.team-morning-tone-mother {
  --team-morning-tone: var(--color-calendar-mother);
}
.team-morning-tone-godmother {
  --team-morning-tone: var(--color-calendar-godmother);
}
.team-morning-tone-sister {
  --team-morning-tone: var(--color-calendar-sister);
}
.team-morning-tone-friend {
  --team-morning-tone: var(--color-calendar-friend);
}
.team-morning-tone-bridesmaid {
  --team-morning-tone: var(--color-calendar-bridesmaid);
}
.team-morning-tone-team {
  --team-morning-tone: var(--color-surface);
}
.team-morning-swatch {
  background-color: var(--team-morning-tone);
}
.team-morning-task {
  background-color: var(--team-morning-tone);
  color: var(--color-ink);
}
.team-morning-task[data-state] {
  background-color: color-mix(
    in srgb,
    var(--team-morning-tone) 40%,
    transparent
  );
}
.team-morning-progress {
  position: absolute;
  inset: 0;
  visibility: hidden;
  transform: scaleY(0);
  transform-origin: top;
  background-color: var(--team-morning-tone);
}
.team-morning-task[data-state="active"] .team-morning-progress {
  visibility: visible;
}
@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/literata-latin-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Literata";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/literata-italic-latin-variable.woff2") format("woff2");
}
/* Registered as a length so getComputedStyle resolves the calc() to pixels: the sticky side column and the
   article index read it from JavaScript with parseFloat. */
@property --site-header-height {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
:root {
  --color-ink: #000000;
  --color-charcoal: #1f1f1f;
  --color-muted: #636363;
  --color-line: #e0e0e0;
  --color-surface: #f2f2f2;
  --color-white: #ffffff;
  --color-calendar-bride: #e9cfc6;
  --color-calendar-mother: #d3decf;
  --color-calendar-godmother: #d3dce7;
  --color-calendar-sister: #eadfc7;
  --color-calendar-friend: #dfd6e7;
  --color-calendar-bridesmaid: #cfe3df;
  --color-map-near: #e2e9dd;
  --color-map-middle: #b3c4aa;
  --color-map-far: #7e9675;
  --font-family-sans: "Outfit", sans-serif;
  --font-family-serif: "Literata", Georgia, serif;
  --font-size-display: clamp(2.75rem, 2.2857rem + 1.9048vw, 4rem);
  --font-size-h1: clamp(2.5rem, 2.2214rem + 1.1429vw, 3.25rem);
  --font-size-h2: clamp(2.125rem, 1.9393rem + 0.7619vw, 2.625rem);
  --font-size-h3: clamp(1.625rem, 1.5321rem + 0.381vw, 1.875rem);
  --font-size-title: clamp(1.25rem, 1.2036rem + 0.1905vw, 1.375rem);
  --font-size-subtitle: 19px;
  --font-size-lead: 19px;
  --font-size-body: 17px;
  --font-size-small: 15px;
  --font-size-caption: 13px;
  --font-size-eyebrow: 12px;
  --font-size-reading: 18px;
  --font-size-reading-lead: clamp(1.1875rem, 1.1411rem + 0.1905vw, 1.3125rem);
  --font-size-reading-quote: clamp(1.3125rem, 1.2429rem + 0.2857vw, 1.5rem);
  --font-size-ui: 14px;
  --font-size-masthead: clamp(0.625rem, 0.5786rem + 0.1905vw, 0.75rem);
  --font-size-title-hero: clamp(3.5rem, 2.5714rem + 3.8095vw, 6rem);
  --font-size-footer-wordmark: 24px;
  --line-height-ui: 1.26;
  --line-height-quote: 1.45;
  --line-height-hinge: 1.3;
  --line-height-statement: 1.1;
  --line-height-statement-mobile: 1.15;
  --line-height-display-line: 1.2;
  --line-height-copy: 1.6;
  --line-height-eyebrow-list: 1.8;
  --line-height-reading-prose: 1.7;
  --line-height-pill: 22px;
  --letter-spacing-label: 0.06em;
  --letter-spacing-wordmark: -0.0154em;
  --letter-spacing-signature: 0.6px;
  --letter-spacing-caption-label: 1.5px;
  --letter-spacing-tag: 1.6px;
  --letter-spacing-masthead: clamp(4px, 2.8857px + 0.2857vw, 7px);
  --letter-spacing-section: 2px;
  --letter-spacing-section-wide: 3px;
  --letter-spacing-label-wide: 2.4px;
  --letter-spacing-display-tight: -0.8px;
  --letter-spacing-heading-tight: -0.4px;
  --letter-spacing-title-tight: -0.2px;
  --letter-spacing-question: -0.6px;
  --letter-spacing-title-large: -0.5px;
  --letter-spacing-brand-label: 1.2px;
  --letter-spacing-h2: -0.9px;
  --letter-spacing-h3: -0.017em;
  --icon-size-inline: 16px;
  --icon-size-card: 18px;
  --icon-size-control: 20px;
  --icon-size-emphasis: 22px;
  --icon-size-row: 24px;
  --icon-size-feature: 26px;
  --icon-size-empty: 32px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;
  --space-3xl: 128px;
  --space-pad-x: 160px;
  --radius-default: 4px;
  --radius-full: 9999px;
  --layer-header: 12;
  --layer-floating: 14;
  --layer-overlay: 20;
  --layer-panel: 30;
  --layer-menu: 40;
  --ease-site: cubic-bezier(0.22, 1, 0.36, 1);
  /* For long, large moves: the site's curve spends most of its movement in the first instant and reads as a jump. */
  --ease-even: cubic-bezier(0.45, 0, 0.25, 1);
  --masthead-logo-width: clamp(5.25rem, 3.95rem + 5.3333vw, 8.75rem);
  --masthead-logo-height: calc(var(--masthead-logo-width) * 0.6);
  --masthead-rule-width: clamp(16px, 11.5429px + 1.1429vw, 28px);
  --site-masthead-height: calc(
    2 * var(--space-md) + var(--masthead-logo-height) + var(--space-xs) +
      var(--font-size-masthead)
  );
  --site-header-height: calc(
    2 * var(--space-sm) + var(--masthead-logo-height) + var(--space-2xs) +
      var(--font-size-masthead) + 1px
  );
}
/* Tailwind's preflight is disabled, so nothing resets border-style and every
   border utility would compute to zero width. These two declarations are preflight's border reset:
   they draw nothing by themselves and make every border utility behave as documented. */
*,
::before,
::after {
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
}
* {
  box-sizing: border-box;
}
img {
  height: auto;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--font-family-sans);
  color: var(--color-ink);
  background: var(--color-white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  display: block;
  max-width: 100%;
}
button,
[role="button"],
summary {
  cursor: pointer;
}
button:disabled,
[role="button"][aria-disabled="true"] {
  cursor: not-allowed;
}
.video-review-card {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.6s var(--ease-site);
}
.video-review-card[data-active] {
  opacity: 1;
}
.video-review-card video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
.video-review-thumbnail {
  cursor: pointer;
}
.video-review-thumbnail[aria-current="true"] {
  outline: 2px solid var(--color-ink);
  outline-offset: -2px;
}
[data-video-review-panel][hidden] {
  display: none;
}
.video-review-progress {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s linear;
}
.skip-link {
  position: fixed;
  z-index: var(--layer-overlay);
  top: var(--space-xs);
  left: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-ink);
  color: var(--color-white);
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease-site);
}
.skip-link:focus {
  transform: translateY(0);
}
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--layer-header);
  border-bottom: 1px solid var(--color-line);
}
.masthead-logo {
  display: block;
  width: var(--masthead-logo-width);
  height: auto;
}
.masthead-name::before,
.masthead-name::after {
  content: "";
  width: var(--masthead-rule-width);
  height: 1px;
  background: currentColor;
}
/* The tracking also follows the last letter, so the left rule takes the same space to stay centred. */
.masthead-name::before {
  margin-right: var(--letter-spacing-masthead);
}
@media (min-width: 1024px) {
  :root {
    --site-header-height: 53px;
  }
  .site-header {
    top: calc(var(--site-masthead-height) * -1);
    border-bottom: 0;
  }
  .site-masthead {
    height: var(--site-masthead-height);
  }
  .site-menu-bar {
    padding: calc(var(--space-sm) - 1px) var(--space-pad-x);
    border-block: 1px solid var(--color-line);
  }
  .site-menu-bar .nav-menu {
    justify-content: center;
  }
}
.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.nav-links a,
.footer-links a {
  display: inline-flex;
  padding-block: var(--space-2xs);
}
.footer-links a:hover,
.footer-links a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}
@media (min-width: 1024px) {
  .nav-links > li > a {
    padding-block: 0 2px;
    transition: box-shadow 0.2s var(--ease-site);
  }
  .nav-links > li > a:hover,
  .nav-links > li > a:focus-visible,
  .nav-links > li > a[aria-current="page"] {
    box-shadow: inset 0 -1px var(--color-ink);
  }
}
.nav-toggle {
  display: none;
}
.nav-close,
.nav-backdrop {
  display: none;
}
.nav-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.nav-submenu {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-group__title {
  display: none;
}
.nav-group__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.nav-links .nav-group__toggle {
  padding: 0 0 2px;
  transition: box-shadow 0.2s var(--ease-site);
}
.nav-links .nav-group__toggle:hover,
.nav-links .nav-group__toggle:focus-visible,
.nav-links .nav-group__toggle[data-current] {
  box-shadow: inset 0 -1px var(--color-ink);
}
.nav-group__toggle .ph-caret-down {
  transition: transform 0.2s var(--ease-site);
}
.nav-group__toggle[aria-expanded="true"] .ph-caret-down {
  transform: rotate(180deg);
}
.nav-submenu {
  position: absolute;
  top: calc(100% + var(--space-sm));
  left: calc(var(--space-md) * -1);
  z-index: var(--layer-panel);
  min-width: 280px;
  gap: 0;
  padding: var(--space-xs) 0;
  border: 1px solid var(--color-line);
  background: var(--color-white);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-ink) 12%, transparent);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition:
    clip-path 0.4s var(--ease-site),
    visibility 0s 0.4s;
}
.nav-submenu::before {
  content: "";
  position: absolute;
  inset: calc(var(--space-sm) * -1) 0 auto;
  height: var(--space-sm);
}
.nav-group__toggle[aria-expanded="true"] + .nav-submenu {
  clip-path: inset(calc(var(--space-sm) * -1) -40px -40px -40px);
  visibility: visible;
  transition:
    clip-path 0.45s var(--ease-site),
    visibility 0s;
}
.nav-submenu > li {
  opacity: 0;
  transform: translateY(calc(var(--space-2xs) * -1));
  transition:
    opacity 0.15s var(--ease-site),
    transform 0.15s var(--ease-site);
}
.nav-group__toggle[aria-expanded="true"] + .nav-submenu > li {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.45s var(--ease-site) var(--nav-item-delay),
    transform 0.5s var(--ease-site) var(--nav-item-delay);
}
.nav-submenu > li:nth-child(1) {
  --nav-item-delay: 60ms;
}
.nav-submenu > li:nth-child(2) {
  --nav-item-delay: 100ms;
}
.nav-submenu > li:nth-child(3) {
  --nav-item-delay: 140ms;
}
.nav-submenu > li:nth-child(4) {
  --nav-item-delay: 180ms;
}
.nav-submenu a {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-md);
  white-space: nowrap;
}
.nav-submenu a:hover,
.nav-submenu a:focus-visible,
.nav-submenu a[aria-current="page"] {
  background: var(--color-surface);
}
.language-menu .nav-submenu {
  left: auto;
  right: 0;
  min-width: 160px;
  transform-origin: top right;
}
@media (max-width: 1023px) {
  .language-menu .nav-submenu {
    left: 0;
    right: auto;
    transform-origin: top left;
  }
  .nav-links .nav-group {
    gap: var(--space-sm);
  }
  .nav-links .nav-group__title {
    display: revert;
  }
  .nav-links .nav-group__toggle {
    display: none;
  }
  .nav-links .nav-submenu {
    position: static;
    min-width: 0;
    gap: var(--space-sm);
    padding: 0 0 0 var(--space-sm);
    border: 0;
    border-left: 1px solid var(--color-line);
    background: none;
    font-size: var(--font-size-small);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    box-shadow: none;
    clip-path: none;
    visibility: visible;
    transition: none;
  }
  .nav-links .nav-submenu::before {
    content: none;
  }
  .nav-links .nav-submenu > li {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .nav-links .nav-submenu a {
    min-height: 0;
    padding: var(--space-2xs) 0;
    white-space: normal;
  }
  .nav-links .nav-submenu a:hover,
  .nav-links .nav-submenu a:focus-visible,
  .nav-links .nav-submenu a[aria-current="page"] {
    background: none;
  }
}
main {
  min-height: 40vh;
}
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 52px;
  padding: 0 var(--space-lg);
  border: 1px solid transparent;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-small);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-caption-label);
  line-height: var(--line-height-ui);
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background-color 0.25s var(--ease-site),
    color 0.25s var(--ease-site);
}
.button--primary {
  background: var(--color-ink);
  color: var(--color-white);
}
.button--primary:hover,
.button--primary:focus-visible {
  background: var(--color-charcoal);
}
.button--secondary {
  background: var(--color-white);
  border-color: var(--color-ink);
  color: var(--color-ink);
}
.button--secondary:hover,
.button--secondary:focus-visible {
  background: var(--color-ink);
  color: var(--color-white);
}
/* The secondary button on the black band of the advice home. */
.button--inverse {
  background: var(--color-ink);
  border-color: var(--color-white);
  color: var(--color-white);
}
.button--inverse:hover,
.button--inverse:focus-visible {
  background: var(--color-white);
  color: var(--color-ink);
}
.floating-actions {
  position: fixed;
  right: var(--space-lg);
  bottom: var(--space-lg);
  z-index: var(--layer-floating);
  display: flex;
  gap: var(--space-xs);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition:
    opacity 0.3s var(--ease-site),
    transform 0.3s var(--ease-site);
}
.floating-actions.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.floating-actions > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-ink);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caption-label);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--color-ink) 18%, transparent);
  transition:
    background-color 0.2s var(--ease-site),
    color 0.2s var(--ease-site);
}
.floating-actions .ph {
  font-size: var(--icon-size-inline);
}
.contact-action,
.instagram-action {
  gap: var(--space-xs);
  min-height: 52px;
  padding: 0 var(--space-lg);
  font-size: var(--font-size-small);
  font-weight: 500;
  line-height: 1.26;
}
.contact-action {
  background: var(--color-ink);
  color: var(--color-white);
}
.contact-action:hover,
.contact-action:focus-visible {
  background: var(--color-charcoal);
}
.instagram-action {
  background: var(--color-white);
  color: var(--color-ink);
}
.instagram-action:hover,
.instagram-action:focus-visible {
  background: var(--color-ink);
  color: var(--color-white);
}
.cookie-consent:not([hidden]) ~ .floating-actions {
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
}
.action-link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: var(--space-xs);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid transparent;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.2s var(--ease-site);
}
.action-link .ph {
  font-size: var(--icon-size-inline);
}
.action-link:hover,
.action-link:focus-visible,
.group:hover .action-link {
  border-bottom-color: currentColor;
}
.inline-link {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease-site);
}
.inline-link:hover,
.inline-link:focus-visible {
  color: var(--color-ink);
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}
.honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* Only the wide index follows the reader down the page; on a phone it stays above the text, so no entry is current. */
@media (min-width: 1024px) {
  .article-index-entry[aria-current] {
    text-decoration: underline;
    text-decoration-thickness: 1px;
  }
}
.article-body :is(h2, h3) {
  scroll-margin-top: calc(var(--site-header-height) + var(--space-md));
}
.strip-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-line);
  transition: background-color 0.2s var(--ease-site);
}
.strip-dot.is-active {
  background: var(--color-ink);
}
.portfolio-tile--unfolded {
  animation: portfolio-tile-unfold 1s var(--ease-even) both;
}
@keyframes portfolio-tile-unfold {
  from {
    opacity: 0;
    transform: translateY(var(--space-md));
  }
}
.portfolio-grid--unfolding {
  overflow: hidden;
}
[data-body-video-play][hidden],
[data-portfolio-more][hidden],
[data-wedding-tile][hidden] {
  display: none;
}
/* The process line between two moments is dotted, three pixels of ink every nine, and a solid line draws over it as the page scrolls past each moment. Without the script, or with reduced motion, the solid line is drawn in full. */
.process-rail {
  position: relative;
  flex: 1;
  width: 1px;
  margin-top: var(--space-2xs);
  background: repeating-linear-gradient(
    to bottom,
    var(--color-ink) 0 3px,
    transparent 3px 9px
  );
}
.process-rail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-ink);
  transform-origin: top;
  transform: scaleY(var(--process-progress, 1));
}
/* The opening of the work-philosophy page plays the same video behind its text, blurred and slowly zooming, under a black fade that keeps the white text readable: from the top on a phone, from the left on a wide screen. */
.philosophy-opening__backdrop {
  filter: blur(24px);
  transform: scale(1.15);
  animation: philosophy-backdrop-zoom 30s ease-in-out infinite alternate;
}
@keyframes philosophy-backdrop-zoom {
  to {
    transform: scale(1.3);
  }
}
.philosophy-opening__fade {
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.8), rgb(0 0 0 / 0.4));
}
@media (min-width: 1024px) {
  .philosophy-opening__fade {
    background: linear-gradient(to right, rgb(0 0 0 / 0.8), transparent 75%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .philosophy-opening__backdrop {
    animation: none;
  }
}
/* A chapter's grey band ends halfway down its pair of photographs, so the photographs sit half inside it. */
.philosophy-chapter__band {
  --photograph-half: 134px;
  background: linear-gradient(
    to bottom,
    var(--color-surface) calc(100% - var(--photograph-half)),
    var(--color-white) calc(100% - var(--photograph-half))
  );
}
@media (min-width: 1024px) {
  .philosophy-chapter__band {
    --photograph-half: 304px;
  }
}
.contact-field {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--color-ink);
  border-radius: 0;
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.4;
  outline: none;
}
.contact-field::placeholder {
  color: var(--color-muted);
}
.contact-field:focus-visible {
  border-bottom-width: 2px;
}
.contact-field--boxed {
  border: 1px solid var(--color-ink);
}
.contact-field--boxed:focus-visible {
  outline: 1px solid var(--color-ink);
}
/* On a phone the author card moves to the end of the body; the side column it leaves empty must not keep its
   gap in the reading grid, or the body starts twice as far from the block above it. */
.article-side-column:not(:has(*)) {
  display: none;
}
@media (min-width: 1024px) {
  .article-side-column {
    position: sticky;
    top: var(
      --side-column-top,
      calc(var(--site-header-height) + var(--space-md))
    );
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
  }
}
.footer-links {
  padding: 0;
  margin: 0;
  list-style: none;
}
.footer-links li + li {
  margin-top: var(--space-xs);
}
.cookie-consent {
  position: fixed;
  z-index: var(--layer-panel);
  right: var(--space-sm);
  bottom: var(--space-sm);
  width: min(100% - 2 * var(--space-sm), 460px);
  padding: var(--space-md);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-default);
  box-shadow: 0 16px 40px rgba(46, 37, 33, 0.16);
}
.cookie-consent[hidden] {
  display: none;
}
.cookie-consent p {
  margin-top: 0;
  color: var(--color-muted);
  font-size: var(--font-size-ui);
}
.cookie-consent .button-row {
  margin-top: var(--space-sm);
}
@media (max-width: 1023px) {
  .nav-toggle,
  .nav-close {
    display: flex;
  }
  html.nav-open .floating-actions {
    visibility: hidden;
  }
  html.nav-open .site-header {
    z-index: var(--layer-menu);
  }
  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: var(--layer-overlay);
    background: color-mix(in srgb, var(--color-ink) 20%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--ease-site);
  }
  .nav-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  .nav-menu {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: var(--layer-panel);
    width: 40%;
    min-width: 280px;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-lg);
    padding: var(--space-sm) var(--space-md) var(--space-md);
    overflow-y: auto;
    background: var(--color-white);
    box-shadow: -8px 0 32px
      color-mix(in srgb, var(--color-ink) 15%, transparent);
    visibility: hidden;
    transform: translateX(100%);
    transition:
      transform 0.4s var(--ease-site),
      visibility 0s 0.4s;
  }
  .nav-menu.is-open {
    visibility: visible;
    transform: none;
    transition: transform 0.4s var(--ease-site);
  }
}
@media (max-width: 800px) {
  .floating-actions {
    left: 0;
    right: 0;
    bottom: 0;
    gap: 0;
    opacity: 1;
    transform: translateY(100%);
    pointer-events: auto;
    transition: transform 0.3s var(--ease-site);
  }
  .floating-actions.is-visible {
    transform: translateY(0);
  }
  .floating-actions > a {
    min-height: 56px;
    border-radius: 0;
    box-shadow: none;
  }
  .contact-action,
  .instagram-action {
    flex: 1 1 50%;
    padding: var(--space-sm) var(--space-md);
  }
}
/* The popup every dialog of the site shares (_inc/dialog.php). Tailwind's preflight is disabled, so the
   dialog keeps the browser's own box and it is reset here. The zoom from the control that opened it is
   animated by modal-dialog.js; the veil only needs `is-open`, added one frame after showModal() so its fade
   has a state to start from. A card taller than the screen scrolls inside the dialog while the page
   underneath stays still. The close button is centred on the card's top right corner, above the card, so
   the frame leaves room for the half of the button that sticks out, plus a small gap to the edge of a
   phone. A popup changes only its card's width and padding, and the wedding card adds its steps. */
html:has(.dialog[open]) {
  overflow: hidden;
}
.dialog {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dialog::backdrop {
  background: color-mix(in srgb, var(--color-ink) 72%, transparent);
  opacity: 0;
  transition: opacity 0.42s var(--ease-site);
}
.dialog.is-open::backdrop {
  opacity: 1;
}
.dialog__frame {
  --dialog-close-overhang: 24px;
  --dialog-edge: calc(var(--dialog-close-overhang) + var(--space-xs));
  position: relative;
  display: grid;
  grid-template-areas: "panel";
  align-content: start;
  justify-content: center;
  gap: var(--space-sm) var(--space-md);
  min-height: 100%;
  padding: var(--space-lg) var(--dialog-edge);
}
.dialog__panel {
  grid-area: panel;
  position: relative;
  width: calc(100vw - 2 * var(--dialog-edge));
  background: var(--color-white);
  transform-origin: top left;
}
.dialog__close {
  position: absolute;
  top: calc(-1 * var(--dialog-close-overhang));
  right: calc(-1 * var(--dialog-close-overhang));
  z-index: 1;
  border: 1px solid var(--color-line);
}
@media (min-width: 1024px) {
  .dialog__frame {
    align-content: center;
  }
}
.dialog--contact .dialog__panel {
  max-width: 813px;
  padding: var(--space-md);
}
@media (min-width: 1024px) {
  .dialog--contact .dialog__panel {
    padding: var(--space-lg);
  }
}
/* A sent enquiry puts this message where the form was, centred at the form's own height. */
.contact-form[hidden],
.contact-sent[hidden] {
  display: none;
}
.contact-sent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  text-align: center;
}
.contact-sent:focus {
  outline: none;
}
.contact-sent .ph {
  color: var(--color-ink);
  font-size: var(--icon-size-empty);
}
.dialog__close,
.dialog__step,
.video-review-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-ink);
  font-size: var(--icon-size-row);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-site);
}
.dialog__close:hover,
.dialog__step:hover,
.video-review-step:hover,
.video-review-step:focus-visible {
  background: var(--color-surface);
}
/* On a phone the review arrows are the round arrows of the wedding card, outlined in grey so they stand out from
   the white page, and centred on the edges of the video, half over it. */
.video-review-step {
  position: absolute;
  top: 50%;
  z-index: 2;
  border: 1px solid var(--color-line);
  transform: translate(-50%, -50%);
}
.video-review-step--previous {
  left: 0;
}
.video-review-step--next {
  left: 100%;
}
@media (min-width: 768px) {
  .video-review-step {
    display: none;
  }
}
.dialog--wedding .dialog__frame {
  --wedding-photograph-height: 316px;
}
.dialog--wedding .dialog__panel {
  max-width: 560px;
  touch-action: pan-y;
}
/* On a phone the arrows float at the middle of the screen over the card's edges, so a card of any height
   keeps them in reach without scrolling, and a tap where a hidden arrow was still lands on the card. */
.dialog__step {
  position: fixed;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
}
.dialog__step--previous {
  left: var(--space-xs);
}
.dialog__step--next {
  right: var(--space-xs);
}
.dialog__step[hidden] {
  display: inline-flex;
  visibility: hidden;
}
/* Every photograph of the look fills a 2:3 box from the centre, so a slightly narrower or wider one loses
   a thin edge instead of gaining a white band; a lone photograph on a phone takes the card's width at a
   fixed height. */
.wedding-card__photographs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-2xs);
}
.wedding-card__photograph {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}
.wedding-card__photographs--single .wedding-card__photograph {
  height: var(--wedding-photograph-height);
  aspect-ratio: auto;
}
/* A lone horizontal photograph is shown whole, at its own proportion, never cropped to a vertical box. */
.wedding-card__photographs--horizontal .wedding-card__photograph {
  height: auto;
}
@media (min-width: 1024px) {
  .dialog--wedding .dialog__frame {
    --wedding-photograph-height: min(
      540px,
      calc(100dvh - 400px),
      calc((100vw - 232px) / 2)
    );
    grid-template-columns: auto auto auto;
    grid-template-areas: "previous panel next";
    align-items: start;
    gap: var(--space-lg);
    padding: var(--space-lg) var(--space-md);
  }
  .dialog--wedding .dialog__panel {
    width: max-content;
    min-width: 720px;
    max-width: none;
  }
  .dialog__step {
    position: static;
    transform: none;
    margin-top: calc(var(--wedding-photograph-height) / 2 - 24px);
  }
  .dialog__step--previous {
    grid-area: previous;
  }
  .dialog__step--next {
    grid-area: next;
  }
  .wedding-card__photographs {
    display: flex;
    justify-content: center;
  }
  .wedding-card__photograph,
  .wedding-card__photographs--single .wedding-card__photograph {
    width: auto;
    height: var(--wedding-photograph-height);
    aspect-ratio: 2 / 3;
  }
  .wedding-card__photographs--horizontal .wedding-card__photograph {
    aspect-ratio: auto;
  }
  .wedding-card__text {
    width: 0;
    min-width: 100%;
  }
}
/* The answer page a form sent without JavaScript lands on. */
.sent-notice__message {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-ink);
  color: var(--color-white);
  font-size: var(--font-size-body);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--color-ink) 18%, transparent);
  animation: sent-notice-arrive 0.3s var(--ease-site);
}
.sent-notice__message .ph {
  font-size: var(--icon-size-row);
}
@keyframes sent-notice-arrive {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
.strip-arrow {
  cursor: pointer;
  transition: color 0.2s var(--ease-site);
}
.strip-arrow:disabled {
  color: var(--color-line);
  cursor: default;
}
.pswp__counter {
  display: none;
}
/* Wedding photographs are portrait and come small; at the full story width a lone one would be enlarged past its pixels. */
@media (min-width: 640px) {
  [data-wedding-body] > [data-image-block] {
    width: calc((100% - var(--space-md)) / 2);
    margin-inline: auto;
  }
}
@media (max-width: 1023px) {
  [aria-labelledby="home-portfolio-title"] figure img,
  [aria-labelledby="makeup-work-title"] figure img,
  [aria-labelledby="hair-work-title"] figure img,
  [aria-labelledby="contact-work-title"] figure img,
  [aria-labelledby="articles-preview-title"] article img,
  [aria-labelledby="related-articles-title"] article img,
  article[aria-labelledby="article-title"] > img {
    height: auto !important;
    object-fit: contain;
    background: var(--color-surface);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* The places of the travel-time map show their driving time when hovered or tapped (travel-map.js). */
[data-travel-map] [data-time] {
  cursor: pointer;
}

/* The driving time over the travel map: it fades in as it rises into place, glides from one place to the next
   and points at the marker with a small arrow. */
.travel-map-tooltip {
  position: absolute;
  margin: 0;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-default);
  background: var(--color-ink);
  color: var(--color-white);
  font-size: var(--font-size-caption);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - var(--space-2xs)));
  transition:
    opacity 0.3s var(--ease-site),
    transform 0.3s var(--ease-site);
}

.travel-map-tooltip[data-state="open"] {
  opacity: 1;
  transform: translate(-50%, calc(-100% - var(--space-sm)));
  transition:
    opacity 0.3s var(--ease-site),
    transform 0.3s var(--ease-site),
    left 0.3s var(--ease-site),
    top 0.3s var(--ease-site);
}

.travel-map-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border: 6px solid transparent;
  border-top-color: var(--color-ink);
  transform: translateX(-50%);
}

@media (prefers-reduced-motion: reduce) {
  .travel-map-tooltip,
  .travel-map-tooltip[data-state="open"] {
    transition: none;
  }
}