/* The type the owner supplied in assets/fonts: Cormorant Garamond headings over Spectral, the body
   face on Jordan's current site. These override the dashboard's typeface tokens in styles.css */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-normal-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-normal-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-italic-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-italic-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/spectral-normal-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/spectral-normal-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/spectral-normal-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/spectral-normal-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/spectral-italic-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/spectral-italic-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --film: #d9d3ce;
  --ink-soft: #6b6762;
  --accent-text: #6f645c;
  --measure: 34rem;
  --type-heading: "Cormorant Garamond", Georgia, "Times New Roman", Times, serif;
  --type: Spectral, Georgia, "Times New Roman", Times, serif;
  --heading-weight: 300;
}

/* Cormorant ships one weight, so headings never take a faked bold, and its open shapes want no
   negative tracking */

:is(h1, h2, h3, .wordmark, .packages td, .statement__figure) {
  font-synthesis-weight: none;
}

h1,
h2,
h3 {
  letter-spacing: 0;
  line-height: 1.08;
}

body {
  font-weight: 300;
}

strong,
b,
.action,
th {
  font-weight: 400;
}

/* Eyebrows read as small engraved labels */

.eyebrow,
.step__when {
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Small text in the accent hue takes a darker shade, so it reads on the paper */

.eyebrow,
.card a,
.service h3,
[data-process="timeline"] .step__when {
  color: var(--accent-text);
}

.hero__more {
  margin: var(--gap) 0 0;
  font-size: 0.9375rem;
}

[data-hero="full-bleed"] .hero .hero__more a {
  color: var(--ink);
  font-weight: 600;
}

.answers p,
.answers h2,
.answers h3 {
  max-width: var(--measure);
}

/* The logo sits in the header and footer as supplied, beside the name in words */

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--gap) * 0.5);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0;
}

.wordmark img {
  width: 3.25rem;
  height: 3.25rem;
}

/* The logo file carries its own cream ground, which multiply lets the surface behind show through */

.wordmark img,
.nap .logo {
  mix-blend-mode: multiply;
}

@media (max-width: 30rem) {
  .wordmark {
    white-space: normal;
    font-size: 1rem;
    line-height: 1.15;
  }

  .wordmark span {
    max-width: 11ch;
  }
}

.nap .logo {
  width: 9rem;
  height: 9rem;
  margin: 0 0 var(--step);
}

/* The signature: a film edge, a hairline broken by a row of small rounded sprocket holes */

.film {
  display: block;
  height: 12px;
  background: var(--film);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='12'><rect x='0' y='5.5' width='8' height='1' fill='black'/><rect x='18' y='5.5' width='8' height='1' fill='black'/><rect x='9' y='1.5' width='8' height='9' rx='2.5' fill='none' stroke='black' stroke-width='1.2'/></svg>") repeat-x left center / 26px 12px;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='12'><rect x='0' y='5.5' width='8' height='1' fill='black'/><rect x='18' y='5.5' width='8' height='1' fill='black'/><rect x='9' y='1.5' width='8' height='9' rx='2.5' fill='none' stroke='black' stroke-width='1.2'/></svg>") repeat-x left center / 26px 12px;
}

main > .film,
body > .film {
  margin: 0;
}

.night .film,
.film--dark {
  background: color-mix(in srgb, var(--film) 55%, transparent);
}

/* Hero: dark words on the cream paper, beside a photograph cropped to the mother and her newborn */

[data-hero="full-bleed"] .hero {
  --star-on: var(--accent);
  --star-off: color-mix(in srgb, var(--ink) 20%, var(--paper));
  background: var(--paper);
  color: var(--ink);
}

html[data-hero="full-bleed"] .hero :is(h1, .hero__proof strong) {
  color: var(--ink);
}

html[data-hero="full-bleed"] .hero .eyebrow {
  color: var(--accent-text);
}

html[data-hero="full-bleed"] .hero :is(.lede, .hero__proof) {
  color: var(--ink-soft);
}

[data-hero="full-bleed"] .hero__figure {
  background: var(--paper);
}

html[data-hero="full-bleed"] .hero .action--quiet {
  color: var(--ink);
  border-color: var(--accent);
}

html[data-hero="full-bleed"] .hero .action--quiet:hover {
  background: var(--accent-quiet);
  border-color: var(--accent-hover);
}

/* On a phone the hero's two buttons share one row, so both sit above the call bar */

@media (max-width: 47.99rem) {
  html .hero .actions {
    flex-wrap: nowrap;
    gap: var(--step);
  }

  .hero .actions .action {
    flex: 1 1 0;
    padding: 0.55rem 0.7rem;
    font-size: 0.95rem;
    line-height: 1.25;
    text-align: center;
  }
}

[data-hero="full-bleed"] .hero__figure::after {
  background: linear-gradient(to top, var(--paper) 0%, transparent 28%);
}

.hero__figure img {
  object-position: 38% 50%;
}

/* On a wide screen the upright photograph sits in the right of the frame, so the mother clears the
   headline, and its left edge fades into the paper behind the words */

@media (min-width: 60rem) {
  [data-hero="full-bleed"] .hero__figure img {
    width: 58%;
    margin-left: auto;
    object-position: 26% 50%;
  }

  [data-hero="full-bleed"] .hero__figure::after {
    background:
      linear-gradient(
        to right,
        var(--paper) 42%,
        color-mix(in srgb, var(--paper) 60%, transparent) 52%,
        transparent 70%
      ),
      linear-gradient(to top, var(--paper) 0%, transparent 30%);
  }
}

@media (max-width: 47.99rem) {
  .hero {
    padding-top: var(--gap-wide);
    padding-bottom: var(--gap-wide);
  }

  /* On a phone the photograph comes first, full width, and the words follow on the paper */

  [data-hero="full-bleed"] .hero {
    min-height: 0;
    padding-top: 0;
  }

  /* The photograph takes whatever height the screen has left once the words and the button have
     theirs, so the button sits above the call bar on a short phone and a tall one alike. The price
     link and the review row after the button are the tail allowed past the first screen */

  [data-hero="full-bleed"] .hero__grid {
    --nav-height: 5.625rem;
    --hero-tail: 8.25rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: calc(100svh - var(--nav-height) - var(--callbar) + var(--hero-tail));
  }

  [data-hero="full-bleed"] .hero__grid > div {
    display: contents;
  }

  [data-hero="full-bleed"] .hero__figure {
    position: relative;
    inset: auto;
    z-index: 0;
    order: -1;
    flex: 1 1 0;
    min-height: 26svh;
    height: auto;
    margin: 0 calc(var(--gutter) * -1) var(--gap);
  }

  @media (max-height: 760px) {
    [data-hero="full-bleed"] .hero__figure {
      min-height: 20svh;
      margin-bottom: var(--step);
    }

    html .hero :is(.eyebrow, h1) {
      margin-bottom: calc(var(--step) * 0.6);
    }

    html .hero .lede {
      font-size: 0.95rem;
      line-height: 1.5;
    }

    html .hero .actions {
      margin-top: var(--step);
    }
  }

  [data-hero="full-bleed"] .hero__figure img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-position: 40% 45%;
  }

  .hero h1 {
    font-size: clamp(1.9rem, min(10.2vw, 5.2svh), 2.6rem);
    margin-bottom: var(--step);
  }

  .hero .eyebrow {
    margin-bottom: var(--step);
  }

  /* On a phone the Meza photograph shows whole at its own 3:2 across the top of the section, so the
     whole family stays in frame, and the words start below it on the paper */

  main > section.statement {
    min-height: 0;
    padding-top: calc(100vw * 2 / 3 + var(--gap-wide));
  }

  main > section.statement .statement__image {
    inset: 0 0 auto;
    height: auto;
    aspect-ratio: 3 / 2;
    object-position: 50% 50%;
  }

  .statement::before {
    content: none;
  }

  .hero .lede {
    font-size: 1.05rem;
  }

  .hero .actions {
    margin-top: var(--gap);
    gap: var(--step);
  }

  .hero__proof {
    margin-top: var(--gap);
  }

  .hero__proof .divider {
    display: none;
  }

  .hero__proof > span:last-child {
    flex-basis: 100%;
  }

  /* About: Jordan's words and the action come before her photograph on a phone */

  .about-open .portrait__photo {
    order: 2;
  }

  .about-open .portrait__photo img {
    aspect-ratio: 4 / 5;
    object-position: 50% 40%;
  }

  .facts tbody tr {
    display: grid;
  }

  .facts tbody th {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .facts td {
    overflow-wrap: anywhere;
  }

  .hours-table :is(th, td) {
    padding-inline: calc(var(--gap) * 0.6);
    font-size: 0.9375rem;
  }
}

/* The case: the Meza mother with her twins, and the line the family wrote. The photograph drifts
   slower than the page as it scrolls past, so the quote seems to float over it. The words sit on a
   cream wash at the right, clear of the mother */

main > section.statement {
  min-height: clamp(30rem, 88vh, 52rem);
  view-timeline-name: --statement;
  background: var(--paper);
  color: var(--ink);
}

.statement__image {
  object-position: 50% 55%;
}

.statement h2 {
  color: var(--ink);
}

.statement__body p {
  color: var(--ink-soft);
}

@media (min-width: 60rem) {
  .statement__body {
    justify-self: end;
    max-width: 32rem;
  }

  .statement__image {
    object-position: 75% 55%;
  }

  .statement::before {
    background:
      linear-gradient(
        to left,
        var(--paper) 0%,
        var(--paper) 34%,
        color-mix(in srgb, var(--paper) 70%, transparent) 46%,
        transparent 60%
      ),
      linear-gradient(to top, color-mix(in srgb, var(--paper) 80%, transparent) 0%, transparent 35%);
  }
}

.statement .display {
  max-width: 18ch;
  margin-bottom: var(--gap);
  font-size: clamp(2.6rem, 5.2vw, 4.4rem);
  font-style: italic;
  line-height: 1.02;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html:not([data-motion="none"]) .statement__image {
      inset: -30% 0;
      height: 160%;
      animation: drift linear both;
      animation-timeline: --statement;
      animation-range: cover;
    }
  }
}

@keyframes drift {
  from {
    transform: translateY(-18%);
  }

  to {
    transform: translateY(18%);
  }
}

/* On a phone the photograph sits whole above the words, so it holds still rather than drift out of
   its frame */

@media (max-width: 47.99rem) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html:not([data-motion="none"]) .statement__image {
      inset: 0 0 auto;
      height: auto;
      animation: none;
    }
  }
}

/* The gallery photographs warm toward full size under the pointer */

.gallery img {
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1), filter 1.2s ease;
  filter: saturate(0.9);
}

.gallery figure:hover img {
  transform: scale(1.045);
  filter: saturate(1);
}

.gallery figcaption {
  font-family: var(--type-heading);
  line-height: 1.3;
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 300;
}

/* Jordan's portrait sits in an offset frame, like a print laid over its mat */

.meet .portrait__photo {
  position: relative;
  isolation: isolate;
  overflow: visible;
  margin-right: 1.25rem;
  margin-bottom: 1.25rem;
}

.meet .portrait__photo::before {
  content: "";
  position: absolute;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  z-index: -1;
  border: 1px solid var(--accent);
}

.meet blockquote p {
  font-family: var(--type-heading);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-style: italic;
  line-height: 1.3;
}

.statement__body .statement__faith {
  margin-top: var(--gap-wide);
  padding-top: var(--gap);
  border-top: 1px solid var(--accent-line);
  font-size: 1rem;
}

/* Service rows carry their link as a quiet line */

.card h3 {
  font-size: calc(1rem * pow(var(--scale), 1.6));
}

.card .price {
  color: var(--ink);
  font-weight: 600;
}

/* The gallery sits on the cream surface, and each caption is a small cream label on its photograph */

main > section.work-gallery {
  background: var(--paper-soft);
  color: var(--ink);
}

.work-gallery .section-head p {
  color: var(--ink-soft);
}

.work-gallery h2 {
  color: var(--ink);
}

.work-gallery .gallery figure {
  background: var(--paper);
}

.work-gallery .gallery figcaption {
  inset: auto auto var(--step) var(--step);
  padding: 0.3rem 0.85rem;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  color: var(--ink);
}

/* The closing band sits on white with the taupe button, so the page ends light */

main > section.band {
  background: #ffffff;
  color: var(--ink);
  border-top: 1px solid var(--hairline);
}

.band h2 {
  color: var(--ink);
}

.band p {
  color: var(--ink-soft);
}

.band .action {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.band .action:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-ink);
}

/* Each strip quote prints whole, so no reviewer's words are cut */

.strip__card blockquote {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}

/* Proof names the platform beside the date */

.attribution .platform {
  font-weight: 400;
}

.attribution .where + .platform::before,
.attribution .platform + .when::before {
  content: ", ";
}

.strip .attribution .where + .platform::before {
  content: ", ";
}

/* The photographer, on the soft surface */

main > section.meet {
  background: var(--paper-soft);
}

.meet h2 {
  margin-bottom: var(--gap);
}

/* Prices: the collection, what it adds, and where it starts */

.packages th small {
  display: block;
  margin-top: calc(var(--step) * 0.5);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--ink-soft);
}

.packages td {
  white-space: nowrap;
  font-weight: 650;
}

/* On a phone a three column price table stacks: name and price on one line, the details under them */

@media (max-width: 47.99rem) {
  .pricing-table thead {
    display: none;
  }

  .pricing-table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    border-bottom: 1px solid var(--hairline);
  }

  .pricing-table tbody tr:last-child {
    border-bottom: 0;
  }

  .pricing-table tbody :is(th, td) {
    border-bottom: 0;
  }

  .pricing-table tbody td:first-of-type {
    font-weight: 650;
  }

  .pricing-table tbody td:last-child {
    grid-column: 1 / -1;
    padding-top: 0;
    color: var(--ink-soft);
  }
}

main > section.area {
  background: var(--sunken);
}

.places li a {
  color: inherit;
  text-decoration: none;
}

/* Inner pages open on a band: words beside a photograph, then the film edge */

.intro--media {
  display: grid;
  gap: var(--gap-wide);
  align-items: center;
}

.intro__figure {
  margin: 0;
  overflow: hidden;
  background: var(--sunken);
  box-shadow: var(--shadow);
}

.intro__figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.intro .area {
  font-size: 1rem;
  color: var(--ink);
}

.intro .actions {
  margin-top: var(--gap);
}

@media (min-width: 60rem) {
  .intro--media {
    grid-template-columns: 1.15fr 0.85fr;
    gap: calc(var(--gap-wide) * 2);
  }
}

/* The about page opens with Jordan's portrait */

.about-open .portrait blockquote {
  font-size: inherit;
}

.about-open h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.2rem);
}

.about-open p {
  color: var(--ink-soft);
}

main > section.facts-block {
  padding-top: calc(var(--run) * 0.5);
  padding-bottom: calc(var(--run) * 0.5);
}

.facts-block table {
  max-width: 46rem;
}

.facts-block ul {
  max-width: var(--measure);
  padding-left: calc(var(--gap) * 1.1);
  color: var(--ink-soft);
}

/* Each service on /services/ is led by its photograph */

.service__media {
  width: 100%;
  max-width: 46rem;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-bottom: var(--gap-wide);
  box-shadow: var(--shadow);
}

.service .note a,
.service > p a {
  color: var(--ink);
  font-weight: 600;
}

/* On a wide screen the photograph and the words sit side by side, alternating sides down the page,
   and a price table runs full width beneath them */

@media (min-width: 60rem) {
  main > section.service:has(> .service__media) {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    column-gap: calc(var(--gap-wide) * 1.5);
    align-items: center;
  }

  main > section.service > .service__media {
    grid-row: 1;
    grid-column: 1;
    aspect-ratio: 4 / 5;
    margin-bottom: 0;
  }

  main > section.service > .service__text {
    grid-row: 1;
    grid-column: 2;
  }

  main > section.service:has(> .service__media) > :not(.service__media, .service__text) {
    grid-column: 1 / -1;
  }

  main > section.service > h3:not(.service__text h3) {
    margin-top: var(--gap-wide);
  }

  main > section.service--flip {
    grid-template-columns: 1.1fr 0.9fr;
  }

  main > section.service--flip > .service__media {
    grid-column: 2;
  }

  main > section.service--flip > .service__text {
    grid-column: 1;
  }
}

main > section.hours {
  background: var(--paper-soft);
}

@media (max-width: 47.99rem) {
  .service h2 {
    font-size: 1.6rem;
  }

  #birth-photography .service__media {
    object-position: 50% 85%;
  }

  .intro h1 {
    font-size: 1.75rem;
  }
}

/* Review quotes on service pages sit on the soft surface, and inner page closing bands share the
   left edge */

main > section.service-quote {
  background: var(--paper-soft);
}

.page-quote blockquote p,
.promise dd {
  max-width: var(--measure);
}

main > section.next {
  text-align: left;
}

.next p {
  margin-inline: 0;
}

.next .actions {
  justify-content: flex-start;
}

/* The FAQ groups its questions by topic */

main > section.topic {
  padding-top: calc(var(--run) * 0.5);
  padding-bottom: calc(var(--run) * 0.5);
}

.topic .eyebrow {
  margin-bottom: var(--gap);
}

.topic .answers h2 {
  font-size: calc(1rem * pow(var(--scale), 1.2));
  margin-bottom: calc(var(--step) * 0.75);
}

.topic .answers a,
.answers a {
  color: var(--ink);
  font-weight: 600;
}

/* A service page's own questions */

main > section.service-questions .answers h2 {
  font-size: calc(1rem * pow(var(--scale), 1.2));
  margin-bottom: calc(var(--step) * 0.75);
}

.includes {
  max-width: var(--measure);
  padding-left: calc(var(--gap) * 1.1);
  color: var(--ink-soft);
}

.includes li {
  margin-bottom: calc(var(--step) * 0.6);
}

main > section.promise {
  background: var(--paper-soft);
}

.promise blockquote {
  margin: 0 0 var(--gap-wide);
  padding-left: calc(var(--gap) * 1.25);
  border-left: 3px solid var(--accent);
  font-family: var(--type-heading);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  line-height: 1.4;
  max-width: 46rem;
}

.promise blockquote p {
  max-width: none;
}

.promise dl {
  display: grid;
  gap: var(--gap);
  max-width: 46rem;
  margin: 0;
}

.promise dt {
  font-weight: 650;
}

.promise dd {
  margin: 0;
  color: var(--ink-soft);
}

.page-quote {
  max-width: 46rem;
}

/* Closing bands on inner pages */

.next .action {
  margin-top: var(--step);
}

footer .footer-legal {
  max-width: none;
  margin-inline: 0;
}

footer .footer-legal a {
  color: var(--ink-soft);
}

/* Instagram shows its glyph beside the handle */

.social {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.social svg {
  flex: none;
}

/* Each photograph names its own focus point and its own soft colors. The focus decides what any crop
   keeps, and the colors fill the frame until the photograph arrives */

:is(.card__media, .gallery img, .service__media, .intro__figure img, .portrait__photo img) {
  object-position: var(--focus, 50% 50%);
}

main img {
  background-image: var(--tint, none);
}

/* On a phone a tall photograph stays tall and a wide one stays wide, so a crop never trades the
   people for the room around them. Gallery captions sit under the photograph, clear of faces */

@media (max-width: 47.99rem) {
  [data-services="rows"] .card__media:not(.wide),
  .gallery img:not(.wide),
  .service__media {
    aspect-ratio: 4 / 5;
  }

  [data-services="rows"] .card__media.wide,
  .gallery img.wide {
    aspect-ratio: 3 / 2;
  }

  .gallery figure :is(a, img) {
    height: auto;
  }

  .work-gallery .gallery figcaption {
    position: static;
    padding: var(--step) 0 0;
    background: none;
  }
}

/* On a wider screen a tall service card photograph sits square, so it keeps two thirds of its
   height rather than half */

@media (min-width: 48rem) {
  [data-services="rows"] .card__media:not(.wide) {
    aspect-ratio: 1;
  }
}

/* Each photograph develops as it scrolls in, rising out of the cream paper the way a print comes up
   in the tray, and it rests finished */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .gallery figure {
      overflow: clip;
    }

    html:not([data-motion="none"]) :is(.gallery img, .card__media, .service__media) {
      animation: develop linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 45%;
    }

    html:not([data-motion="none"]) .gallery img {
      animation-name: develop-settle;
    }
  }
}

@keyframes develop {
  from {
    opacity: 0.15;
    filter: sepia(0.5) contrast(0.6) brightness(1.2);
  }

  35% {
    opacity: 0.6;
  }
}

@keyframes develop-settle {
  from {
    opacity: 0.15;
    filter: sepia(0.5) contrast(0.6) brightness(1.2);
    scale: 1.08;
  }

  35% {
    opacity: 0.6;
  }
}

/* The paper grain the design names, carried by every surface rather than hidden under them */

:root {
  --texture: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.33  0 0 0 0 0.29  0 0 0 0 0.25  0 0 0 1.6 -0.35'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.2'/></svg>");
}

html[data-texture="paper"] body {
  background-image: none;
}

html[data-texture="paper"] :is(main > section, nav, footer, .hero) {
  background-image: var(--texture);
}

/* The headline is struck into the paper word by word as the page opens, then rests with a faint
   letterpress edge. After a held breath, the answer lands slower and harder */

.engraved {
  text-shadow: 0 1px 0 color-mix(in srgb, #ffffff 75%, transparent);
}

.engraved span {
  display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="none"]) .engraved span {
    animation: engrave 0.9s cubic-bezier(0.3, 0, 0.2, 1) both;
    animation-delay: calc(0.2s + var(--i) * 0.1s);
  }

  html:not([data-motion="none"]) .engraved .then {
    animation-name: engrave-hard;
    animation-duration: 0.9s;
    animation-delay: calc(1.6s + var(--i) * 0.12s);
  }
}

@keyframes engrave {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(-0.12em) scale(1.5);
    text-shadow: 0 0.35em 0.5em color-mix(in srgb, var(--ink) 30%, transparent);
  }

  55% {
    opacity: 1;
    filter: blur(0);
    transform: scale(0.96);
    text-shadow: 0 -1px 0 color-mix(in srgb, var(--ink) 35%, transparent);
  }
}

@keyframes engrave-hard {
  from {
    opacity: 0;
    filter: blur(14px);
    transform: translateY(-0.18em) scale(1.8);
    text-shadow: 0 0.45em 0.6em color-mix(in srgb, var(--ink) 35%, transparent);
  }

  50% {
    opacity: 1;
    filter: blur(0);
    transform: scale(0.93);
    text-shadow: 0 -1px 0 color-mix(in srgb, var(--ink) 45%, transparent);
  }

  72% {
    transform: scale(1.015);
  }
}

/* Film edges between the homepage's chapters */

main > .film {
  margin-block: 0;
}

/* A gallery photograph opens whole, on a dark ground, growing out of its place on the page */

.gallery a {
  display: block;
  height: 100%;
  cursor: zoom-in;
}

html:has(.viewer[open]) {
  overflow: hidden;
}

.viewer {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--night);
  color: var(--paper);
}

.viewer[open] {
  display: grid;
  place-items: center;
}

.viewer::backdrop {
  background: transparent;
}

.viewer figure {
  display: grid;
  justify-items: center;
  gap: var(--step);
  margin: 0;
}

.viewer img {
  width: auto;
  max-width: 94vw;
  max-height: 84dvh;
  object-fit: contain;
}

.viewer figcaption {
  font-family: var(--type-heading);
  font-size: 1.25rem;
  font-style: italic;
}

.viewer button {
  position: absolute;
  min-width: 44px;
  min-height: 44px;
  padding: var(--step);
  border: 0;
  background: none;
  color: var(--paper);
  font: inherit;
  font-size: 2.25rem;
  line-height: 1;
  cursor: pointer;
}

.viewer__close {
  top: var(--step);
  right: var(--step);
}

.viewer__prev,
.viewer__next {
  top: 50%;
  translate: 0 -50%;
}

.viewer__prev {
  left: 0;
}

.viewer__next {
  right: 0;
}

::view-transition-group(photo) {
  animation-duration: 0.45s;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}