:root {
  --cream: #f3e8cf;
  --cream-2: #f6efdf;
  --ink: #2a4a6b;
  --ink-soft: #4a7a9b;
  --text: #3d5a70;
  --muted: #5a6b80;
  --deep: #2e3b4e;
  --accent: #5ba4c9;
  --cta: #2e4a6b;
  --sky: #bae6fd;
  --sun: #fde68a;
  --sea: #7dd3fc;
  --rose: #fecdd3;
  --radius: 14px;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overscroll-behavior-y: none; }
body { overscroll-behavior-y: none; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
main { flex: 1; }

/* Wave backgrounds */
.page-bg {
  will-change: transform; transform: translateZ(0);
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--cream) center / cover no-repeat;
}
/* Two layers: the paper (.page-bg itself) and the brush waves on top (::before, transparent picture),
   so each time of day can colour the paper and the water separately */
.page-bg::before { content: ""; position: absolute; inset: 0; will-change: transform; transform: translateZ(0); background: var(--wave) center / cover no-repeat; transition: filter .8s ease; }
.bg-home .page-bg { --wave: url("img/wave-home.webp"); }
.bg-work .page-bg { --wave: url("img/wave-work.webp"); }
.bg-contact .page-bg { --wave: url("img/wave-contact.webp"); }

/* Decorative blobs */
.blob {
  will-change: transform; backface-visibility: hidden;
  position: fixed;
  z-index: -1;
  width: 80px;
  height: 59px;
  border-radius: 58% 42% 55% 45% / 50% 60% 40% 50%;
  opacity: .75;
  animation: float 7s ease-in-out infinite;
}
.blob:nth-of-type(1) { background: var(--sky);  top: 18%; left: 5%; }
.blob:nth-of-type(2) { background: var(--sun);  top: 30%; right: 10%; animation-delay: -2s; }
.blob:nth-of-type(3) { background: var(--sea);  top: 62%; left: 12%; animation-delay: -4s; }
.blob:nth-of-type(4) { background: var(--rose); top: 80%; right: 18%; animation-delay: -1s; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-14px) rotate(6deg); }
}

/* Sticky nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nav a {
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  text-decoration: none;
  padding: 6px 20px;
  border-radius: 9999px;
  background: #fff;
  transition: transform .15s, background .15s, color .15s;
}
.nav a:hover { transform: translateY(-2px); }
.nav a[aria-current="page"] { background: var(--ink); color: #fff; }

.wrap { max-width: 1000px; margin: 0 auto; padding: 0 16px; }

/* Home */
.hero { text-align: center; padding: 80px 0 40px; }
.hero h1 {
  font-weight: 900;
  font-size: clamp(32px, 5vw, 48px);
  color: var(--ink);
  margin: 0;
}
.hero p {
  font-weight: 600;
  font-size: 18px;
  color: var(--ink-soft);
  margin: 8px 0 0;
}

.about {
  display: grid;
  grid-template-columns: 192px 1fr;
  gap: 32px;
  align-items: start;
  padding: 40px 0;
  scroll-margin-top: 80px;
}
.about img {
  width: 192px;
  height: 192px;
  object-fit: cover;
  object-position: 50% 25%;
  border-radius: 50%;
  border: 6px solid #fff;
  box-shadow: 0 10px 26px rgba(46, 74, 107, .18);
  margin-top: -14px;
}
.about h2 { font-size: 27px; color: var(--ink); margin: 0 0 12px; }
.about p { font-size: 20px; line-height: 1.55; margin: 0 0 14px; }
.about p.enjoy { font-weight: 700; color: var(--ink); margin-bottom: 18px; }

.cta-row { text-align: center; padding: 40px 0; }
.cta {
  display: inline-block;
  font-family: Georgia, serif;
  font-size: clamp(22px, 3vw, 32px);
  color: #fff;
  background: var(--cta);
  text-decoration: none;
  padding: 22px 34px;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(46, 74, 107, .3);
  transition: transform .15s, box-shadow .15s;
}
.cta:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(46, 74, 107, .38); }

.play { text-align: center; padding: 60px 0 20px; }
.play h2 { font-size: 27px; font-weight: 400; color: var(--ink); margin: 0; }
.play p { font-size: 18px; color: var(--ink-soft); margin: 12px 0 24px; }
.pill {
  display: inline-block;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  background: var(--accent);
  text-decoration: none;
  padding: 14px 32px;
  border-radius: 9999px;
  box-shadow: 0 4px 0 #fff, 0 6px 14px rgba(46, 74, 107, .18);
  transition: transform .15s;
}
.pill:hover { transform: translateY(-2px); }

/* Page headings (work / contact) */
.page-head { text-align: center; padding: 72px 0 40px; }
.page-head h1 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: clamp(34px, 5vw, 48px);
  color: var(--deep);
  margin: 0;
}
.page-head p {
  font-family: Georgia, serif;
  font-size: 20px;
  color: var(--muted);
  margin: 14px auto 0;
  max-width: 640px;
}

/* Work filters */
.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: -12px 0 32px;
}
.filters button {
  font: 700 16px var(--serif);
  color: var(--ink);
  background: #fff;
  border: 0;
  border-radius: 9999px;
  padding: 8px 20px;
  cursor: pointer;
  transition: transform .15s, background .15s, color .15s;
}
.filters button:hover { transform: translateY(-2px); }
.filters button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.card[hidden] { display: none; }

/* Work grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px;
  padding-bottom: 40px;
}
.card {
  display: block;
  background: #fff;
  border: 1px solid var(--deep);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--deep);
  font-family: var(--sans);
  transition: transform .18s, box-shadow .18s;
}
a.card:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 6px 8px 0 var(--deep); }
.thumb {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  font-size: 30px;
  position: relative;
  overflow: hidden;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Coming soon: a small building site (drawn in site.js) */
.thumb .site { width: 100%; height: 100%; display: block; }
.site-hook { transform-box: view-box; transform-origin: 272px 50px; animation: hook-swing 4.5s ease-in-out infinite; }
@keyframes hook-swing { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
.lift-arms { transform-box: view-box; transform-origin: 163px 240px; animation: lift-arms 5s ease-in-out infinite alternate; }
.lift-top { animation: lift-top 5s ease-in-out infinite alternate; }
@keyframes lift-arms { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
@keyframes lift-top { from { transform: translateY(33px); } to { transform: translateY(0); } }
.site-bucket { transform-box: fill-box; transform-origin: 50% 100%; animation: bucket 3s ease-in-out infinite; }
@keyframes bucket { 0%, 80%, 100% { transform: rotate(0); } 88% { transform: rotate(-6deg); } 94% { transform: rotate(4deg); } }
a.card:hover .site-hook, .card:hover .site-hook { animation-duration: 1.6s; }
@media (prefers-reduced-motion: reduce) { .site-hook, .lift-arms, .lift-top, .site-bucket { animation: none; } }
.card-body { padding: 12px 15px 14px; }
.card-body strong { display: block; font-size: 15px; }
.card-body em { display: block; margin-top: 4px; font-style: normal; font-weight: 700; font-size: 12px; letter-spacing: .02em; color: var(--ink-soft); }
.card-body span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.card.placeholder {
  min-height: 260px;
  background: rgba(255, 255, 255, .35);
  border: 2px dashed rgba(46, 59, 78, .3);
}

/* Project page */
.back {
  display: inline-block;
  margin-top: 32px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.back:hover { text-decoration: underline; }
.slides { display: grid; gap: 20px; padding-bottom: 40px; }
.slides img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(46, 74, 107, .15);
  background: #fff;
}
.project-wide { max-width: 1280px; }

/* Contact */
.contact-list { display: grid; gap: 16px; max-width: 562px; margin: 0 auto; padding-bottom: 40px; }
.contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--deep);
  border-radius: var(--radius);
  padding: 22px 21px;
  text-decoration: none;
  color: var(--deep);
  font-family: var(--sans);
  transition: transform .18s, box-shadow .18s;
}
a.contact-item:hover { transform: translateY(-3px); box-shadow: 5px 6px 0 var(--deep); }
.badge {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 19px;
}
.contact-item small { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.contact-item b { font-weight: 500; font-size: 17px; word-break: break-word; }

/* Footer */
footer { text-align: center; padding: 24px 16px 40px; }
footer img { width: 140px; margin: 0 auto; }
footer p { font-size: 13px; color: var(--muted); margin: 6px 0 0; }

@media (max-width: 640px) {
  .nav { gap: 6px; }
  .nav a { font-size: 15px; padding: 6px 14px; }
  .hero { padding-top: 48px; }
  .about { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .about img { width: 160px; height: 160px; margin-top: 0; }
  .about p { font-size: 17px; }
  .blob { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
  * { transition: none !important; }
}

/* Language switch (in the nav): EN / TR with a crayon ring around the chosen one */
.nav .nav-links { display: contents; }
.nav .lang {
  position: relative;
  display: inline-flex; align-items: center; gap: 2px;
  margin-left: 8px; padding: 4px 10px;
  background: #fff; border-radius: 9999px;
}
.nav .lang i { font-style: normal; color: var(--muted); opacity: .5; font-weight: 400; }
.nav .lang button {
  position: relative; z-index: 1;
  font: 700 14px var(--serif); color: var(--ink);
  background: none; border: 0; padding: 4px 7px; cursor: pointer;
  opacity: .45; transition: opacity .25s, transform .2s;
}
.nav .lang button:hover { opacity: .85; transform: translateY(-1px); }
.nav .lang button[aria-pressed="true"] { opacity: 1; }
.nav .lang button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.lang-ring {
  position: absolute; top: 1px; height: calc(100% - 2px); left: 0; width: 40px; overflow: visible; pointer-events: none;
  transition: left .35s ease, width .35s ease;
}
.lang-ring path { fill: none; stroke: #f0a23a; stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 0; }
.lang-ring.still { transition: none; }
.lang-ring.draw path { animation: ring-draw .5s ease-out .1s backwards; }
@keyframes ring-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@media (max-width: 640px) {
  .nav { flex-wrap: wrap; }
  .nav .lang { margin-left: 0; }
}

/* ---------- About: from the shore to the open sea ---------- */
.bg-about {
  --shallow: #d6eef8;
  --mid: #8fcbe6;
  --deep-sea: #2a4a6b;
  --abyss: #16293d;
  /* top half sand (behind the nav), bottom half deep sea (behind the footer) */
  background: linear-gradient(var(--cream) 0 50%, var(--abyss) 50% 100%);
}
.sand { background: var(--cream); }
.sea {
  margin-top: -1px;
  background: linear-gradient(
    to bottom,
    var(--shallow) 0,
    var(--mid) 30%,
    var(--accent) 50%,
    var(--deep-sea) 72%,
    var(--abyss) 100%
  );
}
/* Trial: little dry-brush strokes on the water, in the same crayon spirit as the sun.
   To remove, delete this rule and assets/img/sea-brush.svg. */
.sea { position: relative; }
.sea::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(img/sea-brush.svg) repeat;
  background-size: 640px 420px;
  pointer-events: none;
  z-index: 0;
  opacity: .75;
  /* strongest near the shore, gone by the deep water where the certificates are */
  -webkit-mask-image: linear-gradient(#000 0, rgba(0,0,0,.6) 25%, transparent 55%);
          mask-image: linear-gradient(#000 0, rgba(0,0,0,.6) 25%, transparent 55%);
}
/* A few small bubbles drifting up under the water */
.bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bubbles span {
  position: absolute; width: var(--s); height: var(--s); border-radius: 50%;
  border: 1px solid rgba(255,255,255,.55); background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.5), rgba(255,255,255,.08) 60%);
  animation: bubble 10s linear infinite;
}
@keyframes bubble {
  0% { transform: translate(0, 0); opacity: 0; }
  15% { opacity: .9; }
  50% { transform: translate(6px, -90px); }
  85% { opacity: .7; }
  100% { transform: translate(-4px, -180px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .bubbles span { animation: none; opacity: .6; } }
/* Layers: section backgrounds < sun < content */
.bg-about .shore, .bg-about .shoreline, .voyage .wrap, .aboard, .shells, .bottle { position: relative; z-index: 2; }

.sun {
  position: fixed;
  top: 84px;
  right: 6vw;
  width: clamp(90px, 13vw, 170px);
  z-index: 1;
  pointer-events: none;
  transition: opacity .2s linear;
  will-change: transform;
}

.eyebrow {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.shore { padding-top: 96px; padding-bottom: 40px; max-width: 820px; }
.shore h1 {
  font-weight: 900;
  font-size: clamp(40px, 7vw, 76px);
  line-height: 1.02;
  color: var(--ink);
  margin: 0;
  max-width: 12ch;
}
.lede { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.55; margin: 24px 0 0; max-width: 34em; }
.intro { max-width: 36em; }
.intro p { font-size: clamp(18px, 1.9vw, 21px); line-height: 1.6; margin: 18px 0 0; }
.intro p:first-child { margin-top: 24px; }
.scroll-hint {
  display: inline-block;
  margin-top: 36px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(6px); } }

.shoreline { display: block; width: 100%; height: 90px; margin-top: 20px; }
.shoreline { overflow: hidden; }
.shoreline .w1 path:first-child { fill: var(--sky); opacity: .7; }
.shoreline .w2 path:first-child { fill: var(--shallow); }
.shoreline .w1 { animation: drift 9s ease-in-out infinite alternate; }
.shoreline .w2 { animation: drift 7s ease-in-out infinite alternate-reverse; }
/* Foam where the water meets the sand */
.shoreline .foam { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 60 9 22 6 90 12; opacity: .9; vector-effect: non-scaling-stroke; }
.shoreline .foam.dots { filter: none; stroke-width: 3; stroke-dasharray: 1 9 1 15 1 6; opacity: .75; }
.shoreline .foam.haze { stroke-width: 16; stroke-dasharray: none; opacity: .45; }
.shoreline .foam.soft { stroke-width: 3; opacity: .55; stroke-dasharray: 40 14 18 10; }
@keyframes drift { to { transform: translateX(-40px); } }

.section-title {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 12px;
}
.section-sub { margin: 0 0 32px; font-size: 18px; }

/* Voyage route */
.voyage { padding: 40px 0 80px; }
.route {
  position: relative;
  margin-top: 48px;
  display: grid;
  gap: 56px;
}
.route-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.route-line path {
  fill: none;
  stroke: rgba(42, 74, 107, .55);
  stroke-width: 3;
  stroke-dasharray: 10 10;
  stroke-linecap: round;
}
/* The boat rides down the route with position: sticky, so it moves with the page natively:
   it starts at the first stop, stays in the middle of the screen and stops at the last one */
.boat-track { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; z-index: 3; pointer-events: none; }
.boat {
  position: sticky;
  top: 50vh;
  display: block;
  width: 46px;
  max-width: none;
  height: auto;
  margin-left: -23px;
  margin-top: -36px;
  transform-origin: 50% 90%;
  filter: drop-shadow(0 4px 6px rgba(22, 41, 61, .3));
  animation: rock 3s ease-in-out infinite;
}
@keyframes rock { 50% { rotate: -7deg; } }

.stop { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.stop-card {
  grid-column: 1;
  margin-right: 48px;
  background: #fff;
  border: 1px solid var(--deep);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: 6px 7px 0 rgba(42, 74, 107, .85);
}
.stop:nth-child(odd) .stop-card { grid-column: 2; margin: 0 0 0 48px; }
.buoy {
  position: absolute;
  left: 50%;
  top: 26px;
  width: 26px;
  height: 26px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #fff;
  border: 4px solid #fff;
  box-shadow: 0 0 0 3px var(--ink), 0 6px 12px rgba(22, 41, 61, .25);
  z-index: 2;
  transition: background-color .12s ease, box-shadow .2s ease, transform .2s ease;
}
.buoy.lit { background: var(--sun); transform: translateX(-50%) scale(1.12); box-shadow: 0 0 0 3px var(--ink), 0 0 18px 5px rgba(253, 230, 138, .75); }
.year {
  display: inline-block;
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  background: var(--ink);
  border-radius: 9999px;
  padding: 3px 12px;
}
.stop-card h3 { margin: 0 0 4px; font-size: 26px; color: var(--ink); }
.stop-card .place { margin: 0 0 10px; font-size: 14px; color: var(--muted); font-family: var(--sans); }
.stop-card p:last-child { margin-bottom: 0; }
.stop-card p { margin: 0 0 10px; font-size: 17px; line-height: 1.55; }
.catches { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.catches li { border-top: 1px dashed rgba(42, 74, 107, .3); padding-top: 12px; font-size: 15px; line-height: 1.5; }
.catches b { display: block; color: var(--ink); }
.see { display: inline-block; margin-top: 6px; font-weight: 700; color: var(--accent); text-decoration: none; }
.see:hover { text-decoration: underline; }

/* On board */
.aboard { padding: 40px 16px 80px; }
.aboard .section-title, .aboard .section-sub, .shells .section-title { color: #fff; }
.aboard .section-sub { color: #e8f6fd; }
.crates { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.crate {
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: var(--radius);
  padding: 20px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.crate h3 { margin: 0 0 14px; font-size: 18px; color: #fff; }
.floats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.floats li {
  background: #fff;
  color: var(--ink);
  font: 500 14px var(--sans);
  padding: 6px 12px;
  border-radius: 9999px;
  animation: float-tag 5s ease-in-out infinite;
}
.floats li:nth-child(2n) { animation-delay: -1.5s; }
.floats li:nth-child(3n) { animation-delay: -3s; }
@keyframes float-tag { 50% { transform: translateY(-4px); } }

/* Shells */
.shells { padding: 20px 16px 80px; }
.shell-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.shell-list li {
  position: relative;
  padding: 14px 18px 14px 54px;
  color: #e8f6fd;
  font: 400 16px/1.5 var(--sans);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.shell-list li::before {
  content: "🐚";
  position: absolute;
  left: 14px;
  top: 12px;
  font-size: 22px;
}

/* Message in a bottle */
.bottle { text-align: center; padding: 40px 16px 60px; color: #e8f6fd; }
.bottle-art { width: 110px; height: 110px; margin: 0 auto 8px; animation: bob 3.2s ease-in-out infinite; }
.bottle h2 { font-size: clamp(30px, 4vw, 44px); color: #fff; margin: 0; }
.bottle p { font-size: 19px; margin: 12px auto 28px; max-width: 30em; }
.bottle-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.pill.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.bg-about footer p { color: #b8d3e6; }
.bg-about footer img { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .6)); }

/* Scroll reveal */
.rise { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
.rise.in { opacity: 1; transform: none; }

/* Home: link to the story */
.story-link { display: inline-block; margin-top: 14px; font-weight: 700; color: var(--ink); }

@media (max-width: 760px) {
  .boat-track, .buoy { left: 18px; }
  .boat { width: 36px; margin-left: -18px; margin-top: -28px; }
  .stop { grid-template-columns: 1fr; }
  .stop-card, .stop:nth-child(odd) .stop-card { grid-column: 1; margin: 0 0 0 46px; }
  .sun { position: absolute; top: 130px; right: 12px; width: 84px; }
  .shore { padding-top: 56px; }
  .shore h1 { max-width: 9ch; }
}

@media (prefers-reduced-motion: reduce) {
  .shoreline path, .floats li, .boat, .scroll-hint, .bottle-art { animation: none; }
}

/* ---------- Time of day: sunrise, noon (the default look), sunset, night ----------
   Set on <html data-time="dawn|noon|dusk|night"> by the switch in the menu. */
/* colour fades between modes, without cancelling each element's own movement */
body, .sand { transition: background-color .6s ease, color .6s ease; }
.nav a { transition: transform .15s, background-color .6s ease, color .6s ease; }
.card { transition: transform .18s, box-shadow .18s, background-color .6s ease, color .6s ease; }
.stop-card { transition: background-color .6s ease, color .6s ease; }
.stop-card.rise, .rise .stop-card { transition: opacity .6s ease, transform .6s ease, background-color .6s ease, color .6s ease; }
.page-bg::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; pointer-events: none; }

/* Sunrise: peach light, lilac ink */
html[data-time="dawn"] {
  --cream: #fbe4d8; --cream-2: #fdeee6; --ink: #5b4170; --ink-soft: #876493; --text: #5e4a66; --muted: #7a6580;
  --deep: #4a3658; --accent: #d9826d; --cta: #5b4170; --sky: #f9cfd9; --sun: #ffd3a3; --sea: #c9b8f0; --rose: #ffc1c9;
}
html[data-time="dawn"] .page-bg { background: linear-gradient(180deg, #fbd8d6, #fde6d4 55%, #f5e1ee); }
html[data-time="dawn"] .page-bg::before { filter: hue-rotate(16deg) saturate(.8) brightness(1.06); }
html[data-time="dawn"] .bg-about { --shallow: #f6dbe4; --mid: #d6bfe6; --deep-sea: #4f4377; --abyss: #2a2346; }
html[data-time="dawn"] .bg-about .sea { background: linear-gradient(var(--shallow), var(--mid) 30%, #9c8fcf 50%, var(--deep-sea) 72%, var(--abyss)); }
html[data-time="dawn"] .sun { filter: hue-rotate(-14deg) saturate(.85) brightness(1.08); }

/* Sunset: apricot light, plum ink */
html[data-time="dusk"] {
  --cream: #f7cda7; --cream-2: #f9dcc0; --ink: #4b2545; --ink-soft: #7a3f5c; --text: #5a3046; --muted: #7a4b5c;
  --deep: #3f1f3a; --accent: #d2603b; --cta: #4b2545; --sky: #ffb38a; --sun: #ff9f5a; --sea: #d97b9a; --rose: #f7a1a8;
}
html[data-time="dusk"] .page-bg { background: linear-gradient(180deg, #f8bd8c, #f5ae96 55%, #e8a5b5); }
html[data-time="dusk"] .page-bg::before { filter: hue-rotate(32deg) saturate(.85) brightness(.9); }
html[data-time="dusk"] .bg-about { --shallow: #f6b598; --mid: #d88496; --deep-sea: #5a2f63; --abyss: #24162f; }
html[data-time="dusk"] .bg-about .sea { background: linear-gradient(var(--shallow), var(--mid) 30%, #a5577e 50%, var(--deep-sea) 72%, var(--abyss)); }
html[data-time="dusk"] .sun { filter: hue-rotate(-18deg) saturate(1.5); }

/* Night: deep blue, moonlight, stars */
html[data-time="night"] {
  --cream: #15203a; --cream-2: #1b2945; --ink: #e9eefb; --ink-soft: #b4c3e3; --text: #cfd9ee; --muted: #9aabcb;
  --deep: #e9eefb; --accent: #7f9fe6; --cta: #f1d27a; --sky: #2f4570; --sun: #f1d27a; --sea: #2c4f7a; --rose: #5a4a7a;
  color-scheme: dark;
}
/* the waves stay visible under a night-blue veil; stars sit on top of it */
html[data-time="night"] .page-bg { background: #15203a; }
html[data-time="night"] .page-bg::before { filter: brightness(.4) saturate(1.1); opacity: .85; }
html[data-time="night"] .page-bg::after, html[data-time="night"] .sand::before {
  content: ""; position: absolute; inset: 0; opacity: 1; pointer-events: none; filter: none;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 42%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 46% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 33%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 78% 16%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 46%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 64%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 36% 76%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 70%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 84%, #fff 50%, transparent 51%);
  background-size: 420px 420px;
  animation: twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .55; } to { opacity: 1; } }
html[data-time="night"] .sand { position: relative; }
html[data-time="night"] .nav { background: rgba(14, 22, 40, .6); }
html[data-time="night"] .nav a, html[data-time="night"] .nav .lang, html[data-time="night"] .nav .time,
html[data-time="night"] .floats li, html[data-time="night"] .filters button { background: #24365c; color: var(--ink); }
html[data-time="night"] .nav a[aria-current="page"],
html[data-time="night"] .year { background: var(--ink); color: #15203a; }
html[data-time="night"] .card, html[data-time="night"] .stop-card { background: #1e2c4b; border-color: rgba(233,238,251,.25); }
html[data-time="night"] a.card:hover { box-shadow: 6px 8px 0 rgba(233,238,251,.35); }
html[data-time="night"] .stop-card { box-shadow: 6px 7px 0 rgba(233,238,251,.25); }
html[data-time="night"] .card.placeholder { background: transparent; }

html[data-time="night"] .about img { border-color: #24365c; }
html[data-time="night"] .cta { color: #15203a; }
html[data-time="night"] .pill { color: #15203a; box-shadow: 0 6px 14px rgba(0,0,0,.3); }
html[data-time="night"] .pill.ghost { color: #fff; }
html[data-time="night"] .route-line path { stroke: rgba(233,238,251,.5); }
html[data-time="night"] .buoy { border-color: #1e2c4b; }
html[data-time="night"] footer img { filter: brightness(1.6) saturate(.7); }
html[data-time="night"] .bg-about { --shallow: #1f3658; --mid: #18304f; --deep-sea: #0f2038; --abyss: #08121f; }
html[data-time="night"] .bg-about .sea { background: linear-gradient(var(--shallow), var(--mid) 30%, #142a47 50%, var(--deep-sea) 72%, var(--abyss)); }
html[data-time="night"] .shoreline .w1 path:first-child { fill: #2a4670; }
html[data-time="night"] .shoreline .foam { opacity: .45; }
html[data-time="night"] .sun { content: url("img/moon.svg"); }

@media (prefers-reduced-motion: reduce) { html[data-time="night"] .page-bg::after, html[data-time="night"] .sand::before { animation: none; } }

/* Night shore: moonlit foam instead of a grey band */
html[data-time="night"] .shoreline .w1 path:first-child { fill: #1c3152; opacity: 1; }
html[data-time="night"] .shoreline .w2 path:first-child { fill: #1f3658; }
html[data-time="night"] .shoreline .foam { stroke: #d8e4ff; opacity: .5; stroke-width: 4; }
html[data-time="night"] .shoreline .foam.haze { opacity: .12; stroke-width: 12; }
html[data-time="night"] .shoreline .foam.dots { display: none; }
html[data-time="night"] .shoreline .foam.soft { opacity: .25; }

/* Brush sun / moon on the main pages, travelling across the sky between modes */
.sky-body {
  /* sits in the empty margin beside the content column, so the cards never cover it */
  --sw: clamp(70px, 9vw, 128px);
  --gut: max(1.5vw, calc((100vw - 1000px) / 4 - var(--sw) / 2));
  position: fixed; z-index: -1; pointer-events: none;
  width: var(--sw); left: calc(100vw - var(--sw) - var(--gut)); top: 13vh;
  will-change: transform; transform: translateZ(0); backface-visibility: hidden;
  transition: left 1.4s cubic-bezier(.45,.05,.3,1), top 1.4s cubic-bezier(.45,.05,.3,1), filter .8s ease, opacity .8s ease;
}
html[data-time="dawn"] .sky-body { left: var(--gut); top: 62vh; filter: hue-rotate(-14deg) saturate(.85) brightness(1.08); }
html[data-time="dusk"] .sky-body { top: 62vh; filter: hue-rotate(-18deg) saturate(1.5); }
html[data-time="night"] .sky-body { content: url("img/moon.svg"); top: 12vh; }
@media (max-width: 640px) {
  .sky-body { width: 60px; left: auto; right: 14px; top: 132px; opacity: .85; }
  html[data-time="dawn"] .sky-body, html[data-time="dusk"] .sky-body { top: auto; bottom: 86px; }
  html[data-time="dawn"] .sky-body { left: 12px; right: auto; }
  html[data-time="dusk"] .sky-body, html[data-time="night"] .sky-body { left: auto; right: 14px; }
}

/* The time-of-day picker: always in the corner, easy to spot */
.timebar {
  position: fixed; right: 16px; bottom: 16px; z-index: 20;
  display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 16px;
  border-radius: 9999px; background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(46,74,107,.18), inset 0 0 0 1.5px rgba(42,74,107,.18);
  color: var(--ink);
}
.tb-label { display: flex; flex-direction: column; margin-right: 6px; font: 600 11px/1.25 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.tb-label b { font: 700 14px/1.25 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); }
.timebar button {
  width: 38px; height: 38px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer;
  transition: transform .15s, background .2s;
}
.timebar button:hover { transform: translateY(-2px); background: rgba(42,74,107,.08); }
.timebar button[aria-pressed="true"] { background: var(--cream); box-shadow: inset 0 0 0 2px var(--ink); }
.timebar button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.timebar svg { width: 24px; height: 24px; }
html[data-time="night"] .timebar { background: rgba(20,30,55,.82); box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 0 0 1.5px rgba(233,238,251,.18); }
html[data-time="night"] .timebar button:hover { background: rgba(233,238,251,.1); }
html[data-time="night"] .timebar button[aria-pressed="true"] { background: #24365c; }
body { padding-bottom: 72px; }
@media (max-width: 640px) {
  .timebar { left: 50%; right: auto; transform: translateX(-50%); bottom: 12px; padding: 5px; }
  .tb-label { display: none; }
  .timebar button { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .sky-body { transition: none; } }

/* the wave picture sits at the very back, the sun/moon just in front of it */
.page-bg { z-index: -2; }

/* Dots outside noon: colours picked for each sky, with the same crayon grain as the waves */
html:not([data-time="noon"]) .blob {
  -webkit-mask: url("img/grain.svg") 0 0 / 160px; mask: url("img/grain.svg") 0 0 / 160px;
  opacity: .8;
}
html[data-time="dawn"] .blob:nth-of-type(1) { background: #f4b3bf; }
html[data-time="dawn"] .blob:nth-of-type(2) { background: #ffd2a1; }
html[data-time="dawn"] .blob:nth-of-type(3) { background: #c9b6ee; }
html[data-time="dawn"] .blob:nth-of-type(4) { background: #a9c9ec; }
html[data-time="dusk"] .blob:nth-of-type(1) { background: #fbe0a6; }
html[data-time="dusk"] .blob:nth-of-type(2) { background: #c98bb0; }
html[data-time="dusk"] .blob:nth-of-type(3) { background: #8e7dbd; }
html[data-time="dusk"] .blob:nth-of-type(4) { background: #f6d2c4; }
html[data-time="night"] .blob:nth-of-type(1) { background: #3c5688; }
html[data-time="night"] .blob:nth-of-type(2) { background: #c9b26a; opacity: .55; }
html[data-time="night"] .blob:nth-of-type(3) { background: #33507e; }
html[data-time="night"] .blob:nth-of-type(4) { background: #5a4a86; }

/* Contact at night: dark cards with light text */
html[data-time="night"] .contact-item { background: #1e2c4b; border-color: rgba(233,238,251,.3); color: var(--ink); }
html[data-time="night"] a.contact-item:hover { box-shadow: 5px 6px 0 rgba(233,238,251,.35); }
html[data-time="night"] .contact-item small { color: var(--ink-soft); }
html[data-time="night"] .badge { filter: saturate(.8) brightness(.85); }
html[data-time="night"] .page-head h1 { color: var(--ink); }
html[data-time="night"] .page-head p { color: var(--ink-soft); }

.intro p i { font-style: italic; }

/* Shared: small hand-drawn things with a caption tag */
.things-title { text-align: center; margin: 0 0 8px; font-size: clamp(24px, 3vw, 34px); color: var(--ink); }
.thing { margin: 0; width: clamp(130px, 15vw, 170px); }
.thing .bob { display: grid; justify-items: center; gap: 8px; animation: floaty 5.5s ease-in-out infinite; will-change: transform; }
.thing svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 8px 0 rgba(42, 74, 107, .14)); }
.thing figcaption { background: rgba(255, 255, 255, .85); color: var(--ink); font-weight: 700; font-size: 14px; line-height: 1.3; text-align: center; padding: 6px 12px; border-radius: 12px; }
.thing.t5 figcaption { background: var(--ink); color: #fff; }
.t2 .bob { animation-delay: -1.4s; animation-duration: 6.3s; }
.t3 .bob { animation-delay: -2.8s; animation-duration: 5s; }
.t4 .bob { animation-delay: -3.9s; animation-duration: 6.7s; }
.t5 .bob { animation-delay: -.7s; animation-duration: 5.9s; }
@keyframes floaty {
  0%, 100% { transform: translate(0, 0) rotate(-3deg); }
  50% { transform: translate(5px, -10px) rotate(3deg); }
}
html[data-time="night"] .thing figcaption { background: rgba(36, 54, 92, .9); color: var(--ink); }
html[data-time="night"] .thing.t5 figcaption { background: var(--ink); color: #15203a; }

/* The message in a bottle: shake, pop the cork, spill */
.bottle-btn { background: none; border: 0; padding: 0; cursor: pointer; display: block; margin: 0 auto; }
.bottle-btn .bottle-art { display: block; }
.bottle.shaking .bottle-art { animation: shake .5s ease-in-out; }
@keyframes shake {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-12deg); } 30% { transform: rotate(10deg); } 45% { transform: rotate(-9deg); }
  60% { transform: rotate(7deg); } 75% { transform: rotate(-4deg); }
}
.cork { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.2, .8, .3, 1), opacity .3s .2s; }
.bottle.uncorked .cork { transform: translate(6px, -46px) rotate(140deg); opacity: 0; }
.bottle.uncorked .bottle-art { transform: rotate(-70deg); transition: transform .45s cubic-bezier(.3,1.4,.5,1); animation: none; }
.spill { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 3vw; max-width: 980px; margin: 10px auto 30px; }
.spill .thing { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -120px)) scale(.12) rotate(-60deg); pointer-events: none;
  transition: transform .7s cubic-bezier(.25, 1.3, .45, 1), opacity .25s; }
.spill.aiming .thing { transition: none !important; transform: none !important; }
.bottle.spilled .spill .thing { opacity: 1; transform: none; pointer-events: auto; }
.bottle.spilled .spill .t2 { transition-delay: .08s; }
.bottle.spilled .spill .t3 { transition-delay: .16s; }
.bottle.spilled .spill .t4 { transition-delay: .24s; }
.bottle.spilled .spill .t5 { transition-delay: .32s; }
.spill .thing:nth-child(even) { margin-top: 34px; }
.spill .bob { animation-name: floatwide; animation-duration: 7s; }
@keyframes floatwide {
  0%, 100% { transform: translate(-12px, 0) rotate(-4deg); }
  50% { transform: translate(12px, -10px) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) { .thing, .thing .bob, .bottle-art { animation: none !important; } }
.about p:empty { display: none; }

html[data-time="night"] .lang-ring path { stroke: #e2c066; }

/* Switching the time of day: the page cross-fades and the sun/moon glides to its new place */
.sky-body { view-transition-name: sky; }
html.vt .sky-body { transition: none !important; }
html.vt::view-transition-old(root), html.vt::view-transition-new(root) { animation-duration: 1.1s; animation-timing-function: ease-in-out; }
html.vt::view-transition-group(sky) { animation-duration: 1.4s; animation-timing-function: cubic-bezier(.45, .05, .3, 1); }
html.vt::view-transition-old(sky), html.vt::view-transition-new(sky) { animation-duration: 1.4s; height: 100%; }

/* small life in the drawings: a wagging tail and a beating heart */
.thing .wag { transform-box: fill-box; transform-origin: 0% 100%; animation: wag .7s ease-in-out infinite alternate; }
@keyframes wag { from { transform: rotate(-14deg); } to { transform: rotate(16deg); } }
.thing .beat { transform-box: fill-box; transform-origin: 50% 60%; animation: beat 1.6s ease-in-out infinite; }
@keyframes beat { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(.95); } 45% { transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .thing .wag, .thing .beat { animation: none; } }

/* the spilled things wriggle and bubble when you touch them */
.spill .thing { position: relative; cursor: pointer; }
.spill .thing.wriggle svg { animation: wriggle .7s ease-in-out; }
@keyframes wriggle {
  0%, 100% { transform: rotate(0) scale(1); }
  20% { transform: rotate(-9deg) scale(1.06); } 40% { transform: rotate(8deg) scale(1.06); }
  60% { transform: rotate(-5deg) scale(1.03); } 80% { transform: rotate(3deg); }
}
.bubble {
  position: absolute; top: 18%; width: var(--s); height: var(--s); border-radius: 50%;
  border: 1.5px solid rgba(232, 246, 253, .85); background: rgba(186, 230, 253, .25);
  box-shadow: inset -2px -2px 0 rgba(255, 255, 255, .35);
  pointer-events: none; animation: bubble-up 1.5s ease-out forwards;
}
@keyframes bubble-up {
  from { transform: translate(0, 0) scale(.4); opacity: 0; }
  15% { opacity: 1; }
  to { transform: translate(var(--dx), -90px) scale(1); opacity: 0; }
}

/* ---------- Phones: the whole menu on one row ---------- */
@media (max-width: 640px) {
  .nav { flex-wrap: nowrap; justify-content: space-between; gap: 4px; padding: 8px 6px; }
  .nav .nav-links {
    display: flex; flex: 1 1 auto; min-width: 0; justify-content: space-between;
    padding: 3px; border-radius: 9999px; background: #fff;
    box-shadow: 0 2px 10px rgba(46, 74, 107, .08);
    overflow-x: auto; scrollbar-width: none;
  }
  .nav .nav-links::-webkit-scrollbar { display: none; }
  .nav a {
    flex: 1 1 auto; text-align: center; white-space: nowrap;
    font-size: clamp(11.5px, 3.3vw, 15px); padding: 8px clamp(3px, 1.1vw, 12px); letter-spacing: -.005em;
    background: transparent;
  }
  .nav a:hover { transform: none; }
  .nav .lang { flex: none; margin-left: 0; padding: 3px 7px; box-shadow: 0 2px 10px rgba(46, 74, 107, .08); }
  .nav .lang button { font-size: 12px; padding: 6px 3px; }
  .nav .lang i { font-size: 11px; }
  html[data-time="night"] .nav .nav-links { background: #24365c; }
  html[data-time="night"] .nav a:not([aria-current]) { background: transparent; }

  /* Room to breathe on small screens */
  .hero { padding: 40px 0 24px; }
  .hero p { font-size: 16px; line-height: 1.45; }
  .about { gap: 20px; padding: 24px 0; }
  .about p { line-height: 1.6; }
  .cta-row { padding: 24px 0; }
  a, button { -webkit-tap-highlight-color: transparent; }
  .timebar { bottom: max(12px, env(safe-area-inset-bottom)); }
}

/* Phones: the About page's shoreline stays still. Moving waves with their crayon texture had to be
   redrawn every frame, which made opening the page stutter. */
@media (max-width: 640px) {
  .shoreline .w1, .shoreline .w2 { animation: none; }
}

/* Phones: when the browser's address bar shrinks or grows near the bottom of the page, the screen
   changes height. The fixed backgrounds are sized to the tallest screen (lvh) so they never resize,
   jump or leave a strip uncovered; the sun and boat use the steady small height (svh). */
.page-bg { inset: 0 0 auto 0; height: 100vh; height: 100lvh; }
.sky-body { top: 13svh; }
html[data-time="dawn"] .sky-body, html[data-time="dusk"] .sky-body { top: 62svh; }
html[data-time="night"] .sky-body { top: 12svh; }
.boat { top: 50svh; }
@media (max-width: 640px) {
  footer { padding-bottom: 12px; }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  html[data-time="dawn"] .sky-body, html[data-time="dusk"] .sky-body { top: auto; }
  .sky-body { top: 132px; }
}

/* Phones: the time-of-day bar floats at the bottom while scrolling, then settles into the page just
   above the footer, so no empty strip has to be kept free for it at the end of the page */
@media (max-width: 640px) {
  body { padding-bottom: 0; }
  footer { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  .timebar {
    position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); left: auto; right: auto; transform: none;
    align-self: center; margin: 8px auto 0; order: 0;
  }
}

/* iPhone Safari's floating bottom bar: the page now runs underneath it (viewport-fit=cover), so the
   colour behind the bar is the page's own instead of a flat strip. Left and right stay clear of the notch. */
.nav { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
@media (max-width: 640px) {
  .nav { padding-left: max(6px, env(safe-area-inset-left)); padding-right: max(6px, env(safe-area-inset-right)); }
}

/* iPhone Safari paints the strips behind its status bar and floating bottom bar with the page's
   outermost (html) colour. Keep that colour in step with the page: the top colour while near the
   top, the bottom colour (e.g. the deep sea on About) once past half way. site.js sets .near-end. */
html { --edge-top: var(--cream); --edge-bottom: var(--cream); background-color: var(--edge-top); }
html.near-end { background-color: var(--edge-bottom); }
body:not(.bg-about) { background: transparent; }
html[data-time="dawn"] { --edge-top: #fbd8d6; --edge-bottom: #f5e1ee; }
html[data-time="dusk"] { --edge-top: #f8bd8c; --edge-bottom: #e8a5b5; }
html[data-time="night"] { --edge-top: #15203a; --edge-bottom: #15203a; }
html:has(body.bg-about) { --edge-top: var(--cream); --edge-bottom: #16293d; }
html[data-time="dawn"]:has(body.bg-about) { --edge-bottom: #2a2346; }
html[data-time="dusk"]:has(body.bg-about) { --edge-bottom: #24162f; }
html[data-time="night"]:has(body.bg-about) { --edge-bottom: #08121f; }


/* ---------- Page changes: the menu and the time bar stay exactly where they are, only the page's
   content slides in. Going right in the menu it comes from the right, going back from the left.
   The head script adds .pt / .pt-fwd / .pt-back when you arrive from another page of the site. ---------- */
@keyframes pt-in { from { opacity: 0; transform: translate(var(--pt-x, 0), var(--pt-y, 22px)); } }
html.pt:not(.loading) body > :not(.nav, .timebar, .page-bg, .sky-body, .sun, .blob, svg, script) {
  animation: pt-in .55s cubic-bezier(.16, 1, .3, 1) backwards;
}
html.pt-fwd { --pt-x: 56px; --pt-y: 0px; }
html.pt-back { --pt-x: -56px; --pt-y: 0px; }
@media (prefers-reduced-motion: reduce) { html.pt body > * { animation: none !important; } }

/* Until site.js has built the menu, footer and time bar and put in the right language, the page
   stays hidden, so a half-built page never flashes up first (a 2.5 s fallback in the head undoes it) */
html.loading body { visibility: hidden; }