:root {
  --rule: rgba(52, 67, 74, .14);
  --ocean-blue: #72B8D6;
  --sky-blue: #CDEAF2;
  --moss-green: #9DBB8A;
  --ink-grey: #34434A;
  --paper-ivory: #F7F3EA;
  --climate-a: #CDEAF2;
  --climate-b: #72B8D6;
  --climate-c: #F7F3EA;
  --climate-text: #34434A;
  --climate-soft: rgba(52, 67, 74, .68);
  --climate-faint: rgba(52, 67, 74, .48);
  --climate-header:
    linear-gradient(90deg, #F7F3EA 0 18%, color-mix(in srgb, #CDEAF2 66%, #F7F3EA) 62%, color-mix(in srgb, #72B8D6 34%, #F7F3EA));
  --climate-field:
    radial-gradient(ellipse at 22% 42%, color-mix(in srgb, #CDEAF2 74%, #F7F3EA) 0 18%, transparent 62%),
    radial-gradient(ellipse at 82% 58%, color-mix(in srgb, #72B8D6 40%, #F7F3EA) 0 14%, transparent 58%),
    #F7F3EA;
}

body {
  min-height: 100vh;
  background: color-mix(in srgb, var(--moss-green) 6%, var(--paper-ivory));
}

body[data-climate="water"] {
  --climate-a: #CDEAF2;
  --climate-b: #72B8D6;
  --climate-c: #F7F3EA;
  --climate-text: #34434A;
  --climate-soft: rgba(52, 67, 74, .7);
  --climate-faint: rgba(52, 67, 74, .48);
  --climate-header:
    linear-gradient(90deg, #F7F3EA 0 18%, color-mix(in srgb, #CDEAF2 66%, #F7F3EA) 62%, color-mix(in srgb, #72B8D6 34%, #F7F3EA));
  --climate-field:
    radial-gradient(ellipse at 22% 42%, color-mix(in srgb, #CDEAF2 74%, #F7F3EA) 0 18%, transparent 62%),
    radial-gradient(ellipse at 82% 58%, color-mix(in srgb, #72B8D6 40%, #F7F3EA) 0 14%, transparent 58%),
    #F7F3EA;
}

body[data-climate="wind"] {
  --climate-a: #CDEAF2;
  --climate-b: #72B8D6;
  --climate-c: #F7F3EA;
  --climate-text: #34434A;
  --climate-soft: rgba(52, 67, 74, .72);
  --climate-faint: rgba(52, 67, 74, .5);
  --climate-header:
    linear-gradient(105deg, #F7F3EA 0 26%, color-mix(in srgb, #CDEAF2 56%, #F7F3EA) 62%, color-mix(in srgb, #34434A 10%, #CDEAF2));
  --climate-field:
    linear-gradient(154deg, transparent 0 20%, color-mix(in srgb, #CDEAF2 64%, #F7F3EA) 38%, transparent 57%),
    radial-gradient(ellipse at 82% 62%, color-mix(in srgb, #34434A 12%, #CDEAF2) 0 10%, transparent 54%),
    #F7F3EA;
}

body[data-climate="moss"] {
  --climate-a: #9DBB8A;
  --climate-b: #CDEAF2;
  --climate-c: #F7F3EA;
  --climate-text: #34434A;
  --climate-soft: rgba(52, 67, 74, .75);
  --climate-faint: rgba(52, 67, 74, .52);
  --climate-header:
    linear-gradient(90deg, #F7F3EA 0 18%, color-mix(in srgb, #9DBB8A 48%, #F7F3EA) 64%, color-mix(in srgb, #CDEAF2 30%, #F7F3EA));
  --climate-field:
    radial-gradient(ellipse at 18% 68%, color-mix(in srgb, #9DBB8A 58%, #F7F3EA) 0 16%, transparent 60%),
    radial-gradient(ellipse at 84% 30%, color-mix(in srgb, #CDEAF2 38%, #F7F3EA) 0 13%, transparent 55%),
    #F7F3EA;
}

body[data-climate="dusk"] {
  --climate-a: #CDEAF2;
  --climate-b: #34434A;
  --climate-c: #F7F3EA;
  --climate-text: #34434A;
  --climate-soft: rgba(52, 67, 74, .7);
  --climate-faint: rgba(52, 67, 74, .48);
  --climate-header:
    linear-gradient(90deg, #F7F3EA 0 18%, color-mix(in srgb, #9DBB8A 22%, #F7F3EA) 62%, color-mix(in srgb, #34434A 16%, #F7F3EA));
  --climate-field:
    radial-gradient(ellipse at 78% 34%, color-mix(in srgb, #9DBB8A 27%, #F7F3EA) 0 15%, transparent 58%),
    radial-gradient(ellipse at 18% 76%, color-mix(in srgb, #34434A 18%, #F7F3EA) 0 12%, transparent 54%),
    linear-gradient(150deg, #F7F3EA 0 52%, color-mix(in srgb, #CDEAF2 22%, #F7F3EA));
}

button { font: inherit; }

.island-head {
  min-height: 68px;
  padding: 17px clamp(22px, 4vw, 62px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  color: color-mix(in srgb, var(--climate-text) 72%, transparent);
  background: var(--climate-header);
  font-size: .68rem;
  letter-spacing: .1em;
  transition: background 1.2s ease, color .8s ease;
}

.island-head a { text-underline-offset: .35rem; }
.island-head > a:first-child { color: var(--ink-grey); }
.island-head a:hover { background: color-mix(in srgb, var(--climate-c) 58%, transparent); }
.island-head p { margin: 0; display: flex; align-items: baseline; gap: .75rem; }
.island-head strong { color: var(--climate-text); font: 700 .88rem var(--font-title); letter-spacing: .12em; }
.island-head span { color: color-mix(in srgb, var(--climate-text) 66%, transparent); font: italic 500 .61rem var(--font-editorial); }

.island-shell {
  min-height: calc(100vh - 68px);
  display: grid;
  grid-template-columns: clamp(245px, 17vw, 300px) minmax(0, 1fr);
}

.time-shore {
  position: relative;
  z-index: 2;
  padding: clamp(42px, 5vw, 72px) clamp(28px, 3vw, 48px);
  display: flex;
  flex-direction: column;
  background: rgba(247, 243, 234, .93);
}

.shore-intro > p {
  margin: 0 0 1rem;
  color: var(--ocean);
  font: italic 500 .58rem var(--font-editorial);
  letter-spacing: .16em;
}

.shore-intro h1 {
  margin: 0;
  font: 700 clamp(1.35rem, 2vw, 1.8rem)/1.55 var(--font-title);
  letter-spacing: .08em;
}

.time-shore nav { margin-top: clamp(44px, 7vh, 72px); }
#poem-navigation > p, #reader-status { color: var(--climate-soft); font-size: .76rem; }
.timeline-year + .timeline-year { margin-top: 2.2rem; }
.timeline-year__label { margin: 0 0 .85rem; color: var(--ink); font: italic 500 1.55rem var(--font-editorial); }
.timeline-year__branches { padding-left: 1rem; }
.timeline-season + .timeline-season { margin-top: 1.1rem; }
.timeline-season__label { margin: 0 0 .35rem; color: var(--ocean); font: 700 .65rem var(--font-title); letter-spacing: .2em; }
.timeline-season__list { margin: 0; padding: 0; list-style: none; }
.poem-choice {
  width: 100%;
  padding: .32rem 0;
  display: grid;
  grid-template-columns: .8rem 1fr;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  text-align: left;
  cursor: pointer;
  transform-origin: left;
  transition: color .3s var(--ease-out), opacity .3s var(--ease-out), transform .3s var(--ease-out);
}

.poem-choice__mark { color: transparent; }
.poem-choice__title { font: 500 .75rem/1.55 var(--font-title); }
.timeline-year__branches:has(.poem-choice:hover) .poem-choice:not(:hover) { opacity: .28; }
.poem-choice:hover, .poem-choice:focus-visible { color: var(--ink); transform: translateX(4px); }
.poem-choice.is-active { color: var(--ink); }
.poem-choice.is-active .poem-choice__mark { color: var(--ocean); }
.poem-choice.is-active .poem-choice__title { font-weight: 700; }

.shore-foot {
  margin: auto 0 0;
  padding-top: 3rem;
  color: var(--ink-faint);
  font: italic 500 .65rem/1.7 var(--font-editorial);
  letter-spacing: .12em;
}

.climate-stage {
  position: relative;
  min-width: 0;
  min-height: calc(100vh - 68px);
  overflow: hidden;
  color: var(--climate-text);
  background: var(--climate-field);
  transition: background 1.2s ease, color .8s ease;
}

.island-weather { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.weather-island { position: absolute; width: clamp(250px, 29vw, 480px); right: -3vw; top: -2vw; opacity: .09; filter: grayscale(1); }
.weather-wave { position: absolute; width: max(900px, 75vw); max-width: none; opacity: .085; }
.weather-wave--one { left: -13vw; bottom: -42px; animation: tide 34s ease-in-out infinite alternate; }
.weather-wave--two { right: -20vw; bottom: 10vh; opacity: .05; animation: tide 44s ease-in-out infinite alternate-reverse; }
.weather-fish-route {
  position: absolute;
  display: block;
  right: -7vw;
  bottom: -8vh;
  width: 56px;
  opacity: 0;
  animation: fish-route 34s cubic-bezier(.45, .05, .35, 1) infinite;
}
.weather-fish {
  width: 100%;
  opacity: .18;
  transform-origin: 32% 55%;
  animation: fish-float 3.8s ease-in-out infinite alternate;
}
#reader-status { position: relative; z-index: 1; padding: 3rem clamp(34px, 6vw, 100px); }

.discovery {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 68px);
  padding: clamp(54px, 7vw, 108px) clamp(38px, 7vw, 118px) clamp(40px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.discovery[hidden] { display: none; }
.encounter {
  display: grid;
  grid-template-columns: minmax(410px, 1.05fr) minmax(370px, .95fr);
  gap: clamp(58px, 8vw, 138px);
  align-items: center;
}

.poem-air { min-width: 0; }
.encounter-mark {
  margin: 0 0 clamp(48px, 8vh, 84px);
  color: var(--climate-faint);
  font: italic 500 .62rem var(--font-editorial);
  letter-spacing: .16em;
}

.verse {
  max-width: 38rem;
  font: 600 clamp(1.14rem, 1.55vw, 1.38rem)/2.55 var(--font-title);
  letter-spacing: .075em;
  text-shadow: 0 1px 8px color-mix(in srgb, var(--climate-c) 42%, transparent);
}

.verse span { display: block; }
.verse .poem-line--space { line-height: 1.15; }

.painting { margin: 0; }
.painting-original { display: block; color: inherit; text-decoration: none; cursor: zoom-in; }
.painting-original:focus-visible { outline: 2px solid var(--climate-text); outline-offset: 8px; border-radius: 2px; }
.painting-original__hint { display: block; margin-top: .85rem; color: var(--climate-soft); text-align: right; font-size: .65rem; letter-spacing: .08em; }
.painting-original:hover .painting-original__hint { text-decoration: underline; text-underline-offset: 4px; }
.painting img {
  width: auto;
  max-width: 100%;
  max-height: 68vh;
  margin: auto;
  box-shadow: 0 26px 60px rgba(28, 47, 54, .2);
}

.painting figcaption {
  max-width: 58em;
  margin: 1rem auto 0;
  color: var(--climate-faint);
  font-size: .62rem;
  line-height: 1.7;
}

.after-reading {
  margin-top: clamp(64px, 10vh, 112px);
  padding-top: 1.1rem;
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(220px, 1.1fr) auto;
  gap: clamp(28px, 5vw, 76px);
  align-items: start;
  border-top: 1px solid color-mix(in srgb, var(--climate-text) 18%, transparent);
}

.after-reading h2 { margin: 0 0 .45rem; font: 600 clamp(.95rem, 1.2vw, 1.1rem)/1.55 var(--font-title); }
.after-reading header p { margin: 0; color: var(--climate-faint); font-size: .64rem; letter-spacing: .1em; }
.poem-note { margin: 0; color: var(--climate-soft); font-size: .68rem; line-height: 1.8; }
.poem-note[hidden] { display: none; }
.island-signature { margin: 0; color: var(--climate-faint); font-size: .6rem; letter-spacing: .12em; white-space: nowrap; }

@keyframes tide { to { transform: translate3d(10vw, -9px, 0); } }
@keyframes fish-route {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-12deg); }
  8% { opacity: 1; }
  30% { transform: translate3d(-8vw, -8vh, 0) rotate(-16deg); }
  56% { transform: translate3d(-19vw, -13vh, 0) rotate(-10deg); }
  78% { opacity: 1; transform: translate3d(-31vw, -23vh, 0) rotate(-17deg); }
  100% { opacity: 0; transform: translate3d(-44vw, -31vh, 0) rotate(-13deg); }
}

@keyframes fish-float {
  0% { transform: translate3d(0, 3px, 0) rotate(-2deg) skewY(-1deg); }
  52% { transform: translate3d(0, -4px, 0) rotate(2deg) skewY(1.5deg); }
  100% { transform: translate3d(0, 1px, 0) rotate(-1deg) skewY(-.5deg); }
}

@media (max-width: 1050px) {
  .encounter { grid-template-columns: minmax(330px, 1fr) minmax(310px, .9fr); gap: clamp(40px, 5vw, 70px); }
  .discovery { padding-inline: clamp(34px, 5vw, 70px); }
}

@media (max-width: 880px) {
  .island-shell { grid-template-columns: 1fr; }
  .time-shore { padding: 34px var(--page-gutter); }
  .time-shore nav { margin-top: 2.2rem; }
  #poem-navigation { display: flex; gap: 2.7rem; overflow-x: auto; padding-bottom: .7rem; }
  .timeline-year { min-width: min(74vw, 380px); }
  .timeline-year + .timeline-year { margin-top: 0; }
  .shore-foot { display: none; }
  .climate-stage { min-height: auto; }
}

@media (max-width: 700px) {
  .island-head p span { display: none; }
  .encounter { grid-template-columns: 1fr; }
  .painting { margin-top: 1rem; }
  .painting img { max-height: 72vh; }
  .after-reading { grid-template-columns: 1fr; gap: 1.4rem; }
  .island-signature { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .weather-wave, .weather-fish-route, .weather-fish { animation: none; }
  .weather-fish-route { right: 7vw; bottom: 8vh; opacity: 1; }
  .climate-stage, .island-head, .poem-choice { transition: none; }
}

/* The catalogue must not determine the height of a short poem. */
.encounter { grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,4vw,70px); }
.painting-original { position:relative; }
.painting.is-loading .painting-original { min-height:180px; }
.painting.is-loading img { opacity:0; }
#image-status { position:absolute; inset:0; display:grid; place-items:center; padding:24px; color:var(--climate-soft); font-size:.72rem; text-align:center; }
#image-status[hidden] { display:none; }
@media (min-width:881px) {
  .island-shell { height:calc(100dvh - 68px); min-height:0; overflow:hidden; }
  .time-shore { min-height:0; padding-block:clamp(20px,3vh,40px); }
  .shore-intro,.shore-foot { flex-shrink:0; }
  .time-shore nav { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#b7c8c6 transparent; margin-top:28px; padding-right:8px; }
  .shore-foot { margin:0; padding-top:18px; }
  .climate-stage { min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
  .discovery { min-height:100%; padding-block:clamp(32px,5vh,72px); }
  .after-reading { grid-template-columns:minmax(0,1fr) minmax(0,1fr); row-gap:18px; }
  .island-signature { grid-column:1 / -1; }
}
@media (max-width:880px) {
  .time-shore nav { max-height:32vh; overflow:auto; }
}
@media (max-width:700px) {
  .encounter { grid-template-columns:1fr; }
}