:root {
  --pointer-x: 50vw;
  --pointer-y: 50vh;
}

.subpage {
  min-height: 100vh;
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(211, 179, 123, .08), transparent 18rem),
    linear-gradient(180deg, #030303 0%, #0a0907 48%, #030303 100%);
  color: var(--text);
}

.subpage::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 88px 88px;
  content: "";
  opacity: .12;
  mask-image: radial-gradient(circle at 50% 28%, #000, transparent 70%);
}

.it-page {
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(104, 144, 153, .11), transparent 18rem),
    linear-gradient(180deg, #030404 0%, #071011 52%, #030303 100%);
}

.mental-page {
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(168, 113, 66, .08), transparent 16rem),
    linear-gradient(180deg, #030303 0%, #080706 45%, #020202 100%);
}

.art-page {
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(218, 188, 130, .08), transparent 20rem),
    linear-gradient(180deg, #050504 0%, #0c0b09 54%, #030303 100%);
}

.subpage-topbar {
  pointer-events: auto;
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(3, 3, 3, .72), transparent);
}

.subnav {
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, 2vw, 18px);
}

.subnav a {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
}

.subnav a:hover,
.subnav a:focus-visible,
.subnav a[aria-current="page"] {
  color: var(--brass-soft);
  outline: none;
}

.subpage-shell {
  width: min(1180px, calc(100vw - 40px));
  margin: 0 auto;
  padding: 132px 0 72px;
}

.subpage-hero {
  position: relative;
  display: grid;
  min-height: min(760px, calc(100vh - 132px));
  align-content: center;
  padding: clamp(42px, 9vw, 112px) 0;
}

.subpage-hero::after {
  position: absolute;
  right: 0;
  bottom: 14%;
  left: 34%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(211, 179, 123, .36), transparent);
  content: "";
}

.eyebrow,
.section-kicker,
.meta-line {
  margin: 0 0 16px;
  color: var(--brass-soft);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.it-page .eyebrow,
.it-page .section-kicker {
  color: var(--cool);
}

.subpage h1,
.subpage h2,
.subpage h3 {
  margin: 0;
  font-family: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  font-weight: 500;
  letter-spacing: 0;
}

.subpage h1 {
  max-width: 820px;
  font-size: clamp(72px, 15vw, 176px);
  line-height: .82;
  overflow-wrap: anywhere;
}

.subpage h2 {
  font-size: clamp(42px, 7vw, 92px);
  line-height: .9;
  overflow-wrap: anywhere;
}

.subpage h3 {
  font-size: clamp(28px, 4vw, 52px);
  line-height: .95;
  overflow-wrap: anywhere;
}

.lead {
  width: 100%;
  max-width: 620px;
  margin: 28px 0 0;
  color: #c8beaa;
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.55;
  overflow-wrap: break-word;
}

.home-link {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
  color: var(--brass-soft);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .16em;
  text-decoration: none;
  text-transform: uppercase;
}

.home-link::after {
  width: 48px;
  height: 1px;
  background: currentColor;
  content: "";
}

.home-link:focus-visible {
  outline: 1px solid var(--focus);
  outline-offset: 8px;
}

.subpage-section {
  padding: clamp(52px, 9vw, 112px) 0;
  border-top: 1px solid rgba(211, 179, 123, .13);
}

.split-layout {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 7vw, 96px);
  align-items: start;
}

.stack {
  display: grid;
  gap: 18px;
}

.quiet-panel {
  position: relative;
  padding: 24px;
  border: 1px solid rgba(211, 179, 123, .14);
  border-radius: 6px;
  background: rgba(255, 255, 255, .025);
  overflow: hidden;
}

.it-page .quiet-panel {
  border-color: rgba(158, 185, 195, .18);
}

.quiet-panel::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .045), transparent);
  content: "";
  opacity: 0;
  transform: translateX(-30%);
  transition: opacity .24s ease, transform .5s ease;
}

.quiet-panel:hover::before,
.quiet-panel:focus-within::before {
  opacity: 1;
  transform: translateX(30%);
}

.quiet-panel p,
.subpage-section p,
.quiet-list {
  width: 100%;
  color: #ada48f;
  line-height: 1.72;
}

.quiet-panel p {
  margin: 12px 0 0;
}

.quiet-list {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 22px 0 0;
  list-style: none;
}

.quiet-list li {
  border-left: 1px solid rgba(211, 179, 123, .26);
  padding-left: 14px;
}

.technical-map {
  position: relative;
  min-height: 420px;
  border: 1px solid rgba(158, 185, 195, .16);
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(158, 185, 195, .06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(158, 185, 195, .04) 1px, transparent 1px),
    rgba(4, 9, 10, .48);
  background-size: 56px 56px;
  overflow: hidden;
}

.technical-map::before {
  position: absolute;
  inset: 18% 10%;
  border: 1px solid rgba(158, 185, 195, .18);
  content: "";
  transform: skewY(-7deg);
}

.node {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid var(--cool);
  background: rgba(158, 185, 195, .18);
  box-shadow: 0 0 22px rgba(158, 185, 195, .18);
}

.node-a { left: 18%; top: 30%; }
.node-b { left: 52%; top: 22%; }
.node-c { left: 72%; top: 58%; }
.node-d { left: 32%; top: 72%; }

.map-label {
  position: absolute;
  right: 24px;
  bottom: 22px;
  color: #9eb9c3;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.pressure-field {
  position: relative;
  min-height: 430px;
  border-radius: 6px;
  background:
    radial-gradient(circle at 50% 42%, rgba(179, 139, 85, .13), transparent 32%),
    linear-gradient(90deg, transparent 0 46%, rgba(211, 179, 123, .18) 46% 47%, transparent 47% 100%),
    rgba(10, 8, 7, .65);
  border: 1px solid rgba(211, 179, 123, .14);
  overflow: hidden;
}

.pressure-field::before,
.pressure-field::after {
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(211, 179, 123, .13);
  content: "";
  transform: rotate(-8deg);
}

.pressure-field::after {
  inset: 32% 24%;
  border-color: rgba(255, 255, 255, .09);
  transform: rotate(11deg);
}

.breath-line {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(211, 179, 123, .72), transparent);
}

.artwork-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, .55fr);
  gap: clamp(28px, 6vw, 72px);
  align-items: center;
}

.artwork-frame {
  position: relative;
  margin: 0;
  padding: clamp(18px, 4vw, 42px);
  border: 1px solid rgba(211, 179, 123, .16);
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 244, 216, .1), transparent 38%),
    rgba(255, 255, 255, .025);
}

.artwork-frame img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .48);
}

.artwork-frame figcaption {
  margin-top: 18px;
  color: #a99b82;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.gallery-rail {
  display: grid;
  gap: 24px;
}

.small-work {
  transform: translateY(var(--rail-offset, 0));
}

.small-work:nth-child(2) {
  --rail-offset: 42px;
}

.page-footer {
  padding: 48px 0 72px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 760px) {
  .subpage-topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
    padding-bottom: 18px;
  }

  .subpage-topbar .brand-lockup span {
    display: inline;
  }

  .subnav {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px 16px;
    padding-left: 48px;
  }

  .subpage-shell {
    width: calc(100vw - 40px);
    max-width: 640px;
    padding-top: 142px;
    overflow: hidden;
  }

  .subpage-hero {
    min-height: auto;
    padding: 56px 0 76px;
  }

  .subpage h1 {
    font-size: clamp(48px, 16vw, 72px);
    word-break: break-word;
  }

  .mental-page .subpage h1 {
    font-size: clamp(44px, 14.5vw, 64px);
  }

  .subpage h2 {
    font-size: clamp(36px, 12vw, 54px);
    word-break: break-word;
  }

  .lead,
  .subpage-section p,
  .quiet-panel p,
  .quiet-list {
    width: 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .lead {
    max-width: 29ch;
  }

  .subpage-section p,
  .quiet-panel p,
  .quiet-list {
    max-width: 32ch;
  }

  .subpage h2 {
    max-width: 10ch;
  }

  .it-page .subpage h2 {
    max-width: 11ch;
  }

  .split-layout,
  .artwork-stage {
    grid-template-columns: 1fr;
  }

  .technical-map,
  .pressure-field {
    min-height: 310px;
  }

  .small-work:nth-child(2) {
    --rail-offset: 0;
  }
}