/* Direction K, "the trace", round 10: one family in two widths, a shared teal for actions,
   and a colour field per domain that carries the trace. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/BricolageGrotesque-latin.woff2") format("woff2");
  font-weight: 200 800; font-stretch: 75% 100%; font-style: normal; font-display: swap;
}
:root {
  --paper:#f3f4f0; --ink:#1c2024; --ink2:#4e565c; --rule:#c9cfcb; --sig:#0f6e8c; --sig-ink:#ffffff; --btn:#0f6e8c; --btn-ink:#ffffff;
  /* domain field (light): a solid colour, the line drawn on it, and a text-safe variant for paper */
  --dom:#23409a; --on-dom:#ffffff; --dom-ink:#23409a; --dom-area:rgba(255,255,255,.14);
  --field-grid:transparent;
  --measure:62ch; --gutter:clamp(20px, 5vw, 64px);
  color-scheme: light dark;
}
.d-build { --dom:#d0901f; --on-dom:#1c2024; --dom-ink:#7f5300; --dom-area:rgba(28,32,36,.12) }
.d-io    { --dom:#5e3a8c; --on-dom:#ffffff; --dom-ink:#5e3a8c; --dom-area:rgba(255,255,255,.14) }
.d-pa    { --dom:#9a2347; --on-dom:#ffffff; --dom-ink:#9a2347; --dom-area:rgba(255,255,255,.14) }
.d-me    { --dom:#2a7f50; --on-dom:#ffffff; --dom-ink:#226b43; --dom-area:rgba(255,255,255,.14) }

/* dark: a deep field of the domain colour with an instrument grid, and a bright line */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) section.book::before, :root:not([data-theme="light"]) .d-io #leadership::before, :root:not([data-theme="light"]) .d-me #shape::before { background:color-mix(in srgb, var(--dom) 60%, var(--paper)) }
  :root:not([data-theme="light"]) section.two > .aside { background:color-mix(in srgb, var(--dom) 70%, var(--paper)) }
  :root:not([data-theme="light"]) .btn { background:var(--on-dom); color:var(--dom) }
  :root:not([data-theme="light"]) { --paper:#151a1c; --btn:#0e5a72; --btn-ink:#e6f5fb; --ink:#e8ebe6; --ink2:#a8b0ab; --rule:#323a3d; --sig:#5fb4d1; --sig-ink:#0e1416;
    --dom:#1b2b63; --on-dom:#9fb6ff; --dom-ink:#9fb6ff; --dom-area:rgba(159,182,255,.16); --field-grid:rgba(255,255,255,.07) }
  :root:not([data-theme="light"]) .d-build { --dom:#3a2608; --on-dom:#f2b84b; --dom-ink:#f2b84b; --dom-area:rgba(242,184,75,.16) }
  :root:not([data-theme="light"]) .d-io    { --dom:#3a2157; --on-dom:#d4b3ff; --dom-ink:#d4b3ff; --dom-area:rgba(212,179,255,.16) }
  :root:not([data-theme="light"]) .d-pa    { --dom:#b0284f; --on-dom:#ffffff; --dom-ink:#ff9fbc; --dom-area:rgba(255,159,188,.16) }
  :root:not([data-theme="light"]) .d-me    { --dom:#123f27; --on-dom:#6fd69a; --dom-ink:#6fd69a; --dom-area:rgba(111,214,154,.16) }
}
:root[data-theme="dark"] { --paper:#151a1c; --btn:#0e5a72; --btn-ink:#e6f5fb; --ink:#e8ebe6; --ink2:#a8b0ab; --rule:#323a3d; --sig:#5fb4d1; --sig-ink:#0e1416;
  --dom:#1b2b63; --on-dom:#9fb6ff; --dom-ink:#9fb6ff; --dom-area:rgba(159,182,255,.16); --field-grid:rgba(255,255,255,.07) }
:root[data-theme="dark"] .d-build { --dom:#3a2608; --on-dom:#f2b84b; --dom-ink:#f2b84b; --dom-area:rgba(242,184,75,.16) }
:root[data-theme="dark"] .d-io    { --dom:#3a2157; --on-dom:#d4b3ff; --dom-ink:#d4b3ff; --dom-area:rgba(212,179,255,.16) }
:root[data-theme="dark"] .d-pa    { --dom:#b0284f; --on-dom:#ffffff; --dom-ink:#ff9fbc; --dom-area:rgba(255,159,188,.16) }
:root[data-theme="dark"] .d-me    { --dom:#123f27; --on-dom:#6fd69a; --dom-ink:#6fd69a; --dom-area:rgba(111,214,154,.16) }

* { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; overflow-x:clip }
body { overflow-x:clip }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif; font-optical-sizing:auto; font-size:17px; line-height:1.55 }
a { color:inherit }
a:focus-visible, button:focus-visible { outline:3px solid var(--sig); outline-offset:3px }
.wrap { max-width:1160px; margin:0 auto; padding:0 var(--gutter) }

/* the second voice: the same family, condensed, with tabular figures, for labels and meta */
.top .name small, .trace figcaption, .trace .labels, .list em, .aside strong, .book .how strong {
  font-stretch:78%; font-variant-numeric:tabular-nums; letter-spacing:.01em }

/* header */
.top { display:grid; grid-template-columns:1fr auto auto; align-items:baseline; column-gap:22px; padding:22px 0 0 }
.top .name { font-weight:640; text-decoration:none; font-size:17px }
.top .name small { color:var(--dom-ink); font-weight:560; margin-left:10px; font-size:16px }
.top nav { display:flex; gap:22px; flex-wrap:wrap }
.top nav a { color:var(--ink2); text-decoration:none; font-size:16px }
.top nav a:hover { color:var(--ink) }
.top a.book { color:var(--dom-ink); font-weight:640; text-decoration:none; font-size:16px }

/* hero: copy left, the domain's field right, the aside under the field */
.hero { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:56px; row-gap:28px; padding:64px 0 40px; align-items:start; grid-template-rows:auto 1fr }
.hero > div:not(.aside) { grid-column:1; grid-row:1 / span 2 }
.hero .trace { grid-column:2; grid-row:1 }
.hero .aside { grid-column:2; grid-row:2 }
.hero h1 { font-size:clamp(40px, 6.1vw, 78px); line-height:.98; letter-spacing:-.035em; font-weight:720; font-stretch:80%; margin:0 0 26px; max-width:14ch; text-wrap:balance }
.hero .position { font-size:19px; line-height:1.5; color:var(--ink2); max-width:var(--measure); margin:0 0 30px }
.btn { display:inline-block; background:var(--dom); color:var(--on-dom); text-decoration:none; font-size:17px; font-weight:640; padding:15px 24px; border-radius:7px }
.btn:hover { filter:brightness(.95) }
.terms { display:block; margin-top:12px; font-size:14px; color:var(--ink2); max-width:50ch }
.aside { font-size:16px; line-height:1.5; color:var(--ink2); max-width:44ch }
.aside strong { color:var(--ink); font-weight:640; display:block; margin-bottom:6px; font-size:17px }
.aside a { color:var(--ink) }

/* the trace: the memorable device, a field of the domain's colour with the line drawn on it */
.trace { margin:0; padding:20px 22px 18px; color:var(--on-dom);
  background-color:var(--dom);
  background-image:linear-gradient(var(--field-grid) 1px, transparent 1px), linear-gradient(90deg, var(--field-grid) 1px, transparent 1px);
  background-size:24px 24px }
.trace figcaption { font-size:14px; font-weight:640; margin:0 0 14px; color:var(--on-dom) }
.trace svg { display:block; width:100%; height:150px; overflow:visible }
.trace path.line { fill:none; stroke:var(--on-dom); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke }
.trace path.area { fill:var(--dom-area); stroke:none }
.trace .labels { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:4px 18px; margin-top:16px; font-size:14px; line-height:1.3; counter-reset:step; color:var(--on-dom) }
.trace .labels span::before { counter-increment:step; content:counter(step) "  "; font-weight:720; opacity:.7 }

/* sections */
section { padding:64px 0 24px }
section h2 { font-size:clamp(28px, 3.3vw, 40px); line-height:1.08; letter-spacing:-.025em; font-weight:640; font-stretch:82%; margin:0 0 26px; max-width:24ch }
.list { list-style:none; margin:0; padding:0; border-top:3px solid var(--dom); max-width:var(--measure) }
.list li { display:grid; grid-template-columns:minmax(0,1fr) max-content; gap:24px; padding:18px 0; border-top:1px solid var(--rule); max-width:var(--measure) }
.list b { font-weight:640; font-size:17px }
.list a { text-decoration:none }
.list a:hover { color:var(--sig) }
.list span { text-wrap:pretty; display:block; color:var(--ink2); margin-top:4px; font-size:16px }
.list em::before { content:""; display:inline-block; width:20px; height:10px; margin-right:7px; vertical-align:0; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M1 9H6L8 5H13L15 1H19' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M1 9H6L8 5H13L15 1H19' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat }
.list li.no em { color:var(--ink2) }
.list li.no em::before { width:14px; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M2 2L12 8M12 2L2 8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M2 2L12 8M12 2L2 8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat }
.list em { font-style:normal; color:var(--dom-ink); font-weight:640; text-align:right; font-size:16px; padding-top:2px; white-space:nowrap }
.two { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:56px; row-gap:0 }
/* lists beside an aside: meta goes under the title so summaries keep a prose measure */
.two .list li { grid-template-columns:minmax(0,1fr); gap:4px }
.two .list em { text-align:left; order:1; padding-top:4px }
section.two > .aside { align-self:start; position:sticky; top:24px; padding:18px 20px; color:var(--ink); border-top:3px solid var(--dom); background:color-mix(in srgb, var(--dom) 12%, var(--paper)) }
.d-build section.two > .aside { background:color-mix(in srgb, var(--dom) 24%, var(--paper)) }
:root[data-theme="dark"] section.book::before, :root[data-theme="dark"] .d-io #leadership::before, :root[data-theme="dark"] .d-me #shape::before { background:color-mix(in srgb, var(--dom) 60%, var(--paper)) }
:root[data-theme="dark"] section.two > .aside { background:color-mix(in srgb, var(--dom) 70%, var(--paper)) }
section.two > h2 { grid-column:1 / -1 }
section.book { position:relative; z-index:0; margin-top:48px; padding:48px 0 44px }
section.book::before { content:""; position:absolute; z-index:-1; inset:0 calc(50% - 50vw); background:color-mix(in srgb, var(--dom) 12%, var(--paper)); border-top:3px solid var(--dom) }
.d-build section.book::before { background:color-mix(in srgb, var(--dom) 24%, var(--paper)) }
section.book .how strong, section.book p { color:var(--ink) }
.book p { max-width:var(--measure); margin:0 0 18px; color:var(--ink2) }
.book p.first { color:var(--ink); font-size:clamp(24px, 2.6vw, 32px); line-height:1.15; letter-spacing:-.02em; font-weight:640; font-stretch:82% }
.book .how { font-size:16px; color:var(--ink2); align-self:start; line-height:1.5 }
.book .how strong { display:block; color:var(--ink); font-weight:640; margin-bottom:6px; font-size:17px }

footer { margin-top:48px; padding:22px 0 30px; border-top:1px solid var(--rule); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:14px; color:var(--ink2) }
footer a { color:var(--ink2) }
.theme { display:inline-flex; gap:8px; align-items:center }
.theme button { background:none; border:1px solid var(--rule); color:var(--ink2); border-radius:6px; padding:4px 9px; font:inherit; font-size:14px; cursor:pointer }
.theme button[aria-pressed="true"] { border-color:var(--sig); color:var(--ink) }


/* four faces: one system, four compositions */
/* .ai keeps the instrument plate in the right column (the default above) */

/* .build: the ochre field runs full-bleed behind the whole hero, like a site hoarding */
.d-build .hero { position:relative; z-index:0; padding:56px 0 52px; margin-top:28px }
.d-build .hero::before { content:""; position:absolute; z-index:-1; top:0; bottom:0; left:calc(50% - 50vw); right:calc(50% - 50vw); background:var(--dom) }
.d-build .hero, .d-build .hero .position, .d-build .hero .terms, .d-build .hero .aside, .d-build .hero .aside a, .d-build .hero .aside strong { color:var(--on-dom) }
.d-build .hero .trace { background:transparent; padding:0 }
.d-build .hero .trace path.area { fill:rgba(28,32,36,.10) }
.d-build .btn { background:var(--on-dom); color:var(--dom) }
/* dark: the field is deep, so the button inverts to the bright line colour */
:root[data-theme="dark"] .btn { background:var(--on-dom); color:var(--dom) }
:root[data-theme="dark"] .d-build .hero .trace path.area { fill:rgba(242,184,75,.14) }

/* every hero opens on a colour field: tinted ground for .ai .io .me, solid for .build, carbon for .pa */
.d-ai .hero, .d-io .hero, .d-me .hero, .d-pa .hero { position:relative; z-index:0; margin-top:28px; padding-top:56px; padding-bottom:52px }
.d-ai .hero::before, .d-io .hero::before, .d-me .hero::before { content:""; position:absolute; z-index:-1; top:0; bottom:0; left:calc(50% - 50vw); right:calc(50% - 50vw); background:color-mix(in srgb, var(--dom) 11%, var(--paper)) }
:root[data-theme="dark"] .d-ai .hero::before, :root[data-theme="dark"] .d-io .hero::before, :root[data-theme="dark"] .d-me .hero::before { background:color-mix(in srgb, var(--dom) 45%, var(--paper)) }
:root[data-theme="dark"] .d-build .hero h1 { color:var(--ink) }

/* .ai: the plate runs tall beside the headline */
.d-ai .hero .trace svg { height:190px }

/* .io: the legend sits under the steps of the line, edge to edge */
.d-io .hero .trace { display:block; grid-column:1 / -1; grid-row:2; margin:0 0 30px; padding:24px 26px 20px }
.d-io .hero .trace svg { height:120px }
.d-io .hero .trace .labels { display:grid; grid-template-columns:31% 34% 35%; gap:0; margin-top:12px }
.d-io .hero .trace .labels span { padding-left:2px }

/* .build: the process steps climb as a staircase row */
.d-build #how { grid-template-columns:1fr }
.d-build #how .list { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); column-gap:20px; border-top:0; max-width:none; align-items:end }
.d-build #how .list li { display:flex; flex-direction:column; gap:6px; max-width:none; border-top:3px solid var(--dom-ink); padding:14px 0 0 }
.d-build #how .list li:nth-child(1) { margin-top:96px } .d-build #how .list li:nth-child(2) { margin-top:64px }
.d-build #how .list li:nth-child(3) { margin-top:32px }
.d-build #how .list em { order:-1; text-align:left }
.d-build #how > .aside { position:static; margin-top:28px; max-width:none }

/* .io: the record hangs on a vertical timeline spine with a node per entry */
.d-io #record .list { position:relative; border-top:0; padding-left:28px }
.d-io #record .list::before { content:""; position:absolute; left:7px; top:10px; bottom:10px; width:2px; background:var(--dom-ink) }
.d-io #record .list li { position:relative; border-top:0; padding:10px 0 22px }
.d-io #record .list li::before { content:""; position:absolute; left:-27px; top:16px; width:14px; height:14px; border-radius:50%; background:var(--paper); box-shadow:inset 0 0 0 3px var(--dom-ink) }
.d-io #record .list li:first-child::before { background:var(--dom-ink) }

/* .pa: a carbon instrument field behind the whole hero, the garnet plate on it */
.d-pa .hero::before { content:""; position:absolute; z-index:-1; top:0; bottom:0; left:calc(50% - 50vw); right:calc(50% - 50vw); background-color:#14171c;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size:24px 24px }
.d-pa .hero, .d-pa .hero .position, .d-pa .hero .terms, .d-pa .hero .aside { color:#dfe3ea }
.d-pa .hero h1, .d-pa .hero .aside strong { color:#ffffff }
.d-pa .hero .aside.status { border-top:3px solid #ff9fbc; padding-top:14px }
.d-pa .btn { background:#ff9fbc; color:#3a0d1c }
.d-pa .hero .trace { background-color:var(--dom) }
:root[data-theme="dark"] .d-pa .hero::before { background-color:#0c0e11 }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .d-ai .hero::before, :root:not([data-theme="light"]) .d-io .hero::before, :root:not([data-theme="light"]) .d-me .hero::before { background:color-mix(in srgb, var(--dom) 45%, var(--paper)) }
  :root:not([data-theme="light"]) .d-build .hero h1 { color:var(--ink) }
  :root:not([data-theme="light"]) .d-pa .hero::before { background-color:#0c0e11 }
  :root:not([data-theme="light"]) .d-pa .top::before { background-color:#0c0e11 }
  :root:not([data-theme="light"]) .d-build .hero .trace path.area { fill:rgba(242,184,75,.14) }
}

/* .io: the record runs as a full-width band directly under the headline, like a ruler */
.d-io .hero { grid-template-rows:none; row-gap:0 }
.d-io .hero > div:not(.aside) { display:contents }
.d-io .hero h1 { grid-column:1 / -1; grid-row:1; max-width:22ch; margin-bottom:30px }
.d-io .hero .aside.open-to { grid-column:2; grid-row:3 / span 3; align-self:start }
.d-io .hero .position { grid-column:1; grid-row:3 }
.d-io .hero .btn { grid-column:1; grid-row:4; justify-self:start }
.d-io .hero .terms { grid-column:1; grid-row:5 }

/* .me: mirrored, the plate leads on the left and the offer sits on the right */
.d-me .hero { grid-template-columns:minmax(0,5fr) minmax(0,7fr) }
.d-me .hero > div:not(.aside) { grid-column:2 }
.d-me .hero .trace { grid-column:1; grid-row:1 }
.d-me .hero .aside { grid-column:1; grid-row:2 }

/* below the hero: a structural gesture per domain, not only a hue */
/* single-list sections: a sticky side heading with the list beside it, so no column is left empty */
section:not(.two):not(.book) { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); column-gap:56px; align-items:start }
section:not(.two):not(.book) > h2 { position:sticky; top:24px; margin:0; max-width:14ch }
section:not(.two):not(.book) .list, section:not(.two):not(.book) .list li { max-width:none }

/* .ai: the investigation sits on a deep instrument field, full bleed */
.d-ai #research { position:relative; z-index:0; margin:64px 0 0; padding:64px 0 56px; color:#e8ecf7 }
.d-ai #research::before { content:""; position:absolute; z-index:-1; inset:0 calc(50% - 50vw); background-color:#16244f;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size:24px 24px }
.d-ai #research h2 { color:#ffffff }
.d-ai #research p { color:#c9d3ee !important }
.d-ai #research > .aside { position:static; background:rgba(255,255,255,.08); border-top-color:#9fb6ff; color:#e8ecf7 }
.d-ai #research > .aside strong, .d-ai #research > .aside a { color:#ffffff }

/* .io and .me: the middle section on a full-bleed ground of the domain tint */
.d-io #leadership, .d-me #shape { position:relative; z-index:0; margin-top:64px; padding:60px 0 52px }
.d-io #leadership::before, .d-me #shape::before { content:""; position:absolute; z-index:-1; inset:0 calc(50% - 50vw); background:color-mix(in srgb, var(--dom) 13%, var(--paper)) }
.d-io #leadership p, .d-me #shape p { color:var(--ink) !important }
.d-io #leadership > .aside, .d-me #shape > .aside { position:static; background:var(--paper) }

/* round 16: skeletons that differ per domain, not only hue */
/* .build and .pa: the field runs up under the header, so the page opens on colour */
.d-build .top, .d-pa .top { position:relative; z-index:0; padding-bottom:22px }
.d-build .top::before, .d-pa .top::before { content:""; position:absolute; z-index:-1; inset:0 calc(50% - 50vw) }
.d-build .top::before { background:var(--dom) }
.d-build .top .name, .d-build .top nav a, .d-build .top a.book, .d-build .top .name small { color:var(--on-dom) }
.d-build .hero { margin-top:0 }
.d-pa .top::before { background:#14171c }
.d-pa .top .name, .d-pa .top nav a { color:#dfe3ea }
.d-pa .top a.book, .d-pa .top .name small { color:#ff9fbc }
.d-pa .top .name { font-size:22px; font-weight:720; font-stretch:78%; letter-spacing:-.01em }
.d-pa .hero { margin-top:0 }
:root[data-theme="dark"] .d-pa .top::before { background:#0c0e11 }

/* .build: the staircase plate bleeds off the right edge of the page */
.d-build .hero .trace { margin-right:calc(50% - 50vw); padding-right:calc(50vw - 50%) }

/* .me: a deeper green ground, and the plate breaks out below the band */
.d-me .hero::before { background:color-mix(in srgb, var(--dom) 17%, var(--paper)) }
.d-me .hero .trace { margin-bottom:-96px; position:relative; z-index:1; box-shadow:0 0 0 6px var(--paper) }
.d-me .hero .aside { margin-top:96px }

/* .pa: what exists today reads as a spec sheet: a garnet header bar and three columns */
.d-pa #status .list { border-top:8px solid var(--dom) }
.d-pa #status .list li { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,6fr) minmax(0,3fr); gap:20px; align-items:baseline }
.d-pa #status .list li > div { display:contents }
.d-pa #status .list b { font-size:17px }
.d-pa #status .list span { margin-top:0 }
.d-pa #status .list em { text-align:right; white-space:normal }
.d-pa #status .list a { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px }

/* round 17 */

/* containers differ: .io and .me draw the figure straight on their ground, no panel */
.d-io .hero .trace, .d-me .hero .trace { background:transparent; padding-left:0; padding-right:0; box-shadow:none; color:var(--ink) }
.d-io .hero .trace figcaption, .d-me .hero .trace figcaption, .d-io .hero .trace .labels, .d-me .hero .trace .labels { color:var(--ink) }
.d-io .hero .trace path.line, .d-me .hero .trace path.line { stroke:var(--dom-ink); stroke-width:4 }
.d-io .hero .trace path.area, .d-me .hero .trace path.area { fill:color-mix(in srgb, var(--dom) 22%, transparent) }
.d-me .hero .trace { margin-bottom:0 } .d-me .hero .aside { margin-top:0 }
.d-io .hero .trace { border-top:3px solid var(--dom); border-bottom:3px solid var(--dom); padding-top:18px; padding-bottom:16px }
/* .io links and focus use its own violet ink, never the shared cyan */
.d-io { --sig:var(--dom-ink) }

/* stronger grounds on .io and .me */
.d-io .hero::before { background:color-mix(in srgb, var(--dom) 18%, var(--paper)) }
.d-me .hero::before { background:color-mix(in srgb, var(--dom) 22%, var(--paper)) }

/* one solid domain band below the fold on .io and .me */
.d-io #leadership::before, .d-me #shape::before { background:var(--dom) !important }
.d-io #leadership, .d-me #shape, .d-io #leadership h2, .d-me #shape h2 { color:var(--on-dom) }
.d-io #leadership p, .d-me #shape p { color:var(--on-dom) !important }
.d-io #leadership > .aside, .d-me #shape > .aside { background:rgba(255,255,255,.12); border-top-color:var(--on-dom); color:var(--on-dom) }
.d-io #leadership > .aside strong, .d-io #leadership > .aside a, .d-me #shape > .aside strong, .d-me #shape > .aside a { color:var(--on-dom) }

/* .build: the steps descend from the heading, so week 1 is read first */
.d-build #how .list { align-items:start }
.d-build #how .list li:nth-child(1) { margin-top:0 } .d-build #how .list li:nth-child(2) { margin-top:32px }
.d-build #how .list li:nth-child(3) { margin-top:64px } .d-build #how .list li:nth-child(4) { margin-top:96px }

/* .pa: the stage is the first line in the copy column on desktop */
.d-pa .hero { grid-template-rows:auto auto 1fr }
.d-pa .hero .aside.status { grid-column:1; grid-row:1; max-width:none; padding:0 0 14px; border-top:0; border-bottom:2px solid #ff9fbc }
.d-pa .hero > div:not(.aside) { grid-row:2 / span 2 }
.d-pa .hero .trace { grid-row:1 / span 3 }

/* dark .build: body text in light ink, amber kept for headline accents, line and button */
:root[data-theme="dark"] .d-build .hero .position, :root[data-theme="dark"] .d-build .hero .terms, :root[data-theme="dark"] .d-build .hero .aside, :root[data-theme="dark"] .d-build .hero .aside strong, :root[data-theme="dark"] .d-build .hero .aside a { color:var(--ink) }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .d-build .hero .position, :root:not([data-theme="light"]) .d-build .hero .terms, :root:not([data-theme="light"]) .d-build .hero .aside, :root:not([data-theme="light"]) .d-build .hero .aside strong, :root:not([data-theme="light"]) .d-build .hero .aside a { color:var(--ink) }
}

/* round 18: a different drawing per domain */
.trace .plot { position:relative }
.trace path.bars { fill:var(--on-dom); opacity:.88 }
.trace .node { position:absolute; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; background:var(--paper); box-shadow:inset 0 0 0 4px var(--dom-ink) }
.trace .node:first-of-type { background:var(--dom-ink) }
/* .io: the colour is a field again, and the record is filled solid under its line */
.d-io .hero::before { background:color-mix(in srgb, var(--dom) 26%, var(--paper)) }
.d-io .hero .trace path.area { fill:color-mix(in srgb, var(--dom) 55%, transparent) }
/* dark: text on the solid bands is light ink, and .pa's grid takes a crimson cast */
:root[data-theme="dark"] .d-io #leadership p, :root[data-theme="dark"] .d-me #shape p { color:var(--ink) !important }
:root[data-theme="dark"] .d-pa .hero::before { background-image:linear-gradient(rgba(255,159,188,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,159,188,.07) 1px, transparent 1px) }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .d-io #leadership p, :root:not([data-theme="light"]) .d-me #shape p { color:var(--ink) !important }
  :root:not([data-theme="light"]) .d-pa .hero::before { background-image:linear-gradient(rgba(255,159,188,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,159,188,.07) 1px, transparent 1px) }
}

/* round 19 */
/* .me: the engagement drawn as a bracket from fit check to done */
.trace path.bracket { fill:none; stroke:var(--dom-ink); stroke-width:4; stroke-linecap:square; stroke-linejoin:miter; vector-effect:non-scaling-stroke }
/* .build: the steps sit on an ochre band of their own, echoing the hero bars */
.d-build #how { position:relative; z-index:0; padding:56px 0 48px; margin-top:0 }
.d-build #how::before { content:""; position:absolute; z-index:-1; inset:0 calc(50% - 50vw); background:color-mix(in srgb, var(--dom) 22%, var(--paper)) }
:root[data-theme="dark"] .d-build #how::before { background:color-mix(in srgb, #f2b84b 10%, var(--paper)) }
/* .me: yes and no read as two columns, colour-coded */
.d-me #fit .list { display:grid; grid-template-columns:1fr 1fr; column-gap:40px; grid-auto-flow:row dense; border-top:0 }
.d-me #fit .list li { grid-column:1; border-top:3px solid var(--dom-ink) }
.d-me #fit .list li.no { grid-column:2; border-top:3px solid var(--rule) }
.d-me #fit .list li { grid-template-columns:minmax(0,1fr); gap:4px }
.d-me #fit .list em { text-align:left; order:1; white-space:normal; padding-top:4px }
/* secondary text on tinted grounds moves toward full ink, so it holds 4.5:1 on the strongest tint in both themes */
.d-ai .hero, .d-io .hero, .d-me .hero, section.book, .d-build #how { --ink2:color-mix(in srgb, var(--ink) 35%, #4e565c) }
:root[data-theme="dark"] .d-ai .hero, :root[data-theme="dark"] .d-io .hero, :root[data-theme="dark"] .d-me .hero, :root[data-theme="dark"] section.book, :root[data-theme="dark"] .d-build #how { --ink2:color-mix(in srgb, var(--ink) 40%, #a8b0ab) }
/* platformalchemist: the long button label never splits */
.d-pa .btn { white-space:nowrap }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .d-ai .hero, :root:not([data-theme="light"]) .d-io .hero, :root:not([data-theme="light"]) .d-me .hero, :root:not([data-theme="light"]) section.book, :root:not([data-theme="light"]) .d-build #how { --ink2:color-mix(in srgb, var(--ink) 40%, #a8b0ab) }
  :root:not([data-theme="light"]) .d-build #how::before { background:color-mix(in srgb, #f2b84b 10%, var(--paper)) }
}

/* round 21: the step glyph marks stages only (build steps, the fit list), not plain dates or topics */
.list em::before { display:none }
.d-build #how .list em::before, .d-me #fit .list em::before { display:inline-block }

/* round 20 */
/* .me: the bracket fills its column, heavier, with each stage named at its tick */
.d-me .hero .trace svg { height:130px }
.d-me .hero .trace path.bracket { stroke-width:5 }
.d-me .hero .trace .labels { grid-template-columns:var(--tick-cols, repeat(2, minmax(0,1fr))); gap:0; margin-top:0 }
.d-me .hero .trace .labels span { padding:4px 8px 0 6px }
/* platformalchemist: the crimson plate on the carbon grid, inside the column; its steps read in one order */
.d-pa .hero .trace .labels { grid-template-columns:1fr }
.d-pa .hero .trace svg { height:170px }
.d-pa .hero h1 { max-width:18ch }
/* dark .build: the amber field survives as a panel behind the bars */
:root[data-theme="dark"] .d-build .hero .trace { background:#f2b84b; padding:20px 22px; margin-right:0 }
:root[data-theme="dark"] .d-build .hero .trace path.bars { fill:#1d1609 }
:root[data-theme="dark"] .d-build .hero .trace figcaption, :root[data-theme="dark"] .d-build .hero .trace .labels { color:#1d1609 }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .d-build .hero .trace { background:#f2b84b; padding:20px 22px; margin-right:0 }
  :root:not([data-theme="light"]) .d-build .hero .trace path.bars { fill:#1d1609 }
  :root:not([data-theme="light"]) .d-build .hero .trace figcaption, :root:not([data-theme="light"]) .d-build .hero .trace .labels { color:#1d1609 }
}

/* round 22 */
/* the domain mark: each site's own figure, drawn small beside the wordmark */
.top .name .mark { display:inline-block; width:34px; height:16px; margin-right:10px; vertical-align:-2px; overflow:visible }
.mark path.line, .mark path.bracket { fill:none; stroke:var(--dom-ink); stroke-width:2.2; vector-effect:non-scaling-stroke; stroke-linejoin:round }
.mark path.area { fill:color-mix(in srgb, var(--dom-ink) 28%, transparent) }
.mark path.bars { fill:var(--dom-ink) }
.mark path.rule { fill:none; stroke:var(--dom-ink); stroke-width:2.2; vector-effect:non-scaling-stroke }
.mark path.cells { fill:var(--dom-ink) }
.d-pa .top .mark path.cells { fill:#ff9fbc }
.d-build .top .mark path.bars { fill:var(--on-dom) }
.d-pa .top .mark path.line { stroke:#ff9fbc } .d-pa .top .mark path.area { fill:rgba(255,159,188,.25) }

/* .io and .me: the hero field itself carries the domain colour, mixed toward white, not grey paper */
.d-io .hero::before { background:#c4b2ea }
.d-me .hero::before { background:#a6dfba }

/* .build: the asides top right, the stage bars under them on a deeper amber panel, filling the right column */
.d-build .hero > div:not(.aside) { grid-column:1; grid-row:1 / span 2 }
.d-build .hero .aside { grid-column:2; grid-row:1; align-self:start }
.d-build .hero .trace { grid-column:2; grid-row:2; align-self:start; margin:8px 0 0; padding:18px 20px 16px; background:#b27612 }
.d-build .hero .trace svg { height:120px }
.d-build .hero .trace path.bars { fill:#1c2024 }
.d-build .hero .trace figcaption, .d-build .hero .trace .labels { color:#1c2024 }
.d-build .hero .trace .labels { grid-template-columns:repeat(2, minmax(0,1fr)) }
.d-build .hero { grid-template-rows:auto 1fr }

/* .build lower bands in its own palette: ochre toward white, not cream */
.d-build #how::before, .d-build section.book::before { background:color-mix(in srgb, var(--dom) 26%, #fffaf0) !important }
:root[data-theme="dark"] .d-build #how::before, :root[data-theme="dark"] .d-build section.book::before { background:color-mix(in srgb, #f2b84b 12%, var(--paper)) !important }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .d-build #how::before, :root:not([data-theme="light"]) .d-build section.book::before { background:color-mix(in srgb, #f2b84b 12%, var(--paper)) !important }
}

/* the theme switch: condensed labels, the active one underlined in the domain colour */
.theme button { border:0; border-bottom:2px solid transparent; border-radius:0; padding:2px 2px; font-stretch:78%; font-weight:720; letter-spacing:.01em }
.theme button[aria-pressed="true"] { border-bottom-color:var(--dom-ink); color:var(--ink) }

/* dark .io and .me: the figure sits on a solid accent panel of its own */
:root[data-theme="dark"] .d-io .hero .trace { background:#c6b4e6; padding:22px 24px; border:0; color:#2b1745 }
:root[data-theme="dark"] .d-me .hero .trace { background:#a9dcbc; padding:20px 22px; color:#0f3a22 }
:root[data-theme="dark"] .d-io .hero .trace path.line, :root[data-theme="dark"] .d-me .hero .trace path.bracket { stroke:currentColor }
:root[data-theme="dark"] .d-io .hero .trace path.area { fill:rgba(43,23,69,.18) }
:root[data-theme="dark"] .d-io .hero .trace figcaption, :root[data-theme="dark"] .d-io .hero .trace .labels, :root[data-theme="dark"] .d-me .hero .trace figcaption, :root[data-theme="dark"] .d-me .hero .trace .labels { color:currentColor }
:root[data-theme="dark"] .d-io .hero .trace .node { background:#c6b4e6; box-shadow:inset 0 0 0 4px #2b1745 }
:root[data-theme="dark"] .d-io .hero .trace .node:first-of-type { background:#2b1745 }
/* dark platformalchemist: the button stays in the brand pink */
:root[data-theme="dark"] .d-pa .btn { background:#ff9fbc; color:#3a0d1c }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .d-io .hero .trace { background:#c6b4e6; padding:22px 24px; border:0; color:#2b1745 }
  :root:not([data-theme="light"]) .d-me .hero .trace { background:#a9dcbc; padding:20px 22px; color:#0f3a22 }
  :root:not([data-theme="light"]) .d-io .hero .trace path.line, :root:not([data-theme="light"]) .d-me .hero .trace path.bracket { stroke:currentColor }
  :root:not([data-theme="light"]) .d-io .hero .trace path.area { fill:rgba(43,23,69,.18) }
  :root:not([data-theme="light"]) .d-io .hero .trace figcaption, :root:not([data-theme="light"]) .d-io .hero .trace .labels, :root:not([data-theme="light"]) .d-me .hero .trace figcaption, :root:not([data-theme="light"]) .d-me .hero .trace .labels { color:currentColor }
  :root:not([data-theme="light"]) .d-io .hero .trace .node { background:#c6b4e6; box-shadow:inset 0 0 0 4px #2b1745 }
  :root:not([data-theme="light"]) .d-io .hero .trace .node:first-of-type { background:#2b1745 }
  :root:not([data-theme="light"]) .d-pa .btn { background:#ff9fbc; color:#3a0d1c }
}

/* round 23 */
/* platformalchemist: crimson carried below the hero */
.d-pa #status .list em { background:var(--dom); color:#ffffff; padding:3px 8px 2px; justify-self:end; align-self:start; text-align:center }
.d-pa #status .list em::before { display:none }
.d-pa #status .list li.no em { background:transparent; color:var(--ink2); box-shadow:inset 0 0 0 1px var(--rule) }
.d-pa section.book::before { background:color-mix(in srgb, var(--dom) 16%, #fff6f9) }
.d-pa section.book .btn { background:var(--dom); color:#ffffff }
:root[data-theme="dark"] .d-pa section.book::before { background:color-mix(in srgb, var(--dom) 40%, var(--paper)) }
:root[data-theme="dark"] .d-pa section.book .btn { background:#ff9fbc; color:#3a0d1c }
:root[data-theme="dark"] .d-pa #status .list em { background:#ff9fbc; color:#3a0d1c }
/* .io: the record line taller, its nodes larger */
.d-io .hero .trace svg { height:150px }
.d-io .hero .trace .node { width:20px; height:20px; margin:-10px 0 0 -10px }
/* writing titles read as links */
.list a b { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-color:var(--dom-ink) }
/* .build: the fine print comes into the desktop first screen */
.d-build .hero .trace svg { height:48px }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .d-pa section.book::before { background:color-mix(in srgb, var(--dom) 40%, var(--paper)) }
  :root:not([data-theme="light"]) .d-pa section.book .btn { background:#ff9fbc; color:#3a0d1c }
  :root:not([data-theme="light"]) .d-pa #status .list em { background:#ff9fbc; color:#3a0d1c }
}

/* round 24 */
/* platformalchemist: recipe cells, each stage one cell taller than the last */
.trace path.cells { fill:var(--on-dom) }
.d-pa .hero .trace path.cells { fill:#ffffff }
/* .io: the record as dots on one baseline, no fill */
.trace path.rule { fill:none; stroke:var(--dom-ink); stroke-width:3; vector-effect:non-scaling-stroke }
.d-io .hero .trace svg { height:60px }
.d-io .hero .trace .node { width:22px; height:22px; margin:-11px 0 0 -11px }
:root[data-theme="dark"] .d-io .hero .trace path.rule { stroke:#2b1745 }
/* dark .ai: the schematic on a pale periwinkle panel, navy line */
:root[data-theme="dark"] .d-ai .hero .trace { background:#c9d5ff; color:#13214f; background-image:none }
:root[data-theme="dark"] .d-ai .hero .trace path.line { stroke:#13214f }
:root[data-theme="dark"] .d-ai .hero .trace path.area { fill:rgba(19,33,79,.16) }
:root[data-theme="dark"] .d-ai .hero .trace figcaption, :root[data-theme="dark"] .d-ai .hero .trace .labels { color:#13214f }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .d-io .hero .trace path.rule { stroke:#2b1745 }
  :root:not([data-theme="light"]) .d-ai .hero .trace { background:#c9d5ff; color:#13214f; background-image:none }
  :root:not([data-theme="light"]) .d-ai .hero .trace path.line { stroke:#13214f }
  :root:not([data-theme="light"]) .d-ai .hero .trace path.area { fill:rgba(19,33,79,.16) }
  :root:not([data-theme="light"]) .d-ai .hero .trace figcaption, :root:not([data-theme="light"]) .d-ai .hero .trace .labels { color:#13214f }
}

/* round 25 */
/* a second colour role, used only for tags: on .ai, measured runs stand apart from commentary; on .pa, published stands apart from in development */
.d-ai .list li.t-run em, .d-ai .list li.t-benchmarks em { color:#9a4f00 }
.d-ai .list li.t-run b { text-decoration-color:#9a4f00 }
.d-pa #status .list li.t-published em { background:#1d6b47; color:#ffffff }
:root[data-theme="dark"] .d-ai .list li.t-run em, :root[data-theme="dark"] .d-ai .list li.t-benchmarks em { color:#f2a65a }
:root[data-theme="dark"] .d-pa #status .list li.t-published em { background:#7fd6a6; color:#0f2a1c }
/* .ai: a saturated blue ground, like its siblings */
.d-ai .hero::before { background:#b7c8f2 }
/* .io: the timeline carries weight, a heavy rule and large stops; labels stay under their stops */
.d-io .hero .trace path.rule { stroke-width:6 }
.d-io .hero .trace .node { width:26px; height:26px; margin:-13px 0 0 -13px }
.d-io .hero .trace .labels { grid-template-columns:33% 34.9% 32.1% !important }
/* .me: the bracket on a filled panel in light as in dark */
.d-me .hero .trace { background:color-mix(in srgb, var(--dom) 14%, #ffffff); padding:20px 22px }
.d-me .hero .trace .labels { font-size:14px }
/* lower sections: .me's fit list and .build's past builds take the full row under their heading */
.d-me #fit, .d-build #past { display:block }
.d-me #fit > h2, .d-build #past > h2 { position:static; max-width:none; margin:0 0 24px }
.d-build #past .list { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:32px; border-top:3px solid var(--dom-ink) }
.d-build #past .list li { grid-template-columns:1fr; gap:6px; border-top:0 }
.d-build #past .list em { text-align:left; order:-1 }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .d-ai .list li.t-run em, :root:not([data-theme="light"]) .d-ai .list li.t-benchmarks em { color:#f2a65a }
  :root:not([data-theme="light"]) .d-pa #status .list li.t-published em { background:#7fd6a6; color:#0f2a1c }
}

/* round 27: a new direction for the shared skeleton */
/* the mark repeats beside each lower section heading, so the figure is a system, not only a hero element */
section h2 .mark-section { display:block; width:46px; height:20px; margin:0 0 12px; overflow:visible }
section h2 .mark-section path.line, section h2 .mark-section path.bracket, section h2 .mark-section path.rule { stroke:var(--dom-ink); stroke-width:2.5 }
section h2 .mark-section path.bars, section h2 .mark-section path.cells { fill:var(--dom-ink) }
.d-ai #research h2 .mark-section path.line { stroke:#9fb6ff } .d-ai #research h2 .mark-section path.area { fill:rgba(159,182,255,.25) }
.d-io #leadership h2 .mark-section path.rule, .d-me #shape h2 .mark-section path.bracket { stroke:var(--on-dom) }

/* .ai: the schematic becomes a full-bleed cobalt band along the bottom of the hero */
.d-ai .hero { grid-template-rows:auto auto; padding-bottom:0; padding-top:34px }
.d-ai .hero > div:not(.aside) { grid-row:1 }
.d-ai .hero .aside { grid-column:2; grid-row:1; align-self:end }
.d-ai .hero .trace { grid-column:1 / -1; grid-row:2; margin:22px calc(50% - 50vw) 0; padding:16px calc(50vw - 50%) 14px; display:grid; grid-template-columns:minmax(0,3fr) minmax(0,9fr); column-gap:32px; align-items:center }
.d-ai .hero .trace figcaption { grid-column:1; grid-row:1; margin:0 }
.d-ai .hero .trace svg { grid-column:2; grid-row:1 / span 2; height:96px }
.d-ai .hero .trace .labels { grid-column:1; grid-row:2; grid-template-columns:1fr 1fr; margin-top:6px; font-size:13px }
.d-ai .hero h1 { margin-bottom:16px } .d-ai .hero .position { margin-bottom:20px }

/* .pa: the recipe cells fill a tall left column, the stage and offer sit to its right */
.d-pa .hero { grid-template-columns:minmax(0,5fr) minmax(0,7fr); grid-template-rows:auto 1fr }
.d-pa .hero .trace { grid-column:1; grid-row:1 / span 3; align-self:stretch; display:flex; flex-direction:column; justify-content:space-between; padding:26px 24px }
.d-pa .hero .trace svg { height:auto; flex:1; min-height:220px }
.d-pa .hero .aside.status { grid-column:2; grid-row:1 }
.d-pa .hero > div:not(.aside) { grid-column:2; grid-row:2 / span 2 }

/* .build: ink bars on a lighter amber panel in light; the field stays burnt amber in dark */
.d-build .hero .trace { background:color-mix(in srgb, var(--dom) 45%, #fff6e4) }

/* side panels take each domain's language instead of one filled box */
.d-ai section.two > .aside { background:transparent; border-top:3px solid var(--dom-ink); border-bottom:1px solid var(--dom-ink) }
.d-pa section.two > .aside { background-color:color-mix(in srgb, var(--dom) 8%, var(--paper)); background-image:linear-gradient(color-mix(in srgb, var(--dom) 14%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--dom) 14%, transparent) 1px, transparent 1px); background-size:16px 16px }
.d-io section.two > .aside strong::before { content:""; display:inline-block; width:12px; height:12px; margin-right:8px; border-radius:50%; background:var(--on-dom); vertical-align:-1px }

/* round 28: the three critics' shared asks on round 27 */
/* .ai: the schematic sits in the hero's right column, above the fold; the write-up block stays below it */
.d-ai .hero { padding-bottom:56px }
.d-ai .hero > div:not(.aside) { grid-column:1; grid-row:1 / span 2 }
.d-ai .hero .trace { grid-column:2; grid-row:1; align-self:start; margin:0; padding:20px 22px 18px; display:block }
.d-ai .hero .trace svg { height:150px }
.d-ai .hero .trace .labels { grid-template-columns:1fr 1fr; margin-top:10px }
.d-ai .hero .aside { grid-column:2; grid-row:2; align-self:end }
/* .io: every node of the record is drawn the same, so the rail reads as a record, not a stepper at step 1 */
.d-io .hero .trace .node, .d-io .hero .trace .node:first-of-type { background:var(--dom-ink); box-shadow:none }
:root[data-theme="dark"] .d-io .hero .trace .node, :root[data-theme="dark"] .d-io .hero .trace .node:first-of-type { background:#2b1745; box-shadow:none }
/* buttons take each domain's geometry */
.d-build .btn { border-radius:0 }
.d-io .btn { border-radius:999px; padding-left:28px; padding-right:28px }
/* .build: bands below the hero are paper with an ochre rule, not sand */
.d-build #how::before, .d-build section.book::before { background:var(--paper) !important; border-top:6px solid var(--dom) }
.d-build section.two > .aside { background:transparent; border-top:3px solid var(--dom); border-bottom:1px solid var(--dom) }
/* .pa dark: its own hero, pink cells on a lifted crimson plate */
:root[data-theme="dark"] .d-pa .hero .trace { background-color:#b02a55 }
:root[data-theme="dark"] .d-pa .hero .trace path.cells { fill:#ffc2d4 }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .d-io .hero .trace .node, :root:not([data-theme="light"]) .d-io .hero .trace .node:first-of-type { background:#2b1745; box-shadow:none }
  :root:not([data-theme="light"]) .d-pa .hero .trace { background-color:#b02a55 }
  :root:not([data-theme="light"]) .d-pa .hero .trace path.cells { fill:#ffc2d4 }
}

/* round 29: the critics' shared asks on round 28 */
/* .ai: the write-up block sits directly under the schematic, no dead band */
.d-ai .hero .aside { align-self:start; margin-top:24px }
/* .build: the hero column leads with its figure, taller; "Who this is" follows */
.d-build .hero > div:not(.aside):not(.trace) { grid-column:1; grid-row:1 / span 2 }
.d-build .hero .trace { grid-column:2; grid-row:1; align-self:start; margin:0 0 24px }
.d-build .hero .trace svg { height:200px }
.d-build .hero .aside { grid-column:2; grid-row:2; align-self:start }
/* .build: one full-bleed brown band mid-page, as the other domains have */
.d-build #past { position:relative; z-index:0; margin-top:64px; padding:60px 0 52px; color:#fbecd0 }
.d-build #past::before { content:""; position:absolute; z-index:-1; inset:0 calc(50% - 50vw); background:#3a2608 }
.d-build #past h2, .d-build #past .list b { color:#ffffff }
.d-build #past .list span { color:#f0dcb6 }
.d-build #past .list em { color:#f2b84b }
.d-build #past .list li { border-color:rgba(242,184,75,.4) }
.d-build #past h2 .mark-section path.bars { fill:#f2b84b }
:root[data-theme="dark"] .d-build #past::before { background:#5a3c0a }
/* .io: the record list drops its dots, so the hero rail is the one place the device appears */
.d-io #record .list::before, .d-io #record .list li::before { display:none }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .d-build #past::before { background:#5a3c0a }
}

/* round 30: the critics' shared asks on round 29 */
/* .ai: the second hero row takes the slack, so the write-up block sits 24px under the figure */
.d-ai .hero { grid-template-rows:auto 1fr }
/* .me: the engagement figure panel runs down to the CTA note */
.d-me .hero .trace { align-self:stretch }
/* .pa: "not yet" is a filled neutral badge, as visible as its siblings */
.d-pa #status .list li.t-not em { background:#5b6270; color:#ffffff; border:0 }
:root[data-theme="dark"] .d-build { --paper:#1a1208; --rule:#3d2f19 }
:root[data-theme="dark"] .d-ai { --paper:#0f1730; --rule:#26325a }
:root[data-theme="dark"] .d-build .hero::before { background:#8a5a10 }
:root[data-theme="dark"] .d-build .hero h1, :root[data-theme="dark"] .d-build .hero .position, :root[data-theme="dark"] .d-build .hero .terms, :root[data-theme="dark"] .d-build .hero .aside { color:#fff4dd }
:root[data-theme="dark"] .d-ai .hero .trace { background:#1f3478; color:#e3e9ff }
:root[data-theme="dark"] .d-ai .hero .trace path.line { stroke:#b7c8f2 }
:root[data-theme="dark"] .d-ai .hero .trace path.area { fill:rgba(183,200,242,.22) }
:root[data-theme="dark"] .d-ai .hero .trace figcaption, :root[data-theme="dark"] .d-ai .hero .trace .labels { color:#e3e9ff }
:root[data-theme="dark"] .d-pa #status .list li.t-not em { background:#8a93a3; color:#11141a }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .d-build { --paper:#1a1208; --rule:#3d2f19 }
:root:not([data-theme="light"]) .d-ai { --paper:#0f1730; --rule:#26325a }
:root:not([data-theme="light"]) .d-build .hero::before { background:#8a5a10 }
:root:not([data-theme="light"]) .d-build .hero h1, :root:not([data-theme="light"]) .d-build .hero .position, :root:not([data-theme="light"]) .d-build .hero .terms, :root:not([data-theme="light"]) .d-build .hero .aside { color:#fff4dd }
:root:not([data-theme="light"]) .d-ai .hero .trace { background:#1f3478; color:#e3e9ff }
:root:not([data-theme="light"]) .d-ai .hero .trace path.line { stroke:#b7c8f2 }
:root:not([data-theme="light"]) .d-ai .hero .trace path.area { fill:rgba(183,200,242,.22) }
:root:not([data-theme="light"]) .d-ai .hero .trace figcaption, :root:not([data-theme="light"]) .d-ai .hero .trace .labels { color:#e3e9ff }
:root:not([data-theme="light"]) .d-pa #status .list li.t-not em { background:#8a93a3; color:#11141a }
}

/* round 31: a heavier .io record, and a .pa dark hero of its own */
.d-io .hero .trace path.rule { stroke-width:8 }
.d-io .hero .trace .node, .d-io .hero .trace .node:first-of-type { width:28px; height:28px; margin:-14px 0 0 -14px }
.d-io .hero .trace .labels { font-size:22px; font-weight:720; font-stretch:80%; letter-spacing:-.02em; line-height:1.1 }
:root[data-theme="dark"] .d-pa .hero .trace { background-color:transparent; box-shadow:inset 0 0 0 2px #ff9fbc }
:root[data-theme="dark"] .d-pa .hero .trace path.cells { fill:#ff9fbc }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .d-pa .hero .trace { background-color:transparent; box-shadow:inset 0 0 0 2px #ff9fbc }
  :root:not([data-theme="light"]) .d-pa .hero .trace path.cells { fill:#ff9fbc }
}

@media (max-width:760px) {
  .hero, .two { grid-template-columns:1fr; column-gap:0 }
  .hero { padding:28px 0 36px; row-gap:18px; grid-template-rows:none }
  .hero .position { font-size:17px; line-height:1.5 }
  /* phone order: headline and booking first, then the field, then the aside (all domains, .io included) */
  .hero > div:not(.aside), .hero .trace, .hero .aside, .d-io .hero .aside.open-to, .d-io .hero .trace, .d-io .hero > div:not(.aside), .d-me .hero > div:not(.aside), .d-me .hero .trace, .d-me .hero .aside { grid-column:1; grid-row:auto }
  .d-me .hero { grid-template-columns:1fr }
  .d-io .hero .trace { display:block; margin:0 }
  .d-io .hero .aside.open-to { align-self:auto }
  .d-io .hero .btn { justify-self:auto }
  .d-io .hero h1 { margin-bottom:0 }
  .d-io .hero { row-gap:24px }
  .d-io .hero .trace svg { height:64px }
  .d-io .hero .trace { padding:12px 14px 12px }
  .d-io .hero .trace .labels { margin-top:12px; grid-template-columns:repeat(2,minmax(0,1fr)) }
  .d-build .hero { margin-top:20px; padding:26px 0 32px }
  .d-build .hero .trace { padding:0 }
  .hero > div:not(.aside), .d-io .hero > div:not(.aside) { display:contents }
  /* phone order: the offer first (headline, paragraph, button, terms), then the aside, then the figure;
     the audience judges refused the figure-first order in round 15 */
  .hero h1 { order:0; margin-bottom:0 }
  .hero .position { order:1; margin:0 }
  .hero .btn { order:2 }
  .hero .terms { order:3; margin-top:-12px }
  .hero .aside, .d-io .hero .aside.open-to { order:4 }
  .hero .trace { order:5 }
  .d-pa .hero .aside.status { order:0; margin-top:-4px }
  .d-pa .hero h1 { order:-1 }
  .trace .labels { font-size:14px; margin-top:8px; gap:1px 14px; line-height:1.4 }
  section:not(.two):not(.book) { display:block }
  section:not(.two):not(.book) > h2 { position:static; margin:0 0 22px; max-width:none }
  .d-ai #research, .d-io #leadership, .d-me #shape { margin-top:40px; padding:44px 0 36px }
  .hero h1 { font-size:clamp(40px, 11.5vw, 52px); max-width:none }
  .d-pa .hero .trace svg { height:150px !important }
  .d-build .hero > div:not(.aside):not(.trace), .d-build .hero .trace, .d-build .hero .aside { grid-column:1; grid-row:auto }
  .d-build .hero .trace svg { height:64px }
  .aside { max-width:none }
  .trace { padding:12px 14px 12px }
  .trace svg { height:64px }
  .d-ai .hero .trace { display:block; margin:0; padding:12px 14px; grid-row:auto; grid-column:1 } .d-ai .hero .trace svg { height:64px }
  .d-pa .hero .trace { grid-row:auto }
  .d-pa .hero .aside.status { order:-2 }
  .d-pa .hero { grid-template-columns:1fr } .d-pa .hero .trace { grid-row:auto; grid-column:1; display:block; padding:14px 16px } .d-pa .hero .trace svg { min-height:0; height:64px }
  .d-pa .hero .aside.status, .d-pa .hero > div:not(.aside), .d-ai .hero .aside, .d-ai .hero > div:not(.aside) { grid-column:1; grid-row:auto }
  .d-me .hero .trace svg, .d-pa .hero .trace svg { height:64px }
  /* phone: every figure's steps read in one column, in order */
  .trace .labels, .d-me .hero .trace .labels { grid-template-columns:1fr !important; gap:2px }
  .d-build #past .list { grid-template-columns:1fr }
  .d-pa .hero .trace { margin-right:0 }
  .d-me #fit .list { grid-template-columns:1fr } .d-me #fit .list li.no { grid-column:1 }
  .d-pa .btn { font-size:14px; padding-left:10px; padding-right:10px }
  .d-pa .hero .aside.status { border-bottom:0; padding:0 }
  .d-pa .hero > div:not(.aside), .d-pa .hero .trace { grid-row:auto }
  .d-ai .hero .trace svg { height:96px }
  .d-build .hero .trace { margin-right:0; padding-right:0; grid-row:auto }
  .d-build .hero .aside { grid-row:auto }
  .d-build .hero > div:not(.aside), .d-build .hero .trace, .d-build .hero .aside { grid-column:1; grid-row:auto }
  .d-build .hero .trace svg { height:64px }
  .d-build .hero .trace { padding:14px 16px 12px !important }
  .d-build .hero { row-gap:18px }
  .d-me .hero .trace { margin-bottom:0; box-shadow:none } .d-me .hero .aside { margin-top:0 }
  .d-pa #status .list li { grid-template-columns:1fr; gap:4px } .d-pa #status .list em { text-align:left; justify-self:start }
  .d-pa .top .name { font-size:19px }
  .d-build .hero, .d-pa .hero { margin-top:0 }
  .trace figcaption { margin-bottom:8px; font-size:14px }
  body { border-top:10px solid var(--dom) }
  .d-ai .hero, .d-io .hero, .d-me .hero { margin-top:20px; padding-top:28px; padding-bottom:36px }
  .d-pa .hero { margin-top:0; padding-top:28px; padding-bottom:36px }
  .d-build #how .list { display:block } .d-build #how .list li { margin-top:0 !important; border-top:1px solid var(--rule); padding:16px 0 }
  .d-io .hero .trace .labels { grid-template-columns:1fr; gap:1px }
  .book .btn { margin-bottom:28px }
  .top .name small { display:block; margin:2px 0 0 }
  section h2 { margin-top:8px }
  .top { grid-template-columns:1fr auto; row-gap:8px }
  .top .name { grid-column:1; grid-row:1 }
  .top a.book { grid-column:2; grid-row:1 }
  .top nav { grid-column:1 / -1; grid-row:2; gap:6px 16px }
  .list li { grid-template-columns:1fr; gap:6px }
  .list em { text-align:left; order:1 }
  section { padding:48px 0 16px }
  .btn { display:block; text-align:center }

}

/* titantech.capital: stone and oxblood (colour studies 3 and 4); the tree survives only as the header mark */
.d-ttc { --dom:#5c1f2b; --on-dom:#f5f3f0; --dom-ink:#6a2633; --dom-area:rgba(245,243,240,.14) }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .d-ttc { --dom:#5a2330; --on-dom:#f1e8e2; --dom-ink:#e2b5bd; --dom-area:rgba(236,238,233,.12) }
  :root:not([data-theme="light"]) .d-ttc .hero::before { background:color-mix(in srgb, var(--dom) 80%, var(--paper)) }
}
:root[data-theme="dark"] .d-ttc { --dom:#5a2330; --on-dom:#f1e8e2; --dom-ink:#e2b5bd; --dom-area:rgba(236,238,233,.12) }
:root[data-theme="dark"] .d-ttc .hero::before { background:color-mix(in srgb, var(--dom) 80%, var(--paper)) }
.d-ttc { --sig:var(--dom-ink) }
.d-ttc .hero { position:relative; z-index:0; margin-top:28px; padding-top:60px; padding-bottom:56px; grid-template-columns:1fr; grid-template-rows:none }
.d-ttc .hero::before { content:""; position:absolute; z-index:-1; top:0; bottom:0; left:calc(50% - 50vw); right:calc(50% - 50vw); background:color-mix(in srgb, var(--dom) 14%, var(--paper)) }
.d-ttc .hero > div:not(.aside) { grid-column:1; grid-row:1 }
.d-ttc .hero h1 { max-width:19ch }
.d-ttc .hero .trace { grid-column:1; grid-row:2; background:var(--dom); padding:22px 26px 18px }
.d-ttc .hero .trace svg { height:110px }
.d-ttc .hero .trace .labels { grid-template-columns:repeat(5, minmax(0,1fr)); gap:0 12px; text-align:center }
.trace path.tree { fill:none; stroke:var(--on-dom); stroke-width:3; stroke-linecap:square; vector-effect:non-scaling-stroke }
.mark path.tree { fill:none; stroke:var(--dom-ink); stroke-width:2; vector-effect:non-scaling-stroke }
section h2 .mark-section path.tree { stroke:var(--dom-ink); stroke-width:2.5 }
@media (max-width:760px) {
  .d-ttc .hero { padding:28px 0 36px; margin-top:20px }
  .d-ttc .hero .trace svg { height:64px }
  .d-ttc .hero > div:not(.aside), .d-ttc .hero .trace { grid-row:auto }
  .d-ttc .hero .trace .labels { grid-template-columns:repeat(5, minmax(0,1fr)) !important; font-size:12px; gap:0 4px }
  .d-ttc .hero .trace .labels span::before { display:block }
}

/* titantech.capital: a catalog of fronts. One full-bleed banner per site, each a small copy of
   that site's own hero: its colour field, headline, opening line and figure. */
.front.d-ai { --dom:#23409a; --on-dom:#ffffff; --dom-ink:#23409a; --dom-area:rgba(255,255,255,.14) }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .front.d-ai { --dom:#1b2b63; --on-dom:#9fb6ff; --dom-ink:#9fb6ff; --dom-area:rgba(159,182,255,.16) }
  :root:not([data-theme="light"]) .front::before { background:color-mix(in srgb, var(--dom) 45%, var(--paper)) }
}
:root[data-theme="dark"] .front.d-ai { --dom:#1b2b63; --on-dom:#9fb6ff; --dom-ink:#9fb6ff; --dom-area:rgba(159,182,255,.16) }
:root[data-theme="dark"] .front::before { background:color-mix(in srgb, var(--dom) 45%, var(--paper)) }
.d-ttc .hero { padding-bottom:64px }
.d-ttc .hero h1 { max-width:16ch }
.d-ttc section.fronts { display:block; padding:64px 0 0 }
.d-ttc section.fronts > h2 { position:static; margin:0 0 34px; max-width:24ch }
.front { position:relative; z-index:0; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:56px; align-items:center; padding:60px 0; color:var(--ink) }
.front::before { content:""; position:absolute; z-index:-1; inset:0 calc(50% - 50vw); background:color-mix(in srgb, var(--dom) 13%, var(--paper)) }
.front-tag { display:block; font-size:15px; font-weight:640; color:var(--dom-ink); margin:0 0 12px }
.front-h { font-size:clamp(32px, 4.3vw, 54px); line-height:1; letter-spacing:-.03em; font-weight:720; font-stretch:80%; margin:0 0 18px; max-width:16ch; text-wrap:balance }
.front-pos { font-size:17px; line-height:1.5; color:var(--ink2); max-width:var(--measure); margin:0 0 24px }
.front-pos a { color:var(--ink) }
.front .trace svg { height:120px }
.front.d-me .trace .labels { grid-template-columns:var(--tick-cols, repeat(2, minmax(0,1fr))) }
@media (max-width:760px) {
  .front { grid-template-columns:1fr; row-gap:24px; padding:40px 0 }
  .front .trace svg { height:80px }
  .front.d-me .trace .labels { grid-template-columns:repeat(2, minmax(0,1fr)) }
}
/* the .io timeline on a front banner: the rule and stops drawn in the field's own ink */
.front .trace path.rule { stroke:var(--on-dom) }
.front .trace .node { background:var(--dom); box-shadow:inset 0 0 0 4px var(--on-dom) }
.front .trace .node:first-of-type { background:var(--on-dom) }
.front.d-io .trace .labels { grid-template-columns:31% 34% 35%; gap:0 }
.front .trace path.bracket { stroke:var(--on-dom); stroke-width:5 }
.front.d-me .trace .labels { gap:0 }
.front.d-me .trace .labels span:last-child { justify-self:end; white-space:nowrap }
/* titantech.capital hero: one solid colour field, short, so the first front opens on the first screen */
.d-ttc .hero { padding-top:52px; padding-bottom:48px; margin-top:0; color:var(--on-dom) }
.d-ttc .hero::before { background:var(--dom) }
:root[data-theme="dark"] .d-ttc .hero::before { background:var(--dom) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .d-ttc .hero::before { background:var(--dom) } }
.d-ttc .hero h1 { color:var(--on-dom); font-size:clamp(38px, 5.2vw, 66px); margin-bottom:20px }
.d-ttc .hero .position, .d-ttc .hero .terms { color:var(--on-dom); opacity:.92 }
.d-ttc .hero .position a { color:var(--on-dom) }
.d-ttc .hero .btn { background:var(--on-dom); color:var(--dom) }
.d-ttc .top { position:relative; z-index:0 }
.d-ttc section.fronts { padding-top:0 }
@media (max-width:760px) {
  .front.d-me .trace .labels span:last-child { justify-self:start }
  .d-ttc .hero { padding:28px 0 32px }
}
/* front banners: .me's bracket labels as a plain two-column list (tick-aligned columns overlap at banner width) */
.front.d-me .trace .labels { grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:4px 18px }
.front.d-me .trace .labels span:last-child { justify-self:start; white-space:normal }

/* titantech.capital fronts: one stone-and-oxblood palette, a different combination per banner by position, light and dark
   alternating (colour study 4, unanimous, with the panel's refinements). The hero is the only full-strength oxblood field. */
.d-ttc .front.front:nth-of-type(1) { --dom:#5c1f2b; --on-dom:#f5f3f0; --dom-ink:#5c1f2b; --ink:#1c2024; --ink2:#4e565c; --dom-area:rgba(255,255,255,.14); --field-grid:transparent; color:#1c2024 }
.d-ttc .front.front:nth-of-type(1)::before { background:#f2efea }
.d-ttc .front.front:nth-of-type(1) .btn { background:#5c1f2b; color:#f5f3f0 }
.d-ttc .front.front:nth-of-type(2) { --dom:#e5e1da; --on-dom:#333436; --dom-ink:#ecdcd8; --ink:#f5f3f0; --ink2:#ded6d3; --dom-area:rgba(255,255,255,.14); --field-grid:transparent; color:#f5f3f0 }
.d-ttc .front.front:nth-of-type(2)::before { background:#43161f }
.d-ttc .front.front:nth-of-type(2) .btn { background:#f5f3f0; color:#43161f }
.d-ttc .front.front:nth-of-type(3) { --dom:#333436; --on-dom:#f5f3f0; --dom-ink:#5c1f2b; --ink:#1c2024; --ink2:#4e4446; --dom-area:rgba(255,255,255,.14); --field-grid:transparent; color:#1c2024 }
.d-ttc .front.front:nth-of-type(3)::before { background:#ecdcd8 }
.d-ttc .front.front:nth-of-type(3) .btn { background:#333436; color:#f5f3f0 }
.d-ttc .front.front:nth-of-type(4) { --dom:#87564e; --on-dom:#f5f3f0; --dom-ink:#ecdcd8; --ink:#f5f3f0; --ink2:#d4d2ce; --dom-area:rgba(255,255,255,.14); --field-grid:transparent; color:#f5f3f0 }
.d-ttc .front.front:nth-of-type(4)::before { background:#333436 }
.d-ttc .front.front:nth-of-type(4) .btn { background:#f5f3f0; color:#333436 }
.d-ttc .front.front:nth-of-type(5) { --dom:#f2efea; --on-dom:#333436; --dom-ink:#f8e9e5; --ink:#f5f3f0; --ink2:#f3e8e4; --dom-area:rgba(255,255,255,.14); --field-grid:transparent; color:#f5f3f0 }
.d-ttc .front.front:nth-of-type(5)::before { background:#87564e }
.d-ttc .front.front:nth-of-type(5) .btn { background:#f5f3f0; color:#6b3f38 }
.d-ttc .front .trace path.cells, .d-ttc .front .trace path.bars { fill:var(--on-dom) }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .d-ttc .front.front:nth-of-type(1) { --dom:#5a2330; --on-dom:#f1e8e2; --dom-ink:#e2b5bd; --ink:#eceae6; --ink2:#b9b3ad; --dom-area:rgba(255,255,255,.14); --field-grid:transparent; color:#eceae6 }
  :root:not([data-theme="light"]) .d-ttc .front.front:nth-of-type(1)::before { background:#1c1b1b }
  :root:not([data-theme="light"]) .d-ttc .front.front:nth-of-type(1) .btn { background:#f1e8e2; color:#5a2330 }
  :root:not([data-theme="light"]) .d-ttc .front.front:nth-of-type(2) { --dom:#2b2c2e; --on-dom:#eceae6; --dom-ink:#e9c3c9; --ink:#f3e9e6; --ink2:#d9c3c3; --dom-area:rgba(255,255,255,.14); --field-grid:transparent; color:#f3e9e6 }
  :root:not([data-theme="light"]) .d-ttc .front.front:nth-of-type(2)::before { background:#3a1720 }
  :root:not([data-theme="light"]) .d-ttc .front.front:nth-of-type(2) .btn { background:#f1e8e2; color:#3a1720 }
  :root:not([data-theme="light"]) .d-ttc .front.front:nth-of-type(3) { --dom:#262627; --on-dom:#eceae6; --dom-ink:#ecc4ca; --ink:#eceae6; --ink2:#cfc5bf; --dom-area:rgba(255,255,255,.14); --field-grid:transparent; color:#eceae6 }
  :root:not([data-theme="light"]) .d-ttc .front.front:nth-of-type(3)::before { background:#3a2a27 }
  :root:not([data-theme="light"]) .d-ttc .front.front:nth-of-type(3) .btn { background:#eceae6; color:#262627 }
  :root:not([data-theme="light"]) .d-ttc .front.front:nth-of-type(4) { --dom:#7a4c46; --on-dom:#eceae6; --dom-ink:#e9c3c9; --ink:#eceae6; --ink2:#c2bfba; --dom-area:rgba(255,255,255,.14); --field-grid:transparent; color:#eceae6 }
  :root:not([data-theme="light"]) .d-ttc .front.front:nth-of-type(4)::before { background:#2b2c2e }
  :root:not([data-theme="light"]) .d-ttc .front.front:nth-of-type(4) .btn { background:#eceae6; color:#2b2c2e }
  :root:not([data-theme="light"]) .d-ttc .front.front:nth-of-type(5) { --dom:#e6e0da; --on-dom:#2b2c2e; --dom-ink:#f3d6da; --ink:#f1ebe7; --ink2:#e3d6d1; --dom-area:rgba(255,255,255,.14); --field-grid:transparent; color:#f1ebe7 }
  :root:not([data-theme="light"]) .d-ttc .front.front:nth-of-type(5)::before { background:#4f322d }
  :root:not([data-theme="light"]) .d-ttc .front.front:nth-of-type(5) .btn { background:#f1ebe7; color:#4f322d }
}
:root[data-theme="dark"] .d-ttc .front.front:nth-of-type(1) { --dom:#5a2330; --on-dom:#f1e8e2; --dom-ink:#e2b5bd; --ink:#eceae6; --ink2:#b9b3ad; --dom-area:rgba(255,255,255,.14); --field-grid:transparent; color:#eceae6 }
:root[data-theme="dark"] .d-ttc .front.front:nth-of-type(1)::before { background:#1c1b1b }
:root[data-theme="dark"] .d-ttc .front.front:nth-of-type(1) .btn { background:#f1e8e2; color:#5a2330 }
:root[data-theme="dark"] .d-ttc .front.front:nth-of-type(2) { --dom:#2b2c2e; --on-dom:#eceae6; --dom-ink:#e9c3c9; --ink:#f3e9e6; --ink2:#d9c3c3; --dom-area:rgba(255,255,255,.14); --field-grid:transparent; color:#f3e9e6 }
:root[data-theme="dark"] .d-ttc .front.front:nth-of-type(2)::before { background:#3a1720 }
:root[data-theme="dark"] .d-ttc .front.front:nth-of-type(2) .btn { background:#f1e8e2; color:#3a1720 }
:root[data-theme="dark"] .d-ttc .front.front:nth-of-type(3) { --dom:#262627; --on-dom:#eceae6; --dom-ink:#ecc4ca; --ink:#eceae6; --ink2:#cfc5bf; --dom-area:rgba(255,255,255,.14); --field-grid:transparent; color:#eceae6 }
:root[data-theme="dark"] .d-ttc .front.front:nth-of-type(3)::before { background:#3a2a27 }
:root[data-theme="dark"] .d-ttc .front.front:nth-of-type(3) .btn { background:#eceae6; color:#262627 }
:root[data-theme="dark"] .d-ttc .front.front:nth-of-type(4) { --dom:#7a4c46; --on-dom:#eceae6; --dom-ink:#e9c3c9; --ink:#eceae6; --ink2:#c2bfba; --dom-area:rgba(255,255,255,.14); --field-grid:transparent; color:#eceae6 }
:root[data-theme="dark"] .d-ttc .front.front:nth-of-type(4)::before { background:#2b2c2e }
:root[data-theme="dark"] .d-ttc .front.front:nth-of-type(4) .btn { background:#eceae6; color:#2b2c2e }
:root[data-theme="dark"] .d-ttc .front.front:nth-of-type(5) { --dom:#e6e0da; --on-dom:#2b2c2e; --dom-ink:#f3d6da; --ink:#f1ebe7; --ink2:#e3d6d1; --dom-area:rgba(255,255,255,.14); --field-grid:transparent; color:#f1ebe7 }
:root[data-theme="dark"] .d-ttc .front.front:nth-of-type(5)::before { background:#4f322d }
:root[data-theme="dark"] .d-ttc .front.front:nth-of-type(5) .btn { background:#f1ebe7; color:#4f322d }
/* titantech.capital: the site names in the services list read as links (round 41, counterparty) */
.d-ttc #services .list a { color:var(--dom-ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; font-weight:640 }