.contact {
  container: contact / inline-size;
  padding-block-start: var(--space-xl);
}
.contact-grid {
  display: grid;
  gap: var(--space-2xl);
  align-items: start;
}
.contact-intro {
  display: grid;
  gap: var(--space-md);
  justify-items: start;
}
.open-now {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-inset-s);
}
.open-now[data-state=open] .icon {
  color: var(--color-success);
}
.open-now[data-state=closed] .icon {
  color: var(--color-accent);
}
.direct {
  display: grid;
  inline-size: 100%;
  border-block-start: var(--rule-hair) solid var(--color-rule);
}
.direct > div {
  display: grid;
  gap: var(--space-3xs);
  padding-block: var(--space-xs);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}
.direct dt {
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.direct address {
  font-style: normal;
}
.direct .link {
  min-block-size: 0;
}
.contact-form {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-l);
  background: var(--color-paper);
  box-shadow: var(--shadow-raised);
}
.contact-form textarea {
  resize: vertical;
  min-block-size: 9rem;
}
.contact-form select {
  appearance: auto;
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
}
.form-status:empty {
  display: none;
}
.form-status {
  font-weight: var(--weight-strong);
}
.form-status[data-state=busy] {
  color: var(--color-muted);
}
.form-status[data-state=error] {
  color: var(--color-error);
}
.form-status[data-state=ok] {
  color: var(--color-success);
}
.trap {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@container contact (inline-size > 56rem) {
  .contact-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
  .contact-intro {
    position: sticky;
    inset-block-start: calc(var(--nav-height) + var(--space-lg));
  }
}
.thanks-card {
  display: grid;
  gap: var(--space-md);
  justify-items: start;
  max-inline-size: 48rem;
}
.thanks-mark {
  display: grid;
  place-items: center;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  border: var(--rule-hair) solid var(--color-accent-strong);
  border-radius: var(--radius-l);
  background: var(--color-accent);
  box-shadow: var(--shadow-raised-s);
  color: var(--color-accent-ink);
}
.thanks-mark .icon {
  inline-size: 2rem;
  block-size: 2rem;
}
.thanks-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
}
.lost {
  inline-size: min(100%, 15rem);
  block-size: auto;
  overflow: visible;
}
.lost-line {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lost-a,
.lost-c {
  fill: var(--color-accent);
}
.lost-b {
  fill: var(--color-ink);
}
.lost-d {
  fill: var(--color-paper);
  stroke: var(--color-rule);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(14deg);
}
.contact-form :is(input, select, textarea):focus-visible {
  outline: var(--ring-width) solid var(--color-focus);
  outline-offset: 1px;
  border-color: var(--color-focus);
}
.thanks-links a:focus-visible {
  outline: var(--ring-width) solid var(--color-focus);
  outline-offset: var(--ring-width);
}
.contact-art {
  inline-size: 100%;
  overflow: clip;
  border: var(--rule-hair) solid var(--color-hair);
  border-radius: var(--radius-l);
}
.contact-art img {
  inline-size: 100%;
}