/* NOCTARIA — an illustrated voyage. All styles are local to this page. */
:root {
  --night:#080a12; --navy:#101b2d; --ink:#192332; --paper:#f2e5c9;
  --gold:#c8a45a; --silver:#d9e2ec; --red:#a5163d;
  --body-font:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --serif:Georgia,"Yu Mincho","Hiragino Mincho ProN",serif;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:dark; scroll-behavior:smooth; scroll-padding-top:95px;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--night); color:var(--silver); font-family:var(--body-font); line-height:1.85; -webkit-font-smoothing:antialiased; }
body.modal-open { overflow:hidden; }
button,a,summary { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; border:0; cursor:pointer; }
button:disabled { cursor:default; }
img { display:block; max-width:100%; height:auto; }
svg { display:block; }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3 { font-weight:500; text-wrap:balance; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:2px solid #61e1df; outline-offset:7px; }
[hidden] { display:none!important; }
dialog:not([open]) { display:none; }
dialog { border:0; padding:0; color:inherit; }
dialog::backdrop { background:rgb(3 6 12 / .78); backdrop-filter:blur(7px); }
summary { list-style:none; cursor:pointer; }
summary::-webkit-details-marker { display:none; }
.sr-only,.svg-definitions { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip-link { position:fixed; z-index:200; left:20px; top:-80px; padding:12px 20px; background:var(--paper); color:var(--ink); }
.skip-link:focus { top:15px; }
.section-shell { width:min(1320px,calc(100% - 144px)); margin:auto; position:relative; }
.eyebrow { font-family:var(--serif); font-size:11px; letter-spacing:.28em; font-weight:600; }
.section-kicker { display:flex; align-items:center; gap:16px; color:var(--gold); letter-spacing:.22em; font:12px/1.5 var(--serif); margin-bottom:24px; }
.section-kicker>span { display:inline-grid; width:33px; height:33px; place-items:center; border:1px solid currentColor; border-radius:50%; font-size:11px; letter-spacing:0; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:62px; }
.section-heading h2,.about h2 { font-family:var(--serif); font-size:clamp(32px,3.2vw,49px); letter-spacing:.09em; line-height:1.7; }
.section-heading>p { font-size:13px; line-height:2.2; letter-spacing:.07em; padding-bottom:8px; color:#b0b8c6; }
em { font-style:normal; }
.motion-ready [data-reveal] { transition:opacity 1.1s var(--ease),transform 1.1s var(--ease); }
.motion-ready [data-reveal]:not(.is-revealed) { opacity:0; transform:translateY(28px); }
.screen-grain { position:fixed; pointer-events:none; inset:0; z-index:90; opacity:.028; filter:url(#paper-grain); background:#b2a99b; }
.ambient-canvas { position:fixed; pointer-events:none; inset:0; z-index:8; width:100%; height:100%; }
.site-header { position:absolute; z-index:20; inset:0 0 auto; height:110px; display:flex; justify-content:space-between; align-items:center; padding:0 40px; }
.site-brand { display:flex; align-items:center; gap:11px; }
.site-brand img { width:43px; height:43px; }
.site-brand>span { font-family:var(--serif); font-size:20px; line-height:1.3; letter-spacing:.19em; }
.site-brand small { display:block; font:7px/1.8 var(--body-font); letter-spacing:.18em; color:#c6c4bc; }
.header-actions { display:flex; align-items:center; gap:25px; }
.utility { font-family:var(--serif); font-size:9px; letter-spacing:.14em; background:#112032e8; padding:7px 9px; border:1px solid #c8a45a40; display:flex; align-items:center; gap:6px; text-shadow:0 1px 6px #000; }
.utility i { color:var(--gold); font-size:19px; font-style:normal; }
.menu-toggle { position:fixed; z-index:20; top:24px; right:35px; display:flex; gap:12px; align-items:center; background:#112032e8; border:1px solid #c8a45a80; padding:13px 17px; font:10px/1.5 var(--serif); letter-spacing:.14em; border-radius:1px; backdrop-filter:blur(10px); }
.menu-lines { width:24px; height:12px; border-block:1px solid var(--gold); }
.header-actions { position:fixed; top:29px; right:165px; padding-right:0; }
.hero { min-height:780px; height:100svh; max-height:1150px; position:relative; isolation:isolate; overflow:hidden; background:#0b1526; }
.hero-ocean { position:absolute; inset:-4%; background:url("../generated/noctaria/ocean-night.webp") center/cover; z-index:-4; transform:translateY(calc(var(--hero-scroll,0) * 60px)); }
.hero-visual { position:absolute; inset:0; z-index:-3; transform:translateY(calc(var(--hero-scroll,0) * 100px)) scale(calc(1 + var(--hero-scroll,0) * .035)); }
.hero-group { width:100%; height:100%; object-fit:cover; object-position:50% 26%; }
.hero-art-shade { position:absolute; inset:0; background:linear-gradient(0deg,#080f1d 0%,#080f1db0 12%,transparent 62%),linear-gradient(270deg,#08101da0 0%,#08101d30 28%,transparent 66%); }
.hero-rigging { position:absolute; z-index:-1; inset:-3% -2%; background:url("../generated/noctaria/rigging-overlay.webp") center/100% 100% no-repeat; opacity:.72; pointer-events:none; transform:translateY(calc(var(--hero-scroll,0) * -35px)); }
.hero-copy { position:absolute; right:max(72px,calc((100vw - 1296px)/2)); bottom:100px; width:min(600px,43vw); z-index:3; text-shadow:0 2px 25px #050916; }
.hero-eyebrow { display:flex; align-items:center; gap:12px; color:#ded0aa; font-size:10px; letter-spacing:.25em; }
.hero-eyebrow>span { width:25px; height:1px; background:var(--gold); }
.hero h1 { margin:-10px 0 -13px -14px; }
.hero h1 img { width:100%; }
.hero-tagline { font-family:var(--serif); font-size:clamp(26px,2.55vw,39px); line-height:1.65; letter-spacing:.16em; color:#fff7e9; }
.hero-tagline>span { display:block; }
.hero-description { font-size:1rem; margin-top:20px; color:#e1e2e6; letter-spacing:.04em; line-height:2.05; }
.hero-crew-link { display:inline-flex; gap:32px; align-items:center; margin-top:24px; border-bottom:1px solid #c8a45a90; padding:6px 0; font:11px/1.8 var(--serif); letter-spacing:.14em; }
.hero-crew-link>span { color:var(--gold); font-size:22px; transition:transform .3s; }
.hero-crew-link:hover>span { transform:translate(3px,-3px); }
.hero-bottom { position:absolute; bottom:28px; left:40px; right:40px; display:flex; justify-content:space-between; align-items:end; gap:30px; z-index:4; font:8px/1.5 var(--serif); letter-spacing:.2em; color:#c3c5cf; }
.scroll-cue { display:flex; flex-direction:column; align-items:center; gap:10px; font-size:9px; }
.scroll-cue i { width:1px; height:35px; background:linear-gradient(var(--gold),transparent); transform-origin:top; }
.sea-mist { position:absolute; pointer-events:none; left:-20%; bottom:-20%; width:140%; height:45%; background:radial-gradient(ellipse,#a6bec325,transparent 65%); z-index:2; }
.mist-two { bottom:0; opacity:.6; }
[data-motion="on"] .sea-mist { animation:mist-drift 18s ease-in-out infinite alternate; }
[data-motion="on"] .mist-two { animation-duration:24s; animation-direction:alternate-reverse; }
[data-motion="on"] .scroll-cue i { animation:scroll-line 2.4s ease-in-out infinite; }
.paper-section { --paper-tear-size:72px; color:var(--ink); position:relative; isolation:isolate; z-index:5; }
.paper-section .section-kicker { color:#78603c; }
.paper-section .section-heading>p { color:#6f6554; }
/* Mask one continuous chart, including both overhanging edges, so no strip seams remain. */
.paper-surface { position:absolute; inset:calc(var(--paper-tear-size) * -.75) 0; z-index:-1; pointer-events:none; filter:drop-shadow(0 -3px 4px #02081038) drop-shadow(0 7px 9px #02081066); }
.paper-surface::before,.paper-surface::after {
  content:""; position:absolute; inset:0;
  -webkit-mask-image:url("../noctaria/paper-tear-top.svg"),linear-gradient(#000,#000),url("../noctaria/paper-tear-bottom.svg");
  mask-image:url("../noctaria/paper-tear-top.svg"),linear-gradient(#000,#000),url("../noctaria/paper-tear-bottom.svg");
  -webkit-mask-size:max(100%,960px) var(--paper-tear-size),100% calc(100% - var(--paper-tear-size) * 2 + 2px),max(100%,960px) var(--paper-tear-size);
  mask-size:max(100%,960px) var(--paper-tear-size),100% calc(100% - var(--paper-tear-size) * 2 + 2px),max(100%,960px) var(--paper-tear-size);
  -webkit-mask-position:center top,center,center bottom;
  mask-position:center top,center,center bottom;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}
.paper-surface::before { inset:-2px 0; background:#fff3db; }
.paper-surface::after { background:var(--paper) url("../generated/noctaria/chart-paper.webp") center/cover; }
.about { padding:120px 0 135px; }
.about-layout { display:grid; grid-template-columns:1fr 1fr; gap:85px; align-items:center; }
.about-copy { position:relative; z-index:4; }
.about h2 { margin-bottom:30px; line-height:1.8; font-size:clamp(30px,2.7vw,42px); }
.about .lead { font-size:17px; margin-bottom:20px; letter-spacing:.08em; }
.about-copy>p:not(.section-kicker):not(.lead) { font-size:1rem; line-height:2.2; margin-top:18px; letter-spacing:.02em; }
.about-copy>p.story-final { font-family:var(--serif); font-size:18px!important; margin-top:28px!important; }
.ink-underline { background:linear-gradient(0deg,#c8a45a65,#c8a45a65) 0 92%/var(--ink-progress,0%) 6px no-repeat; }
.daily-life-board { position:relative; z-index:2; transform:rotate(4deg); background:#fbf3df; padding:13px 13px 0; box-shadow:3px 16px 28px #3e271b30; margin-top:25px; }
.daily-life-slides { position:relative; width:100%; aspect-ratio:1.45; overflow:hidden; background:#111827; }
.daily-life-slide { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; transform:scale(1.03); transition:opacity .9s var(--ease),transform 1.8s var(--ease); }
.daily-life-slide.is-active { opacity:1; transform:scale(1); }
.daily-life-board figcaption { padding:24px 18px; text-align:center; }
.daily-life-board figcaption>span:not(.daily-life-status) { display:block; color:#8e734e; letter-spacing:.2em; font:9px/1.5 var(--serif); }
.daily-life-board strong { display:block; font:26px/1.8 var(--serif); letter-spacing:.18em; }
.daily-life-mobile-break { display:none; }
.daily-life-board small { display:block; font-size:10px; letter-spacing:.08em; }
.daily-life-status { display:block; margin-top:12px; color:#a5163d; font:10px/1.4 var(--serif); letter-spacing:.18em; }
.postcard-pin { position:absolute; height:18px; width:18px; border-radius:50%; background:radial-gradient(circle at 30% 30%,#d4b16c,#71572c); box-shadow:2px 4px 5px #31201c60; top:-6px; left:50%; }
.about-route { position:absolute; left:-45px; top:8%; width:calc(100% + 70px); opacity:.36; z-index:1; }
.about-route svg { stroke:#856338; stroke-width:1.5; fill:none; stroke-dasharray:8 7; }
.about-route path { stroke-dasharray:1600; stroke-dashoffset:calc(1600 * (1 - var(--about-progress,0))); }
.coordinate { font:8px/1.4 var(--serif); letter-spacing:.24em; }
.about-coordinate { position:absolute; bottom:-85px; right:10px; color:#947a57; }
.crew { position:relative; isolation:isolate; overflow:hidden; padding:140px 0 105px; background:radial-gradient(ellipse at 50% 45%,#162c40 0%,#0b1423 64%); }
.crew::after { content:""; position:absolute; inset:auto 0 0; height:240px; z-index:-1; pointer-events:none; background:linear-gradient(180deg,#08162500,#081625 92%); }
.crew-watermark { position:absolute; top:18px; right:-16px; font:240px/1 var(--serif); letter-spacing:.08em; color:#e7dec104; pointer-events:none; }
.crew .section-shell { width:min(1400px,calc(100% - 112px)); }
.crew h2 em { color:#e3c181; }
.crew-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:17px; align-items:start; }
.crew-card { position:relative; min-width:0; border:1px solid #c8a45a30; background:linear-gradient(160deg,#162639,#0b121f); transition:border-color .4s,transform .5s var(--ease),box-shadow .4s; }
.crew-card summary { position:relative; overflow:hidden; }
.crew-card:hover,.crew-card:focus-within { border-color:var(--member); box-shadow:0 0 35px color-mix(in srgb,var(--member) 15%,transparent); }
.crew-card:hover { transform:translateY(-9px); }
.crew-number { position:absolute; z-index:5; top:13px; left:15px; color:#ddbd82; font:14px/1.4 var(--serif); }
.crew-number>span { font-size:7px; color:#adb8c7; letter-spacing:.1em; }
.crew-portrait { position:relative; height:365px; overflow:hidden; isolation:isolate; background:radial-gradient(ellipse at 50% 35%,color-mix(in srgb,var(--member) 18%,transparent),transparent 72%); }
.crew-portrait::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(0deg,#101b2e 0%,transparent 26%); z-index:3; }
.crew-portrait>img { position:absolute; width:100%; height:100%; object-fit:cover; object-position:50% 0; z-index:2; transition:transform .8s var(--ease); }
.crew-card:hover .crew-portrait>img,.crew-card:focus-within .crew-portrait>img { transform:scale(1.035); }
.crew-meta { display:block; position:relative; z-index:4; padding:9px 15px 17px; }
.crew-role-en { display:block; font:8px/1.6 var(--serif); letter-spacing:.15em; color:var(--member); margin-bottom:9px; }
.crew-name { display:block; font:17px/1.7 var(--serif); color:#f1e8d9; white-space:nowrap; letter-spacing:.025em; }
.crew-en { display:block; font:8px/1.7 var(--serif); letter-spacing:.095em; color:#95a2b5; margin-top:3px; }
.crew-role { display:block; font-size:9px; color:#b0bac6; margin-top:13px; }
.crew-open { margin-top:20px; padding-top:13px; border-top:1px solid #ffffff12; display:flex; justify-content:space-between; font:9px/1.5 var(--serif); letter-spacing:.12em; }
.crew-open>b { color:var(--member); font-size:17px; font-weight:400; }
.crew-hint { text-align:center; font-size:11px; margin-top:30px; letter-spacing:.1em; color:#a2acbc; }
.crew-hint>span { color:var(--gold); font-size:17px; margin-right:9px; }
.member-fx { position:absolute; inset:0; z-index:4; opacity:0; pointer-events:none; color:var(--member); transition:opacity .6s; overflow:hidden; }
.member-fx svg { width:100%; height:100%; stroke:currentColor; stroke-width:1; }
.member-fx svg>g,.member-fx svg>path,.member-fx>i { display:none; }
.crew-card:hover .member-fx,.crew-card:focus-within .member-fx,.profile-visual .member-fx { opacity:.8; }
.effect-arka .fx-rift { display:block; stroke-width:2; stroke-dasharray:500; filter:drop-shadow(0 0 6px currentColor); }
.effect-arka .fx-orbit { display:block; opacity:.32; transform-origin:150px 200px; }
.effect-selene .fx-constellation { display:block; stroke-dasharray:850; }
.effect-selene .fx-orbit { display:block; opacity:.3; transform-origin:150px 200px; }
.effect-selene .fx-stars { display:block; fill:currentColor; filter:drop-shadow(0 0 5px currentColor); }
.effect-vera .fx-hex { display:block; stroke-dasharray:5 9; }
.effect-vera .fx-scan { display:block; position:absolute; width:100%; top:20%; height:2px; background:var(--member); box-shadow:0 0 22px var(--member); }
.effect-pipi .fx-gear { display:block; transform-origin:150px 200px; opacity:.8; }
.effect-pipi .fx-glow { display:block; position:absolute; width:55px; height:55px; left:12%; top:20%; border-radius:50%; box-shadow:0 0 30px var(--member); }
.effect-pipi .fx-spark { display:block; position:absolute; left:70%; top:20%; width:3px; height:3px; background:var(--member); box-shadow:-90px 60px var(--member),-110px 110px var(--member),20px 90px var(--member),10px 200px var(--member),-50px 245px var(--member); }
.effect-nerea .fx-ripple { display:block; transform-origin:150px 355px; }
.effect-nerea .fx-stars { display:block; fill:currentColor; }
.effect-nerea .fx-glow { display:block; position:absolute; width:75%; height:80%; left:12%; top:10%; background:radial-gradient(ellipse,#29ddb117,transparent 70%); }
[data-motion="on"] .member-fx .fx-orbit,[data-motion="on"] .member-fx .fx-gear { animation:orbit-spin 17s linear infinite; }
[data-motion="on"] .member-fx .fx-rift,[data-motion="on"] .member-fx .fx-constellation { animation:stroke-reveal 2.7s var(--ease) infinite; }
[data-motion="on"] .member-fx .fx-scan { animation:scan 3.5s ease-in-out infinite; }
[data-motion="on"] .member-fx .fx-ripple { animation:ripple 4s ease-in-out infinite; }
[data-motion="on"] .member-fx .fx-stars,[data-motion="on"] .member-fx .fx-glow,[data-motion="on"] .member-fx .fx-spark { animation:glimmer 3s ease-in-out infinite alternate; }
.crew-card:not(:hover):not(:focus-within) .member-fx * { animation-play-state:paused!important; }
.profile-copy { padding:25px 18px; border-top:1px solid #c8a45a30; font-size:12px; }
.profile-quote { font-family:var(--serif); color:var(--member); font-size:19px; line-height:1.9; margin-bottom:25px; }
.profile-copy dl { margin:30px 0 0; }
.profile-copy dl>div { display:grid; grid-template-columns:80px 1fr; gap:12px; border-bottom:1px solid #c8a45a28; padding:12px 0; }
.profile-copy dt { font:10px/1.8 var(--serif); color:var(--gold); letter-spacing:.09em; }
.profile-copy dd { margin:0; font-size:12px; }
.voyage { position:relative; isolation:isolate; }
/* The drifting-sea palette spans the boundary; this haze scrolls away with the section. */
.voyage::before { content:""; position:absolute; inset:-100px 0 auto; height:220px; z-index:2; pointer-events:none; background:radial-gradient(ellipse at 25% 45%,#8ba8b91a,transparent 63%),radial-gradient(ellipse at 76% 54%,#7088a31c,transparent 62%); }
.voyage-stage { position:relative; min-height:900px; overflow:hidden; background:#081625; }
.voyage-stage::before { content:""; position:absolute; inset:0 0 auto; height:clamp(180px,28svh,290px); z-index:1; pointer-events:none; background:linear-gradient(180deg,#081625 0%,#081625f5 16%,#081625b8 43%,#08162545 73%,#08162500 100%); }
.voyage-backdrops,.voyage-shade { position:absolute; inset:0; }
.voyage-bg { position:absolute; width:100%; height:100%; object-fit:cover; }
.voyage-bg-rift,.voyage-bg-abyss { opacity:0; }
.voyage-shade { background:linear-gradient(90deg,#09131be0,transparent 88%),linear-gradient(0deg,#08162590,transparent 60%); }
.voyage-content { position:relative; z-index:3; padding-top:100px; padding-bottom:85px; }
.voyage-content>h2 { font:clamp(23px,2.1vw,32px)/1.7 var(--serif); letter-spacing:.12em; color:#e9dfc9; }
.voyage-chapters { margin-top:55px; }
.voyage-chapter { margin:35px 0; }
.voyage-index { font:10px/1.5 var(--serif); letter-spacing:.25em; color:#d8bc8b; margin-bottom:18px; }
.voyage-chapter h3 { font:clamp(27px,3.1vw,46px)/1.6 var(--serif); letter-spacing:.1em; margin-bottom:24px; }
.voyage-chapter>p:last-child { font-size:1rem; line-height:2.1; color:#ced5de; }
.voyage-map { width:min(420px,100%); margin-top:26px; padding:18px 25px 15px; border:1px solid #dfcaa347; background:#0919295e; backdrop-filter:blur(4px); color:#dec395; transform:rotate(-2deg); }
.map-heading { font:9px/1.5 var(--serif); letter-spacing:.2em; }
.voyage-map svg { width:100%; height:auto; fill:none; stroke:currentColor; stroke-width:1.3; }
.map-route-guide { stroke-dasharray:4 7; opacity:.45; }
.map-route-progress { stroke-dasharray:650; stroke-dashoffset:650; }
.map-ship { fill:var(--gold); stroke:var(--paper); stroke-width:.6; }
.map-labels { display:flex; justify-content:space-between; font:7px/1.5 var(--serif); letter-spacing:.13em; }
.voyage-invitation { display:block; margin-top:30px; font:8px/1.5 var(--serif); letter-spacing:.25em; color:#ccd4de; }
.voyage-invitation>span { margin-left:15px; font-size:16px; }
[data-motion="on"] .voyage { height:300svh; }
[data-motion="on"] .voyage-stage { position:sticky; top:0; height:100svh; min-height:720px; }
[data-motion="on"] .voyage-content { padding-top:12svh; padding-bottom:0; }
[data-motion="on"] .voyage-chapters { position:relative; height:190px; margin-top:45px; }
[data-motion="on"] .voyage-chapter { position:absolute; inset:0; margin:0; }
[data-motion="on"] .voyage-chapter:not(:first-child) { visibility:hidden; opacity:0; }
[data-motion="on"] .voyage-bg { transform:scale(calc(1.06 + var(--voyage-progress,0) * .045)); }
[data-motion="on"] .voyage-stage::before { opacity:clamp(0,calc(1 - var(--voyage-progress,0) * 8),1); }
.news { padding:120px 0 100px; }
.news h2 { font-size:43px; letter-spacing:.14em; }
.news-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; }
.news-card { min-width:0; }
.news-card figure { overflow:hidden; position:relative; box-shadow:4px 6px 12px #51412918; background:#0f1c2b; padding:6px; }
.news-card img { width:100%; aspect-ratio:5/3; object-fit:cover; transition:transform .7s var(--ease); }
.news-card:hover img { transform:scale(1.04); }
.sample-label { position:absolute; top:15px; left:15px; background:var(--paper); color:#665739; padding:2px 7px; font:7px/1.7 var(--serif); letter-spacing:.15em; }
.news-meta { display:flex; align-items:center; gap:18px; font:9px/1.5 var(--serif); letter-spacing:.1em; margin-top:22px; color:#6f624d; }
.news-meta>span { border-left:1px solid #80694450; padding-left:18px; font-size:8px; }
.news-title { display:block; font-size:16px; line-height:1.9; letter-spacing:.025em; margin-top:13px; }
.news-open { display:flex; justify-content:space-between; font:9px/1.6 var(--serif); letter-spacing:.15em; border-bottom:1px solid #9e896f6b; padding:24px 0 15px; }
.news-open>b { font-size:18px; font-weight:400; color:#8e6d39; }
.news-copy { font-size:13px; line-height:2.2; padding-top:25px; }
.sample-note,.news-disclaimer { font-size:10px; color:#80735e; margin-top:25px; }
.news-disclaimer { text-align:right; margin-top:35px; }
.follow { position:relative; padding:145px 0 130px; overflow:hidden; min-height:790px; isolation:isolate; }
.follow-backdrop { position:absolute; inset:0; z-index:-3; }
.follow-backdrop img { width:100%; height:100%; object-fit:cover; object-position:center; }
.follow-shade { position:absolute; inset:0; background:linear-gradient(180deg,#0b172878 0%,#0b172899 46%,#111b29b0 100%); z-index:-2; }
.follow-content { text-align:center; }
.follow .section-kicker { justify-content:center; color:#eed7af; }
.follow h2 { font:clamp(36px,5vw,74px)/1.5 var(--serif); letter-spacing:.17em; color:#fff1d7; margin:22px 0 27px; text-shadow:0 2px 30px #09234344; white-space:nowrap; }
.follow h2 em { padding-left:.17em; }
.follow-content>p:not(.section-kicker) { font-size:1rem; line-height:2.1; color:#e2e3e1; letter-spacing:.03em; }
.social-links { display:flex; justify-content:center; gap:20px; margin-top:43px; }
.social-link { display:flex; align-items:center; gap:20px; width:260px; padding:17px 24px; border:1px solid #e7d5b766; background:#0b233765; text-align:left; backdrop-filter:blur(5px); }
.social-link>span:not(.social-symbol) { font:13px/1.5 var(--serif); letter-spacing:.08em; }
.social-link small { display:block; font:9px/1.5 var(--body-font); color:#bbc4cf; margin-top:4px; }
.social-link b { margin-left:auto; font-size:19px; font-weight:400; color:var(--gold); }
.social-link svg { width:27px; height:22px; }
.social-symbol { font-size:27px; line-height:1; }
.social-link[aria-disabled="true"] { cursor:default; }
.social-link[href]:hover { background:#233b4e; border-color:var(--gold); }
.follow-actions { display:flex; justify-content:center; align-items:center; gap:46px; margin-top:40px; }
.replay-button,.template-list-button { display:inline-flex; align-items:center; gap:30px; padding:8px 0; background:none; border-bottom:1px solid #d0b99065; font-size:11px; letter-spacing:.1em; transition:border-color .3s,color .3s; }
.replay-button>span,.template-list-button>span { font-size:21px; color:var(--gold); }
.replay-button:hover,.template-list-button:hover { color:#fff1d7; border-color:var(--gold); }
.site-footer { display:flex; justify-content:space-between; align-items:center; gap:35px; padding:40px 56px; background:#080f1b; border-top:1px solid #c8a45a24; }
.footer-brand { font:24px/1.5 var(--serif); letter-spacing:.2em; color:#d9cba9; }
.footer-brand>span { display:block; font:7px/1.6 var(--serif); letter-spacing:.3em; color:#8a94a4; }
.site-footer nav { display:flex; gap:22px; font:8px/1.5 var(--serif); letter-spacing:.13em; }
.site-footer>div { text-align:right; font-size:10px; }
.site-footer small { display:block; margin-top:12px; color:#798799; font:7px/1.5 var(--serif); letter-spacing:.09em; }
.voyage-progress { position:fixed; right:20px; bottom:24px; z-index:15; display:flex; flex-direction:column; align-items:center; gap:7px; pointer-events:none; color:#e2c17e; mix-blend-mode:difference; }
.voyage-progress>.compass-svg { width:38px; height:38px; transform:rotate(calc(var(--page-progress,0) * 300deg)); }
.voyage-progress>span { font:7px/1.5 var(--serif); letter-spacing:.09em; }
.page-progress-line { width:1px; height:45px; background:#d3c3a145; }
.page-progress-line>i { display:block; width:100%; height:calc(var(--page-progress,0) * 100%); background:var(--gold); }
.compass-svg { stroke:currentColor; stroke-width:.8; }
.compass-star { opacity:.4; }
.compass-needle { transform-origin:100px 100px; }
.departure { position:fixed; inset:0; margin:0; width:100%; max-width:none; height:100svh; max-height:none; overflow:hidden; background:#241c16; color:var(--ink); }
.departure-desk { position:absolute; inset:0; background:#ddd0ac url("../generated/noctaria/intro-desk.webp") center/cover; transform-origin:66% 35%; }
.desk-shade { position:absolute; inset:0; background:radial-gradient(ellipse at 45% 50%,#fff3d312 30%,#160b083f); }
.departure-content { position:absolute; top:50%; left:44%; transform:translate(-50%,-50%); width:min(560px,55%); text-align:center; z-index:4; }
.departure-content .eyebrow { color:#75572e; font-size:10px; }
.intro-logo { width:100%; margin:4px auto -8px; }
.departure-content h2 { font:clamp(24px,2.8vw,41px)/1.75 var(--serif); letter-spacing:.16em; }
.departure-note { font-size:11px; color:#756348; margin-top:15px; letter-spacing:.08em; }
.sail-button { display:grid; grid-template-columns:1fr 30px; align-items:center; width:220px; margin:32px auto 0; text-align:left; padding:15px 25px 12px; background:#17283b; color:#f9e5ba; box-shadow:4px 5px 0 #b59d6a; border:1px solid #d3b778; transition:transform .3s,background .3s,box-shadow .3s; }
.sail-button>span { font:19px/1.5 var(--serif); letter-spacing:.16em; }
.sail-button>i { font-size:24px; font-style:normal; grid-column:2; grid-row:1 / span 2; }
.sail-button>small { font:8px/1.4 var(--serif); letter-spacing:.22em; margin-top:4px; }
.sail-button:hover { transform:translateY(-3px); background:#253d55; box-shadow:4px 8px 0 #b59d6a; }
.intro-compass { position:absolute; top:13%; right:9%; width:clamp(125px,16vw,240px); color:#8e6b31; transform:rotate(15deg); }
.intro-compass>span { display:block; text-align:center; font:7px/1.5 var(--serif); letter-spacing:.15em; }
[data-motion="on"] .intro-compass .compass-needle { animation:needle-wander 5s ease-in-out infinite alternate; }
.intro-cartography { position:absolute; inset:0; opacity:.65; color:#8e6b31; }
.intro-cartography svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.3; }
.intro-route-under { stroke-dasharray:3 9; opacity:.3; }
.intro-route { stroke-dasharray:1000; stroke-dashoffset:1000; stroke-width:2.5; }
.intro-pen { opacity:0; fill:#1b2836; stroke:#c8a45a; stroke-width:1; }
.intro-seal { position:absolute; bottom:15%; left:15%; width:78px; border-radius:50%; transform:rotate(-12deg); box-shadow:3px 6px 12px #231b1f70; }
.route-destination { opacity:.45; }
.chart-label { position:absolute; left:12%; bottom:16%; transform:rotate(-12deg); font:9px/1.8 var(--serif); letter-spacing:.35em; }
.intro-gems { display:flex; position:absolute; left:44%; bottom:10%; transform:translateX(-50%); gap:21px; }
.intro-gems i { width:7px; height:7px; transform:rotate(45deg); background:#a5163d; opacity:.48; box-shadow:0 0 7px currentColor; }
.intro-gems i:nth-child(2) { background:#9c9eff; }.intro-gems i:nth-child(3) { background:#00cce8; }.intro-gems i:nth-child(4) { background:#ff9b4a; }.intro-gems i:nth-child(5) { background:#29ddb1; }
.departure-ocean { position:absolute; inset:0; background:#0b1526 url("../generated/noctaria/ocean-night.webp") center/cover; opacity:0; transform:scale(1.13); pointer-events:none; }
.departure-sails { position:absolute; inset:-10%; background:url("../generated/noctaria/rigging-overlay.webp") center/cover; opacity:0; pointer-events:none; }
.departure-mist { position:absolute; inset:0; background:radial-gradient(ellipse,#eceddf9c,transparent 66%); opacity:0; pointer-events:none; }
.intro-skip { position:absolute; z-index:10; right:35px; bottom:30px; background:#101b2da8; border:1px solid #dbbf8680; color:#eee0c2; padding:9px 16px; font-size:10px; letter-spacing:.07em; }
.intro-skip span { margin-left:17px; }
.departure-status { position:absolute; z-index:9; left:0; right:0; bottom:16%; text-align:center; font:17px/1.8 var(--serif); letter-spacing:.22em; color:#f2e3c3; text-shadow:0 1px 10px #06101c; }
.departure[data-state="sailing"] .departure-content { transition:opacity .7s,filter .8s; opacity:0; filter:blur(3px); pointer-events:none; }
.departure[data-state="sailing"] .intro-compass .compass-needle { animation:none; }
.site-menu { width:100%; max-width:none; height:100svh; max-height:none; margin:0; inset:0; overflow:auto; color:var(--ink); background:#eee0c4 url("../generated/noctaria/chart-paper.webp") center/cover; }
[data-motion="on"] .site-menu[open] { animation:chart-unfold .65s var(--ease); }
.dialog-close { position:sticky; display:block; top:24px; z-index:5; width:47px; height:47px; margin:24px 30px -71px auto; background:#17293b; border:1px solid var(--gold); color:#ebd6ae; font:29px/1 var(--serif); }
.menu-inner { position:relative; z-index:2; margin:auto; width:min(680px,calc(100% - 100px)); padding:70px 0 40px; }
.menu-inner>.eyebrow { color:#8e6d39; }
.menu-inner h2 { font:34px/1.8 var(--serif); letter-spacing:.12em; margin:12px 0 32px; }
.menu-inner nav { display:grid; }
.menu-inner nav>a { display:flex; align-items:center; gap:25px; padding:14px 0; border-bottom:1px solid #8a714331; transition:padding-left .4s var(--ease),color .4s; }
.menu-inner nav>a:hover { padding-left:12px; color:#94622c; }
.menu-inner nav>a>span { font:10px/1.5 var(--serif); color:#967a4b; }
.menu-inner nav strong { font:30px/1.4 var(--serif); letter-spacing:.05em; }
.menu-inner nav small { font-size:10px; margin-left:auto; color:#756955; }
.menu-bottom { display:flex; justify-content:space-between; gap:20px; margin-top:30px; font-size:10px; color:#725a34; }
.text-link { background:none; padding:0; font-size:10px; }
.menu-chart { position:absolute; width:650px; max-width:90vw; top:8%; left:-14%; opacity:.12; color:#745628; transform:rotate(-20deg); }
.content-dialog { background:#101c2e; border:1px solid #c8a45a80; width:min(1040px,calc(100% - 64px)); max-height:calc(100svh - 60px); overflow:auto; box-shadow:0 30px 100px #0008; }
.profile-dialog-layout { display:grid; grid-template-columns:43% 57%; min-height:630px; }
.profile-visual { position:relative; isolation:isolate; background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--member) 17%,transparent),#0a1320); overflow:hidden; }
.profile-visual>img { height:100%; max-height:820px; width:100%; object-fit:contain; object-position:center bottom; position:relative; z-index:2; }
.profile-details { padding:70px 45px 45px; }
.profile-details .crew-role-en { font-size:10px; margin-bottom:15px; }
.profile-details h2 { font:29px/1.5 var(--serif); color:#f0e4ce; letter-spacing:.04em; }
.profile-details>.crew-en { font-size:10px; margin-top:8px; }
.profile-details .profile-copy { border:0; padding:30px 0 0; font-size:1rem; line-height:2.1; }
.profile-details .profile-quote { font-size:20px; }
.article-dialog { padding:75px 70px 55px; background:var(--paper) url("../generated/noctaria/chart-paper.webp") center/cover; color:var(--ink); }
.article-dialog h2 { font:30px/1.8 var(--serif); margin:20px 0; }
.article-dialog .news-copy { font-size:1rem; }
[data-motion="off"] .voyage-bg-rift,[data-motion="off"] .voyage-bg-abyss { display:none; }
[data-motion="off"] .daily-life-slide:not(.is-active) { display:none; }
[data-motion="off"] .map-route-progress { stroke-dashoffset:0; }
[data-motion="off"] .ink-underline { background-size:100% 6px; }
[data-motion="off"] .about-route path { stroke-dashoffset:0; }
[data-motion="off"] .voyage-invitation { display:none; }
[data-motion="off"] .member-fx * { animation:none!important; }
[data-motion="off"] { scroll-behavior:auto; }
[data-motion="off"] *,[data-motion="off"] *::before,[data-motion="off"] *::after { animation:none!important; transition:none!important; }
body.page-hidden *, .is-offscreen *, body:not(.has-entered) main * { animation-play-state:paused!important; }
@keyframes mist-drift { to { transform:translateX(10%) scale(1.06); } }
@keyframes scroll-line { 0%,100% { transform:scaleY(.55);opacity:.4; } 50% { transform:scaleY(1);opacity:1; } }
@keyframes orbit-spin { to { transform:rotate(360deg); } }
@keyframes stroke-reveal { 0% { stroke-dashoffset:850; opacity:.3; } 65%,100% { stroke-dashoffset:0; opacity:.85; } }
@keyframes scan { 50% { transform:translateY(210px);opacity:.4; } }
@keyframes ripple { 0% { transform:scale(.65);opacity:.1; } 55% { opacity:.7; } 100% { transform:scale(1.2);opacity:0; } }
@keyframes glimmer { to { opacity:.35;transform:translateY(-6px); } }
@keyframes needle-wander { from { transform:rotate(-14deg); } to { transform:rotate(18deg); } }
@keyframes chart-unfold { from { clip-path:inset(0 0 100% 0); opacity:.5; } to { clip-path:inset(0); opacity:1; } }
@media (min-width:1600px) { .hero-copy { width:690px; bottom:125px; }.crew-portrait { height:420px; } }
@media (max-width:1199px) and (min-width:768px) {
  .section-shell { width:calc(100% - 100px); }.crew .section-shell { width:calc(100% - 100px); }
  .hero-copy { left:50%; right:auto; transform:translateX(-50%); width:min(550px,82vw); text-align:center; bottom:80px; }.hero { min-height:1000px; }
  .hero-visual { inset:100px 0 auto; height:auto; transform:none; }.hero-group { width:100%; height:auto; object-fit:contain; }.hero-art-shade { background:linear-gradient(0deg,#0b1526,transparent 25%,transparent 87%,#0b1526); }.hero-eyebrow { justify-content:center; }
  .hero-ocean { opacity:.34; }
  .crew-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }.crew-portrait { height:410px; }.crew-name { font-size:20px; }
  .about-layout { gap:40px; }.about h2 { font-size:31px; }.about-copy>p:not(.section-kicker) br { display:none; }
  .section-heading { gap:30px; }.section-heading>p { font-size:11px; }.site-footer { flex-wrap:wrap; }
}
@media (max-width:767px) {
  :root { scroll-padding-top:75px; }
  .paper-section { --paper-tear-size:56px; }
  .crew::after { height:170px; }
  .voyage::before { top:-75px; height:160px; }
  .section-shell,.crew .section-shell { width:calc(100% - 44px); }
  .site-header { height:82px; padding:0 19px; }.site-brand img { width:34px; height:34px; }.site-brand>span { font-size:15px; }.site-brand small { font-size:5px; }
  .header-actions { top:21px; right:96px; padding-right:0; gap:10px; }.utility { font-size:7px; gap:4px; }.utility i { display:none; }
  .menu-toggle { top:19px; right:17px; padding:10px 9px; gap:7px; font-size:7px; }.menu-lines { width:17px; height:10px; }
  .hero { min-height:780px; height:100svh; max-height:980px; }
  .hero-ocean { opacity:.34; }
  .hero-visual { inset:90px 0 auto; height:auto; transform:none; }
  .hero-group { width:100%; height:auto; object-fit:contain; }
  .hero-art-shade { inset:-1px 0; background:linear-gradient(0deg,#0b1526,transparent 25%,transparent 87%,#0b1526); }
  .hero-rigging { background-size:auto 100%; opacity:.35; }
  .hero-copy { top:auto; bottom:107px; left:22px; right:auto; width:calc(100% - 44px); text-align:center; }
  .hero-eyebrow { justify-content:center; font-size:7px; gap:8px; letter-spacing:.16em; }.hero-eyebrow>span { width:17px; }
  .hero h1 { width:100%; margin:-5px 0 -7px; }.hero-tagline { font-size:25px; letter-spacing:.12em; line-height:1.75; }
  .hero-description { font-size:1rem; line-height:2; margin-top:15px; }.hero-crew-link { font-size:11px; gap:22px; margin-top:18px; }
  .hero-bottom { left:20px; right:20px; bottom:21px; justify-content:center; }.hero-bottom>span { display:none; }.scroll-cue { font-size:7px; }.scroll-cue i { height:27px; }
  .about { padding:83px 0 92px; }.about-layout { display:flex; flex-direction:column; gap:35px; }
  .section-kicker { font-size:9px; letter-spacing:.18em; gap:12px; margin-bottom:20px; }.section-kicker>span { width:27px; height:27px; font-size:9px; }
  .about-copy { width:100%; }.about h2 { font-size:29px; line-height:1.85; letter-spacing:.06em; }.about .lead { font-size:14px; }
  .about-copy>p:not(.section-kicker):not(.lead) { font-size:1rem; line-height:2.2; }.about-copy>p:not(.section-kicker) br { display:none; }.about-copy>p.story-final { font-size:16px!important; }
  .daily-life-board { width:90%; margin:0 0 15px; padding:9px 9px 0; }.daily-life-slides { aspect-ratio:1.45; }.daily-life-board figcaption { padding:18px 12px; }.daily-life-board strong { font-size:23px; }.daily-life-mobile-break { display:block; }.daily-life-status { margin-top:9px; }
  .about-coordinate { font-size:6px; bottom:-42px; right:0; }.about-route { left:-15px; width:calc(100% + 30px); top:35%; }
  .crew { padding:88px 0 75px; }.crew-watermark { font-size:135px; top:26px; }
  .section-heading { display:block; margin-bottom:35px; }.section-heading h2 { font-size:28px; letter-spacing:.06em; line-height:1.8; }.section-heading>p { margin-top:20px; font-size:11px; }
  .crew-grid { grid-template-columns:1fr; gap:24px; }
  .crew-card summary { display:grid; grid-template-columns:49% 51%; min-height:275px; }
  .crew-portrait { height:285px; }.crew-portrait>img { object-fit:cover; object-position:center top; }
  .crew-number { top:11px; left:10px; font-size:11px; }.crew-number>span { font-size:6px; }.crew-meta { padding:61px 12px 18px 3px; align-self:stretch; }
  .crew-role-en { font-size:7px; margin-bottom:12px; }.crew-name { font-size:15px; white-space:normal; letter-spacing:0; }.crew-en { font-size:7px; letter-spacing:.04em; }.crew-role { font-size:8px; margin-top:15px; }.crew-open { margin-top:27px; font-size:8px; }
  .crew-hint { font-size:9px; letter-spacing:.025em; margin-top:24px; }
  .voyage-stage { min-height:1000px; }.voyage-content { padding-top:80px; padding-bottom:70px; }
  [data-motion="on"] .voyage { height:220svh; }[data-motion="on"] .voyage-stage { min-height:640px; }
  [data-motion="on"] .voyage-content { padding-top:11svh; }[data-motion="on"] .voyage-chapters { height:245px; margin-top:35px; }
  .voyage-content>h2 { font-size:22px; letter-spacing:.07em; }.voyage-chapter h3 { font-size:27px; letter-spacing:.055em; line-height:1.8; }.voyage-chapter>p:last-child { font-size:1rem; line-height:2.1; }.voyage-chapter>p:last-child br { display:none; }.voyage-index { font-size:10px; margin-bottom:20px; }
  .voyage-map { width:91%; margin-top:28px; padding:15px 18px 12px; }.map-labels { font-size:6px; }.map-heading { font-size:7px; }.voyage-invitation { font-size:7px; margin-top:28px; }
  .voyage-shade { background:linear-gradient(90deg,#081522ba,#08152250),linear-gradient(0deg,#08152270,transparent 70%); }
  .news { padding:82px 0 76px; }.news h2 { font-size:34px; }.news-grid { grid-template-columns:1fr; gap:36px; }.news-card figure { padding:5px; }.news-meta { margin-top:17px; }.news-title { font-size:16px; }.news-open { padding:18px 0 12px; }.news-disclaimer { font-size:8px; text-align:left; }
  .follow { min-height:720px; padding:100px 0 83px; }.follow h2 { font-size:clamp(24px,7.1vw,29px); line-height:1.55; letter-spacing:.11em; }.follow h2 em { padding-left:.11em; }.follow .section-kicker { font-size:8px; gap:8px; }.follow-content>p:not(.section-kicker) { font-size:1rem; }.follow-content>p:not(.section-kicker) br { display:none; }
  .social-links { gap:12px; flex-direction:column; align-items:center; margin-top:30px; }.social-link { width:270px; padding:13px 22px; }.social-link>span:not(.social-symbol) { font-size:12px; }.follow-actions { flex-direction:column; gap:12px; margin-top:30px; }.replay-button,.template-list-button { font-size:10px; gap:24px; }
  .site-footer { padding:32px 24px; flex-direction:column; align-items:flex-start; gap:25px; }.site-footer>div { text-align:left; }.site-footer nav { gap:25px; }.site-footer small { font-size:6px; }
  .voyage-progress { right:7px; bottom:18px; gap:5px; }.voyage-progress>.compass-svg { width:26px; height:26px; }.voyage-progress>span { font-size:5px; }.page-progress-line { height:28px; }
  .departure-desk { background-image:url("../generated/noctaria/intro-desk-mobile.webp"); background-size:cover; background-position:center; }
  .departure-content { left:50%; top:48%; width:calc(100% - 48px); }.departure-content .eyebrow { font-size:7px; letter-spacing:.18em; }
  .departure-content h2 { font-size:29px; letter-spacing:.1em; }.departure-note { font-size:9px; margin-top:19px; }.intro-logo { margin:4px auto 2px; }
  .intro-compass { width:105px; top:4%; right:5%; opacity:.57; }.intro-compass>span { font-size:5px; }.intro-cartography svg { width:160%; margin-left:-30%; }.chart-label { font-size:7px; left:6%; bottom:12%; }
  .intro-seal { left:8%; top:6%; bottom:auto; width:62px; }
  .intro-gems { left:50%; bottom:15%; }.sail-button { margin-top:29px; width:210px; }.intro-skip { right:20px; bottom:21px; font-size:9px; }
  .departure-status { font-size:15px; bottom:23%; }
  .menu-inner { width:calc(100% - 60px); padding:95px 0 35px; }.menu-inner>.eyebrow { font-size:8px; }.menu-inner h2 { font-size:29px; margin:12px 0 26px; }.menu-inner nav>a { padding:17px 0; gap:16px; }.menu-inner nav strong { font-size:24px; }.menu-inner nav small { font-size:8px; }
  .menu-bottom { flex-direction:column; align-items:flex-start; gap:18px; margin-top:27px; }.dialog-close { top:18px; width:39px; height:39px; font-size:25px; margin:18px 18px -57px auto; }
  .content-dialog { width:calc(100% - 28px); max-height:calc(100svh - 32px); }.profile-dialog-layout { grid-template-columns:1fr; min-height:0; }.profile-visual { height:380px; }.profile-visual>img { object-fit:contain; }.profile-details { padding:30px 25px 35px; }.profile-details h2 { font-size:25px; }.profile-details .profile-quote { font-size:19px; }.profile-details .profile-copy { padding-top:22px; font-size:1rem; }.profile-copy dd { font-size:13px; }
  .article-dialog { padding:70px 25px 35px; }.article-dialog h2 { font-size:24px; }.article-dialog .news-copy { font-size:1rem; }
}
@media (max-width:375px) { .hero-tagline { font-size:23px; }.crew-name { font-size:14px; }.about h2 { font-size:27px; }.section-heading h2 { font-size:26px; }.voyage-chapter h3 { font-size:24px; }.departure-content h2 { font-size:26px; letter-spacing:.08em; } }
@media (max-height:750px) and (min-width:768px) { .departure-content { width:430px; }.departure-content h2 { font-size:29px; }.intro-logo { margin:-7px auto -12px; }.sail-button { margin-top:20px; }.departure-note { margin-top:9px; }[data-motion="on"] .voyage-stage { min-height:650px; }[data-motion="on"] .voyage-content { padding-top:65px; }[data-motion="on"] .voyage-chapters { height:155px; margin-top:30px; }.voyage-map { width:330px; margin-top:20px; } }
@media (prefers-reduced-motion:reduce) { :root { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; }.hero-visual,.hero-ocean,.hero-rigging { transform:none!important; } }