/* Tobi Sanni portfolio. Static, local DM Sans and portrait, no external runtime resources. */
@font-face{font-family:"DM Sans";src:url("assets/dm-sans-latin.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap}

:root {
  color-scheme: dark;
  --paper: #09090b;
  --surface: #131316;
  --tint: #202024;
  --ink: #fafafa;
  --ink-soft: #d0d0d7;
  --muted: #b2b2bc;
  --rule: #303036;
  --rule-strong: #656570;
  --accent: #a5d6b7;
  --accent-deep: #d3efdd;
  --accent-soft: #1b2b22;
  --grid: rgba(255, 255, 255, .045);
  --warn: #efb079;
  --warn-soft: #251c15;
  --warn-rule: #7e583a;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", "Segoe UI Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --wrap: 72rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  text-wrap: balance;
}

p, ul, ol, dl, dd, figure { margin: 0; }
p { text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
a:hover { color: var(--accent-deep); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  width: min(var(--wrap), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  border-radius: 4px;
}
.skip:focus { top: 1rem; color: #fff; }

/* Shared label style: small monospace caps, used like a drawing title block. */
.eyebrow, .kicker, .sheet-title, .sheet dt, .who-label, .case-meta, .facts dt,
.lookfor h4, .panel-title, .requirement-label, .lane-title, .title-block span,
.creds h3, .c-label, .tag, .doc h2 {
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 2rem;
  min-height: 4.25rem;
  padding-block: .5rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
}
.wordmark:hover { color: var(--ink); }

.mark {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  background: var(--ink);
  color: #fff;
  font: 700 .75rem/1 var(--mono);
  letter-spacing: .04em;
  border-radius: 4px;
  box-shadow: inset 0 -3px 0 var(--accent);
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .95rem;
}

.nav-list a {
  display: inline-block;
  padding: .45rem 0;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav-list a:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }
.nav-list a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }

.nav-list .nav-cta {
  padding: .4rem .9rem;
  color: var(--accent);
  font-weight: 600;
  border: 1px solid var(--accent);
  border-radius: 4px;
}
.nav-list .nav-cta:hover,
.nav-list .nav-cta[aria-current] { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Hero */

.hero { border-bottom: 1px solid var(--rule); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: end;
  padding-block: clamp(3rem, 8vw, 6.5rem) clamp(3rem, 6vw, 5rem);
}

.eyebrow { color: var(--accent); margin-bottom: 1.5rem; }

.hero h1 {
  max-width: 15ch;
  margin-bottom: 1.75rem;
  font-size: clamp(2.15rem, 1.2rem + 3.9vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -.035em;
}

.lede {
  max-width: 36rem;
  color: var(--ink-soft);
  font-size: clamp(1.075rem, 1rem + .35vw, 1.25rem);
  line-height: 1.6;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  margin-top: 2.25rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .8rem 1.3rem;
  background: var(--accent);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  border: 1px solid var(--accent);
  border-radius: 4px;
}
.button:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }

.button--quiet { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.button--quiet:hover { background: var(--surface); color: var(--ink); border-color: var(--ink); }

.text-link { font-weight: 600; }

.file-type {
  padding: .2rem .35rem;
  font: 600 .68rem/1 var(--mono);
  letter-spacing: .06em;
  border: 1px solid currentColor;
  border-radius: 3px;
}

.sheet {
  background: var(--surface);
  border: 1px solid var(--ink);
  border-radius: 4px;
}

.sheet-title {
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--ink);
}

.sheet dl > div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1rem;
  padding: .8rem 1rem;
}
.sheet dl > div + div { border-top: 1px solid var(--rule); }
.sheet dt { color: var(--muted); font-weight: 500; padding-top: .1rem; }
.sheet dd { font-size: .95rem; line-height: 1.5; }

.available::before {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: .5rem;
  background: var(--accent);
  border-radius: 50%;
  vertical-align: .08em;
}

/* Division of labour */

.division {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

.division-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem 3rem;
  padding-block: 3rem;
}

.division h2 { font-size: 1.5rem; letter-spacing: -.02em; }
.division-intro { margin-top: .6rem; color: var(--muted); font-size: .97rem; max-width: 20rem; }

.who { padding-top: 1rem; border-top: 3px solid var(--accent); }
.who--ai { border-top-color: var(--rule-strong); }
.who-label { margin-bottom: .75rem; }

.who ul { padding: 0; list-style: none; }
.who li { position: relative; padding-left: 1.25rem; font-size: .98rem; }
.who li + li { margin-top: .45rem; }
.who li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .78em;
  width: .6rem;
  height: 2px;
  background: var(--accent);
}
.who--ai li::before { background: var(--rule-strong); }
.who-note { margin-top: 1rem; color: var(--muted); font-size: .9rem; }

/* Sections */

.section { padding-block: clamp(3.5rem, 8vw, 6rem); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem 3rem;
  align-items: end;
  margin-bottom: 2.5rem;
}
.section-head > p { max-width: 34rem; color: var(--muted); }

.kicker { color: var(--accent); margin-bottom: .75rem; }

.section h2 {
  font-size: clamp(1.85rem, 1.3rem + 2vw, 2.75rem);
  letter-spacing: -.03em;
}

/* Case index */

.case-index {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  padding: 0;
  list-style: none;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}

.case-index a {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  height: 100%;
  padding: 1rem 1.1rem 1.15rem;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}
.case-index a:hover { background: var(--accent-soft); color: var(--ink); }
.case-index a:focus-visible { outline-offset: -3px; }

.ci-num { color: var(--accent); font: 600 .75rem/1 var(--mono); }
.ci-name { margin-top: .35rem; font-size: 1.02rem; font-weight: 700; }
.ci-desc { color: var(--muted); font-size: .88rem; line-height: 1.45; }

/* Case studies */

.case {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-top: 1.75rem;
  border-top: 2px solid var(--ink);
}

.case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .5rem;
  margin-bottom: .9rem;
  color: var(--muted);
  font-weight: 500;
}
/* Decorative separators; the "/ ''" form keeps them out of the accessibility tree. */
.case-meta > span + span::before { content: "·"; content: "·" / ""; margin-right: .5rem; color: var(--rule-strong); }
.case-num { color: var(--accent); font-weight: 700; }
.case-meta .case-num + span::before { content: "/"; content: "/" / ""; }

.case h3 {
  font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.4rem);
  letter-spacing: -.03em;
}

.case-dek {
  max-width: 40rem;
  margin-top: .6rem;
  color: var(--ink-soft);
  font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem);
  line-height: 1.45;
}

.case-summary { max-width: 40rem; margin-top: 1.25rem; }

.case-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2.5rem, 5vw, 4rem);
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
}
.case-pair .case { margin-top: 0; }

.facts { margin-top: 1.5rem; border-top: 1px solid var(--rule); }
.facts > div {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: .25rem 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--rule);
}
.facts dt { color: var(--muted); padding-top: .15rem; }
.facts dd { font-size: .97rem; }
.facts .is-limit dt { color: var(--warn); }

/* Evidence screenshot */

.evidence { margin-top: 2rem; }

.evidence-caption { display: grid; gap: .85rem; margin-bottom: 1rem; }

.tags { display: flex; flex-wrap: wrap; gap: .5rem; }

.tag {
  display: inline-flex;
  align-items: center;
  padding: .4rem .6rem;
  background: var(--surface);
  font-size: .7rem;
  line-height: 1.2;
  border: 1px solid currentColor;
  border-radius: 3px;
}
.tag--fact { color: var(--accent); }
.tag--warn { color: var(--warn); background: var(--warn-soft); }
.tag--pending { color: var(--muted); }

.notice {
  display: block;
  max-width: 54rem;
  padding: .9rem 1.1rem;
  background: var(--warn-soft);
  font-size: .97rem;
  border: 1px solid var(--warn-rule);
  border-left: 4px solid var(--warn);
  border-radius: 3px;
}
.notice strong { color: var(--warn); }

.shot {
  display: block;
  overflow: hidden;
  background: #0e1012;
  border: 1px solid var(--ink);
  border-radius: 4px;
}
.shot img { width: 100%; }

.shot-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .35rem 1.5rem;
  margin-top: .65rem;
  color: var(--muted);
  font-size: .88rem;
}
.shot-meta a { font-weight: 600; }

.case-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem clamp(2rem, 5vw, 4rem);
  margin-top: 2rem;
}

.requirement {
  max-width: 40rem;
  padding-left: 1rem;
  font-size: 1.08rem;
  line-height: 1.5;
  border-left: 3px solid var(--accent);
}
.requirement-label { display: block; margin-bottom: .3rem; color: var(--accent); }

.lookfor {
  align-self: start;
  padding: 1.25rem 1.25rem .5rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.lookfor h4 { margin-bottom: 1rem; }
.lookfor ol { padding: 0; list-style: none; counter-reset: look; }
.lookfor li {
  position: relative;
  padding: 0 0 1rem 2.4rem;
  font-size: .97rem;
  counter-increment: look;
}
.lookfor li::before {
  content: counter(look);
  position: absolute;
  left: 0;
  top: .05rem;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  font: 600 .75rem/1 var(--mono);
  border: 1px solid var(--ink);
  border-radius: 50%;
}

.ui {
  padding: .05rem .3rem;
  background: var(--tint);
  font-family: var(--mono);
  font-size: .85em;
  border-radius: 2px;
  overflow-wrap: anywhere;
}

/* Case notes */

.notes {
  margin-top: 2rem;
  border-block: 1px solid var(--rule);
}

.notes summary {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .95rem 0;
  color: var(--accent);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.notes summary::-webkit-details-marker { display: none; }
.notes summary::before {
  content: "+";
  display: grid;
  place-items: center;
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  font: 500 1rem/1 var(--mono);
  border: 1px solid currentColor;
  border-radius: 3px;
}
.notes[open] summary::before { content: "\2212"; }
.notes summary:hover { color: var(--accent-deep); }

.notes-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem 2.5rem;
  padding: .5rem 0 1.75rem;
}
.case-pair .notes-body { grid-template-columns: 1fr; }
.notes-body h4 { margin-bottom: .4rem; font-size: .98rem; }
.notes-body p { color: var(--ink-soft); font-size: .95rem; }

/* ENIGMA vocabulary panel */

.panel {
  margin-top: 1.75rem;
  padding: 1.25rem 1.25rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.panel-title { margin-bottom: .9rem; }

.states { display: grid; gap: .6rem; padding: 0; list-style: none; }
.states li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: .75rem;
  align-items: baseline;
  font-size: .95rem;
}
.state-term { color: var(--accent); font: 600 .8rem/1.4 var(--mono); }
.panel-foot { margin-top: 1rem; color: var(--muted); font-size: .85rem; }

/* Pine pending evidence */

.pending {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: .85rem;
  min-height: 13rem;
  margin-top: 1.75rem;
  padding: 1.5rem;
  background:
    repeating-linear-gradient(-45deg, transparent 0 11px, rgba(255, 255, 255, .025) 11px 12px),
    var(--surface);
  border: 1.5px dashed var(--rule-strong);
  border-radius: 4px;
}
.pending p:not(.tag) { max-width: 30rem; font-size: .95rem; }

/* PowerFlex illustrative schematic */

.case-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 2rem clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.schematic {
  margin-top: 1.25rem;
  overflow: hidden;
  background-color: var(--surface);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 22px 22px;
  border: 1px solid var(--ink);
  border-radius: 4px;
}

.lanes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1.25rem;
  padding: 1.5rem 1.25rem 1.75rem;
}

.lane-title { margin-bottom: .8rem; color: var(--muted); }

.flow { padding: 0; list-style: none; }
.flow li {
  position: relative;
  padding: .6rem .7rem;
  background: var(--surface);
  font-size: .9rem;
  line-height: 1.35;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
}
.flow li + li { margin-top: 1.6rem; }
/* Connector line and arrowhead between steps. */
.flow li + li::before {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: calc(-1.6rem - 1px);
  height: calc(1.6rem - 6px);
  border-left: 1px solid var(--ink);
}
.flow li + li::after {
  content: "";
  position: absolute;
  left: calc(1.25rem - 4px);
  top: -7px;
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
  border-top: 6px solid var(--ink);
}
.flow .is-review { font-weight: 600; border: 2px solid var(--accent); }

.title-block {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--surface);
  border-top: 1px solid var(--ink);
}
.title-block span {
  padding: .6rem .75rem;
  color: var(--ink-soft);
  font-size: .7rem;
  font-weight: 500;
}
.title-block span + span { border-left: 1px solid var(--ink); }
.title-block strong { color: var(--ink); font-weight: 700; }

/* Approach */

.approach {
  background: var(--tint);
  border-block: 1px solid var(--rule);
}

.approach-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 2rem clamp(2rem, 6vw, 5rem);
}
.approach-intro { max-width: 26rem; margin-top: 1rem; color: var(--ink-soft); }

.principles { padding: 0; list-style: none; }
.principles li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--rule-strong);
}
.principles li:last-child { border-bottom: 1px solid var(--rule-strong); }
.p-num { color: var(--accent); font: 600 .85rem/1.7 var(--mono); }
.principles h3 { margin-bottom: .35rem; font-size: 1.18rem; }
.principles p { color: var(--ink-soft); font-size: .98rem; }

/* Experience */

.roles { border-top: 2px solid var(--ink); }

.role {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: .5rem 2.5rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--rule);
}
.role-dates { padding-top: .25rem; color: var(--muted); font: 500 .85rem/1.6 var(--mono); }
.role h3 { font-size: 1.35rem; letter-spacing: -.02em; }
.role-title { margin-top: .2rem; color: var(--accent); font-size: .98rem; font-weight: 600; }
.role ul { max-width: 46rem; margin-top: .85rem; padding-left: 1.1rem; }
.role li { color: var(--ink-soft); font-size: .98rem; }
.role li + li { margin-top: .4rem; }
.role li::marker { color: var(--rule-strong); }

.creds {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem 3rem;
  margin-top: 2.75rem;
}
.creds h3 { margin-bottom: .75rem; }

.cred-list { padding: 0; list-style: none; }
.cred-list li { padding: .6rem 0; font-size: .97rem; border-top: 1px solid var(--rule); }

.skills { display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; list-style: none; }
.skills li {
  padding: .25rem .65rem;
  background: var(--surface);
  font-size: .9rem;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
}

/* Contact */

.contact { border-top: 1px solid var(--rule); }

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2rem clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.contact h2 { max-width: 17ch; }
.contact-copy > p:not(.kicker) { max-width: 34rem; margin-top: 1.1rem; color: var(--ink-soft); }

.contact-list { padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.contact-list li { border-bottom: 1px solid var(--rule); }

.contact-list > li > a,
.c-resume {
  display: grid;
  gap: .15rem;
  padding: 1rem 0;
  color: var(--ink);
  text-decoration: none;
}
.contact-list > li > a:hover .c-value { text-decoration: underline; text-decoration-thickness: 2px; }
.contact-list > li > a:focus-visible { outline-offset: -3px; }
.c-label { color: var(--muted); }
.c-value {
  color: var(--accent);
  font-size: 1.2rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.c-links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: 1.05rem; font-weight: 600; }

/* Footer */

.site-footer {
  padding-block: 1.75rem 2.5rem;
  color: var(--muted);
  font-size: .88rem;
  border-top: 1px solid var(--rule);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 2rem;
}
.footer-note { max-width: 32rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }

/* Document pages: resume, privacy, 404 */

.doc { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem); }
.doc-inner { max-width: 48rem; }

.doc-head {
  margin-bottom: .5rem;
  padding-bottom: 1.75rem;
  border-bottom: 2px solid var(--ink);
}
.doc h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); letter-spacing: -.03em; }
.doc-sub { margin-top: .6rem; color: var(--accent); }
.doc-contact { margin-top: .9rem; color: var(--ink-soft); }
.doc-head .actions { margin-top: 1.5rem; }

.doc h2 {
  margin-bottom: 1rem;
  padding: 2.25rem 0 .5rem;
  border-bottom: 1px solid var(--rule);
}
:where(.doc) p { margin-top: 1rem; }
.doc h2 + p { margin-top: 0; }
.entry > p { margin-top: .2rem; }
.doc-lede { font-size: 1.08rem; color: var(--ink-soft); }

.entry + .entry { margin-top: 1.5rem; }
.entry h3 { font-size: 1.12rem; letter-spacing: -.01em; }
.entry-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .1rem 1rem;
  margin-top: .15rem;
  color: var(--muted);
  font-size: .95rem;
}
.entry-meta .dates { font: 500 .82rem/1.8 var(--mono); }

.doc ul { margin-top: .6rem; padding-left: 1.15rem; }
.doc li { font-size: .98rem; }
.doc li + li { margin-top: .4rem; }
.doc li::marker { color: var(--rule-strong); }

.glance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 1.75rem;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}
.glance > div { padding: 1rem 1.1rem; background: var(--surface); }
.glance dt { margin-bottom: .25rem; font-weight: 700; }
.glance dd { color: var(--ink-soft); font-size: .95rem; }

.doc-return { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }

/* Responsive */

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; align-items: start; }
  .sheet { max-width: 34rem; }
  .division-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .division-grid > :first-child { grid-column: 1 / -1; }
  .section-head { grid-template-columns: 1fr; }
  .case-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-pair { grid-template-columns: 1fr; margin-top: 0; }
  .case-pair .case { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
  .case-layout { grid-template-columns: 1fr; }
  .schematic { max-width: 34rem; margin-top: 0; }
  .approach-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 1rem; }
  .site-header { position: static; }
  .nav-list { gap: .1rem 1.15rem; font-size: .92rem; }
  .case-body { grid-template-columns: 1fr; }
  .notes-body { grid-template-columns: 1fr; }
  .role { grid-template-columns: 1fr; gap: .35rem; }
  .creds { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  body { font-size: 1rem; }
  .header-inner { padding-block: .75rem; }
  .nav-list .nav-cta { padding: .35rem .7rem; }
  .actions { flex-direction: column; align-items: stretch; }
  .actions .text-link { align-self: flex-start; padding-block: .25rem; }
  .sheet dl > div, .facts > div, .states li { grid-template-columns: 1fr; gap: .15rem; }
  .division-grid { grid-template-columns: 1fr; padding-block: 2.5rem; }
  .case-index { grid-template-columns: 1fr; }
  .notice { font-size: .93rem; }
  .lookfor { padding: 1.1rem 1rem .4rem; }
  .lanes { grid-template-columns: 1fr; }
  .title-block { grid-template-columns: 1fr; }
  .title-block span + span { border-left: 0; border-top: 1px solid var(--ink); }
  .glance { grid-template-columns: 1fr; }
  .c-value { font-size: 1.05rem; }
}

@media print {
  .site-header, .site-footer, .skip, .actions, .doc-return { display: none; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .wrap { width: 100%; }
  .doc { padding: 0; }
  .doc-inner { max-width: none; }
  .doc h1 { font-size: 22pt; }
  .doc h2 { padding-top: 12pt; font-size: 9pt; }
  .doc li { font-size: 10pt; }
  a { color: #000; text-decoration: none; }
  h2, h3 { break-after: avoid; }
  li, .entry-meta { break-inside: avoid; }
}

/* Owner-directed dark reference treatment. */
body{-webkit-font-smoothing:antialiased}
.site-header{background:#09090be8;backdrop-filter:blur(18px);border-bottom-color:#ffffff0c}
.header-inner{min-height:72px}
.mark{background:#202024;color:#fafafa;border:1px solid #ffffff15;box-shadow:none;border-radius:9px;font-family:var(--sans);font-size:.8rem}
.nav-list{font-size:.9rem;gap:.25rem 1.7rem}
.nav-list a{color:var(--muted)}
.nav-list .nav-cta{border-color:var(--rule);color:var(--ink);border-radius:9px;padding:.5rem 1rem}
.nav-list .nav-cta:hover,.nav-list .nav-cta[aria-current]{color:#09090b;background:var(--ink);border-color:var(--ink)}
.skip,.skip:focus{background:var(--ink);color:#09090b}
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse at 50% 42%,#000 10%,transparent 76%)}
.hero-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:clamp(3rem,7vw,6rem);align-items:center;padding-block:96px 90px;min-height:720px}
.eyebrow,.kicker{font-family:var(--sans);font-size:.86rem;font-weight:500;text-transform:none;letter-spacing:.015em;color:var(--accent)}
.hero h1{font-weight:500;font-size:clamp(2.4rem,4.9vw,4.55rem);line-height:1.06;letter-spacing:-.045em;max-width:12.5ch;margin-bottom:27px;text-wrap:balance}
.lede{font-size:1.12rem;line-height:1.7;color:var(--muted);max-width:34rem}
.hero .actions{gap:.75rem 1.2rem;margin-top:30px}
.button{background:var(--ink);border-color:var(--ink);color:#09090b;border-radius:10px;min-height:49px;padding:.85rem 1.2rem;font-size:.94rem;transition:transform .2s,background .2s,border-color .2s}
.button:hover{background:#dcdce3;border-color:#dcdce3;color:#09090b;transform:translateY(-2px)}
.button--quiet{background:transparent;border-color:var(--rule);color:var(--ink)}
.button--quiet:hover{background:var(--surface);border-color:var(--rule-strong);color:var(--ink)}
.hero .text-link{font-size:.9rem;color:var(--muted);font-weight:500}
.hero-meta{font-size:.79rem;color:var(--muted);margin-top:24px;max-width:31rem}
.motion-toggle{padding:6px 0;margin-top:12px;background:none;border:0;border-bottom:1px solid var(--rule-strong);font:400 .76rem var(--sans);color:var(--muted);cursor:pointer;min-height:32px}
.motion-toggle[hidden]{display:none}
.motion-toggle:hover{color:var(--ink)}
.portrait-area{position:relative;max-width:390px;width:100%;margin:0 auto;padding:0 10px}
.portrait-frame{overflow:hidden;border-radius:25px;border:1px solid #ffffff20;box-shadow:0 24px 90px #0007;background:#161619;aspect-ratio: .91}
.portrait-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.portrait-area figcaption{display:flex;justify-content:space-between;gap:10px;margin-top:16px;font-size:.8rem;color:var(--muted)}
.portrait-area figcaption strong{color:var(--ink);font-weight:500}
.portrait-orbit{position:absolute;inset:-30px -30px -20px;pointer-events:none;z-index:2}
.float-tile{position:absolute;display:grid;place-items:center;width:66px;height:66px;border:1px solid #ffffff0c;border-top-color:#ffffff20;border-radius:18px;background:linear-gradient(145deg,#242427,#141416);box-shadow:inset 0 1px 3px #ffffff07,0 12px 30px #0005;transform:rotate(var(--angle));color:#c8c8d1}
.float-tile svg{width:34px;height:34px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tile-review{left:-1%;top:13%;--angle:-13deg;--delay:-2s;color:var(--accent)}
.tile-code{right:-4%;top:-1%;--angle:12deg;--delay:-5s}
.tile-drawing{right:-6%;bottom:9%;--angle:-10deg;--delay:-1s;width:58px;height:58px}
.division{background:#101012;border-block-color:var(--rule)}
.who,.who--ai{border-top-width:1px}.division h2{font-weight:500}
.case-index{gap:12px;border:0;border-radius:0;background:none;overflow:visible}
.case-index a{border:1px solid var(--rule);border-radius:12px;transition:background .2s,border-color .2s,transform .2s}
.case-index a:hover{background:#19191d;border-color:#50505b;transform:translateY(-3px)}
.case-index a:focus-visible{outline-offset:4px}
.case{border-top:1px solid var(--rule);padding-top:28px}
.section h2,.case h3{font-weight:500;letter-spacing:-.035em}
.case-dek{color:var(--muted)}
.facts dt,.case-meta,.sheet-title,.who-label,.panel-title,.requirement-label,.lookfor h4,.lane-title,.creds h3,.c-label,.tag,.doc h2{letter-spacing:.035em}
.panel,.lookfor,.schematic,.glance{border-color:var(--rule);border-radius:12px}
.notice{border-radius:9px}.shot{border-color:var(--rule);border-radius:12px}
.pending{border-radius:12px}.tag{border-radius:6px}
.notes summary::before{border-radius:6px}.notes{border-block-color:var(--rule)}
.title-block{border-top-color:var(--rule)}.title-block span+span{border-left-color:var(--rule)}
.flow li{border-color:#686875;border-radius:7px}.flow .is-review{border-width:1px}
.flow li+li::before{border-color:var(--muted)}.flow li+li::after{border-top-color:var(--muted)}
.approach{background:#101012}.role{border-top-color:var(--rule)}
.skills li{border-color:var(--rule);border-radius:6px;color:var(--ink-soft)}
.contact-list,.doc-head{border-top-color:var(--rule);border-bottom-color:var(--rule)}
.contact-list{border-top-width:1px}.doc-head{border-bottom-width:1px}
.glance dt{font-weight:500}.doc h1,.entry h3{font-weight:500}
html.motion-enabled .float-tile{animation:portfolio-drift 9s ease-in-out infinite;animation-delay:var(--delay)}
html.motion-enabled .hero-copy,html.motion-enabled .portrait-area{animation:portfolio-arrive .8s ease both}
html.motion-enabled .is-revealed{animation:portfolio-rise .65s ease both}
html.motion-paused *,html.motion-paused *::before,html.motion-paused *::after{animation-play-state:paused!important}
@keyframes portfolio-drift{0%,100%{transform:translateY(0) rotate(var(--angle))}50%{transform:translateY(-12px) rotate(calc(var(--angle) + 4deg))}}
@keyframes portfolio-arrive{from{opacity:.6;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes portfolio-rise{from{transform:translateY(14px)}to{transform:translateY(0)}}
@media(max-width:1050px){.hero-grid{gap:3rem;grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr)}.portrait-area{max-width:330px}.portrait-area figcaption{flex-direction:column;gap:2px}.float-tile{width:55px;height:55px}.tile-drawing{right:-2%}.hero h1{font-size:clamp(2.5rem,5vw,3.6rem)}}
@media(max-width:760px){.hero-grid{grid-template-columns:1fr;padding-block:44px 50px;min-height:0;gap:30px}.portrait-area{order:-1;max-width:190px;padding:0}.portrait-frame{aspect-ratio:1;border-radius:20px}.portrait-area figcaption{display:none}.portrait-orbit{inset:-18px -34px}.float-tile{width:43px;height:43px;border-radius:12px}.float-tile svg{width:25px;height:25px}.tile-review{left:0;top:18%}.tile-code{right:0;top:0}.tile-drawing{right:-2%;bottom:4%;width:40px;height:40px}.hero-copy{text-align:center}.hero h1{max-width:15ch;margin:0 auto 24px;font-size:clamp(2.15rem,7vw,3rem)}.eyebrow{font-size:.77rem;margin-bottom:20px}.lede{margin-inline:auto;font-size:1rem;line-height:1.65;max-width:34rem}.hero .actions{justify-content:center}.hero-meta{margin:22px auto 0}.motion-toggle{margin-top:12px}.nav-list{font-size:.85rem;gap:.1rem 1.05rem}.header-inner{min-height:64px}.hero::before{background-size:40px 40px}}
@media(max-width:520px){.hero-grid{padding-top:32px;gap:26px}.portrait-area{max-width:156px}.portrait-orbit{inset:-12px -32px}.hero h1{font-size:2.15rem;max-width:14ch}.hero .actions{flex-direction:row;align-items:center;gap:12px}.hero .actions .button{flex:1;padding:.85rem .8rem;font-size:.84rem;white-space:nowrap}.hero .actions .text-link{align-self:center;width:100%;text-align:center}.hero-meta{font-size:.73rem}.header-inner{gap:14px}.nav-list{gap:.1rem 1rem;justify-content:space-between;width:100%;font-size:.8rem}.site-header nav{width:100%}.nav-list .nav-cta{padding:.3rem .65rem}.case-index{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.case-index a{padding:15px}.ci-name{font-size:.96rem}.ci-desc{font-size:.8rem}.title-block span+span{border-left:0;border-top-color:var(--rule)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}.motion-toggle{display:none}}
@media print{:root{color-scheme:light;--paper:#fff;--surface:#fff;--tint:#eee;--ink:#000;--ink-soft:#222;--muted:#444;--rule:#ccc;--rule-strong:#888;--accent:#000;--accent-deep:#000}.portrait-orbit,.motion-toggle{display:none}body{background:#fff;color:#000}.site-header,.site-footer,.actions{display:none}.hero::before{display:none}}

/* Secondary examples keep the professional and software case studies primary. */
.supporting{margin-top:clamp(3.5rem,7vw,5.5rem);padding-top:2rem;border-top:1px solid var(--rule)}
.supporting>h3{font-size:clamp(1.6rem,3vw,2.2rem);margin-top:.65rem}
.supporting-intro{max-width:44rem;color:var(--ink-soft);margin-top:.85rem}
.supporting-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem;margin-top:2rem;align-items:start}
.supporting-case>h4{font-size:1.35rem;margin:.8rem 0}.supporting-case>p{max-width:42rem}
.supporting-notes{padding:1rem 0}.supporting-notes p+p{margin-top:.85rem}
.supporting-case .evidence{margin-top:.5rem}.supporting-case .evidence-caption{font-size:.9rem}
@media(max-width:767px){.supporting-grid{grid-template-columns:1fr;gap:2rem}}