/* A sunny, living library in the channel's yellow, pink and blue. */
:root { --paper:#fff1b9; --ink:#204e6c; --library-blue:#237fae; --library-pink:#d72e82; --library-yellow:#ffe36b; }
html { scroll-padding-top:24px; }
body { background-color:#fff1b9; background-image:radial-gradient(#c4a05716 .75px,transparent .75px); background-size:7px 7px; overflow-x:clip; }
.wrap { width:min(1200px,calc(100% - 80px)); }
.topline { background:#ffe478; color:#315c71; border-color:#f0cd55; min-height:35px; font-size:10px; }
.topline b { color:#bc2877; margin-right:8px; }
.header { background:transparent; height:110px; }
.brand strong { display:flex; flex-direction:column; line-height:1.2; letter-spacing:.02em; }
.brand strong em { font-family:var(--serif); font-style:normal; font-size:13px; color:#d72e82; margin-bottom:4px; }
.brand strong>span { font-size:23px; color:#235b7c; }
.brand small { font-size:8px; margin-top:5px; }
.youtube-link { background:#fffaf0; border-color:#dfa1c2; }
.instagram-link { width:38px; height:38px; display:grid; place-items:center; border:1px solid #dfa1c2; border-radius:50%; background:#fffaf0; color:#c03d83; flex-shrink:0; }
.instagram-link svg { width:18px; height:18px; }
.instagram-link:hover { background:#f8d1e5; transform:translateY(-3px); }
.zukan-intro { padding-top:15px; padding-bottom:55px; }
.library-hero { display:grid; grid-template-columns:1.12fr 1fr; align-items:center; gap:2%; padding:20px 0 54px; }
.hero-place { color:#286c92; font-size:12px; font-weight:500; margin:0 0 25px; letter-spacing:.06em; }
.hero-place>span { display:inline-block; border:1px solid #ccab37; background:#ffe786; border-radius:4px; padding:4px 10px; margin-right:7px; transform:rotate(-3deg); }
#zukan-title { margin:0 0 24px; font-family:var(--serif); line-height:1.18; font-size:clamp(46px,5.6vw,76px); letter-spacing:-.025em; font-weight:700; }
#zukan-title>span { display:block; }
.suki-title { color:#d72e82; position:relative; width:max-content; }
.suki-title:after { content:''; display:block; height:9px; background:#f8b0d1; width:93%; position:absolute; left:0; bottom:5px; z-index:-1; border-radius:50%; transform:rotate(-2deg); }
.library-title { color:#24698f; margin-top:10px; }
.hero-message { font-family:var(--serif); font-size:24px; color:#286886; font-weight:700; line-height:1.7; margin-bottom:15px; }
.hero-invitation { font-size:13px; color:#637464; line-height:2; margin-bottom:25px; }
.hero-buttons { display:flex; flex-wrap:wrap; gap:17px; align-items:center; }
.hero-buttons .button { border-radius:32px; box-shadow:0 5px 0 #edb1c9; min-height:51px; font-size:12px; }
.hero-secondary { font-size:11px; border-bottom:1px solid #91a9b0; padding-bottom:4px; color:#427c99; }
.hero-library-note { margin:22px 0 0; font-size:9px; color:#7d825c; display:flex; flex-wrap:wrap; gap:5px 10px; }
.hero-library-note strong { font-weight:500; color:#4e7d87; }
.hero-book-stage { height:510px; position:relative; isolation:isolate; min-width:0; }
.hero-book-stage:before { content:''; position:absolute; inset:53px 0 68px 25px; background:#f6bdd5; border-radius:50% 45% 46% 42%; transform:rotate(-8deg); z-index:-1; }
.stage-stamp { position:absolute; right:17px; top:2px; border:2px solid #4b98b9; color:#26749c; border-radius:50%; width:105px; height:105px; display:grid; place-content:center; font-size:15px; line-height:1.3; text-align:center; font-weight:700; transform:rotate(13deg); z-index:5; background:#fff4b8; }
.stage-stamp>span { display:block; font-size:5px; margin-top:6px; font-weight:500; }
.hero-books { position:absolute; inset:38px 0 80px; animation:shelf-float 7s ease-in-out infinite; }
.hero-volume { position:absolute; width:185px; height:300px; padding:17px 15px 12px 24px; text-align:left; border:1px solid #29739766; border-radius:3px 10px 10px 3px; box-shadow:inset 7px 0 0 #ffffff33,6px 7px 0 #ffffff,7px 8px 0 #7892a388,10px 15px 18px #284b6330; color:#28536c; display:flex; flex-direction:column; transition:transform .3s,box-shadow .3s; }
.hero-volume:before { content:''; position:absolute; top:0; bottom:0; left:9px; width:1px; background:#ffffff77; }
.volume-blue { background:#a9dbf1; }
.volume-pink { background:#f8bfd8; }
.volume-yellow { background:#ffe789; }
.volume-1 { top:45px; left:3%; transform:rotate(-13deg); z-index:1; }
.volume-2 { top:26px; right:0; transform:rotate(12deg); z-index:2; }
.volume-3 { top:95px; left:30%; transform:rotate(-2deg); z-index:3; }
.hero-volume:hover,.hero-volume:focus-visible { transform:translateY(-20px) rotate(0); z-index:6; box-shadow:inset 7px 0 0 #ffffff33,6px 7px 0 #fff,7px 8px 0 #7892a388,15px 24px 25px #284b6330; color:#28536c; }
.volume-ribbon { font-size:7px; letter-spacing:.04em; opacity:.8; border-bottom:1px solid #ffffff88; padding-bottom:7px; }
.volume-topic { font-family:var(--serif); font-size:20px; font-weight:700; margin:11px 0; }
.hero-volume>img { width:100%; height:83px; object-fit:cover; border:3px solid #fff5; border-radius:3px; }
.hero-volume>strong { font-size:11px; line-height:1.7; margin-top:9px; font-weight:600; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.volume-open { margin-top:auto; font-size:8px; padding-top:8px; }
.stage-shelf { position:absolute; left:0; right:-5px; bottom:91px; height:14px; background:#57a2c9; border-radius:4px; box-shadow:0 8px 0 #d6a33733; transform:rotate(-1deg); z-index:-1; }
.stage-note { position:absolute; bottom:13px; left:0; right:0; text-align:center; font-size:13px; font-family:var(--serif); color:#367d9c; font-weight:500; transform:rotate(-2deg); }
.stage-note>span { display:block; font-size:9px; margin-top:5px; color:#75825f; }
.suki-ticker { border-block:1px solid #d4b75c; background:#ffe78d; overflow:hidden; position:relative; padding:14px 50px 14px 0; margin:15px 0 20px; transform:rotate(-1deg); }
.suki-ticker>div { display:flex; width:max-content; animation:suki-flow 32s linear infinite; }
.suki-ticker span { font-family:var(--serif); font-size:20px; color:#3f85a4; letter-spacing:.08em; white-space:nowrap; }
#motion-toggle { position:absolute; right:10px; top:9px; border:1px solid #b5a13a; border-radius:50%; background:#fff1b8; color:#588296; width:32px; height:32px; font-size:11px; z-index:1; }
.zukan-overview { padding-top:65px; gap:8%; }
.zukan-heading { font-size:28px; border-color:#ddcd8b; }
.zukan-overview-copy>p { font-size:13px; line-height:2; }
.zukan-overview-copy .zukan-thanks { color:#c24283; font-size:13px; }
.zukan-host { background:#fffaf0; border-color:#dfd39a; box-shadow:0 7px 0 #efcc5b; }
.host-introduction { font-size:12px; color:#647764; }
.zukan-spread { background:#fff8db; border-color:#dcc989; box-shadow:0 5px 0 #e6c768; }
.spread-top { font-size:16px; }
.channel-strip { background:#d9eff9; border-color:#9fcfe3; }
.zukan-chapters { padding-top:65px; padding-bottom:65px; }
.zukan-section-description { font-size:13px; line-height:2; color:#6b7a69; }
.chapters-grid { gap:24px; padding:14px 2px 25px; border-bottom:9px solid #78b3ce; box-shadow:0 6px 0 #c5a04728; }
.library-book { min-height:280px; display:grid; grid-template-columns:24px minmax(0,1fr); padding:0; text-align:left; position:relative; border:1px solid color-mix(in srgb,var(--chapter),#fff 35%); border-radius:3px 11px 11px 3px; border-top-width:1px; background:var(--chapter-bg); box-shadow:4px 4px 0 #fff9,5px 5px 0 #b9b19a,7px 8px 0 #fff7,8px 9px 0 #b9b19a; transition:transform .3s,box-shadow .3s; }
.library-book:before { content:''; position:absolute; top:0; bottom:0; left:24px; width:1px; background:#fff8; }
.library-book:hover { transform:translateY(-12px) rotate(-1deg); box-shadow:4px 4px 0 #fff9,5px 5px 0 #b9b19a,7px 8px 0 #fff7,8px 9px 0 #b9b19a,12px 17px 20px #254b6417; }
.book-spine { writing-mode:vertical-rl; text-orientation:mixed; padding:17px 4px; font-size:8px; letter-spacing:.08em; color:#2d586b; background:#7795a218; border-radius:3px 0 0 3px; }
.book-cover { display:flex; flex-direction:column; padding:20px 17px 16px; min-width:0; }
.library-book .chapter-top { margin-bottom:28px; }
.library-book .chapter-top>span:first-child { font-size:9px; letter-spacing:.1em; }
.book-cover>strong { font-family:var(--serif); display:block; font-size:21px; line-height:1.6; color:#2f657f; font-weight:700; }
.library-book .chapter-en { font-size:7px; color:#6e8a8e; margin-top:9px; }
.library-book .chapter-bottom { margin-top:auto; padding-top:17px; }
.library-book .chapter-bottom>span { font-size:9px; min-height:31px; color:#6f807a; }
.library-book .chapter-bottom>b { font-size:12px; }
.chapter-life { --chapter:#c2a446; --chapter-bg:#ffe8a3; }
.chapter-care { --chapter:#d888b0; --chapter-bg:#f9cfe2; }
.chapter-roots { --chapter:#62a5c7; --chapter-bg:#c4e6f6; }
.chapter-work { --chapter:#8ba7d4; --chapter-bg:#d8e0f6; }
.people-section { background:#fff6d2; border-color:#e4d090; }
.person-card,.video-card { background:#fffdf4; border-color:#e8dcae; }
.people-search-box,.search-form,.region-control { background:#fffaf0; border-color:#dfcf91; }
.people-filters>button { background:#fffaf0; border-color:#e3cf96; }
.people-note { color:#778068; }
.zukan-how { background:transparent; }
.zukan-steps>li { border-color:#daca98; }
.encounter-photos figure,.about-photo { background:#fffaf0; border-color:#dfd39a; box-shadow:0 5px 0 #edcb6d; }
.collection-section { background:#fff8df; border-color:#e5cf86; }
.format-entrances>button { background:#ffe79a; }
.format-entrances>button:last-child { background:#f8d5e8; }
.about-copy h2 { color:#2d6e90; }
.about-copy>p:not(.eyebrow) { font-size:13px; line-height:2; color:#647764; }
.instagram-story-link { display:block; width:max-content; max-width:100%; margin-top:20px; color:#ba3b7f; font-size:12px; border-bottom:1px solid #deafba; padding-bottom:5px; }
.footer { background:transparent; border-top:1px solid #d7bc69; padding-top:36px; padding-bottom:45px; }
.footer-thanks { color:#68815f; }
.footer-links { gap:14px; }
.footer-links a,.footer-links button { color:#527b8d; }
.editor-picks {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;}
.editor-pick {background:#fffaf0;border:1px solid #dfd39a;border-radius:12px;overflow:hidden;box-shadow:0 5px 0 #edcb6d;}
.pick-open {display:block;width:100%;text-align:left;padding:0;height:100%;}
.pick-photo {position:relative;overflow:hidden;}
.pick-photo img {width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .3s;}
.pick-open:hover .pick-photo img {transform:scale(1.04);}
.pick-photo>span {position:absolute;left:12px;bottom:11px;font-size:9px;background:#fff3c8eb;color:#47728a;padding:3px 8px;border-radius:3px;}
.pick-copy {padding:20px;}
.pick-perspective {font-size:10px;color:#b9387a;margin:0 0 12px;}
.pick-copy h3 {font-family:var(--serif);font-size:19px;color:#2f6d8b;line-height:1.6;margin-bottom:13px;}
.pick-copy>p:not(.pick-perspective) {font-size:11px;line-height:1.95;color:#6b7d6a;}
.pick-action {display:block;color:#bc397c;font-size:10px;border-top:1px solid #e5d7ad;padding-top:13px;margin-top:18px;}
.video-dialog { background:#fffaf0; border:1px solid #d5c798; border-radius:16px; }
.dialog-content { padding-top:35px; }
.dialog-content h2 { font-size:23px; color:#286888; line-height:1.65; }
.dialog-close { z-index:5; background:#ffe795; border:1px solid #d4b35a; }
.video-overview { margin:20px 0 25px; padding:20px; background:#fff0bc; border:1px solid #ead17b; border-radius:10px; }
.overview-kicker { font-size:10px; color:#b02b71; margin-bottom:10px; font-weight:600; letter-spacing:.06em; }
.overview-summary { font-size:14px; color:#3f626b; line-height:1.95; margin-bottom:17px; }
.overview-facts { display:grid; gap:8px; margin:0; }
.overview-facts>div { display:grid; grid-template-columns:90px 1fr; gap:12px; font-size:11px; }
.overview-facts dt { color:#74836b; }
.overview-facts dd { margin:0; color:#346c84; }
.overview-keywords { display:flex; flex-wrap:wrap; gap:6px; margin-top:15px; }
.overview-keywords>span { background:#fff9df; color:#708368; border:1px solid #eadca6; border-radius:20px; font-size:9px; padding:3px 9px; }
.overview-source-note { margin:15px 0 0; font-size:9px; color:#83866b; }
.player-container { margin-bottom:20px; border-radius:8px; overflow:hidden; }
.source-description { border-block:1px solid #e3d5a7; padding:16px 0; margin-top:24px; font-size:12px; }
.source-description summary { cursor:pointer; color:#547e91; }
#original-description { white-space:pre-wrap; overflow-wrap:anywhere; font-size:11px; line-height:1.9; color:#6d7b6c; margin-top:18px; max-height:360px; overflow:auto; }
.source-description>a { color:#b72e79; }
.scroll-reveal { opacity:0; transform:translateY(25px); transition:opacity .7s ease,transform .7s ease; }
.scroll-reveal.is-in { opacity:1; transform:translateY(0); }
.motion-paused .hero-books,.motion-paused .suki-ticker>div { animation-play-state:paused; }
@keyframes shelf-float { 0%,100% {transform:translateY(0) rotate(0)} 50% {transform:translateY(-9px) rotate(.7deg)} }
@keyframes suki-flow { from {transform:translateX(0)} to {transform:translateX(-50%)} }
@media(max-width:1100px) {
  .library-hero { grid-template-columns:1.03fr 1fr; }
  #zukan-title {font-size:56px;}
  .hero-volume {width:155px;height:272px;padding-inline:20px 12px;}
  .volume-topic {font-size:18px;}
  .hero-volume>img {height:70px;}
  .hero-book-stage {height:460px;}
  .stage-stamp {width:85px;height:85px;font-size:12px;}
  .book-cover {padding:17px 12px 14px;}
  .book-cover>strong {font-size:18px;}
}
@media(max-width:900px) {
  .wrap {width:calc(100% - 64px);}
  .library-hero {grid-template-columns:1fr;gap:25px;padding-top:12px;}
  .library-hero-copy {max-width:610px;}
  #zukan-title {font-size:66px;}
  .hero-book-stage {width:min(470px,100%);height:450px;justify-self:center;}
  .hero-volume {width:175px;height:285px;}
  .hero-volume>img {height:81px;}
  .stage-stamp {width:92px;height:92px;}
  .chapters-grid {gap:25px;}
  .library-book {min-height:260px;}
  .book-cover>strong {font-size:22px;}
  .book-cover {padding:20px;}
  .zukan-overview {padding-top:42px;gap:5%;}
  .zukan-overview-copy>p {font-size:12px;}
  .hero-place {margin-bottom:23px;}
}
@media(max-width:600px) {
  .editor-picks {grid-template-columns:1fr;gap:23px;}
  .pick-copy h3 {font-size:19px;}
  .wrap {width:calc(100% - 40px);}
  .topline {font-size:8px;padding:9px 20px;line-height:1.7;}
  .header {height:94px;gap:12px;}
  .brand strong em {font-size:10px;margin-bottom:3px;}
  .brand strong>span {font-size:19px;}
  .brand small {font-size:7px;}
  .youtube-link>span {display:none;}
  .youtube-link {width:36px;height:36px;justify-content:center;padding:0;}
  .header-actions {gap:8px;}
  .library-hero {gap:18px;padding-bottom:28px;}
  .hero-place {font-size:10px;margin-bottom:25px;letter-spacing:.02em;}
  .hero-place>span {padding:4px 7px;}
  #zukan-title {font-size:clamp(36px,11vw,52px);margin-bottom:22px;}
  .hero-message {font-size:21px;line-height:1.65;}
  .hero-invitation {font-size:11px;line-height:2;}
  .hero-buttons {gap:15px;}
  .hero-buttons .button {font-size:10px;min-height:46px;padding-inline:16px;gap:15px;}
  .hero-secondary {font-size:9px;}
  .hero-library-note {font-size:8px;margin-top:20px;}
  .hero-book-stage {height:390px;max-width:355px;}
  .hero-book-stage:before {inset:45px 0 65px 8px;}
  .hero-books {inset:17px 0 65px;}
  .hero-volume {width:135px;height:245px;padding:12px 9px 9px 18px;}
  .volume-1 {left:1%;top:43px;}
  .volume-2 {right:0;top:30px;}
  .volume-3 {left:30%;top:84px;}
  .volume-ribbon {font-size:5px;padding-bottom:6px;}
  .volume-topic {font-size:16px;margin:10px 0;}
  .hero-volume>img {height:65px;}
  .hero-volume>strong {font-size:9px;line-height:1.8;}
  .volume-open {font-size:6px;}
  .stage-stamp {width:70px;height:70px;font-size:10px;top:0;right:3px;}
  .stage-stamp>span {font-size:4px;}
  .stage-shelf {bottom:65px;height:10px;}
  .stage-note {bottom:0;font-size:10px;}
  .stage-note>span {font-size:8px;}
  .suki-ticker {padding-block:12px;margin-top:20px;}
  .suki-ticker span {font-size:16px;}
  #motion-toggle {top:8px;width:28px;height:28px;}
  .zukan-overview {padding-top:35px;gap:30px;}
  .zukan-overview-copy .zukan-lead {font-size:24px!important;}
  .zukan-overview-copy>p {font-size:12px;}
  .zukan-heading {font-size:24px;}
  .zukan-chapters {padding-top:40px;padding-bottom:40px;}
  .zukan-section-description {font-size:11px;}
  .chapters-grid {gap:19px;padding-bottom:18px;}
  .library-book {min-height:245px;grid-template-columns:17px minmax(0,1fr);border-radius:3px 8px 8px 3px;}
  .library-book:before {left:17px;}
  .book-spine {font-size:6px;padding:13px 2px;}
  .book-cover {padding:14px 10px 12px;}
  .book-cover>strong {font-size:17px;line-height:1.7;}
  .library-book .chapter-top {margin-bottom:18px;}
  .library-book .chapter-top>span:first-child {font-size:7px;}
  .library-book .chapter-icon {width:21px;height:21px;}
  .library-book .chapter-en {font-size:5px;letter-spacing:.01em;}
  .library-book .chapter-bottom {padding-top:12px;}
  .library-book .chapter-bottom>span {font-size:7px;min-height:26px;}
  .library-book .chapter-bottom>b {font-size:10px;}
  .dialog-content h2 {font-size:18px;}
  .video-overview {padding:15px;margin-top:17px;}
  .overview-summary {font-size:12px;}
  .overview-facts>div {grid-template-columns:72px 1fr;gap:8px;font-size:10px;}
  .about-copy>p:not(.eyebrow) {font-size:12px;}
  .footer {padding-bottom:35px;}
}
@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto;}
  .hero-books,.suki-ticker>div {animation:none;}
  .scroll-reveal {opacity:1;transform:none;transition:none;}
  .hero-volume,.library-book {transition:none;}
}
/* Books arrive, lift from the shelf, and open like covers. */
.hero-book-stage { transform:translateY(var(--stage-drift,0px)); transition:transform .18s linear; }
.hero-volume { transform-style:preserve-3d; }
.volume-1 {animation:volume-arrive-left 1.2s cubic-bezier(.16,1,.3,1) .1s both;}
.volume-2 {animation:volume-arrive-right 1.2s cubic-bezier(.16,1,.3,1) .25s both;}
.volume-3 {animation:volume-arrive-front 1.2s cubic-bezier(.16,1,.3,1) .4s both;}
.suki-title {animation:title-arrive .8s cubic-bezier(.16,1,.3,1) both;}
.library-title {animation:title-arrive .8s cubic-bezier(.16,1,.3,1) .12s both;}
.suki-ticker span {font-size:27px;}
.library-book {perspective:850px;transform-style:preserve-3d;}
.library-book .book-cover {position:relative;transform-origin:left center;background:var(--chapter-bg);border-radius:0 10px 10px 0;transition:transform .45s ease,box-shadow .45s ease;}
.library-book:hover .book-cover {transform:rotateY(-13deg);box-shadow:8px 0 13px #28526920;}
.library-book.is-opening .book-cover {animation:cover-turn .72s cubic-bezier(.2,.7,.25,1);}
.zukan-chapters.scroll-reveal .library-book {opacity:0;translate:0 55px;transition:translate .75s cubic-bezier(.16,1,.3,1),opacity .6s,transform .3s,box-shadow .3s;}
.zukan-chapters.is-in .library-book {opacity:1;translate:0 0;}
.zukan-chapters .library-book:nth-child(2) {transition-delay:.08s;}
.zukan-chapters .library-book:nth-child(3) {transition-delay:.16s;}
.zukan-chapters .library-book:nth-child(4) {transition-delay:.24s;}
.editor-pick {transition:transform .35s ease,box-shadow .35s ease;}
.editor-pick:hover {transform:translateY(-7px) rotate(-.5deg);box-shadow:0 9px 0 #edcb6d,0 15px 24px #5a6c7317;}
.motion-paused .hero-volume,.motion-paused .suki-title,.motion-paused .library-title {animation:none;opacity:1;translate:0 0;filter:none;}
.motion-paused .scroll-reveal {opacity:1;transform:none;transition:none;}
.motion-paused .library-book {opacity:1;translate:0 0;}
.motion-paused .book-cover {transition:none;}
@keyframes title-arrive {from {opacity:0;translate:0 35px;} to {opacity:1;translate:0 0;}}
@keyframes volume-arrive-left {from {opacity:0;translate:-100px 90px;filter:blur(4px);} to {opacity:1;translate:0 0;filter:blur(0);}}
@keyframes volume-arrive-right {from {opacity:0;translate:100px 75px;filter:blur(4px);} to {opacity:1;translate:0 0;filter:blur(0);}}
@keyframes volume-arrive-front {from {opacity:0;translate:0 120px;filter:blur(4px);} to {opacity:1;translate:0 0;filter:blur(0);}}
@keyframes cover-turn {0% {transform:rotateY(0);} 45% {transform:rotateY(-42deg);box-shadow:12px 0 18px #28526925;} 100% {transform:rotateY(0);}}
@media(max-width:600px) {.suki-ticker span {font-size:21px;}}
@media(prefers-reduced-motion:reduce) {
 .hero-volume,.suki-title,.library-title {animation:none;opacity:1;translate:0 0;filter:none;}
 .hero-book-stage {transform:none;transition:none;}
 .zukan-chapters.scroll-reveal .library-book {opacity:1;translate:0 0;transition:none;}
 .library-book:hover .book-cover,.library-book.is-opening .book-cover {transform:none;animation:none;box-shadow:none;}
}