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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--bar);
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1,
h2,
h3,
p,
ul,
figure {
  margin: 0;
}

img,
canvas,
svg {
  display: block;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

.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;
}

/* Keeps a hyphenated word whole (the fonts carry no non-breaking hyphen). */
.nowrap {
  white-space: nowrap;
}

/* Section eyebrows, set as zwischen.ai sets its own: tracked sans caps and a
   short rule after them. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.eyebrow::after {
  content: "";
  flex: none;
  width: 4.25rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.eyebrow--amber {
  color: var(--amber);
}

.eyebrow + .title {
  margin-top: clamp(1.25rem, 2vw, 1.875rem);
}

/* Small print: the mono voice, used sparingly (the footer). */
.annot {
  font-family: var(--mono);
  font-size: var(--t-annot);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Every section heading, set as zwischen.ai sets its own. */
.title {
  font-family: var(--serif);
  font-weight: 450;
  font-size: var(--t-section);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* All reading text. */
.prose {
  max-width: var(--measure);
  font-family: var(--serif);
  line-height: 1.62;
  text-wrap: pretty;
}

.prose p + p {
  margin-top: 1.1em;
}

/* ── Buttons and links, built as zwischen.ai builds its own: the interface
   sans at 600, a 3.5rem button, the arrow in a bay cut on the house 13deg
   slant. On hover a band of light sweeps across on the slant, the button
   lifts, and the arrow leaves and comes round again; it sinks when pressed.
   --ax/--ay set where the arrow leaves: straight on for a link within the
   page, up and out for one that leaves the site. ── */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 3.5rem;
  border: 0;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

/* Primary: a lit solid, its arrow in a darker bay with a fine light edge on
   the slant. Amber by default; --deep for the cyan contact; --paper on a
   coloured panel. */
.btn--primary {
  --btn: var(--amber);
  --btn-top: #f4bd5f;
  --btn-bay: #c8862a;
  --btn-ink: var(--night);
  --btn-arrow: var(--btn-ink);
  --btn-shine: rgba(255, 255, 255, 0.55);
  --btn-glow: rgba(176, 108, 22, 0.75);
  --ax: 150%;
  --ay: 0%;
  padding: 0 5.1rem 0 1.75rem;
  overflow: hidden;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--btn-top), var(--btn) 72%);
  color: var(--btn-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    0 1px 2px rgba(0, 0, 0, 0.16),
    0 0.9rem 1.6rem -0.9rem var(--btn-glow);
  transition:
    transform var(--quick) var(--ease),
    box-shadow var(--quick) var(--ease);
}

/* The sweep, painted before the bay so it passes behind it. */
.btn--primary::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6rem;
  width: 3.5rem;
  background: linear-gradient(90deg, transparent, var(--btn-shine), transparent);
  transform: skewX(-13deg);
  pointer-events: none;
}

.btn--primary::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -0.7rem;
  width: 4.2rem;
  background: var(--btn-bay);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.22);
  transform: skewX(-13deg);
  transition: width var(--quick) var(--ease);
}

.btn--primary svg {
  position: absolute;
  right: 1.05rem;
  z-index: 1;
  width: 1.3rem;
  height: 1.3rem;
  color: var(--btn-arrow);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    0 2px 4px rgba(0, 0, 0, 0.14),
    0 1.4rem 2.2rem -1rem var(--btn-glow);
}

.btn--primary:hover::before {
  animation: btn-sweep 0.85s var(--ease);
}

.btn--primary:hover::after {
  width: 4.8rem;
}

.btn--primary:hover svg,
.link-arrow:hover svg {
  animation: btn-arrow 0.5s var(--ease);
}

.btn--primary:active {
  transform: translateY(0);
  transition-duration: 60ms;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    0 0.45rem 0.9rem -0.7rem var(--btn-glow);
}

.btn--deep {
  --btn: var(--deep);
  --btn-top: #134442;
  --btn-bay: var(--night);
  --btn-ink: var(--on-dark);
  --btn-shine: rgba(122, 214, 208, 0.22);
  --btn-glow: rgba(4, 25, 26, 0.6);
}

/* Paper on a coloured panel: the arrow white in a bay of the panel's own
   colour (--btn-accent, set by the panel). Its links leave the site. */
.btn--paper {
  --btn: var(--paper);
  --btn-top: #fff;
  --btn-bay: var(--btn-accent, var(--ink));
  --btn-ink: var(--ink);
  --btn-arrow: #fff;
  --btn-shine: rgba(196, 22, 28, 0.14);
  --btn-glow: rgba(40, 0, 2, 0.6);
  --ax: 120%;
  --ay: -120%;
}

.btn--paper svg {
  right: 1.35rem;
  width: 0.95rem;
  height: 0.95rem;
}

@keyframes btn-sweep {
  from { left: -6rem; }
  to { left: calc(100% + 2rem); }
}

@keyframes btn-arrow {
  0% { transform: none; opacity: 1; }
  45% { transform: translate(var(--ax), var(--ay)); opacity: 0; }
  46% { transform: translate(calc(-1 * var(--ax)), calc(-1 * var(--ay))); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

/* A text link: the same sans over a faint rule, a full one drawing in on
   hover. Its diagonal arrow marks a link that leaves the site. */
.link-arrow {
  --ax: 120%;
  --ay: -120%;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding-bottom: 0.3rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  text-decoration: none;
  background:
    linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat,
    linear-gradient(color-mix(in srgb, currentColor 32%, transparent), color-mix(in srgb, currentColor 32%, transparent)) 0 100% / 100% 1px no-repeat;
  transition: background-size 0.45s var(--ease);
}

.link-arrow svg {
  flex: none;
  width: 0.8em;
  height: 0.8em;
}

.link-arrow:hover {
  background-size: 100% 1px, 100% 1px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}