:root {
  --text: #f2eee7;
  --muted: #b4aaa0;
  --orange: #ff641d;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: Inter, Arial, sans-serif;
  color-scheme: dark;
  font-family: var(--sans);
  font-synthesis: none;
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; background: #070707; color: var(--text); }
body { overflow-x: hidden; }
body.intro-playing, body.dialog-open { overflow: hidden; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--text); outline-offset: 6px; }
[hidden] { display: none !important; }
h1, h2, h3, p, dl, dd { margin: 0; }
button:disabled { opacity: .35; cursor: default; }
.experience { position: fixed; inset: 0; isolation: isolate; z-index: 0; overflow: hidden; background: #070707; }
.world { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; }
.scene-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 0; transition: opacity .6s; filter: brightness(.48); }
.world[data-fallback=true] .scene-poster { opacity: 1; }
#hero-canvas { display: block; width: 100%; height: 100%; position: relative; z-index: 1; outline: none; touch-action: pan-y; cursor: grab; }
#hero-canvas:active { cursor: grabbing; }
.atmosphere { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(0deg,#030303b0 0%,transparent 32%,transparent 74%,#03030365 100%),radial-gradient(ellipse at 50% 48%,transparent 36%,#04040465 100%); }
.film-edge { position: absolute; inset: 0; pointer-events: none; box-shadow: 0 0 130px 20px #0004 inset; z-index: 3; }
.site-header { height: 96px; position: fixed; inset: 0 0 auto; padding: 0 5.2%; display: flex; align-items: center; justify-content: space-between; gap: 32px; z-index: 20; border-bottom: 1px solid #f9d4ae0c; transition: background .5s,border-color .5s,opacity 1s; }
.is-scrolled .site-header { background: linear-gradient(#080807de,#08080718); border-color: transparent; }
.brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 19px; font-weight: 500; }
.brand svg { height: 34px; width: 34px; }
.site-header nav { display: flex; gap: 30px; }
.site-header nav a { color: #c4bcb3; font-size: 13px; padding: 10px 0; transition: color .2s; }
.site-header nav a:hover { color: var(--text); }
.site-header nav a[aria-current] { color: var(--orange); }
.header-cta { font-size: 13px; padding: 12px 20px; border: 1px solid #a99c8e65; background: #0c0b0a77; border-radius: 4px; transition: background .2s; }
.header-cta:hover { background: #282522; }
.intro-ui { opacity: 0; pointer-events: none; transition: opacity 1.4s ease .35s; }
.intro-complete .intro-ui { opacity: 1; pointer-events: auto; }
.narrative > section { scroll-snap-align: start; scroll-snap-stop: normal; }
.narrative { position: relative; z-index: 5; pointer-events: none; overflow: clip; }
.opening { height: 100svh; min-height: 600px; position: relative; }
.opening-title { position: absolute; top: 55%; left: 3%; right: 3%; text-align: center; pointer-events: none; transform: translateY(26px); opacity: 0; filter: blur(10px); transition: opacity 2s ease,transform 2s cubic-bezier(.2,.8,.2,1),filter 2s ease; }
.intro-complete .opening-title { transform: translateY(0); opacity: var(--opening-opacity,1); filter: blur(0); }
.opening h1 { font: 400 clamp(88px,12vw,190px)/.95 var(--serif); letter-spacing: -.035em; text-shadow: 0 3px 35px #0006; white-space: nowrap; }
.opening h1 > span { display: inline-block; transition: transform 2s cubic-bezier(.2,.8,.2,1); }
.intro-playing .opening h1 > span:first-child { transform: translateX(-14px); }
.intro-playing .opening h1 > span:last-child { transform: translateX(14px); }
.opening-tagline { font-size: 17px; line-height: 1.6; color: #c8bcb0; margin: 26px auto 0; text-shadow: 0 2px 12px #000; max-width: 36em; }
.scroll-invitation { position: absolute; bottom: 35px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; flex-direction: column; gap: 16px; font-size: 13px; color: #c2b6a8; padding: 10px; }
.scroll-line { width: 1px; height: 27px; background: linear-gradient(#b3a99d,transparent); position: relative; overflow: hidden; }
.scroll-line:after { content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 10px; background: #e1d7ca; animation: scroll-line 2s ease infinite; }
.journey-nav { position: fixed; right: 29px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 7px; z-index: 18; }
.journey-nav a { width: 20px; height: 20px; display: grid; place-items: center; }
.journey-nav i { width: 3px; height: 3px; border-radius: 50%; background: #97816a7a; transition: background .5s,box-shadow .5s,transform .5s; }
.journey-nav [aria-current] i { background: var(--orange); box-shadow: 0 0 10px #ff69145c; transform: scale(1.5); }
.journey-progress { position: fixed; inset: 0 auto 0 0; width: 1px; background: #b48a6310; z-index: 20; }
.journey-progress > span { width: 100%; height: 100%; display: block; background: var(--orange); transform: scaleY(0); transform-origin: top; }
.skip-intro { position: fixed; top: 15px; left: 15px; z-index: 100; transform: translateY(-180%); background: #17120d; border: 1px solid #ad9c88; padding: 12px 17px; font-size: 13px; opacity: 0; }
.skip-intro:focus-visible { transform: none; opacity: 1; }
.intro-complete .skip-intro { display: none; }
.narrative-section { min-height: 100svh; display: flex; align-items: center; position: relative; padding: 140px 9%; pointer-events: none; }
.section-copy { max-width: 530px; pointer-events: auto; opacity: var(--copy-opacity,1); transform: translateY(var(--copy-y,0px)); will-change: opacity,transform; position: relative; isolation: isolate; }
.section-copy:before { content: ''; position: absolute; inset: -100px -100px; background: radial-gradient(ellipse,#080706b3 15%,#08070652 49%,transparent 73%); z-index: -1; pointer-events: none; }
.side-right { justify-content: flex-end; }
.chapter-overline { font-size: 13px; color: #c4b8a9; line-height: 1.6; }
.narrative-section h2 { font: 400 clamp(58px,6.7vw,100px)/1.02 var(--serif); margin: 25px 0 28px; text-wrap: balance; text-shadow: 0 2px 25px #0004; }
.section-description { font-size: 17px; line-height: 1.75; color: #c4b8aa; max-width: 390px; }
.text-button { background: none; padding: 9px 0; margin-top: 26px; display: inline-flex; align-items: center; font-size: 13px; line-height: 1.5; color: #e0d5c8; border-bottom: 1px solid #9e8f7c8a; }
.text-button:hover { color: white; border-color: #e0d5c8; }
.closing-section { justify-content: center; text-align: center; min-height: 110svh; }
.closing-section .section-copy { max-width: 800px; }
.closing-section .section-copy:before { inset: -200px; background: radial-gradient(ellipse,#060605c7 5%,#06060570 45%,transparent 72%); }
.closing-section h2 { font-size: clamp(85px,10vw,152px); }
.closing-section .section-description { max-width: 420px; margin: auto; }
.closing-actions, .dialog-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 32px; }
.closing-actions { justify-content: center; }
.button-primary { display: inline-flex; align-items: center; justify-content: center; padding: 14px 21px; min-height: 47px; border: 1px solid #dd622a; border-radius: 3px; background: #c65021; color: #fff7ef; font-size: 13px; line-height: 1.5; transition: background .2s; }
.button-primary:hover { background: #df5b25; }
.quiet-link { display: inline-flex; align-items: center; background: transparent; font-size: 13px; line-height: 1.5; color: #c7bbb0; padding: 12px 0; }
.quiet-link:hover { color: #f3e9dc; }
.closing-footer { position: absolute; left: 6%; right: 6%; bottom: 115px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; line-height: 1.6; color: #b1a292; gap: 20px; flex-wrap: wrap; pointer-events: auto; }
.closing-footer button { font: inherit; background: none; color: inherit; padding: 10px 0; }
.closing-footer a:hover, .closing-footer button:hover { color: var(--text); }
.company-details { display: block; font-size: 13px; margin-top: 5px; }
@keyframes scroll-line { 0% { transform: translateY(-12px); } 65%,100% { transform: translateY(36px); } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
.detail-dialog { color: var(--text); border: 1px solid #72604e52; background: #10100fed; border-radius: 8px; padding: 0; width: min(760px,calc(100vw - 48px)); max-height: 88svh; overflow: auto; box-shadow: 0 20px 100px #000a; backdrop-filter: blur(24px); scrollbar-color: #584a3d #171613; }
.detail-dialog::backdrop { background: #03030280; backdrop-filter: blur(10px); }
.detail-dialog[open] { animation: dialog-in .4s cubic-bezier(.2,.8,.2,1); }
.dialog-top { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; background: #12110fef; border-bottom: 1px solid #65513f3f; padding: 15px 28px; font-size: 13px; color: #c0b0a0; }
.dialog-top button { height: 36px; width: 36px; background: none; color: #d4c7b8; font-size: 24px; border: 1px solid #76614b47; border-radius: 50%; line-height: 1; }
.dialog-top button:hover { color: #fff; background: #49423a55; }
.about-content, .product-content { padding: 36px 48px 42px; }
.about-content h2, .product-content h2 { font: 400 clamp(48px,6vw,66px)/1.05 var(--serif); margin-bottom: 28px; }
.about-copy, .product-lead { color: #c7bfb5; font-size: 17px; line-height: 1.8; }
.about-copy p + p { margin-top: 20px; }
.product-details { margin-top: 30px; border-top: 1px solid #77614936; }
.product-details > div { display: grid; grid-template-columns: 142px 1fr; gap: 20px; padding: 21px 0; border-bottom: 1px solid #77614936; }
.product-details dt { font-size: 13px; line-height: 1.8; color: #e3d8ca; padding-top: 3px; font-weight: 500; }
.product-details dd { color: #bcb2a6; font-size: 17px; line-height: 1.75; }
.dialog-actions .text-button { margin-top: 0; }
.about-content .dialog-actions:has([hidden]) { margin-top: 0; }
.intro-playing .opening-title, .intro-playing .intro-ui { transition: none; }
@media(max-width:1100px) {
  .section-copy { max-width: 470px; }
  .site-header nav { gap: 24px; }
  .opening h1 { font-size: 13.7vw; }
  .narrative-section { padding-left: 8%; padding-right: 9%; }
}
@media(max-width:820px) {
  .site-header { height: 82px; padding: 0 5%; gap: 18px; }
  .brand { font-size: 17px; }
  .brand svg { width: 30px; height: 30px; }
  .site-header nav { gap: 17px; }
  .header-cta { padding: 10px 14px; }
  .opening-title { top: 58%; }
  .opening h1 { font-size: 14.7vw; }
  .scroll-invitation { bottom: 28px; }
  .journey-nav { right: 12px; }
  .narrative-section { padding: 130px 7%; }
  .section-copy { max-width: 420px; }
  .narrative-section h2 { font-size: clamp(58px,8vw,76px); }
  .closing-section h2 { font-size: 13vw; }
  .detail-dialog { max-height: 91svh; }
}
@media(max-width:600px) {
  .site-header { height: auto; min-height: 100px; padding: 15px 6% 12px; gap: 12px 18px; flex-wrap: wrap; }
  .brand { font-size: 16px; gap: 7px; }
  .brand svg { height: 27px; width: 27px; }
  .site-header nav { order: 3; width: 100%; justify-content: space-between; gap: 18px; }
  .site-header nav a { padding: 3px 0; }
  .header-cta { margin-left: auto; padding: 8px 12px; }
  .opening { min-height: 610px; }
  .opening-title { top: 59%; left: 3%; right: 3%; }
  .opening h1 { font-size: 15.5vw; letter-spacing: -.035em; }
  .opening-tagline { font-size: 17px; margin-top: 20px; max-width: 280px; }
  .scroll-invitation { left: 6.5%; transform: none; bottom: 27px; align-items: flex-start; gap: 10px; padding: 0; }
  .scroll-line { height: 24px; }
  .journey-nav { right: 7px; gap: 4px; }
  .journey-nav a { width: 18px; height: 18px; }
  .narrative-section { padding: 150px 9% 23vh; min-height: 100svh; align-items: flex-end; }
  .section-copy { max-width: 100%; }
  .section-copy:before { inset: -100px -35px; background: radial-gradient(ellipse,#050504d6 10%,#05050497 45%,transparent 72%); }
  .narrative-section h2 { font-size: clamp(48px,12.5vw,72px); margin: 20px 0 23px; }
  .section-description { max-width: 340px; line-height: 1.7; }
  .closing-section { align-items: center; padding-bottom: 160px; min-height: 110svh; }
  .closing-section h2 { font-size: 15vw; }
  .closing-actions { gap: 24px; margin-top: 28px; }
  .closing-footer { bottom: 110px; gap: 8px 16px; left: 9%; right: 9%; justify-content: center; }
  .closing-footer > span, .closing-footer > a { width: 100%; overflow-wrap: anywhere; }
  .scene-poster { object-position: 60% center; }
  .detail-dialog { width: calc(100vw - 24px); max-height: 93svh; border-radius: 6px; }
  .dialog-top { padding: 12px 20px; }
  .about-content, .product-content { padding: 28px 24px 30px; }
  .about-content h2, .product-content h2 { font-size: 50px; margin-bottom: 24px; }
  .product-details > div { grid-template-columns: 1fr; gap: 7px; padding: 19px 0; }
  .dialog-actions { gap: 18px; }
}
@media(max-height:650px) and (min-width:601px) {
  .opening { min-height: 540px; }
  .opening-title { top: 52%; }
  .opening h1 { font-size: 11vw; }
  .opening-tagline { margin-top: 15px; }
  .site-header { height: 76px; }
  .narrative-section { padding-top: 115px; padding-bottom: 120px; }
  .narrative-section h2 { font-size: 67px; }
}
@media(prefers-reduced-motion:reduce) {
  :root { scroll-behavior: auto; scroll-snap-type: none; }
  * { animation: none !important; transition: none !important; }
  .section-copy { will-change: auto; transform: none !important; opacity: 1 !important; }
  .opening-title { filter: none; }
}