:root {
  --ink: #f4efe4;
  --paper: #262320;
  --mist: #5a544c;
  --dim: #a69d8e;
  --sodium: #c24f75;
  --blossom: #f6b7c7;
  --mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  /* The sans for card descriptions. */
  /* Below the hero: a serif for headings, a mono for labels and a sans for text. The hero keeps its own fonts. */
  --display: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --label: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(20px, 4vw, 56px);
  /* Background for everything below the hero. */
  --page: #fffbf4;
  /* A faint paper grain over the page background by day; none at night. */
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.34  0 0 0 0 0.24  0 0 0 0.1 -0.03'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* Project cards: white by day, defined only by soft shadow; a slightly lifted blue at night. */
  --card: #ffffff;
  /* Shadow tint as rgb channels: a warm near-black by day, pure black at night. */
  --shadow-rgb: 31 29 27;
  /* Errors are always red, never the season's accent. */
  --error: #b42318;
  /* Side padding for the sections below the hero, a little deeper than the hero's gutter. */
  --inset: clamp(24px, 9vw, 144px);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
}

body {
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

a:focus-visible {
  outline: 1px dashed var(--sodium);
  outline-offset: 4px;
}

.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ctext x='50%25' y='54%25' dominant-baseline='middle' text-anchor='middle' font-size='28'%3E%F0%9F%8C%80%3C/text%3E%3C/svg%3E") 18 18, pointer;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero__bar,
.hero__status {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 var(--gutter);
  font-size: 12px;
  letter-spacing: 0.02em;
  font-variation-settings: "wdth" 87.5;
}

.hero__bar {
  top: 22px;
}

.hero__mark {
  text-decoration: none;
  font-weight: 500;
}

.hero__mark span {
  color: var(--sodium);
  animation: blink 1.1s steps(1) infinite;
}

.hero__bar nav {
  display: flex;
  gap: clamp(16px, 3vw, 36px);
}

.hero__bar nav a {
  text-decoration: none;
  color: var(--mist);
}

/* On hover the logo and top links turn the season's color. */
.hero__mark,
.hero__bar nav a {
  transition: color 160ms ease-out;
}

.hero__mark:hover,
.hero__bar nav a:hover {
  color: var(--sodium);
}

.hero__bar nav a::before {
  content: "/";
  color: var(--dim);
  margin-right: 2px;
}

/* Shares the left edge of the Work section and footer below. */
.hero__copy {
  position: absolute;
  left: var(--inset);
  /* Sits so the description's last line stands exactly on the ground line, with the button below it.
     hero.js sets --ground-y (the line's top edge) and --copy-below (the block under that baseline). */
  bottom: calc(100% - var(--ground-y, 80%) - var(--copy-below, 66px));
  max-width: 34rem;
  animation: rise 900ms 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero__role {
  margin: 0 0 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sodium);
}

.hero__name {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(88px, 14vw, 200px);
  line-height: 0.82;
  letter-spacing: -0.02em;
}

.hero__lede {
  margin: 22px 0 0;
  max-width: 26rem;
  font-size: 14px;
  line-height: 1.7;
  color: var(--mist);
  font-weight: 300;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  margin-top: 26px;
  font-size: 13px;
}

.hero__cta {
  display: inline-flex;
  gap: 10px;
  padding: 11px 16px;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  transition: background 160ms ease;
}

.hero__cta:hover {
  background: var(--blossom);
  color: var(--paper);
}

/* The counter sits on the right, just above the ground line. */
.hero__status {
  top: calc(var(--ground-y, 80%) - 32px);
  /* Comes up with the hero title, on the same timing. */
  animation: rise 900ms 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  justify-content: flex-end;
  color: var(--dim);
  font-size: 11px;
  pointer-events: none;
}

.hero__status [data-readout] {
  font-variant-numeric: tabular-nums;
  color: var(--mist);
}

:root[data-season="fall"] {
  --sodium: #b8322a;
  --blossom: #f0a08c;
}

:root[data-season="summer"] {
  /* Firefly yellow, deepened to a gold (about 4.7:1 on the cream) so small text stays readable. */
  --sodium: #876400;
  --blossom: #f7e08a;
}

:root[data-time="night"][data-season="summer"] {
  --sodium: #ffd84a;
}

:root[data-season="winter"] {
  --sodium: #4f7394;
  --blossom: #d7e6f2;
}

:root[data-time="night"] {
  --page: #141c28;
  --paper-grain: none;
  --card: color-mix(in srgb, var(--paper) 6%, var(--ink));
  --shadow-rgb: 0 0 0;
  --error: #f97066;
  --ink: #141c28;
  --paper: #f3efe6;
  --mist: #c9c2b6;
  --dim: #7d8794;
}

.hero__controls {
  position: absolute;
  top: 56px;
  left: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero__season,
.hero__time,
.hero__tint {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--dim);
  background: var(--ink);
  font-size: 11px;
  font-variation-settings: "wdth" 87.5;
}

.hero__season button,
.hero__time button,
.hero__tint button {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mist);
  cursor: pointer;
}

.hero__controls svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* On hover every icon takes the current theme's color. */
.hero__controls button:hover {
  color: var(--sodium);
}

/* The chosen option's icon is drawn in its season's color; day/night takes the current season's. */
.hero__season button[aria-pressed="true"],
.hero__time button[aria-pressed="true"] {
  color: var(--mark);
}

.hero__time,
.hero__tint {
  --mark: var(--sodium);
}

.hero__tint button[aria-pressed="true"] {
  color: var(--mark);
}

.hero__season [data-season-option="spring"] {
  --mark: #c24f75;
}

.hero__season [data-season-option="summer"] {
  --mark: #876400;
}

:root[data-time="night"] .hero__season [data-season-option="summer"] {
  --mark: #ffd84a;
}

.hero__season [data-season-option="fall"] {
  --mark: #b8322a;
}

.hero__season [data-season-option="winter"] {
  --mark: #4f7394;
}

.hero__season button:focus-visible,
.hero__time button:focus-visible,
.hero__tint button:focus-visible {
  outline: 1px dashed var(--sodium);
  outline-offset: 2px;
}

html {
  scroll-behavior: smooth;
}

/* ---------- work ---------- */

/* Below the hero the page turns a warm paper tone with a faint grain, easing out of the hero's
   cream so there is no hard edge. */
main {
  background: var(--paper-grain), var(--page);
}

.work {
  /* A long, eased fade (extra stops soften both ends) inside a taller top padding, so it finishes
     before the heading. The hero's cream thins out to nothing, revealing the grain and page tone
     beneath it. */
  --fade: 160px;
  background:
    linear-gradient(
      to bottom,
      var(--ink) 0,
      color-mix(in srgb, var(--ink) 85%, transparent) calc(var(--fade) * 0.25),
      color-mix(in srgb, var(--ink) 50%, transparent) calc(var(--fade) * 0.5),
      color-mix(in srgb, var(--ink) 15%, transparent) calc(var(--fade) * 0.75),
      transparent var(--fade)
    ),
    var(--paper-grain),
    var(--page);
}

.work,
.site-footer {
  font-family: var(--label);
}

.work,
.site-footer,
.case {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  padding: clamp(72px, 12vh, 140px) var(--inset);
}

/* Extra room above the heading for the fade out of the hero. */
.work {
  padding-top: var(--fade);
}

.work__head {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 10px 24px;
}

.work__label {
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sodium);
}

.work__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(56px, 8vw, 112px);
  line-height: 0.9;
  letter-spacing: -0.02em;
}

/* The Selected Works heading is set smaller than the case study page's title, which shares the class. */
.work__head .work__title {
  /* 36px on small screens, growing with the width up to 52px (reached at about 1730px). */
  font-size: clamp(36px, 3vw, 52px);
  line-height: 1.1;
}

.work__count {
  margin: 0 0 8px;
  font-size: 11px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.work__list {
  display: grid;
  gap: 24px;
  /* Narrower than the page, centered, so the cards have more room from the edges. */
  max-width: 1040px;
  margin: 32px auto 0;
  padding: 0;
  list-style: none;
}

/* Each project is a rounded card: text on the left, a browser window with the project on the right. */
.project__card {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px;
  align-items: center;
  padding: 24px;
  border-radius: 20px;
  background: var(--card);
  /* Three soft layers stand in for an outline: a barely-there edge, a tight contact shadow,
     and a wide ambient one. */
  box-shadow:
    0 0 0 1px rgb(var(--shadow-rgb) / 0.04),
    0 2px 4px rgb(var(--shadow-rgb) / 0.04),
    0 12px 32px rgb(var(--shadow-rgb) / 0.06);
  color: inherit;
  text-decoration: none;
}

/* Press feedback, kept very subtle because the card is large. */
a.project__card {
  transition: transform 160ms var(--ease-out);
}

a.project__card:active {
  transform: scale(0.995);
}

a.project__card:focus-visible {
  outline: 1px dashed var(--sodium);
  outline-offset: 4px;
}

.project__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.project__brand {
  margin: 0 0 20px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--paper);
}

.project__name {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.project__desc {
  max-width: 28rem;
  margin: 16px 0 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--mist);
  text-wrap: pretty;
}

/* A quiet meta line, like "META, 2026 | 0->1 | DESIGN ENGINEERING" on the reference. */
.project__tags {
  display: flex;
  flex-wrap: wrap;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 20px;
  color: var(--mist);
}

/* Separators trail each tag, so a wrapped line never starts with a bar. */
.project__tags li:not(:last-child)::after {
  content: "|";
  margin: 0 10px;
  opacity: 0.5;
}

.project__lock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--mist);
  white-space: nowrap;
}

.project__lock svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
}

/* The project's media on its own, with rounded corners and a soft shadow, and no window chrome. */
.project__window {
  overflow: hidden;
  border-radius: 12px;
  background: var(--page);
  /* A smaller surface than the card, so a tighter, shallower shadow. */
  box-shadow:
    0 0 0 1px rgb(var(--shadow-rgb) / 0.06),
    0 2px 8px rgb(var(--shadow-rgb) / 0.06);
}

.project__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: color-mix(in srgb, var(--paper) 4%, var(--page));
}

/* Media fades in as it arrives, so it never pops in half drawn. */
.project__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out);
}

.project__media img.is-loading {
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  a.project__card:hover .project__media img,
  .project__card:hover .project__media--navy img {
    transform: scale(1.03);
  }
}

/* The "Selected Works" heading fades up into place, then each card a beat after the last.
   work.js adds and removes is-pending. */
.project,
.work__head {
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}

.project.is-pending,
.work__head.is-pending {
  opacity: 0;
  transform: translateY(16px);
}

/* ---------- footer ---------- */

/* A quiet bookend on the hero's cream: a seasonal mark and one line on the left, links on the right. */
.site-footer {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  /* Height of the blossom row, shared by the column labels so everything lines up. */
  --sign-height: 44px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px 64px;
  padding: 32px var(--inset) 60px;
  background: var(--paper-grain), var(--page);
}

/* A hairline that stops short of both edges, lining up with the content. */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--inset);
  right: var(--inset);
  height: 1px;
  background: var(--dim);
  opacity: 0.3;
}

/* Blossom in one column, text in the other, so the copyright lines up under the line. */
.site-footer__intro {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 8px;
}

.site-footer__sign {
  display: contents;
}

.site-footer__mark,
.site-footer__line {
  align-self: center;
  min-height: var(--sign-height);
  display: flex;
  align-items: center;
}

/* Pinned to the bottom of the column so it sits on the same line as the last link. */
.site-footer__legal {
  grid-column: 2;
  align-self: end;
}

.site-footer__mark {
  flex: none;
  color: var(--footer-ink, var(--sodium));
}

/* The hover spin is driven from hero.js so each turn always completes. */
.site-footer__mark canvas {
  display: block;
}

.site-footer__line {
  margin: 0;
  font-family: var(--display);
  font-size: 22px;
  line-height: 1.2;
}

.site-footer__legal {
  margin: 0;
  font-size: 11px;
  line-height: 20px;
  color: var(--dim);
}

.site-footer__nav {
  display: flex;
  gap: 64px;
}

/* As tall as the blossom row and centered in it, so the labels and the line share one center line. */
.site-footer__label {
  display: flex;
  align-items: center;
  min-height: var(--sign-height);
  /* Pulled up so the links start 12px below the label's text (the row's empty space was 16px). */
  margin: 0 0 -4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--dim);
}

.site-footer__col ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  /* Shared with the copyright so the bottom link and the copyright sit on one line. */
  line-height: 20px;
}

.site-footer__col a {
  color: var(--mist);
  text-decoration: none;
  transition: color 160ms ease;
}

.site-footer__col a:focus-visible {
  outline: 1px dashed var(--sodium);
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .site-footer__col a:hover {
    color: var(--sodium);
  }
}

/* ---------- unlock dialog ---------- */

.unlock {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  width: min(420px, calc(100vw - 32px));
  padding: 28px;
  border: 0;
  /* Same soft shadow as the project cards instead of an outline. */
  box-shadow:
    0 0 0 1px rgb(var(--shadow-rgb) / 0.04),
    0 2px 4px rgb(var(--shadow-rgb) / 0.04),
    0 12px 32px rgb(var(--shadow-rgb) / 0.06);
  /* White by day, matching the project cards (a slightly lifted blue at night). */
  background: var(--card);
  color: var(--paper);
  font-family: var(--label);
  opacity: 0;
  transform: scale(0.96);
  /* Closing is quicker than opening: the system is responding, not the user deciding. */
  transition: opacity 150ms ease-out, transform 150ms ease-out, overlay 150ms allow-discrete, display 150ms allow-discrete;
}

.unlock[open] {
  opacity: 1;
  transform: none;
  transition-duration: 220ms;
  transition-timing-function: var(--ease-out);

  @starting-style {
    opacity: 0;
    transform: scale(0.96);
  }
}

.unlock::backdrop {
  background: rgba(20, 18, 16, 0);
  transition: background 150ms ease-out, overlay 150ms allow-discrete, display 150ms allow-discrete;
}

.unlock[open]::backdrop {
  background: rgba(20, 18, 16, 0.45);
  transition-duration: 220ms;
}

@starting-style {
  .unlock[open]::backdrop {
    background: rgba(20, 18, 16, 0);
  }
}

.unlock__label {
  margin: 0;
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.01em;
}

.unlock__desc {
  margin: 8px 0 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0.01em;
  color: var(--mist);
}

.unlock__field {
  display: grid;
  gap: 4px;
  margin-top: 22px;
  /* Same sans and color as the description, with only the first letter capitalized. */
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--mist);
}

.unlock__control {
  position: relative;
  display: grid;
}

/* Room on the right for the eye button. */
.unlock__field .unlock__control input {
  padding-right: 48px;
}

/* Edge draws its own reveal button; ours replaces it. */
.unlock__field input::-ms-reveal {
  display: none;
}

.unlock__eye {
  position: absolute;
  top: 50%;
  right: 4px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  /* The eye keeps the softer color the field's outline used to have. */
  color: var(--dim);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color 160ms ease;
}

.unlock__eye svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The slash only shows while the password is visible: the icon then offers to hide it. */
.unlock__slash {
  opacity: 0;
}

.unlock__eye[aria-pressed="true"] .unlock__slash {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .unlock__eye:hover {
    color: var(--paper);
  }
}

.unlock__eye:focus-visible {
  outline: 1px dashed var(--sodium);
  outline-offset: 0;
}

.unlock__field input {
  padding: 12px;
  border: 1px solid #848484;
  background: transparent;
  color: var(--paper);
  /* 16px keeps iOS from zooming the page when the field is focused. */
  font: 16px var(--sans);
  transition: border-color 160ms ease;
}

/* Focused, the outline deepens to the label's color. */
.unlock__field input:focus-visible {
  border-color: var(--mist);
  outline: none;
}

.unlock.is-wrong .unlock__field input {
  border-color: var(--error);
}

.unlock__error {
  margin: 8px 0 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 20px;
  color: var(--error);
}

.unlock__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
  margin-top: 22px;
}

.unlock__submit {
  padding: 12px 16px;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  font: 13px var(--label);
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background 160ms ease, color 160ms ease;
}

.unlock__submit:active,
.unlock__cancel:active {
  transform: scale(0.97);
}

/* A secondary button: no underline. It matches the primary's size, and a faint tint on hover. */
.unlock__cancel {
  padding: 12px 16px;
  border: 0;
  background: none;
  color: var(--mist);
  font: 13px var(--label);
  cursor: pointer;
  transition: transform 160ms var(--ease-out), color 160ms ease, background 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .unlock__submit:hover {
    background: var(--blossom);
    color: var(--paper);
  }

  .unlock__cancel:hover {
    background: color-mix(in srgb, var(--paper) 6%, transparent);
    color: var(--paper);
  }
}

.unlock__submit:focus-visible,
.unlock__cancel:focus-visible {
  outline: 1px dashed var(--sodium);
  outline-offset: 2px;
}

/* ---------- case study ---------- */

.case-page {
  /* The design studio changes these. The defaults are the current look. */
  --cs-bg: #fffbf4;
  --cs-accent: #6e6e73;
  --cs-display: var(--display);
  --cs-body: var(--sans);
  --cs-label: var(--label);
  --cs-tex: none;
  --cs-tex-size: 300px;
  --cs-tex-opacity: 0;
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  background: var(--cs-bg);
  color: var(--paper);
  font-family: var(--cs-body);
}

/* The texture sits behind the content, over the page color only. */
.case-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--cs-tex);
  background-size: var(--cs-tex-size);
  opacity: var(--cs-tex-opacity);
  mix-blend-mode: multiply;
}

.case-page .site-footer,
.case-page main {
  background: transparent;
}


/* Stays at the top while you scroll, over a frosted strip of the page color. */
.case-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 22px var(--gutter) 16px;
  background: color-mix(in srgb, var(--cs-bg) 86%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  font-variation-settings: "wdth" 87.5;
}

.case-bar nav {
  display: flex;
  gap: clamp(16px, 3vw, 36px);
}

.case-bar nav a {
  text-decoration: none;
  color: var(--mist);
}

.case-bar nav a:hover {
  color: var(--paper);
}

.case-bar nav a::before {
  content: "/";
  margin-right: 2px;
  color: var(--dim);
}

.case-page .hero__mark span {
  color: var(--cs-accent);
}

.case__close {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--page) 80%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--paper) 12%, transparent);
  backdrop-filter: blur(8px);
  color: var(--paper);
  transition: transform 160ms var(--ease-out);
}

.case__close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.case__close:active {
  transform: scale(0.96);
}

.case-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56px var(--inset) 0;
  text-align: center;
}

.case-hero__label {
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cs-accent) 10%, transparent);
  font-family: var(--cs-label);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cs-accent);
}

.case-hero__title {
  max-width: 840px;
  margin: 24px 0 0;
  font-family: var(--cs-display);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.16;
  letter-spacing: 0;
}

.case-hero__sub {
  margin: 16px 0 0;
  font-family: var(--cs-label);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mist);
}

.case-hero__meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  width: min(960px, 100%);
  margin: 48px 0 0;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
  text-align: left;
}

.case-hero__meta dt {
  margin-bottom: 8px;
  font-family: var(--cs-label);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mist);
}

.case-hero__meta dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.case-hero__img {
  display: block;
  width: min(1200px, 100%);
  height: auto;
  margin-top: 56px;
  border-radius: 8px;
}

.case-layout {
  padding: 96px var(--inset) 120px;
}

.case-nav {
  display: none;
}

@media (min-width: 1320px) {
  .case-nav {
    position: fixed;
    top: 96px;
    /* The labels line up with "zahra_" in the top nav. */
    left: var(--gutter);
    z-index: 4;
    display: block;
    width: 136px;
    opacity: 0;
    pointer-events: none;
    font-family: var(--cs-label);
    font-size: 12px;
    transition: opacity 200ms ease;
  }

  .case-nav-on .case-nav {
    opacity: 1;
    pointer-events: auto;
  }

  .case-nav ol {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 2px;
  }

  .case-nav a {
    display: block;
    padding: 6px 0;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--mist);
    transition: color 160ms ease;
  }

  .case-nav a:hover,
  .case-nav a[aria-current] {
    color: var(--paper);
  }

  /* On the case study, the section you're on stays green (#207B54), like the hover. */
  .case-page .case-nav a[aria-current] {
    color: #207b54;
  }

  .case-page .case-nav a::before,
  .case-page .case-nav .case-nav__sub a::before {
    background: #207b54;
  }

  /* The current section gets a small square pixel at the labels' left edge, and its label slides
     right to make room. The pixel grows in as the label moves, and both ease back when it's left. */
  .case-nav a {
    position: relative;
    transition: color 160ms ease, padding-left 220ms var(--ease-out);
  }

  .case-nav a::before {
    content: "";
    position: absolute;
    left: 0;
    width: 6px;
    height: 6px;
    background: var(--cs-accent);
    /* Offset by whole pixels (not -50%) so the bullet never lands between pixels. */
    top: calc(50% - 3px);
    scale: 0;
    transition: scale 220ms var(--ease-out);
  }

  .case-nav a[aria-current] {
    padding-left: 14px;
  }

  .case-nav a[aria-current]::before {
    scale: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .case-nav a,
    .case-nav a::before {
      transition: color 160ms ease;
    }
  }

  .case-pill {
    display: none !important;
  }
}

.case-pill {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: #262320;
  color: #f4efe4;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
  transform: translateX(-50%);
}

.case-pill button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms var(--ease-out);
}

.case-pill button:active {
  transform: scale(0.96);
}

.case-pill svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.case-pill span {
  min-width: 160px;
  padding: 0 8px;
  font-family: var(--cs-label);
  font-size: 11px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

@media (hover: hover) and (pointer: fine) {
  .case-pill button:hover {
    background: rgb(244 239 228 / 0.14);
  }
}

.case-body {
  max-width: 640px;
  min-width: 0;
  margin: 0 auto;
}

/* Media and card grids run wider than the text column. */
.case-body .case-pair,
.case-body .case-media,
.case-body .case-cards,
.case-body .case-flow--mobile,
.case-body .case-stats {
  width: min(960px, calc(100vw - 48px));
  margin-left: calc((100% - min(960px, 100vw - 48px)) / 2);
  margin-right: 0;
}

.case-section {
  padding-bottom: 96px;
  /* Clears the sticky top nav when a section is jumped to. */
  scroll-margin-top: 96px;
}

.case-body p,
.case-body li,
.case-body dd {
  font-size: 16px;
  line-height: 1.6;
}

.case-body p {
  margin: 0 0 16px;
}

.case-eyebrow {
  font-family: var(--cs-label);
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cs-accent);
}

.case-body h2 {
  margin: 0 0 24px;
  font-family: var(--cs-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.case-body h3 {
  margin: 40px 0 16px;
  font-family: var(--cs-label);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.5;
}

.case-body h3.case-sub {
  margin-top: 0;
  font-family: var(--cs-display);
  font-weight: 400;
  font-size: 24px;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.2;
}

.case-body h4 {
  margin: 24px 0 8px;
  font-size: 15px;
  font-weight: 500;
}

.case-lede {
  font-size: 16px !important;
}

.case-list,
.case-steps {
  margin: 0 0 24px;
  padding-left: 24px;
}

.case-list li,
.case-steps li {
  margin-bottom: 8px;
  padding-left: 4px;
}

.case-list li::marker,
.case-steps li::marker {
  color: var(--cs-accent);
}

.case-stats {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.case-stats li {
  padding: 24px 24px 24px;
  background: var(--card);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgb(var(--shadow-rgb) / 0.06), 0 8px 24px rgb(var(--shadow-rgb) / 0.06);
}

.case-stats strong {
  display: block;
  margin-bottom: 8px;
  font-family: var(--cs-display);
  font-weight: 400;
  font-size: 44px;
  line-height: 1;
  color: var(--cs-accent);
}

.case-stats li > span {
  font-size: 15px;
  line-height: 1.5;
}

.case-callout {
  margin-top: 32px;
  padding: 24px 32px;
  background: var(--card);
  border-radius: 12px;
  border-left: 2px solid var(--cs-accent);
  box-shadow: 0 1px 2px rgb(var(--shadow-rgb) / 0.06), 0 8px 24px rgb(var(--shadow-rgb) / 0.06);
}

.case-callout h3 {
  margin-top: 0;
}

.case-callout p {
  margin: 0;
}

.case-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.case-sub:not(:first-child) {
  margin-top: 72px;
}

.case-tags {
  margin: 24px 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.case-tags li {
  padding: 4px 12px;
  border: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
  border-radius: 999px;
  font-family: var(--cs-label);
  font-size: 11px !important;
  line-height: 1.6 !important;
}

.case-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.case-card {
  padding: 24px;
  background: var(--card);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgb(var(--shadow-rgb) / 0.06), 0 8px 24px rgb(var(--shadow-rgb) / 0.06);
}

.case-card h4 {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.3;
}

.case-card p {
  font-size: 16px !important;
  line-height: 1.55 !important;
}

.case-insight {
  margin: 16px 0 0 !important;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--paper) 12%, transparent);
}

.case-insight span {
  display: block;
  margin-bottom: 4px;
  font-family: var(--cs-label);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cs-accent);
}

.case-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 32px 0 0;
}

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

.case-flow {
  margin-top: 96px;
}

.case-media {
  margin: 32px 0 0;
  background: var(--card);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(var(--shadow-rgb) / 0.06), 0 8px 24px rgb(var(--shadow-rgb) / 0.08);
}

.case-media img {
  display: block;
  width: 100%;
  height: auto;
}

.case-flow--mobile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 40px;
  align-items: start;
}

.case-body .case-flow--mobile .case-media--phone {
  width: auto;
  margin: 0;
}

.case-quotes {
  display: grid;
  gap: 16px;
}

.case-quotes figure {
  margin: 0;
  padding: 24px 32px;
  background: var(--card);
  border-radius: 12px;
  border-left: 2px solid var(--cs-accent);
  box-shadow: 0 1px 2px rgb(var(--shadow-rgb) / 0.06), 0 8px 24px rgb(var(--shadow-rgb) / 0.06);
}

.case-quotes blockquote {
  margin: 0 0 8px;
  font-family: var(--cs-display);
  font-size: 28px;
  line-height: 1.25;
}

.case-quotes figcaption {
  font-family: var(--cs-label);
  font-size: 11px;
  color: var(--mist);
}

.case-learned {
  margin: 0;
  display: grid;
  border-top: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
}

.case-learned div {
  display: grid;
  gap: 8px;
  padding: 24px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
}

.case-learned dd {
  margin: 0;
}

.case-learned dt {
  font-family: var(--cs-display);
  font-size: 24px;
  line-height: 1.2;
  color: var(--paper);
}

.case-end {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding: 32px var(--inset) 56px;
  border-top: 1px solid color-mix(in srgb, var(--paper) 12%, transparent);
  font-family: var(--cs-label);
  font-size: 12px;
}

.case-end p {
  margin: 0;
  color: var(--mist);
}

@media (max-width: 1000px) {
  .case-hero__meta {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 720px) {
  .case-stats,
  .case-split,
  .case-cards,
  .case-pair,
  .case-flow--mobile {
    grid-template-columns: 1fr;
  }

  .case-media--phone {
    max-width: 260px;
  }

}

/* ---------- design studio ---------- */

.studio-toggle {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: #1d1d1f;
  color: #f5f5f7;
  font: 500 13px/1 "Hanken Grotesk", system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
  transition: transform 160ms var(--ease-out);
}

.studio-toggle:active {
  transform: scale(0.96);
}

.studio-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.studio {
  position: fixed;
  right: 24px;
  bottom: 80px;
  z-index: 20;
  width: 320px;
  max-height: calc(100vh - 112px);
  overflow-y: auto;
  padding: 20px;
  border-radius: 16px;
  background: #ffffff;
  color: #1d1d1f;
  font: 400 13px/1.4 "Hanken Grotesk", system-ui, sans-serif;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06), 0 16px 48px rgb(0 0 0 / 0.16);
  transform-origin: bottom right;
  transition: opacity 160ms ease, transform 160ms var(--ease-out);
}

.studio[hidden] {
  display: block;
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
  visibility: hidden;
}

.studio__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.studio__title {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
}

.studio__group {
  margin: 0;
  padding: 16px 0 0;
  border: 0;
}

.studio__group + .studio__group {
  margin-top: 16px;
  border-top: 1px solid #e8e8ed;
}

.studio__group legend,
.studio label.studio__label {
  display: block;
  padding: 0;
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6e6e73;
}

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

.studio__swatch {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14);
  cursor: pointer;
}

.studio__swatch[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14), 0 0 0 2px #fff, 0 0 0 4px #1d1d1f;
}

.studio__custom {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: #6e6e73;
}

.studio__custom input {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.studio__seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.studio__seg button,
.studio__btn {
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: #f5f5f7;
  color: #1d1d1f;
  font: inherit;
  cursor: pointer;
}

.studio__seg button[aria-pressed="true"] {
  background: #1d1d1f;
  color: #f5f5f7;
}

.studio input[type="range"] {
  width: 100%;
  margin: 12px 0 0;
  accent-color: #1d1d1f;
}

.studio select {
  width: 100%;
  height: 36px;
  margin: 0 0 12px;
  padding: 0 8px;
  border: 1px solid #d2d2d7;
  border-radius: 8px;
  background: #fff;
  color: #1d1d1f;
  font: inherit;
  font-size: 16px;
}

.studio__actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e8e8ed;
}

.studio__actions .studio__btn {
  flex: 1;
}

.studio button:focus-visible,
.studio select:focus-visible,
.studio input:focus-visible,
.studio-toggle:focus-visible {
  outline: 2px solid #1d1d1f;
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .studio {
    right: 16px;
    left: 16px;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .studio,
  .studio-toggle {
    transition: none;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

@media (max-width: 640px) {
  .hero__lede {
    font-size: 13px;
  }

  .project__card {
    gap: 24px;
    padding: 20px;
    border-radius: 20px;
  }

}

/* Visitors who ask for more contrast get a defined outline instead of shadow-only depth. */
@media (prefers-contrast: more) {
  .project__card {
    box-shadow: 0 0 0 1px var(--paper);
  }

  .project__window {
    box-shadow: 0 0 0 1px var(--mist);
  }

  .unlock {
    box-shadow: 0 0 0 1px var(--paper);
  }
}

/* Stack the card (text above, window below) once two columns get too tight. */
@media (max-width: 900px) {
  .project__card {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__copy,
  .hero__status,
  .hero__mark span {
    animation: none;
  }

  html {
    scroll-behavior: auto;
  }

  /* Keep the fades, drop the movement. */
  .project.is-pending,
  .work__head.is-pending,
  .unlock,
  .unlock[open] {
    transform: none;
  }

  a.project__card:active,
  a.project__card:hover .project__media img,
  .project__card:hover .project__media--navy img,
  .unlock__submit:active,
  .unlock__cancel:active {
    transform: none !important;
  }
}

/* Eyebrow-style labels pick up a font's own width setting from the design studio (the top nav's
   Martian Mono is set narrower than normal). */
.case-hero__label,
.case-hero__sub,
.case-hero__meta dt,
.case-nav,
.case-pill span,
.case-eyebrow,
.case-body h3,
.case-tags li,
.case-insight span,
.case-quotes figcaption {
  font-variation-settings: var(--cs-label-var, normal);
}

/* ---------- homepage design studio (home-studio.js) ---------- */

/* Title sizes: each keeps its scaling with screen width; the studio sets the largest size. */
body[data-home-texture] .hero__name {
  font-size: clamp(min(88px, var(--home-hero-max)), 14vw, var(--home-hero-max));
}

body[data-home-texture] .work__head .work__title {
  font-size: clamp(min(36px, var(--home-work-max)), 3vw, var(--home-work-max));
}

body[data-home-texture] .project__name {
  font-size: clamp(min(28px, var(--home-card-max)), 2.8vw, var(--home-card-max));
}

body[data-flower="off"] .site-footer__mark {
  display: none;
}

/* Page texture: starts at the bottom of the hero, fades in, and is at full strength by "Selected Works".
   It sits behind the content on the page color and blends like the case study's, so the same
   number on the slider gives the same look on both pages. */
.home-tex {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  pointer-events: none;
}

body:not([data-home-texture]) .home-tex,
body[data-home-texture="none"] .home-tex {
  display: none;
}

/* With a texture on, the sections let the layer show through (the hero's fade into the page stays). */
body[data-home-texture]:not([data-home-texture="none"]) main,
body[data-home-texture]:not([data-home-texture="none"]) .site-footer {
  position: relative;
  z-index: 1;
  background: none;
}

body[data-home-texture]:not([data-home-texture="none"]) .work {
  background: linear-gradient(
    to bottom,
    var(--ink) 0,
    color-mix(in srgb, var(--ink) 85%, transparent) calc(var(--fade) * 0.25),
    color-mix(in srgb, var(--ink) 50%, transparent) calc(var(--fade) * 0.5),
    color-mix(in srgb, var(--ink) 15%, transparent) calc(var(--fade) * 0.75),
    transparent var(--fade)
  );
}

.home-tex__base,
.home-tex__layers > div {
  position: absolute;
  inset: 0;
}

.home-tex__base {
  background: var(--paper-grain), var(--page);
}

.home-tex__layers {
  display: contents;
}

.home-tex__layers > div {
  display: none;
}

/* Plain page color over the top of the texture, fading out by "Selected Works". */
.home-tex__veil {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--tex-fade, 400px);
  background: var(--paper-grain), var(--page);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, transparent 100%);
}

/* A single repeating texture (Original, Paper, Noise, Fibers), like the case study's. */
.home-tex__flat {
  /* Blended with the page color inside this layer, so it can never show before the color. */
  background: var(--tex-image) 0 0 / var(--tex-size), var(--page);
  background-blend-mode: multiply;
  opacity: var(--tex-strength);
}

body:not([data-home-texture="system"]) .home-tex__flat,
body[data-home-texture="system"] .home-tex__layers > div:not(.home-tex__flat) {
  display: block;
}

/* System: the case study's four layers; strength 50 = the case study's look. Each blend happens
   with the page color inside its own layer, so while scrolling the gray texture photo can never
   appear on its own a moment before the cream. */
.home-tex__vellum {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-color: var(--page);
  background-blend-mode: multiply;
  opacity: calc(0.16 * var(--tex-strength));
}

.home-tex__paper {
  /* Fixed to the screen and stretched over it, exactly as the case study draws it. */
  background: url("assets/case/paper.webp") 50% / cover fixed;
  opacity: calc(0.16 * var(--tex-strength));
}

.home-tex__surface {
  background: url("assets/case/surface.webp") 50% / cover fixed, var(--page);
  background-blend-mode: overlay;
  opacity: calc(1 * var(--tex-strength));
}

.home-tex__grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.4' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-color: var(--page);
  background-blend-mode: multiply;
  opacity: calc(0.08 * var(--tex-strength));
}

/* The studio's value next to a slider label, and a two-button row. */
.studio__group legend:has(.studio__value) {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.studio__value {
  letter-spacing: 0;
  text-transform: none;
  color: #1d1d1f;
}

.studio__seg--two {
  grid-template-columns: repeat(2, 1fr);
}

/* Footer without the flower: the copyright sits right under "Thanks for wandering through.",
   on the same line as the first links (Home, LinkedIn). */
body[data-flower="off"] .site-footer__intro,
.case-page .site-footer__intro {
  grid-template-columns: 1fr;
}

body[data-flower="off"] .site-footer__legal,
.case-page .site-footer__legal {
  grid-column: 1;
  align-self: start;
  margin-top: 6px;
}

/* ---------- Paycom card: the case study's green gradient behind the TCR dashboard ---------- */
/* Still at rest; on hover the colors start drifting, the same motion as the case study hero. */
.project__media--grad {
  --g1: #cfe6d4; /* mint */
  --g2: #b8d5c0; /* sage */
  --g3: #e4efd8; /* celadon */
  --g4: #f3eedc; /* cream */
  position: relative;
  isolation: isolate;
}

.card-grad {
  position: absolute;
  inset: -20%;
  z-index: -1;
  background: linear-gradient(120deg, var(--g3), var(--g1) 50%, var(--g4));
  filter: blur(48px) saturate(1.04);
}

.card-grad i {
  position: absolute;
  width: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.9;
  animation-play-state: paused;
}

.card-grad i:nth-child(1) { left: -10%; top: -20%; background: var(--g1); animation: card-loop-a 16s ease-in-out infinite paused; }
.card-grad i:nth-child(2) { right: -10%; top: -10%; background: var(--g2); animation: card-loop-b 19s ease-in-out infinite paused; }
.card-grad i:nth-child(3) { left: 10%; bottom: -30%; background: var(--g3); animation: card-loop-c 22s ease-in-out infinite paused; }
.card-grad i:nth-child(4) { right: 10%; bottom: -20%; width: 40%; background: color-mix(in srgb, #135338 16%, var(--g1)); animation: card-loop-b 25s ease-in-out infinite reverse paused; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  a.project__card:hover .card-grad i,
  .project__card:hover .project__media--navy .card-grad i {
    animation-play-state: running;
  }
}

@keyframes card-loop-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(70%, 10%) scale(1.15); }
  50% { transform: translate(60%, 60%) scale(0.95); }
  75% { transform: translate(-6%, 50%) scale(1.1); }
}
@keyframes card-loop-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(-70%, 30%) scale(0.9); }
  50% { transform: translate(-40%, 70%) scale(1.15); }
  75% { transform: translate(10%, 40%) scale(1); }
}
@keyframes card-loop-c {
  0%, 100% { transform: translate(0, 0) scale(1.05); }
  33% { transform: translate(60%, -50%) scale(0.92); }
  66% { transform: translate(-20%, -80%) scale(1.15); }
}

/* The screenshot: framed, set in from the top left and running off the bottom right. */
.project__media .card-shot {
  position: absolute;
  top: 16%;
  left: 14%;
  width: 92%;
  max-width: none;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgb(19 83 56 / 0.06), 0 24px 56px -16px rgb(19 83 56 / 0.24);
  transform-origin: top left;
}

/* Labor budgeting card: the same gradient, navy (#4671AD) into the same cream; the screenshot
   mirrors the Paycom card, set in from the top right and running off the bottom left. */
.project__media--navy {
  --g1: color-mix(in srgb, #4671ad 30%, #fff);
  --g2: color-mix(in srgb, #4671ad 42%, #fff);
  --g3: color-mix(in srgb, #4671ad 16%, #fff);
  --g4: #f3eedc; /* the same cream as the Paycom card */
}
.project__media--navy .card-grad i:nth-child(4) { background: color-mix(in srgb, #4671ad 16%, var(--g1)); }
.project__media--navy .card-shot {
  left: auto;
  right: 14%;
  box-shadow: 0 2px 4px rgb(70 113 173 / 0.06), 0 24px 56px -16px rgb(70 113 173 / 0.24);
  transform-origin: top right;
}

/* Design studio: hide the "Selected Works" title (it stays for screen readers). */
body[data-work-title="off"] .work__head {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* Night: the System texture is much softer, so the dark page reads as calm as the day one. */
:root[data-time="night"] .home-tex__vellum { opacity: calc(0.06 * var(--tex-strength)); }
:root[data-time="night"] .home-tex__paper { opacity: calc(0.03 * var(--tex-strength)); }
:root[data-time="night"] .home-tex__surface { opacity: calc(0.16 * var(--tex-strength)); }
:root[data-time="night"] .home-tex__grain { opacity: calc(0.04 * var(--tex-strength)); }

/* ---------- square cursor (below the hero, mouse only; cursor.js) ---------- */
/* Four touching squares, each a color from the season's art: --sq1 top left, --sq2 top right,
   --sq3 bottom left, --sq4 bottom right. It keeps them over clickable things. */
:root,
:root[data-season="spring"] {
  --sq1: #f6b7c7; --sq2: #e98aa6; --sq3: #c24f75; --sq4: #f9d3dc;
}
:root[data-season="summer"] {
  --sq1: #ffd84a; --sq2: #f5c32c; --sq3: #e8b923; --sq4: #f9e48f;
}
:root[data-season="fall"] {
  --sq1: #e0533f; --sq2: #e8913c; --sq3: #b8322a; --sq4: #d6404f;
}
:root[data-season="winter"] {
  --sq1: #8fbfe0; --sq2: #b3cde3; --sq3: #4f7394; --sq4: #8eafc9;
}

html.has-sq-cursor,
html.has-sq-cursor * {
  cursor: none !important;
}

.sq-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease-out;
}

.sq-cursor.is-on {
  opacity: 1;
}

/* One 14px box painted in four quarters, so there are no seams between the squares. */
.sq-cursor__mark {
  --a: var(--sq1);
  --b: var(--sq2);
  --c: var(--sq3);
  --d: var(--sq4);
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  background:
    linear-gradient(var(--a), var(--a)) 0 0 / 50% 50% no-repeat,
    linear-gradient(var(--b), var(--b)) 100% 0 / 50% 50% no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / 50% 50% no-repeat,
    linear-gradient(var(--d), var(--d)) 100% 100% / 50% 50% no-repeat;
  transition: width 160ms cubic-bezier(0.2, 0.6, 0.2, 1), height 160ms cubic-bezier(0.2, 0.6, 0.2, 1), margin 160ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* Over something clickable: a little smaller, same colors. */
.sq-cursor.is-click .sq-cursor__mark {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
}

/* Over plain text: a 3px bar in the season's main color, a little shorter than the line. */
.sq-cursor.is-text .sq-cursor__mark {
  width: 3px;
  height: var(--bar, 16px);
  margin: calc(var(--bar, 16px) / -2) 0 0 -1px;
  background: var(--sq-ink, var(--sodium));
  transition: none;
}

.sq-cursor__label {
  margin-top: -6px;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 12px;
  color: var(--sq-ink, var(--sodium));
  white-space: nowrap;
}

.sq-cursor:not(.has-label) .sq-cursor__label,
.sq-cursor.is-text .sq-cursor__label {
  display: none;
}

/* Case study: the cursor in the hero gradient's greens with deep green, and links turn green (#207B54) on hover. */
.case-page {
  --sq1: #135338;
  --sq2: #b8d5c0;
  --sq3: #a9d1b4;
  --sq4: #5f9a78; /* a mid green between the sage and the deep green */
  --sq-ink: #135338;
}

@media (hover: hover) and (pointer: fine) {
  .case-page .hero__mark:hover,
  .case-page .case-bar nav a:hover,
  .case-page .case-nav a:hover,
  .case-page .case-nav .case-nav__sub a:hover,
  .case-page .rs-ask button:hover,
  .case-page .site-footer__col a:hover {
    color: #207b54;
  }
}