/* ============================================
   Subpage chrome — /work/, /lab/, /privacy/, /terms/.

   The interior pages live on the paper tone with the frosted header state
   forced on (they have no dark hero to be transparent over). Same kicker
   grammar, same type scale, no stage, no GSAP: these pages are documents and
   load like documents.
   ============================================ */

.subpage {
  background: var(--color-paper, #f7f5f0);
  color: var(--color-black);
}

.subpage__header {
  position: sticky;
  top: 0;
}

.subpage__main {
  padding: calc(var(--header-height) + clamp(3rem, 8vw, 6rem)) 0 clamp(4rem, 10vw, 8rem);
}

.subpage__title {
  margin: var(--space-5) 0 0;
  max-width: 18ch;
  font-size: clamp(2.6rem, 5.5vw, 5rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.subpage__lede {
  margin: var(--space-8) 0 0;
  max-width: 58ch;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  color: var(--color-gray-700);
}

.subpage__footnote {
  margin: clamp(3rem, 6vw, 5rem) 0 0;
  max-width: 52ch;
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}

/* ---- The slots: engagements and lab pieces as ruled entries ---- */

.workpage__slots,
.labpage__pieces {
  margin-top: clamp(3rem, 7vw, 6rem);
  border-top: 1px solid rgba(10, 10, 10, 0.15);
}

.workpage__slot,
.labpage__piece {
  position: relative;
  padding: clamp(1.75rem, 4vw, 3rem) 0;
  border-bottom: 1px solid rgba(10, 10, 10, 0.12);
  display: grid;
  grid-template-columns: 4rem 1fr;
  grid-template-rows: auto;
  gap: var(--space-2) var(--space-6);
  align-items: baseline;
}

.workpage__slot-index {
  grid-row: 1 / span 3;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-gray-400);
  letter-spacing: 0.04em;
}

.workpage__slot-title {
  margin: 0;
  grid-column: 2;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.workpage__slot-bar {
  grid-column: 2;
  order: -1;
}

.workpage__slot-note {
  margin: 0;
  grid-column: 2;
  max-width: 62ch;
  color: var(--color-gray-600);
  line-height: 1.55;
}

.workpage__slot .link-arrow,
.labpage__piece .link-arrow {
  grid-column: 2;
  width: max-content;
}

.labpage__piece--next .workpage__slot-title {
  color: var(--color-gray-500);
}

/* On these static pages the redaction bar needs no reveal choreography —
   it is simply drawn. */
.subpage .work__redaction {
  transform: none;
  width: min(18ch, 100%);
}

/* ---- Legal pages: two languages, one document ---- */

.subpage__legal {
  max-width: 68ch;
}

.subpage__legal h2 {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  letter-spacing: -0.02em;
}

.subpage__legal h3 {
  margin: var(--space-8) 0 0;
  font-size: var(--text-lg);
}

.subpage__legal p,
.subpage__legal li {
  margin: var(--space-4) 0 0;
  color: var(--color-gray-700);
  line-height: 1.65;
}

.subpage__legal ul {
  margin: var(--space-4) 0 0;
  padding-left: 1.2em;
}

.subpage__updated {
  display: block;
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}

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

.subpage__footer {
  border-top: 1px solid rgba(10, 10, 10, 0.12);
  padding: var(--space-8) 0;
}

.subpage__footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.subpage__footer a {
  color: var(--color-gray-600);
  text-decoration: none;
  font-size: var(--text-sm);
}

.subpage__footer a:hover {
  color: var(--color-black);
}

@media (max-width: 640px) {
  .workpage__slot,
  .labpage__piece {
    grid-template-columns: 1fr;
  }

  .workpage__slot-index {
    grid-row: auto;
  }

  .workpage__slot-title,
  .workpage__slot-bar,
  .workpage__slot-note,
  .workpage__slot .link-arrow,
  .labpage__piece .link-arrow {
    grid-column: 1;
  }
}

/* ============================================
   The page types the factory produces: service pages, the services index,
   note pages, the notes index, and the studio ledger. All on the paper
   ground, all ruled, all using the kicker grammar the rest of the site uses.
   ============================================ */

.crumbs {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}

.crumbs a { color: var(--color-gray-600); text-decoration: none; }
.crumbs a:hover { color: var(--color-black); }

/* ---- Blocks shared by service, note and studio pages ---- */

.svc__block,
.studio__block {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(10, 10, 10, 0.12);
}

.svc__block-title {
  margin: 0 0 var(--space-5);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gray-500);
}

.svc__proof,
.studio__text {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.6;
  color: var(--color-gray-700);
}

.svc__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.svc__process {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-6);
}

.svc__process li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-2) var(--space-5);
  align-items: baseline;
}

.svc__process li > span:first-child {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  color: var(--color-gray-400);
}

.svc__process strong { font-size: var(--text-lg); }
.svc__process li > span:last-child {
  grid-column: 2;
  max-width: 58ch;
  color: var(--color-gray-600);
  line-height: 1.55;
}

/* ---- The CTA that closes every page type ---- */

.svc__cta {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: var(--space-10);
  border-top: 2px solid var(--color-navy);
}

.svc__cta-title {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.svc__cta-text {
  margin: var(--space-5) 0 var(--space-8);
  max-width: 52ch;
  color: var(--color-gray-600);
  line-height: 1.6;
}

.svc__cta .hero__cta {
  display: inline-flex;
  background: var(--color-black);
  color: #ffffff;
}

/* The case's business frame: set larger than body copy and above the
   figure, because it is the sentence that decides whether a buyer keeps
   reading a case about someone else's software. */
.case__frame {
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
  max-width: 60ch;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.6;
  color: var(--color-black);
}

/* ---- The service page's own argument (src/_data/services.js) ----

   These blocks carry the content that exists on no other URL. Set at a
   comfortable reading measure rather than full bleed: the page is now long
   enough that line length matters more than filling the grid. */

.svc__intro {
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  max-width: 62ch;
}

.svc__intro p {
  margin: 0 0 var(--space-5);
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--color-gray-700, #3a3a3a);
}

.svc__intro p:last-child { margin-bottom: 0; }

/* Deliverables: a ruled list of artifacts. The name is the promise and the
   detail is what actually arrives, so the two are typographically split. */
.svc__deliverables {
  margin: var(--space-6) 0 0;
}

.svc__deliverable {
  padding: var(--space-5) 0;
  border-bottom: 1px solid rgba(10, 10, 10, 0.09);
}

.svc__deliverable dt {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-black);
  margin-bottom: var(--space-2);
}

.svc__deliverable dd {
  margin: 0;
  max-width: 62ch;
  line-height: 1.65;
  color: var(--color-gray-700, #3a3a3a);
}

/* Engagement shapes: the self-qualification step. Duration is tabular and
   loud because it is the number a buyer is actually scanning for. */
.svc__shapes {
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-5);
}

.svc__shape {
  padding: var(--space-6);
  background: rgba(10, 10, 10, 0.03);
  border-left: 2px solid rgba(122, 92, 18, 0.5);
}

.svc__shape-name {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.svc__shape-duration {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7A5C12;
}

.svc__shape-includes {
  margin: 0;
  max-width: 60ch;
  line-height: 1.65;
  color: var(--color-gray-700, #3a3a3a);
}

@media (min-width: 900px) {
  .svc__shapes { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}

/* The service's own questions, distributed out of the homepage FAQ. */
.svc__faq { margin: var(--space-6) 0 0; }

.svc__faq-item {
  padding: var(--space-5) 0;
  border-bottom: 1px solid rgba(10, 10, 10, 0.09);
}

.svc__faq-item dt {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
}

.svc__faq-item dd {
  margin: 0;
  max-width: 62ch;
  line-height: 1.65;
  color: var(--color-gray-700, #3a3a3a);
}

/* The honest proof line, or the honest absence of one. */
.svc__proofnote {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid rgba(10, 10, 10, 0.12);
  max-width: 66ch;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-gray-400);
}

/* ---- Page-specific media: the evidence a service page owed a buyer ----

   Every subpage on this site was image-free until 2026-08-13, which is most
   of why the homepage read as "the site" and everything behind it as an
   appendix. The plate framing is the site's furniture — a hairline rule and
   a paper field, not a card — and the raking sweep is the non-GL member of
   the motion family: a CSS mask, so it runs where the WebGL field cannot
   (mobile, software renderers) and settles instantly under reduced motion. */

.svc__figure {
  margin: clamp(2rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  border-top: 1px solid rgba(10, 10, 10, 0.12);
  padding-top: var(--space-6);
}

.svc__figure picture {
  display: block;
  position: relative;
  overflow: hidden;
  background: rgba(10, 10, 10, 0.04);
}

.svc__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.04);
  transition: filter 0.6s ease, transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.svc__figure:hover img {
  filter: saturate(1) contrast(1);
  transform: scale(1.015);
}

/* The sweep: a narrow band of raking light crossing the plate once as the
   figure arrives. Mask-only, so it never repaints the image itself. */
@media (prefers-reduced-motion: no-preference) {
  .svc__figure picture::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 42%, rgba(232, 200, 64, 0.28) 50%, transparent 58%);
    transform: translateX(-120%);
    pointer-events: none;
  }

  /* data-fx-done is set by js/fx.js the moment the figure reveals, so the
     sweep rides the same trigger as the lift instead of guessing at it. */
  .svc__figure[data-fx-done] picture::after,
  .svc__figure:hover picture::after {
    animation: svc-rake 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
}

@keyframes svc-rake {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}

/* ---- The related band: the graph, drawn (src/_data/relations.js) ----

   Siblings below keep a visitor inside one silo; this crosses them. Ruled
   rows rather than cards: the site's furniture is machined, and a card grid
   here would compete with the case plates it points at. The kind label is
   the smallest type on the page and the title is the biggest thing in the
   row, so the eye reads "Case: the intake agent" as one line. */

.related {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(10, 10, 10, 0.12);
}

.related__list {
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.related__item {
  display: grid;
  grid-template-columns: minmax(4.5rem, auto) 1fr auto;
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(10, 10, 10, 0.09);
}

.related__kind {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray-400);
}

.related__link {
  color: var(--color-black);
  text-decoration: none;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}

.related__link:hover { color: #7A5C12; }

.related__note {
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-gray-400);
  text-align: right;
}

/* The three-column row collapses rather than crushing the title, which is
   the column that has to survive Spanish running ~20% longer. */
@media (max-width: 600px) {
  .related__item {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .related__note { text-align: left; }
}

/* ---- Sibling navigation: no page is a dead end ---- */

.svc__siblings,
.note__siblings {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(10, 10, 10, 0.12);
}

.svc__siblings ul,
.note__siblings ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-4);
}

.svc__siblings a,
.note__siblings a {
  display: inline-flex;
  gap: var(--space-4);
  align-items: baseline;
  color: var(--color-black);
  text-decoration: none;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.svc__siblings a span {
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-gray-400);
}

.svc__siblings a:hover,
.note__siblings a:hover { color: #7A5C12; }

/* ---- The services index: a ruled table of contents ---- */

.svcindex,
.noteindex {
  margin: clamp(3rem, 7vw, 5rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(10, 10, 10, 0.15);
}

.svcindex__row {
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  gap: var(--space-6);
  align-items: start;
  padding: clamp(1.75rem, 4vw, 2.75rem) 0;
  border-bottom: 1px solid rgba(10, 10, 10, 0.12);
}

.svcindex__num {
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-gray-400);
  letter-spacing: 0.04em;
}

.svcindex__title {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.svcindex__title a { color: inherit; text-decoration: none; }
.svcindex__title a:hover { color: #7A5C12; }

.svcindex__lead {
  margin: var(--space-2) 0 0;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gray-500);
}

.svcindex__desc {
  margin: var(--space-4) 0 0;
  max-width: 62ch;
  color: var(--color-gray-600);
  line-height: 1.55;
}

.svcindex__go {
  align-self: center;
  font-size: 1.5rem;
  color: var(--color-gray-400);
  text-decoration: none;
  transition: color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

.svcindex__row:hover .svcindex__go {
  color: #7A5C12;
  transform: translateX(4px);
}

/* ---- The notes index and the note page ---- */

.noteindex__row {
  padding: clamp(1.5rem, 3.5vw, 2.25rem) 0;
  border-bottom: 1px solid rgba(10, 10, 10, 0.12);
}

.noteindex__meta {
  display: flex;
  gap: var(--space-4);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gray-500);
}

.noteindex__time { font-variant-numeric: tabular-nums; }

.noteindex__title {
  margin: var(--space-3) 0 0;
  max-width: 24ch;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.noteindex__title a { color: inherit; text-decoration: none; }
.noteindex__title a:hover { color: #7A5C12; }

.note { max-width: 68ch; }
.note__title { max-width: 20ch; }

.note__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}

.note__body p {
  margin: var(--space-6) 0 0;
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.7;
  color: var(--color-gray-800);
}

.note__cta {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(10, 10, 10, 0.12);
}

.note__cta p {
  margin: 0 0 var(--space-4);
  color: var(--color-gray-600);
}

/* ---- The studio ledger ---- */

.studio__ledger {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-8);
  margin: 0;
}

.studio__ledger dt {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gray-500);
}

.studio__ledger dd {
  margin: var(--space-3) 0 0;
  color: var(--color-gray-600);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.studio__figure {
  display: block;
  font-size: clamp(2.5rem, 4.5vw, 3.5rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-black);
}

@media (max-width: 640px) {
  .svcindex__row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .svcindex__go { display: none; }
  .svc__process li { grid-template-columns: 1fr; }
  .svc__process li > span:last-child { grid-column: 1; }
}

/* ---- Case studies: the figure leads, the prose follows, the proof is
   checkable. Same ruled grammar as the service pages. ---- */

.case { max-width: 74ch; }

.case__figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4);
  margin: var(--space-8) 0 0;
  padding-bottom: var(--space-8);
  border-bottom: 2px solid var(--color-navy);
}

.case__figure-value {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
}

.case__figure-label {
  max-width: 24ch;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6E675B;
}

.case__prose {
  margin: 0;
  max-width: 68ch;
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.7;
  color: var(--color-gray-800);
}

.case__proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-8);
  margin: 0;
}

.case__proof-value {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}

.case__proof-label {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: #6E675B;
}

.case__stack {
  margin: var(--space-6) 0 0;
  font-size: var(--text-sm);
  color: #6E675B;
}

.workpage__slot--published .workpage__slot-title a {
  color: inherit;
  text-decoration: none;
}

.workpage__slot--published .workpage__slot-title a:hover { color: #7A5C12; }

.workpage__slot-figure {
  grid-column: 2;
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: #6E675B;
}

.workpage__slot-figure strong {
  font-variant-numeric: tabular-nums;
  color: var(--color-black);
}

@media (max-width: 640px) {
  .workpage__slot-figure { grid-column: 1; }
}

/* Self-initiated work says so, everywhere it appears. */
.workpage__own {
  color: #7A5C12;
  font-weight: var(--weight-semibold);
}