/* ------------------------------------------------------------------
   Editorial layer (draft 2, Nov 11 2026). Loaded after styles.css.
   Brand unchanged: the eight colours, Libre Caslon Text and Jost, the
   pinecone files. This file changes shape, depth, photography and motion.
   See docs/briefs/editorial-upgrade-brief.md.
   ------------------------------------------------------------------ */
@font-face {
  font-family: "Libre Caslon Text";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/libre-caslon-text-latin-400-italic.woff2") format("woff2");
}

:root {
  --radius-soft: 22px;
  --radius-arch: 999px 999px var(--radius-soft) var(--radius-soft);
  --hair: color-mix(in srgb, var(--olive) 18%, transparent);
  --hair-strong: color-mix(in srgb, var(--olive) 34%, transparent);
  --lift-1: 0 1px 1px rgba(43, 45, 25, .04), 0 6px 14px -6px rgba(43, 45, 25, .10);
  --lift-2: 0 2px 2px rgba(43, 45, 25, .04), 0 18px 34px -16px rgba(43, 45, 25, .22);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

/* Paper grain over the whole page, under everything interactive. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .33 0 0 0 0 .34 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }
.site-header { z-index: 20; }

em.it,
.it {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--terracotta);
}
.on-inverse .it { color: var(--off-white); }

/* Numbered eyebrow: 01 / LABEL */
.eyebrow[data-n]::before {
  content: attr(data-n);
  width: auto;
  height: auto;
  background: none;
  font-family: var(--font-serif);
  font-size: 15px;
  letter-spacing: 0;
  color: var(--olive);
  padding-right: var(--space-3);
  border-right: 1px solid var(--hair-strong);
}

/* Header: translucent linen once the page has moved. */
.site-header {
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s var(--ease);
}
html[data-scrolled] .site-header {
  background-color: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 1px 0 var(--hair), 0 10px 30px -22px rgba(43, 45, 25, .35);
}

/* Buttons: a press, and a warm lift on hover. */
.btn { transition: transform .12s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease); border-radius: 999px; padding-left: 26px; padding-right: 26px; }
.btn-primary { box-shadow: 0 1px 0 rgba(255, 255, 253, .25) inset, 0 8px 18px -10px rgba(171, 90, 53, .7); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.985); box-shadow: none; }

/* ---------- Photographs ---------- */
.ph {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--sand);
  border-radius: var(--radius-soft);
}
.ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.94) sepia(.07) contrast(1.02);
}
.ph.is-arch { border-radius: var(--radius-arch); aspect-ratio: 4 / 5; }
.ph.is-wide { aspect-ratio: 3 / 2; }

/* An arch with a second, outlined arch set behind it. */
.arch-stage {
  position: relative;
  width: min(100%, 440px);
  margin-inline: auto;
  padding: 0 22px 22px 0;
}
.arch-stage::before {
  content: "";
  position: absolute;
  inset: 22px 0 0 22px;
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-arch);
}
.arch-stage .ph { box-shadow: var(--lift-2); }
.arch-stage .tag {
  position: absolute;
  left: -18px;
  bottom: 54px;
  padding: 10px 16px 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--off-white);
  border: 1px solid var(--hair);
  border-radius: 999px;
  box-shadow: var(--lift-1);
  font: var(--type-caption);
  color: var(--olive);
  white-space: nowrap;
}
.arch-stage .tag img { width: 14px; height: 18px; }

/* A print on a mat, turned a little. */
.print {
  margin: 0;
  padding: 14px 14px 0;
  background: var(--off-white);
  border: 1px solid var(--hair);
  border-radius: 10px;
  box-shadow: var(--lift-2);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.print .ph { border-radius: 4px; aspect-ratio: 4 / 3; }
.print figcaption {
  padding: 14px 4px 18px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 26px;
  color: var(--olive);
}
.print.tilt-l { transform: rotate(-1.6deg); }
.print.tilt-r { transform: rotate(1.4deg); }
.print:hover { transform: rotate(0) translateY(-4px); }

/* ---------- Hero ---------- */
.ed-hero { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.ed-hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-16);
  align-items: center;
}
.ed-hero .display { letter-spacing: -.02em; max-width: 12em; text-wrap: balance; }
.ed-hero .lead { margin-top: var(--space-6); max-width: 30em; }
.ed-hero .cta-row { margin-top: var(--space-8); }
.ed-hero .caption { margin-top: var(--space-4); }
.ed-hero.is-about .h1 { letter-spacing: -.02em; max-width: 14em; text-wrap: balance; }

/* ---------- How it works: three open steps and a drawn line ---------- */
.flow { padding-top: var(--space-12); padding-bottom: var(--space-24); }
.flow-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; }
.flow-steps {
  list-style: none;
  margin: var(--space-12) 0 0;
  padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-16);
  --draw: 1;
}
.flow-steps::before,
.flow-steps::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 28px;
  height: 1px;
  background: var(--hair);
}
.flow-steps::after {
  background: linear-gradient(90deg, var(--terracotta), var(--olive));
  transform-origin: left;
  transform: scaleX(var(--draw));
}
.flow-steps li { position: relative; padding-top: 0; }
.flow-steps .num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--hair-strong);
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--terracotta);
}
.flow-steps .h3 { margin-top: var(--space-6); }
.flow-steps p { margin-top: var(--space-2); max-width: 22em; color: var(--text-primary); }

/* ---------- Who we work with: one panel, four choices ---------- */
.who { background: var(--sand); }
.who .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); align-items: center; }
.who-tabs { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; gap: 6px; }
.who-tabs button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font: var(--type-label);
  color: var(--olive);
  text-align: left;
  cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.who-tabs button svg { width: 26px; height: 26px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.who-tabs button:hover { background: color-mix(in srgb, var(--off-white) 55%, transparent); }
.who-tabs button[aria-selected="true"] { background: var(--off-white); border-color: var(--hair); box-shadow: var(--lift-1); color: var(--ink); }
.who-tabs button[aria-selected="true"] svg { stroke: var(--terracotta); }
.who-panel {
  position: relative;
  padding: var(--space-12);
  background: var(--off-white);
  border: 1px solid var(--hair);
  border-radius: 28px 28px 28px 6px;
  box-shadow: var(--lift-2);
  min-height: 330px;
}
.who-panel [role="tabpanel"][hidden] { display: none; }
.who-panel .h3 { font-size: 28px; line-height: 36px; }
.who-panel p { margin-top: var(--space-3); max-width: 30em; }
.example {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--hair);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px var(--space-6);
  font: var(--type-body-small);
}
.example dt { font: var(--type-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--terracotta); padding-top: 5px; }
.example dd { margin: 0; color: var(--ink); }

/* ---------- What to expect: show it ---------- */
.show .wrap > .section-head { max-width: none; }
.show-grid { margin-top: var(--space-12); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); align-items: start; }
.artifact {
  background: var(--off-white);
  border: 1px solid var(--hair);
  border-radius: var(--radius-soft);
  box-shadow: var(--lift-2);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.artifact:hover { transform: translateY(-3px); }
.artifact-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 16px 22px; border-bottom: 1px solid var(--hair); }
.artifact-head .label { font: var(--type-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--olive); }
.artifact-head .ex { font: var(--type-caption); color: var(--olive); padding: 2px 10px; border: 1px solid var(--hair-strong); border-radius: 999px; }
.compare { width: 100%; border-collapse: collapse; font: var(--type-body-small); }
.compare th, .compare td { padding: 14px 22px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare thead th { font-family: var(--font-serif); font-size: 20px; font-weight: 400; color: var(--olive); }
.compare tbody th { font: var(--type-caption); color: var(--olive); width: 30%; font-weight: 400; }
.compare td + td, .compare thead th + th + th { border-left: 1px solid var(--hair); }
.compare .dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--olive); }
.compare .dot.t { background: var(--terracotta); }
.artifact-foot { padding: 14px 22px; background: color-mix(in srgb, var(--sand) 45%, transparent); font: var(--type-caption); color: var(--olive); }

.plain { position: relative; }
.plain-switch { display: inline-flex; padding: 3px; background: var(--sand); border-radius: 999px; }
.plain-switch button { padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; font: var(--type-caption); color: var(--olive); cursor: pointer; transition: background-color .25s var(--ease), color .25s var(--ease); }
.plain-switch button[aria-pressed="true"] { background: var(--olive); color: var(--off-white); }
.plain-body { padding: 26px 22px 28px; min-height: 196px; display: grid; }
.plain-body > * { grid-area: 1 / 1; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.plain-body .fine { font: 400 14px/23px var(--font-sans); color: var(--olive); }
.plain-body .words { font-family: var(--font-serif); font-size: 24px; line-height: 34px; color: var(--ink); }
.plain[data-show="words"] .fine, .plain[data-show="fine"] .words { opacity: 0; transform: translateY(8px); pointer-events: none; }
.pace { margin-top: var(--space-8); padding-left: var(--space-6); border-left: 1px solid var(--terracotta); }
.pace .h3 + p { margin-top: var(--space-2); }

/* ---------- Coverage: two open columns ---------- */
.cover-grid { margin-top: var(--space-12); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--hair-strong); }
.cover { padding: var(--space-12) var(--space-12) var(--space-8) 0; }
.cover + .cover { padding-left: var(--space-12); padding-right: 0; border-left: 1px solid var(--hair); }
.cover .h3 { font-size: 30px; line-height: 38px; }
.cover > p { margin-top: var(--space-3); max-width: 28em; }
.cover ul { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cover li { padding: 7px 14px; border: 1px solid var(--hair-strong); border-radius: 999px; font: var(--type-caption); color: var(--olive); background: color-mix(in srgb, var(--off-white) 70%, transparent); }
.cover .note { margin-top: var(--space-4); font: var(--type-caption); color: var(--olive); }

/* ---------- Family spread ---------- */
.spread .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-16); align-items: center; }
.spread .ph { box-shadow: var(--lift-2); border-radius: var(--radius-soft) 120px var(--radius-soft) var(--radius-soft); }
.spread-copy > * + * { margin-top: var(--space-4); }
.spread.is-note .wrap { display: block; position: relative; }
.spread.is-note .ph { width: 72%; aspect-ratio: 16 / 10; }
.note-card {
  position: absolute;
  right: 0;
  bottom: -36px;
  width: min(46%, 520px);
  margin: 0;
  padding: var(--space-12);
  background: var(--off-white);
  border: 1px solid var(--hair);
  border-radius: 6px 28px 28px 28px;
  box-shadow: var(--lift-2);
}
.note-card blockquote { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 25px; line-height: 36px; color: var(--olive); text-wrap: pretty; }
.note-card figcaption { margin-top: var(--space-6); display: flex; align-items: center; gap: 10px; font: var(--type-caption); color: var(--olive); }
.note-card figcaption img { width: 16px; height: 21px; }
.spread.is-note { padding-bottom: calc(var(--section-pad) + 36px); }

/* ---------- Story, agents, outside work ---------- */
.story-grid { margin-top: var(--space-12); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-16); align-items: start; }
.story-grid > :nth-child(2) { margin-top: var(--space-16); }
.agents { margin-top: var(--space-12); display: grid; grid-template-columns: repeat(2, minmax(0, 300px)) minmax(0, 1fr); gap: var(--space-12); align-items: end; }
.agent-card { margin: 0; }
.agent-card .ph { box-shadow: var(--lift-2); }
.agent-card figcaption { margin-top: var(--space-6); }
.agent-card .name { font-family: var(--font-serif); font-size: 26px; line-height: 34px; color: var(--olive); }
.agent-card .role { margin-top: 2px; font: var(--type-caption); color: var(--olive); }
.agents-aside { padding-bottom: var(--space-8); }
.agents-aside > * + * { margin-top: var(--space-4); }
.outside { margin-top: var(--space-8); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: 1fr 1fr; gap: var(--space-6); }
.outside .ph:first-child { grid-row: 1 / 3; border-radius: var(--radius-soft) var(--radius-soft) var(--radius-soft) 120px; aspect-ratio: auto; }
.outside .ph { aspect-ratio: 16 / 9; }
.outside .ph:nth-child(2) { border-radius: var(--radius-soft) 90px var(--radius-soft) var(--radius-soft); }

/* The dashed draft note, quieter. Still marked. */
.draft-slot { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border: 1px dashed var(--draft); border-radius: 999px; font: var(--type-caption); color: var(--text-primary); }
.draft-slot::before { content: "Draft"; font-weight: 500; letter-spacing: var(--track-eyebrow); text-transform: uppercase; font-size: 11px; color: var(--lake); }

/* Who we work with on About: open rows. */
.rows { list-style: none; margin: var(--space-8) 0 0; padding: 0; border-top: 1px solid var(--hair-strong); }
.rows li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-8); padding: var(--space-6) 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.rows .h3 { font-size: 24px; }

/* One watermark per page: only the closing keeps it. */
.section.has-cone::before, .section.has-cone::after { display: none; }
.closing { border-radius: 40px 40px 0 0; }

/* ---------- Reveal on scroll ---------- */
html[data-motion] [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
html[data-motion] [data-reveal].is-in { opacity: 1; transform: none; }
/* The frame stays in place (so the observer can see it); the picture
   opens inside it like a curtain over the sand ground. */
html[data-motion] .ph[data-reveal] { opacity: 1; transform: none; }
html[data-motion] .ph[data-reveal] img { clip-path: inset(0 0 100% 0); transform: scale(1.08); transition: clip-path 1.1s var(--ease), transform 1.6s var(--ease); transition-delay: var(--d, 0ms); }
html[data-motion] .ph[data-reveal].is-in img { clip-path: inset(0 0 0 0); transform: scale(1); }
html[data-motion] .print[data-reveal] { transition: opacity .8s var(--ease), transform .9s var(--ease); }
html[data-motion] .print.tilt-l[data-reveal].is-in { transform: rotate(-1.6deg); }
html[data-motion] .print.tilt-r[data-reveal].is-in { transform: rotate(1.4deg); }

@media (prefers-reduced-motion: reduce) {
  .btn, .artifact, .print, .site-header, .plain-body > * { transition: none; }
  .btn:hover, .artifact:hover { transform: none; }
}

/* ---------- Narrower ---------- */
@media (max-width: 1060px) {
  .ed-hero .wrap, .who .wrap, .show-grid, .spread .wrap, .story-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
  .ed-hero .display, .ed-hero.is-about .h1 { max-width: none; }
  .story-grid > :nth-child(2) { margin-top: 0; }
  .agents { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agents-aside { grid-column: 1 / -1; padding-bottom: 0; }
  .spread.is-note .ph { width: 100%; }
  .note-card { position: relative; right: auto; bottom: auto; width: auto; margin: -48px var(--space-6) 0; }
  .spread.is-note { padding-bottom: var(--section-pad); }
}
@media (max-width: 739px) {
  .ed-hero { padding-top: var(--space-8); padding-bottom: var(--space-12); }
  .arch-stage { width: min(100%, 340px); padding: 0 14px 14px 0; }
  .arch-stage::before { inset: 14px 0 0 14px; }
  .arch-stage .tag { left: -6px; bottom: 34px; }
  .flow { padding-bottom: var(--space-16); }
  .flow-steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .flow-steps::before, .flow-steps::after { left: 28px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .flow-steps::after { transform-origin: top; transform: scaleY(var(--draw)); background: linear-gradient(180deg, var(--terracotta), var(--olive)); }
  .flow-steps li { display: grid; grid-template-columns: 56px 1fr; column-gap: var(--space-6); align-items: start; }
  .flow-steps .h3 { margin-top: 10px; }
  .flow-steps p { grid-column: 2; }
  .who-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .who-tabs button { padding: 10px 12px; gap: 8px; font-size: 15px; }
  .who-tabs button svg { width: 20px; height: 20px; }
  .who-panel { padding: var(--space-8) var(--space-6); min-height: 0; border-radius: 22px 22px 22px 6px; }
  .who-panel .h3 { font-size: 24px; line-height: 32px; }
  .example { grid-template-columns: minmax(0, 1fr); }
  .compare th, .compare td { padding: 12px 12px; font-size: 14px; line-height: 21px; }
  .compare thead th { font-size: 17px; }
  .compare tbody th { width: 27%; }
  .artifact-head, .artifact-foot { padding-left: 14px; padding-right: 14px; }
  .plain-body { padding: 20px 14px 22px; min-height: 230px; }
  .plain-body .words { font-size: 21px; line-height: 30px; }
  .cover-grid { grid-template-columns: minmax(0, 1fr); }
  .cover, .cover + .cover { padding: var(--space-8) 0; border-left: 0; }
  .cover + .cover { border-top: 1px solid var(--hair); }
  .cover .h3 { font-size: 26px; line-height: 34px; }
  .spread .ph { border-radius: var(--radius-soft) 70px var(--radius-soft) var(--radius-soft); }
  .note-card { margin: -32px var(--space-3) 0; padding: var(--space-8) var(--space-6); }
  .note-card blockquote { font-size: 20px; line-height: 30px; }
  .agents { gap: var(--space-6); }
  .agent-card .name { font-size: 22px; line-height: 30px; }
  .outside { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .outside .ph:first-child { grid-row: auto; aspect-ratio: 4 / 3; border-radius: var(--radius-soft) var(--radius-soft) var(--radius-soft) 70px; }
  .rows li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .closing { border-radius: 26px 26px 0 0; }
  .print.tilt-l, .print.tilt-r { transform: none; }
  html[data-motion] .print.tilt-l[data-reveal].is-in, html[data-motion] .print.tilt-r[data-reveal].is-in { transform: none; }
}

/* Spacing inside the split heads. */
.who .h2, .spread-copy .h2, .flow-head .h2 { margin-top: var(--space-3); }
.who .lead { margin-top: var(--space-4); max-width: 26em; }
.flow { padding-top: var(--space-8); }

/* Draft marks show only while the site is in draft. */
html:not([data-draft]) .draft-slot { display: none; }

/* The contact details card also shows when it lists people to call. */
html[data-people]:not([data-draft]):not([data-reach]) [data-contact-panel] { display: block; }

/* People to text or call: the number, then Text first and Call beside it. */
.contact-list > .reach { align-items: start; padding: var(--space-4) 0; }
.contact-list > .reach dd { display: flex; flex-direction: column; gap: var(--space-3); }
.reach-number { font-variant-numeric: tabular-nums; }
.reach-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.reach-btn { min-height: 44px; }
@media (max-width: 739px) {
  .contact-list > .reach dt { margin-bottom: var(--space-1); }
  .reach-actions .reach-btn { flex: 1 1 0; justify-content: center; }
}