:root {
  --paper: var(--surface-page);
  --paper-light: var(--surface-page-light);
  --ink: var(--surface-ink);
  --teal: var(--color-river-600);
  --cream: var(--color-paper-050);
  --amber: var(--color-mustard-500);
  --coral: var(--color-coral-500);
  --card-w: var(--card-width);
  --card-h: calc(var(--card-w) * var(--card-ratio));
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body { margin: 0; color: var(--text-primary); background: var(--scene-sky); font-family: var(--font-body); }
button, a { color: inherit; font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; z-index: 999; left: 1rem; top: -5rem; padding: .7rem 1rem; color: #111; background: #fff; }
.skip-link:focus { top: 1rem; }

.home { position: relative; width: 100%; height: 100dvh; min-height: 560px; overflow: hidden; isolation: isolate; }
.environment, .library-image, .tree-sway, .paper-noise, .lamp-bloom, .river-glint, .leaf-canopy, .wind-leaves { position: absolute; inset: 0; pointer-events: none; }
.environment { z-index: -3; overflow: hidden; background: var(--scene-sky); }
.library-image { inset: -3%; background: var(--scene-image) center/cover no-repeat; transform: translate3d(var(--bg-x,0),var(--bg-y,0),0) scale(1.055); animation: room-breathe var(--motion-ambient) ease-in-out infinite alternate; will-change: transform, filter; filter: saturate(.98) contrast(.94) brightness(1.015) hue-rotate(var(--scene-hue,0deg)); transition: filter 1.1s ease; }
.environment::after { content: ""; position: absolute; inset: 0; z-index: 3; background: radial-gradient(ellipse at 50% 46%,rgba(255,255,246,.2) 0 20%,transparent 58%),linear-gradient(180deg,rgba(255,255,246,.12),transparent 48%,rgba(95,128,118,.07)); box-shadow: inset 0 0 100px rgba(92,110,100,.12); }
.lamp-bloom { z-index:2; left: auto; width: 42%; background: radial-gradient(circle at 76% 23%,rgba(255,223,139,.34),transparent 50%); mix-blend-mode: screen; animation: lamp-flicker 7s ease-in-out infinite; }
.paper-noise { z-index: 6; opacity: .14; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E"); }
.river-glint { z-index:2; overflow:hidden; transform:translate3d(var(--water-x,0),var(--water-y,0),0); }
.river-glint i { position:absolute; left:-22%; top:var(--glint-top,57%); width:38%; height:2px; border-radius:50%; background:linear-gradient(90deg,transparent,rgba(255,248,213,.84),transparent); filter:blur(.5px); opacity:.52; transform:rotate(-3deg); animation:water-glint 11s ease-in-out infinite; }
.river-glint i:nth-child(2){--glint-top:62%;width:27%;animation-duration:13s;animation-delay:-7s}.river-glint i:nth-child(3){--glint-top:68%;width:44%;animation-duration:9s;animation-delay:-4s;opacity:.32}.river-glint i:nth-child(4){--glint-top:73%;width:22%;animation-duration:10s;animation-delay:-2s}
.leaf-canopy { z-index:5; overflow:hidden; transform:translate3d(var(--leaf-x,0),var(--leaf-y,0),0); }
.leaf-canopy i { position:absolute; right:var(--leaf-right,12%); top:var(--leaf-top,8%); width:28px; height:13px; border-radius:100% 0 100% 0; background:var(--color-leaf-700); opacity:.48; transform-origin:100% 50%; animation:canopy-sway 7s ease-in-out infinite alternate; box-shadow:12px 9px 0 -3px rgba(76,101,67,.5); }
.leaf-canopy i:nth-child(2){--leaf-right:4%;--leaf-top:30%;transform:scale(.7) rotate(22deg);animation-delay:-3s}.leaf-canopy i:nth-child(3){--leaf-right:22%;--leaf-top:16%;transform:scale(.55) rotate(-15deg);animation-delay:-5s}
.tree-sway {
  z-index:1;
  inset:-3%;
  background:var(--scene-image) center/cover no-repeat;
  clip-path:polygon(34% 0,100% 0,100% 62%,86% 58%,72% 47%,60% 30%,48% 20%);
  transform-origin:91% 48%;
  transform:translate3d(var(--bg-x,0),var(--bg-y,0),0) scale(1.055);
  animation:tree-breeze var(--motion-tree) ease-in-out infinite alternate;
  will-change:transform;
}
.wind-leaves { z-index:5; overflow:hidden; }
.wind-leaves i {
  --leaf-size:12px;
  --leaf-y:18%;
  --leaf-drift:84px;
  --leaf-turn:760deg;
  --leaf-alpha:.58;
  position:absolute;
  left:-12vw;
  top:var(--leaf-y);
  width:var(--leaf-size);
  height:calc(var(--leaf-size) * .48);
  border-radius:100% 0 100% 0;
  background:var(--leaf-color,var(--color-leaf-700));
  box-shadow:inset 1px 0 rgba(255,248,233,.25);
  opacity:0;
  transform-origin:center;
  animation:wind-leaf var(--leaf-duration,11s) linear var(--leaf-delay,0s) infinite;
  will-change:transform,opacity;
}
.wind-leaves i::after { content:"";position:absolute;left:48%;top:42%;width:62%;height:1px;background:rgba(28,38,35,.42);transform:rotate(-18deg);transform-origin:left; }
.wind-leaves i:nth-child(1){--leaf-y:12%;--leaf-size:13px;--leaf-duration:11s;--leaf-delay:-2s;--leaf-drift:92px;--leaf-turn:820deg}
.wind-leaves i:nth-child(2){--leaf-y:22%;--leaf-size:9px;--leaf-duration:14s;--leaf-delay:-10s;--leaf-drift:-45px;--leaf-turn:-680deg;--leaf-color:var(--color-mustard-500);--leaf-alpha:.46}
.wind-leaves i:nth-child(3){--leaf-y:31%;--leaf-size:16px;--leaf-duration:9s;--leaf-delay:-6s;--leaf-drift:110px;--leaf-turn:940deg;--leaf-color:var(--color-coral-500);--leaf-alpha:.42}
.wind-leaves i:nth-child(4){--leaf-y:16%;--leaf-size:7px;--leaf-duration:13s;--leaf-delay:-4s;--leaf-drift:58px;--leaf-turn:-720deg}
.wind-leaves i:nth-child(5){--leaf-y:39%;--leaf-size:11px;--leaf-duration:15s;--leaf-delay:-12s;--leaf-drift:-72px;--leaf-turn:620deg;--leaf-color:var(--color-leaf-500)}
.wind-leaves i:nth-child(6){--leaf-y:8%;--leaf-size:15px;--leaf-duration:10s;--leaf-delay:-8s;--leaf-drift:76px;--leaf-turn:-990deg;--leaf-color:var(--color-mustard-500);--leaf-alpha:.5}
.wind-leaves i:nth-child(7){--leaf-y:27%;--leaf-size:8px;--leaf-duration:12s;--leaf-delay:-1s;--leaf-drift:128px;--leaf-turn:860deg}
.wind-leaves i:nth-child(8){--leaf-y:45%;--leaf-size:14px;--leaf-duration:14s;--leaf-delay:-7s;--leaf-drift:-64px;--leaf-turn:-780deg;--leaf-color:var(--color-coral-500);--leaf-alpha:.38}
.wind-leaves i:nth-child(9){--leaf-y:19%;--leaf-size:10px;--leaf-duration:8s;--leaf-delay:-5s;--leaf-drift:46px;--leaf-turn:1080deg;--leaf-color:var(--color-leaf-500)}
.wind-leaves i:nth-child(10){--leaf-y:34%;--leaf-size:6px;--leaf-duration:13s;--leaf-delay:-9s;--leaf-drift:96px;--leaf-turn:-640deg;--leaf-alpha:.36}
.wind-leaves i:nth-child(11){--leaf-y:6%;--leaf-size:9px;--leaf-duration:15s;--leaf-delay:-3s;--leaf-drift:-38px;--leaf-turn:720deg;--leaf-color:var(--color-mustard-500)}
.wind-leaves i:nth-child(12){--leaf-y:25%;--leaf-size:15px;--leaf-duration:12s;--leaf-delay:-11s;--leaf-drift:118px;--leaf-turn:-900deg;--leaf-color:var(--color-leaf-500);--leaf-alpha:.44}
.wind-leaves i:nth-child(13){--leaf-y:42%;--leaf-size:8px;--leaf-duration:10s;--leaf-delay:-6s;--leaf-drift:52px;--leaf-turn:760deg;--leaf-color:var(--color-coral-500);--leaf-alpha:.4}
.wind-leaves i:nth-child(14){--leaf-y:14%;--leaf-size:12px;--leaf-duration:14s;--leaf-delay:-13s;--leaf-drift:-56px;--leaf-turn:-860deg}
.dust-field { position: absolute; z-index: 3; inset: 0; overflow: hidden; }
.dust-field i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #f6d594; box-shadow: 0 0 8px #f6d594; opacity: .25; animation: dust-rise 11s linear infinite; }
.dust-field i:nth-child(1){left:14%;top:70%;animation-delay:-2s}.dust-field i:nth-child(2){left:24%;top:40%;animation-delay:-8s}.dust-field i:nth-child(3){left:36%;top:82%;animation-delay:-4s}.dust-field i:nth-child(4){left:48%;top:63%;animation-delay:-6s}.dust-field i:nth-child(5){left:58%;top:35%;animation-delay:-1s}.dust-field i:nth-child(6){left:67%;top:76%;animation-delay:-9s}.dust-field i:nth-child(7){left:77%;top:51%;animation-delay:-5s}.dust-field i:nth-child(8){left:86%;top:73%;animation-delay:-3s}.dust-field i:nth-child(9){left:43%;top:26%;animation-delay:-7s}.dust-field i:nth-child(10){left:92%;top:32%;animation-delay:-10s}

.topbar { position: absolute; z-index: 90; top: max(16px,env(safe-area-inset-top)); left: var(--space-page); right: var(--space-page); height: 64px; display: flex; align-items: center; gap: 20px; }
.brand { position: relative; display: grid; min-width: 126px; padding: 8px 13px 7px; color: var(--text-primary); text-decoration: none; text-align: center; background: var(--color-paper-200); border: 2px solid var(--line-strong); box-shadow: inset 0 0 0 2px rgba(255,248,233,.55), 4px 5px 0 rgba(74,55,35,.22); transform: rotate(-1deg); }
.brand::before,.brand::after { content: "♥"; position: absolute; top: 15px; color: #9a5144; font-size: 9px; }.brand::before{left:8px}.brand::after{right:8px}
.brand span { font: 700 9px/1 "Gowun Batang",serif; letter-spacing:.28em; }.brand strong { font: 700 17px/1.1 "Gaegu",cursive; }
.brand-note { margin: 0; padding:6px 9px; color: var(--text-muted); background:rgba(255,248,233,.58); border:1px solid rgba(41,51,49,.14); font-size: 10px; letter-spacing: .14em; }
.top-tools { margin-left:auto;display:flex;align-items:center;gap:7px; }
.tool-button { min-height:var(--touch-target);display:flex;align-items:center;gap:7px;padding:5px 9px;border:1px solid rgba(41,51,49,.28);border-radius:2px;color:var(--text-primary);background:var(--surface-tool);box-shadow:2px 3px 0 rgba(74,55,35,.14);cursor:pointer;font:700 11px/1 var(--font-body);letter-spacing:.04em;transition:transform var(--motion-fast),background var(--motion-fast),border-color var(--motion-fast); }
.tool-button i { width:24px;height:24px;display:grid;place-items:center;font:700 16px/1 var(--font-hand);font-style:normal; }
.tool-button:hover { transform:translateY(-2px) rotate(-.4deg);background:var(--surface-tool-hover);border-color:var(--active-accent); }
.tool-button[aria-pressed="true"] { color:var(--color-paper-050);background:var(--active-accent);border-color:var(--color-ink-950); }
.tool-button[aria-pressed="true"] i { color:var(--color-paper-050); }
.about-button i { border-left:1px solid rgba(41,51,49,.24); }
.about-note { position:absolute; z-index:80; right:clamp(18px,4vw,66px); top:88px; width:min(340px,calc(100vw - 36px)); padding:28px 30px 26px; color:#201c16; background:var(--paper-light); border:3px solid #241f18; box-shadow:12px 14px 35px rgba(0,0,0,.45); transform:translateY(-12px) rotate(1deg); opacity:0; visibility:hidden; transition:.35s ease; }
.about-note.open { opacity:1;visibility:visible;transform:translateY(0) rotate(-.5deg); }.about-note::after{content:"";position:absolute;inset:9px;border:1px solid rgba(88,61,27,.25);pointer-events:none}.about-note small{font:700 11px/1 "Gaegu",cursive;color:#a45245}.about-note h2{margin:12px 0;font:700 31px/.95 "Song Myung",serif}.about-note p{margin:0;font-size:13px;line-height:1.8}.about-close{position:absolute;z-index:2;right:8px;top:5px;border:0;background:none;font-size:25px;cursor:pointer}

.catalog-scrim { position:absolute;z-index:92;inset:0;background:var(--surface-scrim);opacity:0;visibility:hidden;transition:opacity var(--motion-medium);backdrop-filter:blur(2px); }
.catalog-scrim.open { opacity:1;visibility:visible; }
.catalog-panel { position:absolute;z-index:95;top:max(92px,calc(env(safe-area-inset-top) + 78px));left:var(--space-page);width:var(--catalog-width);max-height:calc(100dvh - 112px);overflow:auto;padding:var(--space-panel);color:var(--text-primary);background:radial-gradient(circle at 15% 9%,rgba(255,255,255,.34),transparent 30%),repeating-radial-gradient(circle,rgba(70,46,24,.075) 0 1px,transparent 1px 5px),var(--surface-page-light);border:3px solid var(--line-strong);box-shadow:var(--catalog-shadow);transform:translateX(-24px) rotate(-.4deg);opacity:0;visibility:hidden;transition:transform var(--motion-medium) var(--ease-story),opacity var(--motion-fast); }
.catalog-panel::after { content:"";position:absolute;inset:8px;border:1px solid rgba(74,55,35,.2);pointer-events:none; }
.catalog-panel.open { transform:translateX(0) rotate(-.4deg);opacity:1;visibility:visible; }
.catalog-panel header { position:relative;z-index:1;display:flex;justify-content:space-between;gap:18px;padding:0 4px 18px;border-bottom:2px solid rgba(74,55,35,.3); }
.catalog-panel header small { color:var(--color-coral-700);font:700 10px/1 var(--font-hand);letter-spacing:.1em; }
.catalog-panel h2 { margin:8px 0 5px;font:700 31px/.92 var(--font-display);letter-spacing:-.05em; }
.catalog-panel header p { margin:0;color:var(--text-muted);font-size:11px;line-height:1.5; }
.catalog-close { position:relative;z-index:2;flex:0 0 var(--touch-target);width:var(--touch-target);height:var(--touch-target);border:1px solid var(--line-soft);border-radius:50%;background:rgba(255,248,233,.48);cursor:pointer;font-size:27px;line-height:1; }
.catalog-list { position:relative;z-index:1;margin:14px 0 0;padding:0;list-style:none; }
.catalog-list li + li { border-top:1px dashed rgba(74,55,35,.3); }
.catalog-list button { width:100%;min-height:58px;display:grid;grid-template-columns:32px 1fr 24px;grid-template-areas:"number title arrow" "number label arrow";align-items:center;gap:2px 10px;padding:9px 6px;border:0;color:var(--text-primary);background:transparent;text-align:left;cursor:pointer;transition:background var(--motion-fast),padding var(--motion-fast); }
.catalog-list button:hover,.catalog-list button[aria-current="true"] { padding-left:10px;background:rgba(217,164,70,.15); }
.catalog-list button[aria-current="true"] { box-shadow:inset 3px 0 var(--active-accent); }
.catalog-list button[data-bookmarked="true"] strong::after { content:" ★";color:var(--color-coral-700);font-family:var(--font-hand); }
.catalog-list button > span { grid-area:number;font:700 20px/1 var(--font-display);color:var(--active-accent); }
.catalog-list button strong { grid-area:title;font:700 15px/1.2 var(--font-display); }
.catalog-list button small { grid-area:label;color:var(--text-muted);font:700 9px/1.2 var(--font-body);letter-spacing:.08em; }
.catalog-list button i { grid-area:arrow;font-style:normal;font-size:17px; }
.catalog-footnote { position:relative;z-index:1;margin:14px 4px 0;padding-top:12px;border-top:1px solid rgba(74,55,35,.22);color:var(--text-muted);font:700 10px/1.55 var(--font-hand); }
.utility-feedback { position:absolute;z-index:110;left:50%;top:max(92px,calc(env(safe-area-inset-top) + 78px));margin:0;padding:9px 14px;color:var(--color-paper-050);background:var(--color-ink-950);border:1px solid rgba(255,248,233,.68);box-shadow:3px 4px 0 rgba(74,55,35,.24);font:700 11px/1 var(--font-body);transform:translate(-50%,-8px);opacity:0;pointer-events:none;transition:opacity var(--motion-fast),transform var(--motion-fast); }
.utility-feedback.show { opacity:1;transform:translate(-50%,0); }

.hero-title { position: absolute; z-index: 0; left: 50%; top: 8%; width: 100%; transform: translateX(-50%) translate3d(var(--title-x,0),var(--title-y,0),0); text-align: center; color: rgba(41,51,49,.18); text-transform: uppercase; pointer-events:none; filter:drop-shadow(0 8px 0 rgba(255,248,233,.5)); mix-blend-mode:multiply; }
.hero-title span,.hero-title strong { display:block; font:700 clamp(64px,10vw,154px)/.62 "Song Myung",serif; letter-spacing:-.09em; -webkit-text-stroke:1px rgba(221,238,230,.13); }
.hero-title strong { color:rgba(255,248,233,.34); -webkit-text-stroke:2px rgba(41,51,49,.38); font-family:var(--font-hand);font-size:clamp(82px,12vw,186px);font-style:italic;transform:rotate(-4deg); }

.carousel-stage { position: absolute; z-index: 10; inset: var(--stage-top) 0 var(--stage-bottom); perspective: 1500px; touch-action: pan-y; }
.carousel { position: absolute; inset: 0; transform-style: preserve-3d; }
.story-card { --offset:0; --abs:0; position:absolute; left:50%; top:50%; width:var(--card-w); height:var(--card-h); transform-style:preserve-3d; transform:translate3d(calc(-50% + var(--offset) * clamp(225px,25vw,430px)),-48%,calc(var(--abs) * -150px)) rotateY(calc(var(--offset) * -18deg)) rotateZ(calc(var(--offset) * 1.4deg)) scale(calc(1 - var(--abs) * .13)); opacity:calc(1 - var(--abs) * .17); filter:brightness(calc(1 - var(--abs) * .10)) saturate(calc(1 - var(--abs) * .12)); transition:transform var(--motion-page) var(--ease-story),opacity var(--motion-medium),filter var(--motion-medium); cursor:pointer; will-change:transform; }
.story-card[aria-hidden="true"] { pointer-events:none; }
.story-card.active { z-index:10; cursor:default; filter:var(--book-filter-active); }
.story-card.active .cover-surface { animation:book-float 5s ease-in-out infinite; }
.book-edge { position:absolute; z-index:-1; left:-13px;top:5px;width:20px;height:98%;background:repeating-linear-gradient(90deg,var(--book-edge-dark) 0 2px,var(--book-edge-light) 3px 5px);border:2px solid var(--book-border);transform:rotateY(-30deg);transform-origin:right;box-shadow:-8px 9px 12px rgba(69,51,34,.28); }
.cover-surface { position:relative;width:100%;height:100%;overflow:hidden;color:var(--text-primary);background:var(--book-paper);border:3px solid var(--book-border);border-radius:var(--book-radius);box-shadow:inset 0 0 0 7px rgba(255,248,233,.34),inset 0 0 23px rgba(83,57,31,.32),var(--book-shadow);transform-origin:center; }
.cover-surface::before { content:"";position:absolute;z-index:15;inset:0;pointer-events:none;background:linear-gradient(105deg,rgba(255,255,255,.15),transparent 25%,transparent 65%,rgba(92,57,28,.19)),repeating-radial-gradient(circle at 20% 30%,rgba(67,43,20,.18) 0 1px,transparent 1px 5px);mix-blend-mode:multiply;opacity:var(--book-wear-opacity); }
.cover-surface::after { content:"";position:absolute;z-index:16;inset:6px;border:1px solid rgba(49,33,18,.5);box-shadow:inset 0 0 15px rgba(43,25,11,.35);pointer-events:none; }
.cover-family img { width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.82) contrast(1.03); }
.cover-wash { position:absolute;inset:0;background:linear-gradient(180deg,rgba(238,217,174,.88) 0 24%,transparent 44%,transparent 71%,rgba(31,42,34,.88) 100%); }
.cover-copy { position:absolute;z-index:18;inset:0;padding:8.5% 8% 7%;display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none; }
.cover-copy small { display:inline-block;padding:3px 8px;background:#2a342d;color:#f0dfba;font:700 clamp(8px,.7vw,11px)/1 "Gowun Batang",serif;letter-spacing:.08em;transform:rotate(-1deg); }
.cover-copy h2 { margin:9px 0 0;font:700 clamp(29px,3vw,48px)/.82 "Song Myung",serif;letter-spacing:-.09em;text-shadow:2px 3px 0 rgba(238,191,87,.75); }
.cover-copy h2 em { color:var(--coral);font-style:normal;-webkit-text-stroke:1px #1e231e; }.cover-copy p{margin:auto 0 0;padding:7px 10px;color:#f1deb8;background:rgba(27,37,31,.87);font:700 clamp(9px,.8vw,12px)/1.2 "Gaegu",cursive;letter-spacing:.05em}

.cover-ocean .cover-surface{background:#93bdb6}.cover-ocean .cover-copy h2 em{color:#e1aa43}.ocean-art{position:absolute;inset:0;overflow:hidden}.cover-sun{position:absolute;width:42%;aspect-ratio:1;border-radius:50%;right:-5%;top:18%;background:#dfae51}.cover-cloud{position:absolute;width:35%;height:6%;border-radius:50%;background:rgba(239,224,189,.65)}.cover-cloud::after{content:"";position:absolute;width:40%;aspect-ratio:1;border-radius:50%;background:inherit;left:20%;bottom:0}.cover-cloud.one{top:34%;left:-8%}.cover-cloud.two{top:44%;right:-9%;transform:scale(.7)}.cover-wave{position:absolute;left:-20%;width:140%;height:48%;border-radius:48%}.wave-a{top:55%;background:#4f8887;transform:rotate(-4deg)}.wave-b{top:69%;background:#285e64;transform:rotate(3deg)}.cover-boat{position:absolute;z-index:2;left:50%;top:62%;width:34%;height:16%;transform:translateX(-50%);border:4px solid #20241e;border-radius:0 0 50% 50%;background:#c7903e}.cover-boat i,.cover-boat b{position:absolute;bottom:82%;width:50%;height:150%;border:3px solid #20241e;background:#efe0be;clip-path:polygon(100% 0,100% 100%,0 100%)}.cover-boat i{right:50%}.cover-boat b{left:52%;background:#c95d50;transform:scaleX(-1)}
.cover-eyes .cover-surface{background:#d8a758}.cover-eyes .cover-copy{justify-content:space-between}.cover-eyes .cover-copy p{margin:0}.eye-art{position:absolute;inset:0;background:repeating-conic-gradient(from 12deg,rgba(42,50,41,.12) 0 7deg,transparent 8deg 18deg)}.eye-art>span{position:absolute;left:8%;right:8%;top:31%;height:25%;border:6px solid #20251f;border-radius:55% 45% 50% 46%;background:#f1dfbc;transform:rotate(-5deg);overflow:hidden}.eye-art i{position:absolute;width:42%;aspect-ratio:1;left:34%;top:-8%;border:5px solid #20251f;border-radius:50%;background:#497167}.eye-art b{position:absolute;width:10%;aspect-ratio:1;left:47%;top:25%;border-radius:50%;background:#efe3c7}
.cover-work .cover-surface{background:#a65c4c}.cover-work .cover-copy h2{color:#f1deb9;text-shadow:3px 3px 0 #27332d}.cover-work .cover-copy h2 em{color:#e3b84e}.desk-art{position:absolute;left:7%;right:7%;top:27%;bottom:13%;background:#5e4632;border:4px solid #21221d;transform:rotate(1deg)}.desk-paper{position:absolute;left:17%;top:20%;width:66%;height:58%;background:#e8d3a8;border:3px solid #20211c;transform:rotate(-6deg);box-shadow:6px 7px 0 rgba(0,0,0,.23)}.desk-paper::before{content:"";position:absolute;inset:20% 10%;background:repeating-linear-gradient(#8a6844 0 2px,transparent 2px 22px);opacity:.45}.desk-paper i{position:absolute;left:10%;right:10%;bottom:18%;height:4px;background:#b45249}.desk-lamp{position:absolute;z-index:2;right:2%;top:0;width:27%;height:17%;border:4px solid #20211c;border-radius:50% 50% 6px 6px;background:#d8a33d;transform:rotate(12deg)}.desk-lamp::after{content:"";position:absolute;left:45%;top:100%;width:5px;height:160px;background:#20211c}.desk-mug{position:absolute;z-index:2;right:6%;bottom:8%;width:22%;height:18%;border:4px solid #20211c;border-radius:5px 5px 40% 40%;background:#c58a45}
.cover-promise .cover-surface{background:linear-gradient(#c87859,#724948 64%,#263a36)}.cover-promise .cover-copy h2{color:#f0dbb4;text-shadow:3px 3px 0 #3c2e29}.cover-promise .cover-copy h2 em{color:#e8ba52}.promise-art{position:absolute;inset:0}.promise-sun{position:absolute;width:47%;aspect-ratio:1;left:50%;top:30%;border-radius:50%;background:#e4b552;transform:translateX(-50%)}.promise-mountain{position:absolute;left:-10%;width:120%;bottom:0;height:52%;background:#283b36;clip-path:polygon(0 60%,18% 23%,34% 60%,52% 12%,70% 62%,86% 30%,100% 58%,100% 100%,0 100%)}.figure{position:absolute;z-index:2;bottom:12%;background:#172724;border-radius:45% 45% 8px 8px}.figure::before{content:"";position:absolute;left:50%;top:-28%;width:80%;aspect-ratio:1;border-radius:50%;background:inherit;transform:translateX(-50%)}.figure.tall{left:35%;width:15%;height:29%}.figure.small{right:34%;width:11%;height:20%}.hands{position:absolute;z-index:2;left:47%;bottom:28%;width:12%;height:3%;border-radius:20px;background:#172724;transform:rotate(9deg)}

.carousel-arrow { position:absolute;z-index:30;top:50%;width:54px;height:54px;border:1px solid rgba(240,220,176,.48);border-radius:50%;background:rgba(4,18,19,.7);box-shadow:0 8px 22px rgba(0,0,0,.28);display:grid;place-items:center;cursor:pointer;transform:translateY(-50%);transition:background .25s,transform .25s,border-color .25s;backdrop-filter:blur(5px); }.carousel-arrow:hover{background:var(--active-accent);border-color:var(--cream);transform:translateY(-50%) scale(1.07)}.carousel-arrow span{font:400 42px/.7 Arial,sans-serif}.carousel-arrow.prev{left:clamp(16px,5vw,80px)}.carousel-arrow.next{right:clamp(16px,5vw,80px)}

.story-meta { position:absolute;z-index:20;left:clamp(20px,4vw,68px);right:clamp(20px,4vw,68px);bottom:max(25px,env(safe-area-inset-bottom));min-height:95px;display:grid;grid-template-columns:70px minmax(280px,540px) auto;align-items:end;gap:22px;pointer-events:none; }
.chapter-number{align-self:center;display:flex;align-items:baseline;gap:6px;color:#f0d9a8}.chapter-number span{font:700 33px/1 "Song Myung",serif}.chapter-number i{font-style:normal;opacity:.35}.chapter-number small{font-size:11px;opacity:.62}.story-copy{position:relative;padding-left:17px;border-left:3px solid var(--active-accent)}.story-copy small{color:var(--active-accent);font:700 11px/1 "Gaegu",cursive;letter-spacing:.12em}.story-copy h1{margin:5px 0 4px;font:700 clamp(20px,2.1vw,32px)/1 "Song Myung",serif;letter-spacing:-.05em}.story-copy p{margin:0;color:rgba(242,222,179,.66);font-size:11px;line-height:1.5}.open-story{pointer-events:auto;justify-self:end;align-self:center;display:flex;align-items:center;gap:18px;padding:13px 17px;border:1px solid rgba(241,219,174,.45);background:rgba(7,26,27,.66);box-shadow:4px 5px 0 rgba(0,0,0,.25);cursor:pointer;font:700 12px/1 "Gowun Batang",serif;letter-spacing:.08em;transition:.25s}.open-story:hover{color:#18201b;background:var(--active-accent);border-color:var(--cream);transform:translateY(-2px)}.open-story i{font-style:normal;font-size:18px}
.pagination { position:absolute;z-index:24;left:50%;bottom:max(30px,env(safe-area-inset-bottom));display:flex;gap:8px;transform:translateX(-50%); }.pagination button{width:7px;height:7px;padding:0;border:1px solid rgba(242,221,175,.6);border-radius:50%;background:transparent;cursor:pointer;transition:.35s}.pagination button.active{width:26px;border-radius:5px;background:var(--active-accent);border-color:var(--active-accent)}
.navigation-hint{position:absolute;z-index:20;right:clamp(20px,4vw,68px);top:91px;margin:0;display:flex;align-items:center;gap:5px;color:rgba(241,219,176,.52);font:700 9px/1 "Gowun Batang",serif;letter-spacing:.08em}.navigation-hint kbd{width:21px;height:21px;display:grid;place-items:center;border:1px solid rgba(241,219,176,.28);border-radius:3px;background:rgba(0,0,0,.18);font:inherit}.navigation-hint span{margin-left:4px}

.story-reader { position:fixed;z-index:200;inset:0;display:grid;place-items:center;padding:clamp(18px,4vw,60px);opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s; }
.story-reader.open{opacity:1;visibility:visible}.reader-backdrop{position:absolute;inset:0;background:rgba(3,13,13,.86);backdrop-filter:blur(13px)}.reader-close{position:absolute;z-index:4;right:clamp(18px,3vw,48px);top:clamp(18px,3vw,44px);width:46px;height:46px;border:1px solid rgba(242,222,181,.55);border-radius:50%;background:#152c2b;color:#f0dab0;font-size:30px;cursor:pointer}.open-book{position:relative;z-index:2;width:min(100%,980px);height:min(80dvh,670px);display:grid;grid-template-columns:1fr 1fr;color:#211e18;background:var(--paper);border:5px solid #211b14;border-radius:10px 18px 18px 10px;box-shadow:0 35px 80px rgba(0,0,0,.58);transform:scale(.88) rotateX(6deg);transition:transform .65s cubic-bezier(.17,.84,.24,1)}.story-reader.open .open-book{transform:scale(1) rotateX(0)}.open-book::before{content:"";position:absolute;z-index:3;left:50%;top:0;bottom:0;width:24px;transform:translateX(-50%);background:linear-gradient(90deg,rgba(52,32,15,.22),rgba(255,241,205,.38),rgba(52,32,15,.25));mix-blend-mode:multiply}.book-page{position:relative;overflow:hidden;padding:clamp(22px,3vw,48px);background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.28),transparent 35%),repeating-radial-gradient(circle,rgba(70,46,24,.09) 0 1px,transparent 1px 5px),var(--paper)}.page-left{border-radius:5px 0 0 8px}.page-right{border-radius:0 13px 13px 0}.book-page header small{display:inline-block;padding:4px 8px;color:#f3dfb7;background:#263a34;font:700 11px/1 "Gaegu",cursive}.book-page header h2{margin:10px 0 18px;font:700 clamp(34px,4vw,58px)/.92 "Song Myung",serif;letter-spacing:-.07em}.reader-illustration{height:52%;border:4px solid #23231d;overflow:hidden;background:#8fa89b}.reader-illustration img{width:100%;height:100%;object-fit:cover;object-position:center 60%;filter:saturate(.68) contrast(1.1)}.reader-quote{margin:18px 0 0;padding:12px 15px;border-left:5px solid var(--active-accent);background:rgba(255,245,218,.55);font-size:clamp(12px,1.4vw,16px);line-height:1.65}.comic-layout{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;height:90%;gap:9px}.comic-layout article{position:relative;padding:18px;border:3px solid #21221d;background:#d8bd85;overflow:hidden}.comic-layout article:first-child{grid-column:1/3;background:linear-gradient(#9abbb1,#dcb56b)}.comic-layout article::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(31,40,34,.16) 0 1px,transparent 1.5px);background-size:6px 6px;opacity:.55}.comic-layout span,.comic-layout strong,.comic-layout p{position:relative}.comic-layout span{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;color:#f1dfba;background:#253933;font:700 11px/1 "Gaegu",cursive}.comic-layout strong{display:block;margin:12px 0 6px;font:700 23px/1 "Song Myung",serif}.comic-layout p{margin:0;font-size:12px;line-height:1.65}.book-page footer{height:10%;display:flex;align-items:flex-end;justify-content:space-between;font:700 9px/1 "Gowun Batang",serif;letter-spacing:.14em}.book-page footer b{color:#a94c43;font-size:18px}

@keyframes room-breathe{to{transform:translate3d(var(--bg-x,0),var(--bg-y,0),0) scale(1.075)}}
@keyframes lamp-flicker{0%,100%{opacity:.8}48%{opacity:1}52%{opacity:.88}56%{opacity:1}}
@keyframes dust-rise{0%{transform:translate(0,60px) scale(.7);opacity:0}18%{opacity:.3}80%{opacity:.12}100%{transform:translate(35px,-180px) scale(1.2);opacity:0}}
@keyframes book-float{50%{transform:translateY(-7px) rotate(.35deg)}}

@media (max-width: 900px) {
  :root{--card-w:var(--card-width-tablet)}
  .brand-note,.navigation-hint{display:none}.hero-title{top:12%}.carousel-stage{inset:16% 0 21%}.story-meta{grid-template-columns:52px 1fr auto;bottom:20px}.story-copy p{max-width:380px}.pagination{bottom:132px}.carousel-arrow{width:46px;height:46px}.carousel-arrow.prev{left:14px}.carousel-arrow.next{right:14px}
}

@media (max-width: 620px) {
  :root{--card-w:80vw;--card-h:calc(var(--card-w) * var(--card-ratio))}
  .home{min-height:620px}.topbar{top:max(8px,env(safe-area-inset-top));left:12px;right:12px;height:48px}.brand{min-width:108px;padding:6px 10px}.brand strong{font-size:15px}.about-button span{display:none}.about-button i{width:32px;height:32px}
  .hero-title{top:9%;}.hero-title span{font-size:58px}.hero-title strong{font-size:82px;line-height:.55}.carousel-stage{inset:15% 0 25%}.story-card{transform:translate3d(calc(-50% + var(--offset) * 72vw),-48%,calc(var(--abs) * -120px)) rotateY(calc(var(--offset) * -15deg)) rotateZ(calc(var(--offset) * 1.2deg)) scale(calc(1 - var(--abs) * .17))}.carousel-arrow{top:55%;width:40px;height:40px}.carousel-arrow span{font-size:34px}.carousel-arrow.prev{left:8px}.carousel-arrow.next{right:8px}
  .story-meta{left:16px;right:16px;bottom:max(15px,env(safe-area-inset-bottom));min-height:105px;grid-template-columns:40px 1fr;gap:10px;align-items:start}.chapter-number{align-self:start;padding-top:5px}.chapter-number span{font-size:25px}.story-copy h1{font-size:21px}.story-copy p{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.open-story{grid-column:2;margin-top:4px;justify-self:start;align-self:end;padding:10px 14px}.pagination{bottom:132px}.open-book{height:min(88dvh,720px);grid-template-columns:1fr;width:min(92vw,430px);overflow:hidden}.page-left{border-radius:8px}.page-right{display:none}.open-book::before{display:none}.reader-illustration{height:55%}.reader-close{right:10px;top:10px;width:40px;height:40px}.reader-quote{font-size:13px}.about-note{right:12px;top:65px}
}

@media (max-height: 700px) and (min-width: 621px) {
  :root{--card-w:var(--card-width-short)}.hero-title{top:6%}.carousel-stage{inset:12% 0 19%}.story-meta{min-height:70px}.pagination{bottom:25px}.cover-copy h2{font-size:30px}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.library-image{transform:scale(1.04)}}

/* Bright riverside theme overrides. Values come from design-system.css. */
.home::after {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(255,248,233,.12),transparent 24% 76%,rgba(255,248,233,.16));
}
.home.scene-shift .library-image { filter:saturate(1.02) contrast(.95) brightness(1.025) hue-rotate(var(--scene-hue,0deg)); }
.about-button { color:var(--text-primary); text-shadow:0 1px rgba(255,248,233,.5); }
.about-button i { border-color:rgba(41,51,49,.42); background:rgba(255,248,233,.48); }
.about-button:hover i { background:var(--active-accent); }
.about-note { color:var(--text-primary); background:var(--surface-glass-strong); border-color:var(--line-strong); box-shadow:12px 14px 35px rgba(74,55,35,.28); backdrop-filter:blur(10px); }
.carousel-arrow { color:var(--text-primary); background:rgba(255,248,233,.74); border-color:rgba(41,51,49,.54); box-shadow:3px 4px 0 rgba(74,55,35,.2); backdrop-filter:blur(6px); }
.carousel-arrow:hover { color:var(--color-paper-050); background:var(--active-accent); border-color:var(--color-ink-950); }
.story-meta { color:var(--text-primary); background:linear-gradient(90deg,rgba(255,248,233,.86),rgba(255,248,233,.68) 75%,rgba(255,248,233,.82)); border-color:rgba(41,51,49,.35); box-shadow:0 9px 25px rgba(66,73,53,.17),inset 0 1px rgba(255,255,255,.65); backdrop-filter:blur(10px); }
.chapter-number { color:var(--text-primary); border-color:rgba(41,51,49,.25); }
.chapter-number i,.chapter-number small,.story-copy p { color:var(--text-muted); }
.story-copy small { color:var(--color-coral-700); }
.open-story { color:var(--text-primary); border-color:rgba(41,51,49,.48); background:rgba(255,248,233,.66); box-shadow:4px 5px 0 rgba(74,55,35,.19); }
.open-story:hover { color:var(--color-paper-050); background:var(--active-accent); border-color:var(--color-ink-950); }
.pagination { padding:7px 10px; border:1px solid rgba(41,51,49,.16); border-radius:20px; background:rgba(255,248,233,.55); backdrop-filter:blur(6px); }
.pagination button { border-color:rgba(41,51,49,.58); }
.navigation-hint { color:var(--text-muted); padding:5px 7px; background:rgba(255,248,233,.55); }
.navigation-hint kbd { border-color:rgba(41,51,49,.28); background:rgba(255,248,233,.62); }
.reader-backdrop { background:rgba(29,43,38,.72); }
.reader-close { color:var(--color-paper-050); background:var(--color-ink-800); border-color:rgba(255,248,233,.75); }
.open-book { color:var(--text-primary); background:var(--surface-page); border-color:var(--book-border); box-shadow:0 35px 80px rgba(39,53,45,.48); }
.book-page { background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.3),transparent 35%),repeating-radial-gradient(circle,rgba(70,46,24,.09) 0 1px,transparent 1px 5px),var(--surface-page); }
.story-card:focus-visible,.open-story:focus-visible,.carousel-arrow:focus-visible,.pagination button:focus-visible,.tool-button:focus-visible,.catalog-close:focus-visible,.catalog-list button:focus-visible,.about-close:focus-visible,.reader-close:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; box-shadow:0 0 0 2px var(--focus-ring-offset); }

@keyframes water-glint {
  0% { transform:translateX(0) rotate(-3deg) scaleX(.72); opacity:0; }
  24% { opacity:.48; }
  72% { opacity:.24; }
  100% { transform:translateX(390%) rotate(-1deg) scaleX(1.12); opacity:0; }
}
@keyframes canopy-sway {
  0% { translate:0 0; rotate:-4deg; }
  55% { translate:-5px 5px; rotate:7deg; }
  100% { translate:2px 10px; rotate:13deg; }
}
@keyframes book-float { 50% { transform:translateY(-4px) rotate(.22deg); } }

@media (max-width:620px) {
  .library-image { background-position:44% center; }
  .environment::after { box-shadow:inset 0 0 60px rgba(73,75,48,.18); }
  .hero-title { top:10%; opacity:.86; }
  .story-meta { background:rgba(255,248,233,.86); }
  .pagination { padding:6px 9px; }
}

@media (prefers-reduced-motion:reduce) {
  .library-image,.river-glint i,.leaf-canopy i,.story-card.active .cover-surface { animation:none!important; }
  .river-glint,.leaf-canopy { transform:none!important; }
}

/* Reference-proportioned lower cover stage — titles live inside the active book. */
.hero-title {
  z-index:2;
  top:5.5%;
  color:var(--hero-title-primary);
  filter:drop-shadow(5px 7px 0 var(--hero-title-shadow)) drop-shadow(0 10px 20px rgba(41,51,49,.16));
  mix-blend-mode:normal;
}
.hero-title span,.hero-title strong {
  font-family:var(--font-display);
  font-size:clamp(72px,9.5vw,144px);
  line-height:.64;
  letter-spacing:-.085em;
  color:var(--hero-title-primary);
  -webkit-text-stroke:1px rgba(28,38,35,.68);
}
.hero-title span { transform:translateX(-11%); }
.hero-title strong {
  font-family:var(--font-hand);
  font-size:clamp(92px,12vw,176px);
  color:var(--hero-title-secondary);
  -webkit-text-stroke:2px var(--color-river-600);
  text-shadow:4px 5px 0 var(--hero-title-primary);
  transform:translate(8%,-.03em) rotate(-4deg);
}
.carousel-stage { inset:var(--stage-top) 0 var(--stage-bottom); }
.story-card {
  top:auto;
  bottom:0;
  transform-origin:center bottom;
  transform:translate3d(calc(-50% + var(--offset) * clamp(245px,25vw,430px)),0,calc(var(--abs) * -150px)) rotateY(calc(var(--offset) * -18deg)) rotateZ(calc(var(--offset) * 1.4deg)) scale(calc(1 - var(--abs) * .13));
}
.story-card.active .cover-surface { animation:book-float-lower 5s ease-in-out infinite; }
.story-card { --cover-image:none; }
.cover-family { --cover-image:url("assets/cover-01-bear-family-v3-tangerine-mother.webp"); }
.cover-ocean { --cover-image:url("assets/cover-02-voyage.webp"); }
.cover-eyes { --cover-image:url("assets/cover-03-childs-gaze.webp"); }
.cover-work { --cover-image:url("assets/cover-04-making.webp"); }
.cover-promise { --cover-image:url("assets/cover-05-promise.webp"); }
.story-card .cover-surface {
  background-color:var(--book-paper);
  background-image:linear-gradient(180deg,rgba(255,248,233,.05) 0 62%,rgba(22,39,34,.18) 80%,rgba(20,34,30,.48) 100%),var(--cover-image);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.cover-surface > img,.cover-wash,.ocean-art,.eye-art,.desk-art,.promise-art,.cover-copy { display:none; }
.cover-family .cover-surface > img { position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center; }
.story-meta {
  z-index:31;
  left:50%;
  right:auto;
  bottom:var(--stage-bottom);
  width:var(--card-w);
  min-height:clamp(128px,19vh,154px);
  padding:30px 22px 18px;
  grid-template-columns:42px minmax(0,1fr) 48px;
  gap:12px;
  transform:translateX(-50%);
  color:var(--color-paper-050);
  background:linear-gradient(180deg,transparent 0,rgba(23,42,36,.54) 18%,rgba(18,32,29,.92) 58%,rgba(17,29,27,.98) 100%);
  border:0;
  border-right:3px solid var(--book-border);
  border-bottom:3px solid var(--book-border);
  border-left:3px solid var(--book-border);
  box-shadow:none;
  backdrop-filter:none;
  pointer-events:none;
}
.chapter-number {
  align-self:end;
  padding:0 10px 7px 0;
  color:var(--color-paper-050);
  border-color:rgba(243,230,200,.38);
}
.chapter-number span { font-size:28px; }
.chapter-number i,.chapter-number small { color:rgba(243,230,200,.7); }
.story-copy { align-self:end; min-width:0; padding-bottom:3px; }
.story-copy small { color:var(--active-accent); font-size:11px; }
.story-copy h1 {
  margin:3px 0 0;
  color:var(--active-accent);
  font-family:var(--font-display);
  font-size:var(--cover-title-size);
  line-height:.86;
  letter-spacing:-.075em;
  text-wrap:balance;
  text-shadow:2px 3px 0 rgba(0,0,0,.28);
}
.story-copy p { display:none; }
.open-story {
  grid-column:auto;
  align-self:end;
  justify-self:end;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  margin-top:0;
  margin-bottom:5px;
  padding:0;
  color:var(--color-ink-950);
  background:var(--active-accent);
  border:2px solid var(--color-paper-050);
  border-radius:50%;
  box-shadow:3px 4px 0 rgba(0,0,0,.28);
  pointer-events:auto;
}
.open-story span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.open-story i { font-size:21px; }
.pagination { display:none; }
.carousel-arrow { top:61%; }

@keyframes book-float-lower {
  50% { transform:translateY(-4px) rotate(.18deg); }
}
@keyframes tree-breeze {
  0% { translate:-1px 0; rotate:-.12deg; }
  45% { translate:2px 1px; rotate:.24deg; }
  100% { translate:-2px 3px; rotate:-.18deg; }
}
@keyframes wind-leaf {
  0% { opacity:0; transform:translate3d(-8vw,0,0) rotate(0deg) scale(.72); }
  10% { opacity:var(--leaf-alpha); }
  38% { transform:translate3d(42vw,calc(var(--leaf-drift) * .28),0) rotate(calc(var(--leaf-turn) * .35)) scale(1); }
  72% { opacity:var(--leaf-alpha); transform:translate3d(82vw,calc(var(--leaf-drift) * -.16),0) rotate(calc(var(--leaf-turn) * .72)) scale(.82); }
  100% { opacity:0; transform:translate3d(124vw,var(--leaf-drift),0) rotate(var(--leaf-turn)) scale(.58); }
}

@media (max-width:900px) {
  .hero-title { top:7%; }
  .carousel-stage { inset:34% 0 var(--stage-bottom); }
  .story-meta { min-height:142px; }
  .tool-button span { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); }
  .tool-button { min-width:var(--touch-target);justify-content:center;padding:5px; }
}

@media (max-width:620px) {
  .topbar { gap:8px; }
  .top-tools { gap:4px; }
  .tool-button { min-width:40px;min-height:40px;padding:3px;box-shadow:1px 2px 0 rgba(74,55,35,.12); }
  .tool-button i { width:24px;height:24px; }
  .catalog-panel { top:max(64px,calc(env(safe-area-inset-top) + 56px));left:12px;width:calc(100vw - 24px);max-height:calc(100dvh - 78px);padding:22px 20px; }
  .catalog-panel h2 { font-size:27px; }
  .catalog-list button { min-height:54px; }
  .utility-feedback { top:max(66px,calc(env(safe-area-inset-top) + 58px));max-width:calc(100vw - 32px);white-space:nowrap; }
  .hero-title { top:8.2%; }
  .hero-title span {
    font-size:clamp(72px,22vw,88px);
    line-height:.62;
    transform:translateX(-9%);
  }
  .hero-title strong {
    font-size:clamp(92px,27vw,110px);
    line-height:.56;
    transform:translate(7%,-.02em) rotate(-5deg);
  }
  .carousel-stage { inset:39.7% 0 4%; }
  .story-card {
    transform:translate3d(calc(-50% + var(--offset) * 72vw),0,calc(var(--abs) * -120px)) rotateY(calc(var(--offset) * -15deg)) rotateZ(calc(var(--offset) * 1.2deg)) scale(calc(1 - var(--abs) * .17));
  }
  .story-meta {
    bottom:4%;
    min-height:146px;
    padding:30px 16px 18px;
    grid-template-columns:34px minmax(0,1fr) 42px;
    gap:9px;
  }
  .chapter-number { padding-right:7px; }
  .chapter-number span { font-size:24px; }
  .chapter-number small,.chapter-number i { display:none; }
  .story-copy h1 { font-size:var(--cover-title-size-mobile); }
  .story-copy small { font-size:10px; }
  .open-story { width:40px; height:40px; margin-bottom:2px; }
  .carousel-arrow { top:63%; }
}

@media (max-height:700px) and (min-width:621px) {
  .carousel-stage { inset:30% 0 3%; }
  .story-meta { bottom:3%; min-height:118px; padding-top:22px; }
  .story-copy h1 { font-size:34px; }
}

@media (prefers-reduced-motion:reduce) {
  .story-card.active .cover-surface,.tree-sway,.wind-leaves i { animation:none!important; }
  .tree-sway { transform:translate3d(var(--bg-x,0),var(--bg-y,0),0) scale(1.055); }
  .wind-leaves { display:none; }
}