.minimal {
  color-scheme: dark;
  --paper: #0d0e12;
  --ink: #f6f2ed;
  --quiet: #b8b2bd;
  --accent: #d8b7e2;
  --rule: #3e3844;
}

.spread {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  min-height: 100svh;
}

.visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #09080d url("pixel-field.svg") center / cover no-repeat;
  border-right: 1px solid var(--rule);
}

.avatar {
  position: relative;
  width: clamp(200px, 21vw, 304px);
}

.avatar img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.content {
  padding: clamp(32px, 6.5vh, 66px) clamp(25px, 4.1vw, 68px);
}

.introduction h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 4.45vw, 68px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.045em;
  padding-bottom: clamp(22px, 4vh, 36px);
  border-bottom: 1px solid var(--rule);
}

.positioning, .promise {
  font: 500 clamp(14px, 1.2vw, 17px)/1.5 var(--mono);
}

.positioning { margin-top: clamp(18px, 3.4vh, 32px); }
.promise { margin-top: 10px; color: var(--quiet); }

.introduction .book {
  margin-top: 22px;
  padding-inline: 12px;
  background: transparent;
  border: 1px solid var(--quiet);
  color: var(--ink);
}

.introduction .book:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.minimal .services { margin-top: clamp(28px, 6.2vh, 62px); }
.minimal .services-header { border-top-color: var(--rule); }
.minimal .rate-list li { grid-template-columns: minmax(0, 1fr) 148px; }
.minimal .offer { grid-template-columns: minmax(155px, 44%) minmax(0, 1fr); }
.minimal .offer h3 { font-size: 14px; }
.minimal .offer p { font-size: 13px; }

@media (max-width: 1270px) {
  .minimal .offer { grid-template-columns: 1fr; gap: 3px; }
}

@media (max-width: 820px) {
  .spread { display: block; }
  .visual { height: clamp(114px, 20svh, 178px); border: 0; }
  .avatar { width: clamp(118px, 18svh, 152px); }

  .content { width: min(100%, 630px); margin-inline: auto; padding: 15px 21px 23px; }
  .introduction h1 { padding-bottom: 12px; }
  .positioning { margin-top: 14px; }
  .promise { margin-top: 5px; }
  .introduction .book { margin-top: 15px; }
  .minimal .services { margin-top: 24px; }
  .minimal .rate-list li { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (min-width: 621px) and (max-width: 820px) {
  .minimal .offer { grid-template-columns: minmax(155px, 44%) minmax(0, 1fr); }
  .minimal .rate-list li { grid-template-columns: minmax(0, 1fr) 148px; }
}

@media (max-width: 355px) {
  .content { padding-inline: 15px; }
  .minimal .offer h3 { font-size: 13px; }
  .minimal .offer p { font-size: 12px; }
}

.visual.has-ascii-field { background: #0d0e12; }

.living-field,
.portrait-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  pointer-events: none;
}

.living-field { z-index: -1; }
.portrait-field { z-index: 1; }

.has-particles img { opacity: 0; }

.introduction h1 {
  position: relative;
  border: 0;
}

.introduction h1::after,
.minimal .services-header::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 6px;
  background: repeating-linear-gradient(90deg, #6b6070 0 2px, transparent 2px 7px);
  mask-image: linear-gradient(#000 0 2px, transparent 2px 4px, #000 4px 6px);
}

.introduction h1::after { bottom: 0; }

.has-wordmark > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.has-wordmark > canvas {
  display: block;
  width: min(100%, 5.65em);
  height: auto;
  image-rendering: pixelated;
}

.introduction .book {
  position: relative;
  isolation: isolate;
  background: none;
  border: 0;
}

.introduction .book::before,
.introduction .book::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px), 0 4px, 2px 4px, 2px 2px, 4px 2px);
}

.introduction .book::before { inset: 0; background: var(--quiet); }
.introduction .book::after { inset: 1px; background: var(--paper); }
.introduction .book:hover { background: none; }
.introduction .book:hover::after { background: var(--ink); }

.pixel-arrow { width: 8px; height: 8px; fill: currentColor; shape-rendering: crispEdges; }

.minimal .services-header { position: relative; border-top: 0; padding-top: 15px; }
.minimal .services-header::before { top: 0; }
.minimal .offer h3 { font-family: var(--mono); font-weight: 500; font-size: 13px; }
.minimal .rate-list li { border-bottom: 1px dashed var(--rule); }

.introduction .positioning,
.introduction .promise,
.introduction .book {
  font-family: "Pixelify Sans", var(--mono);
  font-weight: 400;
}

.introduction .positioning,
.introduction .promise {
  font-size: clamp(16px, 1.38vw, 20px);
  line-height: 1.28;
}

.introduction .book { font-size: 15px; }

.introduction .promise {
  margin-top: 22px;
}

.introduction .confidentiality {
  color: var(--ink);
}

/* The consultancy variant keeps the illustration as a steady identity cue.
   Movement is confined to the field and the action's tiny directional detail. */
.minimal[data-motion="studio"] .visual { border-right-color: #2d2a33; }
.minimal[data-avatar-blend="difference"] .avatar { z-index: 1; }
.minimal[data-avatar-blend="difference"] .visual.has-ascii-field .avatar {
  /* Same compositing as autological.dev's #center-logo. The PNG's alpha
     limits the blend to the portrait; .visual isolates it from the text. */
  mix-blend-mode: difference;
}
.minimal[data-motion="studio"] .introduction h1::after,
.minimal[data-motion="studio"] .services-header::before { opacity: .55; }

@media (prefers-reduced-motion: no-preference) {
  .minimal[data-motion="studio"] .has-ascii-field .living-field {
    animation: studio-field-enter 900ms ease-out both;
  }

  .minimal[data-motion="studio"] .book { transition: color 180ms ease-out; }
  .minimal[data-motion="studio"] .book::after { transition: background-color 180ms ease-out; }
  .minimal[data-motion="studio"] .pixel-arrow { transition: transform 180ms ease-out; }
  .minimal[data-motion="studio"] .book:is(:hover, :focus-visible) .pixel-arrow {
    transform: translate(1px, -1px);
  }
}

@keyframes studio-field-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* VT323 by Peter Hull and Paper Mono by the Paper Mono Project Authors
   (SIL OFL 1.1). Attribution and licenses: fonts/README.md. */
@font-face {
  font-family: "VT323";
  src: url("fonts/vt323-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Paper Mono";
  src: url("fonts/paper-mono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.minimal[data-typography="autological"] {
  --mono: "Paper Mono", ui-monospace, monospace;
  font-family: var(--mono);
  font-weight: 300;
}

.minimal[data-typography="autological"] .introduction h1 {
  font-family: "VT323", var(--mono);
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: .9;
}

.minimal[data-typography="autological"] .introduction :is(.positioning, .promise, .book) {
  font-family: var(--mono);
  font-weight: 300;
}

.minimal[data-typography="autological"] .introduction :is(.positioning, .promise) {
  font-size: 16px;
  line-height: 1.5;
}

.minimal[data-typography="autological"] .introduction .book {
  font-size: 14px;
}

.site-footer { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 24px; color: var(--quiet); font: 400 12px/1.5 var(--mono); }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 4px; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 10; padding: 12px; background: var(--ink); color: var(--paper); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
@media (max-width: 620px) {
  .introduction .company-handoff { display: none; }
  .minimal .rate-list li { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .minimal .offer { min-width: 0; }
  .minimal .offer h3 { overflow-wrap: anywhere; }
}