:root {
  --paper: #F6F1E7;
  --paper-warm: #F9EADB;
  --mint: #D9EFE2;
  --mint-deep: #BFDCCB;
  --ink: #2A211C;
  --ink-soft: rgba(42, 33, 28, .76);
  --salmon: #E8A08C;
  --salmon-deep: #D87862;
  --lavender: #B9AEDF;
  --lavender-deep: #9183C9;
  --cream: #FFF7D8;
  --oxide: #7B3B32;

  --display: "Lora", Georgia, serif;
  --body: "Public Sans", Arial, sans-serif;
  --mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --edge-left: clamp(1rem, 4.2vw, 5.8rem);
  --edge-right: clamp(.85rem, 2.5vw, 3.2rem);
  --gutter: clamp(1rem, 2.2vw, 2.2rem);
  --scene-gap: clamp(3.2rem, 8.5vw, 9.5rem);
  --hair: 1.5px;
  --rule: 2px;

  --radius-plaque: 1.15rem 1.65rem 1rem 1.45rem;
  --radius-small: .62rem .9rem .55rem .82rem;

  --slow: cubic-bezier(.16, 1, .3, 1);
  --cut: cubic-bezier(.76, 0, .24, 1);
  --snap: cubic-bezier(.33, 1.28, .46, 1);
}

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

html {
  min-height: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1.5rem;
  background: var(--paper);
  color: var(--ink);
  font-kerning: normal;
  text-rendering: geometricPrecision;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 6% 9%, rgba(232, 160, 140, .3) 0 1px, transparent 1.4px),
    radial-gradient(circle at 82% 12%, rgba(185, 174, 223, .3) 0 1px, transparent 1.45px),
    radial-gradient(circle at 37% 88%, rgba(217, 239, 226, .65) 0 2px, transparent 2.35px),
    linear-gradient(105deg, var(--paper) 0%, var(--paper-warm) 46%, #F4EFE4 68%, var(--paper) 100%);
  font-family: var(--body);
  font-size: clamp(1rem, .94rem + .28vw, 1.18rem);
  font-style: italic;
  line-height: 1.55;
  letter-spacing: -.012em;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: .23;
  mix-blend-mode: multiply;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(42, 33, 28, .18) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(91deg, transparent 0 7px, rgba(123, 59, 50, .055) 7px 8px),
    linear-gradient(115deg, transparent 0 68%, rgba(185, 174, 223, .13) 68% 69%, transparent 69%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 35;
  pointer-events: none;
  opacity: .08;
  mix-blend-mode: multiply;
  background:
    linear-gradient(112deg, transparent 0 21%, rgba(232, 160, 140, .5) 21% 32%, transparent 32% 61%, rgba(185, 174, 223, .48) 61% 70%, transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(42, 33, 28, .06) 31px 32px);
}

::selection {
  color: var(--cream);
  background: var(--oxide);
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration-color: currentColor;
  text-decoration-thickness: .08em;
  text-underline-offset: .22em;
}

a:hover {
  text-decoration-thickness: .13em;
}

button,
input,
textarea {
  font: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--oxide);
  outline-offset: 5px;
}

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 100;
  transform: translateY(-180%);
  padding: .72rem .95rem .68rem;
  border: 2px solid var(--cream);
  border-radius: var(--radius-small);
  background: var(--ink);
  color: var(--cream);
  box-shadow: 5px 5px 0 rgba(123, 59, 50, .55);
  font-family: var(--mono);
  font-size: .78rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .32s var(--cut);
}

.skip-link:focus {
  transform: translateY(0);
}

/* threshold */

.site-threshold {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(.75rem, 1.6vw, 1.25rem);
  padding: clamp(.8rem, 2.2vw, 1.65rem) var(--edge-right) 0 var(--edge-left);
}

.site-threshold::before {
  content: "";
  position: absolute;
  top: clamp(.65rem, 1.6vw, 1.25rem);
  left: 0;
  width: min(66vw, 42rem);
  height: clamp(1.35rem, 2.2vw, 2rem);
  z-index: -1;
  border-block: var(--hair) solid rgba(42, 33, 28, .72);
  background:
    repeating-linear-gradient(90deg, rgba(42, 33, 28, .12) 0 2px, transparent 2px 9px),
    linear-gradient(90deg, var(--lavender), rgba(185, 174, 223, .05));
  clip-path: polygon(0 0, 95% 0, 100% 50%, 95% 100%, 0 100%);
  transform: rotate(-.7deg);
}

.site-threshold::after {
  content: "";
  width: min(78vw, 52rem);
  height: .68rem;
  justify-self: start;
  border: var(--hair) solid rgba(42, 33, 28, .85);
  border-left-width: 0;
  background:
    repeating-linear-gradient(90deg, rgba(42, 33, 28, .13) 0 2px, transparent 2px 8px),
    var(--salmon);
  opacity: .92;
  transform: rotate(-1.15deg);
  transform-origin: left center;
}

.brand-mark {
  justify-self: start;
  display: grid;
  grid-template-columns: clamp(3.15rem, 7vw, 5.8rem) auto;
  align-items: center;
  gap: clamp(.65rem, 1.4vw, 1rem);
  width: fit-content;
  padding: .25rem .5rem .25rem .25rem;
  border-radius: 1rem;
  text-decoration: none;
}

.brand-mark img {
  width: clamp(3.15rem, 7vw, 5.8rem);
  aspect-ratio: 1;
  object-fit: contain;
  filter: contrast(1.08) saturate(.92);
}

.brand-mark span,
.footer-identity p {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.9vw, 3.7rem);
  font-style: italic;
  font-weight: 700;
  line-height: .86;
  letter-spacing: -.062em;
  text-wrap: balance;
}

.threshold-docket {
  justify-self: start;
  display: grid;
  gap: .1rem;
  max-width: 35rem;
  padding: .48rem .68rem .54rem;
  border: var(--hair) solid rgba(42, 33, 28, .8);
  border-left: .55rem solid var(--salmon);
  background:
    linear-gradient(90deg, rgba(255, 247, 216, .96), rgba(255, 247, 216, .62)),
    repeating-linear-gradient(90deg, rgba(42, 33, 28, .08) 0 1px, transparent 1px 7px);
  box-shadow: 5px 5px 0 rgba(185, 174, 223, .48);
  font-family: var(--mono);
  font-size: clamp(.7rem, .66rem + .22vw, .9rem);
  font-style: normal;
  font-weight: 500;
  letter-spacing: .055em;
  line-height: 1.35;
  text-transform: uppercase;
  transform: rotate(.35deg);
}

.threshold-docket a {
  width: fit-content;
  color: var(--oxide);
  font-weight: 700;
  text-decoration: none;
}

/* global flow */

.legal-liturgy {
  display: grid;
  gap: var(--scene-gap);
  padding-block: clamp(1.2rem, 4vw, 3.6rem) 0;
}

.scene {
  position: relative;
}

.opening-rite {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 3vw, 2.6rem);
  padding: clamp(1rem, 2vw, 2rem) var(--edge-right) 0 var(--edge-left);
}

.ritual-calendar {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(.8rem, 2vw, 1.2rem);
  max-width: 38rem;
  padding-left: .25rem;
}

.ritual-calendar::before {
  content: "";
  position: absolute;
  left: -.35rem;
  top: .15rem;
  bottom: .15rem;
  width: .26rem;
  background:
    repeating-linear-gradient(0deg, rgba(42, 33, 28, .22) 0 2px, transparent 2px 7px),
    var(--lavender);
  transform: rotate(.6deg);
}

.ritual-calendar p {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.25rem, 4.2vw, 2.6rem);
  font-style: italic;
  font-weight: 700;
  line-height: .86;
  letter-spacing: -.055em;
}

.ritual-calendar ol {
  display: flex;
  flex-wrap: wrap;
  gap: .38rem .48rem;
  margin: .05rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: ritual;
}

.ritual-calendar li {
  counter-increment: ritual;
}

.ritual-calendar a {
  position: relative;
  display: inline-block;
  padding: .35rem .5rem .31rem;
  border: var(--hair) solid rgba(42, 33, 28, .68);
  border-radius: .35rem .55rem .32rem .5rem;
  background:
    linear-gradient(135deg, rgba(255, 247, 216, .65), transparent 60%),
    rgba(217, 239, 226, .72);
  font-family: var(--mono);
  font-size: .7rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .07em;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    transform .32s var(--slow),
    background-color .32s var(--slow),
    box-shadow .32s var(--slow);
}

.ritual-calendar a::before {
  content: "0" counter(ritual) " ";
  color: var(--oxide);
}

.ritual-calendar a::after {
  content: "";
  position: absolute;
  right: -.18rem;
  bottom: -.18rem;
  width: 42%;
  height: 42%;
  background: var(--salmon);
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  opacity: .7;
  mix-blend-mode: multiply;
}

.ritual-calendar a:hover {
  background-color: var(--cream);
  box-shadow: 3px 3px 0 rgba(42, 33, 28, .22);
  transform: translateY(-2px) rotate(-.8deg);
}

/* enamel primitive */

.enamel-plaque {
  position: relative;
  isolation: isolate;
  border: 2px solid var(--ink);
  border-radius: var(--radius-plaque);
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .86) 0 1px, transparent 1.6px),
    radial-gradient(circle at 82% 78%, rgba(123, 59, 50, .17) 0 1px, transparent 1.5px),
    linear-gradient(135deg, rgba(255, 247, 216, .42), transparent 32%),
    var(--mint);
  box-shadow: 9px 11px 0 rgba(42, 33, 28, .1);
}

.enamel-plaque::before,
.enamel-plaque::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
}

.enamel-plaque::before {
  inset: .48rem .58rem .66rem .42rem;
  border: 2px solid var(--salmon);
  transform: rotate(.32deg);
}

.enamel-plaque::after {
  inset: .88rem .82rem .82rem .96rem;
  border: 2px solid var(--lavender);
  transform: rotate(-.23deg);
}

.enamel-plaque > * {
  position: relative;
  z-index: 2;
}

/* hero */

.hero-plaque {
  display: grid;
  gap: clamp(1.2rem, 3vw, 2.8rem);
  min-height: clamp(38rem, 68vw, 54rem);
  padding:
    clamp(1.55rem, 5vw, 5.4rem)
    clamp(3.4rem, 5vw, 5.2rem)
    clamp(1.7rem, 4.2vw, 4.2rem)
    clamp(1.25rem, 4.4vw, 5rem);
  overflow: hidden;
  transform: rotate(-1.05deg);
  background:
    linear-gradient(128deg, transparent 0 51%, rgba(185, 174, 223, .5) 51% 52.5%, transparent 52.5%),
    linear-gradient(132deg, transparent 0 58%, rgba(232, 160, 140, .92) 58% 79%, transparent 79%),
    repeating-linear-gradient(91deg, rgba(42, 33, 28, .055) 0 1px, transparent 1px 8px),
    radial-gradient(circle at 16% 16%, rgba(255, 255, 255, .72) 0 1px, transparent 1.55px),
    var(--mint);
  box-shadow:
    13px 15px 0 rgba(123, 59, 50, .16),
    -5px 6px 0 rgba(185, 174, 223, .24);
}

.hero-plaque .hero-copy {
  max-width: min(100%, 61rem);
}

.micro-chant,
.matter-code,
.arrival-plaque p,
.footer-motif {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(.68rem, .66rem + .2vw, .88rem);
  font-style: normal;
  font-weight: 700;
  letter-spacing: .11em;
  line-height: 1.25;
  text-transform: uppercase;
}

.micro-chant {
  position: relative;
  width: fit-content;
  padding: .38rem .58rem .34rem;
  border: var(--hair) solid var(--ink);
  border-radius: .34rem .5rem .3rem .45rem;
  background:
    linear-gradient(112deg, var(--cream) 0 70%, rgba(232, 160, 140, .72) 70% 100%);
  box-shadow: 3px 3px 0 rgba(42, 33, 28, .18);
  color: var(--oxide);
  transform: rotate(.75deg);
}

h1,
h2,
h3 {
  color: var(--ink);
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  text-wrap: balance;
}

h1 {
  max-width: 11.4ch;
  margin: clamp(1.05rem, 2.1vw, 2rem) 0 0;
  font-size: clamp(3.25rem, 13vw, 12.6rem);
  line-height: .78;
  letter-spacing: -.092em;
  font-feature-settings: "liga" 1, "kern" 1;
}

.hero-sub {
  max-width: 44rem;
  margin: clamp(1.25rem, 3vw, 2.6rem) 0 0;
  padding: .2rem 0 .3rem clamp(.9rem, 2vw, 1.55rem);
  border-left: clamp(.48rem, 1vw, .82rem) solid var(--lavender);
  color: rgba(42, 33, 28, .9);
  font-family: var(--display);
  font-size: clamp(1.13rem, 1.55vw, 1.62rem);
  font-style: italic;
  line-height: 1.32;
  letter-spacing: -.025em;
}

.seal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .85rem .95rem;
  margin-top: clamp(1.45rem, 3vw, 2.65rem);
}

.seal-cta {
  --seal-bg: var(--cream);
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-items: center;
  min-height: 3.15rem;
  padding: .9rem 1.16rem .78rem;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: .72rem .98rem .62rem 1rem;
  background:
    radial-gradient(ellipse at 22% 12%, rgba(255, 255, 255, .9) 0 15%, transparent 16%),
    repeating-linear-gradient(93deg, rgba(42, 33, 28, .085) 0 1px, transparent 1px 7px),
    var(--seal-bg);
  box-shadow: 4px 5px 0 rgba(42, 33, 28, .92);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--mono);
  font-size: clamp(.76rem, .72rem + .2vw, .94rem);
  font-style: normal;
  font-weight: 700;
  letter-spacing: .085em;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transform: rotate(-.75deg);
  transition:
    transform .34s var(--slow),
    box-shadow .34s var(--slow),
    background-color .34s var(--slow);
}

.seal-cta::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background:
    repeating-linear-gradient(118deg, rgba(42, 33, 28, .13) 0 2px, transparent 2px 9px),
    var(--salmon);
  clip-path: polygon(0 100%, 100% 0, 100% 38%, 26% 100%);
  transform: translateX(-78%);
  transition: transform .48s var(--cut);
}

.seal-cta::after {
  content: "";
  position: absolute;
  inset: .28rem .36rem auto .36rem;
  height: .38rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .45);
  transform: rotate(-2deg);
  mix-blend-mode: screen;
}

.seal-cta span {
  position: relative;
  z-index: 1;
}

.seal-cta:hover {
  box-shadow: 6px 7px 0 rgba(42, 33, 28, .88);
  transform: rotate(.35deg) translate(-1px, -2px);
}

.seal-cta:hover::before {
  transform: translateX(0);
}

.seal-cta:active {
  box-shadow: 2px 3px 0 rgba(42, 33, 28, .92);
  transform: rotate(.2deg) translate(1px, 1px);
}

.seal-cta.primary {
  --seal-bg: var(--salmon);
}

.seal-cta.secondary {
  --seal-bg: var(--lavender);
  transform: rotate(1deg);
}

.hero-figure {
  position: relative;
  justify-self: end;
  align-self: end;
  width: min(92%, 25rem);
  margin: 0;
  filter: sepia(.13) saturate(.82) contrast(1.13);
  transform: rotate(2.25deg);
}

.hero-figure::before {
  content: "";
  position: absolute;
  inset: -.78rem;
  z-index: -1;
  border: 2px solid var(--ink);
  background:
    linear-gradient(135deg, var(--cream), rgba(255, 247, 216, .76)),
    repeating-linear-gradient(90deg, rgba(42, 33, 28, .07) 0 1px, transparent 1px 8px);
  clip-path: polygon(6% 0, 100% 4%, 92% 100%, 0 90%);
}

.hero-figure::after {
  content: "";
  position: absolute;
  top: -.72rem;
  right: 12%;
  width: 38%;
  height: 1.15rem;
  border: var(--hair) solid rgba(42, 33, 28, .7);
  background: rgba(185, 174, 223, .72);
  transform: rotate(4deg);
  mix-blend-mode: multiply;
}

.hero-figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  mix-blend-mode: multiply;
  clip-path: polygon(8% 0, 100% 5%, 91% 100%, 0 91%);
}

.vertical-phone {
  position: absolute;
  top: 1rem;
  right: .34rem;
  bottom: 1rem;
  z-index: 4;
  display: grid;
  place-items: center;
  width: clamp(2.35rem, 4vw, 3.45rem);
  border-inline: 2px solid var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 247, 216, .92), rgba(255, 247, 216, .78)),
    repeating-linear-gradient(0deg, rgba(42, 33, 28, .12) 0 1px, transparent 1px 6px);
  color: var(--oxide);
  font-family: var(--mono);
  font-style: normal;
  font-weight: 700;
  text-decoration: none;
}

.vertical-phone span {
  display: block;
  writing-mode: vertical-rl;
  letter-spacing: .12em;
  transform: rotate(180deg);
}

.street-plaque {
  justify-self: start;
  width: min(28rem, calc(100vw - var(--edge-left) - var(--edge-right)));
  padding: 1.25rem 1.35rem 1.35rem;
  background-color: var(--cream);
  transform: rotate(1.1deg);
}

.street-plaque span,
.street-plaque small,
.arrival-plaque span,
.arrival-plaque a,
address,
.footer-phone,
.faq-missal b,
.dense-act b,
.appointment-copy b,
.receipt-lines b {
  font-family: var(--mono);
  font-style: normal;
}

.street-plaque span {
  display: block;
  color: var(--oxide);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.street-plaque strong {
  display: block;
  margin-top: .35rem;
  font-family: var(--display);
  font-size: clamp(1.55rem, 5vw, 2.95rem);
  font-style: italic;
  font-weight: 700;
  line-height: .88;
  letter-spacing: -.06em;
}

.street-plaque small {
  display: block;
  margin-top: .65rem;
  font-size: .78rem;
  letter-spacing: .04em;
}

/* cinematic cuts */

.cinema-cut {
  position: relative;
  display: grid;
  min-height: clamp(9.5rem, 18vw, 17rem);
  place-items: center start;
  margin-inline: clamp(.45rem, 2vw, 2rem);
  padding: clamp(1.25rem, 3vw, 2.75rem) var(--edge-right) clamp(1.25rem, 3vw, 2.75rem) var(--edge-left);
  overflow: hidden;
  border-block: 2px solid rgba(42, 33, 28, .92);
  background:
    linear-gradient(115deg, transparent 0 10%, rgba(217, 239, 226, .94) 10% 36%, transparent 36% 52%, rgba(232, 160, 140, .9) 52% 72%, transparent 72%),
    repeating-linear-gradient(90deg, rgba(42, 33, 28, .085) 0 1px, transparent 1px 10px);
}

.cinema-cut::before {
  content: "";
  position: absolute;
  inset: -34% -14%;
  background:
    radial-gradient(circle at 22% 36%, rgba(255, 247, 216, .78) 0 1px, transparent 1.5px),
    repeating-linear-gradient(118deg, rgba(42, 33, 28, .1) 0 2px, transparent 2px 11px),
    linear-gradient(112deg, transparent 0 43%, rgba(255, 247, 216, .36) 43% 45%, transparent 45%);
  opacity: .74;
  transform: translateX(-12%) rotate(-1deg);
}

.cinema-cut::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(246, 241, 231, .72), transparent 16%, transparent 82%, rgba(246, 241, 231, .68)),
    repeating-linear-gradient(0deg, rgba(42, 33, 28, .08) 0 1px, transparent 1px 3px);
  opacity: .18;
  mix-blend-mode: multiply;
}

.cinema-cut p {
  position: relative;
  z-index: 1;
  max-width: 13ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.45rem, 8.2vw, 8.45rem);
  font-style: italic;
  font-weight: 700;
  line-height: .81;
  letter-spacing: -.082em;
  text-wrap: balance;
}

.cut-lavender {
  background:
    linear-gradient(116deg, transparent 0 18%, rgba(185, 174, 223, .96) 18% 47%, transparent 47% 65%, rgba(217, 239, 226, .95) 65% 82%, transparent 82%),
    repeating-linear-gradient(92deg, rgba(42, 33, 28, .08) 0 1px, transparent 1px 9px);
}

.cut-salmon {
  background:
    linear-gradient(112deg, rgba(232, 160, 140, .92) 0 25%, transparent 25% 48%, rgba(255, 247, 216, .88) 48% 74%, transparent 74%),
    repeating-linear-gradient(91deg, rgba(42, 33, 28, .09) 0 1px, transparent 1px 8px);
}

.cut-mint {
  background:
    linear-gradient(114deg, transparent 0 12%, rgba(217, 239, 226, 1) 12% 54%, transparent 54% 64%, rgba(185, 174, 223, .9) 64% 86%, transparent 86%),
    repeating-linear-gradient(92deg, rgba(42, 33, 28, .08) 0 1px, transparent 1px 9px);
}

/* rites */

.rite {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3.3vw, 3.35rem);
  padding-inline: var(--edge-left) var(--edge-right);
}

.rite::before {
  content: attr(data-rite);
  position: absolute;
  top: -.8rem;
  right: var(--edge-right);
  z-index: -1;
  color: rgba(185, 174, 223, .22);
  font-family: var(--mono);
  font-size: clamp(5rem, 15vw, 14rem);
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.12em;
}

.invocation {
  display: grid;
  grid-template-columns: auto minmax(4rem, 1fr);
  align-items: center;
  gap: .85rem;
}

.invocation span {
  display: inline-grid;
  width: fit-content;
  padding: .44rem .64rem .39rem;
  background:
    linear-gradient(135deg, var(--ink), #3B2C24);
  color: var(--cream);
  font-family: var(--mono);
  font-size: clamp(.72rem, .69rem + .18vw, .9rem);
  font-style: normal;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.1;
  text-transform: uppercase;
  transform: rotate(-.35deg);
}

.invocation i {
  display: block;
  height: clamp(.85rem, 1.4vw, 1.16rem);
  background:
    repeating-linear-gradient(90deg, rgba(42, 33, 28, .14) 0 2px, transparent 2px 10px),
    var(--salmon);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 8% 50%);
  transform: translateX(-.2rem);
}

.air-panel {
  display: grid;
  min-height: clamp(13rem, 28vw, 25rem);
  align-items: center;
}

.air-panel h2,
.ledger-heading h2,
.faq-intro h2,
.appointment-copy h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.65rem, 8.65vw, 9.25rem);
  font-style: italic;
  font-weight: 700;
  line-height: .82;
  letter-spacing: -.087em;
}

.dense-act {
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 3vw, 2.15rem);
  border-left: clamp(.55rem, 1vw, .86rem) solid var(--lavender);
  background:
    linear-gradient(90deg, rgba(255, 247, 216, .76), rgba(255, 247, 216, .42)),
    repeating-linear-gradient(0deg, rgba(42, 33, 28, .06) 0 1px, transparent 1px 2.05rem);
  box-shadow: -4px 5px 0 rgba(42, 33, 28, .08);
  font-family: var(--display);
  font-size: clamp(1.13rem, 1.35vw, 1.55rem);
  font-style: italic;
  line-height: 1.38;
  letter-spacing: -.022em;
}

.dense-act p {
  margin: 0;
}

/* receipt lines */

.receipt-lines {
  display: grid;
  gap: .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.receipt-lines li {
  position: relative;
  display: flex;
  min-height: 3rem;
  align-items: center;
  padding: .65rem .82rem .65rem clamp(2.25rem, 4vw, 3.05rem);
  border-bottom: 1.5px dashed rgba(42, 33, 28, .72);
  background:
    radial-gradient(circle at 1.18rem 50%, var(--lavender) 0 .35rem, transparent .38rem),
    linear-gradient(90deg, rgba(255, 247, 216, .42), transparent 56%),
    repeating-linear-gradient(92deg, rgba(42, 33, 28, .065) 0 1px, transparent 1px 7px);
  font-family: var(--display);
  font-size: clamp(1.08rem, 1.5vw, 1.52rem);
  font-style: italic;
  line-height: 1.25;
  letter-spacing: -.025em;
}

.receipt-lines li::after {
  content: "";
  position: absolute;
  right: .45rem;
  top: 50%;
  width: clamp(1.6rem, 4vw, 4.8rem);
  height: .42rem;
  background: rgba(232, 160, 140, .6);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 12% 50%);
  transform: translateY(-50%);
  opacity: .75;
  mix-blend-mode: multiply;
}

.receipt-lines li:nth-child(2n) {
  margin-left: clamp(.8rem, 8vw, 7rem);
  background:
    radial-gradient(circle at 1.18rem 50%, var(--salmon) 0 .35rem, transparent .38rem),
    linear-gradient(90deg, rgba(217, 239, 226, .58), transparent 58%),
    repeating-linear-gradient(88deg, rgba(42, 33, 28, .07) 0 1px, transparent 1px 8px);
}

.receipt-lines li:nth-child(3n) {
  margin-left: clamp(.35rem, 4vw, 3.2rem);
}

.receipt-lines span {
  position: relative;
  z-index: 1;
}

/* photos */

.table-photo {
  position: relative;
  align-self: start;
  margin: 0;
}

.table-photo::before {
  content: "";
  position: absolute;
  inset: .72rem -.68rem -.68rem .72rem;
  z-index: -1;
  border: 2px solid var(--ink);
  background:
    repeating-linear-gradient(118deg, rgba(42, 33, 28, .12) 0 2px, transparent 2px 9px),
    var(--salmon);
}

.table-photo::after {
  content: "";
  position: absolute;
  top: -.65rem;
  left: 12%;
  width: 34%;
  height: 1.08rem;
  border: var(--hair) solid rgba(42, 33, 28, .72);
  background: rgba(255, 247, 216, .72);
  transform: rotate(-3.5deg);
  mix-blend-mode: multiply;
}

.table-photo img {
  width: 100%;
  min-height: 18rem;
  object-fit: cover;
  border: 2px solid var(--ink);
  filter: saturate(.76) contrast(1.15) sepia(.08);
  mix-blend-mode: multiply;
}

.table-photo figcaption {
  position: relative;
  z-index: 1;
  width: fit-content;
  max-width: 19rem;
  margin: -.85rem 0 0 auto;
  padding: .46rem .62rem .42rem;
  border: var(--hair) solid var(--ink);
  border-radius: .32rem .48rem .28rem .42rem;
  background: var(--cream);
  box-shadow: 3px 3px 0 rgba(42, 33, 28, .16);
  font-family: var(--mono);
  font-size: .7rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .055em;
  line-height: 1.25;
  text-transform: uppercase;
}

.photo-salmondrift {
  transform: rotate(1.15deg);
}

.photo-salmondrift img {
  clip-path: polygon(4% 0, 100% 2%, 94% 100%, 0 92%);
}

/* review */

.ledger-heading {
  display: grid;
  gap: 1rem;
  align-items: end;
}

.ledger-heading h2 {
  max-width: 10.2ch;
}

.best-stamp {
  position: relative;
  justify-self: start;
  width: fit-content;
  margin: 0;
  padding: .58rem .84rem .52rem;
  border: 2px solid var(--oxide);
  background:
    repeating-linear-gradient(-8deg, rgba(123, 59, 50, .13) 0 1px, transparent 1px 6px),
    var(--cream);
  box-shadow: 4px 4px 0 rgba(123, 59, 50, .16);
  color: transparent;
  font-family: var(--mono);
  font-size: 0;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
  transform: rotate(-4deg);
}

.best-stamp::before {
  content: "criterio antes que eslogan";
  color: var(--oxide);
  font-size: clamp(.72rem, .68rem + .18vw, .86rem);
}

.best-stamp::after {
  content: "";
  position: absolute;
  inset: .28rem;
  border: var(--hair) dashed rgba(123, 59, 50, .55);
  pointer-events: none;
}

.service-ledger {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(.9rem, 2vw, 1.45rem);
  counter-reset: service;
}

.service-entry {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: .66rem;
  padding: clamp(1.05rem, 3vw, 2.15rem);
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: .25rem .85rem .3rem .65rem;
  background:
    radial-gradient(circle at 90% 18%, rgba(255, 247, 216, .9) 0 .38rem, transparent .4rem),
    linear-gradient(132deg, transparent 0 66%, rgba(232, 160, 140, .68) 66% 86%, transparent 86%),
    repeating-linear-gradient(90deg, rgba(42, 33, 28, .058) 0 1px, transparent 1px 8px),
    var(--mint);
  box-shadow: 6px 7px 0 rgba(42, 33, 28, .09);
}

.service-entry::before {
  content: "";
  position: absolute;
  right: -1rem;
  bottom: -1rem;
  z-index: -1;
  width: 55%;
  height: 47%;
  background:
    repeating-linear-gradient(118deg, rgba(42, 33, 28, .12) 0 2px, transparent 2px 9px),
    var(--salmon);
  clip-path: polygon(30% 100%, 100% 0, 100% 100%);
  opacity: .86;
  mix-blend-mode: multiply;
}

.service-entry::after {
  content: "";
  position: absolute;
  inset: .55rem;
  z-index: -1;
  border: var(--hair) solid rgba(42, 33, 28, .46);
  border-radius: .22rem .72rem .24rem .58rem;
  transform: rotate(.22deg);
  pointer-events: none;
}

.service-entry h3 {
  position: relative;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.05rem, 6.2vw, 5.8rem);
  font-style: italic;
  font-weight: 700;
  line-height: .82;
  letter-spacing: -.072em;
}

.service-entry p {
  position: relative;
  margin: 0;
}

.service-entry > p:last-child {
  max-width: 47rem;
  font-family: var(--display);
  font-size: clamp(1.08rem, 1.35vw, 1.46rem);
  font-style: italic;
  line-height: 1.36;
  letter-spacing: -.02em;
}

.legal-entry {
  transform: rotate(-.25deg);
}

.fiscal-entry {
  background:
    radial-gradient(circle at 88% 22%, rgba(255, 247, 216, .88) 0 .38rem, transparent .4rem),
    linear-gradient(132deg, transparent 0 64%, rgba(217, 239, 226, .68) 64% 84%, transparent 84%),
    repeating-linear-gradient(88deg, rgba(42, 33, 28, .062) 0 1px, transparent 1px 7px),
    var(--lavender);
  transform: rotate(.35deg);
}

.fiscal-entry::before {
  background:
    repeating-linear-gradient(118deg, rgba(42, 33, 28, .11) 0 2px, transparent 2px 9px),
    var(--mint);
}

.mercantil-entry {
  background:
    radial-gradient(circle at 88% 22%, rgba(255, 247, 216, .9) 0 .38rem, transparent .4rem),
    linear-gradient(132deg, transparent 0 64%, rgba(185, 174, 223, .58) 64% 84%, transparent 84%),
    repeating-linear-gradient(94deg, rgba(42, 33, 28, .06) 0 1px, transparent 1px 7px),
    var(--cream);
  transform: rotate(-.15deg);
}

.mercantil-entry::before {
  background:
    repeating-linear-gradient(118deg, rgba(42, 33, 28, .11) 0 2px, transparent 2px 9px),
    var(--lavender);
}

.photo-mintseal {
  transform: rotate(-1.3deg);
}

.photo-mintseal::before {
  background:
    repeating-linear-gradient(118deg, rgba(42, 33, 28, .12) 0 2px, transparent 2px 9px),
    var(--mint);
}

.photo-mintseal img {
  clip-path: polygon(0 7%, 94% 0, 100% 87%, 6% 100%);
}

/* FAQ missal */

.faq-intro {
  display: grid;
  gap: 1rem;
}

.faq-intro h2 {
  max-width: 11ch;
}

.faq-intro p {
  max-width: 47rem;
  margin: 0;
  padding-left: 1rem;
  border-left: .65rem solid var(--salmon);
  font-family: var(--display);
  font-size: clamp(1.12rem, 1.58vw, 1.58rem);
  font-style: italic;
  line-height: 1.36;
  letter-spacing: -.024em;
}

.faq-missal {
  display: grid;
  gap: 0;
  border-top: 2px solid var(--ink);
  border-left: 2px solid var(--ink);
  box-shadow: 7px 8px 0 rgba(42, 33, 28, .09);
}

.faq-missal article {
  position: relative;
  display: grid;
  grid-template-columns: 3.15rem 1fr;
  gap: .72rem 1rem;
  padding: clamp(1rem, 2.5vw, 1.85rem);
  overflow: hidden;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background:
    linear-gradient(125deg, transparent 0 76%, rgba(232, 160, 140, .42) 76% 100%),
    repeating-linear-gradient(92deg, rgba(42, 33, 28, .052) 0 1px, transparent 1px 7px),
    rgba(255, 247, 216, .72);
}

.faq-missal article::before {
  content: "";
  position: absolute;
  right: -.65rem;
  bottom: -.65rem;
  width: 5.5rem;
  height: 4.3rem;
  background: var(--salmon);
  clip-path: polygon(28% 100%, 100% 0, 100% 100%);
  opacity: .42;
  mix-blend-mode: multiply;
}

.faq-missal article:nth-child(2n) {
  background:
    linear-gradient(125deg, transparent 0 76%, rgba(185, 174, 223, .42) 76% 100%),
    repeating-linear-gradient(88deg, rgba(42, 33, 28, .056) 0 1px, transparent 1px 8px),
    rgba(217, 239, 226, .8);
}

.faq-missal article:nth-child(3n) {
  background:
    linear-gradient(125deg, transparent 0 76%, rgba(217, 239, 226, .48) 76% 100%),
    repeating-linear-gradient(90deg, rgba(42, 33, 28, .056) 0 1px, transparent 1px 8px),
    rgba(185, 174, 223, .58);
}

.faq-missal span {
  grid-row: span 2;
  display: grid;
  place-items: start center;
  padding-top: .15rem;
  color: var(--oxide);
  font-family: var(--mono);
  font-style: normal;
  font-weight: 700;
  letter-spacing: .04em;
}

.faq-missal h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.34rem, 2.7vw, 2.45rem);
  font-style: italic;
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.048em;
}

.faq-missal p {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1rem, 1.05vw, 1.18rem);
  font-style: italic;
  line-height: 1.39;
  letter-spacing: -.014em;
}

/* appointment */

.appointment-rite {
  padding-bottom: clamp(2.8rem, 7vw, 7.5rem);
}

.appointment-copy {
  display: grid;
  gap: 1rem;
}

.appointment-copy h2 {
  max-width: 8ch;
}

.appointment-copy p {
  max-width: 43rem;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.14rem, 1.7vw, 1.62rem);
  font-style: italic;
  line-height: 1.36;
  letter-spacing: -.025em;
}

.arrival-plaque {
  align-self: start;
  padding: clamp(1.15rem, 2.8vw, 1.95rem);
  background:
    linear-gradient(132deg, transparent 0 64%, rgba(255, 247, 216, .34) 64% 82%, transparent 82%),
    repeating-linear-gradient(92deg, rgba(42, 33, 28, .055) 0 1px, transparent 1px 8px),
    var(--lavender);
  transform: rotate(1.45deg);
}

.arrival-plaque strong {
  display: block;
  margin-top: .5rem;
  font-family: var(--display);
  font-size: clamp(1.7rem, 4.65vw, 3.35rem);
  font-style: italic;
  font-weight: 700;
  line-height: .88;
  letter-spacing: -.062em;
}

.arrival-plaque span,
.arrival-plaque a {
  display: block;
  margin-top: .62rem;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
}

.contact-rite {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 3vw, 2rem) 0 0;
  border-top: 2px solid var(--ink);
}

.contact-rite::before {
  content: "";
  position: absolute;
  top: -.72rem;
  left: 17%;
  width: 44%;
  height: 1.25rem;
  background:
    repeating-linear-gradient(90deg, rgba(42, 33, 28, .14) 0 2px, transparent 2px 8px),
    var(--salmon);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 8% 50%);
}

.field-line {
  display: grid;
  gap: .38rem;
  padding: .84rem .8rem .92rem;
  border-bottom: 2px solid var(--ink);
  background:
    linear-gradient(90deg, rgba(217, 239, 226, .74), transparent 58%),
    repeating-linear-gradient(90deg, rgba(42, 33, 28, .047) 0 1px, transparent 1px 8px);
}

.field-line:nth-child(2n) {
  margin-left: clamp(.7rem, 5vw, 3.6rem);
  background:
    linear-gradient(90deg, rgba(185, 174, 223, .55), transparent 58%),
    repeating-linear-gradient(90deg, rgba(42, 33, 28, .047) 0 1px, transparent 1px 8px);
}

.message-line {
  background:
    linear-gradient(90deg, rgba(255, 247, 216, .74), transparent 62%),
    repeating-linear-gradient(90deg, rgba(42, 33, 28, .047) 0 1px, transparent 1px 8px);
}

.field-line label {
  font-family: var(--mono);
  font-size: .76rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .105em;
  line-height: 1.2;
  text-transform: uppercase;
}

.field-line input,
.field-line textarea {
  width: 100%;
  padding: .25rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.45vw, 2.08rem);
  font-style: italic;
  line-height: 1.14;
  letter-spacing: -.035em;
}

.field-line input:focus,
.field-line textarea:focus {
  background:
    linear-gradient(180deg, transparent 72%, rgba(232, 160, 140, .35) 72%);
}

.field-line textarea {
  min-height: 9.5rem;
  resize: vertical;
}

.form-seal {
  justify-self: start;
  margin-top: 1rem;
  --seal-bg: var(--salmon);
}

.photo-lavendercase {
  transform: rotate(1deg);
}

.photo-lavendercase::before {
  background:
    repeating-linear-gradient(118deg, rgba(42, 33, 28, .12) 0 2px, transparent 2px 9px),
    var(--lavender);
}

.photo-lavendercase img {
  clip-path: polygon(6% 0, 100% 10%, 90% 100%, 0 94%);
}

/* footer */

.site-footer {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.2rem, 3vw, 2.25rem);
  padding: clamp(1.5rem, 4vw, 4rem) var(--edge-right) clamp(1.9rem, 4vw, 3.2rem) var(--edge-left);
  overflow: hidden;
  background:
    linear-gradient(128deg, var(--ink) 0 61%, var(--oxide) 61% 100%);
  color: var(--cream);
}

.site-footer::before {
  content: "";
  position: absolute;
  top: -2.2rem;
  right: -4rem;
  width: min(65vw, 31rem);
  height: min(65vw, 31rem);
  border: 2px solid rgba(255, 247, 216, .88);
  border-radius: 1.2rem 1.7rem 1rem 1.45rem;
  background:
    repeating-linear-gradient(119deg, rgba(255, 247, 216, .095) 0 2px, transparent 2px 10px),
    linear-gradient(135deg, rgba(217, 239, 226, .2), rgba(232, 160, 140, .18));
  transform: rotate(-9deg);
}

.site-footer::after {
  content: "";
  position: absolute;
  left: -3rem;
  bottom: 1.2rem;
  width: min(48vw, 28rem);
  height: 1.1rem;
  border: var(--hair) solid rgba(255, 247, 216, .72);
  background:
    repeating-linear-gradient(90deg, rgba(255, 247, 216, .18) 0 2px, transparent 2px 8px),
    var(--lavender-deep);
  clip-path: polygon(0 0, 96% 0, 100% 50%, 96% 100%, 0 100%);
  transform: rotate(1.6deg);
}

.site-footer > * {
  position: relative;
  z-index: 1;
}

.footer-cta-block {
  display: grid;
  order: -1;
  justify-items: start;
  gap: .85rem;
  padding: 1rem 0 1.1rem;
  border-bottom: 2px solid rgba(255, 247, 216, .38);
}

.footer-main-cta {
  --seal-bg: var(--mint);
  color: var(--ink);
}

.footer-phone {
  color: var(--cream);
  font-size: clamp(1.35rem, 3.3vw, 2.65rem);
  font-weight: 700;
  letter-spacing: .025em;
  text-decoration: none;
}

.footer-identity {
  display: grid;
  grid-template-columns: clamp(4rem, 10vw, 8.2rem) 1fr;
  align-items: end;
  gap: 1rem;
}

.footer-logo {
  display: block;
  width: clamp(4rem, 10vw, 8.2rem);
  padding: .42rem;
  border: 2px solid var(--cream);
  border-radius: 1rem 1.35rem .9rem 1.2rem;
  background: var(--mint);
  box-shadow: 5px 5px 0 rgba(255, 247, 216, .16);
  transform: rotate(-2deg);
}

.footer-logo img {
  filter: contrast(1.08) saturate(.9);
}

.footer-identity p {
  max-width: 11ch;
  margin: 0;
  color: var(--cream);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.footer-nav a {
  position: relative;
  padding: .44rem .58rem .4rem;
  border: 1.5px solid rgba(255, 247, 216, .78);
  border-radius: .32rem .52rem .28rem .46rem;
  background: rgba(255, 247, 216, .08);
  font-family: var(--mono);
  font-size: .76rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .065em;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background-color .25s var(--slow),
    color .25s var(--slow),
    transform .25s var(--slow);
}

.footer-nav a:hover {
  background: var(--cream);
  color: var(--ink);
  transform: translateY(-2px) rotate(-.6deg);
}

address {
  margin: 0;
  color: rgba(255, 247, 216, .9);
  font-size: .92rem;
  line-height: 1.5;
}

.footer-motif {
  align-self: end;
  max-width: 30rem;
  padding-top: 1rem;
  border-top: 2px solid rgba(255, 247, 216, .62);
  color: rgba(255, 247, 216, .78);
}

/* cinematic motion */

@keyframes scene-dissolve {
  0% {
    opacity: .18;
    filter: blur(8px) saturate(.75);
    transform: translateY(1.35rem);
  }

  36% {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: translateY(0);
  }
}

@keyframes cut-panel {
  0% {
    filter: contrast(.78) saturate(.8);
    clip-path: inset(0 18% 0 0);
  }

  11% {
    filter: contrast(1.4) saturate(1.15);
    clip-path: inset(0 0 0 0);
  }

  18% {
    filter: contrast(.9) saturate(.86);
  }

  100% {
    filter: contrast(1) saturate(1);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes riso-band-drift {
  from {
    transform: translateX(-18%) rotate(-1.5deg);
  }

  to {
    transform: translateX(18%) rotate(1.5deg);
  }
}

@keyframes invocation-arrow {
  0% {
    transform: translateX(-28%) scaleX(.55);
  }

  42% {
    transform: translateX(2%) scaleX(1.05);
  }

  100% {
    transform: translateX(-.2rem) scaleX(1);
  }
}

@keyframes plate-arrival {
  0% {
    opacity: .01;
    transform: rotate(-5deg) translateY(2rem) scale(.985);
  }

  52% {
    opacity: 1;
    transform: rotate(.85deg) translateY(0) scale(1);
  }

  100% {
    transform: rotate(-1.05deg);
  }
}

@keyframes caption-cut {
  0% {
    opacity: .1;
    transform: translateX(-1.2rem) rotate(-1deg);
  }

  34% {
    opacity: 1;
    transform: translateX(.2rem) rotate(.6deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0) rotate(0);
  }
}

@supports (animation-timeline: view()) {
  .scene {
    animation: scene-dissolve both;
    animation-timeline: view();
    animation-range: entry -8% cover 36%;
  }

  .cinema-cut {
    animation: cut-panel both;
    animation-timeline: view();
    animation-range: entry 0% cover 38%;
  }

  .cinema-cut::before {
    animation: riso-band-drift linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }

  .invocation i {
    animation: invocation-arrow both;
    animation-timeline: view();
    animation-range: entry 0% cover 34%;
    transform-origin: left center;
  }

  .hero-plaque {
    animation: plate-arrival both;
    animation-timeline: view();
    animation-range: entry 0% cover 28%;
  }

  .table-photo figcaption {
    animation: caption-cut both;
    animation-timeline: view();
    animation-range: entry 12% cover 34%;
  }
}

/* responsive */

@media (min-width: 720px) {
  .site-threshold {
    grid-template-columns: auto minmax(12rem, 1fr);
    align-items: start;
  }

  .threshold-docket {
    justify-self: end;
    max-width: 32rem;
    text-align: right;
    transform: rotate(-.35deg);
  }

  .site-threshold::after {
    grid-column: 1 / -1;
  }

  .opening-rite {
    grid-template-columns: minmax(7rem, 12vw) minmax(0, 1fr);
    align-items: start;
  }

  .ritual-calendar {
    position: sticky;
    top: 1rem;
    display: block;
    max-width: none;
    padding-top: 1.25rem;
  }

  .ritual-calendar::before {
    left: -.55rem;
  }

  .ritual-calendar ol {
    display: grid;
    margin-top: 1rem;
  }

  .ritual-calendar a {
    min-height: 6.7rem;
    writing-mode: vertical-rl;
  }

  .hero-plaque {
    grid-column: 2;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 28vw);
  }

  .hero-figure {
    width: 100%;
    align-self: center;
  }

  .street-plaque {
    grid-column: 1 / -1;
    margin-left: min(22vw, 18rem);
  }

  .listen-rite {
    grid-template-columns: minmax(0, 1.08fr) minmax(18rem, .72fr);
    grid-template-areas:
      "inv inv"
      "air dense"
      "lines photo";
  }

  .listen-rite .invocation {
    grid-area: inv;
  }

  .listen-rite .air-panel {
    grid-area: air;
  }

  .listen-rite .dense-act {
    grid-area: dense;
    align-self: center;
  }

  .listen-rite .receipt-lines {
    grid-area: lines;
  }

  .listen-rite .table-photo {
    grid-area: photo;
  }

  .review-rite {
    grid-template-columns: minmax(18rem, .68fr) minmax(0, 1fr);
    grid-template-areas:
      "inv inv"
      "head ledger"
      "photo ledger";
  }

  .review-rite .invocation {
    grid-area: inv;
  }

  .review-rite .ledger-heading {
    grid-area: head;
  }

  .review-rite .service-ledger {
    grid-area: ledger;
  }

  .review-rite .table-photo {
    grid-area: photo;
  }

  .service-entry:nth-child(2) {
    margin-left: clamp(1rem, 6vw, 5rem);
  }

  .service-entry:nth-child(3) {
    margin-right: clamp(1rem, 5vw, 4rem);
    margin-left: clamp(.4rem, 3vw, 2rem);
  }

  .explain-rite {
    grid-template-columns: minmax(16rem, .55fr) minmax(0, 1fr);
    grid-template-areas:
      "inv inv"
      "intro faq";
  }

  .explain-rite .invocation {
    grid-area: inv;
  }

  .faq-intro {
    position: sticky;
    top: 1.4rem;
    grid-area: intro;
    align-self: start;
  }

  .faq-missal {
    grid-area: faq;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .faq-missal article:nth-child(1),
  .faq-missal article:nth-child(4),
  .faq-missal article:nth-child(7) {
    transform: translateX(clamp(-.8rem, -1vw, -.25rem));
  }

  .faq-missal article:nth-child(2),
  .faq-missal article:nth-child(5) {
    transform: translateY(clamp(.4rem, 1vw, .8rem));
  }

  .faq-missal article:nth-child(7) {
    grid-column: 1 / -1;
  }

  .appointment-rite {
    grid-template-columns: minmax(14rem, .55fr) minmax(0, .95fr) minmax(15rem, .55fr);
    grid-template-areas:
      "inv inv inv"
      "copy form plaque"
      "photo form plaque";
    align-items: start;
  }

  .appointment-rite .invocation {
    grid-area: inv;
  }

  .appointment-copy {
    grid-area: copy;
  }

  .arrival-plaque {
    position: sticky;
    top: 1.2rem;
    grid-area: plaque;
  }

  .contact-rite {
    grid-area: form;
  }

  .appointment-rite .table-photo {
    grid-area: photo;
  }

  .site-footer {
    grid-template-columns: minmax(16rem, .95fr) minmax(12rem, .55fr) minmax(12rem, .55fr);
    align-items: end;
  }

  .footer-cta-block {
    order: 0;
    align-self: start;
    border-bottom: 0;
    border-left: 2px solid rgba(255, 247, 216, .34);
    padding: .2rem 0 .2rem 1rem;
  }

  .footer-identity {
    grid-row: span 2;
  }

  .footer-nav {
    align-self: start;
  }

  address {
    justify-self: start;
  }

  .footer-motif {
    grid-column: 2 / -1;
  }
}

@media (min-width: 1100px) {
  :root {
    --edge-left: clamp(4.2rem, 5.7vw, 7.2rem);
    --edge-right: clamp(1.4rem, 2.2vw, 3.4rem);
  }

  .opening-rite {
    grid-template-columns: minmax(8rem, 11vw) minmax(0, 1fr) minmax(12rem, 19vw);
    padding-right: clamp(.85rem, 1.5vw, 1.7rem);
  }

  .hero-plaque {
    grid-column: 2 / 4;
  }

  .street-plaque {
    z-index: 3;
    grid-column: 3;
    margin-top: -4.2rem;
    margin-left: 0;
  }

  .hero-copy {
    padding-right: 1rem;
  }

  .hero-figure {
    transform: rotate(3deg) translateY(2rem);
  }

  .cinema-cut {
    margin-inline: clamp(2rem, 6vw, 7rem) clamp(.6rem, 2vw, 2rem);
  }

  .service-ledger {
    padding-top: clamp(.4rem, 1vw, 1rem);
  }

  .faq-missal article:nth-child(3) {
    transform: translateX(clamp(1rem, 2vw, 2.2rem));
  }

  .site-footer {
    grid-template-columns: minmax(20rem, 1.05fr) minmax(14rem, .55fr) minmax(16rem, .72fr);
  }
}

@media (min-width: 1380px) {
  h1 {
    font-size: clamp(8rem, 11.2vw, 14rem);
  }

  .hero-plaque {
    min-height: 56rem;
  }

  .air-panel h2,
  .ledger-heading h2,
  .faq-intro h2,
  .appointment-copy h2 {
    font-size: clamp(6.4rem, 7.8vw, 10rem);
  }
}

@media (hover: hover) {
  .service-entry {
    transition:
      transform .42s var(--slow),
      box-shadow .42s var(--slow);
  }

  .service-entry:hover {
    box-shadow: 10px 11px 0 rgba(42, 33, 28, .12);
    transform: translateY(-3px) rotate(.25deg);
  }

  .legal-entry:hover {
    transform: translateY(-3px) rotate(-.5deg);
  }

  .fiscal-entry:hover {
    transform: translateY(-3px) rotate(.55deg);
  }

  .mercantil-entry:hover {
    transform: translateY(-3px) rotate(-.35deg);
  }

  .faq-missal article {
    transition:
      background-color .3s var(--slow),
      filter .3s var(--slow);
  }

  .faq-missal article:hover {
    filter: contrast(1.04) saturate(1.05);
  }
}

@media (max-width: 520px) {
  .site-threshold {
    padding-left: 1rem;
    padding-right: .85rem;
  }

  .opening-rite,
  .rite,
  .cinema-cut,
  .site-footer {
    padding-left: 1rem;
    padding-right: .85rem;
  }

  .hero-plaque {
    padding-right: 3.25rem;
    border-radius: 1rem 1.35rem .9rem 1.25rem;
  }

  .hero-sub {
    border-left-width: .5rem;
  }

  .seal-cta {
    width: 100%;
  }

  .seal-actions {
    align-items: stretch;
  }

  .street-plaque {
    width: 100%;
  }

  .faq-missal article {
    grid-template-columns: 2.4rem 1fr;
  }

  .field-line:nth-child(2n),
  .receipt-lines li:nth-child(2n),
  .receipt-lines li:nth-child(3n) {
    margin-left: 0;
  }

  .footer-identity {
    grid-template-columns: 4.2rem 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }

  .scene,
  .cinema-cut,
  .cinema-cut::before,
  .invocation i,
  .hero-plaque,
  .table-photo figcaption {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}