/* Tamar Sidi — site styles. Colors and type come only from the tokens below. */

:root {
  --cream: #F5EFE4;
  --oat: #E8DFD0;
  --ink: #141110;
  --cacao: #3B2A22;
  --red: #8B1A1A;
  --paper: #FAF6EE; /* Writing page sheets only: a lighter cream */

  --wine: #8B1A1A;      /* the one accent (same as --red) */
  --wine-deep: #5E1218; /* a darker shade of the accent, for one work card */
  --blue-ink: #16171E;  /* near-black with a hint of blue, for headlines */
  --sand: #DCCDB2;      /* the second cream tone */

  --serif: "Libre Caslon Display", "Iowan Old Style", Georgia, serif;
  --serif-it: "Libre Caslon Text", "Iowan Old Style", Georgia, serif; /* the same Caslon family's italic */
  --sans: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --hand: "Nothing You Could Do", "Segoe Print", cursive; /* only for things written by hand */
  --mono: "DM Mono", "SFMono-Regular", Menlo, monospace; /* only for code in the machine panel */

  --gutter: clamp(1.25rem, 5.5vw, 6rem);
  --max: 90rem;
  --section: clamp(5rem, 12vw, 10rem);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
@media (min-width: 48em) { body { font-size: 1.125rem; } }

/* Paper grain: an SVG noise tile, multiplied over everything, barely there. */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .16 0 0 0 0 .13 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
p, .toc-desc { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 500; }

::selection { background: var(--red); color: var(--cream); }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.dark :focus-visible, .site-footer :focus-visible { outline-color: var(--cream); }

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

/* Placeholders stay visible so they're easy to find and replace. */
.ph { background: var(--oat); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 .2em; }
.dark .ph, .site-footer .ph { background: none; color: inherit; opacity: .7; }

/* ---------- Links & buttons ---------- */

a { color: inherit; }
main a:not(.btn):not(.card-link):not(.toc-row):not(.next-link):not(.contact-row):not(.pick),
.site-footer a {
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: text-decoration-thickness .2s var(--ease);
}
main a:not(.btn):not(.card-link):not(.toc-row):not(.next-link):not(.contact-row):not(.pick):hover,
.site-footer a:hover { text-decoration-thickness: 3px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem;
  padding: .8rem 1.5rem;
  font: 500 1rem/1 var(--sans);
  letter-spacing: .01em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: .5rem; /* softly rounded corners on every button */
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .1s ease-out;
  user-select: none; -webkit-user-select: none;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--red); color: var(--cream); }
.btn-primary:hover { background: var(--ink); }
.btn-secondary { border-color: var(--ink); color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--cream); }
.btn-small { min-height: 2.5rem; padding: .6rem 1.1rem; font-size: .9375rem; }

/* ---------- Labels ---------- */

.label, .card-industry, .tags, .post-meta, .stat-label, .more {
  font-family: var(--sans);
  font-weight: 500;
  font-size: .6875rem;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cacao);
}
.label { display: flex; align-items: center; gap: .7em; }
.label::before { content: ""; width: .55em; height: .55em; background: var(--red); flex: none; }
.dark .label { color: var(--oat); }

/* ---------- Page frame ---------- */

main > section, main > div { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
main > article { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
main > section.dark, main > section.band { max-width: none; padding-inline: 0; }
.dark { background: var(--cacao); color: var(--cream); }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }


/* ---------- Cards ---------- */

.card-link { display: block; text-decoration: none; }
.card { transition: transform .35s var(--ease); }
.ph-image {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--oat);
  display: flex; align-items: flex-end;
  padding: 1rem;
}
.ph-image span {
  font: 400 .6875rem/1.5 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--cacao);
  transition: transform .45s var(--ease);
  transform-origin: left bottom;
}
.ph-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.ph-image .ph { background: none; padding: 0; }
/* Crop marks, like a proof sheet waiting for its photo. */
.ph-image::before, .ph-image::after {
  content: ""; position: absolute; width: 14px; height: 14px; border: 0 solid var(--cacao);
  transition: transform .45s var(--ease);
}
.ph-image::before { top: 12px; left: 12px; border-top-width: 1px; border-left-width: 1px; }
.ph-image::after { top: 12px; right: 12px; border-top-width: 1px; border-right-width: 1px; }

.card-body { padding-top: 1.25rem; }
.card-title { font: 400 clamp(2rem, 4vw, 2.75rem)/1 var(--serif); letter-spacing: -.015em; }
.card-summary { margin-top: .75rem; max-width: 32rem; }
.card-industry { margin-top: 1.25rem; color: var(--ink); }
.tags { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin-top: .4rem; }

@media (hover: hover) {
  .card.is-linked:hover { transform: translateY(-4px); }
  .card.is-linked:hover .ph-image::before { transform: translate(-4px, -4px); }
  .card.is-linked:hover .ph-image::after { transform: translate(4px, -4px); }
  .card.is-linked:hover .ph-image span, .card.is-linked:hover .ph-image img { transform: scale(1.03); }
  .card.is-linked:hover .card-title { color: var(--red); }
}
.card-link:focus-visible { outline-offset: 6px; }
.card-meta {
  margin-bottom: .75rem;
  font: 400 .6875rem/1.5 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cacao);
}
.card-meta .ph { background: none; padding: 0; }
.card-status { margin-top: 1rem; font: 400 .6875rem/1.5 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.card-note { display: inline-flex; align-items: center; gap: .45rem; color: var(--red); }
.lock { flex: none; }
.card-title { transition: color .3s var(--ease); }

/* ---------- Inner pages: shared head ---------- */

.page-head { padding-top: clamp(3.5rem, 9vw, 7.5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.page-title {
  font: 400 clamp(3.5rem, 11vw, 9rem)/.92 var(--serif);
  letter-spacing: -.025em;
}
.page-intro { margin-top: 2rem; max-width: 45ch; color: var(--cacao); }
@media (min-width: 56em) {
  .page-head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; align-items: end; }
  .page-title { grid-column: 1 / 8; }
  .page-intro { grid-column: 8 / 13; margin-top: 0; font-size: 1.1875rem; line-height: 1.55; padding-bottom: .6rem; }
}

/* Long-form text */
.prose { max-width: 38em; }
.prose > * + * { margin-top: 1.15em; }
.prose-lead { font-size: 1.125rem; }
@media (min-width: 48em) { .prose-lead { font-size: 1.25rem; line-height: 1.6; } }
.bullets li { position: relative; padding-left: 1.4em; }
.bullets li + li { margin-top: .6em; }
.bullets li::before { content: ""; position: absolute; left: 0; top: .62em; width: .4em; height: .4em; background: var(--red); }
.table-wrap { overflow-x: auto; margin-block: 1.75em; }
.prose table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .9375rem; line-height: 1.5; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: .8rem 1rem .8rem 0; border-bottom: 1px solid rgba(59, 42, 34, .3); }
.prose thead th { font: 400 .6875rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cacao); border-bottom-color: var(--cacao); }
.prose tbody th { font-weight: 500; }
.prose table.is-stats td:nth-child(2) { font: 400 1.5rem/1 var(--serif); color: var(--red); white-space: nowrap; }

/* ---------- Work ---------- */

.work { padding-bottom: var(--section); }
/* Filters: two quiet lines in the corner of the page head. Same look on every page that has them. */
.filters { margin-top: 1.75rem; }
.filter-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem 1.25rem;
  padding: .3rem 0;
}
.filter-name {
  flex: 0 0 5.25rem;
  font: 400 .6875rem/1.5 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cacao);
}
.filter-options { flex: 1 1 14rem; display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.pick { cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; min-height: 2rem; font-size: .875rem; }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick span {
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: .3em;
  transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.pick:hover span { text-decoration-color: var(--red); }
a.pick:hover span { color: var(--red); }
.pick input:checked + span { color: var(--red); text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.pick input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 4px; }
.page-head.has-filters .page-intro { margin-top: 1.25rem; }
@media (min-width: 56em) {
  .page-head.has-filters .page-head-text { grid-column: 1 / 6; }
  .page-head.has-filters .filters { grid-column: 6 / 13; margin-top: 0; }
  .page-head.has-filters .page-intro { font-size: 1rem; padding-bottom: 0; }
}
.text-btn { font: 500 .9375rem/1 var(--sans); color: var(--ink); background: none; border: 0; padding: .5rem 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: .22em; }
.text-btn:hover { text-decoration-thickness: 3px; }
.text-btn[hidden] { display: none; }

.work-grid { display: grid; gap: 3.5rem; align-items: start; }
.card[hidden] { display: none; }
@media (min-width: 40em) { .work-grid { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; row-gap: 4.5rem; } }
@media (min-width: 64em) {
  .work-grid { grid-template-columns: repeat(3, 1fr); }
  .work-grid .card.col-2 { margin-top: 5rem; }
}
.work-grid .card-title { font-size: clamp(1.75rem, 2.6vw, 2.25rem); }
.work-grid .ph-image { aspect-ratio: 16 / 10; }
.empty { margin-top: 3rem; color: var(--cacao); }

/* ---------- Case study ---------- */

.case-head { padding-top: clamp(3rem, 8vw, 6.5rem); }
.draft-flag { display: inline-block; margin-bottom: 1.5rem; padding: .35rem .7rem; background: var(--oat); font: 400 .75rem/1.5 var(--sans); letter-spacing: .08em; color: var(--red); }
.case-client { display: flex; align-items: center; gap: .7em; font: 400 .75rem/1.5 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cacao); margin-bottom: 1.5rem; }
.case-client::before { content: ""; width: .55em; height: .55em; background: var(--red); flex: none; }
.case-headline { display: block; font: 400 clamp(2.5rem, 6.2vw, 5.75rem)/1 var(--serif); letter-spacing: -.02em; max-width: 17ch; }
.case-hero { margin-top: clamp(2.5rem, 6vw, 4.5rem); aspect-ratio: 16 / 9; }
/* Whole image: nothing cropped, and narrower on wide screens so it never has to be enlarged. */
.case-hero.is-whole { aspect-ratio: auto; display: block; background: none; }
.case-hero.is-whole img { position: static; width: 100%; height: auto; object-fit: fill; }
@media (min-width: 64em) { .case-hero.is-whole:not(.is-wide) { width: 66%; } }

.case-intro { display: grid; gap: 3rem; padding-top: clamp(3rem, 7vw, 5.5rem); }
.tldr .label { margin-bottom: 1.25rem; }
.glance { background: var(--oat); padding: 1.75rem 1.5rem 1rem; align-self: start; }
.glance-title { font: 400 1.75rem/1 var(--serif); margin-bottom: 1rem; }
.glance dl { margin: 0; }
.glance dl > div { padding: .9rem 0; border-top: 1px solid rgba(59, 42, 34, .3); }
.glance dt { font: 400 .6875rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cacao); }
.glance dd { margin: .3rem 0 0; font-size: .9375rem; line-height: 1.5; }
@media (min-width: 64em) {
  .case-intro { grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; }
  .tldr { grid-column: 1 / 8; }
  .glance { grid-column: 9 / 13; padding: 2rem 1.75rem 1rem; }
}

.case-block { margin-top: clamp(4rem, 9vw, 7rem); padding-top: 1.5rem; border-top: 1px solid var(--cacao); display: grid; gap: 1.5rem; }
.block-title { font: 400 clamp(2.25rem, 4vw, 3.25rem)/1 var(--serif); letter-spacing: -.015em; }
@media (min-width: 64em) {
  .case-block { grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; }
  .block-title { grid-column: 1 / 5; }
  .case-block .prose { grid-column: 5 / 12; }
}
.case-block strong { display: block; margin-top: .5em; font: 400 clamp(1.5rem, 2.4vw, 2rem)/1.2 var(--serif); letter-spacing: -.01em; }

.case-steps { margin-top: clamp(4rem, 9vw, 7rem); }
.case-step > *, .case-block > *, .case-intro > * { min-width: 0; }
.case-step { display: grid; gap: 1rem; padding-block: 1.5rem clamp(3rem, 7vw, 5rem); border-top: 1px solid rgba(59, 42, 34, .35); }
.step-num { font: 400 clamp(3.5rem, 8vw, 6.5rem)/.85 var(--serif); letter-spacing: -.03em; color: var(--red); }
.step-title { font: 400 clamp(1.5rem, 2.2vw, 1.875rem)/1.15 var(--serif); letter-spacing: -.01em; margin-bottom: 1.25rem; max-width: 24ch; } /* h3: clearly smaller than the h2 section headings */
.step-figure { margin: 1.5rem 0 0; }
.step-figure .ph-image { aspect-ratio: 16 / 9; }
/* A real image in a section is shown whole, never cropped. */
.step-figure .ph-image.has-img { aspect-ratio: auto; display: block; background: none; }
.step-figure .ph-image.has-img img { position: static; width: 100%; height: auto; object-fit: fill; }
.step-video video { display: block; width: 100%; height: auto; background: var(--ink); }
@media (min-width: 64em) {
  .case-step { grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; padding-top: 2rem; }
  .step-num { grid-column: 1 / 3; }
  .step-text { grid-column: 5 / 12; }
  .step-figure { grid-column: 3 / 11; margin-top: 2.5rem; }
  .case-step:nth-child(even) .step-figure { grid-column: 5 / 13; }
}

.outcome { margin-top: clamp(2rem, 5vw, 4rem); padding-block: var(--section); }
.outcome .wrap { display: grid; gap: 2rem; }
.outcome-title { font: 400 clamp(3rem, 8vw, 6.5rem)/.95 var(--serif); letter-spacing: -.025em; }
.outcome .prose { color: var(--oat); font-size: 1.125rem; }
.outcome-figure { margin: clamp(1.5rem, 4vw, 3rem) 0 0; }
.outcome-figure img { width: 100%; height: auto; }
.dark .img-credit { color: var(--oat); }
@media (min-width: 64em) {
  .outcome .wrap { grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; }
  .outcome-title { grid-column: 1 / 6; }
  .outcome .prose { grid-column: 7 / 13; font-size: 1.25rem; padding-top: .75rem; }
  .outcome-figure { grid-column: 5 / 13; }
}

.pull { padding-top: var(--section); }
.pull figure { margin: 0; }
.pull-quote { margin: 0; }
.pull-quote p { font: 400 clamp(2rem, 4.6vw, 4rem)/1.1 var(--serif); letter-spacing: -.015em; color: var(--red); max-width: 22ch; text-indent: -.42em; hanging-punctuation: first; }
/* Caption style: testimonial attribution and image credits share it. */
.pull figcaption, .img-credit, .translate-caption { font: 400 .75rem/1.5 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cacao); }
.pull figcaption { margin-top: 2rem; max-width: 40ch; }
@media (min-width: 64em) { .pull figure { margin-left: 16.66%; } }

.next { padding-block: var(--section); }
.next-link { display: block; padding-top: 1.25rem; border-top: 1px solid var(--cacao); text-decoration: none; }
.next-name { display: block; margin-top: 2rem; font: 400 clamp(3rem, 9vw, 7.5rem)/.95 var(--serif); letter-spacing: -.025em; transition: color .25s var(--ease); }
.next-arrow { display: inline-block; font-size: .5em; vertical-align: .35em; transition: transform .3s var(--ease); }
.next-headline { display: block; margin-top: 1.25rem; max-width: 45ch; color: var(--cacao); }
@media (hover: hover) {
  .next-link:hover .next-name { color: var(--red); }
  .next-link:hover .next-arrow { transform: translateX(.25em); }
}

/* ---------- Services ---------- */

.service { display: grid; gap: .75rem 1.5rem; padding-block: 2rem 3rem; border-top: 1px solid rgba(59, 42, 34, .35); scroll-margin-top: 5rem; }
.service:first-child { border-top-color: var(--cacao); }
.service-num { font: 400 .75rem/1 var(--sans); letter-spacing: .12em; color: var(--cacao); padding-top: .9rem; }
.service-title { font: 400 clamp(2rem, 3.6vw, 3.25rem)/1.02 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.service-desc { margin-top: .9rem; font-size: .9375rem; line-height: 1.45; color: var(--cacao); max-width: 30ch; }
.service-text { max-width: 38em; }
.includes { margin-top: .25rem; }
/* "What's included": a quiet accordion row; the list opens beneath it. */
.incl { margin-top: 1.75rem; }
.incl-head { margin: 0; font: inherit; }
.incl-toggle {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 2.75rem; padding: .5rem 0; background: none; border: 0; border-top: 1px solid rgba(59, 42, 34, .35); border-bottom: 1px solid rgba(59, 42, 34, .35);
  font: 500 .75rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); text-align: left; cursor: pointer;
}
.incl-toggle:hover { color: var(--wine); }
.incl-toggle[aria-expanded="true"] { border-bottom-color: transparent; }
.incl-icon { position: relative; width: .8rem; height: .8rem; flex: none; }
.incl-icon::before, .incl-icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: transform .35s var(--ease); }
.incl-icon::after { transform: rotate(90deg); }
.incl-toggle[aria-expanded="true"] .incl-icon::after { transform: rotate(0deg); }
.incl-panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .4s var(--ease); }
.incl-panel[data-closed] { grid-template-rows: 0fr; }
.incl-inner { overflow: hidden; min-height: 0; }
.incl-panel[data-closed] .incl-inner { visibility: hidden; transition: visibility 0s .4s; }
.incl .includes li:first-child { border-top: 0; }
.includes li { font-size: 1rem; line-height: 1.45; padding: .65rem 0; border-top: 1px solid rgba(59, 42, 34, .2); }
.includes li::first-letter { text-transform: uppercase; }
@media (min-width: 56em) {
  .service { grid-template-columns: 4.5rem minmax(0, 5fr) minmax(0, 6fr); padding-block: 2.25rem 4rem; }
  .service-title { padding-right: 2rem; }
}
.engagements { padding-block: clamp(3rem, 7vw, 5rem) 0; }
.engagements p { max-width: 34ch; font: 400 clamp(1.625rem, 2.8vw, 2.25rem)/1.2 var(--serif); letter-spacing: -.01em; }
@media (min-width: 56em) { .engagements p { margin-left: calc(4.5rem + 1.5rem); } }

.cta-close { padding-block: var(--section); }
.cta-close .wrap { display: grid; gap: 2rem; padding: 4rem 0 0; border-top: 1px solid var(--cacao); max-width: none; }
.cta-title { font: 400 clamp(2.75rem, 7vw, 6rem)/.98 var(--serif); letter-spacing: -.02em; max-width: 14ch; }
.cta-lead .eyebrow { margin-bottom: 1.25rem; }
.cta-intro { margin-top: 1.5rem; max-width: 44ch; color: var(--cacao); font-size: 1.0625rem; }
.cta-talk { font: 400 clamp(1.75rem, 3vw, 2.5rem)/1.1 var(--serif); color: var(--blue-ink) !important; margin-bottom: .9rem; }
@media (min-width: 56em) { .cta-side { padding-left: 2.5rem; border-left: 1px solid rgba(59, 42, 34, .35); align-self: end; } }
.cta-side p { color: var(--cacao); max-width: 34ch; }
.cta-side .actions { margin-top: 1.75rem; }
.cta-email { margin-top: 1.5rem; }
.dark a:not(.btn) { color: var(--cream); }
@media (min-width: 64em) {
  .cta-close .wrap { grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; align-items: end; }
  .cta-title { grid-column: 1 / 8; }
  .cta-lead { grid-column: 1 / 8; }
  .cta-lead .cta-title { max-width: 16ch; font-size: clamp(2.75rem, 5.2vw, 4.75rem); line-height: 1.02; }
  .cta-side { grid-column: 8 / 13; }
}

/* ---------- Writing: articles as sheets of paper ---------- */

.thought { padding-bottom: var(--section); }
.sheets { display: grid; gap: 2.5rem; margin-top: 2.5rem; }
.sheet {
  background: var(--paper);
  padding: 1.75rem 1.5rem 2rem;
  box-shadow: 0 1px 1px rgba(59, 42, 34, .06), 0 14px 32px -18px rgba(59, 42, 34, .28);
  display: flex; flex-direction: column;
}
.sheet-title { margin-top: 3rem; font: 400 clamp(2rem, 3vw, 2.5rem)/1.05 var(--serif); letter-spacing: -.01em; }
.sheet-summary { margin-top: 1rem; color: var(--cacao); }
.sheet-link { margin-top: auto; padding-top: 2.5rem; font-size: .9375rem; }
.sheet-link .ph { margin-left: .5rem; font-size: .8125rem; }
.sheet-feature .sheet-title { font-size: clamp(2.25rem, 4.6vw, 4rem); line-height: 1; max-width: 16ch; }
.sheet-feature .sheet-summary { font-size: 1.0625rem; max-width: 40ch; }
.feature-quote { margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid rgba(59, 42, 34, .3); }
.feature-quote p { font: 400 clamp(1.75rem, 3.2vw, 2.75rem)/1.12 var(--serif); letter-spacing: -.01em; color: var(--red); text-indent: -.42em; hanging-punctuation: first; max-width: 20ch; }
@media (min-width: 56em) {
  .sheets { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; row-gap: 3.5rem; align-items: start; }
  .sheet { padding: 2.25rem 2rem; min-height: 26rem; }
  .sheet-feature {
    grid-column: 1 / -1; min-height: 0;
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 3rem; align-items: end;
    padding: 2.75rem 3rem 3rem; transform: rotate(-.3deg);
  }
  .feature-text { display: flex; flex-direction: column; }
  .feature-quote { margin: 0; padding: 0 0 0 2.5rem; border-top: 0; border-left: 1px solid rgba(59, 42, 34, .3); }
  .s2 { transform: rotate(.5deg); }
  .s3 { transform: translateY(2.5rem) rotate(-.35deg); }
}

.signup { padding-block: 0 var(--section); }
.signup .wrap { padding: 1.25rem 0 0; border-top: 1px solid var(--cacao); max-width: none; }
.signup-title { margin-top: 1.5rem; font: 400 clamp(2.75rem, 7vw, 5.5rem)/.98 var(--serif); letter-spacing: -.02em; }
.signup-body { margin-top: 1.25rem; color: var(--cacao); max-width: 40ch; }
.signup-form { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; max-width: 36rem; }
.signup-form input {
  flex: 1 1 16rem; min-height: 3rem; padding: .75rem 0;
  font: 400 1.0625rem/1.2 var(--sans); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--cacao); border-radius: 0;
}
.signup-form input::placeholder { color: var(--cacao); opacity: .8; }
.signup-form input:focus { outline: none; border-bottom-color: var(--red); box-shadow: 0 1px 0 var(--red); }

/* ---------- Contact ---------- */

.contact-line { margin-top: 2rem; max-width: 30ch; font: 400 clamp(1.625rem, 3vw, 2.5rem)/1.15 var(--serif); letter-spacing: -.01em; }
@media (min-width: 56em) { .contact-head .contact-line { grid-column: 8 / 13; margin-top: 0; padding-bottom: .5rem; } }
.contact { padding-bottom: var(--section); }
.contact-list { border-top: 1px solid var(--cacao); }
.contact-list li { border-bottom: 1px solid rgba(59, 42, 34, .35); }
.contact-row { display: grid; grid-template-columns: 1fr; gap: .4rem; padding: 1.5rem 0; text-decoration: none; }
.contact-key { font: 400 .75rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cacao); }
.contact-val { font: 400 clamp(1.75rem, 4.2vw, 3.5rem)/1.1 var(--serif); letter-spacing: -.015em; overflow-wrap: anywhere; transition: color .25s var(--ease); }
.contact-val .ph { background: none; padding: 0; }
.contact-row .toc-arrow { display: none; }
@media (min-width: 56em) {
  .contact-row { grid-template-columns: 12rem 1fr 2rem; align-items: baseline; padding: 2rem 0; }
  .contact-row .toc-arrow { display: block; color: var(--red); opacity: 0; transform: translateX(-6px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
}
@media (hover: hover) {
  .contact-row:hover .contact-val { color: var(--red); }
  .contact-row:hover .toc-arrow { opacity: 1; transform: none; }
}

/* ---------- Process flow in a section: a compact strip of steps joined by hand-drawn arrows ---------- */

.flow { margin: 1.5rem 0 0; min-width: 0; background: var(--oat); padding: clamp(1.25rem, 3vw, 2.25rem); }
.flow-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.flow-step { min-width: 0; }
.flow-label { margin: 0 0 .9rem; font-size: .6875rem; }
.flow-num { color: var(--red); margin-right: .5em; }
.flow-media video, .flow-media img { display: block; width: 100%; height: auto; }
.flow-media video { background: #fff; outline: 1px solid rgba(59, 42, 34, .25); }
.flow-img { margin: 0; }
.flow-img figcaption, .flow-captions { font-size: .8125rem; line-height: 1.4; color: var(--cacao); }
.flow-img figcaption { margin-top: .6rem; }
.flow-arrow { color: var(--red); width: 3.25rem; margin: 0 0 0 1.5rem; }
.flow-arrow svg { display: block; width: 100%; height: auto; transform: rotate(78deg); }
/* A pile of pages: each one overlaps the one before. On phones the captions sit beside the pile. */
.has-stack .flow-media { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: 1.25rem; align-items: center; }
.flow-stack { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); }
.flow-stack .flow-img { grid-row: 1; grid-column: 1 / 8; outline: 1px solid rgba(59, 42, 34, .22); }
.flow-stack .flow-img + .flow-img { grid-column: 4 / 11; margin-top: 26%; }
.flow-captions { list-style: none; margin: 0; padding: 0; }
.flow-captions li + li { margin-top: .6rem; }
/* The last step is the result: its image sits on a dark panel, with the label above it like the other steps. */
.flow-step:last-child:not(:first-child) .flow-media { background: var(--cacao); padding: 1rem; }
.flow-step:last-child:not(:first-child) .flow-img { margin-inline: auto; }
@media (min-width: 64em) {
  .case-step .flow { grid-column: 1 / -1; margin-top: 2.5rem; }
  .flow-steps { flex-direction: row; align-items: flex-start; gap: 1.1rem; }
  .flow-step { flex: 1 1 0; }
  .flow-step.has-stack { flex: 0 0 11.5rem; }
  .flow-step.has-video { flex: 1.5 1 0; }
  .flow-step:last-child:not(:first-child) { flex: 0 0 21rem; }
  .flow-arrow { flex: 0 0 3.75rem; width: auto; margin: 6.5rem 0 0; }
  .flow-arrow svg { transform: none; }
  .has-stack .flow-media { display: block; }
  .flow-captions { margin-top: .9rem; }
}

/* ---------- Image row in a section ---------- */

.gallery { margin: 1.5rem 0 0; min-width: 0; }
.gallery-row { display: grid; gap: 1.5rem; align-items: start; }
.gallery-item img { width: 100%; height: auto; }
@media (min-width: 40em) { .gallery-row { grid-template-columns: repeat(var(--count, 2), minmax(0, 1fr)); } }
@media (min-width: 64em) {
  .case-step .gallery { grid-column: 1 / -1; margin-top: 2.5rem; }
  .case-step .gallery[style*="--count: 1"] { grid-column: 3 / 11; }
  .case-step:nth-child(even) .gallery[style*="--count: 1"] { grid-column: 5 / 13; }
}

/* ---------- Translation table (technical wording to headline) ---------- */

.translate { margin: clamp(2rem, 5vw, 3.5rem) 0 0; min-width: 0; }
.translate-table { width: 100%; border-collapse: collapse; }
.translate-table, .translate-table thead, .translate-table tbody, .translate-table tr, .translate-table th, .translate-table td { display: block; }
.translate-table th, .translate-table td { padding: 0; text-align: left; font-weight: 400; }
.translate-table thead tr { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--cacao); }
.translate-table thead .translate-arrow { display: none; }
.translate-table tbody tr { padding: 1.5rem 0; border-bottom: 1px solid rgba(59, 42, 34, .35); }
.translate-from { color: var(--cacao); max-width: 34em; }
.translate-to { margin-top: .75rem; font: 400 clamp(1.625rem, 2.6vw, 2.125rem)/1.1 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.translate-table tbody .translate-arrow { display: none; }
.translate-caption { margin-top: 1.25rem; }
@media (min-width: 48em) {
  .translate-table thead tr, .translate-table tbody tr {
    display: grid; grid-template-columns: minmax(0, 5fr) 2rem minmax(0, 6fr); column-gap: 1.5rem; align-items: baseline;
  }
  .translate-table thead .translate-arrow { display: block; }
  .translate-table tbody .translate-arrow { display: block; color: var(--red); font: 400 1rem/1 var(--sans); text-align: center; }
  .translate-to { margin-top: 0; }
}
@media (min-width: 64em) {
  .case-step .translate { grid-column: 3 / 13; }
}

/* ---------- Before / After comparison ---------- */

.compare { margin: clamp(2rem, 5vw, 3.5rem) 0 0; min-width: 0; }
.compare-sides { display: grid; gap: 2.5rem; }
.compare-side .label { margin-bottom: 1rem; }
/* Several "before" pages: narrow windows side by side, each with a small label under it. */
.compare-pages { display: grid; grid-template-columns: repeat(var(--pages, 2), minmax(0, 1fr)); gap: 1rem; }
.compare-page-label { margin-top: .6rem; font-size: .8125rem; color: var(--cacao); }
.has-multi .compare-side:not(.has-pages) .compare-frame.ph-image, .has-multi .compare-page .compare-frame.ph-image { aspect-ratio: 3 / 5 !important; }
.compare-side.has-pages .img-credit { margin-top: .4rem; text-align: right; }
/* Stills: a narrow column of small first-screen snapshots beside a large "after" window. */
.is-stills .compare-pages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .75rem; }
.compare-still { margin: 0; }
.compare-still img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: var(--oat); box-shadow: 0 1px 1px rgba(59, 42, 34, .08), 0 10px 22px -16px rgba(59, 42, 34, .4); }
.compare-still .compare-page-label { margin-top: .45rem; font-size: .75rem; line-height: 1.35; }
.has-stills .compare-side:not(.has-pages) .compare-frame.ph-image { aspect-ratio: 4 / 3 !important; }
.compare-frame { aspect-ratio: var(--ratio, 16 / 10); }
.compare-frame img { object-position: top; }
.compare-callouts { margin-top: 1.25rem; font-size: .9375rem; line-height: 1.5; max-width: 34em; }
.compare-warning { margin-top: .5rem; font-size: .875rem; color: var(--red); }
.compare-rail { display: none; }
.case-compare { margin-top: clamp(4rem, 9vw, 7rem); padding-top: 1.5rem; border-top: 1px solid var(--cacao); }
.case-compare .compare { margin-top: 0; }

/* Scrollable version: the full page sits inside the frame. On phones it stays a taller still, cropped from the top. */
.is-scrollable .compare-frame.ph-image { aspect-ratio: 3 / 4; }
@media (min-width: 64em) and (hover: hover) {
  .is-scrollable .compare-frame.ph-image {
    aspect-ratio: var(--ratio, 16 / 10);
    display: block; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--cacao) var(--oat);
  }
  .is-scrollable .compare-frame.ph-image img { position: static; width: 100%; height: auto; object-fit: fill; }
  .is-scrollable .compare-frame.ph-image:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
  /* Always-visible rail: the page's own scrollbar hides at rest on a Mac, so we draw one that never does. */
  .js .compare-window { position: relative; }
  .js .is-scrollable .compare-frame.ph-image { padding-right: .875rem; scrollbar-width: none; }
  .js .is-scrollable .compare-frame.ph-image::-webkit-scrollbar { display: none; }
  .js .compare-rail { display: block; position: absolute; top: 0; right: 0; bottom: 0; width: .875rem; background: var(--oat); cursor: pointer; }
  .js .compare-thumb {
    position: absolute; left: 3px; right: 3px; top: 0; height: 3rem;
    background: var(--cacao); cursor: grab; touch-action: none;
    transition: background-color .2s var(--ease);
  }
  .js .compare-thumb:hover, .js .compare-thumb.dragging { background: var(--red); }
  .js .compare-thumb.dragging { cursor: grabbing; }
}
@media (min-width: 64em) {
  .case-step .compare { grid-column: 1 / -1; }
  .compare-sides { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
  .has-multi .compare-sides { grid-template-columns: 2fr 1fr; align-items: start; }
  .has-stills .compare-sides { grid-template-columns: 1fr 2.2fr; }
  .is-stills .compare-pages { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .has-multi .compare-side:not(.has-pages) .label { margin-bottom: 1rem; }
}

/* ---------- Showcase: full pages side by side in scrollable windows ---------- */

.showcase { margin: clamp(2rem, 5vw, 3.5rem) 0 0; min-width: 0; background: var(--oat); padding: clamp(1.25rem, 4vw, 3.25rem); }
.showcase-row { display: grid; gap: 2.25rem; }
.showcase .compare-frame.ph-image { aspect-ratio: 4 / 3; background: var(--cream); }
.showcase .compare-window, .showcase .showcase-item > .compare-frame { box-shadow: 0 1px 1px rgba(59, 42, 34, .06), 0 18px 36px -20px rgba(59, 42, 34, .34); }
.showcase .compare-frame img { object-position: top; }
.showcase-label { margin-top: 1.25rem; padding-top: .9rem; border-top: 1px solid var(--cacao); }
@media (min-width: 40em) {
  .showcase-row { grid-template-columns: repeat(var(--count, 3), 1fr); column-gap: clamp(1rem, 2.5vw, 2rem); align-items: start; }
  .showcase .compare-frame.ph-image { aspect-ratio: var(--ratio, 4 / 5); }
  .showcase-item:nth-child(even) { margin-top: 2.5rem; }
}
@media (min-width: 64em) {
  .case-step .showcase { grid-column: 1 / -1; }
  .js .showcase .compare-rail { background: var(--cream); }
}

/* A single page: one wide window, no panel, like one side of Before / After at full width. */
.showcase.is-single { background: none; padding: 0; }
.showcase.is-single .compare-window, .showcase.is-single .showcase-item > .compare-frame { box-shadow: none; }
.showcase.is-single .compare-frame.ph-image { background: var(--oat); }
.case-compare .showcase { margin-top: 0; }
@media (min-width: 64em) {
  .js .showcase.is-single .compare-rail { background: var(--oat); }
  /* Narrower than the page, lined up with the text column, so the screenshot stays sharp. */
  .showcase.is-single { width: 66%; margin-left: auto; }
}

/* ---------- Image credits ---------- */

/* Sits under the image, right-aligned. Type comes from the shared caption style (see .pull figcaption). */
.credited { margin: 0; }
.img-credit { display: block; margin-top: .7rem; text-align: right; }
.band-credit { padding-bottom: 1rem; }

/* ---------- Uploaded images ---------- */

.ph-image.has-img { padding: 0; }
.ph-image.has-img::before, .ph-image.has-img::after { display: none; }
.band.has-img { position: relative; overflow: hidden; background: var(--cacao); }
.band.has-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band.has-img .band-inner { position: relative; }
.band.has-img .band-line { color: var(--cream); }

/* Small edit icon in the footer: Tamar's door to the admin console. */
.site-footer { position: relative; }
.footer-links { padding-right: 3rem; }
.site-footer a.admin-link {
  position: absolute; right: calc(var(--gutter) - .75rem); top: clamp(2.25rem, 6vw, 3.75rem);
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  color: var(--oat); opacity: .45; text-decoration: none;
  transition: opacity .2s var(--ease), color .2s var(--ease);
}
.site-footer a.admin-link:hover, .site-footer a.admin-link:focus-visible { opacity: 1; color: var(--cream); }

/* ---------- Password page for private case studies ---------- */

.unlock { padding-bottom: var(--section); }
.unlock-title { margin-top: 1.5rem; font: 400 clamp(2.5rem, 6vw, 5rem)/1 var(--serif); letter-spacing: -.02em; max-width: 14ch; }
.unlock-line { margin-top: 1.5rem; max-width: 40ch; color: var(--cacao); }
.unlock-form { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; max-width: 34rem; align-self: end; }
.unlock-form input[type="password"] {
  flex: 1 1 14rem; min-height: 3rem; padding: .75rem 0;
  font: 400 1.0625rem/1.2 var(--sans); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--cacao); border-radius: 0;
}
.unlock-form input[type="password"]:focus { outline: none; border-bottom-color: var(--red); box-shadow: 0 1px 0 var(--red); }
.unlock-error { flex-basis: 100%; color: var(--red); font-size: .9375rem; }
@media (min-width: 56em) {
  .unlock-text { grid-column: 1 / 8; }
  .unlock-form { grid-column: 8 / 13; margin-top: 0; padding-bottom: .6rem; }
}

/* =====================================================================
   Redesign: editorial, tactile, with three signature surfaces
   (red satin is the one dark moment). Everything else stays quiet.
   ===================================================================== */

h1, h2, h3, .section-title, .about-title { color: var(--blue-ink); }
/* On brown sections, headings stay in the site's cream (cream cards inside them keep their own ink). */
.dark :is(h1, h2, h3), .site-footer :is(h1, h2, h3) { color: var(--cream); }
em { font-family: var(--serif-it); font-style: italic; }

/* Small letterspaced sans capitals, for every eyebrow and label. */
.eyebrow {
  font: 500 .6875rem/1.5 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cacao);
  margin: 0;
}
.text-link {
  display: inline-flex; align-items: center; gap: .4em;
  min-height: 2.75rem;
  font-weight: 500;
}
.text-link span { transition: transform .3s var(--ease); }
.text-link:hover span { transform: translateX(3px); }

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

.skip { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--ink); color: var(--cream); padding: .75rem 1rem; }
.skip:focus { left: 1rem; }
.site-header { position: relative; z-index: 50; background: var(--cream); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease); }
.site-header.scrolled { border-bottom-color: rgba(59, 42, 34, .2); }
/* The header takes on the color of the section beneath it. */
.site-header, .site-header .wordmark, .site-header .nav ul a, .site-header .nav-cta { transition: background-color 400ms var(--motion), color 400ms var(--motion), border-color 400ms var(--motion); }
.site-header[data-theme="dark"] { background: var(--cacao); border-bottom-color: rgba(245, 239, 228, .15); }
.site-header[data-theme="dark"] .wordmark, .site-header[data-theme="dark"] .nav ul a { color: var(--cream); }
.site-header[data-theme="dark"] .nav ul a { background-image: linear-gradient(var(--cream), var(--cream)); }
.site-header[data-theme="dark"] .nav-cta { background: var(--cream); color: var(--ink); }
.site-header[data-theme="dark"] :focus-visible { outline-color: var(--cream); }
.bar {
  max-width: var(--max); margin: 0 auto;
  padding: .75rem var(--gutter) 0;
  display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: .25rem;
}
.wordmark { display: inline-flex; align-items: center; min-height: 2.75rem; font: 400 1.625rem/1 var(--serif); text-decoration: none; letter-spacing: -.01em; color: var(--ink); }
.nav-cta { min-height: 2.75rem; }
.nav { grid-column: 1 / -1; grid-row: 2; }
.nav ul { display: flex; justify-content: space-between; gap: .5rem; }
.nav ul a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  font-size: .9375rem; text-decoration: none;
  background: linear-gradient(var(--wine), var(--wine)) 0 calc(50% + .8em) / 0 1px no-repeat;
  transition: background-size .3s var(--ease);
}
.nav ul a:hover, .nav ul a[aria-current="page"] { background-size: 100% 1px; }
.nav-cta { grid-column: 2; grid-row: 1; }
@media (min-width: 48em) {
  .site-header { position: sticky; top: 0; }
  .bar { grid-template-columns: auto 1fr auto; column-gap: 2.5rem; padding-block: .9rem; }
  .nav { grid-column: 2; grid-row: 1; justify-self: end; }
  .nav ul { gap: 2rem; }
  .nav-cta { grid-column: 3; }
}

/* ---------- Sections, rules and reveals ---------- */

main > section { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.section-head { display: grid; gap: .9rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-head.split { gap: 1.25rem; }
@media (min-width: 56em) { .section-head.split { grid-template-columns: 1fr minmax(0, 22rem); align-items: end; } }
.section-title { font: 400 clamp(2.25rem, 5.4vw, 4.25rem)/1.02 var(--serif); letter-spacing: -.015em; max-width: 18ch; }
.side-line { color: var(--cacao); font-size: 1rem; max-width: 30ch; }

.rule { height: 8px; margin: 0 0 clamp(2.5rem, 6vw, 4.5rem); }
.rule svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rule path { fill: none; stroke: var(--cacao); stroke-opacity: .45; stroke-width: 1.1; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .rule path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease); }
.js .rule.in path { stroke-dashoffset: 0; }

/* Motion: one easing for the whole site. Starting states exist only under .js-motion, which JavaScript
   sets when the visitor hasn't asked for reduced motion; without it, everything is simply there. */
:root { --motion: cubic-bezier(.16, 1, .3, 1); }
.js-motion .mo:not(.in) { opacity: 0; transform: translateY(24px); }
.js-motion .mo { transition: opacity 1100ms var(--motion), transform 1100ms var(--motion); transition-delay: var(--stagger, 0ms); }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Hero ---------- */

.hero {
  display: grid; gap: clamp(2.5rem, 6vw, 3rem);
  padding-top: clamp(2.25rem, 7vw, 5.5rem); padding-bottom: clamp(3.5rem, 8vw, 6rem);
}
.hero .eyebrow { margin-bottom: 1.4rem; }
.hero-title { font: 400 clamp(2.4rem, 6vw, 4.75rem)/1.04 var(--serif); letter-spacing: -.02em; max-width: 15ch; }
.hero-title em { color: var(--wine); padding-right: .04em; }
.hero-sub { margin-top: clamp(1.5rem, 3vw, 2rem); max-width: 44ch; color: var(--cacao); font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.6; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }

/* The portrait: a plain photograph, small, beside the headline. */
.hero-portrait { justify-self: center; width: 220px; overflow: hidden; }
.js-motion .hero-portrait img { animation: settle 2400ms var(--motion) 400ms both; }
@keyframes settle { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
.hero-portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--oat); box-shadow: 0 18px 30px -22px rgba(36, 20, 12, .45); }
@media (min-width: 64em) {
  .hero { grid-template-columns: minmax(0, 1fr) 290px; align-items: center; column-gap: clamp(4rem, 9vw, 9rem); }
  .hero-portrait { width: 290px; }
}

/* ---------- Bands (client strip and contact) ---------- */

.clients, .contact-band { position: relative; max-width: none !important; padding: clamp(2.25rem, 5vw, 3.5rem) var(--gutter) !important; background: var(--oat); }
.clients-bar {
  position: relative;
  max-width: calc(var(--max) - 2 * var(--gutter)); margin: 0 auto;
  background: var(--cream);
  padding: 1.25rem clamp(1.25rem, 3vw, 2.25rem) 1.4rem;
  box-shadow: 0 14px 26px -20px rgba(30, 16, 8, .35);
}
.client-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 1.25rem; margin-top: .9rem; }
@media (min-width: 56em) { .client-list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .9rem 1.5rem; } }
.client-list li { font: 600 .875rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--blue-ink); white-space: nowrap; }
@media (min-width: 64em) { .client-list li { font-size: 1rem; } }
/* Client logos: one slow, continuous loop that pauses on hover. Edges fade into the bar. */
.logo-marquee { margin-top: 1.1rem; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.logo-track { display: flex; align-items: center; width: max-content; gap: 0; animation: logo-loop 38s linear infinite; }
.logo-track li { flex: none; padding: 0 clamp(1.75rem, 4vw, 3.25rem); display: flex; align-items: center; height: 3rem; }
.logo-track img { height: 2rem; width: auto; max-width: 9.5rem; object-fit: contain; opacity: .85; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
/* Square and boxed marks read smaller than wordmarks, so they get a little more height. */
.logo-track .logo-general-motors { height: 2.4rem; }
.logo-track .logo-aig { height: 2.15rem; }
.logo-track .logo-danaher { height: 2.5rem; }
@keyframes logo-loop { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .logo-marquee { -webkit-mask-image: none; mask-image: none; }
  .logo-track { animation: none !important; width: auto; flex-wrap: wrap; justify-content: center; row-gap: .75rem; }
  .logo-track li[aria-hidden="true"] { display: none; }
}

/* ---------- Proof numbers ---------- */

.proof { padding-top: clamp(3.5rem, 8vw, 6rem); }
.proof-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.5rem; }
.proof li { border-top: 1px solid rgba(59, 42, 34, .35); padding-top: 1rem; }
.num { font: 400 clamp(2.75rem, 6.5vw, 4.75rem)/1 var(--serif); letter-spacing: -.02em; color: var(--blue-ink); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.num .u { color: var(--wine); }
.proof-label { margin-top: .6rem; font-size: .875rem; line-height: 1.45; color: var(--cacao); max-width: 24ch; }
@media (min-width: 56em) { .proof-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } }
/* Three stats: one per row on phones, one row of three on wider screens. */
.proof-list.stats-3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40em) { .proof-list.stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.proof-link { color: inherit; text-decoration: underline; text-decoration-color: var(--wine); text-decoration-thickness: 1px; text-underline-offset: .2em; transition: color .2s; }
.proof-link:hover { color: var(--wine); }

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

.selected { padding-top: clamp(2.5rem, 5vw, 4rem); }
.selected > .rule { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.cases { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem 2rem; }
@media (min-width: 61em) {
  .cases { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .case-card { grid-column: span 2; }
  .case-card.is-big { grid-column: span 3; }
}
.case-link { display: block; color: inherit; }
/* Whole-card and list links carry their own hover cues instead of an underline. */
main .case-link, main .more-list a, main .svc-list a, main .w-cards a, main .next-case, main .crumb a { text-decoration: none !important; }
.slot {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow .5s var(--ease), transform .5s var(--ease);
}
.is-big .slot { aspect-ratio: 16 / 10; }
.slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot-big {
  font: 400 clamp(4.25rem, 9vw, 8rem)/1 var(--serif);
  letter-spacing: -.02em;
  -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.2px currentColor;
  font-variant-numeric: lining-nums;
  transition: transform 1.2s cubic-bezier(.2, .7, .1, 1);
}
.slot-cap { position: absolute; left: 1rem; right: 1rem; bottom: .9rem; font: 500 .625rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.tone-espresso { background: var(--cacao); color: #E9D9BE; }
.tone-wine { background: var(--wine-deep); color: #F1D9C9; }
.tone-ink { background: #1A1C24; color: #D9DCE6; }
.tone-cream { background: var(--oat); color: var(--wine); }
.tone-sand { background: var(--sand); color: var(--cacao); }
.case-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; margin-top: 1.1rem; font-size: .875rem; font-weight: 500; color: var(--ink); }
.case-tag { font: 500 .625rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--cacao); border: 1px solid rgba(59, 42, 34, .4); padding: .35em .55em .3em; }
.case-title { margin-top: .6rem; font: 400 clamp(1.45rem, 2.3vw, 1.85rem)/1.15 var(--serif); letter-spacing: -.01em; }
.case-title span { background: linear-gradient(var(--wine), var(--wine)) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease); padding-bottom: 2px; }
.case-role { margin-top: .6rem; font-size: .9375rem; color: var(--cacao); }
.case-outcome { margin-top: .5rem; font-size: .9375rem; font-weight: 500; color: var(--wine); }
@media (hover: hover) {
  .is-linked .case-link:hover .slot { transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgba(43, 29, 22, .55); }
  .case-link:hover .slot-big { transform: scale(1.06); }
  .is-linked .case-link:hover .case-title span { background-size: 100% 1px; }
}

.more-work { margin-top: clamp(3rem, 7vw, 4.5rem); }
.more-list { margin-top: .9rem; border-top: 1px solid rgba(59, 42, 34, .35); }
.more-list li { border-bottom: 1px solid rgba(59, 42, 34, .2); }
.more-list a, .more-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .15rem 1.5rem; padding: .9rem 0; min-height: 2.75rem; text-decoration: none !important; color: inherit; }
.more-name { font: 400 1.5rem/1.15 var(--serif); color: var(--blue-ink); }
.more-line { grid-column: 1; font-size: .9375rem; color: var(--cacao); }
.more-arrow { grid-column: 2; grid-row: 1; color: var(--wine); transition: transform .3s var(--ease); }
.more-list a:hover .more-arrow { transform: translateX(4px); }
@media (min-width: 48em) { .more-list a, .more-row { grid-template-columns: 14rem minmax(0, 1fr) auto; } .more-line { grid-column: 2; } .more-arrow { grid-column: 3; } }
.all-link { margin-top: 1.25rem; }

/* ---------- Two readers, on red satin ---------- */

.readers {
  position: relative; overflow: hidden; isolation: isolate;
  max-width: none !important; margin-top: clamp(5rem, 12vw, 9rem) !important;
  padding: clamp(4.5rem, 10vw, 8rem) var(--gutter) !important;
  background: #140406; color: #F3E6D6;
}
.satin { position: absolute; inset: -8%; z-index: -2; will-change: transform; }
.satin img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.satin .a { animation: drift 30s ease-in-out infinite alternate; }
.satin .b { transform: scaleX(-1); mix-blend-mode: screen; opacity: .28; animation: drift2 38s ease-in-out infinite alternate; }
.readers .veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 4, 6, .62) 0%, rgba(20, 4, 6, .45) 40%, rgba(20, 4, 6, .78) 100%); }
@keyframes drift { from { transform: scale(1.04) translate(0, 0) rotate(0); } to { transform: scale(1.16) translate(-3%, 2%) rotate(1.2deg); } }
@keyframes drift2 { from { transform: scaleX(-1) scale(1.1) translate(2%, -1%); } to { transform: scaleX(-1) scale(1.2) translate(-2%, 2%); } }
@keyframes ripple { from { transform: translateY(-5%) scale(1.02); } to { transform: translateY(5%) scale(1.1); } }
@supports (animation-timeline: view()) {
  .satin { animation: ripple linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
}
.readers-inner { max-width: calc(var(--max) - 2 * var(--gutter)); margin: 0 auto; }
.readers .eyebrow { color: #E8C9BC; }
.readers-title { color: #FBF3EA; font: 400 clamp(2.5rem, 6vw, 4.75rem)/1 var(--serif); letter-spacing: -.02em; margin-top: .9rem; max-width: 14ch; }
.readers-lede { margin-top: 1.25rem; max-width: 40ch; font: italic 400 clamp(1.15rem, 1.9vw, 1.45rem)/1.45 var(--serif-it); color: #EBD8CB; }

.stage { position: relative; display: grid; gap: 1.75rem; margin-top: clamp(2.5rem, 6vw, 4rem); }
@media (min-width: 56em) { .stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; } }
.reader { margin: 0; }
.reader-label { font: 500 .6875rem/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #E8C9BC; margin-bottom: .75rem; }
.paper {
  position: relative; overflow: hidden;
  background: var(--cream); color: var(--blue-ink);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.25rem) clamp(2rem, 4vw, 2.75rem);
  box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .8);
  transform: rotate(-.6deg);
}
.hand { font: 400 clamp(1.45rem, 2.6vw, 2rem)/1.6 var(--hand); }
.hand-line { display: block; }
.key { position: relative; }
.key::after {
  content: ""; position: absolute; inset: -.05em -.18em -.02em;
  border: 1px solid var(--wine);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.key::before {
  content: attr(data-label);
  position: absolute; left: -.18em; bottom: calc(100% + .1em);
  font: 600 .5625rem/1 var(--sans); letter-spacing: .16em; color: var(--wine);
  padding-bottom: .35em; border-left: 1px solid var(--wine); padding-left: .3em;
  transition: opacity .35s var(--ease) .1s, transform .35s var(--ease) .1s;
}
/* Annotations show in the finished state; while the sequence is waiting to play they're hidden. */
.js .stage[data-ready]:not(.is-read) .key::after { opacity: 0; transform: scale(.94); }
.js .stage[data-ready]:not(.is-read) .key::before { opacity: 0; transform: translateY(3px); }
.nib { position: absolute; width: 22px; height: 22px; left: 0; top: 0; color: var(--blue-ink); opacity: 0; pointer-events: none; }
.scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--wine) 20%, var(--wine) 80%, transparent); box-shadow: 0 0 12px rgba(139, 26, 26, .45); opacity: 0; pointer-events: none; }

.machine {
  background: rgba(14, 4, 6, .72);
  border: 1px solid rgba(243, 230, 214, .16);
  padding: clamp(1.25rem, 3vw, 2rem);
  font-size: .9375rem; line-height: 1.5; color: #F3E6D6;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.m-line + .m-line { margin-top: .7rem; }
.m-h1 { font: 400 1.5rem/1.2 var(--serif); }
.m-h2 { font: 400 1.15rem/1.3 var(--serif); }
.m-line code { font: 400 .75rem/1 var(--mono); color: #E8A9A0; margin-right: .5em; vertical-align: .15em; }
.m-schema code { margin: 0; color: #CDBBAE; }
.target { color: #FFE9DE; border-bottom: 1px solid rgba(232, 169, 160, .6); }
.caret { display: inline-block; width: .5em; height: 1em; margin-left: .3em; vertical-align: -.15em; background: #F3E6D6; opacity: 0; }
.stage.is-done .caret { animation: blink 1.4s steps(1) infinite; }
@keyframes blink { 0%, 55% { opacity: .85; } 56%, 100% { opacity: 0; } }
.chip { position: fixed; z-index: 60; margin: 0; pointer-events: none; font-family: var(--hand); color: var(--blue-ink); background: var(--cream); outline: 1px solid var(--wine); padding: 0 .15em; will-change: transform; }
.readers-close { margin-top: clamp(2.5rem, 6vw, 3.5rem); font: 400 clamp(1.5rem, 2.8vw, 2.25rem)/1.2 var(--serif); color: #FBF3EA; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.5rem; }
.readers-close .text-link { font: 500 1rem/1 var(--sans); color: #F3E6D6; }
.readers a { text-decoration-color: #E8A9A0 !important; }

/* Before the sequence plays, the card is blank and the panel is empty (only when motion is welcome). */
.js .stage[data-ready] .hand-line { clip-path: inset(-20% 100% -20% 0); }
.js .stage[data-ready] .m-line { opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .stage[data-ready] .m-line.in { opacity: 1; transform: none; }
.js .stage[data-ready] .target { opacity: 0; transition: opacity .3s var(--ease); }
.js .stage[data-ready] .target.landed { opacity: 1; }

/* ---------- Writing ---------- */

.writing-home { padding-top: clamp(5rem, 12vw, 8rem); }
.w-cards { display: grid; gap: 1.25rem; }
@media (min-width: 56em) { .w-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.w-cards a {
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding: 1.75rem 1.75rem 1.5rem; min-height: 15rem;
  background: var(--oat); color: var(--ink); text-decoration: none !important;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.w-card.is-dark a { background: var(--cacao); color: var(--cream); }
.w-quote { font: 400 4.5rem/.6 var(--serif); color: var(--wine); height: 2.25rem; }
.is-dark .w-quote { color: #E8A9A0; }
.w-title { font: 400 1.5rem/1.2 var(--serif); color: var(--blue-ink); margin-top: .75rem; flex: 1; }
.is-dark .w-title { color: #FBF3EA; }
.w-meta { margin-top: 1.5rem; font: 500 .6875rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--cacao); }
.is-dark .w-meta { color: #E3D3C2; }
.w-arrow { position: absolute; right: 1.5rem; bottom: 1.4rem; color: var(--wine); transition: transform .35s var(--ease); }
.is-dark .w-arrow { color: #E8A9A0; }
@media (hover: hover) {
  .w-cards a:hover { transform: translateY(-3px); box-shadow: 0 20px 34px -24px rgba(43, 29, 22, .6); }
  .w-cards a:hover .w-arrow { transform: translate(3px, -3px); }
}

/* ---------- About teaser and snapshot ---------- */

.about-teaser { display: grid; gap: 2.5rem; padding-top: clamp(5rem, 12vw, 8rem); align-items: center; }
@media (min-width: 56em) { .about-teaser { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 7vw, 6rem); } }
.snapshot { position: relative; margin: 1rem auto 0; width: min(100%, 22rem); background: #FFFDF8; padding: .85rem .85rem 1rem; transform: rotate(-2deg); box-shadow: 0 1px 2px rgba(36, 20, 12, .18), 0 18px 30px -20px rgba(36, 20, 12, .45); }
.snapshot-photo { aspect-ratio: 4 / 3; background: var(--sand); background-image: repeating-linear-gradient(135deg, rgba(59, 42, 34, .05) 0 1px, transparent 1px 10px); }
.snapshot-photo img { width: 100%; height: 100%; object-fit: cover; }
.hand-caption { margin-top: .7rem; padding-inline: .15rem; font: 400 1.05rem/1.25 var(--hand); color: var(--cacao); }
.tape { position: absolute; top: -.7rem; width: 5.5rem; height: 1.6rem; background: rgba(232, 223, 208, .78); box-shadow: 0 1px 2px rgba(36, 20, 12, .12); }
.tape-l { left: -1rem; transform: rotate(-32deg); }
.tape-r { right: -1rem; transform: rotate(28deg); }
.about-lead { font: 400 clamp(1.75rem, 3.6vw, 2.75rem)/1.15 var(--serif); letter-spacing: -.01em; color: var(--blue-ink); max-width: 22ch; }
.about-body { margin-top: 1.25rem; color: var(--cacao); max-width: 46ch; }
.about-teaser-text .text-link { margin-top: 1rem; }

/* ---------- Services ---------- */

.services-home { padding-top: clamp(5rem, 12vw, 8rem); }
.svc-list { display: grid; gap: 0 clamp(2rem, 5vw, 4rem); border-top: 1px solid rgba(59, 42, 34, .35); }
@media (min-width: 56em) { .svc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; } }
.svc-list li { border-bottom: 1px solid rgba(59, 42, 34, .25); }
@media (min-width: 56em) { .svc-list li { border-top: 1px solid rgba(59, 42, 34, .35); border-bottom: 0; } }
.svc-list a { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: .35rem .5rem; padding: 1.25rem 0 1.5rem; text-decoration: none !important; color: inherit; }
.svc-num { grid-row: span 2; font: italic 400 1.15rem/1.4 var(--serif-it); color: var(--wine); }
.svc-name { font: 400 1.5rem/1.2 var(--serif); color: var(--blue-ink); transition: color .3s var(--ease); }
.svc-desc { font-size: .9375rem; color: var(--cacao); }
.svc-list a:hover .svc-name { color: var(--wine); }

/* ---------- Contact card ---------- */

.contact-band { margin-top: clamp(5rem, 12vw, 8rem); padding-block: clamp(3.5rem, 9vw, 7rem) !important; }
.contact-card {
  position: relative; max-width: 50rem; margin: 0 auto;
  background: var(--cream);
  padding: clamp(2rem, 6vw, 4rem) clamp(1.5rem, 6vw, 4.5rem);
  box-shadow: 0 30px 50px -30px rgba(25, 12, 6, .45);
}
.contact-card::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--wine); pointer-events: none; }
.contact-title { font: 400 clamp(1.85rem, 4.2vw, 3rem)/1.12 var(--serif); letter-spacing: -.01em; }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
.contact-link { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 500; overflow-wrap: anywhere; }

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

.site-footer { position: relative; background: var(--cacao); color: var(--cream); padding: clamp(3rem, 7vw, 4.5rem) var(--gutter); }
.footer-inner { max-width: var(--max); margin: 0 auto; display: grid; gap: 1rem; }
.site-footer .wordmark { color: var(--cream); text-decoration: none; }
.footer-links { display: flex; flex-wrap: wrap; gap: .5rem 2rem; font-size: .9375rem; }
.footer-links a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.site-footer a { text-decoration-color: #E8A9A0; }
@media (min-width: 56em) { .footer-inner { grid-template-columns: auto 1fr; align-items: center; gap: 2.5rem; } .footer-links { justify-self: end; } }

/* ---------- About page ---------- */

.about-title { margin-top: 1.25rem; font: 400 clamp(2.25rem, 5vw, 4.25rem)/1.05 var(--serif); letter-spacing: -.02em; max-width: 20ch; }
.timeline-wrap { padding-top: clamp(4.5rem, 10vw, 7rem); }
.timeline { position: relative; margin-top: 1.75rem; padding-left: 1.75rem; }
.timeline::before { content: ""; position: absolute; left: .3rem; top: .6rem; bottom: .6rem; width: 1px; background: rgba(59, 42, 34, .45); }
.timeline li { position: relative; display: grid; gap: .2rem; padding: 0 0 1.75rem; }
.tl-dot { position: absolute; left: -1.75rem; top: .55rem; width: .65rem; height: .65rem; border-radius: 50%; border: 1px solid var(--cacao); background: var(--cream); }
.is-now .tl-dot { background: var(--wine); border-color: var(--wine); }
.tl-name { font: 400 1.6rem/1.15 var(--serif); color: var(--blue-ink); }
main a.tl-link { text-decoration-color: rgba(139, 26, 26, .45); text-decoration-thickness: 1px; }
main a.tl-link:hover { color: var(--wine); text-decoration-color: var(--wine); }
.tl-years { display: block; margin-top: .35rem; font: 500 .6875rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--cacao); }
.tl-line { color: var(--cacao); font-size: .9375rem; }
@media (min-width: 48em) { .timeline li { grid-template-columns: 22rem minmax(0, 1fr); align-items: baseline; gap: 2rem; } .tl-line { max-width: 52ch; } }
.about-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .6rem; font-weight: 500; }
.about-sub span { white-space: nowrap; }
.about-sub-sep { color: var(--wine); font-weight: 400; }
.about-story2 { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 56em) { .about-story2 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 5rem); } }
.about-photo2 .snapshot { margin: .5rem auto 0; }
/* A quick handwritten hello, jotted above the snapshot like a note in the margin. */
.about-photo2 { position: relative; }
.hello-note { width: min(100%, 22rem); margin: 0 auto 1.4rem; padding-left: .5rem; font: 400 clamp(1.5rem, 2.4vw, 1.85rem)/1.2 var(--hand); color: var(--wine); transform: rotate(-4deg); transform-origin: left bottom; position: relative; z-index: 1; }
.about-prose2 { max-width: 38rem; font-size: 1.0625rem; }
.about-prose2 p + p { margin-top: 1.2em; }
.how-sub { margin-top: 1rem; max-width: 30ch; font: 400 clamp(1.6rem, 3.2vw, 2.4rem)/1.2 var(--serif); color: var(--blue-ink); }
.about-close { padding-top: clamp(4.5rem, 10vw, 7rem); padding-bottom: clamp(4.5rem, 10vw, 7rem); }
.close-line { font: 400 clamp(1.85rem, 4vw, 3rem)/1.12 var(--serif); color: var(--blue-ink); max-width: 24ch; margin-bottom: 2rem; }

.collage { position: relative; padding-top: clamp(3.5rem, 8vw, 5.5rem); margin-top: clamp(1rem, 3vw, 2rem) !important; }
.collage::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: rgba(59, 42, 34, .35); }
.collage-head { text-align: center; max-width: 40rem; margin: 0 auto clamp(2rem, 5vw, 3rem); }
.collage-title { font: 400 clamp(2rem, 4vw, 3rem)/1.08 var(--serif); letter-spacing: -.015em; }
.collage-text { margin-top: .9rem; color: var(--cacao); }
.how-cta { font: 400 clamp(1.4rem, 2.3vw, 1.75rem)/1.2 var(--serif); color: var(--blue-ink); }
.how-cta span { display: inline-block; transition: transform .3s var(--ease); }
.how-cta:hover span { transform: translate(3px, -3px); }
.collage-row { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; max-width: 64rem; margin: 0 auto; }
.collage-item { margin: 0; background: #FFFDF8; padding: .6rem; box-shadow: 0 1px 2px rgba(36, 20, 12, .16), 0 18px 30px -22px rgba(36, 20, 12, .45); }
.collage-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--oat); }
.collage-item.c1 { grid-column: 1 / 6; grid-row: 1; transform: rotate(-2deg); margin-top: 2.5rem; }
.collage-item.c2 { grid-column: 5 / 9; grid-row: 1; transform: rotate(1.5deg); position: relative; z-index: 1; }
.collage-item.c3 { grid-column: 9 / 13; grid-row: 1; transform: rotate(-1deg); margin-top: 4rem; }
@media (max-width: 47.99em) {
  .collage-item.c1 { grid-column: 1 / 9; margin-top: 0; }
  .collage-item.c2 { grid-column: 5 / 13; grid-row: 2; margin-top: -2rem; }
  .collage-item.c3 { grid-column: 2 / 10; grid-row: 3; margin-top: -1.5rem; }
}

.else-band { margin-top: clamp(4rem, 9vw, 6rem); padding: clamp(2.25rem, 5vw, 3.25rem) clamp(1.5rem, 5vw, 3.5rem) !important; max-width: calc(var(--max) - 2 * var(--gutter)) !important; }
@media (max-width: 47.99em) { .else-band { margin-inline: var(--gutter) !important; } }
.else-inner { display: grid; gap: .9rem; }
@media (min-width: 56em) { .else-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4rem); align-items: baseline; } }
.else-title { font: 400 clamp(1.6rem, 3vw, 2.25rem)/1.15 var(--serif); letter-spacing: -.01em; }
.else-text { color: var(--oat); max-width: 52ch; }

/* How I work, on the About page */
.how-link { margin-top: .75rem; }
.collage .how-link { margin-top: clamp(1.5rem, 3vw, 2.25rem); text-align: center; }
.how-work { padding-top: clamp(4.5rem, 10vw, 7rem); }
.how-steps { display: grid; gap: 2rem; margin-top: 2rem; counter-reset: step; }
@media (min-width: 56em) { .how-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); } }
.how-steps li { border-top: 1px solid rgba(59, 42, 34, .35); padding-top: 1.1rem; }
.how-num { font: italic 400 1.15rem/1 var(--serif-it); color: var(--wine); }
.how-top { display: flex; align-items: flex-end; justify-content: space-between; }
.ink-icon { width: 3.25rem; height: 3.25rem; color: var(--wine); overflow: visible; }
.ink-icon path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .ink-icon path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.45, .05, .35, 1); }
.js .ink-icon path:nth-child(2) { transition-delay: .5s; }
.js .ink-icon path:nth-child(3) { transition-delay: .8s; }
.js .ink-icon path:nth-child(n + 4) { transition-delay: 1s; }
.js .in .ink-icon path { stroke-dashoffset: 0; }
.how-title { margin-top: .75rem; font: 400 clamp(1.6rem, 2.6vw, 2rem)/1.15 var(--serif); }
.how-text { margin-top: .6rem; color: var(--cacao); max-width: 38ch; }

/* ---------- Motion off: show every finished state ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .ink-icon path { stroke-dashoffset: 0 !important; }
  .incl-panel, .incl-icon::after { transition: none !important; }
  .js .rule path { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
  .js .stage[data-ready] .hand-line { clip-path: none !important; }
  .js .stage[data-ready] .m-line, .js .stage[data-ready] .target { opacity: 1 !important; transform: none !important; }
  .key::after, .key::before { opacity: 1 !important; transform: none !important; }
  .caret { opacity: .85; }
}

/* ---------- One hero for Work, Services, Writing and About ---------- */
:root {
  --hero-top: clamp(2.25rem, 5.5vw, 4.5rem); /* space above every page hero */
  --hero-gap: 1.5rem;                         /* headline to subhead */
  --hero-rule-space: clamp(1.75rem, 3.5vw, 2.5rem); /* above and below the rule that closes the hero */
}
.page-hero { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2rem; padding-top: var(--hero-top); }
.page-hero .eyebrow { margin-bottom: 1.25rem; }
.page-hero .page-title { font: 400 clamp(2.75rem, 6vw, 5.5rem)/1 var(--serif); letter-spacing: -.02em; }
/* A sentence-long headline (About) keeps its own, smaller size. */
.page-hero.is-long .page-title { font: 400 clamp(2.25rem, 5vw, 4.25rem)/1.05 var(--serif); letter-spacing: -.02em; max-width: 20ch; }
.page-sub { margin-top: var(--hero-gap); max-width: 60ch; font-size: 1.0625rem; line-height: 1.55; color: var(--cacao); }
.page-hero-aside:empty { display: none; }
.page-hero-aside .filters { margin-top: 0; }
.filters-foot { margin-top: .5rem; min-height: 2.75rem; display: flex; align-items: center; }
.page-rule { grid-column: 1 / -1; height: 1px; background: rgba(59, 42, 34, .35); margin: calc(var(--hero-rule-space) - 2rem) 0 var(--hero-rule-space); }
@media (min-width: 56em) {
  .page-hero { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; align-items: end; }
  /* Headline and filters both start at the top of the hero, so filters sit at the same height on every page. */
  .page-hero { align-items: start; }
  .page-hero-text { grid-column: 1 / 6; }
  .page-hero-aside { grid-column: 6 / 13; padding-top: var(--filters-offset, .7rem); }
  /* No filters yet: the text may use the full width (the subhead still stops at about 60 characters). */
  .page-hero:has(.page-hero-aside:empty) .page-hero-text { grid-column: 1 / 13; }
  .page-hero.is-long .page-hero-text { grid-column: 1 / 9; }
  .page-hero.is-long .page-hero-aside { grid-column: 9 / 13; }
  .page-hero-aside:empty { display: block; }
}
/* Nothing extra between the rule and the page content. */
.page-hero + section, .page-hero + div { padding-top: 0 !important; margin-top: 0 !important; }
.page-hero + .services .service:first-child { border-top: 0; padding-top: 0; }
.page-hero + .thought .sheets { margin-top: 0; }

/* ---------- Homepage, simplified ---------- */
.section-link { margin-top: clamp(2rem, 4vw, 2.75rem); }
.section-link .text-link { font-size: 1.0625rem; }
.slot.has-img { background: var(--oat); }
.slot.has-img img { object-fit: cover; object-position: top center; }
/* Two readers: a shorter band, just the idea and the link. */
.readers.is-compact { padding-block: clamp(3.5rem, 8vw, 5.5rem) !important; }
.is-compact .readers-title { max-width: 16ch; }
.is-compact .readers-lede { max-width: 34ch; }
.is-compact .readers-close { margin-top: 1.5rem !important; font-size: clamp(1.35rem, 2.4vw, 1.9rem) !important; }
.readers-link { margin-top: 1.1rem; }
.readers-link .text-link { color: #F3E6D6; font-size: 1.0625rem; }
@media (min-width: 56em) {
  .is-compact .readers-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(3rem, 6vw, 6rem); align-items: end; }
  .is-compact .readers-head { grid-column: 1; grid-row: 1 / span 2; }
  .is-compact .readers-close { grid-column: 2; grid-row: 1; margin-top: 0 !important; align-self: end; }
  .is-compact .readers-link { grid-column: 2; grid-row: 2; }
}
/* Where I can help: one line and a link. */
.help { display: grid; gap: 1.25rem; }
.help-text { color: var(--cacao); max-width: 40ch; font-size: 1.0625rem; }
.help-side p + p { margin-top: 1rem; }
@media (min-width: 56em) { .help { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: end; column-gap: clamp(3rem, 6vw, 6rem); } }
.writing-home .w-cards { margin-top: 0; }
.writing-home { padding-top: clamp(4rem, 9vw, 6.5rem) !important; }
.about-teaser { padding-top: clamp(4rem, 9vw, 6.5rem) !important; }
.services-home { padding-top: clamp(4rem, 9vw, 6.5rem) !important; }

/* Closing invitation: eyebrow and headline left, a line and one button right. */
.contact-close { padding-top: clamp(4rem, 9vw, 6.5rem); padding-bottom: clamp(4.5rem, 10vw, 7rem); }
.contact-grid { display: grid; gap: 1.5rem; }
.contact-close .eyebrow { margin-bottom: 1rem; }
.contact-close .contact-title { font: 400 clamp(2.4rem, 5vw, 4rem)/1.02 var(--serif); letter-spacing: -.02em; }
.contact-side .contact-text { color: var(--cacao); max-width: 40ch; font-size: 1.0625rem; margin-bottom: 1.5rem; }
@media (min-width: 56em) { .contact-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(3rem, 6vw, 6rem); align-items: end; } }

/* On the Writing page the full point of view follows the articles. */
.thought + .readers { margin-top: 0 !important; }

/* CTA tiers. 1: the red button (Explore my work, Get in touch). 2: editorial links that lead to a page,
   set in the serif with a drawn underline and an arrow that nudges on hover. 3: small text links (.text-link). */
main a.cta-ed {
  display: inline-flex; align-items: baseline; gap: .45em; min-height: 2.75rem; padding: .35rem 0;
  font: 400 clamp(1.3rem, 1.9vw, 1.55rem)/1.2 var(--serif); letter-spacing: -.005em; color: var(--blue-ink);
  text-decoration: none !important;
  background: linear-gradient(var(--wine), var(--wine)) 0 calc(100% - .2rem) / 100% 1px no-repeat;
  transition: background-size .35s var(--ease), color .25s var(--ease);
}
main a.cta-ed span { color: var(--wine); font-family: var(--sans); font-size: .8em; transition: transform .3s var(--ease); }
main a.cta-ed:hover { color: var(--wine); background-size: 100% 2px; }
main a.cta-ed:hover span { transform: translate(3px, -3px); }
.readers main a.cta-ed, .readers a.cta-ed { color: #FBF3EA; background-image: linear-gradient(#E8A9A0, #E8A9A0); }
.readers a.cta-ed span { color: #E8A9A0; }
.readers a.cta-ed:hover { color: #fff; }
/* About teaser: a warm bridge, quieter than the work. */
.about-teaser { grid-template-columns: minmax(0, 1fr); }
.about-teaser .snapshot { width: min(100%, 17rem); }
.about-lead { font-size: clamp(1.4rem, 2.3vw, 1.85rem) !important; line-height: 1.3 !important; max-width: 30ch !important; }
.about-link { margin-top: 1.25rem; }
@media (min-width: 56em) { .about-teaser { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) !important; } }

.hero .actions { gap: 1rem 2rem; }
.hero .actions .cta-ed { font-size: clamp(1.2rem, 1.6vw, 1.4rem); }

/* Stats stand on their own: no rules above them, and no divider before Featured Work. */
.proof li { border-top: 0 !important; padding-top: 0 !important; }
.selected > .rule { display: block; }
/* Every text CTA uses the button's type (DM Sans, 1rem, medium), with a wine underline and an arrow. */
main a.cta-ed, .hero .actions .cta-ed, main a.how-cta {
  font: 500 1rem/1 var(--sans) !important; letter-spacing: .01em; color: var(--ink);
  min-height: 3rem; padding: .8rem 0; align-items: center;
  background: linear-gradient(var(--wine), var(--wine)) 0 calc(100% - .55rem) / 100% 1px no-repeat;
}
main a.cta-ed span, main a.how-cta span { font-size: 1em; }

/* Writing cards with the article's cover: the picture fills the card, the title sits on a tan panel below. */
.w-cards a.has-cover { padding: 0; min-height: 0; overflow: hidden; background: var(--oat); }
.w-cover { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.w-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.w-cards a.has-cover .w-title { margin: 0; padding: 1.25rem 1.5rem 0; }
.w-cards a.has-cover .w-meta { padding: 0 1.5rem 1.4rem; }
.w-cards a.has-cover .w-arrow { bottom: 1.3rem; }
@media (hover: hover) { .w-cards a.has-cover:hover .w-cover img { transform: scale(1.03); } }

/* Section headers with their link on the same row: heading left, a quiet link right (below the heading on phones). */
.section-head.has-cta { grid-template-columns: minmax(0, 1fr); align-items: end; }
main a.head-cta {
  justify-self: start; display: inline-flex; align-items: center; gap: .4em; min-height: 2.75rem;
  font: 500 1rem/1 var(--sans); letter-spacing: .01em; color: var(--ink); white-space: nowrap;
  text-decoration: underline !important; text-decoration-color: transparent !important; text-decoration-thickness: 1px !important; text-underline-offset: .35em;
  transition: text-decoration-color .25s var(--ease), color .25s var(--ease);
}
main a.head-cta span { color: var(--wine); transition: transform .3s var(--ease); }
main a.head-cta:hover, main a.head-cta:focus-visible { text-decoration-color: var(--wine) !important; }
main a.head-cta:hover span { transform: translate(2px, -2px); }
@media (min-width: 40em) {
  .section-head.has-cta { grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; }
  .section-head.has-cta .eyebrow { grid-column: 1 / -1; }
  main a.head-cta { justify-self: end; margin-bottom: .45rem; }
}

.about-teaser > .rule { grid-column: 1 / -1; margin-bottom: clamp(1rem, 2.5vw, 1.75rem); }

/* Homepage hero without a portrait: the headline takes the room, type-led. */
.hero.is-type .hero-title { font-size: clamp(2.6rem, 7.4vw, 7rem); max-width: 16ch; line-height: 1; }
.hero.is-type .hero-sub { max-width: 52ch; font-size: clamp(1.0625rem, 1.4vw, 1.2rem); }
@media (min-width: 64em) { .hero.is-type { grid-template-columns: minmax(0, 1fr); padding-top: 5rem; padding-bottom: 5.5rem; } }
/* About: the headshot sits top right in the hero. */
.about-headshot img { width: 200px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--oat); }
@media (min-width: 56em) {
  .page-hero:has(.about-headshot) .page-hero-text { grid-column: 1 / 9; }
  .page-hero:has(.about-headshot) .page-hero-aside { grid-column: 9 / 13; justify-self: end; padding-top: 0; }
  .about-headshot img { width: 260px; }
}

/* About, rebalanced: a tighter hero, then the story with the headshot beside it. */
.about-story3 { display: grid; gap: 2rem; align-items: start; }
.about-story3 .hello-note { width: auto; margin: 0 0 1rem; padding-left: 0; transform: rotate(-2deg); transform-origin: left center; }
.about-story3 .about-headshot img { width: min(100%, 22rem); height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--oat); }
@media (min-width: 56em) {
  .about-story3 { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(3rem, 6vw, 6rem); }
  .about-story3 .about-headshot { justify-self: end; padding-top: 3rem; }
}
/* How I work: the intro on the left, the taped snapshot on the right, then the three principles. */
.how-intro { display: grid; gap: 2rem; align-items: center; }
.how-intro .snapshot { margin: 0 auto; width: min(100%, 19rem); }
@media (min-width: 56em) { .how-intro { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(3rem, 6vw, 6rem); } .how-intro .snapshot { margin: 0 0 0 auto; } }

/* Every page hero is the same height on wider screens, so the closing line always lands in the same place,
   whatever sits beside the headline (filters, a role line, or nothing). */
@media (min-width: 56em) {
  .page-hero { --hero-body: 14.75rem; grid-template-rows: minmax(var(--hero-body), auto) auto; }
  .page-hero-text, .page-hero-aside { grid-row: 1; }
  .page-hero .page-rule { grid-row: 2; }
}
@media (min-width: 64em) { .page-hero { --hero-body: 10.75rem; } }
@media (min-width: 80em) { .page-hero { --hero-body: 8.75rem; } }

/* A short line in the hero's right column (Writing, About): same left edge and starting height as the filters. */
.hero-note { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--cacao); max-width: 44ch; }
.hero-note p { margin: 0; }
@media (min-width: 56em) { .hero-note { padding-top: .5rem; } }
/* The Clear filters button no longer reserves its own line: it appears just under the filters when needed. */
.filters { position: relative; }
.filters-foot { position: absolute; left: 0; top: 100%; margin: 0; min-height: 0; }
.filters-foot .text-btn { padding: .35rem 0; }
/* Filter-style rows that are not filters: same type and edge, but not clickable. */
.pick.is-static { cursor: default; }
.hero-row .pick.is-static span { color: var(--ink); }
/* A sentence that wraps keeps its first line level with the label, like a one-line option. */
.hero-row .pick.is-static { align-items: flex-start; padding-top: calc((2rem - 1lh) / 2); }
/* Before/after with a screen recording on one side: the video fills the same window as the screenshot. */
.compare-video { aspect-ratio: var(--ratio, 16 / 10); overflow: hidden; background: #000; }
.compare-video video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* Optional heading above the numbered sections (e.g. "The approach"): set like "The challenge", with the same rule above. */
.steps-title { margin-top: clamp(4rem, 9vw, 7rem); padding-top: 1.5rem; border-top: 1px solid var(--cacao); }
.steps-title + .case-steps { margin-top: clamp(2rem, 4vw, 3rem); }
/* Under that heading, the first numbered section starts without its own rule. */
.steps-title + .case-steps > .case-step:first-child { border-top: 0; padding-top: 0; }

/* A still image beside one scrolling window, side by side and the same height. */
.showcase.has-beside .showcase-beside img { display: block; width: 100%; height: auto; }
@media (min-width: 40em) {
  .showcase.has-beside .showcase-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .showcase.has-beside .showcase-item:nth-child(even) { margin-top: 0; }
  .showcase.has-beside .compare-frame.ph-image { aspect-ratio: var(--ratio); }
}
@media (min-width: 64em) { .case-step .showcase.has-beside { grid-column: 1 / -1; margin-top: 2.5rem; } }
@media (min-width: 64em) { .showcase.is-single.has-beside { width: auto; margin-left: 0; } }
.showcase.has-beside .compare-frame.ph-image { aspect-ratio: var(--ratio); }

/* Scrolling hero: one tall screenshot in a scroll window, centered on an oat panel */
.case-hero.case-hero-scroll { aspect-ratio: auto; background: var(--oat); padding: clamp(1.25rem, 4vw, 3.5rem); }
.case-hero-scroll .showcase { margin: 0 auto; width: min(100%, 56rem); }
.case-hero-scroll .compare-frame.ph-image { background: #fff; }

/* Small outcome image (certificates, logos) */
.outcome-figure.is-small { max-width: 24rem; }
/* Small outcome image lines up with the outcome text, directly under it */
@media (min-width: 64em) { .outcome-figure.is-small { grid-column: 7 / 13; margin-top: 0; } }

/* Writing page: each article's cover sits in its sheet, like a clipping */
.sheet-cover { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--oat); }
.sheet-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
@media (hover: hover) { .sheet-cover:hover img { transform: scale(1.03); } }
.sheet.has-cover .post-meta { margin-top: 1.5rem; }
.sheet.has-cover .sheet-title { margin-top: 1.25rem; }
.feature-side .sheet-cover { margin-top: 2rem; }
.feature-side .feature-quote { margin-top: 2rem; }
@media (min-width: 56em) {
  .sheet.has-cover { min-height: 0; }
  .feature-side .sheet-cover { margin-top: 0; }
  .feature-side .feature-quote { margin-top: 2rem; }
}

/* Side by side media share one height: each item's width follows its shape (--r = width / height). */
@media (min-width: 40em) {
  .gallery-row:has(> .gallery-item[style*="--r"]) { display: flex; gap: 1.5rem; align-items: flex-start; }
  .gallery-item[style*="--r"] { flex: var(--r) 1 0; min-width: 0; }
  .step-pair { display: flex; gap: 1.5rem; align-items: flex-start; margin-top: 2.5rem; }
  .step-pair > .step-figure { flex: var(--r) 1 0; min-width: 0; margin: 0; }
}
@media (min-width: 64em) { .case-step .step-pair { grid-column: 1 / -1; } }

/* A small row of photos under the outcome text */
.outcome-gallery { width: 100%; margin-top: 1rem; text-align: left; }
.outcome-gallery .gallery { margin: 0; }
.outcome-gallery .gallery-row { gap: 1rem; }
@media (min-width: 64em) { .outcome-gallery { grid-column: 7 / 13; } }
.outcome-gallery figcaption { text-align: left; }

/* A gallery marked small: a modest image aligned with the text column */
.gallery.is-small { max-width: 26rem; }
@media (min-width: 64em) {
  .case-step .gallery.is-small,
  .case-step .gallery.is-small[style*="--count: 1"] { grid-column: 5 / 9; max-width: none; }
}

/* Click to enlarge: case study images that are shown smaller than they were made */
.zoomable { cursor: zoom-in; }
.zoomable:focus-visible { outline: 2px solid var(--wine); outline-offset: 4px; }
.lightbox { border: 0; padding: 0; margin: auto; max-width: min(96vw, 110rem); max-height: 94vh; background: transparent; overflow: visible; }
.lightbox::backdrop { background: rgba(20, 17, 16, .88); }
.lightbox img { display: block; max-width: min(96vw, 110rem); max-height: 88vh; width: auto; height: auto; margin: 0 auto; background: var(--cream); box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .35); cursor: zoom-out; }
.lightbox-close { position: fixed; top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: var(--cream); color: var(--ink); font: 400 1.5rem/1 var(--sans); cursor: pointer; }
.lightbox-close:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }

/* Outcome image the same width as the outcome text, lined up under it */
.outcome-figure.is-column { max-width: 36rem; }
@media (min-width: 64em) { .outcome-figure.is-column { grid-column: 7 / 13; max-width: none; margin-top: 0; } }

/* Hero with a second image beside the first (hero_second): both share one height, together full width. */
.case-hero-pair { margin-top: clamp(2.5rem, 6vw, 4.5rem); display: flex; gap: clamp(.75rem, 2vw, 1.5rem); align-items: center; }
.case-hero-pair .hero-part { flex: var(--r) 1 0; min-width: 0; }
.case-hero-pair img { display: block; width: 100%; height: auto; }

/* A flow with equal steps (flow.even): e.g. a copy document beside the live page it became. Images never upscale. */
.flow.is-even .flow-media img { width: auto; max-width: 100%; margin-inline: auto; outline: 1px solid rgba(59, 42, 34, .18); }
.flow.is-even .flow-step:last-child:not(:first-child) .flow-media { background: none; padding: 0; }
@media (min-width: 64em) {
  .flow.is-even .flow-step, .flow.is-even .flow-step:last-child:not(:first-child) { flex: 1 1 0; }
  .flow.is-even .flow-steps { align-items: center; }
  .flow.is-even .flow-arrow { margin: 0; }
}

/* Work filters, simplified: one choice per row, an All option, and a visible count with a reset. */
.pick.is-empty span { color: var(--cacao); opacity: .45; }
.filters-foot { display: flex; align-items: center; gap: 1.25rem; font-size: .875rem; }
.filters-foot { position: static; margin-top: .6rem; min-height: 2rem; }
.filters-foot[hidden] { display: flex; visibility: hidden; }
.filters-count { color: var(--cacao); }
.empty .text-btn { margin-left: .5rem; }
/* Cards: quieter metadata. Sentence case, one size, no capitals shouting. */
.card-meta { font: 400 .875rem/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: var(--cacao); }
.card .tags { font: 400 .875rem/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: var(--cacao); gap: 0; margin-top: 1rem; }
.card .tags { display: block; }
.card .tags li { display: inline; }
.card .tags li:not(:last-child)::after { content: " · "; white-space: pre; }
.card-status { font-size: .875rem; letter-spacing: 0; text-transform: none; }

/* Work in two tiers: Selected work (large, staggered) and More projects (a tighter, even grid). */
.work-tier[hidden] { display: none; }
.tier-title { font: 400 clamp(1.75rem, 3vw, 2.25rem)/1.1 var(--serif); letter-spacing: -.01em; margin-bottom: 2rem; }
.work-tier.is-more { margin-top: var(--section); padding-top: 2.5rem; border-top: 1px solid var(--rule, rgba(59, 42, 34, .25)); }
.work-grid.is-compact { row-gap: 3rem; }
@media (min-width: 64em) {
  .work-grid.is-compact { grid-template-columns: repeat(4, 1fr); column-gap: 1.25rem; }
  .work-grid.is-compact .card.col-2 { margin-top: 0; }
}
.work-grid.is-compact .card-title { font-size: clamp(1.4rem, 1.8vw, 1.65rem); }
.work-grid.is-compact .card-summary { font-size: .9375rem; line-height: 1.5; }
.work-grid.is-compact .card-body { padding-top: 1rem; }
.work-grid.is-compact .card-meta { margin-bottom: .5rem; }
.work-results[hidden] { display: none; }