@layer components {
  .arch {
    --arch-offset: 1.25rem;
    position: relative;
    width: 100%;
    isolation: isolate;
  }

  .arch::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 1px solid var(--accent-soft);
    border-radius: var(--radius-arch);
    transform: translate(var(--arch-offset), calc(var(--arch-offset) * -1));
    pointer-events: none;
  }

  .arch--offset-left::before {
    transform: translate(calc(var(--arch-offset) * -1), calc(var(--arch-offset) * -1));
  }

  .arch__frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-arch);
    background: var(--surface-warm);
  }

  .arch__frame picture {
    width: 100%;
    height: 100%;
  }

  .arch__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--image-focus, 50% 50%);
    transform: translate3d(0, var(--parallax-offset, 0px), 0) scale(var(--image-scale, 1.08));
    transform-origin: var(--image-origin, 50% 50%);
  }

  .print {
    --print-offset: 1rem;
    position: relative;
    isolation: isolate;
  }

  .print__frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--print-ratio, 4 / 5);
    border-radius: var(--radius-xs);
    background: var(--surface-warm);
  }

  .print__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid var(--line-faint);
    border-radius: inherit;
    pointer-events: none;
  }

  .print--matted::before {
    content: "";
    position: absolute;
    top: var(--print-offset);
    right: calc(var(--print-offset) * -1);
    bottom: calc(var(--print-offset) * -1);
    left: var(--print-offset);
    z-index: -1;
    border: 1px solid var(--line-champagne);
    pointer-events: none;
  }

  .print__frame picture,
  .print__image {
    width: 100%;
    height: 100%;
  }

  .print__image {
    object-fit: cover;
    object-position: var(--image-focus, 50% 50%);
  }

  .door-plate {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.875rem;
    align-items: center;
    padding: 0.95rem 1.25rem 0.95rem 1rem;
    background: var(--surface-plate);
    color: var(--ink-on-dark);
    box-shadow: var(--shadow-plate);
  }

  .door-plate::after {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid var(--line-champagne);
    pointer-events: none;
  }

  .door-plate :focus-visible {
    outline-color: var(--focus-ring-on-dark);
  }

  .flower {
    display: block;
    flex: none;
    aspect-ratio: 7 / 8;
  }

  .flower__image {
    display: block;
    width: auto;
    height: 100%;
  }

  .door-plate__mark {
    grid-row: span 2;
    height: 1.875rem;
  }

  .door-plate__title {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: var(--weight-heading);
    line-height: 1.2;
    text-wrap: balance;
  }

  .door-plate__subtitle {
    margin-top: 0.3rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--line-on-dark);
    font-size: var(--text-2xs);
    line-height: 1.45;
    letter-spacing: 0.02em;
    color: var(--ink-on-dark-soft);
    text-wrap: balance;
  }

  .sprig {
    overflow: visible;
    fill: none;
    stroke: var(--ink-sage);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }

  .bloom {
    overflow: visible;
    fill: none;
    stroke: var(--accent-soft);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }

  .signature {
    width: clamp(17rem, 13rem + 10vw, 23rem);
    aspect-ratio: 3886 / 388;
    height: auto;
    fill: var(--ink-accent);
  }
}