/* Plinth launch site. Tokens are the brief's; everything else builds on them. */

:root {
  --bg: #f4f1ea; /* bone, page background */
  --surface: #ebe6dc; /* stone, bands and the plinth slab */
  --surface-raised: #fbfaf6; /* cards */
  --line: #d8d1c3; /* hairlines */
  --text: #16151a; /* ink */
  --muted: #5e5a52; /* secondary text, 6.0:1 on --bg */
  --accent: #ff5a1f; /* signal orange, fills only, ink text on it (5.9:1) */
  --accent-ink: #b93a12; /* orange for text and links on --bg (5.0:1) */
  --accent-soft: #ffe2d4; /* tints, highlight behind annotations */
  --on-accent: #16151a;
  --focus: #16151a;
  --shadow:
    0 1px 0 rgb(22 21 26 / 0.04), 0 8px 24px -8px rgb(60 40 20 / 0.18), 0 32px 64px -24px rgb(60 40 20 / 0.22);
  --ok: #127a4a;

  --font-display: "Instrument Serif", Georgia, serif;
  --font-body: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --space: clamp(5rem, 10vw, 9rem);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121114;
    --surface: #1b1a1f;
    --surface-raised: #232228;
    --line: #2f2d34;
    --text: #efebe3;
    --muted: #a19c93;
    --accent: #ff6a33;
    --accent-ink: #ff8a5c;
    --accent-soft: #3a1d12;
    --on-accent: #121114;
    --focus: #efebe3;
    --shadow: 0 1px 0 rgb(0 0 0 / 0.3), 0 8px 24px -8px rgb(0 0 0 / 0.5), 0 32px 64px -24px rgb(0 0 0 / 0.6);
    --ok: #4cc98a;
  }
}

/* Base */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

p,
h1,
h2,
h3,
ol,
ul,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

p {
  max-width: 62ch;
}

a {
  color: inherit;
}

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

main:focus {
  outline: none;
}

.container {
  width: 100%;
  max-width: calc(72rem + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.mono,
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow {
  color: var(--accent-ink);
  margin-bottom: 1rem;
}

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 em,
h2 em {
  font-style: italic;
  color: var(--accent-ink);
}

h1 {
  font-size: clamp(3rem, 2rem + 6vw, 7.5rem);
  line-height: 0.95;
}

h2 {
  font-size: clamp(2.25rem, 1.6rem + 3vw, 4rem);
  line-height: 1.02;
  max-width: 20ch;
}

h3 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

.intro {
  max-width: 56ch;
  margin-top: 1.5rem;
  color: var(--muted);
}

.intro strong {
  color: var(--text);
  font-weight: 600;
}

.section {
  padding-block: calc(var(--space) / 2);
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--text);
  color: var(--bg);
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}

.skip:focus-visible {
  top: 1rem;
}

/* Buttons and links */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 150ms ease,
    translate 150ms ease;
}

.btn:hover {
  background: color-mix(in srgb, var(--accent) 86%, var(--text));
}

.btn:active {
  translate: 0 1px;
  background: color-mix(in srgb, var(--accent) 78%, var(--text));
}

.btn-sm {
  height: 40px;
  padding: 0 1.125rem;
  font-size: 0.9375rem;
}

/* Keeps the 40 px pill but gives it a 44 px tap target. */
.btn-sm::after {
  content: "";
  position: absolute;
  inset: -2px 0;
}

.btn-lg {
  height: 52px;
  padding: 0 1.5rem;
  font-size: 1.0625rem;
}

.arrow {
  transition: translate 200ms var(--ease);
}

.btn:hover .arrow {
  translate: 3px 0;
}

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: text-decoration-color 150ms ease;
}

.text-link:hover {
  text-decoration-color: var(--accent);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  color: var(--text);
  font-weight: 500;
  transition:
    background-color 150ms ease,
    border-color 150ms ease;
}

/* 0. Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 64px;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}

.site-header[data-scrolled] {
  border-bottom-color: var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
}

.mark {
  flex: none;
}

.wordmark {
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  line-height: 1;
}

.primary-nav {
  display: none;
}

.primary-nav ul {
  display: flex;
  gap: 0.25rem;
}

.primary-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.75rem;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition:
    color 150ms ease,
    background-color 150ms ease;
}

.primary-nav a:hover {
  color: var(--text);
  background: var(--surface);
}

@media (min-width: 760px) {
  .header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .primary-nav {
    display: block;
  }

  .header-inner > .btn {
    justify-self: end;
  }
}

/* 1. Hero */

.hero {
  overflow: clip;
}

.hero-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
  min-height: min(100svh - 64px, 56rem);
  padding-block: clamp(3rem, 6vw, 5rem);
}

.hero-text h1 {
  max-width: 12ch;
}

.hero-sub {
  max-width: 34ch;
  margin-top: 1.75rem;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1.5;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 2.25rem;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.625rem;
  margin-top: 1.5rem;
  color: var(--muted);
}

.sep {
  opacity: 0.7;
}

@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .hero-text {
    grid-column: 1 / span 6;
  }

  .hero-visual {
    grid-column: 7 / span 6;
  }
}

/* The plinth: a slab, a block, and three cards standing on it. */

.hero-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
}

.stage {
  position: relative;
  width: 100%;
  height: 400px;
}

.block {
  width: 62%;
  height: 44px;
  background: linear-gradient(var(--surface), color-mix(in srgb, var(--surface) 80%, var(--line)));
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35);
}

.slab {
  width: 100%;
  height: 36px;
  background: var(--surface);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.45),
    var(--shadow);
}

.card {
  --x: 0px;
  --r: 0deg;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 300px;
  height: 380px;
  margin-left: -150px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transform-origin: 50% 100%;
  translate: var(--x) 0;
  rotate: var(--r);
  animation: fan 900ms var(--ease) backwards;
  transition:
    translate 300ms var(--ease),
    rotate 300ms var(--ease);
}

@keyframes fan {
  from {
    translate: 0 24px;
    rotate: 0deg;
  }
}

.card-studio {
  --x: -96px;
  --r: -8deg;
  background: #ffffff;
  color: #111827;
}

.card-editorial {
  --x: 96px;
  --r: 7deg;
  background: #f7f1e6;
  color: #2a1f1a;
  animation-delay: 80ms;
}

.card-midnight {
  background: #0b0f14;
  color: #e6edf3;
  animation-delay: 160ms;
}

@media (hover: hover) and (min-width: 1024px) {
  .hero-visual:hover .card-midnight {
    translate: 0 -6px;
  }

  .hero-visual:hover .card-studio {
    rotate: -10deg;
  }

  .hero-visual:hover .card-editorial {
    rotate: 9deg;
  }
}

.c-pad {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 24px 22px;
}

.c-pad p {
  margin: 0;
}

.bar {
  display: block;
  height: 8px;
  border-radius: 99px;
  background: currentColor;
  opacity: 0.14;
}

.w50 {
  width: 50%;
}
.w60 {
  width: 60%;
}
.w70 {
  width: 70%;
}
.w80 {
  width: 80%;
}
.w90 {
  width: 90%;
}

.c-line {
  display: block;
  height: 6px;
  border-radius: 99px;
}

.studio-eyebrow {
  width: 46%;
  background: #4f46e5;
}

.studio-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.75rem;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin-top: 4px;
}

.c-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: auto;
}

.c-tiles span {
  height: 96px;
  border-radius: 8px;
  background: #eef0fb;
}

.editorial-name {
  align-self: flex-end;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2rem;
  line-height: 1.05;
}

.editorial-rule {
  display: block;
  height: 1px;
  background: #a8432a;
  margin: 4px 0 8px;
}

.card-editorial .bar {
  align-self: flex-end;
}

.midnight-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #c4f042;
}

.midnight-name {
  font-weight: 600;
  font-size: 1.75rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.midnight-rule {
  display: block;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background: #c4f042;
  margin-bottom: 4px;
}

.card-midnight .bar {
  opacity: 0.18;
}

.midnight-case {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding: 12px;
  border: 1px solid #1f2933;
  border-radius: 10px;
  background: #111820;
}

.midnight-shot {
  height: 52px;
  border-radius: 6px;
  background: linear-gradient(135deg, #1b2530, #24303c);
}

.midnight-title {
  font-weight: 600;
  font-size: 0.9375rem;
}

.midnight-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.midnight-tags span,
.midnight-metric {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 4px;
  background: #1b2530;
  color: #c9d4de;
}

.midnight-metric {
  justify-self: start;
  background: #c4f042;
  color: #0b0f14;
  font-weight: 500;
}

@media (max-width: 639px) {
  .hero-visual {
    height: 320px;
    justify-content: flex-end;
  }

  .stage {
    height: 266px;
  }

  .card {
    scale: 0.7;
    --x: 0px;
  }

  .card-studio {
    --x: -60px;
  }

  .card-editorial {
    --x: 60px;
  }

  .block {
    height: 28px;
  }

  .slab {
    width: calc(100% + 2 * var(--gutter));
    height: 26px;
    border-radius: 0;
  }
}

/* 2. Anatomy of a case study */

.anatomy-grid {
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

.annotation {
  padding-block: 1.5rem;
}

.annotation + .annotation {
  border-top: 1px solid var(--line);
}

.annotation .tag {
  color: var(--accent-ink);
  margin-bottom: 0.75rem;
}

.quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.3;
  max-width: 30ch;
  margin-bottom: 0.75rem;
}

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

.sticky-wrap {
  display: none;
}

/* The example card, rendered as the Studio theme would render it. */
.case-card {
  --cc-ink: #111827;
  --cc-muted: #4b5563;
  --cc-accent: #4f46e5;
  --cc-line: #e5e7eb;
  /* The card stays in Studio's light colours, so its highlight uses the light tint. */
  --accent-soft: #ffe2d4;
  background: #ffffff;
  color: var(--cc-ink);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.crop {
  margin-top: 1.25rem;
  padding: 1.5rem 1rem 1rem;
}

.cc-eyebrow {
  color: var(--cc-accent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cc-title {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-top: 0.25rem;
}

.cc-summary {
  color: var(--cc-muted);
  font-size: 0.9375rem;
  line-height: 1.45;
  margin-top: 0.25rem;
}

.cc-role {
  font-size: 0.8125rem;
  font-weight: 500;
  margin-top: 0.5rem;
}

.cc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 0.625rem;
}

.cc-tags span {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 99px;
  background: #eef0fb;
  color: #3730a3;
}

.cc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 12px;
  margin-top: 1.25rem;
}

.span2 {
  grid-column: span 2;
}

.region {
  position: relative;
  display: grid;
  gap: 7px;
  padding: 10px;
  border-radius: 8px;
  outline: 2px solid transparent;
  transition:
    opacity 300ms ease,
    background-color 300ms ease,
    outline-color 300ms ease;
}

.region::before {
  content: attr(data-tag);
  position: absolute;
  top: -10px;
  left: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 300ms ease;
}

.region .bar {
  opacity: 0.12;
}

.r-label {
  color: var(--cc-accent);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.shot {
  border: 1px solid var(--cc-line);
  border-radius: 8px;
  overflow: hidden;
}

.shot-bar {
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  background: #f3f4f6;
  border-bottom: 1px solid var(--cc-line);
}

.shot-bar i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d1d5db;
}

.shot-body {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 10px;
  padding: 10px;
}

.shot-summary,
.shot-form {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 8px;
  border-radius: 6px;
}

.shot-summary {
  background: #f9fafb;
}

.shot-summary span,
.shot-form span {
  height: 7px;
  border-radius: 99px;
  background: #e5e7eb;
}

.shot-form span {
  height: 16px;
  border-radius: 4px;
  background: #ffffff;
  border: 1px solid #d1d5db;
}

.shot-summary b,
.shot-form b {
  height: 14px;
  border-radius: 4px;
  background: #4f46e5;
}

.shot-summary b {
  width: 40%;
  background: #111827;
  height: 9px;
}

.metrics {
  display: flex;
  gap: 18px;
}

.metrics p {
  display: grid;
}

.metrics b {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.metrics span {
  color: var(--cc-muted);
  font-size: 0.75rem;
}

.links {
  display: flex;
  gap: 14px;
  color: var(--cc-accent);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Highlight: the static crops always, and the sticky card's active region. */
.sticky-card[data-active] .region {
  opacity: 0.55;
}

.region.is-on,
.sticky-card[data-active="problem"] [data-region="problem"],
.sticky-card[data-active="approach"] [data-region="approach"],
.sticky-card[data-active="screenshots"] [data-region="screenshots"],
.sticky-card[data-active="accessibility"] [data-region="accessibility"],
.sticky-card[data-active="performance"] [data-region="performance"],
.sticky-card[data-active="outcome"] [data-region="outcome"] {
  opacity: 1;
  background: var(--accent-soft);
  outline-color: var(--accent);
}

.region.is-on::before,
.sticky-card[data-active="problem"] [data-region="problem"]::before,
.sticky-card[data-active="approach"] [data-region="approach"]::before,
.sticky-card[data-active="screenshots"] [data-region="screenshots"]::before,
.sticky-card[data-active="accessibility"] [data-region="accessibility"]::before,
.sticky-card[data-active="performance"] [data-region="performance"]::before,
.sticky-card[data-active="outcome"] [data-region="outcome"]::before {
  opacity: 1;
}

@media (min-width: 1024px) {
  .anatomy-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 6rem);
  }

  .annotations {
    position: relative;
    padding-left: 2.5rem;
  }

  .annotations::before,
  .annotations::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    border-radius: 2px;
  }

  .annotations::before {
    bottom: 0;
    background: var(--line);
  }

  .annotations::after {
    height: calc(var(--progress, 0) * 100%);
    background: var(--accent);
    transition: height 300ms ease;
  }

  .annotation {
    display: flex;
    align-items: center;
    min-height: 56vh;
  }

  .annotation-body > .tag + .explain {
    font-size: 1.375rem;
    line-height: 1.4;
    color: var(--text);
    max-width: 30ch;
  }

  .annotation + .annotation {
    border-top: 0;
  }

  .crop {
    display: none;
  }

  .sticky-wrap {
    display: block;
  }

  .sticky-card {
    position: sticky;
    top: 96px;
    padding: 1.5rem;
  }
}

/* 3. How it works */

.steps {
  display: grid;
  gap: 16px;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 640px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.step {
  display: flex;
  flex-direction: column;
  padding: 1rem 1rem 1.5rem;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.step-num {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent-ink);
  margin: 1.5rem 0.5rem 0.75rem;
}

.step h3,
.step > p:last-child {
  margin-inline: 0.5rem;
}

.step > p:last-child {
  margin-top: 0.375rem;
  color: var(--muted);
  font-size: 1rem;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .step {
      animation: rise linear backwards;
      animation-timeline: view();
      animation-range: entry calc(var(--i) * 6%) entry calc(60% + var(--i) * 6%);
    }
  }
}

@keyframes rise {
  from {
    translate: 0 16px;
  }
  to {
    translate: 0 0;
  }
}

.illo {
  height: 120px;
  border-radius: 10px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 14px;
  overflow: hidden;
}

.illo-chips {
  gap: 6px;
}

.chip {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1.5px solid var(--muted);
  background: var(--surface-raised);
}

.chip.done {
  background: var(--text);
  border-color: var(--text);
}

.chip.flag::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--surface);
}

.illo-arrange .rows {
  display: grid;
  gap: 6px;
  width: 52%;
}

.illo-arrange .rows span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 22px;
  padding-right: 4px;
  border-radius: 5px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
}

.illo-arrange svg {
  width: 10px;
  height: 14px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.swatches {
  display: grid;
  gap: 6px;
}

.swatches i,
.split {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--line);
}

.sw-studio {
  background: linear-gradient(90deg, #ffffff 50%, #4f46e5 50%);
}

.sw-midnight {
  background: linear-gradient(90deg, #0b0f14 50%, #c4f042 50%);
}

.sw-editorial {
  background: linear-gradient(90deg, #f7f1e6 50%, #a8432a 50%);
}

.illo-check {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.illo-check p {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 22px;
}

.illo-check svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--text);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.illo-check i {
  width: 14px;
  height: 14px;
  margin-inline: 1px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
}

.illo-check span {
  flex: 1;
  height: 7px;
  border-radius: 99px;
  background: var(--line);
}

.illo-check b {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 99px;
  background: var(--accent);
  color: var(--on-accent);
}

.illo-file {
  justify-content: flex-start;
}

.illo-file .file {
  flex: none;
  width: 34px;
  height: 42px;
  fill: var(--surface-raised);
  stroke: var(--text);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.illo-file .mono {
  overflow-wrap: anywhere;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-transform: none;
}

.chip-label {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--muted);
}

/* 4. Features */

.bento {
  display: grid;
  gap: 16px;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgb(22 21 26 / 0.04);
  transition:
    translate 200ms var(--ease),
    box-shadow 200ms var(--ease);
}

.tile-copy {
  color: var(--muted);
  font-size: 1rem;
}

@media (min-width: 1024px) {
  .bento {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .tile-themes {
    grid-column: span 7;
    grid-row: span 2;
  }

  .tile-skills,
  .tile-resume {
    grid-column: span 5;
  }

  .tile-save,
  .tile-a11y,
  .tile-yours {
    grid-column: span 4;
  }
}

@media (hover: hover) and (min-width: 1024px) {
  .tile:hover {
    translate: 0 -2px;
    box-shadow: var(--shadow);
  }
}

.swatch-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.swatch-group button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 1rem 0 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background-color 150ms ease;
}

.swatch-group button:hover {
  border-color: var(--muted);
}

.swatch-group button:active {
  background: var(--surface);
}

.swatch-group button[aria-checked="true"] {
  border-color: var(--text);
  background: var(--surface);
}

.mini {
  --m-bg: #ffffff;
  --m-text: #111827;
  --m-muted: #4b5563;
  --m-accent: #4f46e5;
  --m-surface: #eef0fb;
  --m-name-font: var(--font-body);
  --m-name-style: normal;
  --m-name-weight: 600;
  --m-eyebrow-font: var(--font-body);
  flex: 1;
  display: grid;
  align-content: start;
  gap: 0.625rem;
  min-height: 300px;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--m-bg);
  color: var(--m-text);
  transition:
    background-color 250ms ease,
    color 250ms ease;
}

.mini[data-theme="midnight"] {
  --m-bg: #0b0f14;
  --m-text: #e6edf3;
  --m-muted: #9aa7b4;
  --m-accent: #c4f042;
  --m-surface: #161e27;
  --m-eyebrow-font: var(--font-mono);
}

.mini[data-theme="editorial"] {
  --m-bg: #f7f1e6;
  --m-text: #2a1f1a;
  --m-muted: #6b5a4e;
  --m-accent: #a8432a;
  --m-surface: #ede3d2;
  --m-name-font: var(--font-display);
  --m-name-style: italic;
  --m-name-weight: 400;
}

.mini-eyebrow {
  font-family: var(--m-eyebrow-font);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--m-accent);
  transition: color 250ms ease;
}

.mini[data-theme="midnight"] .mini-eyebrow::before {
  content: "> ";
}

.mini-name {
  font-family: var(--m-name-font);
  font-style: var(--m-name-style);
  font-weight: var(--m-name-weight);
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.mini-lede {
  color: var(--m-muted);
  font-size: 0.9375rem;
  max-width: 36ch;
  transition: color 250ms ease;
}

.mini-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0.25rem;
}

.mini-actions span {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  transition:
    background-color 250ms ease,
    color 250ms ease,
    border-color 250ms ease;
}

.mini-primary {
  background: var(--m-accent);
  color: var(--m-bg);
}

.mini-ghost {
  border: 1px solid currentColor;
}

.mini-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 0.75rem;
}

.mini-cards span {
  height: 72px;
  border-radius: 8px;
  background: var(--m-surface);
  transition: background-color 250ms ease;
}

.skills {
  display: grid;
  gap: 2px;
}

.skills div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}

.skills dt {
  font-weight: 500;
}

.skills dd {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

.pips {
  display: inline-flex;
  gap: 4px;
}

.pips i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--muted);
}

.pips i.on {
  background: var(--accent);
  border-color: var(--accent);
}

.tile-resume {
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
}

.sheet {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 96px;
  aspect-ratio: 1 / 1.414;
  padding: 12px 10px;
  background: #ffffff;
  color: #000000;
  border-radius: 2px;
  box-shadow: var(--shadow);
}

.sheet-name {
  width: 70%;
  height: 7px;
  background: #000000;
  border-radius: 1px;
}

.sheet-rule {
  height: 1px;
  background: #9a9a9a;
  margin: 2px 0;
}

.sheet .bar {
  height: 4px;
  opacity: 0.3;
}

.save-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0.02em;
}

.save-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
}

.badge {
  align-self: flex-start;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--text);
}

.home-window {
  fill: none;
  stroke: var(--text);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.home-window circle {
  fill: var(--line);
  stroke: none;
}

.home-window .house {
  fill: var(--accent);
  stroke: none;
}

/* 5. The real thing */

.band {
  background: var(--surface);
  padding-block: var(--space);
  margin-block: calc(var(--space) / 2);
}

.frame {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-radius: 16px;
  overflow: clip;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  background: var(--surface-raised);
}

.frame-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--line);
}

.dots {
  position: absolute;
  left: 14px;
  display: flex;
  gap: 6px;
}

.dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
}

.address {
  padding: 3px 14px;
  border-radius: 99px;
  background: var(--bg);
  color: var(--muted);
  text-transform: none;
}

.frame iframe {
  display: block;
  width: 100%;
  height: 620px;
  border: 0;
  background: var(--bg);
}

.fullscreen {
  max-width: none;
  margin-top: 1rem;
}

.fullscreen .btn-secondary {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--text);
  border-radius: 999px;
  text-decoration: none;
}

.fullscreen .btn-secondary:hover {
  background: var(--surface-raised);
}

@media (min-width: 760px) {
  .frame iframe {
    height: 780px;
  }

  .fullscreen {
    text-align: right;
  }

  .fullscreen .btn-secondary {
    width: auto;
    min-height: 44px;
    border: 0;
    border-radius: 0;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
  }

  .fullscreen .btn-secondary:hover {
    background: transparent;
    text-decoration-color: var(--accent);
  }
}

/* 6. FAQ */

.faq {
  max-width: 48rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: 1.25rem 0;
  font-size: 1.125rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:hover {
  color: var(--accent-ink);
}

.faq details p {
  padding-bottom: 1.5rem;
  color: var(--muted);
}

.plus {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  transition: rotate 200ms ease;
}

.plus::before,
.plus::after {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.plus::after {
  rotate: 90deg;
}

details[open] .plus {
  rotate: 45deg;
}

/* 7. Closing call to action */

.closing {
  /* Ink band: the page's colours swap, so orange text and focus swap with them. */
  --focus: var(--bg);
  --accent-ink: #ff8a5c;
  background: var(--text);
  color: var(--bg);
  padding-block: clamp(5rem, 12vw, 10rem);
  margin-top: calc(var(--space) / 2);
  text-align: center;
}

@media (prefers-color-scheme: dark) {
  .closing {
    --accent-ink: #b93a12;
  }
}

.closing-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.closing h2 {
  font-size: clamp(3rem, 2rem + 6vw, 7.5rem);
  line-height: 0.95;
  max-width: 14ch;
  margin-top: 2rem;
}

.closing p {
  margin-top: 1.5rem;
  font-size: 1.25rem;
  opacity: 0.85;
}

.closing .btn {
  margin-top: 2.5rem;
}

.closing-mark {
  overflow: visible;
}

@media (prefers-reduced-motion: no-preference) {
  .js .closing:not([data-seen]) .drop {
    translate: 0 -12px;
    opacity: 0;
  }

  .closing .drop {
    transition:
      translate 600ms var(--ease),
      opacity 300ms ease;
  }
}

/* 8. Footer */

.site-footer {
  padding-block: 3rem;
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.footer-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
}

.footer-brand p {
  color: var(--muted);
}

.footer-links {
  display: flex;
  gap: 1.5rem;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
  text-underline-offset: 0.25em;
  transition: color 150ms ease;
}

.footer-links a:hover {
  color: var(--accent-ink);
}

.footer-note {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

/* Reduced motion: every element in its final state, nothing moves. */

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .hero-visual:hover .card {
    translate: var(--x) 0;
  }

  .tile:hover {
    translate: none;
  }

  .hero-visual:hover .card-studio {
    rotate: -8deg;
  }

  .hero-visual:hover .card-editorial {
    rotate: 7deg;
  }
}