@font-face {
  font-family: "ThaumMono";
  src: url("../fonts/thaum-mono/ThaumMono-W80.ttf") format("truetype");
  font-weight: 80;
  font-display: swap;
}
@font-face {
  font-family: "ThaumMono";
  src: url("../fonts/thaum-mono/ThaumMono-W160.ttf") format("truetype");
  font-weight: 160;
  font-display: swap;
}
@font-face {
  font-family: "ThaumMono";
  src: url("../fonts/thaum-mono/ThaumMono-W320.ttf") format("truetype");
  font-weight: 320;
  font-display: swap;
}
@font-face {
  font-family: "ThaumMono";
  src: url("../fonts/thaum-mono/ThaumMono-W640.ttf") format("truetype");
  font-weight: 640;
  font-display: swap;
}
@property --slice-media-overlay-alpha {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.18;
}
@property --slice-media-edge-opacity {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
:root {
  --bg: #e36325;
  --fg: #eee;
  --muted: #888;
  --accent: #e0b34e;
  --ph: #2a2a2a; /* placeholder */

  /* typegrid: one font family (ThaumMono), one size, one cell = one char.
     characters align vertically across the whole site.
     hierarchy comes from weight (80/160/320/640), never size. */
  --tg-size: 16px;
  --tg-line: 1;
  --tg-width: 80ch;
  --tg-pad: 2ch;
  --site-frame-width: 80ch;
  --site-frame-pad: 2ch;
}
* { box-sizing: border-box; margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: "ThaumMono", system-ui, monospace;
  font-weight: 320;
  font-size: var(--tg-size);
  line-height: var(--tg-line);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* one size everywhere */
h1, h2, p, a, nav, footer, .placeholder { font-size: inherit; }
/* shared shell: same width on every page, so chars align vertically site-wide */
.tg-shell {
  max-width: var(--tg-width);
  margin: 0 auto;
  padding: 0 var(--tg-pad);
  width: 100%;
}
pre {
  white-space: pre;
  overflow-x: auto;
  font-family: inherit;
}
header.site {
  background: #FEFFE5;
  padding: 1.75rem 0;
}
header.site .tg-shell {
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-nav-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--site-frame-width);
  margin: 0 auto;
  gap: 2rem;
}
.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
  white-space: nowrap;
  flex: 1;
}
header.site .site-nav-link,
header.site .site-nav-link:visited {
  color: #C4702B;
  text-decoration: none;
  display: inline-block;
  -webkit-text-fill-color: currentColor;
}
header.site .site-nav-link.active,
header.site .site-nav-link.active:visited {
  color: #E36325;
}
header.site .site-nav-link.is-hovered,
header.site .site-nav-link.is-hovered:visited {
  color: #120A1A;
}
header.site.is-hovering .site-nav-link.active:not(.is-hovered),
header.site.is-hovering .site-nav-link.active:not(.is-hovered):visited {
  color: #C4702B;
}
header.site.is-hovering .site-nav-link:not(.is-hovered):not(.active),
header.site.is-hovering .site-nav-link:not(.is-hovered):not(.active):visited {
  color: #AC9D7C;
}
main { flex: 1; padding: 2rem 0; }
body.has-portfolio-status-page {
  background: var(--portfolio-page-background, var(--bg));
}
body.has-portfolio-status-page main {
  display: flex;
  align-items: center;
}
body.has-portfolio-status-page .portfolio-page,
body.has-portfolio-status-page .portfolio-slices,
body.has-portfolio-status-page .portfolio-slice,
body.has-portfolio-status-page .portfolio-slice-inner,
body.has-portfolio-status-page .portfolio-status-shell {
  width: 100%;
  min-height: 100%;
}
body.has-portfolio-status-page .portfolio-slice-inner {
  justify-content: center;
}
h1 { font-weight: 640; margin-bottom: 1rem; }
h2 { font-weight: 640; margin: 1.5rem 0 0.75rem; color: var(--muted); }
p { margin-bottom: 0.75rem; color: #ccc; }
.placeholder {
  background: var(--ph);
  border: 1px dashed #444;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  margin-bottom: 1rem;
}
/* item rows: one row per item. rows are modules — each can have its own
   setup (.row-text, .row-image, ...). big vertical gaps = space for content. */
.rows { display: flex; flex-direction: column; gap: 10ch; }
.row { width: 100%; }
.row-text h2 { font-weight: 320; margin: 0 0 1ch; color: var(--muted); }
.row-text p { font-weight: 160; margin-bottom: 0; }
/* simple card layout (not the typegrid) */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1ch;
}
.grid .placeholder { min-height: 10ch; margin-bottom: 0; }
footer.site {
  background: #FEFFE5;
  color: #E36325;
  padding: 1.75rem 0;
}
.footer.site .tg-shell,
footer.site .tg-shell {
  display: flex;
  justify-content: center;
}
.site-footer-shell {
  display: flex;
  align-items: baseline;
  justify-content: center;
  width: 100%;
  max-width: var(--site-frame-width);
  margin: 0 auto;
  color: #E36325;
}
.site-footer-sentence {
  display: grid;
  grid-template-columns: auto auto 8ch;
  align-items: baseline;
  justify-content: center;
  white-space: nowrap;
}
.site-footer-copy,
.site-footer-cta,
.site-footer-cta:visited,
.site-footer-cta-measure {
  color: #E36325;
  margin-bottom: 0;
  text-decoration: none;
  -webkit-text-fill-color: currentColor;
}
.site-footer-copy {
  font-weight: 160;
}
.site-footer-gap {
  display: block;
  width: 1ch;
}
.site-footer-cta,
.site-footer-cta-measure {
  display: inline-block;
  grid-column: 3;
}
.site-footer-cta-measure {
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}
.site-footer-cta {
  min-width: 8ch;
}

.portfolio-page.tg-shell {
  max-width: none;
  padding: 0;
}
.portfolio-page {
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
}
.portfolio-slices {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.portfolio-slice {
  position: relative;
  background: var(--slice-background, var(--slice-bg-current, #222));
  overflow: hidden;
  --slice-media-edge-color: var(--slice-bg-inactive, #FEFFE5);
  --slice-media-overlay-color: var(--slice-bg-inactive, #FEFFE5);
  --slice-media-edge-size: 72px;
  --slice-media-edge-solid: 0px;
  --slice-media-overlay-alpha: 0;
  --slice-media-edge-opacity: 0;
  transition: background-color 220ms ease;
}
.portfolio-slice.portfolio-carousel-slice {
  --slice-media-edge-size: 120px;
  transition: none;
}
.portfolio-slice::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--slice-overlay-color, #FEFFE5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.portfolio-slice.is-dimmed {
  --slice-media-overlay-alpha: 0.5;
  --slice-media-edge-opacity: 1;
}
.portfolio-slice.is-dimmed::after {
  opacity: 1;
}
.portfolio-slice-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: var(--site-frame-width);
  margin: 0 auto;
  padding: 2rem var(--site-frame-pad);
}
.portfolio-slice-media-wrap {
  position: relative;
}
.portfolio-slice-media-wrap::before,
.portfolio-slice-media-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.portfolio-slice-media-wrap::before {
  z-index: 3;
  background: var(--slice-media-overlay-color);
  opacity: var(--slice-media-overlay-alpha);
  transition: opacity 220ms ease;
}
.portfolio-slice-media-wrap::after {
  z-index: 4;
  background:
    linear-gradient(to bottom, var(--slice-media-edge-color) 0%, transparent 100%) top center / 100% var(--slice-media-edge-size) no-repeat,
    linear-gradient(to top, var(--slice-media-edge-color) 0%, transparent 100%) bottom center / 100% var(--slice-media-edge-size) no-repeat,
    linear-gradient(to right, var(--slice-media-edge-color) 0%, transparent 100%) left center / var(--slice-media-edge-size) 100% no-repeat,
    linear-gradient(to left, var(--slice-media-edge-color) 0%, transparent 100%) right center / var(--slice-media-edge-size) 100% no-repeat;
  mix-blend-mode: normal;
  opacity: var(--slice-media-edge-opacity);
  transition: opacity 220ms ease;
}
.portfolio-slice-media,
.portfolio-slice video,
.portfolio-slice img {
  display: block;
  width: 100%;
}
.portfolio-slice video,
.portfolio-slice img {
  background: rgba(254, 255, 229, 0.18);
}
.portfolio-slice.is-dimmed .portfolio-slice-media-wrap::after {
  opacity: 1;
}
.portfolio-slice.is-dimmed .portfolio-carousel-stage::after {
  opacity: 1;
}
.portfolio-carousel-media-wrap::before,
.portfolio-carousel-media-wrap::after {
  content: none;
}
.portfolio-slice-title,
.portfolio-slice-subtitle,
.portfolio-slice-description,
.portfolio-slice-toggle,
.portfolio-custom-block p {
  font-size: inherit;
  line-height: inherit;
}
.portfolio-slice-title {
  font-weight: 160;
  color: var(--slice-title-color, inherit);
  transition: color 220ms ease, font-weight 220ms ease;
}
.portfolio-slice-subtitle {
  font-weight: 80;
  color: var(--slice-subtitle-color, inherit);
  transition: color 220ms ease, font-weight 220ms ease;
}
.portfolio-slice-description,
.portfolio-custom-block p {
  font-weight: 80;
  color: var(--slice-desc-color, inherit);
  transition: color 220ms ease, font-weight 220ms ease;
}
.portfolio-slice.is-active .portfolio-slice-title {
  font-weight: 320;
}
.portfolio-slice.is-active .portfolio-slice-subtitle,
.portfolio-slice.is-active .portfolio-slice-description {
  font-weight: 160;
}
.portfolio-slice-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 52ch;
}
.portfolio-slice-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 18px;
  margin: 12px 0 26px;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--slice-desc-color, #787d8b) 40%, transparent);
}
.portfolio-slice-link {
  font-weight: 160;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  text-decoration: none;
  color: var(--slice-subtitle-color, inherit);
  padding: 0;
  border: none;
  cursor: pointer;
  transition: color 220ms ease, font-weight 220ms ease;
}
.portfolio-slice-links:has(.portfolio-slice-link:hover) .portfolio-slice-link:not(:hover) {
  color: var(--slice-desc-color, inherit);
  font-weight: 80;
}
.portfolio-slice-link:hover,
.portfolio-slice-link:active {
  color: var(--slice-title-color, inherit);
  font-weight: 320;
}
.portfolio-slice-description-row {
  display: grid;
  grid-template-columns: 5ch minmax(0, 1fr);
  align-items: start;
}
.portfolio-slice-toggle {
  grid-column: 1;
  grid-row: 1;
  border: 0;
  background: transparent;
  color: var(--slice-button-color, inherit);
  padding: 0;
  margin: 0;
  width: 5ch;
  text-align: left;
  line-height: inherit;
  font: inherit;
  cursor: pointer;
}
.portfolio-slice-toggle:focus-visible {
  outline: none;
}
.portfolio-slice-description-preview,
.portfolio-slice-description-extra {
  grid-column: 2;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin-bottom: 0;
  color: var(--slice-desc-color, inherit);
}
.portfolio-slice-description-preview {
  display: block;
  min-width: 0;
}
.portfolio-slice-description-extra {
  grid-column: 2;
  display: none;
  font-weight: 80;
  transition: color 220ms ease, font-weight 220ms ease 70ms;
}
.portfolio-slice.is-active .portfolio-slice-description-extra {
  font-weight: 160;
}
.portfolio-slice.is-expanded .portfolio-slice-description-extra {
  display: block;
}
.portfolio-carousel-controls {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1ch;
  width: 100%;
  text-align: center;
}
.portfolio-carousel-indices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1ch;
}
.portfolio-carousel-button {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  margin: 0;
  font: inherit;
  line-height: 1;
  white-space: pre;
  cursor: pointer;
  text-align: left;
}
.portfolio-carousel-arrow {
  color: var(--slice-button-color, inherit);
}
.portfolio-carousel-index {
  color: var(--slice-subtitle-color, inherit);
}
.portfolio-carousel-index.is-selected {
  color: var(--slice-desc-color, inherit);
}
.portfolio-carousel-media-wrap {
  margin-top: 0.25rem;
  display: flex;
  justify-content: center;
  background: transparent;
}
.portfolio-carousel-stage {
  position: relative;
  z-index: 1;
  overflow: hidden;
  min-height: 1px;
  max-width: 100%;
  background: transparent;
}
.portfolio-carousel-stage::before,
.portfolio-carousel-stage::after {
  content: none;
}
.portfolio-slice .portfolio-carousel-image {
  position: absolute;
  top: 0;
  left: 50%;
  width: auto;
  height: 100%;
  max-width: none;
  opacity: 0;
  transform: translateX(-50%);
  will-change: transform, opacity;
  pointer-events: none;
  overflow: hidden;
  background: transparent;
}
.portfolio-slice .portfolio-carousel-image::before,
.portfolio-slice .portfolio-carousel-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.portfolio-slice .portfolio-carousel-image::before {
  z-index: 2;
  background: var(--carousel-layer-background, var(--slice-background, #222));
  opacity: var(--slice-media-overlay-alpha);
}
.portfolio-slice .portfolio-carousel-image::after {
  z-index: 3;
  background:
    linear-gradient(to bottom, var(--carousel-layer-background, var(--slice-background, #222)) 0%, transparent 100%) top center / 100% var(--slice-media-edge-size) no-repeat,
    linear-gradient(to top, var(--carousel-layer-background, var(--slice-background, #222)) 0%, transparent 100%) bottom center / 100% var(--slice-media-edge-size) no-repeat,
    linear-gradient(to right, var(--carousel-layer-background, var(--slice-background, #222)) 0%, transparent 100%) left center / var(--slice-media-edge-size) 100% no-repeat,
    linear-gradient(to left, var(--carousel-layer-background, var(--slice-background, #222)) 0%, transparent 100%) right center / var(--slice-media-edge-size) 100% no-repeat;
  opacity: var(--slice-media-edge-opacity);
}
.portfolio-slice .portfolio-carousel-image-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  background: transparent;
}
.portfolio-carousel-image.is-current {
  position: relative;
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
}
.portfolio-carousel-image.is-current .portfolio-carousel-image-media {
  pointer-events: auto;
}
.portfolio-carousel-image.is-entering,
.portfolio-carousel-image.is-leaving {
  position: absolute;
  top: 0;
  left: 50%;
}
.portfolio-carousel-image.is-entering {
  z-index: 2;
}
.portfolio-carousel-image.is-leaving {
  z-index: 1;
  opacity: 1;
}
.portfolio-carousel-image.is-entering.from-left {
  transform: translateX(calc(-50% - 400px));
}
.portfolio-carousel-image.is-entering.from-right {
  transform: translateX(calc(-50% + 400px));
}
.portfolio-carousel-image.is-animating.is-entering,
.portfolio-carousel-image.is-animating.is-leaving {
  transition:
    transform 500ms cubic-bezier(0.85, 0, 0.15, 1),
    opacity 500ms cubic-bezier(0.2, 0, 0.8, 1);
}
.portfolio-carousel-image.is-animating.is-entering {
  transform: translateX(-50%);
  opacity: 1;
}
.portfolio-carousel-image.is-animating.is-leaving.to-left {
  transform: translateX(calc(-50% + 400px));
  opacity: 0;
}
.portfolio-carousel-image.is-animating.is-leaving.to-right {
  transform: translateX(calc(-50% - 400px));
  opacity: 0;
}
.portfolio-custom-media-wrap {
  background: transparent;
}

.portfolio-status-shell {
  display: grid;
  place-items: center;
  width: 100%;
}

.portfolio-status-mark,
.portfolio-status-line {
  margin: 0;
}

.portfolio-status-mark {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  white-space: normal;
  color: var(--slice-desc-color, inherit);
  user-select: none;
}

.portfolio-status-mark-panel {
  font-size: clamp(0.72rem, 1vw, 1rem);
  line-height: var(--tg-line);
  text-align: left;
}

.portfolio-ascii-row {
  display: block;
  white-space: pre;
}

.portfolio-ascii-cell {
  display: inline-block;
  min-width: 1ch;
  font-weight: 160;
  color: var(--slice-desc-color, currentColor);
  transition: font-weight 180ms ease, color 220ms ease;
}

.portfolio-ascii-cell[data-ascii-dither="true"] {
  color: #AC9D7C;
}

.design-thermo-stack,
.design-labcorp-grid,
.design-rendezvous-layout,
.design-gehc-flow,
.design-letters-ge-stack,
.design-osmo-pumps-layout {
  display: grid;
  gap: 1rem;
}

.design-thermo-stack figure,
.design-labcorp-grid figure,
.design-rendezvous-layout figure,
.design-gehc-flow figure,
.design-letters-ge-stack figure,
.design-osmo-pumps-layout figure,
.design-osmo-pumps-pair figure {
  margin: 0;
}

.design-thermo-pair,
.design-rendezvous-pair,
.design-osmo-pumps-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.design-osmo-pumps-pair {
  align-items: start;
}

.design-osmo-pumps-pair figure {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.design-gehc-flow-wide {
  width: 100%;
}

.design-gehc-flow-wide img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.design-osmo-pumps-pair img {
  width: auto;
  max-width: 100%;
  height: min(52rem, 62vw);
  object-fit: contain;
}

.design-osmo-pumps-layout > figure img {
  width: 100%;
  height: auto;
}

.design-rendezvous-layout {
  grid-template-columns: 1fr;
}

.design-thermo-stack img,
.design-labcorp-grid img,
.design-rendezvous-layout img,
.design-gehc-flow img,
.design-letters-ge-stack img,
.design-osmo-pumps-layout img,
.design-osmo-pumps-pair img {
  display: block;
  width: 100%;
  height: auto;
  background: transparent;
}

.portfolio-slice .design-thermo-stack img,
.portfolio-slice .design-labcorp-grid img,
.portfolio-slice .design-rendezvous-layout img,
.portfolio-slice .design-gehc-flow img,
.portfolio-slice .design-letters-ge-stack img,
.portfolio-slice .design-osmo-pumps-layout img,
.portfolio-slice .design-osmo-pumps-pair img {
  background: transparent;
}

.design-labcorp-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portfolio-custom-block {
  min-height: 12rem;
  border: 1px solid currentColor;
  padding: 1rem;
  display: flex;
  align-items: end;
}

@media (max-width: 1180px) {
  .design-labcorp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .design-thermo-stack,
  .design-thermo-pair,
  .design-labcorp-grid,
  .design-rendezvous-layout,
  .design-rendezvous-pair,
  .design-gehc-flow,
  .design-letters-ge-stack,
  .design-osmo-pumps-layout,
  .design-osmo-pumps-pair {
    gap: 0.75rem;
  }

  .design-labcorp-grid,
  .design-osmo-pumps-pair {
    grid-template-columns: 1fr;
  }

  .design-osmo-pumps-pair img {
    width: 100%;
    height: auto;
  }

  .grid { grid-template-columns: 1fr; }

  .portfolio-status-shell {
    min-height: 72vh;
  }

  .portfolio-status-mark-panel {
    font-size: clamp(0.48rem, 1.6vw, 0.8rem);
  }

  .site-nav-shell {
    gap: 1rem;
  }

  .site-nav {
    gap: 0.8rem;
  }
}
/* home: one full-screen section, title left, plain text buttons right */
.home {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6ch;
  padding: 0 4ch;
  position: relative;
  z-index: 1;
}
/* button hover video background: full-screen, behind content, non-interactive */
.home-bg-video {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--home-video-fade-ms, 1400ms) ease;
}
.home-bg-video.is-playing { opacity: 1; }
.home-mark {
  display: flex;
  flex-direction: column;
  gap: 1ch;
}
.home-logo {
  font-family: inherit;
}
.home-mark pre {
  margin: 0;
  font-family: inherit;
}
.home-sub {
  color: var(--fg);
  font-family: inherit;
}
.home-buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1ch;
}
.home-dissolve,
.site-dissolve {
  position: relative;
  display: inline-block;
  color: inherit;
}
.home-btn {
  min-height: 1em;
  text-decoration: none;
}
.home-dissolve-text {
  visibility: hidden;
  white-space: pre;
}
.home-dissolve-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .site-dissolve {
    transition: font-weight 140ms ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-dissolve-text {
    visibility: visible;
  }
  .home-dissolve-canvas {
    display: none;
  }

  .home[data-home-state="idle"] .home-logo { font-weight: 640; }
  .home[data-home-state="idle"] .home-sub,
  .home[data-home-state="idle"] .home-btn { font-weight: 160; }

  .home[data-home-state="hover"] .home-logo { font-weight: 160; }
  .home[data-home-state="hover"] .home-sub,
  .home[data-home-state="hover"] .home-btn { font-weight: 80; }
  .home[data-home-state="hover"] .home-btn.is-active { font-weight: 320; }

  .home[data-home-state="press"] .home-logo,
  .home[data-home-state="press"] .home-sub,
  .home[data-home-state="press"] .home-btn { font-weight: 80; }
  .home[data-home-state="press"] .home-btn.is-active { font-weight: 640; }
}