:root {
  color-scheme: light;
  --ink: #173135;
  --paper: #f3f1e9;
  --red: #d44c39;
  --entry-time: 850ms;
  font-family: Arial, "Noto Sans", "Malgun Gothic", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.invitation { word-break: keep-all; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid #e9492c; outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.masthead {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: clamp(20px, 3vw, 42px);
  color: #fff;
  pointer-events: none;
}
.masthead > * { pointer-events: auto; }
.wordmark { display: inline-flex; gap: .33em; align-items: baseline; text-decoration: none; font-size: clamp(22px, 2.2vw, 31px); font-weight: 900; letter-spacing: -.075em; line-height: 1; text-shadow: 0 1px 12px #16303288; }
.wordmark span { font-size: .38em; letter-spacing: .02em; font-weight: 800; }
.language-switch { display: flex; gap: 10px; align-items: center; padding: 7px 11px; background: #183839b8; border: 1px solid #ffffff58; border-radius: 99px; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.language-switch a { text-decoration: none; opacity: .68; }
.language-switch a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

.world { position: relative; z-index: 1; height: 100dvh; min-height: 560px; overflow: hidden; background: #bfd5ce; isolation: isolate; }
.world-image-wrap { position: absolute; inset: 0 auto auto 0; width: 100%; height: max(100dvh, 560px); overflow: hidden; transform: translate3d(0,0,0); transition: transform var(--entry-time) cubic-bezier(.22,.74,.18,1); }
.world-image, .world-tint { position: absolute; inset: 0; width: 100%; height: 100%; }
.world-image { display: block; object-fit: cover; object-position: 50% 50%; color: transparent; font-size: 0; }
.world-tint { pointer-events: none; background: linear-gradient(180deg, rgba(12,37,43,.4), transparent 20%, transparent 52%, rgba(11,35,35,.17) 68%, rgba(8,32,32,.77)); }

.object-markers { position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.object-markers:not([data-positioned="true"]) { visibility: hidden; }
.object-marker { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; pointer-events: auto; clip-path: var(--object-shape); -webkit-clip-path: var(--object-shape); }
.object-marker::before { content: ""; position: absolute; inset: 0; background-image: var(--object-image); background-size: 100% 100%; background-repeat: no-repeat; filter: brightness(1.08); mask-image: radial-gradient(ellipse 18% 20% at var(--label-x) var(--label-y), #000, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 18% 20% at var(--label-x) var(--label-y), #000, transparent 75%); opacity: 0; transition: opacity 210ms ease; }
.object-marker:hover::before, .object-marker:focus-visible::before { opacity: 1; }
.object-marker[aria-pressed="true"]::before { opacity: .18; }
.object-marker[aria-pressed="true"]:hover::before, .object-marker[aria-pressed="true"]:focus-visible::before { opacity: 1; }
.marker-label { position: absolute; z-index: 2; left: clamp(calc(var(--view-left, 0px) + 65px), var(--label-x), calc(var(--view-right, 100%) - 65px)); top: var(--label-y); transform: translate(-50%,-50%); max-width: 20ch; color: #fff; font-size: clamp(13px, 1.25vw, 18px); font-weight: 800; line-height: 1.25; letter-spacing: -.015em; text-align: center; text-shadow: 0 2px 9px #092324, 0 1px 2px #092324; text-decoration: underline; text-decoration-color: #fff; text-decoration-thickness: 2px; text-underline-offset: 5px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 180ms ease; }
.object-marker:hover + .marker-label, .object-marker:focus-visible + .marker-label, .marker-label:hover { opacity: 1; pointer-events: auto; cursor: pointer; }
.object-marker:focus-visible { outline: none; }
.object-marker:focus-visible + .marker-label { text-decoration-thickness: 3px; }
.object-markers[data-projection="landscape"] .marker-food { --object-shape: polygon(0% 42%, 27% 41%, 40% 46%, 62% 43%, 78% 47%, 78% 76%, 70% 100%, 0% 100%); }
.object-markers[data-projection="landscape"] .marker-style { --object-shape: polygon(0% 0%, 53% 0%, 67% 17%, 69% 34%, 65% 44%, 51% 33%, 38% 29%, 25% 39%, 0% 39%); }
.object-markers[data-projection="landscape"] .marker-living { --object-shape: polygon(79% 1%, 100% 1%, 100% 75%, 84% 75%, 79% 54%, 78% 28%); }
.object-markers[data-projection="landscape"] .marker-food, .object-markers[data-projection="landscape"] .label-food { --label-x: 64%; --label-y: 67%; }
.object-markers[data-projection="landscape"] .marker-style, .object-markers[data-projection="landscape"] .label-style { --label-x: 44%; --label-y: 20%; }
.object-markers[data-projection="landscape"] .marker-living, .object-markers[data-projection="landscape"] .label-living { --label-x: 89%; --label-y: 34%; }
.object-markers[data-projection="portrait"] .marker-food { --object-shape: polygon(0% 43%, 56% 44%, 78% 46%, 80% 71%, 62% 100%, 0% 100%); }
.object-markers[data-projection="portrait"] .marker-style { --object-shape: polygon(0% 3%, 38% 8%, 73% 24%, 73% 39%, 66% 42%, 46% 35%, 20% 39%, 0% 39%); }
.object-markers[data-projection="portrait"] .marker-living { --object-shape: polygon(76% 13%, 100% 13%, 100% 52%, 82% 52%, 74% 42%, 74% 24%); }
.object-markers[data-projection="portrait"] .marker-food, .object-markers[data-projection="portrait"] .label-food { --label-x: 60%; --label-y: 50%; }
.object-markers[data-projection="portrait"] .marker-style, .object-markers[data-projection="portrait"] .label-style { --label-x: 33%; --label-y: 28%; }
.object-markers[data-projection="portrait"] .marker-living, .object-markers[data-projection="portrait"] .label-living { --label-x: 86%; --label-y: 33%; }

.world-intro { position: absolute; z-index: 3; left: clamp(22px, 5.2vw, 92px); bottom: clamp(59px, 8vh, 108px); width: min(650px, calc(100% - 44px)); color: white; text-shadow: 0 1px 14px #0828298a; transition: opacity 250ms ease, transform 450ms ease; }
.eyebrow { margin: 0 0 15px; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.world-intro h1 { max-width: 100%; margin: 0; font-size: clamp(33px, 4.2vw, 64px); line-height: 1.04; letter-spacing: -.055em; font-weight: 800; word-break: keep-all; text-wrap: balance; }
.invitation { max-width: 34ch; margin: 18px 0 25px; font-size: clamp(14px, 1.3vw, 17px); line-height: 1.55; font-weight: 600; }
.enter-button { display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 23px 8px 9px; color: #183638; background: #f4f0e6; border: 0; border-radius: 99px; cursor: pointer; font-size: 14px; font-weight: 800; box-shadow: 0 5px 25px #0b272638; transition: transform .2s ease, background .2s ease; text-shadow: none; }
.enter-button:hover { transform: translateY(-3px); background: white; }
.enter-icon { display: inline-grid; place-items: center; width: 39px; height: 39px; border-radius: 50%; color: white; background: var(--red); font-size: 22px; font-weight: 400; line-height: 1; }
.image-disclosure { position: absolute; z-index: 3; right: clamp(20px, 3vw, 42px); bottom: clamp(20px, 3vw, 42px); margin: 0; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em; text-shadow: 0 1px 8px #0c2626aa; }

body.is-entered .world { height: min(57dvh, 710px); min-height: 350px; }
body.is-entered[data-chapter="food"] .world-image-wrap { transform-origin: 55% 54%; transform: translate3d(-1.5%,-20%,0) scale(1.13); }
body.is-entered[data-chapter="style"] .world-image-wrap { transform-origin: 43% 23%; transform: translate3d(0,-2%,0) scale(1.16); }
body.is-entered[data-chapter="living"] .world-image-wrap { transform-origin: 84% 35%; transform: translate3d(-2%,-4%,0) scale(1.17); }
body.is-entered .world-intro { opacity: 0; transform: translateY(22px); pointer-events: none; }
body.is-entered .image-disclosure { bottom: 16px; }

.reading { position: relative; z-index: 2; min-height: 43dvh; background: var(--paper); opacity: 0; transform: translateY(48px); transition: opacity 560ms ease 100ms, transform 650ms cubic-bezier(.19,.72,.2,1) 70ms; }
.reading[hidden] { display: none !important; }
body.is-entered .reading { opacity: 1; transform: none; }
.reading::before { content: ""; position: absolute; left: 0; top: -30px; width: 100%; height: 31px; background: var(--paper); clip-path: polygon(0 100%, 0 75%, 42% 0, 100% 74%, 100% 100%); }
.reading-inner { width: min(1440px, 100%); margin: 0 auto; padding: clamp(30px, 4.5vw, 65px) clamp(22px, 5.2vw, 92px) 78px; }
.reading-topline { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 26px; }
.chapter-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: #546a67; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.marker-line { display: inline-block; flex: 0 0 29px; width: 29px; height: 2px; background: var(--red); }
.return-button { display: inline-flex; gap: 12px; align-items: center; padding: 5px 0; border: 0; color: var(--ink); background: transparent; cursor: pointer; font-size: 13px; font-weight: 800; white-space: nowrap; }
.return-button:hover { color: #af3829; }
.chapter-layout { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); column-gap: clamp(32px, 5.5vw, 90px); row-gap: 0; align-items: start; }
.chapter-opening { grid-column: 1; grid-row: 1; min-width: 0; }
.chapter-detail { grid-column: 1; grid-row: 2; min-width: 0; }
#reading-title { max-width: 15ch; margin: 0; font-size: clamp(34px, 4.4vw, 62px); line-height: 1.04; font-weight: 800; letter-spacing: -.06em; word-break: keep-all; text-wrap: balance; }
.chapter-intro { max-width: 43ch; margin: 22px 0 0; font-size: clamp(17px, 1.8vw, 23px); line-height: 1.42; font-weight: 650; word-break: keep-all; }
.chapter-observation { max-width: 58ch; margin: 21px 0 0; color: #354f4d; font-size: 16px; line-height: 1.65; word-break: keep-all; }
.chapter-observation:empty, .chapter-intro:empty, .chapter-note:empty, .chapter-steps:empty, .chapter-links:empty, .variant-controls:empty, #chapter-caption:empty, .chapter-image-message:empty { display: none; }
.chapter-steps { max-width: 61ch; margin: 28px 0 0; padding: 0 0 0 2.1em; list-style: decimal-leading-zero; }
.chapter-steps li { padding: 14px 0 14px 6px; border-top: 1px solid #c2cbc1; font-size: 15px; line-height: 1.6; }
.chapter-steps li:last-child { border-bottom: 1px solid #c2cbc1; }
.chapter-steps li::marker { color: var(--red); font-size: 12px; font-weight: 800; }
.chapter-note { max-width: 60ch; margin: 20px 0 0; color: #617572; font-size: 12px; line-height: 1.6; }
.chapter-links { display: flex; flex-wrap: wrap; gap: 14px 29px; margin-top: 25px; }
.chapter-links .story-link { display: inline-flex; align-items: center; gap: 16px; padding: 9px 0; border-bottom: 2px solid var(--red); font-size: 14px; font-weight: 800; text-decoration: none; }
.chapter-links .story-link:hover { color: #af3829; }
.chapter-visual { grid-column: 2; grid-row: 1 / span 2; min-width: 0; margin: 0; }
.chapter-image-frame { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #d5e1d7; }
#chapter-image { display: block; width: 100%; height: 100%; object-fit: cover; color: transparent; font-size: 0; }
body[data-chapter="style"] .chapter-image-frame { aspect-ratio: 3 / 4; max-height: 74dvh; background: #e9e7e1; }
body[data-chapter="style"] #chapter-image { object-fit: contain; }
#chapter-image:not([src]), #chapter-image[src=""] { opacity: 0; }
.chapter-image-message { position: absolute; inset: auto 0 0; padding: 14px 18px; margin: 0; color: var(--ink); background: #f3f1e9ec; font-size: 13px; font-weight: 700; }
#chapter-caption { margin-top: 11px; color: #5c716e; font-size: 11px; line-height: 1.6; }
.variant-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.variant-button { min-height: 40px; padding: 8px 13px; border: 1px solid #78918c; border-radius: 100px; color: var(--ink); background: transparent; cursor: pointer; font-size: 12px; font-weight: 800; }
.variant-button[aria-pressed="true"] { color: #fff; background: var(--ink); border-color: var(--ink); }
.variant-button:hover { border-color: var(--red); }
.reading-next { margin-top: clamp(55px, 8vw, 110px); }
.reading-next h3 { margin: 0 0 17px; font-size: clamp(18px, 2vw, 26px); font-weight: 800; letter-spacing: -.035em; }
.next-chapters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #a7b2a9; }
.next-chapter-button { position: relative; min-height: 105px; padding: 23px 50px 20px 0; border: 0; border-bottom: 1px solid #a7b2a9; color: var(--ink); background: transparent; cursor: pointer; text-align: left; font-size: clamp(18px, 2vw, 27px); line-height: 1.3; font-weight: 800; word-break: keep-all; }
.next-chapter-button:nth-child(odd) { margin-right: 26px; }
.next-chapter-button::after { content: "↗"; position: absolute; right: 4px; top: 24px; color: var(--red); font-size: 21px; font-weight: 400; }
.next-chapter-button:hover { color: #af3829; }
.next-chapter-label { display: inline-block; color: #617572; font-size: 12px; vertical-align: baseline; }
.next-chapter-title { display: block; margin-top: 8px; }

@media (max-aspect-ratio: 1/1) {
  .world-image { object-position: 64% 50%; }
  body.is-entered[data-chapter="food"] .world-image-wrap { transform-origin: 54% 56%; transform: translate3d(-1%,-18%,0) scale(1.12); }
  body.is-entered[data-chapter="style"] .world-image-wrap { transform-origin: 31% 28%; transform: translate3d(0,-2%,0) scale(1.12); }
  body.is-entered[data-chapter="living"] .world-image-wrap { transform-origin: 81% 33%; transform: translate3d(-2%,-3%,0) scale(1.13); }
}
@media (max-width: 760px) {
  .masthead { padding: 19px 21px; }
  .world { min-height: 0; }
  .world-image-wrap { height: 100dvh; }
  .world-tint { background: linear-gradient(180deg, rgba(12,37,43,.4), transparent 23%, transparent 47%, rgba(8,32,32,.12) 56%, rgba(8,32,32,.82)); }
  .world-intro { left: 22px; bottom: 68px; width: calc(100% - 44px); }
  .eyebrow { margin-bottom: 9px; font-size: 10px; }
  .world-intro h1 { font-size: clamp(30px, 9vw, 45px); }
  .invitation { max-width: 31ch; margin: 10px 0 15px; font-size: 13px; line-height: 1.45; }
  .enter-button { min-height: 50px; padding-right: 17px; font-size: 13px; }
  .enter-icon { width: 35px; height: 35px; font-size: 19px; }
  .image-disclosure { left: 22px; right: 22px; bottom: 16px; font-size: 10px; }
  body.is-entered .world { height: clamp(240px, 38dvh, 350px); min-height: 0; }
  .reading::before { display: none; }
  .reading-inner { padding: 33px 22px 56px; }
  .reading-topline { padding-bottom: 22px; }
  .chapter-layout { display: flex; flex-direction: column; gap: 0; }
  .chapter-visual { width: 100%; margin-top: 23px; }
  .chapter-detail { width: 100%; margin-top: 23px; }
  #reading-title { max-width: 100%; font-size: clamp(32px, 8.5vw, 44px); }
  .chapter-intro { margin-top: 14px; font-size: 17px; }
  .chapter-observation { margin-top: 0; font-size: 15px; }
  .reading-next { margin-top: 63px; }
}
@media (max-width: 390px) {
  .world-intro { bottom: 61px; }
  .world-intro h1 { font-size: clamp(29px, 9vw, 36px); }
  .reading-topline { align-items: flex-start; }
  .return-button { font-size: 11px; }
  .chapter-kicker { gap: 6px; font-size: 10px; }
  .marker-line { flex-basis: 18px; width: 18px; }
  .next-chapters { grid-template-columns: 1fr; }
  .next-chapter-button:nth-child(odd) { margin-right: 0; }
}
@media (hover: none), (pointer: coarse), (max-width: 900px) {
  .marker-label { opacity: 1; pointer-events: auto; cursor: pointer; font-size: clamp(11px, 2vw, 15px); }
}
@media (prefers-reduced-motion: reduce) {
  :root { --entry-time: 0ms; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
}