/* White, pale paper and ink mark the changes of pace through the stay. */
:root {
 --pale-paper:url('images/pale-washi-texture.webp');
 --paper-rule:#1e28301a;
}
.paper-band,.folio-source,.page-onsen .bath-detail,.page-stay .room-details,
.page-stay .breakfast-story,.page-town .walk-list,.page-access .information-section,
.reservation-at-a-glance,.page-reserve .reservation-check {
 background-color:#f3f1eb;
 background-image:var(--pale-paper);
 background-size:768px 512px;
}
.paper-band { display:flow-root; border-block:1px solid var(--paper-rule); }
.folio-source,.page-stay .room-details,.page-access .information-section {
 background-image:linear-gradient(#f2f5f64a,#f2f5f64a),var(--pale-paper);
 border-block:1px solid var(--paper-rule);
}
.paper-band .folio-table { margin-bottom:0; padding-block:85px 100px; }
.paper-band .table-detail { align-self:start; }
.paper-band+.folio-room { padding-top:100px; }
.paper-band-morning+.folio-welcome { margin-top:85px; }
.page-onsen .bath-detail,.page-stay .breakfast-story,.page-town .walk-list {
 border-block:1px solid var(--paper-rule);
}
.site-wrap .room-table tbody { background:#ffffff66; }

/* Watercolors sit across the photo edges, connecting image and paper. */
.story-illustration { display:block; pointer-events:none; }
.illustrated-photo { position:relative; isolation:isolate; }
.site-wrap .illustrated-photo>.story-illustration {
 position:absolute; z-index:2; width:var(--illustration-size,260px)!important;
 max-width:none!important; height:auto!important; min-height:0!important; aspect-ratio:auto!important;
 object-fit:contain!important; margin:0!important;
 right:var(--illustration-right,-40px); bottom:var(--illustration-bottom,-58px);
}
.folio-source .source-image { --illustration-size:270px; --illustration-bottom:-64px; }
.folio-table .table-detail { --illustration-size:260px; --illustration-right:-50px; --illustration-bottom:-55px; }
.folio-town { position:relative; }
.folio-town>.town-illustration {
 position:relative; z-index:2; width:260px; height:auto; margin:-110px 0 -38px var(--gutter);
}
.town-after { padding-top:34px; }
.town-aside .journal-aside { margin:0; }
.page-onsen .keeper-portrait { --illustration-size:260px; --illustration-right:-35px; --illustration-bottom:-52px; }
.page-onsen #spring { row-gap:64px; }
.page-stay #dining>figure { --illustration-size:280px; --illustration-right:-24px; --illustration-bottom:-68px; }
.page-stay #dining>figure figcaption { padding-top:20px; padding-right:240px; }
.page-town .detail-hero>.detail-illustration { position:absolute; z-index:2; width:260px; height:auto; right:6%; bottom:-62px; }
.page-town .split-copy { padding-top:120px; }
.walk-intro+p { margin-top:24px; }
/* A small vocabulary of stay, food, seasons and travel. */
.site-wrap .room-view .illustration-tea-rest { --illustration-size:250px; --illustration-right:24px; --illustration-bottom:-38px; }
.room-view .journal-image figcaption { padding-right:260px; }
.room-view-controls { margin-top:30px; }
.folio-morning .illustration-onsen-egg { --illustration-size:240px; --illustration-right:-26px; --illustration-bottom:-48px; }
.folio-morning figcaption { padding-right:190px; }
.folio-morning>.journal-copy { padding-top:14px; }
.folio-welcome .illustration-travel-bag { --illustration-size:240px; --illustration-right:10px; --illustration-bottom:-25px; }
.page-stay #rooms .illustration-tea-rest { --illustration-size:245px; --illustration-right:-24px; --illustration-bottom:-50px; }
.page-stay #rooms figcaption { padding-right:190px; }
.page-stay #breakfast .illustration-onsen-egg { --illustration-size:240px; --illustration-right:-28px; --illustration-bottom:-46px; }
.page-stay #breakfast figcaption { padding-right:185px; }
.sky-story .illustration-maple-sprig { --illustration-size:255px; --illustration-right:-38px; --illustration-bottom:-45px; }
.sky-story .sky-photo figcaption { padding:16px 160px 0 0; }
.page-town .walk-list article { grid-template-columns:36px minmax(0,1fr) 210px; gap:5%; }
.page-town .walk-illustration { width:210px; height:auto; align-self:end; margin-bottom:-32px; }
.address-block .address-illustration { width:210px; max-width:100%; height:auto; margin:24px 0 -48px auto; }
@media(min-width:721px) and (max-width:1100px) {
 .site-wrap .room-view .illustration-tea-rest { --illustration-size:190px; --illustration-right:8px; }
 .room-view .journal-image figcaption { padding-right:175px; }
 .page-town .walk-list article { grid-template-columns:26px minmax(0,1fr) 160px; gap:24px; }
 .page-town .walk-illustration { width:160px; }
}
@media(min-width:721px) and (max-width:1100px) {
 .paper-band .folio-table { padding-block:65px 80px; }
 .paper-band+.folio-room { padding-top:80px; }
 .site-wrap .illustrated-photo { --illustration-size:210px; --illustration-right:-20px; --illustration-bottom:-48px; }
 .folio-town>.town-illustration { width:220px; margin-top:-95px; margin-bottom:-30px; }
 .page-stay #dining>figure figcaption { padding-right:150px; }
}
@media(max-width:720px) {
 .paper-band .folio-table { padding-block:50px 65px; }
 .paper-band+.folio-room { padding-top:65px; }
 .paper-band-morning+.folio-welcome { margin-top:35px; }
 .site-wrap .illustrated-photo { --illustration-size:165px; --illustration-right:-10px; --illustration-bottom:-46px; }
 .folio-source .source-copy { padding-top:22px; }
 .folio-table .table-detail .illustrated-photo { --illustration-size:180px; --illustration-right:-42px; --illustration-bottom:-42px; }
 .folio-table .table-copy { padding-top:28px; }
 .folio-town>.town-illustration { width:195px; margin:-80px 0 -22px 26px; }
 .town-after { padding-top:24px; }
 .town-aside { margin-bottom:18px; }
 .town-after .town-aside .journal-aside { margin:0; font-size:18px; }
 .page-onsen #spring { row-gap:52px; }
 .page-onsen #spring .keeper-portrait .story-illustration { min-height:0; }
 .page-stay #dining .illustrated-photo { --illustration-size:190px; --illustration-right:-18px; --illustration-bottom:-52px; }
 .page-stay #dining>figure figcaption { padding-right:0; padding-top:18px; }
 .page-stay #dining>.section-copy { padding-top:24px; }
 .page-town .detail-hero>.detail-illustration { width:195px; right:22px; bottom:-100px; }
 .page-town .split-copy { padding-top:90px; }
 .page-town .walk-intro { grid-column:2; grid-row:1; }
 .site-wrap .room-view .illustration-tea-rest { --illustration-size:180px; --illustration-right:12px; --illustration-bottom:-30px; }
 .room-view .journal-image figcaption { padding-right:175px; }
 .room-view-controls { margin-top:20px; }
 .folio-morning .illustration-onsen-egg { --illustration-size:165px; --illustration-right:-12px; --illustration-bottom:-42px; }
 .folio-morning figcaption { padding-right:0; padding-top:48px; }
 .folio-morning>.journal-copy { padding-top:0; }
 .folio-welcome .illustration-travel-bag { --illustration-size:170px; --illustration-right:-8px; --illustration-bottom:-25px; }
 .page-stay #rooms .illustration-tea-rest { --illustration-size:170px; --illustration-right:-10px; --illustration-bottom:-45px; }
 .page-stay #rooms figcaption { padding-right:0; padding-top:48px; }
 .page-stay #breakfast .illustration-onsen-egg { --illustration-size:180px; --illustration-right:-14px; --illustration-bottom:-48px; }
 .page-stay #breakfast figcaption { padding-right:0; padding-top:52px; }
 .sky-story .illustration-maple-sprig { --illustration-size:170px; --illustration-right:-12px; --illustration-bottom:-42px; }
 .sky-story .sky-photo figcaption { padding:48px 0 0; }
 .page-town .walk-list article { grid-template-columns:26px minmax(0,1fr); gap:12px 16px; }
 .page-town .walk-illustration { grid-column:2; justify-self:end; width:165px; margin:0 0 -20px; }
 .address-block .address-illustration { width:175px; margin-bottom:-42px; }
}
@media(max-width:360px) {
 .site-wrap .illustrated-photo { --illustration-size:145px; --illustration-right:-8px; }
 .folio-table .table-detail .illustrated-photo { --illustration-size:155px; --illustration-right:-28px; }
 .page-stay #dining .illustrated-photo { --illustration-size:155px; --illustration-right:-8px; }
}

/* Motif-specific gestures settle back into the original illustration, without looping. */
[data-illustration-motion] {
 --illustration-animation:bucket-settle;
 --illustration-duration:1.8s;
 --illustration-origin:50% 78%;
}
[data-illustration-motion="vegetables"] { --illustration-animation:vegetables-sway; --illustration-duration:2.2s; --illustration-origin:35% 85%; }
[data-illustration-motion="geta"] { --illustration-animation:geta-steps; --illustration-duration:1.6s; --illustration-origin:50% 85%; }
[data-illustration-motion="tea"] { --illustration-animation:tea-tilt; --illustration-duration:2.4s; --illustration-origin:35% 80%; }
[data-illustration-motion="egg"] { --illustration-animation:egg-wobble; --illustration-duration:1.7s; --illustration-origin:50% 70%; }
[data-illustration-motion="bag"] { --illustration-animation:bag-set-down; --illustration-duration:1.9s; --illustration-origin:50% 88%; }
[data-illustration-motion="river"] { --illustration-animation:river-breathe; --illustration-duration:2.6s; --illustration-origin:50% 85%; }
[data-illustration-motion="maple"] { --illustration-animation:maple-breeze; --illustration-duration:2.5s; --illustration-origin:92% 28%; }
@media(prefers-reduced-motion:no-preference) {
 [data-illustration-motion].illustration-playing {
  transform-origin:var(--illustration-origin);
  animation:var(--illustration-animation) var(--illustration-duration) ease-in-out both;
  will-change:transform;
 }
 @keyframes bucket-settle {
  0%,100% { transform:translate3d(0,0,0) rotate(0); }
  22% { transform:translate3d(-1px,-2px,0) rotate(-3deg); }
  48% { transform:translate3d(1px,-1px,0) rotate(2deg); }
  70% { transform:translate3d(0,0,0) rotate(-1deg); }
  86% { transform:translate3d(0,0,0) rotate(.4deg); }
 }
 @keyframes vegetables-sway {
  0%,100% { transform:rotate(0); }
  28% { transform:rotate(2.5deg); }
  60% { transform:rotate(-1.5deg); }
  82% { transform:rotate(.6deg); }
 }
 @keyframes geta-steps {
  0%,100% { transform:translate3d(0,0,0) rotate(0); }
  22% { transform:translate3d(-2px,-4px,0) rotate(-2deg); }
  43% { transform:translate3d(0,0,0) rotate(0); }
  64% { transform:translate3d(2px,-3px,0) rotate(2deg); }
  84% { transform:translate3d(1px,0,0) rotate(0); }
 }
 @keyframes tea-tilt {
  0%,100% { transform:rotate(0); }
  38%,53% { transform:rotate(-2.5deg); }
  80% { transform:rotate(.5deg); }
 }
 @keyframes egg-wobble {
  0%,100% { transform:scale(1,1); }
  25% { transform:scale(1.035,.98); }
  48% { transform:scale(.99,1.025); }
  72% { transform:scale(1.01,.995); }
 }
 @keyframes bag-set-down {
  0%,100% { transform:translate3d(0,0,0) rotate(0); }
  25% { transform:translate3d(0,-5px,0) rotate(-1.5deg); }
  55% { transform:translate3d(0,0,0) rotate(1deg); }
  78% { transform:translate3d(0,0,0) rotate(-.5deg); }
 }
 @keyframes river-breathe {
  0%,100% { transform:scale(1,1); }
  40% { transform:scale(1.018,1); }
  72% { transform:scale(.996,1); }
 }
 @keyframes maple-breeze {
  0%,100% { transform:rotate(0); }
  28% { transform:rotate(-4deg); }
  58% { transform:rotate(2.5deg); }
  82% { transform:rotate(-1deg); }
 }
}