/* =========================================================
   AZOTH — base, layout and components
   ========================================================= */

/* ---------------------------------------------------------------
   Reset
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, p, figure, table { margin: 0; }
img { max-width: 100%; display: block; }
table { border-collapse: collapse; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background: var(--ink);
  color: var(--text-on-ink);
  min-height: 100svh;
}

/* Visible keyboard focus everywhere — never removed, only restyled. */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------
   Section rhythm — one rule owns section padding so it never has
   to fight element-level margins for specificity.
   --------------------------------------------------------------- */
.section {
  position: relative;
  padding-block: var(--section-py);
  padding-inline: var(--section-px);
}

.section__inner {
  max-width: var(--content-max);
  margin-inline: auto;
}

.ink-ground {
  background-color: var(--ink);
  color: var(--text-on-ink);
}

.parchment-ground {
  background-color: var(--parchment);
  color: var(--text-on-parchment);
}

.wax-ground {
  background-color: var(--wax);
  color: var(--text-on-wax);
}

/* Paper grain — tiled SVG noise, low opacity, ink ground only. */
.ink-ground::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--z-grain);
  background-image: url('../assets/grain.svg');
  background-repeat: repeat;
  background-size: 180px 180px;
  pointer-events: none;
}

.ink-ground > * {
  position: relative;
  z-index: var(--z-content);
}

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  transition-property: background-color, border-color, transform;
  transition-duration: var(--duration-micro);
  transition-timing-function: var(--ease-weighted);
}

@media (hover: hover) and (pointer: fine) {
  .button:hover {
    transform: translateY(-2px);
  }
}

.button:active {
  transform: translateY(0);
}

.button--wax {
  background-color: var(--wax);
  color: var(--text-on-wax);
  border-color: var(--wax-bright);
}

.button--wax:hover {
  background-color: var(--wax-bright);
}

.button--wax:active {
  background-color: var(--wax-deep);
}

/* ---------------------------------------------------------------
   Scroll progress — a thin ruled line, like a bookmark ribbon
   tracking how far through the ledger the visitor has read.
   --------------------------------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--gilt);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: var(--z-seal-mark);
  pointer-events: none;
}

/* ---------------------------------------------------------------
   Seal mark — small fixed brand mark, persists while scrolling.
   --------------------------------------------------------------- */
.seal-mark {
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  z-index: var(--z-seal-mark);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 3px;
  border-radius: 50%;
  /* A parchment coin behind the seal — without it, the wax-red mark
     disappears against the wax-ground sections (Case I, The Work,
     The Teardown), which share the exact same red. */
  background-color: var(--parchment);
  box-shadow: 0 4px 14px rgba(23, 18, 15, 0.45);
  transition: transform var(--duration-micro) var(--ease-weighted);
}

.seal-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

@media (hover: hover) and (pointer: fine) {
  .seal-mark:hover {
    transform: scale(1.08);
  }
}

.seal-mark:active {
  transform: scale(0.96);
}

@media (min-width: 48em) {
  .seal-mark {
    top: var(--space-5);
    left: var(--space-5);
    width: 3.5rem;
    height: 3.5rem;
  }
}

/* ---------------------------------------------------------------
   Seal press — intro gate
   A native <dialog>, opened via showModal() so the browser
   handles focus-trapping and top-layer stacking for us. The seal
   drops in and settles on its own; entering the site is a
   deliberate act — the visitor presses the seal itself. Runs once
   per session. Without JS the dialog is simply never opened, so a
   no-script visitor lands straight on the real page instead of
   getting stuck behind it.
   --------------------------------------------------------------- */
.seal-press {
  position: fixed;
  inset: 0;
  z-index: var(--z-seal-press);
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  background-color: var(--parchment);
  color: var(--text-on-parchment);
}

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

html.seal-press-skip .seal-press {
  display: none;
}

.seal-press__trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4);
}

.seal-press__trigger:disabled {
  cursor: default;
}

.seal-press__stage {
  position: relative;
  display: block;
  width: min(52vw, 320px);
  aspect-ratio: 1;
  transition-property: filter, transform;
  transition-duration: var(--duration-micro);
  transition-timing-function: var(--ease-weighted);
}

.seal-press__trigger:focus-visible .seal-press__stage {
  filter: brightness(1.08);
}

@media (hover: hover) and (pointer: fine) {
  .seal-press__trigger:hover .seal-press__stage {
    filter: brightness(1.08);
    transform: scale(1.03);
  }
}

.seal-press__trigger:active .seal-press__stage {
  transform: scale(0.97);
}

.seal-press__seal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 34px rgba(23, 18, 15, 0.45));
  transform-origin: 50% 30%;
  animation: seal-press-drop 1.5s var(--ease-weighted) both;
}

.seal-press__seal.is-tapped {
  animation: seal-press-tap 320ms var(--ease-weighted) both;
}

.seal-press__spatter {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.seal-press__spatter span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--wax);
  opacity: 0;
}

.seal-press__spatter.is-tapped span {
  animation: seal-press-spatter 350ms var(--ease-weighted) both;
}

.seal-press__spatter span:nth-child(1) { --tx: -58px; --ty: 30px; }
.seal-press__spatter span:nth-child(2) { --tx: 46px;  --ty: 42px; animation-delay: 20ms; }
.seal-press__spatter span:nth-child(3) { --tx: -34px; --ty: 54px; animation-delay: 40ms; width: 4px; height: 4px; }
.seal-press__spatter span:nth-child(4) { --tx: 62px;  --ty: 14px; animation-delay: 10ms; width: 4px; height: 4px; }
.seal-press__spatter span:nth-child(5) { --tx: -14px; --ty: 60px; animation-delay: 50ms; }
.seal-press__spatter span:nth-child(6) { --tx: 20px;  --ty: 58px; animation-delay: 30ms; width: 3px; height: 3px; }

.seal-press__caption {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-on-parchment-dim);
  opacity: 0;
  animation: seal-press-caption-in var(--duration-reveal) var(--ease-weighted) both;
  animation-delay: 1.1s;
}

.seal-press__trigger:hover .seal-press__caption,
.seal-press__trigger:focus-visible .seal-press__caption {
  color: var(--text-on-parchment);
}

.seal-press.is-leaving {
  animation: seal-press-fade var(--duration-reveal-slow) var(--ease-weighted) forwards;
}

@keyframes seal-press-drop {
  0%   { transform: translateY(-160%) scale(1, 1); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translateY(0%) scale(1, 1); }
  58%  { transform: translateY(0%) scale(1.06, 0.9); }
  70%  { transform: translateY(0%) scale(0.99, 1.02); }
  88%  { transform: translateY(0%) scale(1, 1); }
  100% { transform: translateY(0%) scale(1, 1); }
}

@keyframes seal-press-tap {
  0%   { transform: scale(1, 1); }
  45%  { transform: scale(1.07, 0.89); }
  100% { transform: scale(1, 1); }
}

@keyframes seal-press-spatter {
  0%   { transform: translate(0, 0) scale(0); opacity: 0; }
  35%  { opacity: 0.8; }
  100% { transform: translate(var(--tx), var(--ty)) scale(1); opacity: 0; }
}

@keyframes seal-press-caption-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes seal-press-fade {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
}

.hero__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  width: 100%;
}

.hero__headline {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-variation-settings: 'opsz' 144, 'WONK' 1, 'SOFT' 0;
  max-width: 18ch;
  color: var(--text-on-ink);
}

/* Word-mask reveal — each word rises up through a clipped slit, like
   paper pulling through a press. Only applied once hero-reveal.js has
   split the text; plain text (no-JS, or the skip path) stays visible
   by default, so nothing here can leave the headline permanently
   hidden. */
.hero__word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.hero__word {
  display: inline-block;
  transform: translateY(110%);
  transition: transform var(--duration-reveal-slow) var(--ease-weighted);
  transition-delay: calc(var(--i, 0) * 40ms);
}

.hero__headline.is-revealed .hero__word {
  transform: translateY(0);
}

.hero__lede {
  margin-top: var(--space-6);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  max-width: 42ch;
  color: var(--text-on-ink-dim);
}

.hero .button {
  margin-top: var(--space-7);
}

@media (min-width: 64em) {
  .hero__lede { margin-top: var(--space-7); }
}

/* ---------------------------------------------------------------
   Proof ledger
   --------------------------------------------------------------- */
.proof-ledger__headline {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-on-parchment-dim);
  border-block: 1px solid var(--gilt-dim);
  padding-block: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.proof-ledger__headline .sep {
  color: var(--gilt);
}

.ledger-scroll {
  margin-top: var(--space-7);
  overflow-x: auto;
}

.ledger-table {
  width: 100%;
  min-width: 30rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
}

.ledger-table tr {
  border-bottom: 1px solid rgba(91, 102, 112, 0.3);
}

.ledger-table tr:first-child {
  border-top: 1px solid var(--gilt-dim);
}

.ledger-table td {
  padding-block: var(--space-4);
  padding-inline-end: var(--space-4);
  white-space: nowrap;
  vertical-align: baseline;
}

.ledger-table__name {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  font-variation-settings: 'opsz' 40, 'WONK' 0, 'SOFT' 0;
  letter-spacing: 0;
  width: 100%;
}

.ledger-table__place {
  color: var(--text-on-parchment-dim);
}

.ledger-table__rating {
  font-size: var(--fs-mono-lg);
  font-weight: 600;
  text-align: right;
}

.ledger-table__count {
  color: var(--text-on-parchment-dim);
  text-align: right;
}

[data-count-to] {
  display: inline-block;
  min-width: 2ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 48em) {
  .ledger-table__name { font-size: 1.75rem; }
}

/* ---------------------------------------------------------------
   Shared utilities — measure, section titles, reveal-on-scroll
   --------------------------------------------------------------- */
.measure {
  max-width: var(--measure);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  font-variation-settings: 'opsz' 100, 'WONK' 1, 'SOFT' 0;
  text-wrap: balance;
}

.prose {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.prose p {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}

.placeholder {
  color: var(--gilt);
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 3px;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition-property: opacity, transform;
  transition-duration: var(--duration-reveal);
  transition-timing-function: var(--ease-weighted);
  transition-delay: calc(var(--i, 0) * var(--stagger-step));
}

[data-reveal].is-in-view {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------
   Case studies
   --------------------------------------------------------------- */
.case-study {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.case-study__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.case-study__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  opacity: 0.75;
}

.case-study__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  font-variation-settings: 'opsz' 100, 'WONK' 1, 'SOFT' 0;
  text-wrap: balance;
}

.case-study__dek {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  opacity: 0.85;
}

.case-study__intro,
.case-study__closing {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}

.case-plate {
  margin: 0;
  max-width: 22rem;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  padding: var(--space-3);
}

.case-plate img {
  width: 100%;
  height: auto;
}

.case-plate figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--gilt);
}

.case-study__proof {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.case-study__proof .sep {
  color: var(--gilt);
  margin-inline: var(--space-3);
}

.case-study__proof a,
.ledger-table__name a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--gilt);
  text-underline-offset: 3px;
  transition: color var(--duration-micro) var(--ease-weighted);
}

.case-study__proof a:hover,
.ledger-table__name a:hover {
  color: var(--gilt);
}

.sigil-slot {
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 50%;
  border: 1px dashed currentColor;
  opacity: 0.55;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.sigil-slot__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

/* ---------------------------------------------------------------
   Transmutation on scroll — a before plate the after plate wipes
   over, left to right, once the pair scrolls into view.
   --------------------------------------------------------------- */
.transmute {
  position: relative;
  display: grid;
}

.transmute__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 36px;
  margin-left: -18px;
  z-index: 2;
  cursor: ew-resize;
  touch-action: none;
  opacity: 0;
  transition: opacity var(--duration-reveal-fast) var(--ease-weighted);
}

.transmute__handle.is-ready {
  opacity: 1;
}

.transmute__handle::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background-color: var(--gilt);
  transform: translateX(-50%);
}

.transmute__handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--gilt);
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 10px rgba(23, 18, 15, 0.4);
  transition: transform var(--duration-micro) var(--ease-weighted);
}

.transmute.is-dragging .transmute__handle::after {
  transform: translate(-50%, -50%) scale(1.1);
}

.transmute__handle:focus-visible::after {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

.transmute__panel {
  grid-area: 1 / 1;
  padding: var(--space-6) var(--space-5);
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}

.transmute__panel--before {
  opacity: 0.65;
}

.transmute__panel--after {
  border-left: 2px solid var(--gilt);
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--duration-reveal-slow) var(--ease-weighted);
}

.wax-ground .transmute__panel--after {
  background-color: var(--wax);
}

.ink-ground .transmute__panel--after {
  background-color: var(--ink);
}

.transmute.is-in-view .transmute__panel--after {
  clip-path: inset(0 0 0 0);
}

.transmute__label {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--gilt);
  margin-bottom: var(--space-3);
}

.transmute__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: var(--measure);
}

/* ---------------------------------------------------------------
   The work — two ruled ledger columns, no icons
   --------------------------------------------------------------- */
.work-intro {
  margin-top: var(--space-5);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  opacity: 0.9;
}

/* ---------------------------------------------------------------
   The route — a hand-drawn trade route charting the five stops of
   the engagement, dashed path with stamped waypoints, for a
   first-time visitor to read at a glance before the full list.
   Vertical on narrow screens, horizontal from tablet up.
   --------------------------------------------------------------- */
.route {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  position: relative;
}

.route::before {
  content: '';
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 20px;
  border-left: 2px dashed color-mix(in srgb, currentColor 35%, transparent);
}

.route__stop {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-inline-start: 56px;
  max-width: 28rem;
}

.route__marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--gilt);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-small);
  z-index: 1;
}

.route__label {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-heading);
  font-variation-settings: 'opsz' 40, 'WONK' 0, 'SOFT' 0;
}

.route__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  opacity: 0.85;
}

/* A branch off the route — real evidence for a stop that has some,
   rather than every stop getting a matching row (only III and V
   currently have real assets to show). */
.route__branch {
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px dashed color-mix(in srgb, currentColor 30%, transparent);
}

.route__branch-label {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--gilt);
}

.route__logos {
  margin-top: var(--space-3);
  display: flex;
  gap: var(--space-3);
}

.route__logos img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.route__branch--stamp {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.route__stamp {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--gilt);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-mono-lg);
  color: var(--gilt);
}

.route__branch--stamp .route__branch-label {
  margin-top: 0;
}

@media (min-width: 48em) {
  .route {
    flex-direction: row;
    gap: var(--space-5);
  }

  .route::before {
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: auto;
    border-left: 0;
    border-top: 2px dashed color-mix(in srgb, currentColor 35%, transparent);
  }

  .route__stop {
    flex: 1;
    flex-direction: column;
    padding-inline-start: 0;
    padding-top: 56px;
    max-width: none;
  }

  .route__marker {
    left: 0;
    top: 0;
  }
}

.work-columns__eyebrow {
  margin-top: var(--space-9);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--gilt);
  border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  padding-bottom: var(--space-3);
}

.work-columns {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

@media (min-width: 48em) {
  .work-columns {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-9);
  }

  .work-column:last-child {
    border-inline-start: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    padding-inline-start: var(--space-9);
  }
}

.work-column__title {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--gilt);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}

.work-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
}

.work-list li {
  padding-block: var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

/* ---------------------------------------------------------------
   Button variant for use on a wax ground
   --------------------------------------------------------------- */
.button--parchment {
  background-color: var(--parchment);
  color: var(--text-on-parchment);
  border-color: var(--parchment);
}

.button--parchment:hover {
  background-color: var(--parchment-raised);
}

.button--parchment:active {
  filter: brightness(0.95);
}

/* ---------------------------------------------------------------
   Contact
   --------------------------------------------------------------- */
.contact-table {
  min-width: 0;
}