:root {
  --paper: #e8e3d9;
  --paper-hi: #f0ece3;
  --ink: #171614;
  --graphite: #2a2825;
  --muted: #625f5a;
  --line: #bdb6aa;
  --accent: #9b5318;
  --violet: #6763b5;
  --max: 1540px;
  --pad: clamp(20px, 4vw, 68px);
  --sans: "Nimbus Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "Noto Sans Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background-color: var(--paper); background-image: url("../assets/vellum.svg"); font: 16px/1.45 var(--sans); }
img { display: block; width: 100%; }
figure { margin: 0; }
a { color: inherit; }
.frame { width: min(100%, var(--max)); margin-inline: auto; padding-inline: var(--pad); }
.skip { position: fixed; z-index: 20; top: 8px; left: 8px; padding: 10px 14px; color: white; background: var(--ink); transform: translateY(-150%); }
.skip:focus { transform: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.eyebrow { margin: 0; color: var(--accent); font: 700 10px/1.3 var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.concept-tag { position: absolute; right: 16px; bottom: 14px; z-index: 2; padding: 8px 10px; color: #eee9df; background: rgba(23,22,20,.76); font: 700 8px/1.25 var(--mono); letter-spacing: .06em; text-transform: uppercase; }

.nav { position: fixed; z-index: 10; inset: 0 0 auto; color: white; background: rgba(23,22,20,.92); border-bottom: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(14px); }
.nav-inner { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.wordmark { display: inline-flex; align-items: baseline; gap: .44em; font-weight: 500; line-height: 1; text-decoration: none; }
.wordmark::before { content: ""; width: .83em; height: 1.06em; width: 1.155cap; height: 1.476cap; flex: 0 0 auto; background: #83d8f1; transform: translateY(.15em); transform: translateY(.21cap); -webkit-mask: url("../assets/xanaheim-glyph.svg") center / contain no-repeat; mask: url("../assets/xanaheim-glyph.svg") center / contain no-repeat; }
.nav-links { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 32px); }
.nav-links a { font: 700 9px/1 var(--mono); letter-spacing: .07em; text-decoration: none; text-transform: uppercase; }
.nav-links .home { padding: 8px 10px; border: 1px solid rgba(255,255,255,.34); }

.hero { display: grid; grid-template-columns: minmax(390px, .8fr) minmax(560px, 1.2fr); min-height: 100svh; padding-top: 58px; background-color: var(--paper-hi); background-image: url("../assets/vellum.svg"); }
.hero-copy { min-height: 760px; padding: clamp(74px, 10vw, 150px) var(--pad) 52px; display: flex; flex-direction: column; justify-content: space-between; gap: 70px; }
.hero-name { margin: 22px 0 0; color: var(--accent); font-size: clamp(36px, 4vw, 64px); font-weight: 650; line-height: .92; letter-spacing: -.05em; }
.hero h1 { max-width: 810px; margin: 26px 0 0; font-size: clamp(60px, 6.3vw, 106px); font-weight: 450; line-height: .86; letter-spacing: -.072em; }
.hero-lede { max-width: 610px; margin: 34px 0 0; color: var(--muted); font-size: clamp(18px, 1.65vw, 25px); line-height: 1.28; letter-spacing: -.02em; }
.hero-foot { padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; color: #56524d; font: 700 10px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.hero-visual { position: relative; min-width: 0; min-height: 760px; overflow: hidden; background: var(--graphite); }
.hero-visual img { height: 100%; object-fit: cover; object-position: center; }

.system-rail { color: #aaa59c; background: var(--ink); overflow-x: auto; scrollbar-width: thin; }
.system-rail .frame { display: flex; width: max-content; min-width: 100%; }
.system-rail a { min-width: 142px; padding: 24px 20px; border-right: 1px solid #403d38; text-decoration: none; }
.system-rail a:first-child { border-left: 1px solid #403d38; }
.system-rail small { display: block; margin-bottom: 8px; color: #9a958d; font: 700 8px/1 var(--mono); }
.system-rail strong { font-size: 15px; font-weight: 500; }
.system-rail a[aria-current="page"] { color: #f1ede5; background: #2b2926; }
.system-rail a[aria-current="page"] small { color: #e29a54; }

.premise { padding-block: clamp(105px, 15vw, 220px); background-color: var(--paper-hi); background-image: url("../assets/vellum.svg"); }
.premise-head { display: grid; grid-template-columns: .48fr 1.52fr; gap: clamp(40px, 8vw, 125px); }
.premise h2 { max-width: 1120px; margin: 0; font-size: clamp(52px, 7.6vw, 116px); font-weight: 450; line-height: .88; letter-spacing: -.071em; }
.premise-copy { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 78px); margin: 62px 0 0 25%; }
.premise-copy p { margin: 0; color: var(--muted); font-size: 18px; }

.story-lab { padding-block: clamp(100px, 13vw, 190px); color: #eeeae2; background: #1d1c1a; }
.story-lab .eyebrow { color: #dd934d; }
.story-lab-head { display: grid; grid-template-columns: .48fr 1.52fr; gap: clamp(40px, 8vw, 125px); }
.story-lab h2 { max-width: 1120px; margin: 0; font-size: clamp(50px, 7vw, 106px); font-weight: 400; line-height: .89; letter-spacing: -.069em; }
.story-lab-lede { max-width: 760px; margin: 36px 0 0; color: #aaa59d; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.38; }
.story-path { display: grid; grid-template-columns: repeat(5, 1fr); margin: clamp(65px, 9vw, 125px) 0 0; padding: 0; border-block: 1px solid #494640; list-style: none; }
.story-path li { min-height: 190px; padding: 24px clamp(14px, 2vw, 28px); border-right: 1px solid #494640; }
.story-path li:first-child { padding-left: 0; }
.story-path li:last-child { padding-right: 0; border-right: 0; }
.story-path small, .story-path span { display: block; color: #918c84; font: 700 8px/1.35 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.story-path small { color: #dd934d; }
.story-path strong { display: block; margin: 44px 0 15px; font-size: clamp(20px, 2vw, 30px); font-weight: 450; line-height: 1; letter-spacing: -.03em; }
.story-studies { margin-top: clamp(90px, 12vw, 175px); }
.story-study { display: grid; grid-template-columns: 1.48fr .52fr; align-items: start; border-top: 1px solid #494640; }
.story-study + .story-study { margin-top: clamp(80px, 10vw, 145px); }
.story-study figure { position: relative; min-height: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #090909; }
.story-study figure img { height: 100%; object-fit: cover; }
.story-study-copy { align-self: stretch; padding: clamp(30px, 5vw, 72px) 0 20px clamp(30px, 5vw, 72px); display: flex; flex-direction: column; }
.story-study-copy h3 { margin: auto 0 0; font-size: clamp(42px, 5.2vw, 78px); font-weight: 400; line-height: .9; letter-spacing: -.06em; }
.story-study-copy > p:not(.eyebrow) { margin: 30px 0 0; color: #aaa59d; font-size: 17px; }
.story-study-copy dl { margin: 42px 0 0; padding-top: 22px; border-top: 1px solid #494640; }
.story-study-copy dl div { display: grid; grid-template-columns: 90px 1fr; gap: 18px; margin-top: 13px; }
.story-study-copy dt { color: #dd934d; font: 700 8px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.story-study-copy dd { margin: 0; color: #bbb6ad; font-size: 13px; }
.story-study-reverse { grid-template-columns: .52fr 1.48fr; }
.story-study-reverse figure { grid-column: 2; grid-row: 1; }
.story-study-reverse .story-study-copy { grid-column: 1; grid-row: 1; padding-right: clamp(30px, 5vw, 72px); padding-left: 0; }
.story-note { display: grid; grid-template-columns: .48fr 1.52fr; gap: clamp(40px, 8vw, 125px); margin-top: clamp(80px, 11vw, 155px); padding-top: 28px; border-top: 1px solid #494640; }
.story-note > p:last-child { max-width: 900px; margin: 0; color: #ccc7be; font-size: clamp(24px, 3vw, 42px); line-height: 1.18; letter-spacing: -.035em; }

.technical { padding-block: clamp(90px, 12vw, 170px); background-color: #d1cabf; background-image: url("../assets/vellum.svg"); }
.technical .eyebrow { color: #7b3d0b; }
.technical-head { display: grid; grid-template-columns: .48fr 1.52fr; gap: clamp(40px, 8vw, 125px); }
.technical h2 { max-width: 1050px; margin: 0; font-size: clamp(46px, 6.3vw, 96px); font-weight: 450; line-height: .9; letter-spacing: -.065em; }
.tech-plate { margin-top: clamp(62px, 8vw, 110px); padding: clamp(26px, 4vw, 58px); color: #ece8df; background: #211f1c; border: 1px solid #4b4741; }
.tech-flow { --nodes: 5; display: grid; grid-template-columns: repeat(var(--nodes), minmax(0, 1fr)); margin: 0; padding: 0; border-block: 1px solid #4b4741; list-style: none; }
.tech-node { position: relative; min-width: 0; min-height: 260px; padding: 26px clamp(16px, 2.4vw, 34px); border-right: 1px solid #4b4741; }
.tech-node:first-child { padding-left: 0; }
.tech-node:last-child { padding-right: 0; border-right: 0; }
.tech-node:not(:last-child)::after { content: "→"; position: absolute; z-index: 1; top: 50%; right: 0; width: 25px; color: #d9934d; background: #211f1c; font: 700 16px/1 var(--mono); text-align: center; transform: translate(50%, -50%); }
.tech-node small { display: block; color: #d9934d; font: 700 8px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.tech-node strong { display: block; margin-top: 54px; font-size: clamp(22px, 2.2vw, 34px); font-weight: 450; line-height: 1; letter-spacing: -.035em; }
.tech-node p { margin: 18px 0 0; color: #aaa59c; font-size: 14px; }
.tech-contracts { display: flex; flex-wrap: wrap; gap: 12px 30px; align-items: baseline; padding-top: 26px; }
.tech-contracts > span { color: #d9934d; font: 700 8px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.tech-contracts code { color: #c9c4bb; font: 700 10px/1.45 var(--mono); }

.craft { padding-block: clamp(105px, 14vw, 200px); color: #ede9e1; background: var(--ink); }
.craft .eyebrow { color: #d9934d; }
.craft-head { display: grid; grid-template-columns: .48fr 1.52fr; gap: clamp(40px, 8vw, 125px); }
.craft h2 { max-width: 1020px; margin: 0; font-size: clamp(50px, 6.8vw, 104px); font-weight: 400; line-height: .89; letter-spacing: -.069em; }
.craft-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(75px, 10vw, 140px); border-block: 1px solid #47443f; }
.craft-card { min-height: 430px; padding: 30px clamp(24px, 4vw, 58px) 38px; border-right: 1px solid #47443f; display: flex; flex-direction: column; justify-content: space-between; }
.craft-card:first-child { padding-left: 0; }
.craft-card:last-child { padding-right: 0; border-right: 0; }
.craft-card .num { color: #d78b45; font: 700 9px/1 var(--mono); }
.craft-card h3 { margin: 80px 0 0; font-size: clamp(36px, 4vw, 62px); font-weight: 400; line-height: .94; letter-spacing: -.053em; }
.craft-card p { margin: 25px 0 0; color: #aaa59c; font-size: 17px; }

.details { padding: var(--pad); background: #cec7bb; }
.detail-grid { display: grid; grid-template-columns: 1.15fr .85fr .85fr; gap: var(--pad); }
.detail { position: relative; min-height: min(620px, 42vw); overflow: hidden; background: var(--graphite); }
.detail img { height: 100%; object-fit: cover; }
.detail:nth-child(1) img { object-position: 20% center; }
.detail:nth-child(2) img { object-position: 50% center; }
.detail:nth-child(3) img { object-position: 82% center; }
.detail span { position: absolute; inset: auto 14px 12px; color: #eee9e0; font: 700 8px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 1px 4px #000; }

.handoff { padding-block: clamp(105px, 14vw, 205px); background-color: var(--paper-hi); background-image: url("../assets/vellum.svg"); }
.handoff-head { display: grid; grid-template-columns: .48fr 1.52fr; gap: clamp(40px, 8vw, 125px); }
.handoff h2 { max-width: 1050px; margin: 0; font-size: clamp(50px, 7vw, 106px); font-weight: 450; line-height: .89; letter-spacing: -.069em; }
.handoff-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(72px, 10vw, 140px); border-block: 1px solid var(--line); }
.handoff-card { min-height: 310px; padding: 30px clamp(28px, 5vw, 72px) 38px; border-right: 1px solid var(--line); }
.handoff-card:first-child { padding-left: 0; }
.handoff-card:last-child { padding-right: 0; border-right: 0; }
.handoff-card h3 { margin: 70px 0 0; font-size: clamp(33px, 4vw, 58px); font-weight: 450; line-height: .96; letter-spacing: -.05em; }
.handoff-card p { max-width: 56ch; margin: 24px 0 0; color: var(--muted); }

.next { color: #f1ede5; background: var(--graphite); }
.next a { display: grid; grid-template-columns: .48fr 1.52fr; gap: clamp(40px, 8vw, 125px); align-items: end; min-height: clamp(470px, 52vw, 760px); padding-block: clamp(80px, 11vw, 160px); text-decoration: none; }
.next .eyebrow { color: #d9934d; }
.next h2 { max-width: 1100px; margin: 0; font-size: clamp(60px, 8.6vw, 132px); font-weight: 400; line-height: .84; letter-spacing: -.077em; }
.next h2 span { color: #d9934d; }

.footer { padding-block: 28px; color: var(--muted); background-color: var(--paper); background-image: url("../assets/vellum.svg"); border-top: 1px solid var(--line); }
.footer .frame { display: flex; justify-content: space-between; gap: 30px; font: 700 9px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy, .hero-visual { min-height: 680px; }
  .premise-head, .story-lab-head, .story-note, .technical-head, .craft-head, .handoff-head, .next a { grid-template-columns: 1fr; }
  .premise-copy { margin-left: 0; }
  .story-path { grid-template-columns: repeat(3, 1fr); }
  .story-path li:nth-child(3) { border-right: 0; }
  .story-path li:nth-child(-n+3) { border-bottom: 1px solid #494640; }
  .story-study, .story-study-reverse { grid-template-columns: 1fr; }
  .story-study figure, .story-study-reverse figure { grid-column: 1; grid-row: 1; }
  .story-study-copy, .story-study-reverse .story-study-copy { grid-column: 1; grid-row: 2; padding: 38px 0 0; }
  .story-study-copy h3 { margin-top: 90px; }
  .tech-flow { grid-template-columns: 1fr; }
  .tech-node, .tech-node:first-child, .tech-node:last-child { min-height: 0; padding: 28px 0; border-right: 0; border-bottom: 1px solid #4b4741; }
  .tech-node:last-child { border-bottom: 0; }
  .tech-node:not(:last-child)::after { content: "↓"; top: auto; right: 50%; bottom: 0; transform: translate(50%, 50%); }
  .tech-node strong { margin-top: 25px; }
  .detail-grid { grid-template-columns: 1fr 1fr; }
  .detail:first-child { grid-column: 1 / -1; }
  .detail { min-height: 500px; }
}

@media (max-width: 620px) {
  .nav-inner { gap: 10px; }
  .wordmark { font-size: 14px; }
  .nav-links { gap: 8px; }
  .nav-links a { font-size: 7px; }
  .hero-copy { min-height: 700px; }
  .hero h1 { font-size: 55px; }
  .hero-visual { min-height: 500px; }
  .hero-foot { display: grid; }
  .premise-copy, .story-path, .craft-grid, .handoff-grid, .detail-grid { grid-template-columns: 1fr; }
  .story-path li, .story-path li:first-child, .story-path li:last-child { min-height: 0; padding: 24px 0; border-right: 0; border-bottom: 1px solid #494640; }
  .story-path li:last-child { border-bottom: 0; }
  .story-path strong { margin-top: 24px; }
  .story-study figure { min-height: 0; }
  .craft-card, .craft-card:first-child, .craft-card:last-child { min-height: 330px; padding: 28px 0; border-right: 0; border-bottom: 1px solid #47443f; }
  .craft-card:last-child { border-bottom: 0; }
  .detail:first-child { grid-column: auto; }
  .detail { min-height: 460px; }
  .handoff-card, .handoff-card:first-child, .handoff-card:last-child { min-height: 270px; padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .handoff-card:last-child { border-bottom: 0; }
  .footer .frame { display: grid; }
}

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