.home { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
.home .preview-note,.home .site-header { flex: none; }
.home .site-header { background: #080e19ef; }
.home .nav a[aria-current="page"] { color: #eff9f7; text-decoration: underline; text-decoration-color: #a6d8db; text-underline-offset: 8px; }
.story-shell { flex: 1; min-height: 0; display: flex; flex-direction: column; animation: none; }
.story-viewport { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; touch-action: pan-x pinch-zoom; }
.story-viewport::-webkit-scrollbar { display: none; }
.story-viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.story-viewport a { cursor: pointer; }
.story-panel { flex: 0 0 100%; width: 100%; height: 100%; min-width: 0; overflow: hidden; scroll-snap-align: start; position: relative; isolation: isolate; background: #0a1320; }
.story-panel::after { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .45; background-image: linear-gradient(#9ebdca12 1px, transparent 1px), linear-gradient(90deg, #9ebdca12 1px, transparent 1px); background-size: 88px 88px; mask-image: linear-gradient(90deg, transparent 2%, #000 85%); }
.panel-glow { position: absolute; z-index: -2; inset: -25%; pointer-events: none; filter: blur(72px); opacity: .64; background: radial-gradient(ellipse 33% 25% at 72% 36%, #5f789b88, transparent 80%), radial-gradient(ellipse 37% 30% at 54% 68%, #507f8b80, transparent 80%), radial-gradient(ellipse 26% 24% at 29% 78%, #6357847e, transparent 80%); animation: aurora 19s ease-in-out infinite alternate; }
.panel-inner { position: relative; z-index: 2; width: min(1320px, calc(100% - 72px)); min-height: 100%; margin-inline: auto; }
.panel-kicker { margin: 0; color: #bddfe2; letter-spacing: .18em; font-weight: 750; font-size: .77rem; }
.intro-panel { background: linear-gradient(125deg, #080d17, #132438 67%, #101a2b); }
.intro-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr); align-items: center; gap: clamp(42px, 7vw, 120px); padding-block: clamp(28px, 4.5vh, 60px); }
.intro-main h1 { font-size: clamp(3.2rem, min(7.2vw, 10vh), 7rem); margin: clamp(17px, 2.6vh, 27px) 0 clamp(17px, 2.6vh, 28px); }
.intro-main h1 em { font-style: normal; background: linear-gradient(110deg, #d7f0ed, #b7d5e2 53%, #d3c0e8); color: transparent; background-clip: text; -webkit-background-clip: text; }
.intro-lead { max-width: 620px; margin: 0; color: #d4e0e5; font-size: clamp(1.05rem, min(1.8vw, 2.4vh), 1.35rem); line-height: 1.65; }
.intro-aside { max-width: 490px; border-top: 1px solid #8eaebb; padding-top: 20px; align-self: center; }
.aside-rule { color: #b8d6de; font-size: .79rem; letter-spacing: .13em; font-weight: 750; }
.intro-aside h2 { font-size: clamp(1.75rem, 3.2vw, 3.2rem); margin: 30px 0 18px; letter-spacing: -.045em; line-height: 1.28; }
.intro-aside p { margin: 0; color: #bbcdd5; line-height: 1.85; font-size: 1rem; }
.aside-next { display: inline-flex; gap: 20px; align-items: center; border-bottom: 1px solid #93b9bd; margin-top: 37px; padding-bottom: 9px; color: #d8e8e9; font-size: .9rem; }
.aside-next span { font-size: 1.2rem; }
.swipe-cue { display: inline-flex; align-items: center; gap: clamp(16px, 3vw, 35px); margin-top: clamp(22px, 4vh, 46px); padding: 13px 0; border-bottom: 1px solid #b4d9dc; text-decoration: none; color: #e7f4f2; font-size: clamp(.9rem, 1.2vw, 1rem); font-weight: 700; letter-spacing: .04em; }
.swipe-cue span[aria-hidden="true"] { display: inline-block; font-size: 1.6rem; line-height: 1; animation: nudge-right 1.9s ease-in-out infinite; }
.swipe-cue:hover span[aria-hidden="true"] { animation-play-state: paused; transform: translateX(7px); }
@keyframes nudge-right { 0%, 70%, 100% { transform: translateX(0); } 85% { transform: translateX(8px); } }
.project-panel { background: linear-gradient(125deg, #152637, #31516a 55%, #293f56); }
.project-two { background: linear-gradient(125deg, #25223a, #4d4869 56%, #294a5d); }
.project-panel .panel-glow { opacity: .75; background: radial-gradient(ellipse 36% 36% at 70% 31%, #8bc9d2b4, transparent 80%), radial-gradient(ellipse 30% 35% at 76% 75%, #8ab7d39e, transparent 80%), radial-gradient(ellipse 28% 25% at 31% 82%, #5960927e, transparent 80%); }
.project-two .panel-glow { background: radial-gradient(ellipse 34% 33% at 72% 30%, #cfb0d8ac, transparent 80%), radial-gradient(ellipse 34% 34% at 74% 77%, #89c5c9a8, transparent 80%), radial-gradient(ellipse 29% 25% at 28% 83%, #6864a18a, transparent 80%); }
.project-panel::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #0a1426d6, #0b182b8d 42%, transparent 95%); pointer-events: none; }
.project-art { position: absolute; width: min(42vw, 62vh, 570px); aspect-ratio: 1; right: 8%; top: 50%; transform: translateY(-50%) rotate(-26deg); border: 1px solid #e0f4f698; border-radius: 30%; box-shadow: inset 0 0 0 55px #e0f4f619, 0 0 0 67px #e0f4f60e; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.project-two .project-art { border-radius: 50%; transform: translateY(-50%); border-color: #e8d8f4ad; box-shadow: inset 0 0 0 55px #e8d8f419, 0 0 0 67px #e8d8f40e; }
.project-panel:hover .project-art { transform: translateY(-50%) rotate(-12deg) scale(1.04); }
.project-two:hover .project-art { transform: translateY(-50%) rotate(12deg) scale(1.04); }
.project-layout { display: flex; flex-direction: column; justify-content: space-between; padding-block: clamp(24px, 4vh, 52px); }
.project-topline { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid #d8ebef91; color: #e6f1f3; font-size: .78rem; font-weight: 750; letter-spacing: .13em; }
.project-bottomline { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.project-bottomline > div { max-width: 680px; }
.project-bottomline h2 { font-size: clamp(3.1rem, min(7vw, 10vh), 7rem); line-height: 1.08; margin: clamp(12px, 2vh, 22px) 0 clamp(12px, 2vh, 20px); }
.project-bottomline p:not(.panel-kicker) { color: #e0ebed; max-width: 550px; font-size: clamp(1rem, min(1.5vw, 2.2vh), 1.22rem); line-height: 1.6; margin: 0 0 clamp(16px, 2.8vh, 30px); }
.contact-panel { background: linear-gradient(125deg, #090e18, #172637 65%, #172538); }
.contact-panel .panel-glow { opacity: .5; }
.contact-layout { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-block: clamp(25px, 4.5vh, 60px); }
.contact-layout h2 { font-size: clamp(3.1rem, min(7vw, 9.5vh), 7rem); line-height: 1.08; margin: clamp(18px, 2.5vh, 28px) 0; }
.contact-layout h2 em { font-style: normal; color: #c0dfe2; }
.contact-layout p:not(.panel-kicker) { margin: 0; color: #bbced7; font-size: clamp(1.05rem, min(1.7vw, 2.2vh), 1.25rem); line-height: 1.6; }
.contact-layout .contact-placeholder { margin-top: clamp(15px, 2.5vh, 22px); }
.contact-layout small { margin-top: clamp(20px, 3.5vh, 50px); color: #91a6b3; font-size: .8rem; }
.story-controls { height: clamp(60px, 8vh, 78px); flex: none; padding-inline: max(36px, calc((100vw - 1360px)/2)); display: flex; align-items: center; justify-content: space-between; gap: 28px; border-top: 1px solid #43596a; background: #0b1421; }
.story-hint { color: #adbfca; font-size: .8rem; letter-spacing: .07em; white-space: nowrap; }
.story-progress { display: flex; align-items: center; gap: 16px; color: #bcd0d8; font-size: .81rem; font-weight: 750; letter-spacing: .09em; }
.story-track { width: clamp(80px, 10vw, 150px); height: 2px; background: #526a7a; position: relative; }
.story-fill { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #a6dde0, #cfbce9); }
.story-buttons { display: flex; gap: 10px; }
.story-buttons button { width: 46px; height: 46px; border: 1px solid #728e9c; border-radius: 50%; background: transparent; color: #ebf4f3; font-size: 1.2rem; cursor: pointer; transition: background .2s, color .2s; }
.story-buttons button:hover:not(:disabled) { color: #0b1421; background: #dcefee; }
.story-buttons button:disabled { opacity: .32; cursor: not-allowed; }
@media (max-width: 900px) {
  .intro-layout { grid-template-columns: 1fr; gap: 35px; align-content: center; }
  .intro-main h1 { font-size: clamp(3.5rem, 10vw, 6rem); }
  .intro-aside { max-width: 660px; }
  .story-hint { display: none; }
  .story-controls { padding-inline: 28px; }
}
@media (max-width: 650px) {
  .home:not(.detail-site) .nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; overflow: visible; }
  .home:not(.detail-site) .nav a { text-align: center; font-size: clamp(.69rem, 3.2vw, .84rem); }
  .panel-inner { width: calc(100% - 38px); }
  .intro-layout { display: block; padding-block: 44px; }
  .intro-main h1 { font-size: clamp(2.7rem, 13vw, 5rem); }
  .intro-lead { font-size: 1.08rem; }
  .intro-aside { margin-top: 48px; }
  .intro-aside h2 { font-size: 1.8rem; margin-block: 20px 13px; }
  .intro-aside p { font-size: .96rem; }
  .aside-next { margin-top: 23px; }
  .project-layout { padding-block: 27px 37px; }
  .project-panel::before { background: linear-gradient(0deg, #0a1426ec, #0b182b76 85%); }
  .project-art { width: 82vw; right: -11%; top: 35%; }
  .project-bottomline h2 { font-size: clamp(3rem, 12vw, 5rem); }
  .project-bottomline p:not(.panel-kicker) { font-size: 1rem; }
  .story-controls { height: clamp(58px, 8vh, 68px); padding-inline: 19px; }
  .story-buttons button { width: 42px; height: 42px; }
  .story-progress { gap: 12px; }
  .story-track { width: 72px; }
  .contact-layout h2 { font-size: clamp(3rem, 12vw, 5.1rem); }
}
@media (prefers-reduced-motion: reduce) {
  .story-viewport { scroll-behavior: auto; }
  .panel-glow { animation: none; }
  .project-art,.story-buttons button { transition: none; }
  .swipe-cue span[aria-hidden="true"] { animation: none; }
}
.intro-only { grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); }
.intro-only .aside-next { margin-top: clamp(18px, 3vh, 34px); }
.lead-compact { display: none; }
.discipline-visual { position: relative; width: min(38vw, 55vh, 500px); aspect-ratio: 1; justify-self: end; align-self: end; margin-bottom: clamp(12px, 3vh, 38px); isolation: isolate; }
.discipline-visual::before { content: ''; position: absolute; inset: 18%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, #b7dce137, #8799c21e 50%, transparent 72%); filter: blur(22px); }
.discipline-lines { display: block; width: 100%; height: 100%; overflow: visible; fill: none; }
.orbit-ring { stroke: #d2ecec; stroke-width: 1; opacity: .63; }
.orbit-ring-outer { stroke-dasharray: 3 9; transform-origin: 180px 180px; animation: ring-turn 36s linear infinite; }
.orbit-ring-inner { stroke: #dccdef; stroke-dasharray: 12 10; opacity: .6; }
.discipline-outline { stroke: #d0e7ea; stroke-width: 1.5; opacity: .85; }
.discipline-spokes { stroke: #badbe0; stroke-width: 1.5; opacity: .78; }
.discipline-flow { stroke: #e6f8f3; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 24 180; filter: drop-shadow(0 0 5px #c4eee8); animation: discipline-stream 6s linear infinite; }
.flow-engineering { animation-delay: 2s; }
.flow-management { animation-delay: 4s; }
.discipline-core { position: absolute; top: 50%; left: 50%; width: 27%; aspect-ratio: 1; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1px solid #cae4e2a6; border-radius: 50%; background: radial-gradient(circle, #aed7d178 0%, #426776a0 38%, #162534ef 77%); box-shadow: 0 0 32px #a4d7d043, inset 0 0 20px #b4dcd63b; color: #eaf7f5; animation: core-breathe 6s ease-in-out infinite; }
.discipline-core span { font-size: clamp(1rem, 2vw, 1.6rem); line-height: 1; }
.discipline-core strong { font-size: clamp(.72rem, 1.1vw, .9rem); letter-spacing: .14em; font-weight: 650; }
.discipline-node { position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid #d3ebe9; border-radius: 100px; background: #14283cf5; color: #f0fbf9; box-shadow: 0 5px 25px #060d1b56, 0 0 22px #a9d4de42; backdrop-filter: blur(12px); font-size: .95rem; font-weight: 750; letter-spacing: .08em; white-space: nowrap; animation: node-breathe 6s ease-in-out infinite; }
.discipline-node svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.node-nursing { left: 50%; top: 16%; transform: translate(-50%, -50%); }
.node-engineering { left: 19%; top: 74%; transform: translate(-50%, -50%); animation-delay: 2s; border-color: #b8dfe0; }
.node-management { left: 81%; top: 74%; transform: translate(-50%, -50%); animation-delay: 4s; border-color: #d2c5e4; }
@keyframes ring-turn { to { transform: rotate(360deg); } }
@keyframes discipline-stream { 0%, 8% { stroke-dashoffset: 175; opacity: 0; } 17% { opacity: .95; } 32% { stroke-dashoffset: 0; opacity: .9; } 42%, 100% { stroke-dashoffset: -30; opacity: 0; } }
@keyframes node-breathe { 0%, 18%, 54%, 100% { box-shadow: 0 5px 25px #060d1b56, 0 0 22px #a9d4de20; } 34% { box-shadow: 0 5px 25px #060d1b56, 0 0 28px #c0e4e060; } }
@keyframes core-breathe { 0%, 68%, 100% { box-shadow: 0 0 32px #a4d7d043, inset 0 0 20px #b4dcd63b; } 84% { box-shadow: 0 0 48px #bce4e37a, inset 0 0 25px #b4dcd66b; } }
.about-panel { background: linear-gradient(125deg, #0c1423, #1b293e 62%, #182a3b); }
.about-panel .panel-glow { background: radial-gradient(ellipse 33% 26% at 72% 33%, #7179a28c, transparent 80%), radial-gradient(ellipse 37% 29% at 49% 69%, #56878d80, transparent 80%), radial-gradient(ellipse 26% 24% at 18% 83%, #615b8e7b, transparent 80%); }
.about-layout { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-block: clamp(28px, 4.5vh, 60px); }
.about-layout h2 { font-size: clamp(2.5rem, min(5.5vw, 8vh), 5.4rem); line-height: 1.17; margin: clamp(15px, 2.5vh, 26px) 0 clamp(18px, 3vh, 34px); }
.about-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 7vw, 100px); max-width: 920px; border-top: 1px solid #829caa; padding-top: 21px; }
.about-columns p { margin: 0; color: #c7d7de; font-size: clamp(1rem, min(1.5vw, 2.25vh), 1.18rem); line-height: 1.65; }
.about-layout .aside-next { margin-top: clamp(18px, 3vh, 32px); }
@media (min-width: 651px) and (max-width: 1000px) {
  .intro-only { grid-template-columns: minmax(0, 1fr) minmax(240px, .9fr); gap: clamp(16px, 3vw, 32px); }
  .intro-only .intro-main h1 { font-size: clamp(2.5rem, min(6vw, 8vh), 4.2rem); }
  .discipline-visual { width: min(34vw, 52vh, 350px); }
}
@media (max-width: 650px) {
  .intro-only { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: auto auto auto auto minmax(0, 1fr); align-content: center; align-items: end; gap: 0 6px; padding-block: 20px; }
  .intro-only .intro-main { display: contents; }
  .intro-only .panel-kicker { grid-column: 1 / -1; grid-row: 1; }
  .intro-only h1 { grid-column: 1 / -1; grid-row: 2; }
  .intro-only .intro-lead { grid-column: 1; grid-row: 3; align-self: start; font-size: .97rem; line-height: 1.5; }
  .lead-wide { display: none; }
  .lead-compact { display: inline; font-weight: 650; letter-spacing: .02em; }
  .intro-only .swipe-cue { grid-column: 1; grid-row: 4; justify-self: start; gap: 9px; margin-top: 8px; padding-block: 8px; white-space: nowrap; }
  .discipline-visual { grid-column: 2; grid-row: 3 / 6; width: min(100%, 33vh, 260px); justify-self: end; align-self: end; margin: 0; }
  .discipline-node { padding: 5px 6px; gap: 4px; font-size: .75rem; }
  .discipline-node svg { width: 14px; height: 14px; }
  .discipline-core span { font-size: .95rem; }
  .discipline-core strong { font-size: .65rem; }
  .about-layout { padding-block: 32px; }
  .about-layout h2 { font-size: clamp(2.2rem, 8.6vw, 3.4rem); margin: 20px 0 23px; }
  .about-columns { display: block; padding-top: 17px; }
  .about-columns p { font-size: .98rem; line-height: 1.66; }
  .about-columns p + p { margin-top: 14px; }
  .about-layout .aside-next { margin-top: 23px; }
}
@media (max-height: 700px) {
  .intro-layout { padding-block: 30px; }
  .intro-main h1 { font-size: clamp(2.8rem, min(7.2vh, 9vw), 6rem); margin-block: 17px; }
  .intro-lead { font-size: 1rem; line-height: 1.55; }
  .intro-only .aside-next { margin-top: 23px; }
  .about-layout { padding-block: 25px; }
  .about-layout h2 { font-size: clamp(2rem, min(6.4vh, 8vw), 4rem); margin-block: 17px 20px; }
  .about-columns p { font-size: .95rem; line-height: 1.55; }
  .project-layout { padding-block: 22px 26px; }
  .project-bottomline h2 { font-size: clamp(2.6rem, min(9vh, 11vw), 5rem); margin-block: 15px; }
  .project-bottomline p:not(.panel-kicker) { font-size: .98rem; line-height: 1.5; margin-bottom: 17px; }
  .contact-layout { padding-block: 25px; }
  .contact-layout h2 { font-size: clamp(2.6rem, min(9vh, 11vw), 5rem); margin-block: 17px; }
  .contact-layout small { margin-top: 24px; }
}
@media (max-height: 560px) {
  .story-controls { height: 58px; }
  .story-buttons button { width: 38px; height: 38px; }
  .panel-kicker,.project-topline { font-size: .7rem; }
  .intro-layout,.about-layout { padding-block: 20px; }
  .about-layout .aside-next { margin-top: 16px; }
  .project-link { padding: 10px 15px; }
  .contact-layout small { margin-top: 12px; }
}
@media (max-width: 375px) and (max-height: 620px) {
  .story-controls { gap: 16px; }
  .story-progress { gap: 8px; }
  .story-track { width: 58px; }
  .intro-layout { padding-block: 20px; }
  .intro-main h1 { margin-block: 14px; }
  .intro-lead { font-size: .98rem; line-height: 1.5; }
  .swipe-cue { margin-top: 15px; padding-block: 9px; }
  .contact-layout { padding-block: 18px; }
  .contact-layout h2 { margin-block: 10px; }
  .contact-layout .contact-placeholder { margin-top: 10px; padding: 11px 16px; }
  .contact-layout small { margin-top: 12px; }
}
@media (max-width: 650px) and (max-height: 620px) {
  .intro-only { padding-block: 18px; }
  .intro-only h1 { margin-block: 12px; }
}
@media (max-height: 480px) {
  .story-viewport { touch-action: pan-x pan-y pinch-zoom; }
  .story-panel { overflow-y: auto; }
}

/* Project stories use the same horizontal navigation as the homepage. */
.detail-cover h1 { max-width: 760px; font-size: clamp(2.65rem, min(7vw, 10vh), 7rem); line-height: 1.08; margin: clamp(9px, 1.7vh, 20px) 0; }
.detail-cover .project-bottomline > div { max-width: 720px; }
.detail-cover .project-bottomline p:not(.panel-kicker) { margin-bottom: clamp(10px, 2vh, 20px); }
.detail-cover .aside-next { margin-top: 0; text-decoration: none; }
.detail-cover .aside-next span { display: inline-block; animation: nudge-right 1.9s ease-in-out infinite; }
.detail-story .about-columns { width: min(920px, 100%); }
.detail-story .about-columns > div { min-width: 0; }
.detail-label { margin: 0 0 10px; color: #bcdce2; font-size: .78rem; letter-spacing: .12em; font-weight: 750; }
.detail-outcome .project-link { margin-top: clamp(15px, 2.7vh, 26px); }
.detail-two .detail-story { background: linear-gradient(125deg, #17172b, #302c48 65%, #243e4c); }
.detail-two .detail-outcome { background: linear-gradient(125deg, #111322, #292b43 65%, #253d49); }
.detail-two .detail-label { color: #ddd0ef; }
@media (max-width: 650px) {
  .detail-cover .project-topline { padding-bottom: 12px; }
  .detail-cover .back-link { font-size: .8rem; padding-bottom: 5px; gap: 8px; }
  .detail-cover .project-art { opacity: .68; }
  .detail-cover .aside-next { margin-top: 0; font-size: .84rem; }
  .detail-story .about-columns > div + div { margin-top: 15px; }
  .detail-label { margin-bottom: 5px; }
}
@media (max-width: 375px) and (max-height: 620px) {
  .detail-cover .project-layout { padding-block: 17px 20px; }
  .detail-cover .project-topline > span { display: none; }
  .detail-cover h1 { font-size: 2.65rem; margin-block: 8px; }
  .detail-cover .project-bottomline p:not(.panel-kicker) { font-size: .92rem; line-height: 1.42; margin-bottom: 8px; }
  .detail-cover .aside-next { padding-bottom: 6px; }
  .detail-story .about-layout { padding-block: 14px; }
  .detail-story .about-layout h2 { font-size: 1.9rem; margin-block: 12px 14px; }
  .detail-story .about-columns { padding-top: 10px; }
  .detail-story .about-columns p { font-size: .88rem; line-height: 1.45; }
  .detail-story .about-columns > div + div { margin-top: 12px; }
  .detail-story .detail-label { font-size: .7rem; margin-bottom: 3px; }
  .detail-story .aside-next { margin-top: 14px; padding-bottom: 5px; }
  .detail-outcome .project-link { margin-top: 13px; padding: 10px 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .detail-cover .aside-next span { animation: none; }
  .orbit-ring-outer,.discipline-flow,.discipline-core,.discipline-node { animation: none; }
}

/* Shared page edges and a consistent reading position on all five panels. */
.home { --page-gutter: clamp(24px, 6vw, 112px); --page-width: 1280px; }
.home .site-header .wrap,
.home .panel-inner { width: min(var(--page-width), calc(100% - 2 * var(--page-gutter))); }
.home .site-header .wrap { display: grid; grid-template-columns: 1fr auto 1fr; min-height: 76px; gap: 28px; align-items: center; }
.home .nav { gap: clamp(22px, 2.6vw, 40px); }
.home .nav a { font-size: .9375rem; }
.home .brand { font-size: 1rem; letter-spacing: .02em; }
.home .language-picker { justify-self: end; }
.home .story-controls { height: 68px; padding-inline: max(var(--page-gutter), calc((100vw - var(--page-width)) / 2)); }
.home .story-buttons button { width: 42px; height: 42px; }
.home .story-progress { font-size: .875rem; }
.home .panel-kicker { font-size: .875rem; letter-spacing: .12em; }
.home:not(.detail-site) .story-panel { --content-rail: clamp(48px, 13dvh, 144px); }
.home .nav a:last-child { border: 0; border-radius: 0; padding: 0; }
.home .nav a:last-child:not([aria-current]) { color: #c0d1da; }
.home .nav a:last-child:hover { color: #fff; }
.home:not(.detail-site) .contact-placeholder { border: 0; border-radius: 0; padding: 0; }
.home:not(.detail-site) .intro-only,
.home:not(.detail-site) .about-layout,
.home:not(.detail-site) .project-layout,
.home:not(.detail-site) .contact-layout { padding-top: var(--content-rail); padding-bottom: 32px; }
.home:not(.detail-site) .intro-only { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); align-items: start; }
.intro-art { display: contents; }
.home:not(.detail-site) .intro-main { min-width: 0; }
.home:not(.detail-site) .intro-main h1 { font-size: clamp(3.25rem, min(5.8vw, 9dvh), 5.75rem); line-height: 1.12; letter-spacing: -.035em; margin: 24px 0; }
.home:not(.detail-site) .intro-greeting { display: block; margin-bottom: 10px; font-size: clamp(1.25rem, 1.7vw, 1.65rem); font-weight: 500; line-height: 1.4; letter-spacing: .025em; color: #c7d7e0; }
.home:not(.detail-site) .intro-main h1 em { display: block; overflow-wrap: anywhere; }
.home:not(.detail-site) .intro-lead { max-width: 27em; font-size: clamp(1rem, 1.45vw, 1.1875rem); line-height: 1.85; color: #c0ced9; text-wrap: pretty; }
.home:not(.detail-site) .lead-wide { white-space: pre-line; }
.home:not(.detail-site) .swipe-cue { margin-top: 28px; gap: 28px; padding-block: 10px; font-size: .9375rem; }
.home:not(.detail-site) .discipline-visual { width: min(100%, 64dvh, 580px); margin: 0; align-self: center; justify-self: center; }
.home:not(.detail-site) .story-panel::after { opacity: .22; }
.home:not(.detail-site) .about-layout,
.home:not(.detail-site) .project-layout,
.home:not(.detail-site) .contact-layout { justify-content: flex-start; }
.home:not(.detail-site) .project-topline { display: none; }
.home:not(.detail-site) .about-layout h2,
.home:not(.detail-site) .project-bottomline h2,
.home:not(.detail-site) .contact-layout h2 { font-size: clamp(2.75rem, min(5.8vw, 9dvh), 5.5rem); letter-spacing: -.035em; margin-top: 24px; }
.home:not(.detail-site) .about-columns { max-width: 900px; gap: 60px; }
.home:not(.detail-site) .project-bottomline p:not(.panel-kicker),
.home:not(.detail-site) .contact-layout p:not(.panel-kicker) { max-width: 30em; text-wrap: pretty; }
@media (min-width: 651px) and (max-width: 1050px) {
  .home .site-header .wrap { grid-template-columns: auto 1fr auto; gap: 22px; }
  .home .nav { justify-content: center; gap: 20px; }
  .home:not(.detail-site) .intro-only { gap: 32px; }
  .home:not(.detail-site) .discipline-node { padding: 8px 10px; font-size: .875rem; gap: 6px; }
}
@media (max-width: 650px) {
  .home { --page-gutter: 24px; }
  .home .site-header .wrap { grid-template-columns: minmax(0, 1fr) auto; min-height: 0; gap: 14px 12px; padding-block: 14px 16px; }
  .home .nav { gap: 0; }
  .home .nav a { font-size: .875rem; }
  .home .story-controls { height: 62px; }
  .home .story-track { width: 64px; }
  .home:not(.detail-site) .story-panel { --content-rail: clamp(24px, 4.5dvh, 40px); }
  .home:not(.detail-site) .intro-only { display: flex; flex-direction: column; gap: 0; min-height: 100%; padding-bottom: 20px; }
  .home:not(.detail-site) .intro-main { display: block; width: 100%; }
  .home:not(.detail-site) .intro-main h1 { font-size: clamp(2.8rem, 12vw, 4rem); margin: 20px 0 18px; }
  .home:not(.detail-site) .intro-greeting { font-size: 1.125rem; margin-bottom: 8px; }
  .home:not(.detail-site) .intro-lead { font-size: 1rem; line-height: 1.6; }
  .home:not(.detail-site) .swipe-cue { margin-top: 16px; padding-block: 8px; }
  .home:not(.detail-site) .discipline-visual { width: min(68vw, 29dvh, 290px); margin: 16px 0 0; align-self: flex-end; flex: none; }
  .home:not(.detail-site) .discipline-node { padding: 6px 9px; gap: 5px; font-size: .875rem; }
  .home:not(.detail-site) .about-layout h2,
  .home:not(.detail-site) .project-bottomline h2,
  .home:not(.detail-site) .contact-layout h2 { font-size: clamp(2.4rem, 10vw, 3.8rem); margin-top: 20px; }
  .home:not(.detail-site) .about-columns p { font-size: 1rem; }
}
@media (max-height: 700px) and (min-width: 651px) {
  .home:not(.detail-site) .story-panel { --content-rail: 40px; }
  .home:not(.detail-site) .intro-main h1 { margin-block: 18px; }
  .home:not(.detail-site) .swipe-cue { margin-top: 18px; }
}
@media (max-height: 740px) and (max-width: 650px) {
  .home:not(.detail-site) .story-panel { --content-rail: 24px; }
  .home:not(.detail-site) .intro-main h1 { margin-block: 14px; font-size: 2.75rem; }
  .home:not(.detail-site) .discipline-visual { width: min(57vw, 25dvh, 210px); margin-top: 8px; }
  .home:not(.detail-site) .swipe-cue { margin-top: 12px; }
}
@media (max-height: 560px) {
  .home .story-panel { overflow-y: auto; }
  .home .story-viewport { touch-action: pan-x pan-y pinch-zoom; }
}
@media (min-width: 651px) {
  .home:not(.detail-site) .intro-only { grid-template-rows: max-content; align-content: start; }
  .intro-art { display: block; position: relative; align-self: stretch; min-width: 0; }
  .home:not(.detail-site) .discipline-visual { position: absolute; top: calc(50% + clamp(72px, 15dvh, 128px)); left: 50%; transform: translate(-50%, -50%); }
}