:root {
  --ink: #111210;
  --paper: #eeece6;
  --surface: #d9d7d0;
  --steel: #727972;
  --midnight: #151923;
  --oxblood: #542e34;
  --brass: #a39270;
  --rule: rgba(17, 18, 16, 0.22);
  --rule-light: rgba(238, 236, 230, 0.22);
  --serif: "Newsreader", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 16px; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
::selection { color: var(--paper); background: var(--ink); }
.scroll-progress { height: 2px; position: fixed; z-index: 100; top: 0; left: 0; right: 0; pointer-events: none; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, #7986a8, #c3a66e); box-shadow: 0 0 12px rgba(126,143,188,0.35); will-change: transform; }

.site-header {
  height: 84px;
  padding: 0 clamp(24px, 4.2vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(238, 236, 230, 0.1);
  position: relative;
  z-index: 20;
  color: var(--paper);
  background: #0d0e0f;
}
.wordmark { width: 52px; height: 40px; position: relative; display: block; color: var(--paper); }
.wordmark span { position: absolute; display: block; color: inherit; }
.monogram-t { left: 0; top: 0; font: 500 38px/1 var(--serif); letter-spacing: -0.08em; }
.monogram-s { left: 21px; top: 7px; font: italic 400 30px/1 var(--serif); letter-spacing: -0.09em; transform: rotate(-7deg); }
.wordmark i { width: 43px; height: 10px; position: absolute; left: 2px; bottom: -1px; border-top: 1px solid rgba(238,236,230,0.72); border-radius: 50%; transform: rotate(-5deg); transition: width 0.35s cubic-bezier(.2,.8,.2,1), transform 0.35s ease; }
.wordmark:hover i { width: 49px; transform: rotate(-2deg) translateX(2px); }
nav { display: flex; gap: 42px; font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: 0.14em; }
nav a { transition: opacity 0.2s ease; }
nav a:hover { opacity: 0.45; }
.menu-toggle { display: none; background: none; border: 0; padding: 10px; }
.menu-toggle span { display: block; width: 24px; height: 1px; margin: 6px; background: var(--ink); }

.announcement {
  min-height: 42px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(24px, 4.2vw, 72px);
  color: #eaded2;
  background:
    linear-gradient(90deg, rgba(117, 57, 38, 0.4), rgba(89, 42, 47, 0.5) 52%, rgba(79, 50, 35, 0.42)),
    #201719;
  border-top: 1px solid rgba(220, 157, 112, 0.12);
  border-bottom: 1px solid rgba(228, 174, 130, 0.18);
  box-shadow: inset 0 1px 18px rgba(172, 86, 52, 0.08);
  font: 400 9px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.announcement-label { color: #b8957f; }
.announcement .arrow { justify-self: end; font-size: 14px; transition: transform 0.2s ease; }
.announcement:hover .arrow { transform: translate(3px, -3px); }

.section-pad { padding-left: clamp(24px, 7.2vw, 120px); padding-right: clamp(24px, 7.2vw, 120px); }
.eyebrow { margin: 0; font: 500 9px var(--mono); text-transform: uppercase; letter-spacing: 0.17em; }

.hero {
  min-height: calc(100vh - 126px);
  position: relative;
  padding-top: clamp(65px, 8vw, 120px);
  padding-bottom: 48px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  color: var(--paper);
  background:
    radial-gradient(circle at 82% 18%, rgba(71, 82, 119, 0.22), transparent 31%),
    radial-gradient(circle at 16% 84%, rgba(103, 53, 59, 0.17), transparent 35%),
    linear-gradient(145deg, #111315 0%, #0c0d0f 56%, #141316 100%);
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: 0.21;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -38%;
  right: -8%;
  width: 58vw;
  height: 58vw;
  border-radius: 50%;
  background: rgba(103, 119, 170, 0.09);
  filter: blur(90px);
  animation: ambient-drift 14s ease-in-out infinite alternate;
}
.hero h1 {
  position: relative;
  z-index: 2;
  max-width: calc(100% - clamp(300px, 28vw, 450px));
  margin: 44px 0 60px;
  font: 400 clamp(61px, 7.2vw, 116px)/0.86 var(--serif);
  letter-spacing: -0.064em;
}
.hero h1 em {
  color: #9ea6b8;
  font-weight: 300;
  text-shadow: 0 0 45px rgba(89, 103, 148, 0.18);
}
.hero-portrait {
  width: clamp(210px, 22vw, 345px);
  height: clamp(285px, 43vh, 480px);
  margin: 0;
  position: absolute;
  z-index: 1;
  right: clamp(24px, 7.2vw, 120px);
  top: clamp(205px, 25vh, 270px);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 18px;
  background: linear-gradient(#171817, #171817) padding-box, linear-gradient(145deg, rgba(220,224,235,0.32), rgba(112,122,151,0.08) 48%, rgba(181,145,97,0.23)) border-box;
  box-shadow: 0 42px 95px rgba(0,0,0,0.52), 0 0 52px rgba(75,88,127,0.12), 0 1px 0 rgba(255,255,255,0.08) inset;
  will-change: transform;
}
.hero-portrait::before { content: ""; position: absolute; z-index: 2; inset: 10px; pointer-events: none; border: 1px solid rgba(238,236,230,0.09); border-radius: 11px; box-shadow: 0 1px 0 rgba(255,255,255,0.035) inset; }
.hero-portrait::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent 24%, transparent 58%, rgba(10,11,12,0.7)); }
.hero-portrait img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 33%; filter: saturate(0.62) contrast(1.03) brightness(0.78); transition: transform 1.2s cubic-bezier(.2,.8,.2,1), filter 1.2s ease; }
.hero-portrait:hover img { transform: scale(1.018); filter: saturate(0.75) contrast(1.03) brightness(0.86); }
.hero-portrait figcaption { position: absolute; z-index: 3; left: 20px; bottom: 18px; padding: 7px 10px; color: rgba(238,236,230,0.75); border: 1px solid rgba(238,236,230,0.1); border-radius: 99px; background: rgba(12,13,14,0.48); backdrop-filter: blur(10px); font: 400 7px var(--mono); text-transform: uppercase; letter-spacing: 0.14em; }
.hero-foot { z-index: 2; margin-top: auto; padding-left: 34%; display: flex; justify-content: space-between; align-items: end; }
.hero-foot > p { max-width: 420px; margin: 0; font: 400 18px/1.55 var(--serif); }
.text-link {
  display: inline-flex;
  gap: 35px;
  padding-bottom: 8px;
  border-bottom: 1px solid;
  font: 500 9px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.13em;
}
.text-link span { transition: transform 0.2s ease; }
.text-link:hover span { transform: translate(3px, -3px); }
.chapter-mark {
  position: absolute;
  z-index: -1;
  right: 2vw;
  top: 43%;
  color: rgba(238, 236, 230, 0.025);
  font: 400 clamp(130px, 20vw, 330px)/1 var(--sans);
  letter-spacing: -0.09em;
}

.dark-section {
  color: var(--paper);
  background:
    radial-gradient(circle at 10% 28%, rgba(74, 42, 48, 0.11), transparent 28%),
    radial-gradient(circle at 92% 76%, rgba(51, 61, 87, 0.13), transparent 31%),
    #10110f;
}
.books { padding-top: 155px; padding-bottom: 175px; }
.section-intro { display: grid; grid-template-columns: 1fr 2.15fr 1fr; gap: 48px; align-items: start; margin-bottom: 140px; }
.section-intro h2 { margin: -8px 0 0; font: 400 clamp(50px, 5.8vw, 94px)/0.94 var(--serif); letter-spacing: -0.045em; }
.section-intro > p:last-child { margin: 0; color: #aaaca7; font: 300 16px/1.65 var(--sans); }
.book { max-width: 1160px; margin: 0 auto 180px; display: grid; grid-template-columns: minmax(280px, 440px) minmax(350px, 570px); gap: clamp(80px, 12vw, 190px); align-items: center; }
.book:last-child { margin-bottom: 0; }
.book-reverse { grid-template-columns: minmax(350px, 570px) minmax(280px, 440px); }
.book-reverse .book-cover { order: 2; }
.book-cover {
  aspect-ratio: 0.69;
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 35px 85px rgba(0,0,0,0.5);
  transition: transform 0.4s ease;
}
.book-cover:hover { transform: translateY(-7px); }
.book-cover span, .book-cover small { font: 500 8px var(--mono); text-transform: uppercase; letter-spacing: 0.16em; }
.book-cover strong { font: 400 clamp(50px, 5.5vw, 82px)/0.84 var(--serif); letter-spacing: -0.06em; }
.cover-old { padding: 0; color: #161713; background: #cbc8bd; }
.cover-old img { width: 100%; height: 100%; display: block; object-fit: cover; }
.cover-banished { padding: 0; color: #e6e3da; background: #101315; }
.cover-banished img { width: 100%; height: 100%; display: block; object-fit: cover; }
.book-copy .index { margin: 0 0 45px; color: #696c67; font: 400 12px var(--mono); }
.book-copy h3 { margin: 0 0 28px; font: 400 clamp(45px, 5vw, 74px)/1 var(--serif); letter-spacing: -0.045em; }
.book-copy .dek { max-width: 510px; color: #aaaca7; font: 300 16px/1.7 var(--sans); }
.book-copy blockquote { margin: 48px 0 0; padding: 38px 0 10px; border-top: 1px solid #474943; font: 300 23px/1.5 var(--serif); }
.book-copy blockquote p { margin: 0; }
.book-copy blockquote cite { margin-top: 22px; display: block; color: #858883; font: normal 400 12px/1.5 var(--mono); text-transform: uppercase; letter-spacing: 0.11em; }
.placeholder-note { color: #686b66; font: 400 8px var(--mono); text-transform: uppercase; letter-spacing: 0.14em; }

.skevara {
  padding-top: 150px;
  padding-bottom: 150px;
  color: var(--paper);
  background:
    radial-gradient(circle at 88% 14%, rgba(83, 99, 145, 0.24), transparent 30%),
    radial-gradient(circle at 6% 90%, rgba(96, 51, 60, 0.13), transparent 31%),
    linear-gradient(135deg, #171a21 0%, #101215 55%, #171416 100%);
}
.skevara-heading { max-width: 920px; margin: 0 auto; text-align: center; }
.skevara-heading h2 { margin: 34px 0 30px; font: 400 clamp(58px, 7vw, 112px)/0.9 var(--serif); letter-spacing: -0.055em; }
.skevara-heading > p:last-child { max-width: 640px; margin: 0 auto; color: #b8bab7; font: 400 18px/1.65 var(--serif); }
.skevara-features { margin: 90px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(238,236,230,0.16); border-bottom: 1px solid rgba(238,236,230,0.16); }
.skevara-features > div { min-height: 155px; padding: 26px clamp(20px, 3vw, 45px); display: grid; grid-template-columns: 30px 1fr; gap: 8px; border-right: 1px solid rgba(238,236,230,0.12); }
.skevara-features > div:first-child { padding-left: 0; }
.skevara-features > div:last-child { padding-right: 0; border-right: 0; }
.skevara-features span { padding-top: 2px; color: #8d929d; font: 400 10px/1.5 var(--mono); }
.skevara-features p { margin: 0; color: #a6a9a5; font: 300 14px/1.6 var(--sans); }
.skevara-features strong { display: block; margin-bottom: 6px; color: #e2e1dc; font: 500 14px/1.45 var(--sans); }
.skevara-features.reveal > div { opacity: 1; transform: none; transition: none; }
.waitlist { display: flex; border-bottom: 1px solid rgba(238,236,230,0.42); }
.waitlist input { width: 100%; padding: 18px 0; color: var(--paper); border: 0; outline: none; background: transparent; font: 400 12px var(--mono); }
.waitlist input::placeholder { color: #858984; }
.waitlist button { padding: 0; color: var(--paper); border: 0; background: transparent; white-space: nowrap; cursor: pointer; font: 500 9px var(--mono); text-transform: uppercase; letter-spacing: 0.12em; }
.form-note { opacity: 0.55; font: 400 8px var(--mono); text-transform: uppercase; letter-spacing: 0.11em; }
.skevara-showcase {
  min-height: 520px;
  margin-top: 76px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: stretch;
  color: var(--paper);
  border: 1px solid rgba(213, 179, 112, 0.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 78% 16%, rgba(110, 91, 56, 0.18), transparent 26%),
    linear-gradient(135deg, #0c0d0e, #171713 60%, #0d0e10);
  box-shadow: 0 42px 95px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.05) inset;
  transition: transform 0.7s cubic-bezier(.2,.8,.2,1), border-color 0.7s ease, box-shadow 0.7s ease;
}
.skevara-showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 36%, rgba(255,255,255,0.035) 49%, transparent 62%);
  transform: translateX(-100%);
  transition: transform 1.1s cubic-bezier(.2,.8,.2,1);
}
.skevara-showcase:hover { transform: translateY(-5px); border-color: rgba(213,179,112,0.3); box-shadow: 0 52px 110px rgba(0,0,0,0.44), 0 1px 0 rgba(255,255,255,0.06) inset; }
.skevara-showcase:hover::after { transform: translateX(100%); }
.showcase-brand { z-index: 1; order: 2; min-width: 0; padding: 42px 46px; display: flex; flex-direction: column; justify-content: space-between; }
.showcase-brand p, .showcase-brand span, .showcase-mark span { margin: 0; color: #9b9b94; font: 400 8px var(--mono); text-transform: uppercase; letter-spacing: 0.14em; }
.showcase-brand img { width: 100%; height: 210px; margin: auto 0; display: block; object-fit: cover; object-position: center; }
.showcase-brand span { max-width: 250px; line-height: 1.7; }
.kasbon-portrait { order: 1; min-width: 0; position: relative; overflow: hidden; border-right: 1px solid rgba(213,179,112,0.13); }
.kasbon-portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 68%, #0e0f0f 100%); pointer-events: none; }
.kasbon-portrait img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; filter: saturate(0.72) contrast(1.04) brightness(0.82); transition: transform 1.2s cubic-bezier(.2,.8,.2,1), filter 1.2s ease; }
.skevara-showcase:hover .kasbon-portrait img { transform: scale(1.025); filter: saturate(0.86) contrast(1.04) brightness(0.9); }
.showcase-mark { z-index: 2; position: absolute; right: 34px; bottom: 30px; display: flex; align-items: center; gap: 14px; }
.showcase-mark img { width: 42px; filter: drop-shadow(0 8px 20px rgba(190,148,77,0.2)); }
.showcase-mark span { color: #c2ab7d; white-space: nowrap; }
.skevara-signup { margin-top: 78px; padding-top: 50px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(60px, 10vw, 160px); align-items: end; border-top: 1px solid rgba(238,236,230,0.16); }
.skevara-signup h3 { margin: 18px 0 0; font: 400 clamp(34px, 4vw, 58px)/1 var(--serif); letter-spacing: -0.04em; }
.skevara-signup .form-note { margin-bottom: 0; }

.dyspathic {
  padding-top: 145px;
  padding-bottom: 155px;
  color: var(--paper);
  background:
    radial-gradient(circle at 7% 68%, rgba(131, 98, 28, 0.13), transparent 31%),
    radial-gradient(circle at 92% 14%, rgba(58, 91, 145, 0.14), transparent 30%),
    linear-gradient(145deg, #13171d, #090c11 62%);
}
.dyspathic-heading { max-width: 980px; }
.dyspathic-heading h2 { margin: 32px 0 34px; font: 400 clamp(62px, 8vw, 126px)/0.88 var(--serif); letter-spacing: -0.055em; }
.dyspathic-heading > p:last-child { max-width: 690px; margin: 0; color: #b5b9c1; font: 400 18px/1.65 var(--serif); }
.dyspathic-systems { margin-top: 90px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(238,236,230,0.17); border-bottom: 1px solid rgba(238,236,230,0.17); }
.dyspathic-systems article { min-height: 285px; padding: 32px clamp(20px, 2.3vw, 38px) 36px; border-right: 1px solid rgba(238,236,230,0.12); }
.dyspathic-systems article:first-child { padding-left: 0; }
.dyspathic-systems article:last-child { padding-right: 0; border-right: 0; }
.dyspathic-systems .system-label { margin: 0 0 52px; color: #d3d5d8; font: 500 11px/1.5 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; }
.dyspathic-systems .system-label span { margin-right: 12px; color: #7d8491; }
.dyspathic-systems h3 { min-height: 58px; margin: 0 0 18px; color: #f0eee8; font: 400 25px/1.1 var(--serif); }
.dyspathic-systems article > p:last-child { margin: 0; color: #a7abb3; font: 300 14px/1.65 var(--sans); }
.dyspathic-showcase { margin-top: 82px; display: block; overflow: hidden; border: 1px solid rgba(120,137,164,0.25); border-radius: 18px; background: #070b11; box-shadow: 0 40px 100px rgba(0,0,0,0.42), 0 1px 0 rgba(255,255,255,0.04) inset; transition: transform 0.55s cubic-bezier(.2,.8,.2,1), border-color 0.55s ease, box-shadow 0.55s ease; }
.dyspathic-showcase img { width: 100%; display: block; }
.dyspathic-showcase:hover { transform: translateY(-5px); border-color: rgba(178,192,216,0.4); box-shadow: 0 52px 120px rgba(0,0,0,0.52), 0 1px 0 rgba(255,255,255,0.06) inset; }
.dyspathic-cta { width: fit-content; margin: 42px 0 0 auto; padding: 16px 22px; display: flex; align-items: center; gap: 28px; border: 1px solid rgba(238,236,230,0.25); border-radius: 999px; color: #f0eee8; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.1em; transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease; }
.dyspathic-cta:hover { color: #0b0e13; background: #f0eee8; border-color: #f0eee8; }

.portfolio { padding-top: 150px; padding-bottom: 150px; }
.portfolio-head { display: grid; grid-template-columns: 1fr 3fr; }
.portfolio-head h2 { margin: 0 0 90px; font: 400 clamp(65px, 8.4vw, 137px)/0.86 var(--serif); letter-spacing: -0.055em; }
.work-grid {
  padding: 0 clamp(24px, 7.2vw, 120px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 24px);
}
.work-card {
  min-height: 355px;
  padding: 25px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(238, 236, 230, 0.13);
  border-radius: 18px;
  background:
    radial-gradient(circle at 85% 8%, rgba(117, 127, 159, 0.1), transparent 35%),
    linear-gradient(145deg, rgba(37, 39, 41, 0.92), rgba(22, 23, 22, 0.96));
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 18px 45px rgba(0,0,0,0.22);
  transform: translateY(0);
  transition: transform 0.55s cubic-bezier(.2,.8,.2,1), border-color 0.55s ease, box-shadow 0.55s ease;
}
.work-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 0%, rgba(125, 138, 180, 0.16), transparent 48%);
  transition: opacity 0.55s ease;
}
.work-card:hover {
  color: var(--paper);
  border-color: rgba(180, 187, 207, 0.28);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 26px 55px rgba(0,0,0,0.34);
  transform: translateY(-7px);
}
.work-card:hover::before { opacity: 1; }
.work-no, .work-card p, .work-link { font: 400 8px var(--mono); text-transform: uppercase; letter-spacing: 0.14em; }
.work-no { display: flex; align-items: center; justify-content: space-between; }
.work-no i { padding: 6px 8px; border: 1px solid rgba(238,236,230,0.18); border-radius: 99px; color: #aeb5c8; font: normal 400 7px var(--mono); letter-spacing: 0.11em; }
.work-card.available { border-color: rgba(180,187,207,0.28); background: radial-gradient(circle at 85% 8%, rgba(117,127,159,0.17), transparent 38%), linear-gradient(145deg, #292c33, #181918); }
.work-card.available .work-no i { color: #d8dce6; background: rgba(116,130,172,0.1); }
.work-card.upcoming { color: #a1a29e; background: linear-gradient(145deg, rgba(29,30,30,0.86), rgba(19,20,19,0.93)); box-shadow: 0 12px 32px rgba(0,0,0,0.16); }
.work-card.upcoming .work-no i { color: #767a75; }
.work-card.upcoming .work-link { color: #6f726d; }
.work-card.upcoming:hover { color: #b5b7b2; border-color: rgba(238,236,230,0.16); box-shadow: 0 18px 40px rgba(0,0,0,0.24); transform: translateY(-3px); }
.work-card h3 { margin: 16px 0; font: 400 clamp(30px, 2.5vw, 43px)/0.95 var(--serif); letter-spacing: -0.04em; }
.work-link { align-self: flex-start; color: #a5a8a2; }

.research { padding-top: 165px; padding-bottom: 165px; display: grid; grid-template-columns: 1.25fr 1fr; gap: 9vw; align-items: center; background: radial-gradient(circle at 22% 48%, rgba(78,91,125,0.1), transparent 34%), var(--paper); }
.research-question { color: #505b68; font: 300 clamp(58px, 6.7vw, 108px)/0.9 var(--serif); letter-spacing: -0.055em; text-shadow: 0 15px 55px rgba(64,75,103,0.08); white-space: nowrap; }
.research-copy h2 { margin: 32px 0; font: 400 clamp(45px, 4.8vw, 72px)/0.96 var(--serif); letter-spacing: -0.04em; }
.research-copy > p:not(.eyebrow) { margin-bottom: 45px; font: 300 17px/1.7 var(--sans); }

.site-footer {
  padding-top: 125px;
  padding-bottom: 36px;
  color: var(--paper);
  background:
    radial-gradient(circle at 78% 12%, rgba(67, 78, 112, 0.2), transparent 30%),
    radial-gradient(circle at 5% 90%, rgba(93, 50, 57, 0.14), transparent 27%),
    linear-gradient(145deg, #111315, #0b0c0d);
}
.site-footer h2 { max-width: 1250px; margin: 48px 0 90px; font: 400 clamp(58px, 8vw, 128px)/0.88 var(--serif); letter-spacing: -0.055em; }
.site-footer h2 em { color: #858a83; font-weight: 300; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 38px clamp(30px, 6vw, 100px); }
.contact-field { display: flex; flex-direction: column; gap: 13px; }
.contact-field label { color: #a3a69f; font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: 0.13em; }
.contact-field input, .contact-field textarea { width: 100%; padding: 12px 0 17px; border: 0; border-bottom: 1px solid rgba(238,236,230,0.3); border-radius: 0; outline: none; color: var(--paper); background: transparent; font: 300 20px/1.5 var(--sans); transition: border-color 0.25s ease; }
.contact-field input:focus, .contact-field textarea:focus { border-color: var(--paper); }
.contact-field textarea { resize: vertical; }
.contact-message { grid-column: 1 / -1; }
.contact-form button { width: fit-content; padding: 16px 0; display: flex; align-items: center; gap: 42px; border: 0; border-bottom: 1px solid rgba(238,236,230,0.5); color: var(--paper); background: transparent; cursor: pointer; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.11em; }
.contact-form button:hover { border-color: var(--paper); }
.contact-note { margin: 16px 0 0; color: #777b76; font: 400 9px/1.5 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; }
.footer-bottom { margin-top: 80px; display: grid; grid-template-columns: 1fr 1fr auto; color: #979a94; font: 400 8px var(--mono); text-transform: uppercase; letter-spacing: 0.11em; }
.footer-bottom div { display: flex; gap: 25px; }
.footer-bottom a:hover { color: var(--paper); }

.sr-only { width: 1px; height: 1px; position: absolute; overflow: hidden; clip: rect(0,0,0,0); }
.reveal { opacity: 1; transform: none; transition: none; }
.motion-enabled .reveal { will-change: transform, opacity; }

@keyframes ambient-drift {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.75; }
  to { transform: translate3d(-4%, 7%, 0) scale(1.08); opacity: 1; }
}

@media (max-width: 800px) {
  nav { display: none; position: absolute; top: 84px; left: 0; right: 0; padding: 30px; flex-direction: column; color: var(--ink); background: var(--paper); border-bottom: 1px solid var(--rule); }
  nav.open { display: flex; }
  .menu-toggle { display: block; }
  .menu-toggle span { background: var(--paper); }
  .announcement { grid-template-columns: 1fr auto; }
  .announcement-label { display: none; }
  .hero { min-height: calc(100svh - 126px); }
  .hero h1 { max-width: 100%; font-size: 17vw; }
  .hero-foot { padding: 0; display: block; }
  .hero-foot > p { margin-bottom: 35px; }
  .hero-portrait { width: min(100%, 430px); height: 480px; margin: -15px 0 50px auto; position: relative; right: auto; top: auto; }
  .chapter-mark { display: none; }
  .section-intro { grid-template-columns: 1fr; margin-bottom: 85px; }
  .section-intro > p:last-child { max-width: 440px; }
  .book, .book-reverse { grid-template-columns: 1fr; gap: 60px; margin-bottom: 125px; }
  .book-cover { max-width: 390px; margin: auto; }
  .book-reverse .book-cover { order: 0; }
  .research { grid-template-columns: 1fr; }
  .research-question { white-space: normal; }
  .skevara-features { grid-template-columns: 1fr; margin-top: 70px; }
  .skevara-features > div { min-height: auto; padding: 22px 0; border-right: 0; border-bottom: 1px solid rgba(238,236,230,0.12); }
  .skevara-features > div:last-child { border-bottom: 0; }
  .skevara-signup { grid-template-columns: 1fr; gap: 40px; }
  .skevara-showcase { min-height: 520px; grid-template-columns: 1fr 0.9fr; }
  .showcase-brand { padding: 34px; }
  .showcase-brand img { height: 180px; }
  .showcase-mark { right: 28px; bottom: 25px; }
  .dyspathic-systems { grid-template-columns: 1fr 1fr; }
  .dyspathic-systems article, .dyspathic-systems article:first-child, .dyspathic-systems article:last-child { padding: 28px; border-right: 1px solid rgba(238,236,230,0.12); border-bottom: 1px solid rgba(238,236,230,0.12); }
  .dyspathic-systems article:nth-child(even) { border-right: 0; }
  .dyspathic-systems article:nth-child(n+3) { border-bottom: 0; }
  .portfolio-head { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: 1fr 1fr; }
  .work-card { min-height: 320px; }
  .footer-bottom { grid-template-columns: 1fr; gap: 25px; }
}

@media (max-width: 560px) {
  .announcement { font-size: 8px; }
  .hero h1 { font-size: 18vw; }
  .books, .skevara, .dyspathic, .portfolio, .research { padding-top: 95px; padding-bottom: 95px; }
  .work-grid { grid-template-columns: 1fr; }
  .work-card { min-height: 300px; }
  .skevara-showcase { min-height: 660px; margin-top: 65px; grid-template-columns: 1fr; grid-template-rows: 265px 395px; }
  .showcase-brand { order: 1; padding: 26px; }
  .showcase-brand img { width: 100%; height: 150px; }
  .showcase-brand span { display: none; }
  .kasbon-portrait { order: 2; border-top: 1px solid rgba(213,179,112,0.13); border-right: 0; }
  .kasbon-portrait::after { background: linear-gradient(180deg, #0e0f0f 0%, transparent 22%); }
  .showcase-mark { right: 22px; bottom: 20px; padding: 8px 10px; border-radius: 99px; background: rgba(12,13,14,0.72); backdrop-filter: blur(10px); }
  .showcase-mark img { width: 32px; }
  .research { gap: 70px; }
  .contact-form { grid-template-columns: 1fr; gap: 30px; }
  .contact-message { grid-column: auto; }
  .footer-bottom div { flex-wrap: wrap; }
  .dyspathic-systems { grid-template-columns: 1fr; margin-top: 65px; }
  .dyspathic-systems article, .dyspathic-systems article:first-child, .dyspathic-systems article:last-child { min-height: 0; padding: 28px 0; border-right: 0; border-bottom: 1px solid rgba(238,236,230,0.12); }
  .dyspathic-systems article:last-child { border-bottom: 0; }
  .dyspathic-systems .system-label { margin-bottom: 30px; }
  .dyspathic-systems h3 { min-height: 0; }
  .dyspathic-showcase { margin-top: 60px; border-radius: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero::after { animation: none; }
  .scroll-progress { display: none; }
  .hero-portrait.reveal.visible, .chapter-mark, .skevara-showcase, .skevara-showcase:hover { transform: none; }
  .skevara-features.reveal > div { opacity: 1; transform: none; transition: none; }
}