@import url('assets/font.css');
:root {
  --ink:#354a36;
  --paper:#f5efdf;
  --cream:#fcf5df;
  --rust:#a15e45;
  --muted:#7f876f;
  --hand:'Window Hand','KaiTi','STKaiti',cursive;
  --body:'Window Hand','Microsoft YaHei','PingFang SC',sans-serif;
  --radius:22px
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:24px
}
body {
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:var(--body);
  font-size:16px;
  -webkit-font-smoothing:antialiased
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button,input {
  font:inherit
}
button {
  color:inherit;
  cursor:pointer
}
button {
  border:0;
  background:none
}
a {
  color:inherit;
  text-decoration:none
}
button,a {
  touch-action:manipulation
}
button:focus-visible,a:focus-visible {
  outline:2px solid #9a4e2e;
  outline-offset:6px;
  border-radius:5px
}
button:disabled {
  cursor:wait;
  opacity:.6
}
h1,h2,h3,p {
  margin:0
}
img {
  max-width:100%;
  display:block
}
svg {
  display:block
}
.icon {
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}
.icon-library {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
.eyebrow {
  font-family:Georgia,serif;
  font-size:10px;
  letter-spacing:.27em;
  line-height:1.8
}
.skip-link {
  position:fixed;
  z-index:100;
  top:-70px;
  left:20px;
  background:var(--cream);
  padding:12px 20px
}
.skip-link:focus {
  top:10px
}
.carriage {
  height:100svh;
  min-height:700px;
  max-height:1150px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#bfa47c
}
.window-world {
  position:absolute;
  inset:9% 0 24% 3.8%;
  overflow:hidden;
  background:#9ac5d2;
  border-radius:40px;
  --tile-width:2000px
}
.landscape-track {
  position:absolute;
  inset:0 auto 0 0;
  display:flex;
  width:max-content;
  height:100%;
  will-change:transform;
  animation:landscape-pan 160s linear infinite
}
.landscape-track img {
  flex:none;
  width:var(--tile-width);
  height:100%;
  max-width:none;
  object-fit:fill
}
.landscape-track img:nth-child(even) {
  transform:scaleX(-1)
}
.carriage-frame {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  pointer-events:none;
  z-index:4
}
.glass-light {
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#183c3340,transparent 40%),linear-gradient(113deg,#fff5ce28,transparent 44%,#f5f0dc18 75%,transparent);
  box-shadow:inset 25px 0 45px #31493118;
  pointer-events:none
}
.clouds {
  position:absolute;
  inset:0;
  opacity:.14;
  background:radial-gradient(ellipse 170px 28px at 30% 18%,#fff9e6 30%,transparent 75%),radial-gradient(ellipse 190px 35px at 78% 27%,#fff9e6 25%,transparent 72%);
  animation:cloud-drift 100s linear infinite alternate
}
.near-meadow {
  position:absolute;
  bottom:-2px;
  left:0;
  width:200%;
  height:9%;
  opacity:.7;
  filter:blur(1.5px);
  background:repeating-linear-gradient(107deg,transparent 0 24px,#74835477 25px 29px,transparent 30px 43px),linear-gradient(transparent,#5b7848aa);
  clip-path:polygon(0 44%,2% 61%,4% 13%,5% 70%,7% 33%,9% 61%,10% 12%,12% 68%,15% 40%,16% 72%,19% 34%,22% 61%,25% 44%,27% 61%,29% 13%,30% 70%,32% 33%,34% 61%,35% 12%,37% 68%,40% 40%,41% 72%,44% 34%,47% 61%,50% 44%,52% 61%,54% 13%,55% 70%,57% 33%,59% 61%,60% 12%,62% 68%,65% 40%,66% 72%,69% 34%,72% 61%,75% 44%,77% 61%,79% 13%,80% 70%,82% 33%,84% 61%,85% 12%,87% 68%,90% 40%,91% 72%,94% 34%,97% 61%,100% 44%,100% 100%,0 100%);
  animation:meadow-pan 2.8s linear infinite
}
.passing-poles {
  position:absolute;
  inset:0 -1800px 0 0;
  background:url('assets/passing-poles.svg') repeat-x 0 0;
  background-size:1800px 100%;
  animation:poles-pan 11s linear infinite;
  pointer-events:none
}
.night-stars {
  position:absolute;
  inset:0;
  opacity:0;
  background-image:radial-gradient(circle at 20% 15%,#fff4d6 0 1px,transparent 2px),radial-gradient(circle at 65% 8%,#fff4d6 0 1px,transparent 2px),radial-gradient(circle at 78% 21%,#fff4d6 0 1px,transparent 2px),radial-gradient(circle at 41% 12%,#fff4d6 0 1px,transparent 2px);
  transition:opacity 1s;
  pointer-events:none
}
.scene-curtain {
  position:absolute;
  inset:0;
  background:#263a34;
  opacity:0;
  z-index:8;
  pointer-events:none;
  transition:opacity .38s ease
}
.carriage.is-changing .scene-curtain {
  opacity:1
}
.carriage.is-paused .landscape-track,.carriage.is-paused .passing-poles,.carriage.is-paused .near-meadow,.carriage.is-paused .clouds,.carriage.is-paused .steam {
  animation-play-state:paused
}
.carriage.is-night .landscape-track {
  filter:none
}
.carriage.is-night .clouds {
  opacity:.04
}
.carriage.is-night .glass-light {
  background:linear-gradient(114deg,#ffdeb108,transparent 25%,transparent 80%,#fff4cc06)
}
.carriage.is-night .carriage-frame {
  filter:brightness(.78) saturate(.8)
}
.carriage.is-night .night-stars {
  opacity:1
}
.carriage.is-night .window-copy,.carriage.is-night .journey-position {
  color:#fcf2d8;
  text-shadow:0 2px 12px #182d3555
}
.carriage.is-night .window-copy .eyebrow {
  color:#fcf2d8
}
.carriage.is-night .window-copy .hand-arrow {
  stroke:#fcf2d8
}
.carriage.is-night .near-meadow,.carriage.is-night .passing-poles {
  filter:brightness(.45)
}
.cabin-lamp {
  position:absolute;
  top:8.1%;
  right:16%;
  z-index:6;
  width:65px;
  height:12px;
  border-radius:0 0 45% 45%;
  background:#5b6149;
  border-bottom:3px solid #ffe6a5;
  opacity:0;
  transition:opacity .8s;
  pointer-events:none
}
.cabin-lamp:after {
  content:'';
  position:absolute;
  top:7px;
  left:-90px;
  width:245px;
  height:130px;
  background:radial-gradient(ellipse at top,#ffd98f30,transparent 70%);
  pointer-events:none
}
.carriage.is-night .cabin-lamp {
  opacity:1
}
.carriage.is-night .desk:before {
  content:'';
  position:absolute;
  inset:-10% -5%;
  background:radial-gradient(ellipse at 75% 10%,#ffe0a031,transparent 68%);
  pointer-events:none
}
@keyframes landscape-pan {
  to {
    transform:translate3d(calc(var(--tile-width) * -2),0,0)
  }
}
@keyframes poles-pan {
  to {
    transform:translate3d(-1800px,0,0)
  }
}
@keyframes meadow-pan {
  to {
    transform:translate3d(-25%,0,0)
  }
}
@keyframes cloud-drift {
  to {
    transform:translateX(15%)
  }
}
.cabin-header {
  position:absolute;
  z-index:6;
  top:0;
  left:7.1%;
  right:4.6%;
  height:8.1%;
  display:flex;
  align-items:center;
  gap:20px
}
.brand {
  width:167px;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:4px 3px;
  color:#33432d
}
.brand-name {
  font-family:var(--hand);
  font-size:23px;
  letter-spacing:.07em;
  line-height:1.1;
  white-space:nowrap
}
.brand-star {
  font-size:19px;
  margin-left:5px
}
.brand-en {
  font:9px/1.8 Georgia,serif;
  letter-spacing:.26em;
  margin-top:4px
}
.cabin-nav {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:30px;
  white-space:nowrap
}
.cabin-nav button,.cabin-nav a {
  font-size:16px;
  padding:10px 0;
  position:relative
}
.cabin-nav button:after,.cabin-nav a:after {
  content:'';
  height:1px;
  background:currentColor;
  position:absolute;
  bottom:5px;
  left:0;
  right:0;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s
}
.cabin-nav button:hover:after,.cabin-nav a:hover:after {
  transform:scaleX(1)
}
.cabin-nav button>span:not(.saved-count) {
  font-size:12px;
  margin-left:3px
}
.saved-count {
  font-family:Georgia,serif;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #6a71515c;
  border-radius:50%;
  font-size:10px;
  min-width:18px;
  height:18px;
  margin-left:3px;
  vertical-align:middle
}
.seat-number {
  font-size:11px;
  letter-spacing:.08em;
  opacity:.65;
  margin-left:24px;
  padding-left:24px;
  border-left:1px solid #354a3633
}
.window-copy {
  position:absolute;
  z-index:5;
  left:10%;
  top:19.5%;
  pointer-events:none;
  color:#2d493e
}
.window-copy .eyebrow {
  color:#496554;
  margin-bottom:17px;
  font-size:9px;
  font-weight:600
}
.window-copy h1 {
  font-family:var(--hand);
  font-size:clamp(38px,3.65vw,64px);
  font-weight:400;
  line-height:1.5;
  letter-spacing:.055em;
  text-shadow:0 1px 16px #f9f4df44
}
.window-copy h1 span {
  display:inline-block;
  margin-top:1px
}
.welcome-note {
  font-size:17px;
  letter-spacing:.09em;
  line-height:1.9;
  margin-top:17px
}
.mobile-break {
  display:none
}
.hand-arrow {
  display:none;
  width:130px;
  height:47px;
  fill:none;
  stroke:#4e6550;
  stroke-width:1.15;
  stroke-linecap:round;
  stroke-linejoin:round;
  margin:14px 0 0 155px;
  opacity:.65
}
.journey-position {
  z-index:5;
  position:absolute;
  top:14%;
  right:7%;
  display:flex;
  align-items:center;
  gap:9px;
  color:#3d5945;
  font-family:Georgia,serif;
  font-size:19px
}
.position-line {
  display:block;
  width:32px;
  height:1px;
  background:currentColor;
  opacity:.5
}
.position-total {
  font-size:12px;
  opacity:.65
}
.journey-position p {
  position:absolute;
  right:0;
  top:27px;
  white-space:nowrap;
  font-size:7px;
  letter-spacing:.15em
}
.current-stop {
  position:absolute;
  z-index:6;
  left:10%;
  bottom:29%;
  color:#fff9de;
  text-shadow:0 1px 8px #233d4199
}
.running-label {
  font-size:11px;
  display:flex;
  align-items:center;
  gap:8px;
  letter-spacing:.06em
}
.live-dot {
  width:5px;
  height:5px;
  background:#f9f2b2;
  border-radius:50%;
  box-shadow:0 0 0 4px #fff5ca22
}
.tiny-divider {
  height:10px;
  width:1px;
  background:#fcf3d466;
  margin:0 3px
}
.stop-title-line {
  display:flex;
  align-items:center;
  gap:17px;
  margin-top:12px
}
.stop-title-line h2 {
  font-size:29px;
  font-weight:400;
  letter-spacing:.1em
}
.small-spark {
  font-size:25px;
  opacity:.9
}
.stop-caption {
  font-size:13px;
  letter-spacing:.055em;
  margin-top:8px
}
.cream-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:12px 23px;
  border-radius:30px;
  background:#fbf1d9;
  color:#3c503a;
  text-shadow:none;
  box-shadow:0 3px 12px #283f3926;
  transition:transform .2s,background .2s
}
.cream-button:hover {
  background:#fff9e8;
  transform:translateY(-3px)
}
.story-open {
  font-size:14px;
  margin-top:20px;
  letter-spacing:.06em
}
.cream-button .icon {
  width:17px;
  height:17px
}
.window-controls {
  position:absolute;
  z-index:6;
  right:4.2%;
  bottom:28.5%;
  display:flex;
  align-items:center;
  gap:17px;
  padding:10px 13px;
  background:#2d463d38;
  backdrop-filter:blur(7px);
  border-radius:50px;
  color:#fffae8
}
.window-controls button {
  display:flex;
  gap:7px;
  align-items:center;
  font-size:12px;
  letter-spacing:.02em;
  padding:3px 0
}
.window-controls button+button {
  padding-left:13px;
  border-left:1px solid #f3f0d54d
}
.window-controls .icon {
  width:19px;
  height:19px
}
.window-controls button:hover {
  color:#f8e3a2
}
.desk {
  position:absolute;
  inset:79% 4% 2% 20%;
  z-index:6
}
.desk-whisper {
  position:absolute;
  top:0;
  left:34%;
  font-size:12px;
  letter-spacing:.12em;
  color:#574b36;
  transform:rotate(-2deg);
  opacity:.8
}
.desk-ticket {
  position:absolute;
  width:230px;
  height:123px;
  left:0;
  top:13%;
  padding:15px 20px 11px;
  background:#f1e4c1;
  color:#514d37;
  transform:rotate(-7deg);
  border:1px solid #9d8a6144;
  box-shadow:3px 7px 7px #65432240,-3px 3px 0 #dccca9,-5px 5px 0 #c2b391;
  transition:transform .25s,box-shadow .25s;
  clip-path:polygon(0 0,43% 0,44% 3%,45% 0,100% 0,100% 43%,97% 48%,100% 53%,100% 100%,0 100%,0 55%,3% 50%,0 45%)
}
.desk-ticket:hover {
  transform:rotate(-4deg) translateY(-8px);
  box-shadow:3px 13px 12px #65432244
}
.ticket-top {
  font-family:Georgia,serif;
  font-size:7px;
  letter-spacing:.17em;
  display:flex;
  align-items:center;
  gap:7px;
  opacity:.8
}
.ticket-top .icon {
  width:14px;
  height:14px
}
.ticket-main {
  font-size:23px;
  letter-spacing:.05em;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:10px 0 13px;
  white-space:nowrap
}
.ticket-main>span {
  font-size:21px
}
.ticket-bottom {
  border-top:1px dashed #7b705a66;
  padding-top:7px;
  display:flex;
  justify-content:space-between;
  font-size:8px;
  letter-spacing:.12em
}
.ticket-bottom span:last-child {
  font-family:Georgia,serif
}
.ticket-stamp {
  position:absolute;
  right:19px;
  top:7px;
  font-size:9px;
  letter-spacing:.06em;
  color:#a0634b;
  transform:rotate(13deg);
  border:1px solid #ab6f5b88;
  border-radius:50%;
  width:37px;
  height:32px;
  display:grid;
  place-items:center;
  opacity:.8
}
.desk-photo {
  position:absolute;
  top:11%;
  left:29%;
  width:190px;
  background:#fbf2dd;
  transform:rotate(6deg);
  padding:9px 9px 0;
  box-shadow:2px 6px 13px #5f493c47;
  transition:transform .25s
}
.desk-photo:hover {
  transform:rotate(2deg) translateY(-9px)
}
.desk-photo img {
  height:92px;
  width:100%;
  object-fit:cover;
  object-position:center 63%
}
.desk-photo>span:not(.photo-tape) {
  display:flex;
  align-items:center;
  justify-content:space-around;
  font-size:13px;
  letter-spacing:.05em;
  padding:10px 0
}
.photo-tape {
  position:absolute;
  width:57px;
  height:17px;
  top:-9px;
  left:34%;
  background:#bdc9a784;
  transform:rotate(-5deg);
  clip-path:polygon(0 0,100% 3%,97% 23%,100% 46%,95% 72%,99% 100%,0 97%,4% 70%,0 52%,4% 26%)
}
.photo-star {
  font-size:17px;
  color:#a77848
}
.tea-cup {
  position:absolute;
  right:24%;
  top:0;
  width:150px;
  pointer-events:none;
  transform:rotate(3deg)
}
.tea-cup svg {
  width:100%;
  height:auto
}
.steam {
  animation:steam-rise 4s ease-in-out infinite;
  transform-origin:center
}
.desk-map {
  position:absolute;
  right:0;
  top:5%;
  width:230px;
  transform:rotate(7deg);
  filter:drop-shadow(2px 6px 3px #58493155);
  transition:transform .25s
}
.desk-map:hover {
  transform:rotate(3deg) translateY(-9px)
}
.desk-map>svg {
  width:100%;
  height:auto
}
.desk-map>span {
  position:absolute;
  bottom:17%;
  left:14%;
  font-size:12px;
  display:flex;
  align-items:center;
  gap:10px;
  letter-spacing:.03em;
  color:#5c6047;
  background:#eee3c8dd;
  padding:4px 9px
}
.desk-map .icon {
  width:14px;
  height:14px
}
.scroll-hint {
  position:absolute;
  z-index:6;
  bottom:1.8%;
  left:7%;
  color:#f5edd5;
  font-size:10px;
  letter-spacing:.12em;
  writing-mode:vertical-rl;
  display:flex;
  align-items:center;
  gap:10px;
  opacity:.8
}
.scroll-hint span {
  font-size:16px
}
.scene-footnote {
  position:absolute;
  z-index:6;
  bottom:1.5%;
  right:3%;
  font-size:8px;
  letter-spacing:.08em;
  color:#544b3a;
  opacity:.65
}
@keyframes steam-rise {
  0%,100% {
    opacity:.35;
    transform:translateY(3px)
  }
  50% {
    opacity:.85;
    transform:translateY(-4px)
  }
}
.journal-section {
  position:relative;
  max-width:1180px;
  margin:auto;
  padding:100px 42px 48px
}
.journal-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  margin-bottom:54px
}
.journal-heading .eyebrow {
  color:#929780;
  font-size:9px;
  margin-bottom:19px
}
.journal-heading h2 {
  font-weight:400;
  font-family:var(--hand);
  font-size:37px;
  line-height:1.6;
  letter-spacing:.06em
}
.journal-intro {
  font-size:15px;
  line-height:2;
  color:#6f7c65;
  padding-right:22px;
  letter-spacing:.03em
}
.journal-intro>span {
  display:block;
  font-size:10px;
  margin-top:14px;
  color:#979986
}
.journal-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px;
  align-items:start
}
.journal-card {
  display:block;
  width:100%;
  text-align:left;
  padding:11px 11px 21px;
  background:#fffbef;
  box-shadow:0 3px 13px #655f4321;
  transform:rotate(-2deg);
  position:relative;
  transition:transform .25s,box-shadow .25s;
  border:1px solid #bdb69a22
}
.journal-card:nth-child(2) {
  transform:rotate(2deg);
  margin-top:22px
}
.journal-card:nth-child(3) {
  transform:rotate(-1deg);
  margin-top:6px
}
.journal-card:hover {
  transform:rotate(0) translateY(-7px);
  box-shadow:0 8px 20px #655f4330
}
.journal-card img {
  width:100%;
  height:190px;
  object-fit:cover;
  object-position:50% 60%
}
.journal-card-info {
  padding:20px 8px 0
}
.journal-card-top {
  display:flex;
  justify-content:space-between;
  align-items:center
}
.journal-card-number {
  font-family:Georgia,serif;
  font-size:10px;
  color:#9b9d86;
  letter-spacing:.15em
}
.mood-tag {
  font-size:10px;
  border:1px solid #b6bea37a;
  padding:3px 9px;
  border-radius:20px;
  color:#86906f
}
.journal-card h3 {
  font-size:23px;
  font-weight:400;
  letter-spacing:.06em;
  margin:9px 0 8px
}
.journal-card .journal-card-short {
  font-size:12px;
  color:#868c74;
  letter-spacing:.02em;
  line-height:1.7
}
.journal-card-link {
  display:flex;
  justify-content:space-between;
  margin-top:25px;
  color:#717f65;
  font-size:10px
}
.journal-card-link .icon {
  width:17px;
  height:17px
}
.journal-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:55px;
  padding-top:25px;
  border-top:1px solid #a1a68b44;
  font-size:12px;
  color:#8a9179
}
.text-button {
  display:inline-flex;
  align-items:center;
  gap:15px;
  font-size:13px;
  padding:7px 0;
  position:relative
}
.text-button:after {
  position:absolute;
  content:'';
  height:1px;
  background:currentColor;
  left:0;
  right:0;
  bottom:1px;
  opacity:.35
}
.text-button .icon {
  width:17px;
  height:17px;
  transition:transform .2s
}
.text-button:hover .icon {
  transform:translateX(4px)
}
.letter-section {
  text-align:center;
  padding:49px 25px 83px;
  position:relative
}
.little-flower {
  width:59px;
  height:79px;
  margin:0 auto 20px
}
.letter-section .eyebrow {
  font-size:8px;
  letter-spacing:.24em;
  color:#92967c
}
.letter-section h2 {
  font-size:30px;
  font-weight:400;
  letter-spacing:.06em;
  margin:19px 0
}
.letter-section>p:not(.eyebrow) {
  font-size:14px;
  line-height:2.1;
  color:#8c927d;
  letter-spacing:.05em
}
.letter-section .text-button {
  margin-top:25px;
  font-size:12px
}
.site-footer {
  max-width:1280px;
  margin:0 auto;
  padding:25px 45px 30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:10px;
  color:#929780;
  border-top:1px solid #b0b39844;
  gap:20px
}
.site-footer>a {
  font-size:15px;
  color:#727f64
}
.site-footer>a span {
  font-family:Georgia,serif;
  font-size:7px;
  letter-spacing:.15em;
  margin-left:8px
}
.paper-dialog {
  position:fixed;
  border:1px solid #c0baa075;
  background:#f7f1e3;
  color:var(--ink);
  border-radius:13px;
  width:min(900px,calc(100vw - 48px));
  max-height:88svh;
  padding:0;
  box-shadow:0 20px 90px #1d342c55;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#b8b9a0 transparent
}
.paper-dialog::backdrop {
  background:#203b3677;
  backdrop-filter:blur(7px)
}
.paper-dialog[open] {
  animation:paper-in .3s ease both
}
.dialog-close {
  position:sticky;
  z-index:10;
  top:16px;
  float:right;
  margin:16px 16px -52px 0;
  border-radius:50%;
  width:36px;
  height:36px;
  background:#f9f4e9e8;
  display:grid;
  place-items:center;
  box-shadow:0 1px 10px #43534216;
  border:1px solid #aeb79b44
}
.dialog-close:hover {
  background:#e9e4d5
}
.dialog-close .icon {
  width:18px;
  height:18px
}
.dialog-padding {
  padding:53px 48px 43px
}
.dialog-eyebrow {
  font:9px Georgia,serif;
  letter-spacing:.22em;
  color:#8d967c;
  margin-bottom:16px
}
.dialog-heading {
  font-weight:400;
  font-size:33px;
  line-height:1.6;
  letter-spacing:.04em;
  padding-right:20px
}
.dialog-subtitle {
  font-size:13px;
  line-height:1.9;
  color:#8b927c;
  margin-top:9px
}
.mood-filters {
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin:26px 0
}
.mood-filter {
  font-size:12px;
  border:1px solid #9ba58b66;
  border-radius:25px;
  padding:7px 15px;
  transition:background .2s,color .2s
}
.mood-filter[aria-pressed=true] {
  color:#faf5e9;
  background:#5f7659;
  border-color:#5f7659
}
.journey-tickets {
  display:grid;
  gap:15px
}
.journey-ticket {
  display:flex;
  gap:21px;
  align-items:center;
  text-align:left;
  width:100%;
  padding:12px;
  background:#fffcf1;
  border:1px solid #b7bea266;
  border-radius:3px;
  position:relative;
  box-shadow:0 2px 6px #777a5b08;
  transition:transform .2s,background .2s
}
.journey-ticket:hover {
  background:#fffdf7;
  transform:translateX(4px)
}
.journey-ticket>img {
  width:150px;
  height:91px;
  object-fit:cover
}
.journey-ticket-body {
  flex:1
}
.journey-ticket small {
  color:#9b9e88;
  font-size:9px;
  letter-spacing:.15em
}
.journey-ticket h3 {
  font-size:23px;
  font-weight:400;
  letter-spacing:.05em;
  margin:6px 0
}
.journey-ticket p {
  font-size:12px;
  color:#899279;
  line-height:1.8
}
.journey-ticket>.icon {
  margin-right:14px
}
.journey-ticket .ticket-current {
  position:absolute;
  right:12px;
  top:11px;
  color:#9b6c51;
  font-size:9px;
  border:1px solid #b48e6a66;
  border-radius:3px;
  padding:2px 6px;
  transform:rotate(5deg)
}
.dialog-bottom-note {
  margin-top:23px;
  color:#9c9d88;
  font-size:10px;
  line-height:1.9
}
.story-cover {
  height:260px;
  overflow:hidden;
  position:relative
}
.story-cover>img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 60%
}
.story-cover-label {
  position:absolute;
  bottom:20px;
  left:33px;
  background:#faf2deeb;
  color:#60704e;
  padding:7px 14px;
  border-radius:3px;
  font-size:10px;
  letter-spacing:.15em
}
.story-body {
  padding:33px 48px 42px
}
.story-topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}
.story-meta {
  font-size:10px;
  letter-spacing:.08em;
  color:#939a84
}
.story-save {
  font-size:12px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 12px;
  border:1px solid #abb49766;
  border-radius:20px;
  flex-shrink:0
}
.story-save .icon {
  width:15px;
  height:15px
}
.story-save[aria-pressed=true] {
  color:#fbf4df;
  background:#6d805b;
  border-color:#6d805b
}
.story-body .dialog-heading {
  margin-top:17px;
  font-size:32px
}
.story-intro {
  font-size:16px;
  line-height:2.1;
  color:#5b6e50;
  margin:20px 0 30px;
  letter-spacing:.025em
}
.story-route {
  display:flex;
  justify-content:space-between;
  gap:8px;
  border-top:1px dashed #acb39566;
  border-bottom:1px dashed #acb39566;
  padding:16px 0;
  font-size:11px;
  color:#8b947a;
  margin-bottom:30px
}
.story-route span {
  display:flex;
  align-items:center;
  gap:8px
}
.story-route span:not(:last-child):after {
  content:'···';
  letter-spacing:.2em;
  margin-left:5px;
  color:#aeb394
}
.story-paragraph {
  margin-bottom:25px
}
.story-paragraph h3 {
  font-size:21px;
  font-weight:400;
  margin-bottom:12px
}
.story-paragraph p {
  font-size:15px;
  line-height:2.2;
  color:#5d6b52;
  letter-spacing:.025em
}
.experience-heading {
  font-size:19px;
  font-weight:400;
  margin:33px 0 15px
}
.experience-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:11px
}
.experience-item {
  background:#edeedb99;
  padding:17px 14px;
  border-radius:3px
}
.experience-item span {
  font-family:Georgia,serif;
  font-size:9px;
  color:#a6ad92
}
.experience-item h4 {
  font-size:15px;
  font-weight:400;
  margin:7px 0
}
.experience-item p {
  font-size:12px;
  line-height:1.9;
  color:#657458
}
.story-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin-top:35px;
  border-top:1px solid #afb89b55;
  padding-top:23px
}
.story-stamp {
  font:9px Georgia,serif;
  letter-spacing:.12em;
  color:#a46e52;
  border:1px solid #b57a5b99;
  padding:9px 14px;
  border-radius:50%;
  transform:rotate(-9deg);
  opacity:.75
}
.photo-flip {
  position:relative;
  display:block;
  width:min(100%,350px);
  height:200px;
  margin:35px auto;
  background:transparent;
  perspective:1000px;
  padding:0
}
.photo-flip-inner {
  position:absolute;
  inset:0;
  transition:transform .6s;
  transform-style:preserve-3d
}
.photo-flip.is-flipped .photo-flip-inner {
  transform:rotateY(180deg)
}
.photo-front,.photo-back {
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  background:#fffbef;
  box-shadow:0 3px 12px #5f604622;
  padding:9px
}
.photo-front img {
  width:100%;
  height:144px;
  object-fit:cover
}
.photo-front>span {
  font-size:11px;
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:7px
}
.photo-front .icon {
  width:13px;
  height:13px
}
.photo-back {
  transform:rotateY(180deg);
  padding:30px;
  background:repeating-linear-gradient(#fffaf0,#fffaf0 27px,#d0d3bb 28px)
}
.photo-back span {
  font-size:20px;
  line-height:1.9
}
.photo-back small {
  font-size:11px;
  align-self:flex-end;
  margin-top:17px;
  color:#94997e
}
.collection-empty {
  text-align:center;
  padding:44px 10px 19px
}
.empty-illustration {
  width:74px;
  height:74px;
  margin:0 auto 23px;
  border:1px dashed #aeb89c88;
  transform:rotate(-6deg);
  display:grid;
  place-items:center;
  border-radius:6px;
  background:#ecebd866
}
.empty-illustration .icon {
  width:33px;
  height:33px;
  stroke:#8a9c78
}
.collection-empty p {
  font-size:15px;
  line-height:2;
  color:#8a9278
}
.collection-empty .cream-button {
  margin-top:25px;
  background:#647a58;
  color:#fff8e4;
  font-size:13px
}
.saved-item {
  position:relative
}
.saved-item .journey-ticket {
  padding-right:48px
}
.saved-remove {
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  padding:7px;
  border-radius:50%;
  background:#f3ecdb
}
.saved-remove .icon {
  width:15px;
  height:15px
}
.saved-list {
  display:grid;
  gap:14px;
  margin-top:29px
}
.map-board {
  position:relative;
  margin:28px 0 20px;
  background:#e9e7cf;
  border:1px solid #babf9e66;
  border-radius:8px;
  overflow:hidden;
  aspect-ratio:1.75
}
.map-board>svg {
  width:100%;
  height:100%
}
.map-pin {
  position:absolute;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
  background:#fffae9;
  box-shadow:0 3px 8px #5e71552b;
  border:1px solid #aeb99a88;
  border-radius:20px;
  padding:7px 11px;
  font-size:12px
}
.map-pin span {
  width:7px;
  height:7px;
  background:#a57353;
  border-radius:50%
}
.map-pin:hover {
  background:#fffdf3;
  transform:translate(-50%,-50%) scale(1.05)
}
.map-caption {
  font-size:10px;
  line-height:1.8;
  color:#969e83
}
.about-letter {
  padding:65px 65px 55px;
  text-align:center
}
.about-letter>.icon {
  width:35px;
  height:35px;
  margin:0 auto 22px;
  color:#8e9e76
}
.about-letter .dialog-heading {
  padding:0;
  font-size:32px
}
.about-letter>p:not(.dialog-eyebrow) {
  font-size:16px;
  line-height:2.2;
  margin-top:22px;
  color:#607053;
  letter-spacing:.025em
}
.about-letter .about-sign {
  font-size:20px!important;
  margin-top:30px!important;
  color:#657654!important
}
.about-letter .dialog-bottom-note {
  font-size:10px!important;
  line-height:1.9!important;
  margin-top:30px!important;
  color:#a1a58f!important
}
.toast {
  position:fixed;
  z-index:100;
  bottom:28px;
  left:50%;
  transform:translate(-50%,15px);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s,transform .25s;
  background:#f9f3e4f2;
  border:1px solid #acb89977;
  border-radius:25px;
  box-shadow:0 4px 24px #2e493533;
  padding:12px 24px;
  font-size:13px;
  color:#5c7450;
  max-width:calc(100vw - 35px);
  text-align:center;
  white-space:nowrap
}
.toast.visible {
  opacity:1;
  transform:translate(-50%,0)
}
body.dialog-open {
  overflow:hidden
}
.noscript-note {
  position:fixed;
  bottom:0;
  padding:15px;
  background:#f8efda;
  z-index:10;
  width:100%;
  text-align:center;
  font-size:13px
}
@keyframes paper-in {
  from {
    opacity:0;
    transform:translateY(15px) rotate(-.5deg)
  }
  to {
    opacity:1;
    transform:translateY(0) rotate(0)
  }
}
@media(min-width:1600px) {
  .brand {
    width:180px
  }
  .brand-name {
    font-size:26px
  }
  .cabin-nav {
    gap:38px
  }
  .cabin-nav a,.cabin-nav button {
    font-size:18px
  }
  .window-copy {
    top:20%
  }
  .window-copy h1 {
    font-size:61px
  }
  .welcome-note {
    font-size:20px
  }
  .desk-ticket {
    width:270px;
    height:140px;
    padding:18px 23px
  }
  .ticket-main {
    font-size:28px
  }
  .ticket-top {
    font-size:8px
  }
  .ticket-bottom {
    font-size:10px
  }
  .desk-photo {
    width:225px
  }
  .desk-photo img {
    height:110px
  }
  .tea-cup {
    width:175px
  }
  .desk-map {
    width:280px
  }
  .current-stop h2 {
    font-size:34px
  }
  .stop-caption {
    font-size:16px
  }
  .running-label {
    font-size:13px
  }
  .story-open {
    font-size:16px
  }
  .window-controls button {
    font-size:14px
  }
}
@media(max-width:1100px) {
  .cabin-nav {
    gap:21px
  }
  .cabin-nav a,.cabin-nav button {
    font-size:14px
  }
  .seat-number {
    display:none
  }
  .brand {
    width:148px
  }
  .brand-name {
    font-size:21px
  }
  .brand-en {
    font-size:8px
  }
  .window-copy {
    top:19%
  }
  .window-copy h1 {
    font-size:43px
  }
  .welcome-note {
    font-size:15px
  }
  .journey-position {
    font-size:17px
  }
  .desk-ticket {
    width:205px;
    height:114px;
    padding:13px 16px
  }
  .ticket-main {
    font-size:20px
  }
  .desk-photo {
    width:165px;
    left:31%
  }
  .desk-photo img {
    height:86px
  }
  .tea-cup {
    width:130px;
    right:22%;
    top:10%
  }
  .desk-map {
    width:190px
  }
  .desk-whisper {
    font-size:10px;
    left:32%
  }
  .window-controls {
    gap:11px;
    right:4%
  }
  .window-controls button {
    font-size:11px
  }
  .window-controls button+button {
    padding-left:9px
  }
  .window-controls .icon {
    width:16px;
    height:16px
  }
  .journal-grid {
    gap:25px
  }
  .journal-card img {
    height:155px
  }
}
@media(max-width:800px) {
  .carriage {
    min-height:760px;
    max-height:1000px
  }
  .cabin-nav {
    gap:16px
  }
  .cabin-nav a {
    display:none
  }
  .cabin-nav button {
    font-size:13px
  }
  .brand {
    width:120px
  }
  .brand-name {
    font-size:17px
  }
  .brand-en {
    font-size:7px
  }
  .window-copy h1 {
    font-size:37px
  }
  .window-copy .eyebrow {
    font-size:7px
  }
  .welcome-note {
    font-size:14px
  }
  .window-copy {
    top:21%
  }
  .journey-position {
    top:15%;
    right:7%
  }
  .journey-position p {
    display:none
  }
  .hand-arrow {
    width:100px;
    margin-left:100px
  }
  .current-stop {
    bottom:31%
  }
  .window-controls {
    bottom:27%;
    right:6%
  }
  .window-controls button span {
    font-size:10px
  }
  .window-controls {
    background:#2d463d4d
  }
  .desk {
    left:15%;
    right:3%;
    top:79%
  }
  .desk-ticket {
    width:180px;
    height:107px
  }
  .ticket-top {
    font-size:6px
  }
  .ticket-main {
    font-size:17px
  }
  .ticket-bottom {
    font-size:7px
  }
  .desk-photo {
    width:145px;
    left:32%;
    top:14%
  }
  .desk-photo img {
    height:77px
  }
  .desk-photo>span:not(.photo-tape) {
    font-size:11px;
    padding:9px 0
  }
  .tea-cup {
    width:110px;
    right:19%;
    top:20%
  }
  .desk-map {
    width:155px;
    top:14%
  }
  .desk-map>span {
    font-size:9px;
    gap:5px;
    padding:3px
  }
  .desk-map .icon {
    width:11px
  }
  .desk-whisper {
    left:30%;
    font-size:9px
  }
  .scene-footnote {
    font-size:7px
  }
  .journal-section {
    padding:70px 30px 35px
  }
  .journal-heading h2 {
    font-size:31px
  }
  .journal-intro {
    font-size:13px;
    padding:0
  }
  .journal-grid {
    gap:18px
  }
  .journal-card {
    padding:8px 8px 15px
  }
  .journal-card img {
    height:130px
  }
  .journal-card-info {
    padding:17px 4px 0
  }
  .journal-card h3 {
    font-size:20px
  }
  .journal-card-short {
    font-size:11px!important
  }
  .journal-card-link {
    font-size:9px
  }
  .mood-tag {
    font-size:9px;
    padding:3px 7px
  }
  .site-footer {
    padding:22px 30px
  }
  .site-footer>span:nth-child(2) {
    display:none
  }
}
@media(max-width:600px) {
  .carriage {
    height:100svh;
    min-height:790px;
    max-height:1000px;
    background:#d1b180
  }
  .window-world {
    inset:9% 0 24% 3.8%;
    border-radius:29px
  }
  .carriage-frame {
    width:100%;
    left:0;
    max-width:none
  }
  .cabin-header {
    height:8.7%;
    left:0;
    right:0;
    gap:8px;
    padding:0 21px;
    background:linear-gradient(115deg,#e9d4a8,#f1e1bd 55%,#dfc9a0);
    border-bottom:2px solid #a38f66
  }
  .brand {
    width:126px;
    padding:0
  }
  .brand-name {
    font-size:19px
  }
  .brand-en {
    font-size:7px;
    margin-top:3px
  }
  .cabin-nav {
    gap:13px
  }
  .cabin-nav button {
    font-size:12px;
    letter-spacing:.015em;
    padding:7px 0
  }
  .cabin-nav button[data-action=about] {
    display:none
  }
  .cabin-nav button[data-action=journeys]>span {
    display:none
  }
  .saved-count {
    font-size:8px;
    min-width:15px;
    height:15px
  }
  .window-copy {
    top:19%;
    left:12%;
    right:8%
  }
  .window-copy .eyebrow {
    font-size:6.5px;
    letter-spacing:.18em;
    margin-bottom:15px
  }
  .window-copy h1 {
    font-size:34px;
    line-height:1.55;
    letter-spacing:.045em
  }
  .welcome-note {
    font-size:13px;
    line-height:1.9;
    margin-top:16px;
    letter-spacing:.05em
  }
  .mobile-break {
    display:block
  }
  .hand-arrow {
    width:87px;
    height:35px;
    margin:10px 0 0 131px
  }
  .journey-position {
    top:13.1%;
    right:8%;
    font-size:14px;
    gap:6px
  }
  .position-line {
    width:18px
  }
  .position-total {
    font-size:10px
  }
  .current-stop {
    left:12%;
    bottom:33.5%;
    text-shadow:0 1px 9px #234c3fa6
  }
  .running-label {
    font-size:9px;
    gap:6px
  }
  .tiny-divider {
    margin:0 2px;
    height:8px
  }
  .live-dot {
    width:4px;
    height:4px;
    box-shadow:0 0 0 3px #fff5ca22
  }
  .stop-title-line {
    margin-top:11px;
    gap:12px
  }
  .stop-title-line h2 {
    font-size:26px
  }
  .stop-caption {
    font-size:11px;
    margin-top:5px
  }
  .story-open {
    font-size:12px;
    margin-top:16px;
    padding:11px 19px;
    gap:18px
  }
  .window-controls {
    bottom:28%;
    left:12%;
    right:auto;
    gap:13px;
    padding:8px 12px;
    background:#2d463d4a
  }
  .window-controls .icon {
    width:15px;
    height:15px
  }
  .window-controls button span {
    font-size:10px
  }
  .window-controls button+button {
    padding-left:11px
  }
  .desk {
    left:11%;
    right:5%;
    top:77%;
    bottom:4%
  }
  .desk-whisper {
    font-size:9px;
    left:2%;
    top:0;
    letter-spacing:.08em
  }
  .desk-ticket {
    left:0;
    top:24%;
    width:170px;
    height:105px;
    padding:13px 15px;
    transform:rotate(-8deg)
  }
  .ticket-main {
    font-size:18px;
    margin-top:10px;
    margin-bottom:12px
  }
  .ticket-top .icon {
    width:12px;
    height:12px
  }
  .ticket-stamp {
    width:30px;
    height:27px;
    font-size:8px;
    right:12px
  }
  .desk-photo {
    left:auto;
    right:0;
    top:11%;
    width:140px;
    transform:rotate(9deg);
    padding:7px 7px 0
  }
  .desk-photo img {
    height:76px
  }
  .desk-photo>span:not(.photo-tape) {
    padding:9px 0;
    font-size:11px
  }
  .desk-map {
    width:auto;
    top:auto;
    bottom:0;
    right:2%;
    transform:none;
    filter:none
  }
  .desk-map>svg {
    display:none
  }
  .desk-map:hover {
    transform:translateY(-2px)
  }
  .desk-map>span {
    position:static;
    font-size:10px;
    padding:6px 10px;
    gap:4px;
    white-space:nowrap;
    border-radius:3px;
    background:#f4e5c9
  }
  .desk-map .icon {
    width:9px;
    height:9px
  }
  .tea-cup {
    display:none
  }
  .scroll-hint {
    left:7%;
    bottom:1.2%;
    font-size:8px;
    writing-mode:initial;
    gap:7px;
    color:#f5efd9
  }
  .scene-footnote {
    right:5%;
    bottom:1.25%;
    font-size:6px;
    max-width:45%;
    text-align:right
  }
  .journal-section {
    padding:62px 25px 30px
  }
  .journal-heading {
    display:block;
    margin-bottom:32px
  }
  .journal-heading h2 {
    font-size:31px;
    line-height:1.6
  }
  .journal-heading .eyebrow {
    font-size:7px;
    margin-bottom:17px
  }
  .journal-intro {
    margin-top:23px;
    font-size:13px;
    line-height:1.9
  }
  .journal-intro>span {
    font-size:9px;
    margin-top:10px
  }
  .journal-grid {
    display:flex;
    flex-direction:column;
    gap:36px;
    padding:0 8px
  }
  .journal-card {
    max-width:400px;
    align-self:center;
    width:100%;
    padding:10px 10px 20px
  }
  .journal-card:nth-child(2) {
    margin-top:0;
    transform:rotate(1.5deg)
  }
  .journal-card:nth-child(3) {
    margin-top:0
  }
  .journal-card img {
    height:188px
  }
  .journal-card-info {
    padding:20px 10px 0
  }
  .journal-card h3 {
    font-size:24px
  }
  .journal-card-short {
    font-size:13px!important
  }
  .journal-card-number {
    font-size:10px
  }
  .journal-card-link {
    font-size:11px;
    margin-top:22px
  }
  .mood-tag {
    font-size:10px
  }
  .journal-bottom {
    display:block;
    margin-top:37px;
    font-size:11px;
    line-height:1.8
  }
  .journal-bottom .text-button {
    margin-top:11px;
    font-size:12px
  }
  .letter-section {
    padding:31px 24px 55px
  }
  .letter-section h2 {
    font-size:25px;
    line-height:1.6
  }
  .letter-section>p:not(.eyebrow) {
    font-size:13px
  }
  .site-footer {
    padding:22px 24px;
    gap:12px
  }
  .site-footer>a {
    font-size:13px
  }
  .site-footer>a span {
    display:none
  }
  .site-footer>span {
    font-size:8px
  }
  .paper-dialog {
    width:calc(100vw - 22px);
    max-height:91svh;
    border-radius:11px
  }
  .dialog-padding {
    padding:48px 23px 30px
  }
  .dialog-heading {
    font-size:27px
  }
  .dialog-eyebrow {
    font-size:8px;
    letter-spacing:.15em
  }
  .dialog-subtitle {
    font-size:12px
  }
  .mood-filters {
    gap:6px;
    margin:23px 0
  }
  .mood-filter {
    font-size:11px;
    padding:6px 12px
  }
  .journey-ticket {
    gap:12px;
    padding:9px
  }
  .journey-ticket>img {
    width:93px;
    height:84px
  }
  .journey-ticket h3 {
    font-size:20px
  }
  .journey-ticket small {
    font-size:8px
  }
  .journey-ticket p {
    font-size:10px;
    line-height:1.7
  }
  .journey-ticket>.icon {
    width:15px;
    height:15px;
    margin-right:2px
  }
  .journey-ticket .ticket-current {
    font-size:7px;
    right:9px;
    top:7px
  }
  .story-cover {
    height:185px
  }
  .story-cover-label {
    left:21px;
    bottom:16px;
    font-size:9px
  }
  .story-body {
    padding:25px 23px 32px
  }
  .story-topline {
    align-items:flex-start
  }
  .story-meta {
    font-size:9px;
    max-width:53%;
    line-height:1.8
  }
  .story-save {
    font-size:10px;
    padding:7px 10px;
    gap:5px
  }
  .story-save .icon {
    width:13px;
    height:13px
  }
  .story-body .dialog-heading {
    font-size:27px;
    padding:0;
    line-height:1.7
  }
  .story-intro {
    font-size:15px;
    line-height:2.1;
    margin-top:17px
  }
  .story-route {
    font-size:9px;
    gap:6px;
    flex-wrap:wrap;
    justify-content:start
  }
  .story-route span {
    gap:3px
  }
  .story-route span:not(:last-child):after {
    margin-left:3px
  }
  .story-paragraph h3 {
    font-size:21px
  }
  .story-paragraph p {
    font-size:14px;
    line-height:2.2
  }
  .experience-grid {
    grid-template-columns:1fr;
    gap:9px
  }
  .experience-item {
    padding:13px 15px;
    display:grid;
    grid-template-columns:25px 1fr;
    column-gap:6px
  }
  .experience-item span {
    grid-row:1 / 3;
    padding-top:8px
  }
  .experience-item h4 {
    font-size:14px;
    margin:2px 0 4px
  }
  .experience-item p {
    font-size:12px
  }
  .story-bottom {
    flex-wrap:wrap
  }
  .story-stamp {
    font-size:8px;
    padding:7px 10px
  }
  .story-bottom .text-button {
    font-size:11px
  }
  .photo-flip {
    height:180px
  }
  .photo-front img {
    height:126px
  }
  .photo-back span {
    font-size:18px
  }
  .map-board {
    aspect-ratio:1.2
  }
  .map-pin {
    font-size:10px;
    padding:6px 8px;
    gap:5px
  }
  .map-caption {
    font-size:9px
  }
  .about-letter {
    padding:58px 25px 37px
  }
  .about-letter .dialog-heading {
    font-size:27px
  }
  .about-letter>p:not(.dialog-eyebrow) {
    font-size:14px;
    line-height:2.2
  }
  .toast {
    font-size:12px;
    padding:11px 18px;
    white-space:normal;
    width:max-content
  }
}
@media(max-width:365px) {
  .brand {
    width:113px
  }
  .brand-name {
    font-size:17px
  }
  .cabin-nav {
    gap:10px
  }
  .cabin-nav button {
    font-size:11px
  }
  .window-copy h1 {
    font-size:30px
  }
  .window-copy .eyebrow {
    font-size:6px
  }
  .desk-ticket {
    width:150px;
    padding:14px 12px
  }
  .ticket-main {
    font-size:16px
  }
  .desk-photo {
    width:125px
  }
  .desk-photo img {
    height:70px
  }
  .ticket-top {
    font-size:5px
  }
  .running-label {
    font-size:8px
  }
  .window-controls {
    gap:10px;
    padding:8px 10px
  }
  .window-controls button+button {
    padding-left:8px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }
  .landscape-track,.passing-poles,.near-meadow,.clouds,.steam {
    animation:none!important
  }
  .photo-flip-inner {
    transition:none!important
  }
}