@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --canvas: #101311;
  --ink: #f1f2ec;
  --ink-2: #c6cbc2;
  --ink-3: #9aa299;
  --struck: #848b83;
  --rule: #2c322d;
  --rule-strong: #4a524b;
  --accent: #e8a679;
  --accent-ink: #15110f;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter: clamp(20px, 5vw, 72px);
  --measure: 62ch;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  /* the engine draws selection, caret, scrollbar and its fallback focus ring from these */
  --sc-canvas: var(--canvas);
  --sc-ink: var(--ink);
  --sc-accent: var(--accent);
  --sc-accent-ink: var(--accent-ink);
}

* { box-sizing: border-box; }
html { background: var(--canvas); color-scheme: dark; scroll-padding-top: calc(var(--bar) + 8px); }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
em { font-style: normal; color: var(--accent); }
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; }
p { margin: 0 0 1em; }

/* status line */
:root { --bar: 53px; }
.status {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 24px;
  min-height: var(--bar); padding: 0 var(--gutter);
  background: var(--canvas);
  border-bottom: 1px solid var(--rule);
  font: 400 0.8125rem/1.2 var(--mono);
  color: var(--ink-3);
}
.status .wordmark { color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.status-section { flex: 1; display: flex; align-items: center; gap: 10px; color: var(--ink-2); }
.status-section::before { content: ""; width: 6px; height: 6px; background: var(--accent); }
.status nav { display: flex; gap: 2px; margin-right: -12px; }
.status nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  color: var(--ink-3); text-decoration: none;
  transition: color 140ms var(--ease-out);
}
.status nav a:hover { color: var(--ink); }
.status nav a:active { color: var(--accent); }
.status nav a[aria-current] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 8px; }

main > section, .about-rest { padding: clamp(56px, 9vw, 120px) var(--gutter); }

/* 1. opening */
.opening h1 { font-size: clamp(2.75rem, min(7.9vw, 12.5vh), 7.5rem); line-height: 1; letter-spacing: -0.045em; max-width: 15ch; text-wrap: balance; }
.lede { max-width: 48ch; margin: 32px 0 0; color: var(--ink-2); font-size: 1.125rem; line-height: 1.65; text-wrap: pretty; }
.review, .tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.review { margin-top: 40px; max-width: 680px; border-top: 1px solid var(--rule-strong); font: 400 0.9375rem/1.3 var(--mono); }
.review li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; column-gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.review li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--struck); }
.review .k { color: var(--ink); }
.review .k::before { background: var(--accent); border-color: var(--accent); }
.review .k b { color: var(--accent); font-weight: 400; }
.review .x span { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--struck); }
.review .x b { color: var(--struck); font-weight: 400; }
.review b { min-width: 4ch; text-align: right; letter-spacing: 0.02em; }
@media (min-width: 900px) {
  .opening {
    min-height: calc(100svh - var(--bar));
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(32px, 6vw, 96px);
    grid-template-rows: auto 1fr; align-items: end;
    padding-top: clamp(48px, 30vh - 120px, 152px); padding-bottom: clamp(32px, 6vh, 64px);
  }
  .opening h1 { grid-column: 1 / -1; align-self: start; }
  .lede { grid-column: 1; margin: 0; }
  .review { grid-column: 2; margin: 0; max-width: none; }
  .review li { padding: clamp(14px, 2.45vh, 22px) 0; }
}

/* 2. the cut: the finished state, which is also the no-script page */
.cut-inner { padding: clamp(40px, 6vw, 80px) var(--gutter); }
.cut-run { display: contents; } /* a box only where the stage is unpinned: it limits how far the count can stick */
.cut-label { font: 400 0.8125rem/1.2 var(--mono); color: var(--ink-3); margin-bottom: 20px; }
.cut h2 { font-size: clamp(1.75rem, 4.5vw, 3.5rem); max-width: 20ch; }
#cut-list { list-style: none; margin: 40px 0 0; padding: 0; max-width: 720px; border-top: 1px solid var(--rule); }
#cut-list li { border-bottom: 1px solid var(--rule); }
.term {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  width: 100%; min-height: 44px; padding: 10px 0;
  background: none; border: 0; color: var(--ink-2); cursor: pointer; text-align: left;
  font: 400 0.9375rem/1.3 var(--mono);
  touch-action: manipulation;
}
.term .verdict { flex: none; min-width: 4ch; text-align: right; font-weight: 400; color: var(--ink-3); } /* holds its width while empty, so a line cannot rewrap as it resolves */
.term[data-verdict="keep"] { color: var(--ink); }
.term[data-verdict="keep"] .verdict { color: var(--accent); }
.term[data-verdict="cut"] .term-text { text-decoration: line-through; color: var(--struck); }
.cut-total { margin: 20px 0 0; font: 400 0.9375rem/1.3 var(--mono); color: var(--ink); }
#cut-count { color: var(--accent); }
.cut-hint { margin-left: 16px; color: var(--ink-3); font-size: 0.8125rem; }
.about-rest { max-width: calc(var(--measure) + 2 * var(--gutter)); font-size: 1.1875rem; color: var(--ink-2); }

/* 3. services (a stacked list; with the script it becomes a tab set) */
.services h2, .portfolio h2, .contact h2 { font-size: clamp(1.75rem, 4.5vw, 3.5rem); max-width: 20ch; text-wrap: balance; }
.services { padding-bottom: clamp(40px, 4vw, 56px); } /* the tab rail ends square, so it needs less air than prose */
.services-body { margin-top: 56px; }
.service-list { display: grid; gap: 0; max-width: 820px; border-top: 1px solid var(--rule); }
.service { padding: 28px 0; border-bottom: 1px solid var(--rule); }
.service h3 { font: 500 1.25rem/1.2 var(--mono); letter-spacing: 0; margin-bottom: 12px; }
.service p { margin: 0; color: var(--ink-2); max-width: 56ch; }
[role="tablist"] { display: flex; flex-direction: column; font: 400 1rem/1.3 var(--mono); }
[role="tablist"] [role="tab"] {
  text-align: left; min-height: 56px; padding: 16px 24px; background: none; color: var(--ink-3);
  border: 0; border-left: 2px solid var(--rule); border-radius: 0; cursor: pointer; font: inherit;
  transition: color 140ms var(--ease-out), border-color 140ms var(--ease-out);
}
[role="tablist"] [role="tab"]:hover { color: var(--ink); }
[role="tablist"] [role="tab"]:active { color: var(--accent); }
[role="tablist"] [role="tab"][aria-selected="true"] { color: var(--ink); border-left-color: var(--accent); }
[role="tablist"] [role="tab"]:focus-visible { outline-offset: -2px; }
.tabs-on .services-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 6vw, 96px); align-items: start; }
.tabs-on .service-list { max-width: none; border-top: 0; min-height: 11em; }
.tabs-on .service { padding: 0; border: 0; }
.tabs-on .service h3 { display: none; } /* the tab already carries the name; the panel is labelled by it */
.tabs-on .service p { max-width: 32ch; font-size: clamp(1.25rem, 1.9vw, 1.75rem); line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.tabs-on .service:focus-visible { outline-offset: 12px; }
@media (max-width: 860px) {
  .tabs-on .services-body { grid-template-columns: 1fr; row-gap: 32px; }
  .tabs-on .service-list { min-height: 0; }
}

/* 4. portfolio */
.portfolio-grid { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.tree { font: 400 1rem/1.9 var(--mono); color: var(--ink-2); }
.tree .node { display: inline-block; }
.tree .node.root { color: var(--ink); font-weight: 500; }
.tree .node.branch { color: var(--accent); }
/* the branches are drawn with borders: each item carries its elbow, and every item but the last carries the trunk on */
.tree ul { margin-left: 0.5em; }
.tree ul > li { position: relative; padding-left: 1.75em; }
.tree ul > li::before { content: ""; position: absolute; left: 0; top: 0; width: 1.25em; height: 0.95em; border-left: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); }
.tree ul > li:not(:last-child)::after { content: ""; position: absolute; left: 0; top: 0.95em; bottom: 0; border-left: 1px solid var(--rule-strong); }
.portfolio-copy h3 { font: 500 1.125rem/1.2 var(--mono); letter-spacing: 0; margin: 0 0 10px; color: var(--ink); }
.portfolio-copy h3:not(:first-child) { margin-top: 40px; }
.portfolio-copy p { color: var(--ink-2); max-width: 52ch; margin: 0; text-wrap: pretty; }
.facts { margin: clamp(56px, 8vw, 96px) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule-strong); }
.facts div { padding: 24px 24px 0 0; }
.facts div + div { padding-left: 24px; border-left: 1px solid var(--rule); }
.facts dt { font: 500 1.75rem/1.1 var(--mono); letter-spacing: -0.02em; color: var(--ink); }
.facts dd { margin: 10px 0 0; font: 400 0.8125rem/1.3 var(--mono); color: var(--ink-3); }
@media (max-width: 860px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .facts div { padding-bottom: 8px; }
}

/* 5. contact: the close. A tall, quiet page-end with one input and one action. */
.contact { border-top: 1px solid var(--rule-strong); padding-top: clamp(72px, 12vw, 160px); padding-bottom: clamp(48px, 7vw, 96px); }
.contact h2 { font-size: clamp(2.5rem, 7.5vw, 6.5rem); line-height: 0.98; letter-spacing: -0.035em; max-width: 12ch; }
.contact-note { margin: 24px 0 0; color: var(--ink-2); font-size: 1.125rem; }
#enquiry-form { margin-top: clamp(40px, 6vw, 72px); max-width: 680px; display: grid; gap: 14px; justify-items: stretch; }
#enquiry-form label { font: 400 0.9375rem/1.3 var(--mono); color: var(--ink-2); }
#enquiry-text {
  width: 100%; min-height: 160px; padding: 16px 18px; resize: vertical;
  background: rgba(241, 242, 236, 0.03); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: 4px;
  font: 400 1rem/1.55 var(--mono);
  transition: border-color 140ms var(--ease-out), background-color 140ms var(--ease-out);
}
#enquiry-text:hover { border-color: var(--struck); }
#enquiry-text:focus-visible { border-color: var(--accent); background: rgba(241, 242, 236, 0.05); outline-offset: 2px; }
.send-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; margin-top: 6px; }
.send {
  min-height: 52px; padding: 16px 26px; border: 0; border-radius: 3px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); font: 500 1rem/1 var(--sans);
  transition: transform 140ms var(--ease-out), background-color 140ms var(--ease-out);
}
.send:hover { background: #f0b48b; }
.send:active { transform: scale(0.97); }
.enquiry-note { margin: 0; flex: 1 1 22ch; font: 400 0.8125rem/1.5 var(--mono); color: var(--accent); }
.enquiry-note:empty { display: none; }
.contact-direct { margin: 28px 0 0; color: var(--ink-3); font: 400 0.9375rem/1.4 var(--mono); }
.contact-direct a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.contact-direct a:hover { color: var(--accent); }
.legal { margin-top: clamp(72px, 10vw, 144px); padding-top: 24px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 24px 80px; font: 400 0.8125rem/1.7 var(--mono); color: var(--ink-3); }
.legal dl { margin: 0; }
.legal dl div { display: flex; gap: 12px; }
.legal dt { color: var(--ink-3); }
.legal dt::after { content: ":"; }
.legal dd { margin: 0; color: var(--ink-2); }
.legal address { font-style: normal; color: var(--ink-2); }

footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 24px var(--gutter); border-top: 1px solid var(--rule); font: 400 0.8125rem/1.4 var(--mono); color: var(--ink-3); }
footer a { color: var(--ink-3); display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }

/* privacy: an ordinary open block at the foot of the page until the script takes over */
.privacy { padding: 0 var(--gutter) 80px; }
.privacy.is-modal { padding: 0; }
.privacyDialog {
  position: static; inset: auto; display: block; width: 100%; max-width: 760px; height: auto; max-height: none;
  margin: 0; padding: 32px 0 0; border: 0; border-top: 1px solid var(--rule); background: transparent; color: var(--ink-2);
}
.dialogHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.dialogTitle { font-size: 1.75rem; color: var(--ink); }
.dialogClose { min-width: 44px; min-height: 44px; background: none; border: 1px solid var(--rule-strong); border-radius: 4px; color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer; transition: border-color 140ms var(--ease-out), color 140ms var(--ease-out); }
.dialogClose:hover { border-color: var(--accent); color: var(--accent); }
.dialogContent h3 { font: 500 1.125rem/1.2 var(--mono); letter-spacing: 0; margin: 32px 0 8px; color: var(--ink); }
.dialogContent .updated { font: 400 0.8125rem/1.3 var(--mono); color: var(--ink-3); }
.dialogContent a { color: var(--ink); text-decoration-color: var(--accent); }
.dialogContent ul { padding-left: 1.2em; }

/* with script: a modal sheet over the page */
.privacyDialog.is-modal:not([open]) { display: none; }
.privacyDialog.is-modal[open] {
  position: fixed; inset: 0; margin: auto; display: flex; flex-direction: column;
  width: min(760px, calc(100vw - 2 * var(--gutter))); max-height: min(86svh, 860px);
  padding: 0; background: #151915; border: 1px solid var(--rule-strong); border-radius: 6px; overflow: hidden;
  animation: sheet-in 200ms var(--ease-out);
}
.privacyDialog.is-modal::backdrop { background: rgba(8, 10, 9, 0.82); }
.privacyDialog.is-modal .dialogHeader { margin: 0; padding: 20px clamp(20px, 4vw, 40px); border-bottom: 1px solid var(--rule); flex: none; }
.privacyDialog.is-modal .dialogContent { overflow-y: auto; overscroll-behavior: contain; padding: 20px clamp(20px, 4vw, 40px) 40px; }
.privacyDialog.is-modal .dialogContent h3:first-of-type { margin-top: 28px; }
.privacyDialog.is-modal .dialogContent .updated { margin-top: 0; }
.privacyDialog.is-modal .dialogContent p { max-width: 62ch; }
body.dialogOpen { overflow: hidden; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 860px) {
  :root { --bar: 95px; } /* two rows: 6px + 44px + 44px + 1px rule */
  .portfolio-grid { grid-template-columns: 1fr; }
  /* phone: wordmark and the current section on the first row, the four links on the second */
  .status { flex-wrap: wrap; row-gap: 0; padding-top: 6px; padding-bottom: 0; }
  .status .wordmark { order: 1; line-height: 44px; }
  .status-section { order: 2; flex: 1; justify-content: flex-end; }
  .status nav { order: 3; flex-basis: 100%; justify-content: space-between; margin: 0 -12px; }
  .status nav a { flex: 1; justify-content: center; }
}

/* phones: composed for the hand, not shrunk */
@media (max-width: 899px) {
  .opening h1 { font-size: clamp(2.25rem, 11.2vw, 3.75rem); line-height: 1.02; letter-spacing: -0.04em; }
  .lede { margin-top: 24px; font-size: 1.0625rem; line-height: 1.6; }
  .review { margin-top: 32px; font-size: 0.875rem; }
  .review li { padding: 14px 0; column-gap: 12px; }
  .term { font-size: 0.875rem; }
  .cut-label { font-size: 0.75rem; }
  .about-rest { font-size: 1.0625rem; }
  .tabs-on .service p { font-size: 1.125rem; max-width: 40ch; }
  /* the tree wraps here, so a wrapped line sits closer than the next branch */
  .tree { font-size: 0.875rem; line-height: 1.5; }
  .tree ul > li { padding-top: 0.45em; padding-bottom: 0.45em; }
  .tree ul > li::before { height: 1.2em; }
  .tree ul > li:not(:last-child)::after { top: 1.2em; }
  .facts dt { font-size: 1.375rem; }
  .legal { gap: 20px 48px; }
}
@media (max-width: 380px) {
  /* the smallest screens: four links share 280px */
  .status nav { margin: 0; }
  .status nav a { padding: 0 2px; font-size: 0.75rem; }
  .status-section { font-size: 0.75rem; }
  .legal dl div { gap: 8px; }
}
/* a phone on its side: one row of chrome, since height is the scarce thing */
@media (max-width: 860px) and (max-height: 500px) {
  :root { --bar: 45px; }
  .status { flex-wrap: nowrap; gap: 16px; padding-top: 0; }
  .status .wordmark, .status-section { order: 0; }
  .status-section { justify-content: flex-start; }
  .status nav { order: 0; flex-basis: auto; margin: 0 -8px 0 0; justify-content: flex-end; }
  .status nav a { flex: none; padding: 0 8px; }
  .opening h1 { font-size: 2.5rem; max-width: 22ch; }
  main > section, .about-rest { padding-top: 40px; padding-bottom: 40px; }
  .cut { padding: 0; }
  .contact { padding-top: 56px; }
}
@media (max-width: 620px) and (max-height: 500px) {
  .status-section { display: none; } /* the marked link still names the section */
  .status .wordmark { flex: 1; }
}

[hidden] { display: none !important; }

/* 2. the cut: live states, set by page.js as data-state */
.term .term-text, .term .verdict { transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), color 220ms var(--ease-out); }
.term[data-state="pending"] { color: var(--ink); }
.term[data-state="pending"] .term-text { text-decoration: none; color: var(--ink); }
.term[data-state="keep"] .term-text { text-decoration: none; color: var(--ink); }
.term[data-state="keep"] .verdict { color: var(--accent); }
.term[data-state="cut"] .term-text { text-decoration: line-through; color: var(--struck); transform: translateX(8px); }
.term[data-state="cut"] .verdict { color: var(--struck); }
.term:focus-visible { outline-offset: 2px; }
.term[data-state="pending"] .verdict { opacity: 0; }
.term:active .term-text { opacity: 0.8; }
@media (hover: hover) and (pointer: fine) {
  .term:hover .term-text, .term[data-state="cut"]:hover .term-text { color: var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  /* the engine sets the pinned height inline; collapse the hold */
  .cut[data-sc-act] { height: auto !important; }
  .cut .sc-stage { position: static; height: auto; }
  .term .term-text, .term .verdict { transition: none; }
  .term[data-state="cut"] .term-text { transform: none; }
  .privacyDialog.is-modal[open] { animation: none; }
  .send, #enquiry-text, .dialogClose { transition: none; }
}

/* 2. the cut, pinned: heading left, list and count right, so all twelve lines plus the count fit one screen */
@media (min-width: 900px) {
  .cut-inner {
    height: 100%; box-sizing: border-box; padding-top: 96px; padding-bottom: 32px;
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(32px, 6vw, 96px);
    grid-template-rows: auto auto auto; align-content: center; align-items: start;
  }
  .cut-label { grid-column: 1; grid-row: 1; }
  .cut h2 { grid-column: 1; grid-row: 2 / 4; }
  #cut-list { grid-column: 2; grid-row: 1 / 3; margin-top: 0; }
  .cut-total { grid-column: 2; grid-row: 3; margin-top: 12px; }
  /* in-page links land the pinned stage flush with the top, not scroll-padding below it */
  .cut { scroll-margin-top: calc(-1 * (var(--bar) + 8px)); }
}
/* a laptop with little height keeps the pin: closer lines still fit, and a mouse does not need a 44px row */
@media (min-width: 900px) and (max-height: 719px) and (pointer: fine) {
  .cut-inner { padding-top: 68px; padding-bottom: 12px; }
  .term { min-height: 36px; padding: 6px 0; }
}
.cut { padding: 0; } /* the pinned stage owns the whole act; section padding would offset the pin */

/* 2. the cut, unpinned: where twelve lines cannot share one screen there is no hold.
   The list scrolls in normal flow and each line falls as it passes (page.js reads
   this stage's position to know). The label and the count stay on screen with it. */
@media (max-width: 899px), (max-height: 599px), (pointer: coarse) and (max-height: 719px) {
  .cut[data-sc-act] { height: auto !important; scroll-margin-top: 0; }
  .cut .sc-stage { position: static; height: auto; overflow: visible; }
  .cut-inner { display: block; height: auto; padding-top: clamp(40px, 6vw, 80px); padding-bottom: 0; }
  .cut-label {
    position: sticky; top: var(--bar); z-index: 2;
    margin: 0 0 12px; padding: 12px 0; background: var(--canvas);
  }
  .cut h2 { margin-bottom: 8px; }
  .cut-run { display: block; }
  .cut-hint { display: block; margin: 4px 0 0; font-size: 0.75rem; }
  #cut-list { margin-top: 0; }
  .cut-total {
    position: sticky; bottom: 0; z-index: 2;
    margin: 0; padding: 14px 0; background: var(--canvas);
  }
  .term { min-height: 44px; padding: 10px 0; gap: 16px; scroll-margin: calc(var(--bar) + 48px) 0 56px; }
}