/* ==========================================================================
   Webowski — main stylesheet
   Breakpoints: tablet ≤ 1024px, mobile ≤ 767px
   ========================================================================== */

/* DM Sans, variable weight 400–500, latin subset (self-hosted, OFL licence). */
@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/dm-sans-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

/* Display face used by the canvas background only. */
@font-face {
  font-family: "adieu";
  src: url("/assets/fonts/adieu-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  --font-main: "DM Sans", system-ui, sans-serif;

  --color-bg: #000;
  --color-main: #fff;
  --color-accent: #ffbdc1;
  --color-muted: #9a8f90;
  --color-panel: #0b0909;
  --color-line: rgb(255 255 255 / 0.14);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --gutter: 20px;
  --gutter-x2: calc(var(--gutter) * 2);
  --gutter-x5: calc(var(--gutter) * 5);
  --gutter-d2: calc(var(--gutter) / 2);

  --header-height: 128px;
  --container: 1380px;

  --t-xxs: 1.2rem;
  --t-r: 1.6rem;
  --t-l: 2.8rem;
  --t-xxl: 4.2rem;
}

@media (max-width: 1024px) {
  :root {
    --gutter: 18px;
    --t-l: 2.4rem;
    --t-xxl: 2.6rem;
  }
}

@media (max-width: 767px) {
  :root {
    --gutter: 15px;
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-main);
  font-size: var(--t-r);
  color: var(--color-main);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-y: scroll;
}

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

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 4px;
}

::selection {
  background: var(--color-accent);
  color: var(--color-bg);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* --------------------------------------------------------------------------
   Layout + type helpers
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.t-accent {
  color: var(--color-accent);
}

.eyebrow {
  font-size: var(--t-xxs);
  text-transform: uppercase;
}

.heading-l {
  font-size: var(--t-l);
  font-weight: 500;
}

.rte {
  line-height: 1.5;
}

.rte p:not(:last-child) {
  margin-bottom: var(--gutter);
}

.rte strong {
  font-weight: 500;
}

.anchor-link::before {
  content: "\21d8";
  margin-right: 10px;
  color: var(--color-accent);
}

/* Email that copies itself to the clipboard on click. */
.copy-email {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--color-accent);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

.site-header__logo {
  display: block;
  width: 60px;
  color: var(--color-main);
}

.site-header__logo svg {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .site-header__logo {
    width: 42px;
  }
}

/* --------------------------------------------------------------------------
   Home sections
   -------------------------------------------------------------------------- */

main {
  line-height: 1;
}

/* Leaves the first screen clear for the canvas banner. */
.home {
  padding-top: 95vh;
}

.section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 66vh;
  padding-block: var(--gutter-x2);
}

.section > .container {
  width: 100%;
}

/* In-page anchors land below the fixed header. */
#services,
#projects {
  scroll-margin-top: calc(var(--header-height) + 20px);
}

/* Intro */

.intro__inner {
  width: 83.333%;
}

.intro__heading {
  margin-bottom: var(--gutter-x2);
  font-size: var(--t-xxl);
  font-weight: 500;
  line-height: 1.3;
}

.intro__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter);
}

@media (max-width: 1024px) {
  .intro__inner {
    width: 100%;
  }
}

/* Services */

/* Two columns: heading + text on the left, the services list on the right, both starting at the top. */
.services {
  display: grid;
  grid-template-columns: 41.666% 41.666%;
  /* The list spans both rows; the flexible second row takes its extra height. */
  grid-template-rows: auto 1fr;
  justify-content: space-between;
  align-items: start;
  row-gap: var(--gutter);
}

.services__header {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  margin-bottom: var(--gutter);
}

/* Pillars: own band under the intro, so it doesn't need the full section height. */
.section--pillars {
  min-height: 0;
  padding-block: var(--gutter-x5) calc(var(--gutter-x5) * 1.6);
}

.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter-x5) 6rem;
}

.pillar {
  display: flex;
  flex-direction: column;
  gap: var(--gutter-d2);
}

.pillar__title {
  margin-bottom: var(--gutter-d2);
  text-wrap: balance;
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1.2;
}

.pillar__text {
  max-width: 38ch;
  font-size: 1.4rem;
  line-height: 1.5;
}

/* Pillar illustrations: scenes are built and animated by pillars.js. */
.pillar__art {
  position: relative;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--gutter-x2);
  overflow: hidden;
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  font-family: var(--font-mono);
  font-size: 1.1rem;
  line-height: 1.4;
}

.art-scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.8rem;
}

.art-scene > svg {
  display: block;
  flex: 1;
  width: 100%;
  min-height: 0;
}

.art-packet {
  fill: var(--color-accent);
}

/* Storefronts: phone cart + match engine console */
.art-up {
  display: flex;
  flex: 1;
  gap: 4%;
  min-height: 0;
}

.art-muted {
  color: var(--color-muted);
}

.art-phone {
  position: relative;
  display: flex;
  flex: 0 0 40%;
  flex-direction: column;
  gap: 0.5em;
  padding: 1.7em 0.8em 0.8em;
  overflow: hidden;
  font-size: 0.8em;
  background: var(--color-bg);
  border: 1px solid var(--color-muted);
  border-radius: 1.6em;
}

.art-phone::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 50%;
  width: 30%;
  height: 0.55em;
  background: var(--color-line);
  border-radius: 1em;
  transform: translateX(-50%);
}

.art-phone__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--color-muted);
}

.art-phone__head b {
  color: var(--color-main);
  font-family: var(--font-main);
  font-size: 1.15em;
  font-weight: 500;
}

.art-ship {
  display: grid;
  gap: 0.3em;
}

.art-ship__bar {
  height: 3px;
  background: var(--color-line);
}

.art-ship__bar i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--color-muted);
  transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.3s;
}

.art-ship__bar i.is-full {
  background: var(--color-accent);
}

.art-ship small {
  color: var(--color-muted);
  font-size: 0.9em;
}

.art-ship small.is-full {
  color: var(--color-accent);
}

.art-phone__lines {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.art-phone__lines li {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding-bottom: 0.35em;
  border-bottom: 1px solid var(--color-line);
}

.art-phone__lines li span:nth-child(2),
.art-rec__row span:nth-of-type(1) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.art-thumb {
  display: inline-block;
  flex: 0 0 auto;
  width: 1.7em;
  height: 1.7em;
  border-radius: 2px;
}

.art-rec {
  position: absolute;
  right: 0.8em;
  bottom: 3.4em;
  left: 0.8em;
  display: grid;
  gap: 0.4em;
  padding: 0.6em;
  background: var(--color-panel);
  border: 1px solid var(--color-accent);
  opacity: 0;
  transform: translateY(1.2em);
  transition: opacity 0.3s, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.art-rec.is-shown {
  opacity: 1;
  transform: none;
}

.art-rec small {
  color: var(--color-accent);
  font-size: 0.9em;
}

.art-rec__row {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.art-btn {
  padding: 0.35em 0.6em;
  color: var(--color-accent);
  white-space: nowrap;
  border: 1px solid var(--color-accent);
  transition: background 0.2s, color 0.2s;
}

.art-btn.is-on {
  color: var(--color-bg);
  background: var(--color-accent);
}

.art-phone__cta {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding: 0.6em 0.7em;
  color: var(--color-bg);
  font-weight: 500;
  background: var(--color-main);
}

.art-console {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: #050404;
  border: 1px solid var(--color-line);
}

.art-console__head {
  display: flex;
  justify-content: space-between;
  padding: 0.5em 0.7em;
  color: var(--color-muted);
  font-size: 0.85em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-line);
}

.art-live {
  color: var(--color-accent);
}

.art-live::before {
  content: "●";
  margin-right: 0.4em;
  animation: art-blink 1.2s steps(2) infinite;
}

@keyframes art-blink {
  50% { opacity: 0.2; }
}

.art-console__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.25em;
  padding: 0.6em 0.7em;
  overflow: hidden;
  font-size: 0.85em;
}

.art-ln {
  overflow: hidden;
  color: var(--color-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.art-ln--sub {
  padding-left: 4.6em;
}

.art-ln b {
  color: var(--color-main);
  font-weight: 500;
}

.art-ln .k {
  display: inline-block;
  width: 4.6em;
  color: var(--color-main);
}

.art-ln .s {
  color: var(--color-accent);
}

.art-ln .x {
  color: var(--color-main);
  text-decoration: line-through;
  text-decoration-color: var(--color-accent);
}

.art-ln.is-typing {
  animation: art-type 0.35s steps(22) both;
}

@keyframes art-type {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

.art-phone__lines li.is-new {
  animation: art-in 0.4s ease-out;
}

@keyframes art-in {
  from { opacity: 0; transform: translateY(-6px); }
}

.is-glitching {
  animation: art-glitch 0.32s steps(2) 1;
}

@keyframes art-glitch {
  0% { text-shadow: 3px 0 #f00, -3px 0 #00f, 0 2px #0f0; transform: translateX(2px); }
  50% { text-shadow: -2px 0 #f00, 2px 0 #00f, 0 -2px #0f0; transform: translateX(-2px); }
  100% { text-shadow: none; transform: none; }
}

/* Operations */
.art-map line {
  stroke: var(--color-line);
  transition: stroke 0.3s;
}

.art-map line.is-on {
  stroke: var(--color-accent);
  stroke-opacity: 0.6;
}

.art-map__node rect {
  fill: var(--color-panel);
  stroke: var(--color-line);
  transition: stroke 0.3s;
}

.art-map__node.is-on rect {
  stroke: var(--color-accent);
}

.art-map__node text {
  fill: var(--color-main);
  font: 500 10px var(--font-mono);
}

.art-map__hub circle {
  fill: var(--color-accent);
}

.art-map__hub text {
  fill: var(--color-bg);
  font: 9px "adieu", var(--font-main);
}

.art-log {
  min-height: 2.8em;
  color: var(--color-muted);
}

.art-log div:first-child {
  color: var(--color-main);
}

/* Scale */
.art-release text {
  fill: var(--color-muted);
  font: 7px var(--font-mono);
}

.art-release__src circle {
  fill: var(--color-main);
}

.art-release__src text {
  fill: var(--color-main);
  font-size: 10px;
}

.art-wire {
  fill: none;
  stroke: var(--color-line);
  stroke-width: 0.8;
  opacity: 0;
  transition: opacity 0.4s, stroke 0.3s;
}

.art-wire.is-active {
  opacity: 1;
}

.art-wire.is-on {
  stroke: var(--color-accent);
}

.art-store {
  opacity: 0;
  transition: opacity 0.4s;
}

.art-store.is-active {
  opacity: 1;
}

.art-store circle {
  fill: var(--color-panel);
  stroke: var(--color-muted);
  transition: fill 0.3s, stroke 0.3s;
}

.art-store.is-live circle {
  fill: var(--color-accent);
  stroke: var(--color-accent);
}

.art-store.is-new circle {
  animation: art-pop 0.5s ease-out;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes art-pop {
  from { transform: scale(0); }
  60% { transform: scale(1.3); }
}

.art-status {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--color-muted);
}

.art-status b {
  color: var(--color-main);
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .is-glitching,
  .art-store.is-new circle,
  .art-phone__lines li.is-new,
  .art-ln.is-typing,
  .art-live::before {
    animation: none;
  }
}

@media (max-width: 767px) {
  .pillars {
    grid-template-columns: minmax(0, 1fr);
  }
}

.services__header,
.services__body {
  grid-column: 1;
}

.services__list {
  display: flex;
  flex-direction: column;
  grid-column: 2;
  grid-row: 1 / span 2;
  gap: var(--gutter-d2);
}

@media (max-width: 1024px) {
  .services {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--gutter-x2);
  }
}

/* Mobile: one column, list straight after the heading. */
@media (max-width: 767px) {
  .services {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .services__list {
    grid-column: 1;
    grid-row: auto;
    margin-bottom: var(--gutter-x2);
  }
}

/* Services list scenes (built by services.js). Without JS it stays a plain pink list. */
.svc__list {
  display: flex;
  flex-direction: column;
  gap: var(--gutter-d2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Once live, the whole block (scene, header and list) sits in one black box. */
.svc.is-live {
  padding-bottom: 1.4rem;
  background: var(--color-panel);
  border: 1px solid var(--color-line);
}

.svc__panel {
  border-bottom: 1px solid var(--color-line);
}

.svc__bar {
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1rem 1.4rem;
  color: var(--color-muted);
  font: 1.1rem var(--font-mono);
  border-bottom: 1px solid var(--color-line);
}

.svc__label {
  overflow: hidden;
  color: var(--color-main);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.svc__state.is-ok,
.svc__count.is-done {
  color: var(--color-accent);
}

.svc__stage {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 320 / 170;
}

.svc__head {
  display: flex;
  justify-content: space-between;
  margin-top: var(--gutter-d2);
  padding: 0 1.4rem;
  color: var(--color-muted);
  font: 1.2rem var(--font-mono);
}

/* About eight rows tall, scrolls without a scrollbar, fades at the edges that have more. */
.svc.is-live .svc__list {
  position: relative;
  max-height: 30rem;
  padding: 0 1.4rem;
  overflow-y: auto;
  scrollbar-width: none;
  --fade-top: 0%;
  --fade-bottom: 14%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);
}

.svc.is-live .svc__list::-webkit-scrollbar {
  display: none;
}

.svc.is-live .svc__list li {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  color: var(--color-muted);
  cursor: default;
  transition: color 0.25s;
}

.svc.is-live .svc__list li.is-pass {
  color: var(--color-accent);
}

.svc.is-live .svc__list li.is-current {
  color: var(--color-main);
}

.svc__name {
  flex: 1;
  min-width: 0;
}

.svc__ms {
  color: var(--color-muted);
  font: 1.1rem var(--font-mono);
  opacity: 0;
  transition: opacity 0.3s;
}

.is-pass .svc__ms {
  opacity: 1;
}

.svc__tick {
  flex: 0 0 auto;
  width: 1.2rem;
  height: 1.2rem;
}

.svc__tick rect {
  fill: none;
  stroke: var(--color-line);
  transition: stroke 0.3s;
}

.svc__tick path {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.6;
  stroke-dasharray: 12;
  stroke-dashoffset: 12;
  transition: stroke-dashoffset 0.3s ease-out;
}

.is-pass .svc__tick rect {
  stroke: var(--color-accent);
}

.is-pass .svc__tick path {
  stroke-dashoffset: 0;
}

/* Drawing vocabulary for the scenes */
.svc__stage text { font: 9px var(--font-mono); fill: var(--color-muted); }
.svc__stage .fg { fill: var(--color-main); }
.svc__stage .ac { fill: var(--color-accent); }
.svc__stage .big { font: 16px var(--font-main); font-weight: 500; fill: var(--color-main); }
.svc__stage .huge { font: 26px var(--font-main); font-weight: 500; fill: var(--color-main); }
.svc__stage .acf { fill: var(--color-accent); }
.svc__stage .fgf { fill: var(--color-main); }
.svc__stage .box { fill: none; stroke: var(--color-line); }
.svc__stage .box.on { stroke: var(--color-accent); }
.svc__stage .fill { fill: var(--color-line); }
.svc__stage .dash { fill: none; stroke: var(--color-accent); stroke-dasharray: 3 2; }
.svc__stage .wire { fill: none; stroke: var(--color-accent); stroke-width: 1; }
.svc__stage .rule { fill: none; stroke: var(--color-line); }
.svc__stage .node { fill: var(--color-panel); stroke: var(--color-muted); transition: fill 0.3s, stroke 0.3s; }
.svc__stage .node.on { fill: var(--color-accent); stroke: var(--color-accent); }
.svc__stage g { transition: opacity 0.3s, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.svc__stage .slide { opacity: 0; transform: translateX(-8px); }
.svc__stage .drop { opacity: 0; transform: translateY(-8px); }
.svc__stage .slide.in,
.svc__stage .drop.in { opacity: 1; transform: none; }
.svc__stage .track { fill: var(--color-line); transition: fill 0.3s; }
.svc__stage .track.on { fill: var(--color-accent); }
.svc__stage .knob { fill: var(--color-main); transition: transform 0.3s; }
.svc__stage .knob.on { transform: translateX(12px); }

/* Client logos */

/* Empty space above the logos, where the "FEATURED CLIENTS" banner shows through. */
.section--clients {
  padding-top: 40vh;
}

.clients {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.clients__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25%;
  aspect-ratio: 1.5;
}

.clients__item img {
  max-width: 128px;
  max-height: 64px;
  object-fit: contain;
}

@media (max-width: 1024px) {
  .clients__item img {
    max-width: 90px;
    max-height: 44px;
  }
}

@media (max-width: 767px) {
  .clients__item {
    width: 50%;
  }
}

/* Projects */

.projects {
  padding-top: 10vh;
}

.projects__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: var(--gutter-x5);
}

.projects__item {
  display: flex;
}

.project {
  display: flex;
  flex-direction: column;
  width: 83.333%;
  margin-inline: auto;
}

.project img {
  display: block;
  width: 100%;
}

.project__info {
  padding-top: var(--gutter);
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 200ms ease, transform 200ms ease;
}

.project__title {
  background: #000;
}

.project:hover .project__info,
.project:focus-visible .project__info {
  opacity: 1;
  transform: none;
}

@media (max-width: 1024px) {
  .project__info {
    opacity: 1;
    transform: none;
  }
}

/* Scroll reveals. main.js adds .has-reveal only when motion is allowed, so
   without JS (or with reduced motion) nothing starts hidden. */
.has-reveal [data-reveal] {
  transition:
    opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.has-reveal [data-reveal]:not(.is-revealed) {
  opacity: 0;
  transform: translate3d(0, 3rem, 0);
}

.has-reveal [data-reveal="image"] img {
  transition: clip-path 1.1s cubic-bezier(0.7, 0, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.has-reveal [data-reveal="image"]:not(.is-revealed) img {
  clip-path: inset(100% 0 0 0);
}

/* Mobile: two columns of portrait crops. */
@media (max-width: 767px) {
  .projects__list {
    column-gap: var(--gutter);
    row-gap: var(--gutter-x2);
  }

  .project {
    width: 100%;
  }

  .project img {
    aspect-ratio: 3 / 4;
    height: auto;
    object-fit: cover;
  }

  .project__info {
    padding-top: var(--gutter-d2);
    font-size: 1.3rem;
  }
}

/* Contact: the banner behind shows the email; the whole section is a copy button. */

.section--contact {
  position: relative;
  min-height: 100vh;
}

.contact__hit {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.contact__hit:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -1.6rem;
}

/* The pill that stands in for the mouse pointer (follows it on desktop). */
.contact__pill {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.contact__pill.is-visible {
  opacity: 1;
}

.contact__pill-icon {
  display: grid;
  place-items: center;
  width: 5.6rem;
  height: 5.6rem;
  color: var(--color-accent);
  background: var(--color-bg);
  border-radius: 50%;
}

.contact__pill-icon svg {
  width: 2.2rem;
  height: 2.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact__icon-done,
.contact__pill.is-copied .contact__icon-copy {
  display: none;
}

.contact__pill.is-copied .contact__icon-done {
  display: block;
}

/* Mouse: hide the real pointer, the pill replaces it. */
@media (hover: hover) and (pointer: fine) {
  .contact__hit {
    cursor: none;
  }
}

/* No pointer to follow on touch screens. */
@media (hover: none), (pointer: coarse) {
  .contact__pill {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0 var(--gutter);
}

.site-footer__links,
.site-footer__email {
  margin-bottom: var(--gutter-x2);
}

.site-footer__links li:not(:last-child) {
  margin-bottom: var(--gutter-d2);
}

/* --------------------------------------------------------------------------
   Background canvas (home only, see background.js)
   -------------------------------------------------------------------------- */

/* Sized to the large viewport so mobile address bars don't resize it mid-scroll. */
.bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  display: block;
  opacity: 0;
  transition: opacity 1200ms ease;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Legal / plain pages
   -------------------------------------------------------------------------- */

.legal {
  width: 41.666%;
  margin-inline: auto;
  padding-top: var(--header-height);
  padding-bottom: var(--gutter-x5);
}

.legal h1,
.legal h2,
.legal h3 {
  margin: var(--gutter-x2) 0 var(--gutter);
  font-size: var(--t-r);
  font-weight: 500;
  line-height: 1.3;
}

.legal h1 {
  margin-top: 0;
  font-size: var(--t-l);
}

.legal h3 {
  margin-top: var(--gutter);
}

.legal p,
.legal ul,
.legal address {
  margin-bottom: var(--gutter);
}

.legal ul {
  padding-left: var(--gutter);
  list-style: disc;
}

.legal li:not(:last-child) {
  margin-bottom: var(--gutter-d2);
}

.legal address {
  font-style: normal;
}

.legal a {
  color: var(--color-accent);
  overflow-wrap: anywhere;
}

.legal__updated {
  color: var(--color-accent);
}

@media (max-width: 1024px) {
  .legal {
    width: 75%;
  }
}

@media (max-width: 767px) {
  .legal {
    width: 100%;
  }
}

/* 404 */

.not-found {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--gutter-x2);
  min-height: 100vh;
}

.not-found__heading {
  font-size: var(--t-xxl);
  font-weight: 500;
  line-height: 1.3;
}