:root {
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-2xl:  30px;
}

.btn {
  border-radius: var(--r-pill);
}

.card {
  border-radius: var(--r-xl);
}
.card__plate,
.card__plate .plate__box,
.card__plate img,
.card__media,
.card__media img {
  border-radius: calc(var(--r-xl) - var(--s-4));
  overflow: clip;
}

.nav-group__panel {
  border-radius: var(--r-md);
}

.accordion {
  border-radius: var(--r-lg);
  overflow: clip;
}

.plate__box {
  border-radius: var(--r-lg);
}
.plate__img,
.plate__box > img {
  border-radius: var(--r-lg);
}

.field__input,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="number"],
textarea,
select {
  border-radius: var(--r-md);
}

code,
kbd {
  border-radius: var(--r-sm);
}
pre {
  border-radius: var(--r-md);
}

.person__portrait {
  border-radius: var(--r-lg);
}

@media (hover: hover) and (pointer: fine) and (min-width: 34.0625rem) {
  .person[data-hover-effect] {
    position: relative;
    border-radius: var(--r-lg);
    overflow: clip;
    isolation: isolate;
    transition: box-shadow var(--dur) var(--ease);
  }
  .person[data-hover-effect]:hover,
  .person[data-hover-effect]:focus-within {
    box-shadow: var(--shadow-overlay);
  }

  .person[data-hover-effect] .person__bio,
  .person[data-hover-effect] .person__link {
    position: absolute;
    inset-inline: 0;
    margin: 0;
    background: var(--accent);
    color: var(--accent-ink);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease);
  }
  .person[data-hover-effect] .person__bio {
    inset-block: 0;
    z-index: 2;
    padding: var(--s-5) var(--s-5) var(--s-8);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--accent-ink);
    overflow: auto;
  }
  .person[data-hover-effect] .person__link {
    inset-block-end: 0;
    z-index: 3;
    padding: var(--s-4) var(--s-5) var(--s-5);
    color: var(--accent-ink);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .person[data-hover-effect]:hover .person__bio,
  .person[data-hover-effect]:hover .person__link,
  .person[data-hover-effect]:focus-within .person__bio,
  .person[data-hover-effect]:focus-within .person__link {
    opacity: 1;
    pointer-events: auto;
  }
}

:root {
  --shadow-soft:
    0 1px 2px oklch(20% 0.03 265 / 0.04),
    0 2px 4px oklch(20% 0.03 265 / 0.04);
  --shadow-lift:
    0 2px 6px oklch(20% 0.03 265 / 0.05),
    0 6px 16px oklch(20% 0.03 265 / 0.06);

  --glass-bg:        color-mix(in oklab, var(--paper) 72%, transparent);
  --glass-bg-strong: color-mix(in oklab, var(--paper) 86%, transparent);
  --glass-blur:      blur(20px) saturate(180%);
  --glass-hairline:  color-mix(in oklab, var(--ink) 7%, transparent);

  --ease-apple: cubic-bezier(0.25, 0.1, 0.25, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shadow-soft: 0 1px 2px oklch(0% 0 0 / 0.28), 0 2px 4px oklch(0% 0 0 / 0.28);
    --shadow-lift: 0 2px 6px oklch(0% 0 0 / 0.34), 0 6px 16px oklch(0% 0 0 / 0.40);
    --glass-hairline: color-mix(in oklab, var(--ink) 14%, transparent);
  }
}
:root[data-theme="dark"] {
  --shadow-soft: 0 1px 2px oklch(0% 0 0 / 0.28), 0 2px 4px oklch(0% 0 0 / 0.28);
  --shadow-lift: 0 2px 6px oklch(0% 0 0 / 0.34), 0 6px 16px oklch(0% 0 0 / 0.40);
  --glass-hairline: color-mix(in oklab, var(--ink) 14%, transparent);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header::before {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
  .site-header[data-scrolled]::before {
    background: var(--glass-bg-strong);
  }
}
.site-header::before {
  box-shadow: inset 0 1px 0 var(--glass-hairline);
}
.site-header[data-scrolled] {
  box-shadow: var(--shadow-lift);
}
[data-nav-open] .site-header::before {
  background: var(--paper);
}

.plate__box {
  box-shadow: var(--shadow-soft);
}

.site-footer__mailto {
  flex-wrap: wrap;
  min-inline-size: 0;
}
.site-footer__email {
  overflow-wrap: anywhere;
  min-inline-size: 0;
}

.site-footer__mailto .icon {
  display: none;
}
@media (min-width: 75.0625rem) {
  .site-footer__nav     { grid-column: 4 / span 6; }
  .site-footer__contact { grid-column: 10 / span 3; }
}

@media (max-width: 40rem) {
  .page-hero {
    padding-block-start: calc(var(--header-h) + var(--s-4));
    padding-block-end: var(--s-6);
  }

  .page-hero__title { margin-block-start: var(--s-4); }

  .page-hero__lead {
    margin-block-start: var(--s-4);
    font-size: var(--fs-lg);
    line-height: 1.45;
  }

  .page-hero__actions {
    margin-block-start: var(--s-5);
    gap: var(--s-2);
  }

  .page-hero__actions .btn {
    flex: 1 1 100%;
    min-block-size: 3rem;
  }

  .page-hero__foot {
    padding-block-start: var(--s-4);
    gap: var(--s-2);
  }
}

h1, h2, h3,
.section-head__title,
.masthead__title {
  text-wrap: balance;
}
p, li,
.card__body,
.lead {
  text-wrap: pretty;
}

@media (prefers-reduced-transparency: reduce) {
  .site-header::before { background: var(--paper); }
  .site-header[data-scrolled]::before { background: var(--paper); }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header::before {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }
}

.register .tiers {
  align-items: start;
  gap: var(--gutter);
}
.register .tier {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  border: var(--bw) solid var(--glass-hairline);
  border-radius: var(--r-xl);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
  transition:
    border-color var(--dur) var(--ease),
    translate var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease-apple);
}
@media (hover: hover) and (pointer: fine) {
  .register .tier:hover {
    translate: 0 -3px;
    box-shadow: var(--shadow-lift);
  }
}

.tier__stages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  border-block-start: var(--bw) solid var(--rule);
}
.tier__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.2rem var(--s-3);
  padding-block: var(--s-3);
  border-block-end: var(--bw) solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}
.tier__stage:last-child {
  border-block-end: 0;
  padding-block-end: 0;
}
.tier__stage-name {
  grid-column: 1;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ink-3);
}
.tier__stage-price {
  grid-column: 2;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.tier__stage-when {
  grid-column: 1 / -1;
  color: var(--ink-3);
  opacity: 0.72;
}
.tier__stage--lead .tier__stage-name,
.tier__stage--lead .tier__stage-price {
  color: var(--ink);
}
.tier__stage--lead .tier__stage-price {
  font-weight: var(--fw-medium);
}

@media (max-width: 48rem) {
  .register .tiers {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-4);
  }
  .register .tier {
    padding: var(--s-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .register .tier {
    transition: box-shadow var(--dur) var(--ease);
  }
  .register .tier:hover {
    translate: 0;
  }
}