/* Patrick LeRoy — shared editorial portfolio system.
   Loaded last so one intentional layer owns the public-facing page rhythm. */

:root {
  --portfolio-paper: #f6f3ed;
  --portfolio-paper-raised: #fbfaf7;
  --portfolio-ink: #17140f;
  --portfolio-soft: #494239;
  --portfolio-muted: #756d62;
  --portfolio-line: rgba(23, 20, 15, 0.15);
  --portfolio-line-strong: rgba(23, 20, 15, 0.28);
  --portfolio-signal: var(--steel);
  --portfolio-signal-bright: var(--steel-bright);
  --portfolio-wide: 72rem;
  --portfolio-pad: clamp(22px, 6vw, 84px);
  --portfolio-serif: Georgia, "Times New Roman", serif;
  --portfolio-sans: "Archivo", Arial, sans-serif;
  --portfolio-mono: "IBM Plex Mono", "Courier New", monospace;
}

/* Shared interaction language -------------------------------------------- */

a,
button,
input,
textarea {
  -webkit-tap-highlight-color: rgba(154, 92, 40, 0.16);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--portfolio-signal) !important;
  outline-offset: 4px !important;
}

@media (hover: hover) {
  a {
    transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, transform 220ms cubic-bezier(.22, .8, .2, 1);
  }
}

/* Home — selected work --------------------------------------------------- */

.chapters > .selected-work.chapter {
  padding: clamp(72px, 9vw, 118px) var(--portfolio-pad) !important;
  border: 0 !important;
  background: var(--portfolio-paper) !important;
}

.selected-work__inner {
  width: min(100%, var(--portfolio-wide));
  margin-inline: auto;
}

.selected-work__head {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(16rem, .82fr);
  gap: 18px clamp(42px, 8vw, 112px);
  align-items: end;
  margin-bottom: clamp(42px, 5.5vw, 70px);
}

.selected-work__kicker,
.chapter-intro__kicker {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--portfolio-signal);
  font: 500 10px / 1 var(--portfolio-mono);
  letter-spacing: .19em;
  text-transform: uppercase;
}

.selected-work__head h2 {
  max-width: 15ch;
  margin: 0;
  color: var(--portfolio-ink);
  font: 400 clamp(36px, 5vw, 64px) / .98 var(--portfolio-serif);
  letter-spacing: -.045em;
  text-wrap: balance;
}

.selected-work__head > p:last-child {
  max-width: 31rem;
  margin: 0 0 .4em;
  color: var(--portfolio-soft);
  font: 400 clamp(15px, 1.2vw, 18px) / 1.65 var(--portfolio-serif);
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}

.work-card {
  position: relative;
  isolation: isolate;
  grid-column: span 6;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: clamp(280px, 31vw, 390px);
  padding: clamp(22px, 3vw, 36px);
  overflow: hidden;
  border: 1px solid var(--portfolio-line);
  color: var(--portfolio-ink);
  background: rgba(255, 255, 255, .24);
  text-decoration: none;
}

.work-card--lead {
  grid-column: span 7;
  color: var(--portfolio-paper);
  background: var(--portfolio-ink);
}

.work-card--systems {
  grid-column: span 5;
  color: var(--portfolio-paper);
  background: #302b24;
}

.work-card__meta {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid currentColor;
  color: inherit;
  font: 500 9px / 1.3 var(--portfolio-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .64;
}

.work-card__meta b {
  color: var(--portfolio-signal-bright);
  font: inherit;
}

.work-card:not(.work-card--lead):not(.work-card--systems) .work-card__meta b {
  color: var(--portfolio-signal);
}

.work-card__visual {
  position: absolute;
  z-index: -1;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: .13;
  transform: translate3d(16%, 8%, 0) scale(1.2);
  transition: opacity 260ms ease, transform 420ms cubic-bezier(.22, .8, .2, 1);
}

.work-card__visual img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  filter: grayscale(1) contrast(1.2);
}

.work-card__copy {
  position: relative;
  z-index: 2;
  align-self: end;
  display: grid;
  gap: 14px;
  max-width: 33rem;
  padding-top: 70px;
}

.work-card__copy strong {
  color: inherit;
  font: 400 clamp(31px, 4vw, 54px) / .98 var(--portfolio-serif);
  letter-spacing: -.04em;
}

.work-card__copy > span {
  max-width: 35rem;
  color: inherit;
  font: 400 clamp(14px, 1.05vw, 16px) / 1.55 var(--portfolio-serif);
  opacity: .68;
}

.work-card__action {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-top: 28px;
  color: inherit;
  font: 500 10px / 1 var(--portfolio-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.work-card__action i {
  font: 400 17px / 1 var(--portfolio-sans);
  transition: transform 220ms ease;
}

@media (hover: hover) {
  .work-card:hover {
    border-color: var(--portfolio-signal);
    background: var(--portfolio-paper-raised);
    transform: translateY(-4px);
  }

  .work-card--lead:hover,
  .work-card--systems:hover {
    color: var(--portfolio-paper);
    background: #201c17;
  }

  .work-card:hover .work-card__visual {
    opacity: .22;
    transform: translate3d(11%, 3%, 0) scale(1.08);
  }

  .work-card:hover .work-card__action i {
    transform: translate(3px, -3px);
  }
}

.selected-work__all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  margin-top: 18px;
  padding: 0 2px;
  border-bottom: 1px solid var(--portfolio-line-strong);
  color: var(--portfolio-ink);
  font: 500 10px / 1 var(--portfolio-mono);
  letter-spacing: .11em;
  text-decoration: none;
  text-transform: uppercase;
}

.selected-work__all span {
  font-size: 18px;
}

/* Standalone About / Work / Connect pages ------------------------------- */

body:has(> .chapter) {
  margin: 0;
  color: var(--portfolio-ink);
  background: var(--portfolio-paper) !important;
}

body:has(> .chapter) .chapter-scenery,
body:has(> .chapter) .chapter-glass {
  display: none !important;
}

body > .chapter {
  position: relative !important;
  z-index: 1;
  width: 100% !important;
  min-height: 100svh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  color: var(--portfolio-ink) !important;
  background: var(--portfolio-paper) !important;
}

body > .chapter .chapter-nav {
  position: sticky !important;
  z-index: 40 !important;
  top: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 66px !important;
  margin: 0 !important;
  padding: 0 var(--portfolio-pad) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--portfolio-line) !important;
  color: var(--portfolio-ink) !important;
  background: rgba(246, 243, 237, .9) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) saturate(.8);
}

.chapter-nav__home,
.chapter-nav__links,
.chapter-nav__links a {
  display: inline-flex !important;
  align-items: center !important;
}

.chapter-nav__home {
  gap: 12px !important;
  min-height: 44px;
  color: var(--portfolio-ink) !important;
  text-decoration: none !important;
}

.chapter-nav__home > span:first-child {
  color: var(--portfolio-signal) !important;
  font-size: 16px !important;
}

.chapter-nav__home .chapter__label {
  margin: 0 !important;
}

.chapter-nav__links {
  gap: clamp(18px, 3.5vw, 48px) !important;
}

.chapter-nav__links a,
.chapter-nav__home .chapter__label {
  min-height: 44px;
  padding: 0 !important;
  border: 0 !important;
  color: var(--portfolio-muted) !important;
  font: 500 10px / 1 var(--portfolio-mono) !important;
  letter-spacing: .12em !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}

.chapter-nav__links a[aria-current="page"] {
  color: var(--portfolio-ink) !important;
  box-shadow: inset 0 -1px var(--portfolio-signal);
}

body > .chapter main,
.portfolio-footer {
  width: min(calc(100% - (2 * var(--portfolio-pad))), var(--portfolio-wide)) !important;
  max-width: var(--portfolio-wide) !important;
  margin-inline: auto !important;
}

body > .chapter main {
  min-height: 0 !important;
  padding: clamp(72px, 9vw, 116px) 0 clamp(82px, 10vw, 132px) !important;
  color: var(--portfolio-ink) !important;
  background: transparent !important;
  text-align: left !important;
}

body > .chapter .chapter__label {
  margin: 0 0 clamp(38px, 5vw, 66px) !important;
  color: var(--portfolio-signal) !important;
  font: 500 10px / 1 var(--portfolio-mono) !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

.chapter-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(16rem, .75fr);
  gap: 18px clamp(42px, 8vw, 112px);
  align-items: end;
  margin-bottom: clamp(48px, 7vw, 90px);
}

.chapter-intro h2 {
  max-width: 15ch;
  margin: 0 !important;
  color: var(--portfolio-ink) !important;
  font: 400 clamp(43px, 6.3vw, 78px) / .96 var(--portfolio-serif) !important;
  letter-spacing: -.052em !important;
  text-wrap: balance;
  text-shadow: none !important;
}

.chapter-intro > p:last-child {
  max-width: 30rem;
  margin: 0 0 .45em;
  color: var(--portfolio-soft);
  font: 400 clamp(15px, 1.3vw, 19px) / 1.62 var(--portfolio-serif);
}

.page-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 clamp(56px, 7vw, 88px);
  padding: 0;
  border-top: 1px solid var(--portfolio-line-strong);
  border-bottom: 1px solid var(--portfolio-line-strong);
}

.page-facts > div {
  min-width: 0;
  padding: 18px clamp(14px, 2vw, 24px) 20px 0;
  border-right: 1px solid var(--portfolio-line);
}

.page-facts > div:not(:first-child) {
  padding-left: clamp(14px, 2vw, 24px);
}

.page-facts > div:last-child {
  border-right: 0;
}

.page-facts dt {
  margin-bottom: 8px;
  color: var(--portfolio-muted);
  font: 500 9px / 1 var(--portfolio-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.page-facts dd {
  margin: 0;
  color: var(--portfolio-ink);
  font: 400 14px / 1.45 var(--portfolio-serif);
}

/* About */

body > .chapter .chapter__hang {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(72px, 9vw, 116px) 0 clamp(82px, 10vw, 132px) !important;
  transform: none !important;
}

.chapter__hang .painting,
.chapter__hang .painting__mat,
.chapter__hang .painting__canvas {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--portfolio-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

.chapter__hang .painting::before,
.chapter__hang .painting::after,
.chapter__hang .painting__mat::before,
.chapter__hang .painting__mat::after {
  content: none !important;
}

.chapter__hang .painting__canvas {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(42px, 7vw, 96px) !important;
  padding-top: clamp(34px, 4vw, 52px) !important;
  border-top: 1px solid var(--portfolio-line-strong) !important;
}

.chapter__hang .painting__canvas p {
  margin: 0 0 1.55em !important;
  color: var(--portfolio-soft) !important;
  font: 400 clamp(15px, 1.12vw, 17px) / 1.7 var(--portfolio-serif) !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-shadow: none !important;
}

.chapter__hang .painting__canvas p:first-child {
  grid-column: 1 / -1;
  max-width: 18ch;
  margin-bottom: clamp(48px, 6vw, 78px) !important;
  color: var(--portfolio-ink) !important;
  font: 400 clamp(34px, 4.8vw, 62px) / 1.03 var(--portfolio-serif) !important;
  letter-spacing: -.04em !important;
}

.chapter__hang .painting__canvas p:last-child {
  grid-column: 1 / -1;
  max-width: 42rem;
  margin: clamp(24px, 4vw, 48px) 0 0 auto !important;
  padding-top: 28px;
  border-top: 1px solid var(--portfolio-line);
  color: var(--portfolio-ink) !important;
  font-size: clamp(18px, 1.6vw, 23px) !important;
  line-height: 1.5 !important;
}

/* Work index */

body > .chapter .venture-project-page {
  display: block !important;
  width: min(calc(100% - (2 * var(--portfolio-pad))), var(--portfolio-wide)) !important;
  max-width: var(--portfolio-wide) !important;
  margin-inline: auto !important;
}

.venture-project-page .venture-section {
  display: grid !important;
  gap: clamp(64px, 8vw, 104px) !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.venture-project-page .venture-index {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

.venture-project-page .venture {
  position: relative !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto auto !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: clamp(250px, 28vw, 350px) !important;
  margin: 0 !important;
  padding: clamp(22px, 3vw, 36px) !important;
  overflow: hidden !important;
  border: 1px solid var(--portfolio-line) !important;
  border-radius: 0 !important;
  color: var(--portfolio-ink) !important;
  background: rgba(255, 255, 255, .24) !important;
  text-decoration: none !important;
  text-align: left !important;
  transform: none !important;
}

.venture-project-page .venture__status {
  position: relative;
  z-index: 2;
  color: var(--portfolio-signal);
  font: 500 9px / 1 var(--portfolio-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.venture-project-page .venture__name {
  position: relative !important;
  z-index: 2;
  align-self: end !important;
  max-width: 11ch;
  margin: 54px 0 0 !important;
  color: inherit !important;
  font: 400 clamp(32px, 4.2vw, 56px) / .95 var(--portfolio-serif) !important;
  letter-spacing: -.045em !important;
  text-shadow: none !important;
}

.venture-project-page .venture__description {
  position: relative;
  z-index: 2;
  max-width: 30rem;
  color: var(--portfolio-soft);
  font: 400 15px / 1.55 var(--portfolio-serif);
}

.venture-project-page .venture__mark {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  width: auto !important;
  height: auto !important;
  opacity: .08 !important;
  transform: translate3d(22%, 5%, 0) scale(1.3) !important;
  pointer-events: none;
}

.venture-project-page .venture__mark img {
  width: 68% !important;
  height: 68% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
  filter: grayscale(1) contrast(1.15) !important;
}

.venture-project-page .venture__arrow {
  position: absolute;
  z-index: 3;
  right: clamp(22px, 3vw, 36px);
  bottom: clamp(22px, 3vw, 36px);
  font: 400 20px / 1 var(--portfolio-sans);
  transition: transform 220ms ease;
}

@media (hover: hover) {
  .venture-project-page .venture:hover {
    border-color: var(--portfolio-signal) !important;
    background: var(--portfolio-paper-raised) !important;
    transform: translateY(-4px) !important;
  }

  .venture-project-page .venture:hover .venture__mark {
    opacity: .15 !important;
  }

  .venture-project-page .venture:hover .venture__arrow {
    transform: translate(3px, -3px);
  }
}

.venture-lab {
  display: grid;
  grid-template-columns: minmax(14rem, .65fr) minmax(0, 1.35fr);
  gap: 36px clamp(42px, 8vw, 112px);
  padding-top: clamp(36px, 5vw, 64px);
  border-top: 1px solid var(--portfolio-line-strong);
}

.venture-lab header h2 {
  max-width: 11ch;
  margin: 18px 0 0;
  color: var(--portfolio-ink);
  font: 400 clamp(28px, 3.4vw, 44px) / 1 var(--portfolio-serif);
  letter-spacing: -.035em;
}

.venture-lab ul {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--portfolio-line);
  list-style: none;
}

.venture-lab li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  border-bottom: 1px solid var(--portfolio-line);
}

.venture-lab li strong {
  color: var(--portfolio-ink);
  font: 400 clamp(18px, 1.7vw, 24px) / 1.2 var(--portfolio-serif);
}

.venture-lab li span {
  color: var(--portfolio-muted);
  font: 500 9px / 1 var(--portfolio-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Connect page */

body > .chapter .connect {
  display: block !important;
  width: min(calc(100% - (2 * var(--portfolio-pad))), var(--portfolio-wide)) !important;
  max-width: var(--portfolio-wide) !important;
  margin-inline: auto !important;
}

.connect .chapter-intro--connect h2 {
  max-width: 12ch;
}

.connect .connect__block {
  display: grid !important;
  grid-template-columns: minmax(14rem, .7fr) minmax(0, 1.3fr) !important;
  gap: 24px clamp(46px, 8vw, 112px) !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(40px, 5vw, 64px) 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--portfolio-line-strong) !important;
  border-radius: 0 !important;
  color: var(--portfolio-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  text-align: left !important;
}

.connect .connect__title,
.connect .section-title {
  grid-column: 1;
  max-width: 12ch;
  margin: 0 !important;
  color: var(--portfolio-ink) !important;
  font: 400 clamp(30px, 4vw, 50px) / 1 var(--portfolio-serif) !important;
  letter-spacing: -.035em !important;
  text-align: left !important;
  text-shadow: none !important;
}

.connect .connect__address {
  grid-column: 1;
  align-self: start;
  display: flex !important;
  justify-content: space-between;
  min-height: 48px;
  margin: 12px 0 0 !important;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--portfolio-line-strong);
  color: var(--portfolio-ink) !important;
  font: 500 11px / 1.4 var(--portfolio-mono) !important;
  letter-spacing: .03em !important;
  text-decoration: none !important;
  text-align: left !important;
  text-shadow: none !important;
}

.connect .form {
  grid-column: 2;
  grid-row: 1 / span 3;
  display: grid !important;
  gap: 28px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(26px, 3.5vw, 42px) !important;
  border: 1px solid var(--portfolio-line) !important;
  background: var(--portfolio-paper-raised) !important;
  justify-items: stretch !important;
}

.connect .field {
  display: grid !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
  justify-items: stretch !important;
}

.connect .field__label {
  color: var(--portfolio-muted) !important;
  font: 500 9px / 1 var(--portfolio-mono) !important;
  letter-spacing: .14em !important;
  text-align: left !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

.connect .field__input {
  box-sizing: border-box;
  width: 100% !important;
  padding: 12px 0 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--portfolio-line-strong) !important;
  border-radius: 0 !important;
  color: var(--portfolio-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  font: 400 16px / 1.45 var(--portfolio-serif) !important;
  text-align: left !important;
}

.connect .field__input--area {
  min-height: 8rem !important;
  resize: vertical;
}

.connect .button {
  justify-self: start !important;
  min-width: 9rem !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 24px !important;
  border: 1px solid var(--portfolio-ink) !important;
  border-radius: 999px !important;
  color: var(--portfolio-paper) !important;
  background: var(--portfolio-ink) !important;
  font: 500 10px / 1 var(--portfolio-mono) !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
}

.connect .accounts {
  grid-column: 2;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: 1px solid var(--portfolio-line) !important;
  list-style: none;
}

.connect .account {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px 18px !important;
  min-height: 128px !important;
  padding: 22px !important;
  border: 0 !important;
  border-right: 1px solid var(--portfolio-line) !important;
  border-bottom: 1px solid var(--portfolio-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.connect .account:nth-child(even) {
  border-right: 0 !important;
}

.connect .account__handle {
  grid-column: 1 / -1;
  color: var(--portfolio-ink) !important;
  font: 400 21px / 1.1 var(--portfolio-serif) !important;
}

.connect .account__desc {
  align-self: end;
  color: var(--portfolio-muted) !important;
  font: 500 9px / 1.3 var(--portfolio-mono) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.connect .account__links {
  align-self: end;
  display: flex !important;
  gap: 8px !important;
}

.connect .account__links a {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  overflow: hidden;
  border: 1px solid var(--portfolio-line) !important;
  border-radius: 50% !important;
  color: transparent !important;
}

.connect .account__links img {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  filter: grayscale(1) !important;
  opacity: .72 !important;
}

/* Shared standalone footer */

.portfolio-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 28px 0 34px;
  border-top: 1px solid var(--portfolio-line-strong);
}

.portfolio-footer p {
  margin: 0;
  color: var(--portfolio-muted);
  font: 500 9px / 1.4 var(--portfolio-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.portfolio-footer nav {
  display: flex;
  gap: 24px;
}

.portfolio-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--portfolio-ink);
  font: 500 9px / 1 var(--portfolio-mono);
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
}

/* Venture stories -------------------------------------------------------- */

body.venture {
  color: var(--portfolio-ink);
  background: var(--portfolio-paper) !important;
}

.venture .venture__wrap {
  width: min(100%, 100rem) !important;
}

.venture .vbar {
  position: sticky !important;
  z-index: 40;
  top: 0;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  min-height: 66px;
  padding-block: 0 !important;
  border-bottom: 1px solid var(--portfolio-line);
  background: rgba(246, 243, 237, .9);
  backdrop-filter: blur(18px) saturate(.8);
}

.venture .vbar__back,
.venture .vbar__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.venture .vbar__links {
  display: flex;
  gap: clamp(16px, 2.8vw, 36px);
  align-items: center;
}

.venture .vbar__links a,
.venture .vbar__here {
  color: var(--portfolio-muted);
  font: 500 9px / 1 var(--portfolio-mono);
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
}

.venture .vbar__here {
  margin: 0;
  padding-left: clamp(16px, 2.8vw, 36px);
  border-left: 1px solid var(--portfolio-line);
  color: var(--portfolio-signal);
}

.venture .vhead__eyebrow,
.venture .vsection__label,
.venture .vnext__label {
  color: var(--portfolio-signal) !important;
}

.venture .vsection__label {
  padding-top: 2px;
  font-weight: 500 !important;
  letter-spacing: .15em !important;
}

.venture .vsection {
  border-top-color: var(--portfolio-line-strong) !important;
}

.venture .vsection__copy p,
.venture .vsection__copy li,
.venture .vhead__lede {
  color: var(--portfolio-soft) !important;
}

.venture .vnext__links a {
  min-height: 84px;
}

.venture .vfoot {
  border-top-color: var(--portfolio-line-strong) !important;
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 820px) {
  .selected-work__head,
  .chapter-intro,
  .venture-lab,
  .connect .connect__block {
    grid-template-columns: 1fr !important;
  }

  .work-card,
  .work-card--lead,
  .work-card--systems {
    grid-column: 1 / -1;
  }

  .page-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-facts > div:nth-child(2) {
    border-right: 0;
  }

  .page-facts > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--portfolio-line);
  }

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

  .chapter__hang .painting__canvas p:first-child,
  .chapter__hang .painting__canvas p:last-child {
    grid-column: 1;
  }

  .connect .form,
  .connect .accounts {
    grid-column: 1;
    grid-row: auto;
  }

  .connect .form {
    margin-top: 18px !important;
  }
}

@media (max-width: 640px) {
  body > .chapter .chapter-nav {
    min-height: 58px !important;
  }

  .chapter-nav__links {
    gap: 16px !important;
  }

  .chapter-nav__links a,
  .chapter-nav__home .chapter__label {
    font-size: 8px !important;
  }

  .chapter-nav__home > span:first-child {
    margin-right: -7px;
  }

  body > .chapter main,
  body > .chapter .chapter__hang {
    padding-top: 58px !important;
    padding-bottom: 82px !important;
  }

  .selected-work__head h2,
  .chapter-intro h2 {
    max-width: none;
  }

  .work-card {
    min-height: 280px;
  }

  .page-facts,
  .venture-project-page .venture-index,
  .connect .accounts {
    grid-template-columns: 1fr !important;
  }

  .page-facts > div,
  .page-facts > div:not(:first-child) {
    padding: 14px 0 16px;
    border-right: 0;
    border-bottom: 1px solid var(--portfolio-line);
  }

  .page-facts > div:last-child {
    border-bottom: 0;
  }

  .connect .account,
  .connect .account:nth-child(even) {
    border-right: 0 !important;
  }

  .portfolio-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .portfolio-footer nav {
    flex-wrap: wrap;
    gap: 18px;
  }

  .venture .vbar__links a {
    display: none;
  }

  .venture .vbar__here {
    padding-left: 0;
    border-left: 0;
  }
}

/* Progressive motion: subtle, content-led, and optional. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .work-card,
    .venture-project-page .venture,
    .venture .vsection {
      animation: portfolio-enter linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 24%;
    }
  }
}

@keyframes portfolio-enter {
  from { opacity: .18; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Keep the quiet inline-link treatment without shrinking the usable target. */
.connect__note a,
.venture main li > a,
.venture .vfoot a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}