@charset "UTF-8";
/* v3 / Moonlight & the dinner table.
   Remote web fonts only. No font binaries are bundled.
   The approved key visual ALWAYS uses its intrinsic aspect ratio. */
:root {
  --sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans CJK JP",Meiryo,sans-serif;
  --serif:"Shippori Mincho B1","Yu Mincho","Hiragino Mincho ProN","Noto Serif CJK JP",serif;
  --latin:"Cormorant Garamond","EB Garamond",Georgia,serif;
  --paper:#f7f4ec; --ink:#172942; --coral:#c34832; --muted:#656c70;
  --gold:#d8b883; --ease-out:cubic-bezier(.16,1,.3,1); --header-height:86px;
}
body { font-weight:500; letter-spacing:.035em; }
button,a { -webkit-tap-highlight-color:transparent; }
html { scroll-padding-top:106px; }
.section { padding-top:110px; padding-bottom:110px; }
h1,h2,h3 { line-break:strict; }
.page-progress { position:fixed; top:0; left:0; right:0; height:3px; pointer-events:none; z-index:120; }
.page-progress i { display:block; height:100%; background:var(--coral); transform:scaleX(0); transform-origin:left; }
/* Quiet navigation, Japanese and English read as one unit. */
.site-header { background:rgba(247,244,236,.94); padding:0 4.2%; gap:24px; transition:box-shadow .35s,background .35s; }
.site-header.is-scrolled { background:rgba(247,244,236,.98); box-shadow:0 4px 22px #12243e0c; }
.brand img { width:153px; height:auto; object-fit:contain; }
.brand span { font-family:var(--latin); font-size:8px; font-weight:600; letter-spacing:.31em; }
.desktop-nav { gap:28px; margin-left:auto; }
.desktop-nav a { display:flex; flex-direction:column; align-items:center; position:relative; padding:10px 0; line-height:1.5; white-space:nowrap; }
.desktop-nav a > span { font-family:var(--latin); font-size:12px; font-weight:600; letter-spacing:.09em; }
.desktop-nav a > small { font-size:11px; letter-spacing:.1em; margin-top:3px; }
.desktop-nav a::after { content:""; position:absolute; bottom:0; width:20px; height:2px; left:calc(50% - 10px); background:var(--coral); transform:scaleX(0); transition:transform .4s var(--ease-out); }
.desktop-nav a:hover::after,.desktop-nav a[aria-current="location"]::after { transform:scaleX(1); }
.desktop-nav a[aria-current="location"] { color:var(--coral); }
.header-read { font-family:var(--serif); font-size:12px; font-weight:700; padding:0 18px; height:44px; border:1px solid var(--ink); letter-spacing:.09em; }
.header-read svg { width:20px; transition:transform .4s var(--ease-out); }
.header-read:hover svg { transform:translateX(4px); }
.motion-toggle { display:flex; align-items:center; justify-content:center; gap:8px; min-width:76px; min-height:44px; padding:0; font-size:10px; letter-spacing:.03em; white-space:nowrap; }
.motion-bars { width:17px; height:16px; display:flex; align-items:center; justify-content:center; gap:3px; }
.motion-bars i { width:2px; height:11px; background:var(--coral); animation:equalizer 1.9s ease-in-out infinite; }
.motion-bars i:nth-child(2) { height:16px; animation-delay:-.7s; }
.motion-bars i:nth-child(3) { height:7px; animation-delay:-1.3s; }
.motion-toggle[aria-pressed="false"] .motion-bars i { height:2px; background:var(--muted); }
.motion-toggle:disabled { cursor:default; opacity:.75; }
@keyframes equalizer { 0%,100%{transform:scaleY(.65)} 50%{transform:scaleY(1)} }
/* The image is never cropped, zoomed, panned or covered by copy/buttons. */
.hero-panorama { position:relative; isolation:isolate; }
.hero-panorama .hero-panorama-image { width:100%; height:auto; object-fit:contain; transform:none!important; filter:none!important; }
.hero-atmosphere { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.hero-visual-caption { min-height:45px; padding-top:6px; padding-bottom:6px; background:#12243c; }
.hero-visual-caption > span { font-family:var(--sans); font-size:10px; font-weight:500; letter-spacing:.15em; }
.hero-visual-caption > span i { color:var(--gold); }
.visual-expand { font-family:var(--sans); letter-spacing:.08em; }
.visual-expand svg { transition:transform .5s var(--ease-out); }
.visual-expand:hover svg { transform:rotate(90deg); }
.hero-welcome { max-width:1600px; position:relative; padding:65px 6.2% 63px; gap:40px; min-height:310px; }
.hero-welcome-copy { position:relative; z-index:1; }
.hero-welcome-copy > .eyebrow { font-family:var(--latin); letter-spacing:.17em; font-size:12px; font-weight:600; color:var(--coral); }
.hero-welcome-catch { font-size:clamp(22px,2.8vw,42px); font-weight:700; line-height:1.9; letter-spacing:.015em; margin-top:17px; }
.hero-welcome-catch em { color:var(--coral); }
.hero-welcome-description { font-size:13px; margin-top:22px; line-height:2; }
.hero-welcome-actions { position:relative; z-index:1; grid-template-columns:1fr; gap:18px; padding-top:35px; min-width:236px; }
.hero-welcome-actions > .button { font-family:var(--serif); font-size:16px; padding:22px 24px; min-width:255px; letter-spacing:.08em; }
.hero-welcome-actions > .button small { font-family:var(--sans); font-size:10px; margin-top:7px; letter-spacing:.15em; }
.hero-welcome-actions > .text-link { justify-self:start; font-size:12px; }
.hero-production { font-size:10px; margin-top:3px; }
.welcome-side-note { position:absolute; top:38px; left:24px; font-family:var(--latin); font-size:9px; letter-spacing:.13em; writing-mode:vertical-rl; line-height:1.5; color:#17294263; pointer-events:none; }
.welcome-seal { position:absolute; width:86px; height:86px; top:-38px; right:0; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid #c3483250; border-radius:50%; color:var(--coral); transform:rotate(13deg); background:var(--paper); pointer-events:none; }
.welcome-seal svg { width:34px; height:34px; }
.welcome-seal > span { font-family:var(--latin); font-size:9px; letter-spacing:.15em; line-height:1.5; }
.mobile-break { display:none; }
.ticker { border:0; padding:17px 0; position:relative; }
.ticker > div { animation-duration:44s; gap:38px; }
.ticker span { font-family:var(--serif); font-size:17px; font-weight:700; letter-spacing:.15em; }
.ticker span:nth-of-type(even) { font-family:var(--latin); font-size:22px; font-weight:500; letter-spacing:.1em; }
.ticker b { font-size:15px; color:#f8e2bc; }
.ticker:hover > div { animation-play-state:paused; }
/* Editorial chapter markers: oversized serif, ample space, no decorative clutter. */
.chapter-marker { font-family:var(--latin); display:flex; align-items:center; gap:23px; margin-bottom:65px; position:relative; font-weight:500; }
.chapter-marker::after { margin-left:12px; }
.chapter-marker .chapter-marker-index { font-family:var(--latin); font-size:clamp(66px,6.4vw,96px); line-height:.88; font-style:italic; font-weight:500; letter-spacing:-.07em; color:var(--coral); min-width:76px; }
.chapter-marker .chapter-marker-label { font-family:var(--latin); font-size:33px; font-weight:500; letter-spacing:.01em; line-height:1; white-space:nowrap; }
.chapter-marker .chapter-marker-label small { display:block; font-family:var(--sans); font-size:10px; font-weight:500; letter-spacing:.19em; margin-top:14px; }
.chapter-marker .chapter-marker-dot { position:absolute; right:0; top:calc(50% - 8px); font-size:15px; line-height:1; background:var(--paper); padding-left:18px; color:var(--coral); }
.chapter-marker.light .chapter-marker-index,.chapter-marker.light .chapter-marker-dot { color:var(--gold); }
.chapter-marker.light .chapter-marker-dot { background:var(--ink); }
.section-intro { margin-bottom:44px; }
.section-intro .eyebrow { font-size:12px; letter-spacing:.12em; }
.section-intro h2 { font-size:clamp(35px,3.8vw,56px); font-weight:800; line-height:1.6; letter-spacing:.025em; }
.section-intro > p { font-size:13px; line-height:2.1; }
/* Story: the contrast between power and a small human wish. */
.story-section { position:relative; overflow:hidden; }
.story-layout { grid-template-columns:1.03fr 1fr; gap:8.5vw; }
.story-heading { position:relative; }
.story-heading > .eyebrow { font-size:12px; letter-spacing:.15em; margin-bottom:26px; }
.story-heading h2 { font-size:clamp(42px,5.15vw,76px); line-height:1.6; font-weight:800; letter-spacing:.065em; }
.underline-coral { color:var(--coral); }
.underline-coral::after { height:2px; bottom:-7px; background:var(--coral); transform:rotate(-2deg); opacity:.65; }
.story-doodle { margin-top:33px; gap:15px; }
.story-doodle svg { width:56px; height:56px; }
.story-doodle > span { font-family:var(--latin); font-size:11px; letter-spacing:.15em; }
.story-english { font-family:var(--latin); font-style:italic; font-size:clamp(32px,3.8vw,54px); line-height:1.05; letter-spacing:-.035em; color:#c3483230; position:absolute; bottom:8px; right:0; transform:rotate(-7deg); pointer-events:none; }
.story-copy { padding-top:17px; }
.story-copy > p { font-size:15px; line-height:2.45; letter-spacing:.06em; margin-bottom:26px; }
.story-copy blockquote { font-size:29px; line-height:1.85; font-weight:800; letter-spacing:.045em; margin:33px 0; }
.story-rules { margin-top:42px; padding-top:33px; gap:34px; }
.story-rules > div { position:relative; }
.story-rules > div > span { font-family:var(--latin); font-size:12px; letter-spacing:.12em; }
.story-rules h3 { font-family:var(--serif); font-size:22px; font-weight:800; margin-top:12px; margin-bottom:16px; }
.story-rules p { font-size:13px; line-height:2.15; }
.table-talk { margin-top:65px; padding:25px 30px; border:1px solid #17294225; display:flex; align-items:center; justify-content:space-between; gap:20px; position:relative; background:#ffffff45; }
.table-talk::before { content:""; position:absolute; left:-1px; top:-1px; width:24px; height:24px; border-top:2px solid var(--coral); border-left:2px solid var(--coral); }
.table-talk-label { font-family:var(--latin); font-size:12px; line-height:1.2; letter-spacing:.08em; flex-shrink:0; }
.table-talk-label em { display:block; font-family:var(--sans); font-size:10px; margin-top:6px; color:var(--muted); }
.table-talk p { font-family:var(--serif); font-weight:700; font-size:22px; line-height:1.5; }
.talk-speaker { display:block; font-family:var(--latin); font-size:11px; letter-spacing:.12em; margin-bottom:6px; color:var(--muted); }
.table-talk p:last-child { color:var(--coral); }
.talk-divider { font-family:var(--latin); font-size:55px; font-weight:400; color:#17294225; }
/* One bite lab: three effects, three rhythms. */
.experiment-section { background:var(--ink); transition:background 1.1s; }
.experiment-section::before { opacity:.6; }
.experiment-section .chapter-marker-dot { background:transparent; }
.lab-status-line { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:14px 0; border-top:1px solid #f7f4ec35; font-family:var(--sans); font-size:11px; letter-spacing:.1em; }
.lab-status-line > span:first-child { display:flex; gap:10px; align-items:center; }
.lab-status-line i { width:5px; height:5px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px #d8b88313; }
.lab-step { font-family:var(--latin); font-size:13px; letter-spacing:.15em; }
.lab-step b { margin-left:20px; font-weight:500; }
.food-tabs { gap:16px; margin-top:15px; }
.food-tab { transition:background .45s,border-color .45s,transform .5s var(--ease-out); border-radius:0; }
.food-tab:hover { transform:translateY(-5px); }
.food-tab strong { font-family:var(--serif); font-weight:800; font-size:23px; letter-spacing:.075em; }
.food-tab small { font-family:var(--latin); font-size:11px; letter-spacing:.1em; }
.food-tab em { font-size:11px; }
.food-tab[aria-selected="true"] { background:#f7f4ec; color:var(--ink); border-color:#f7f4ec; }
.food-tab .food-icon svg { transition:transform .6s var(--ease-out); }
.food-tab:hover .food-icon svg { transform:rotate(-12deg) translateY(-2px); }
.experiment-panel { overflow:hidden; border-color:#f7f4ec33; margin-top:28px; }
.experiment-result { position:relative; padding:36px; }
.result-top > span { font-family:var(--latin); font-size:11px; letter-spacing:.11em; }
.result-top .result-status { font-family:var(--sans); font-size:10px; }
.experiment-result h3 { font-family:var(--serif); font-size:clamp(32px,3.7vw,53px); font-weight:800; letter-spacing:.035em; line-height:1.7; margin-top:28px; }
#effect-description { font-size:13px; line-height:2.2; margin-top:21px; }
.effect-conversation { margin-top:32px; padding-top:25px; }
.effect-conversation p { font-family:var(--serif); font-weight:700; font-size:19px; letter-spacing:.06em; }
.experiment-output { padding:30px; }
.output-visual { border:1px solid #ffffff25; overflow:hidden; isolation:isolate; }
.output-tag { font-family:var(--latin); font-size:12px; letter-spacing:.14em; z-index:5; }
.output-scene { transition:opacity .8s,filter .8s; }
.output-visual[data-kind="blueberry"] .output-orbit { animation-duration:28s; }
.output-visual[data-kind="blueberry"] .output-scene { animation:lunar-focus 9s ease-in-out infinite; }
@keyframes lunar-focus { 0%,100%{filter:brightness(.9) saturate(.85)} 50%{filter:brightness(1.05) saturate(1.15)} }
.sense-overlay { position:absolute; inset:0; pointer-events:none; z-index:4; overflow:hidden; }
.sense-corner { position:absolute; width:28px; height:28px; border-color:#e1e9f566; border-style:solid; }
.sense-corner--tl { top:15px; left:15px; border-width:1px 0 0 1px; }
.sense-corner--br { bottom:15px; right:15px; border-width:0 1px 1px 0; }
.sense-readout { position:absolute; right:16px; top:17px; font-family:var(--latin); font-size:10px; letter-spacing:.14em; color:#faf4e4; }
.heat-flow { position:absolute; inset:0; display:none; }
.heat-flow i { position:absolute; width:26%; height:130%; top:-15%; border-radius:50%; background:linear-gradient(0deg,transparent,#ffa04b3b,transparent); filter:blur(12px); animation:heat-rise 4.5s ease-in-out infinite; }
.heat-flow i:nth-child(1) { left:9%; }
.heat-flow i:nth-child(2) { left:38%; animation-delay:-1.5s; }
.heat-flow i:nth-child(3) { right:4%; animation-delay:-3s; }
.output-visual[data-kind="ginger"] .heat-flow { display:block; }
@keyframes heat-rise { 0%,100%{transform:translateY(17%) skew(-7deg);opacity:.2} 50%{transform:translateY(-12%) skew(6deg);opacity:.7} }
.calm-steam { display:none; position:absolute; inset:0; }
.calm-steam i { position:absolute; bottom:20%; width:23px; height:75px; border-left:2px solid #fff7df70; border-radius:50%; filter:blur(1px); animation:table-steam 4.8s ease-out infinite; }
.calm-steam i:nth-child(1) { left:35%; }
.calm-steam i:nth-child(2) { left:49%; animation-delay:-1.6s; }
.calm-steam i:nth-child(3) { left:61%; animation-delay:-3.2s; }
.output-visual[data-kind="calm"] .calm-steam { display:block; }
@keyframes table-steam { 0%{transform:translateY(30px) scale(.65);opacity:0} 35%{opacity:.7} 100%{transform:translateY(-85px) scale(1.3);opacity:0} }
.coffee-clock { border-color:#e9cfad60; }
.coffee-clock::after { content:"00:01"; position:absolute; top:20px; left:0; right:0; text-align:center; font-family:var(--latin); font-size:26px; letter-spacing:.04em; color:#ecd4b8; }
.coffee-clock span { font-family:var(--latin); letter-spacing:.13em; }
.power-label { font-size:11px; margin-top:17px; }
.power-label strong { font-family:var(--latin); font-size:16px; letter-spacing:.045em; }
.power-meter { height:6px; border-radius:0; background:#ffffff16; }
.power-meter > div { border-radius:0; position:relative; transition:width 1.7s var(--ease-out),background 1s; }
.power-meter > div::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,#ffffff75,transparent); transform:translateX(-100%); animation:meter-flow 2.8s ease-in-out infinite; }
@keyframes meter-flow { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
.calm-button { font-family:var(--serif); font-size:14px; font-weight:700; letter-spacing:.06em; border-radius:0; transition:background .6s,color .6s,transform .4s; }
.calm-button:hover { transform:translateY(-2px); }
.experiment-panel.is-calm { background:#efe6d6; color:var(--ink); }
.experiment-panel.is-calm .result-status { background:#dae3ce; color:#435635; }
.experiment-panel.is-calm .experiment-output { background:#e5ddcd; }
.experiment-panel.is-calm .calm-button { background:var(--ink); color:var(--cream); }
.experiment-panel.is-calm .power-meter { background:#1729421c; }
.fiction-note { font-size:10px; letter-spacing:.03em; }
/* Portraits remain the approved images. No synthetic replacement character art. */
.character-tabs { gap:18px; margin-top:45px; margin-bottom:37px; }
.character-tab { padding-bottom:19px; transition:color .4s,border-color .4s; }
.character-tab .avatar-wrap { border:0; background:#eae8e1; }
.character-tab .avatar-wrap img { transition:transform .75s var(--ease-out),filter .75s; filter:saturate(.6); }
.character-tab[aria-selected="true"] .avatar-wrap { border:0; }
.character-tab[aria-selected="true"] .avatar-wrap::after { content:""; position:absolute; inset:0; border:2px solid var(--coral); }
.character-tab > span:nth-child(2) { font-family:var(--serif); font-size:16px; font-weight:700; letter-spacing:.04em; margin-top:15px; }
.character-tab small { font-family:var(--latin); font-size:12px; bottom:20px; }
.character-tab:hover img { transform:scale(1.07); }
.character-panel { grid-template-columns:45% 55%; border:0; background:transparent; min-height:535px; }
.character-image { background:#e5e8e4; padding:52px 40px 86px; transition:background .8s; }
.character-image > img { width:292px; height:338px; border:7px solid #fffcf5; box-shadow:16px 18px 0 #f7f4ecb3; transform:rotate(-4deg); }
.character-image > img.support-art { width:285px; height:320px; }
.character-word { font-family:var(--latin); font-style:italic; font-weight:500; font-size:122px; top:28px; right:1px; letter-spacing:-.01em; color:#17294212; }
.character-no { font-family:var(--latin); font-weight:500; font-style:italic; font-size:99px; left:27px; bottom:51px; color:#fffcf5; }
.character-image > p { font-size:15px; bottom:26px; line-height:1.8; }
.character-orbit { position:absolute; border:1px solid #17294215; border-radius:50%; pointer-events:none; z-index:0; }
.orbit-one { width:76%; aspect-ratio:1; left:12%; top:7%; }
.orbit-two { width:92%; aspect-ratio:1; left:4%; top:-1%; border-style:dashed; animation:orbit 100s linear infinite; }
.character-details { padding:34px 0 22px 9%; }
.character-details > .eyebrow { font-size:12px; letter-spacing:.1em; }
.character-details h3 { font-size:48px; font-weight:800; letter-spacing:.13em; margin-top:12px; }
.character-reading { font-size:10px; letter-spacing:.12em; line-height:2; }
.character-details blockquote { font-size:29px; font-weight:800; line-height:1.8; letter-spacing:.025em; margin:26px 0; }
.character-details > p:not(.eyebrow):not(.character-reading) { font-size:14px; line-height:2.3; }
.character-note { display:block; padding-top:20px; margin-top:25px; }
.character-note dt { font-size:10px; letter-spacing:.1em; margin-bottom:8px; }
.character-note dd { font-size:12px; line-height:2; }
.character-pagination { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:24px; }
.character-pagination > p { font-family:var(--serif); font-size:17px; line-height:1.5; }
.character-pagination > p small { display:block; font-family:var(--latin); font-size:10px; letter-spacing:.13em; margin-top:7px; color:var(--muted); }
.character-pagination > div { display:flex; align-items:center; gap:25px; }
.character-pagination button { width:44px; height:44px; border:1px solid var(--line); border-radius:50%; font-size:20px; transition:background .3s,color .3s; }
.character-pagination button:hover { background:var(--ink); color:var(--cream); }
.character-page { font-family:var(--latin); font-size:21px; line-height:1; }
.character-page b { font-size:32px; font-weight:500; color:var(--coral); }
.character-page i { margin:0 12px; font-style:normal; color:#17294240; }
#character-panel[data-current-character="hiyori"] .character-image { background:#eee0d4; }
#character-panel[data-current-character="ren"] .character-image { background:#dce4e8; }
#character-panel[data-current-character="minato"] .character-image { background:#e2e4ee; }
#character-panel[data-current-character="yui"] .character-image { background:#e5e0e7; }
#character-panel[data-current-character="tsumugi"] .character-image { background:#e3e6d9; }
/* Novel: a quiet cinematic contrast, the reading page itself stays motionless. */
.novel-section { padding-top:100px; padding-bottom:105px; }
.novel-content > .chapter-marker { margin-bottom:65px; }
.novel-content h2 { font-size:clamp(29px,3.5vw,51px); font-weight:800; line-height:1.9; letter-spacing:.035em; }
.novel-content > .eyebrow { font-size:12px; letter-spacing:.16em; }
.novel-lead { font-size:14px; line-height:2.3; margin-top:27px; }
.novel-art { width:56%; right:0; }
.novel-art img { opacity:.65; }
.novel-overlay { background:linear-gradient(90deg,#14273f 22%,#14273fd9 53%,#14273f26 100%); }
.novel-watermark { position:absolute; top:110px; right:4%; font-family:var(--latin); font-size:clamp(70px,10vw,155px); font-style:italic; line-height:.9; color:#f8ecd511; letter-spacing:-.04em; pointer-events:none; z-index:-1; }
.novel-chapter-link { margin-top:35px; padding:26px 28px; width:680px; background:var(--paper); }
.novel-chapter-link .chapter-index { font-family:var(--latin); font-size:60px; font-style:italic; }
.novel-chapter-link strong { font-family:var(--serif); font-size:24px; font-weight:800; letter-spacing:.04em; }
.novel-chapter-link small { font-size:10px; letter-spacing:.08em; }
.novel-chapter-link em { font-size:10px; margin-top:5px; }
.novel-footnote { font-size:10px; }
/* Specials and the final line. */
.special-grid { gap:40px; }
.special-section .gallery-card h3,.special-section .share-card h3,.special-section .concept-card h3 { font-family:var(--serif); font-weight:800; letter-spacing:.08em; }
.social-download strong { font-family:var(--serif); }
.closing-section { position:relative; overflow:hidden; padding:110px 25px 105px; background:#eee9dd; }
.closing-english { display:block; font-family:var(--latin); font-style:italic; font-size:clamp(60px,12vw,170px); font-weight:500; line-height:1.05; letter-spacing:-.05em; color:#c3483228; margin-bottom:25px; }
.closing-section > div svg { width:43px; height:43px; }
.closing-section > p { font-family:var(--serif); font-size:clamp(23px,3.15vw,46px); line-height:1.9; font-weight:700; letter-spacing:.035em; margin-top:17px; }
.closing-section > p strong { color:var(--coral); font-weight:800; }
.closing-section > .text-link { margin-top:34px; font-size:13px; }
.site-footer { background:var(--paper); padding-top:45px; }
.footer-top .brand img { width:165px; }
.footer-top nav a { font-size:12px; }
.footer-credits > .production-credit { font-size:13px; letter-spacing:.06em; }
.footer-credits > .fiction-disclaimer { font-size:11px; }
.footer-credits > .copyright { font-family:var(--latin); font-size:12px; letter-spacing:.09em; }
.button { position:relative; overflow:hidden; transition:transform .45s var(--ease-out),background .35s,box-shadow .35s; }
.button::after { content:""; position:absolute; inset:-60% -35%; background:linear-gradient(105deg,transparent 40%,#ffffff18 50%,transparent 60%); transform:translateX(-80%); transition:transform .85s var(--ease-out); pointer-events:none; }
.button:hover::after { transform:translateX(80%); }
.button:hover { box-shadow:0 11px 22px #17294217; }
.button > svg { transition:transform .4s var(--ease-out); }
.button:hover > svg { transform:translateX(4px); }
.button:active,.food-tab:active { transform:translateY(1px); }
.mobile-bottom-bar { backdrop-filter:blur(10px); background:rgba(247,244,236,.96); }
.mobile-bottom-bar a { font-family:var(--serif); font-weight:700; letter-spacing:.05em; }
/* Reader typography, including standalone fallback page. */
.chapter-header h1,.chapter-header h2 { font-family:var(--serif); font-weight:800; font-size:clamp(32px,4vw,48px); line-height:1.7; letter-spacing:.09em; }
.chapter-body { font-family:var(--serif); font-weight:500; letter-spacing:.055em; line-height:2.45; line-break:strict; }
.chapter-body p { line-height:2.45; }
.chapter-header > .eyebrow { font-family:var(--latin); font-size:13px; letter-spacing:.14em; }
.chapter-end h3 { font-family:var(--serif); font-weight:800; letter-spacing:.08em; }
.chapter-version { font-size:11px; }
.reader-brand { font-family:var(--serif); font-weight:800; }
/* Menu / dialog entry. Normal content does not depend on animations. */
.menu-dialog { width:650px; background:var(--paper); }
#menu-dialog nav { padding:10px 30px 22px; }
#menu-dialog nav a { display:flex; align-items:center; gap:22px; padding:20px 0; border-bottom:1px solid var(--line); }
#menu-dialog nav a small { font-family:var(--latin); font-style:italic; font-size:32px; color:var(--coral); font-weight:500; width:38px; }
#menu-dialog nav a > span { font-family:var(--serif); font-size:25px; font-weight:800; line-height:1.4; }
#menu-dialog nav a em { display:block; font-family:var(--latin); font-size:11px; letter-spacing:.12em; font-weight:500; margin-top:6px; }
#menu-dialog nav a > b { font-family:var(--latin); font-size:24px; margin-left:auto; font-weight:500; }
.menu-dialog > p { font-family:var(--serif); font-size:13px; }
.dialog-top p { font-family:var(--latin); letter-spacing:.13em; }
.gallery-dialog .dialog-top p { font-family:var(--sans); letter-spacing:.03em; }
/* Progressive enhancements. Content is visible if scripting fails or is disabled. */
[data-type-reveal] .glyph { display:inline-block; white-space:pre; }
html.motion-ready body[data-motion="on"] [data-type-reveal]:not(.is-visible) .glyph { opacity:0; transform:translateY(.7em); }
html.motion-ready body[data-motion="on"] [data-type-reveal].is-visible .glyph { animation:type-arrive .85s var(--ease-out) both; animation-delay:calc(var(--glyph-index,0) * 15ms); }
@keyframes type-arrive { from{opacity:0;transform:translateY(.7em) rotate(3deg)} to{opacity:1;transform:translateY(0) rotate(0)} }
html.motion-ready body[data-motion="on"] [data-reveal] { opacity:0; transform:translateY(25px); transition:opacity .85s var(--ease-out),transform 1s var(--ease-out); transition-delay:var(--reveal-delay,0ms); }
html.motion-ready body[data-motion="on"] [data-reveal].is-visible { opacity:1; transform:translateY(0); }
html.motion-ready body[data-motion="on"] .hero-panorama-image { animation:image-arrive 1.3s ease-out both; }
@keyframes image-arrive { from{opacity:.25} to{opacity:1} }
body[data-motion="on"] dialog[open] { animation:dialog-arrive .4s var(--ease-out) both; }
@keyframes dialog-arrive { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
body[data-motion="off"] *,body[data-motion="off"] *::before,body[data-motion="off"] *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
html[data-motion="off"] { scroll-behavior:auto!important; }
body[data-motion="off"] [data-reveal],body[data-motion="off"] [data-type-reveal] .glyph { opacity:1!important; transform:none!important; }
body[data-motion="off"] .hero-atmosphere { display:none; }
body.is-document-hidden *,body.is-document-hidden *::before,body.is-document-hidden *::after { animation-play-state:paused!important; }
.section.is-offscreen *, .section.is-offscreen *::before,.section.is-offscreen *::after { animation-play-state:paused!important; }
body.dialog-open .hero-atmosphere { opacity:0; }
/* Tablet */
@media(min-width:1600px) {
 .hero-welcome { max-width:none; padding-left:max(6.2vw,calc((100vw - 1370px)/2)); padding-right:max(6.2vw,calc((100vw - 1370px)/2)); }
}
@media(max-width:1199px) {
 :root { --header-height:78px; }
 .site-header { gap:16px; padding:0 3.5%; }
 .brand img { width:134px; }
 .desktop-nav { gap:17px; }
 .desktop-nav a > span { font-size:10px; }
 .desktop-nav a > small { font-size:10px; }
 .header-read { font-size:11px; padding:0 13px; }
 .motion-toggle { min-width:65px; font-size:9px; }
 .hero-welcome { padding-top:58px; padding-bottom:54px; gap:28px; }
 .hero-welcome-catch { font-size:2.72vw; }
 .hero-welcome-actions > .button { min-width:226px; font-size:14px; }
 .hero-welcome-actions { min-width:220px; }
 .welcome-side-note { left:14px; }
 .section { padding-top:85px; padding-bottom:85px; }
 .story-layout { gap:6vw; }
 .story-copy > p { font-size:14px; }
 .story-copy blockquote { font-size:25px; }
 .story-heading h2 { font-size:5.2vw; }
 .story-rules h3 { font-size:19px; }
 .story-english { font-size:38px; right:12px; }
 .table-talk { gap:14px; padding:23px; }
 .table-talk p { font-size:19px; }
 .food-tab strong { font-size:20px; }
 .experiment-result { padding:30px; }
 .experiment-output { padding:24px; }
 .character-tab > span:nth-child(2) { font-size:14px; }
 .character-tabs { gap:14px; }
 .character-tab small { right:0; }
 .character-details h3 { font-size:41px; }
 .character-details blockquote { font-size:25px; }
 .character-image > img { width:245px; height:300px; }
 .character-image > img.support-art { width:238px; height:285px; }
 .character-image > p { font-size:13px; }
 .character-details > p:not(.eyebrow):not(.character-reading) { font-size:13px; }
}
@media(max-width:940px) {
 .site-header { gap:16px; }
 .desktop-nav { display:none; }
 .header-read { margin-left:auto; height:39px; font-size:12px; }
 .motion-toggle { min-width:65px; }
 .hero-welcome { padding:50px 5%; gap:30px; }
 .hero-welcome-catch { font-size:2.85vw; }
 .hero-welcome-actions { min-width:200px; }
 .hero-welcome-actions > .button { min-width:205px; font-size:13px; }
 .hero-welcome-description { font-size:12px; }
 .welcome-side-note { display:none; }
 .welcome-seal { width:65px; height:65px; top:-30px; }
 .welcome-seal svg { width:27px; height:27px; }
 .welcome-seal > span { font-size:7px; }
 .section { padding-top:75px; padding-bottom:75px; }
 .chapter-marker { margin-bottom:48px; }
 .chapter-marker .chapter-marker-index { min-width:60px; font-size:70px; }
 .chapter-marker .chapter-marker-label { font-size:29px; }
 .section-intro h2 { font-size:36px; }
 .section-intro > p { font-size:12px; }
 .story-copy > p { font-size:13px; }
 .story-copy blockquote { font-size:24px; }
 .story-english { bottom:35px; right:5px; font-size:34px; }
 .story-rules { gap:20px; }
 .story-rules > div+div { padding-left:20px; }
 .story-rules h3 { font-size:17px; }
 .story-rules p { font-size:12px; }
 .table-talk { flex-wrap:wrap; justify-content:flex-start; column-gap:28px; }
 .table-talk-label { width:100%; display:flex; align-items:baseline; gap:12px; }
 .table-talk-label em { margin:0; }
 .table-talk p { font-size:21px; }
 .talk-divider { font-size:40px; }
 .food-tab strong { font-size:19px; }
 .food-tab small { font-size:10px; }
 .food-tab em { font-size:10px; }
 .experiment-result { padding:25px; }
 .experiment-output { padding:22px; }
 .experiment-result h3 { font-size:33px; }
 .effect-conversation p { font-size:16px; }
 .character-panel { grid-template-columns:44% 56%; min-height:0; }
 .character-image { padding-left:25px; padding-right:25px; }
 .character-details { padding-left:8%; }
 .character-details h3 { font-size:36px; }
 .character-details blockquote { font-size:22px; }
 .character-image > img { width:210px; height:265px; }
 .character-image > img.support-art { width:200px; height:245px; }
 .character-word { font-size:96px; }
 .character-no { font-size:76px; }
 .character-tab > span:nth-child(2) { font-size:12px; letter-spacing:0; }
 .character-tab small { display:none; }
 .character-image > p { font-size:12px; }
 .character-pagination > p { font-size:15px; }
 .novel-content h2 { font-size:33px; }
 .closing-section { padding-top:80px; padding-bottom:80px; }
}
/* Phones: purpose-built sizes, horizontal character navigation, no image crop. */
@media(max-width:640px) {
 :root { --header-height:68px; }
 html { scroll-padding-top:88px; }
 .site-header { padding:0 18px; gap:10px; }
 .brand img { width:118px; height:auto; }
 .brand span { font-size:7px; letter-spacing:.23em; margin-top:2px; }
 .header-read { font-size:10px; padding:0 10px; height:36px; gap:10px; }
 .header-read svg { width:15px; }
 .motion-toggle { min-width:32px; width:32px; min-height:44px; gap:0; }
 .motion-label { display:none; }
 .motion-bars { width:17px; height:16px; }
 .menu-button { width:26px; }
 .hero-visual-caption { min-height:42px; padding:6px 20px; }
 .hero-visual-caption > span { font-size:8px; letter-spacing:.04em; }
 .visual-expand { font-size:9px; }
 .hero-welcome { display:block; padding:39px 24px 35px; text-align:left; }
 .hero-welcome-copy > .eyebrow { justify-content:flex-start; font-size:10px; letter-spacing:.12em; }
 .hero-welcome-catch { font-size:clamp(24px,6.1vw,34px); line-height:1.85; margin-top:20px; letter-spacing:.015em; }
 .mobile-break { display:block; }
 .hero-welcome-description { font-size:12px; line-height:2; margin-top:20px; }
 .hero-welcome-actions { display:flex; justify-content:flex-start; align-items:center; gap:18px 20px; flex-wrap:wrap; padding-top:0; margin-top:25px; min-width:0; }
 .hero-welcome-actions > .button { min-width:200px; min-height:65px; padding:17px 20px; font-size:14px; gap:17px; }
 .hero-welcome-actions > .button small { font-size:9px; margin-top:5px; }
 .hero-welcome-actions > .text-link { font-size:11px; gap:9px; }
 .hero-production { font-size:9px; width:100%; margin-top:0; }
 .welcome-seal { right:3px; top:-106px; width:63px; height:63px; }
 .ticker { padding:11px 0; }
 .ticker > div { gap:25px; }
 .ticker span { font-size:13px; }
 .ticker span:nth-of-type(even) { font-size:17px; }
 .ticker b { font-size:12px; }
 .section { padding:61px 24px 65px; }
 .chapter-marker { gap:17px; margin-bottom:39px; }
 .chapter-marker .chapter-marker-index { font-size:65px; min-width:53px; }
 .chapter-marker .chapter-marker-label { font-size:26px; }
 .chapter-marker .chapter-marker-label small { font-size:9px; margin-top:10px; }
 .chapter-marker .chapter-marker-dot { font-size:12px; top:calc(50% - 6px); padding-left:10px; }
 .chapter-marker::after { margin-left:0; }
 .section-intro { display:block; margin-bottom:28px; }
 .section-intro h2 { font-size:33px; font-weight:800; line-height:1.65; }
 .section-intro .eyebrow { font-size:11px; margin-bottom:16px; }
 .section-intro > p { font-size:12px; line-height:2; margin-top:20px; }
 .story-layout { display:block; }
 .story-heading { padding-top:0; }
 .story-heading > .eyebrow { font-size:11px; margin-bottom:23px; }
 .story-heading h2 { font-size:clamp(41px,12vw,58px); line-height:1.58; letter-spacing:.065em; }
 .story-english { font-size:35px; bottom:15px; right:13px; color:#c3483235; }
 .story-doodle { margin-top:27px; }
 .story-doodle svg { width:47px; height:47px; }
 .story-doodle > span { font-size:10px; }
 .story-copy { margin-top:38px; padding-top:0; }
 .story-copy > p { font-size:14px; line-height:2.3; letter-spacing:.035em; margin-bottom:24px; }
 .story-copy blockquote { font-size:26px; line-height:1.85; margin:30px 0; }
 .table-talk { margin-top:38px; padding:21px 19px 24px; display:grid; grid-template-columns:1fr; gap:22px; }
 .table-talk p { font-size:21px; }
 .table-talk p:last-child { text-align:right; }
 .table-talk-label { font-size:10px; }
 .table-talk-label em { font-size:9px; }
 .talk-speaker { font-size:10px; margin-bottom:6px; }
 .talk-divider { display:none; }
 .story-rules { display:block; margin-top:37px; padding-top:0; }
 .story-rules > div { padding:25px 0!important; border:0!important; border-bottom:1px solid var(--line)!important; }
 .story-rules > div > span { font-size:11px; }
 .story-rules h3 { font-size:22px; margin-top:11px; margin-bottom:12px; }
 .story-rules p { font-size:13px; line-height:2.05; }
 .lab-status-line { font-size:10px; padding:13px 0; }
 .lab-step { font-size:10px; letter-spacing:.06em; }
 .lab-step b { margin-left:7px; }
 .food-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:9px; }
 .food-tab { padding:14px 7px 13px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:7px; min-height:121px; }
 .food-tab .food-icon svg { width:30px; height:30px; }
 .food-tab small { display:block; font-size:8px; letter-spacing:.02em; white-space:nowrap; }
 .food-tab strong { font-size:13px; letter-spacing:0; margin-top:5px; line-height:1.6; }
 .food-tab em,.food-tab > b { display:none; }
 .experiment-panel { display:block; margin-top:18px; }
 .experiment-result { padding:26px 21px 29px; }
 .result-top > span { font-size:10px; letter-spacing:.06em; }
 .result-top .result-status { font-size:9px; padding:4px 8px; }
 .experiment-result h3 { font-size:32px; line-height:1.75; margin-top:22px; letter-spacing:.015em; }
 #effect-description { font-size:12px; line-height:2.1; margin-top:17px; }
 .effect-conversation { margin-top:24px; padding-top:20px; }
 .effect-conversation p { font-size:16px; letter-spacing:.025em; }
 .effect-conversation img { width:39px; height:39px; }
 .experiment-output { padding:21px; }
 .output-visual { min-height:190px; }
 .power-label { margin-top:17px; font-size:10px; }
 .power-label strong { font-size:15px; }
 .calm-button { font-size:12px; padding:14px 12px; gap:8px; }
 .fiction-note { font-size:10px; line-height:1.95; }
 .character-tabs { display:flex; gap:13px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#c3483266 transparent; margin:31px -24px 28px; padding:0 24px 9px; scroll-padding:24px; }
 .character-tab { flex:0 0 92px; width:92px; padding-bottom:13px; }
 .character-tab > span:nth-child(2) { font-size:12px; letter-spacing:0; margin-top:10px; }
 .avatar-wrap { aspect-ratio:1; }
 .character-tab small { display:none; }
 .character-panel { display:block; }
 .character-image { padding:43px 40px 72px; min-height:395px; }
 .character-image > img { width:229px; height:270px; border-width:6px; }
 .character-image > img.support-art { width:224px; height:268px; }
 .character-word { font-size:101px; top:20px; right:2px; }
 .character-no { font-size:88px; bottom:41px; left:22px; }
 .character-image > p { font-size:12px; bottom:19px; left:11px; right:11px; }
 .character-details { padding:34px 0 0; }
 .character-details > .eyebrow { font-size:11px; }
 .character-details h3 { font-size:40px; letter-spacing:.11em; margin-top:10px; }
 .character-reading { font-size:9px; letter-spacing:.1em; }
 .character-details blockquote { font-size:25px; line-height:1.9; margin-top:25px; margin-bottom:23px; }
 .character-details > p:not(.eyebrow):not(.character-reading) { font-size:13px; line-height:2.2; }
 .character-note { margin-top:25px; padding-top:19px; }
 .character-note dd { font-size:12px; }
 .character-pagination { margin-top:20px; padding-top:23px; border-top:1px solid var(--line); }
 .character-pagination > p { font-size:13px; }
 .character-pagination > p small { font-size:8px; letter-spacing:.06em; }
 .character-pagination > div { gap:11px; }
 .character-pagination button { width:38px; height:38px; }
 .character-page { font-size:17px; }
 .character-page b { font-size:27px; }
 .character-page i { margin:0 6px; }
 .novel-content > .chapter-marker { margin-bottom:45px; }
 .novel-content h2 { font-size:clamp(23px,6.2vw,32px); line-height:2; letter-spacing:0; }
 .novel-content > .eyebrow { font-size:11px; }
 .novel-lead { font-size:12px; margin-top:25px; }
 .novel-watermark { font-size:90px; top:100px; right:5%; opacity:.8; }
 .novel-art { width:100%; opacity:.55; }
 .novel-overlay { background:linear-gradient(90deg,#14273fed 0%,#14273fbb 65%,#14273f94 100%); }
 .novel-chapter-link { padding:22px 17px; gap:16px; margin-top:28px; }
 .novel-chapter-link .chapter-index { font-size:43px; padding-right:15px; }
 .novel-chapter-link strong { font-size:17px; line-height:1.65; }
 .novel-chapter-link small { font-size:8px; line-height:1.7; }
 .novel-chapter-link em { font-size:9px; }
 .novel-chapter-link > svg { width:17px; }
 .novel-footnote { font-size:9px; }
 .special-grid { display:block; }
 .special-side { margin-top:27px; }
 .closing-section { padding:66px 23px 71px; }
 .closing-english { font-size:79px; margin-bottom:22px; }
 .closing-section > p { font-size:22px; line-height:2; letter-spacing:0; }
 .closing-section > .text-link { font-size:12px; margin-top:26px; }
 .site-footer { padding:34px 24px 86px; }
 .footer-top { gap:24px; padding-bottom:25px; }
 .footer-top .brand img { width:143px; }
 .footer-top nav { gap:17px 20px; }
 .footer-top nav a { font-size:11px; }
 .footer-credits > .production-credit { font-size:12px; }
 .footer-credits > .fiction-disclaimer { font-size:10px; line-height:2.1; }
 .footer-credits > .copyright { font-size:10px; letter-spacing:.05em; }
 .mobile-bottom-bar a { font-size:12px; }
 .chapter-body { letter-spacing:.035em; }
 .chapter-header h1,.chapter-header h2 { font-size:35px; }
 .menu-dialog { width:100vw; max-width:100vw; }
 #menu-dialog nav { padding:0 24px 18px; }
 #menu-dialog nav a { padding:18px 0; gap:17px; }
 #menu-dialog nav a > span { font-size:24px; }
 #menu-dialog nav a small { font-size:28px; width:34px; }
 .menu-dialog > p { padding:0 24px 25px; }
}
@media(max-width:374px) {
 .site-header { padding:0 13px; gap:7px; }
 .brand img { width:106px; }
 .header-read { padding:0 8px; font-size:9px; gap:8px; }
 .hero-welcome { padding-left:21px; padding-right:21px; }
 .hero-welcome-catch { font-size:23px; }
 .hero-welcome-actions > .button { min-width:189px; }
 .hero-welcome-actions { gap:15px; }
 .hero-welcome-actions > .text-link { font-size:10px; }
 .hero-welcome-description { font-size:11px; }
 .welcome-seal { right:0; width:54px; height:54px; top:-101px; }
 .welcome-seal svg { width:24px; height:24px; }
 .welcome-seal > span { font-size:6px; }
 .section { padding-left:21px; padding-right:21px; }
 .section-intro h2 { font-size:30px; }
 .chapter-marker { gap:13px; }
 .chapter-marker .chapter-marker-label { font-size:24px; }
 .story-copy > p { font-size:13px; }
 .story-copy blockquote { font-size:24px; }
 .food-tab strong { font-size:12px; }
 .food-tab small { font-size:7px; }
 .experiment-result h3 { font-size:29px; }
 .experiment-result { padding-left:18px; padding-right:18px; }
 .experiment-output { padding:18px; }
 .character-details blockquote { font-size:23px; }
 .character-pagination > p { font-size:12px; }
 .character-pagination > p small { font-size:7px; }
 .character-pagination > div { gap:8px; }
 .character-pagination button { width:34px; height:34px; }
 .closing-section > p { font-size:20px; }
 .closing-english { font-size:68px; }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto!important; }
 *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
 [data-reveal],[data-type-reveal] .glyph { opacity:1!important; transform:none!important; }
 .hero-atmosphere { display:none; }
}
@media print {
 .page-progress,.hero-atmosphere,.motion-toggle,.welcome-seal,.character-pagination { display:none!important; }
 [data-reveal],[data-type-reveal] .glyph { opacity:1!important; transform:none!important; }
}
/* Nested reveal glyphs inherit the original accent, rather than recoloring every letter. */
.experiment-section .section-intro h2 .glyph { color:inherit; }
/* Match the narrow-phone gutter so the character rail never widens the viewport. */
@media(max-width:374px) {
 .character-tabs { margin-left:-21px; margin-right:-21px; padding-left:21px; padding-right:21px; scroll-padding:21px; }
}
/* Keep the mobile story ornament below the headline, never over Japanese text. */
@media(max-width:640px) {
 .story-doodle { position:static; inset:auto; margin-top:27px; width:55px; }
 .story-doodle > span { display:none; }
 .story-english { font-size:31px; right:0; bottom:0; }
}