/* ============================================================
   Rawdestiny — "Night → Dawn", hand-painted edition
   One sky, painted in gouache: land at night, scroll into dawn.
   All artwork generated for Rawdestiny; no build step.
   ============================================================ */

:root {
  --plum:       oklch(0.32 0.07 312);
  --plum-soft:  oklch(0.45 0.06 314);
  --plum-dim:   oklch(0.56 0.05 316);
  --rose:       oklch(0.74 0.15 356);
  --rose-deep:  oklch(0.49 0.17 356);
  --gold:       oklch(0.85 0.11 85);
  --mint:       oklch(0.84 0.08 175);
  --peri:       oklch(0.72 0.1 280);

  /* washi-tape shared language */
  --tape-bg:     oklch(0.93 0.04 100 / 0.6);
  --tape-shadow: 0 1px 4px oklch(0.3 0.06 310 / 0.25);
  --tape-w: 74px;
  --tape-h: 24px;

  --serif: 'Newsreader', Georgia, serif;
  --sans: 'Schibsted Grotesk', -apple-system, 'Segoe UI', sans-serif;
  --pad: clamp(1.25rem, 5vw, 2.75rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* fluid space scale */
  --space-s:  clamp(0.75rem, 1.5vw, 1.1rem);
  --space-m:  clamp(1.25rem, 3vw, 2rem);
  --space-l:  clamp(2rem, 5vw, 3.5rem);
  --space-xl: clamp(3rem, 7vw, 6rem);

  /* fluid type scale — 1.25 modular, min→max */
  --step--1: clamp(0.8rem,  0.78rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem,    0.95rem + 0.35vw, 1.125rem);
  --step-1:  clamp(1.1rem,  1rem   + 0.7vw,  1.4rem);
  --step-2:  clamp(1.3rem,  1.1rem + 1.3vw,  1.9rem);
  --step-3:  clamp(1.6rem,  1.2rem + 2.5vw,  2.8rem);
  --step-4:  clamp(1.9rem,  1.3rem + 3.8vw,  3.4rem);
  --step-5:  clamp(2.4rem,  1.4rem + 5.5vw,  4.6rem);
  --step-6:  clamp(2.9rem,  1.5rem + 7.2vw,  5.9rem);
}

* { box-sizing: border-box; }
img { max-width: 100%; }   /* responsive baseline — never overflow the viewport */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* THE SKY — tuned to the paintings' own palettes */
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--plum);
  background: linear-gradient(180deg,
    oklch(0.23 0.07 295) 0%,
    oklch(0.27 0.08 298) 14%,
    oklch(0.33 0.085 302) 28%,
    oklch(0.47 0.08 308) 40%,
    oklch(0.68 0.06 318) 52%,
    oklch(0.84 0.045 335) 63%,
    oklch(0.93 0.035 10) 74%,
    oklch(0.94 0.045 45) 86%,
    oklch(0.93 0.04 130) 100%
  );
  overflow-x: hidden;
}

/* paper grain over everything */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

::selection { background: oklch(0.74 0.15 356 / 0.3); }
a { color: inherit; text-decoration: none; text-underline-offset: 0.18em; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 var(--pad); position: relative; }

.zone-night { color: oklch(0.97 0.012 300); }
.zone-night .soft { color: oklch(0.88 0.028 300); }
.zone-dawn { color: oklch(0.3 0.07 312); }
.zone-dawn .soft { color: oklch(0.42 0.06 314); }

/* ============ HEADER ============ */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  padding: 1.5rem var(--pad);
}
.header-inner {
  max-width: 1080px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.wordmark {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 1.35rem; font-weight: 500; letter-spacing: -0.015em;
  color: oklch(0.97 0.01 300);
}
.wordmark .dot { color: var(--gold); text-shadow: 0 0 16px oklch(0.85 0.11 85 / 0.9); }
.header-nav { display: flex; gap: clamp(1.1rem, 3vw, 2rem); font-size: 0.95rem; }
.header-nav a { color: oklch(0.88 0.03 300); text-shadow: 0 1px 12px oklch(0.2 0.06 295 / 0.8); transition: color 0.2s var(--ease); }
.header-nav a:hover { color: #fff; }

/* ============ HERO — the night painting ============ */
.hero {
  position: relative;
  isolation: isolate;
  min-height: max(640px, 96svh);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: clamp(5rem, 10vw, 8rem);
  padding-bottom: clamp(3rem, 8vw, 6rem);
}
.hero-art {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  z-index: -1;
  overflow: hidden;
  /* melt the painting into the sky below */
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 70%, transparent 99%);
  animation: skyWake 1.5s var(--ease) both;
}
@keyframes skyWake {
  from { opacity: 0; transform: translateX(-50%) scale(1.045); }
  to   { opacity: 1; transform: translateX(-50%) scale(1); }
}
.hero-art img {
  position: absolute;
  top: -13%; left: -2.5%;
  width: 105%; height: 117%;
  object-fit: cover;
  object-position: 72% 28%;   /* keep the painted moon in frame */
  /* gentle mouse drift only — no scroll-transform, no GPU filter → smooth scroll */
  transform: translate3d(var(--px, 0), var(--py, 0px), 0);
}
/* gentle dark veil on the left so the type always sits in quiet paint */
.hero-art::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(94deg, oklch(0.18 0.06 295 / 0.78) 0%, oklch(0.18 0.06 295 / 0.5) 36%, oklch(0.18 0.06 295 / 0.16) 58%, transparent 72%),
    linear-gradient(0deg, oklch(0.23 0.07 295 / 0.55) 0%, transparent 24%);
}
/* the painted moon breathes */
.moon-glow {
  position: absolute;
  top: 4%; right: 6%;
  width: 46vw; height: 46vw;
  max-width: 760px; max-height: 760px;
  border-radius: 50%;
  background: radial-gradient(closest-side, oklch(0.97 0.04 90 / 0.24), oklch(0.9 0.06 70 / 0.08) 52%, transparent 72%);
  filter: blur(22px);
  mix-blend-mode: screen;
  animation: breathe 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes breathe {
  0%, 100% { opacity: 0.55; transform: scale(0.97); }
  50%      { opacity: 1;    transform: scale(1.04); }
}
/* slow night mist drifting through the painting */
.mist {
  position: absolute;
  height: 22%;
  width: 130%;
  left: -15%;
  border-radius: 50%;
  background: radial-gradient(50% 60% at 50% 50%, oklch(0.9 0.02 300 / 0.1), transparent 70%);
  filter: blur(22px);
  mix-blend-mode: screen;
  pointer-events: none;
}
.mist.m1 { top: 30%; animation: drift-x 46s ease-in-out infinite alternate; }
.mist.m2 { top: 58%; animation: drift-x 64s ease-in-out infinite alternate-reverse; }
@keyframes drift-x {
  from { transform: translateX(-4%); }
  to   { transform: translateX(4%); }
}
/* golden stardust motes floating up (spawned by JS) */
.dust span {
  position: absolute;
  bottom: -2%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: oklch(0.9 0.09 85);
  box-shadow: 0 0 8px 1px oklch(0.88 0.1 85 / 0.7);
  opacity: 0;
  animation: floatUp linear infinite;
  pointer-events: none;
}
.dust span:nth-child(3n) { background: #fff; box-shadow: 0 0 8px 1px oklch(1 0 0 / 0.7); }
.dust span:nth-child(4n) { width: 3px; height: 3px; }
@keyframes floatUp {
  0%   { opacity: 0; transform: translate3d(0, 0, 0); }
  12%  { opacity: 0.85; }
  85%  { opacity: 0.3; }
  100% { opacity: 0; transform: translate3d(var(--sway, 14px), -78vh, 0); }
}

.rail {
  position: absolute;
  left: calc(-1 * var(--pad) + 0.9rem);
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: oklch(0.78 0.04 300);
  display: flex; align-items: center; gap: 0.9rem;
}
.rail::before {
  content: "";
  width: 1px; height: 64px;
  background: linear-gradient(180deg, transparent, oklch(0.78 0.04 300 / 0.7));
}

/* hero copy: left-pinned, opposes the painted moon (upper-right void) */
.hero-copy {
  max-width: 46ch;
  align-self: flex-start;
}

.kicker {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: var(--step--1); font-weight: 500;
  color: oklch(0.87 0.035 300);
  margin: 0 0 1.4rem;
  animation: rise 0.8s var(--ease) both;
}
.kicker .pip {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px 2px oklch(0.85 0.11 85 / 0.85);
}
.hero h1 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 480;
  font-size: var(--step-6);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 1.5rem;
  max-width: 14ch;
  color: oklch(0.975 0.012 300);
  text-shadow: 0 2px 50px oklch(0.2 0.07 295 / 0.85);
}
.hero h1 .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  animation: wordUp 0.75s var(--ease) forwards;
}
.hero h1 .w:nth-child(1) { animation-delay: 0.08s; }
.hero h1 .w:nth-child(2) { animation-delay: 0.16s; }
.hero h1 .w:nth-child(3) { animation-delay: 0.24s; }
.hero h1 .w:nth-child(4) { animation-delay: 0.32s; }
.hero h1 .w:nth-child(5) { animation-delay: 0.40s; }
.hero h1 .w:nth-child(6) { animation-delay: 0.50s; }
.hero h1 .w:nth-child(7) { animation-delay: 0.60s; }
.hero h1 .w:nth-child(8) { animation-delay: 0.68s; }
@keyframes wordUp { to { opacity: 1; transform: translateY(0); } }
.hero h1 .warm {
  position: relative;
  font-style: italic;
  color: var(--rose);
  text-shadow: 0 0 34px oklch(0.74 0.15 356 / 0.6);
  padding-bottom: 0.06em;
}
.hero h1 .warm .swoosh {
  position: absolute;
  left: -2%; right: -2%; bottom: -0.05em;
  width: 104%; height: 0.2em;
  overflow: visible;
}
.hero h1 .warm .swoosh path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 6.5;
  stroke-linecap: round;
  opacity: 0.85;
  filter: drop-shadow(0 0 6px oklch(0.85 0.11 85 / 0.8));
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
  animation: drawline 0.9s 1.05s var(--ease) forwards;
}
@keyframes drawline { to { stroke-dashoffset: 0; } }

.hero .lede {
  font-size: var(--step-1);
  font-weight: 500;
  color: oklch(0.94 0.015 300);
  max-width: 38ch;
  margin: 0;
  text-wrap: pretty;
  text-shadow: 0 1px 4px oklch(0.18 0.06 295 / 0.9), 0 2px 26px oklch(0.18 0.07 295 / 0.95);
  animation: rise 0.8s 0.55s var(--ease) both;
}
.scroll-cue {
  margin-top: clamp(2.2rem, 6vh, 3.6rem);
  display: inline-flex; align-items: center; gap: 0.65rem;
  color: oklch(0.8 0.035 300);
  font-size: 0.88rem;
  animation: rise 0.8s 0.8s var(--ease) both;
}
.scroll-cue .dwn { width: 17px; height: 17px; animation: bob 2.4s var(--ease) infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* live twinkles + shooting stars over the painting */
.night-sky {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 150vh;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.stars i {
  position: absolute;
  width: 2px; height: 2px; border-radius: 50%;
  background: #fff;
  animation: tw 4s ease-in-out infinite;
}
.stars i:nth-child(3n) { width: 1.4px; height: 1.4px; }
.stars i:nth-child(4n) { background: oklch(0.92 0.06 85); }
.stars i:nth-child(7n) { width: 2.6px; height: 2.6px; box-shadow: 0 0 8px #fff; }
@keyframes tw { 0%, 100% { opacity: 0.1; } 50% { opacity: 0.95; } }
.shoot {
  position: absolute;
  width: 140px; height: 1.5px;
  background: linear-gradient(90deg, #fff, transparent);
  border-radius: 2px;
  opacity: 0;
  transform: rotate(-24deg);
  animation: shoot 9s linear infinite;
}
.shoot.s2 { animation-delay: 5.2s; animation-duration: 12s; }
/* one-shot star spawned where the visitor clicks the sky */
.shoot.once { animation: shootOnce 1.1s cubic-bezier(0.2, 0.6, 0.4, 1) forwards; }
@keyframes shootOnce {
  0%   { opacity: 0.95; transform: translate3d(0, 0, 0) rotate(-24deg); }
  100% { opacity: 0; transform: translate3d(-34vw, 14vw, 0) rotate(-24deg); }
}
.click-spark {
  position: absolute;
  color: oklch(0.95 0.06 90);
  font-size: 13px;
  line-height: 1;
  text-shadow: 0 0 10px oklch(0.9 0.08 85);
  animation: sparkPop 0.9s var(--ease) forwards;
  pointer-events: none;
}
@keyframes sparkPop {
  0%   { opacity: 0; transform: scale(0.3) rotate(0deg); }
  35%  { opacity: 1; transform: scale(1.25) rotate(35deg); }
  100% { opacity: 0; transform: scale(0.7) rotate(60deg); }
}
@keyframes shoot {
  0%   { opacity: 0; transform: translate3d(0,0,0) rotate(-24deg); }
  1.5% { opacity: 0.9; }
  6%   { opacity: 0; transform: translate3d(-46vw, 19vw, 0) rotate(-24deg); }
  100% { opacity: 0; transform: translate3d(-46vw, 19vw, 0) rotate(-24deg); }
}

/* ============ SKY DIAL — scroll = time of day ============ */
.sky-dial {
  position: fixed;
  right: clamp(10px, 2vw, 26px);
  top: 50%;
  transform: translateY(-50%);
  height: 38vh;
  width: 30px;
  z-index: 60;
  pointer-events: none;
}
.sky-dial .track {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 2px; margin-left: -1px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    oklch(0.88 0.03 300 / 0.55),
    oklch(0.8 0.06 330 / 0.45) 55%,
    oklch(0.9 0.08 75 / 0.6));
}
.sky-dial .orb {
  position: absolute;
  left: 50%;
  top: calc(var(--prog, 0) * 100%);
  width: 22px; height: 22px;
  transform: translate(-50%, -50%);
}
.sky-dial .orb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sky-dial .orb .o-moon {
  color: oklch(0.95 0.015 300);
  opacity: calc(1 - var(--prog, 0) * 1.7);
  filter: drop-shadow(0 0 6px oklch(0.9 0.04 300 / 0.9));
}
.sky-dial .orb .o-sun {
  color: oklch(0.82 0.13 80);
  opacity: calc((var(--prog, 0) - 0.42) * 2.2);
  filter: drop-shadow(0 0 8px oklch(0.85 0.12 80 / 0.9));
}
@media (max-width: 880px) {
  .sky-dial {
    height: auto;
    width: 22px;
    top: auto;
    bottom: clamp(12px, 4vh, 28px);
    transform: none;
  }
  .sky-dial .track { display: none; }
  .rail { display: none; }
}

/* ============ CONSTELLATION — Ursa Minor, hand-drawn star map ============ */
.constellation {
  display: block;
  width: min(380px, 70%);
  height: auto;
  margin: 0 auto;
  overflow: visible;
  position: relative;
  z-index: 1;
  transform: rotate(-2deg);
}
.constellation line {
  stroke: oklch(1 0 0 / 0.3);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
}
.constellation.in line { animation: drawline2 0.5s var(--ease) forwards; }
.constellation.in line:nth-of-type(1) { animation-delay: 0.25s; }
.constellation.in line:nth-of-type(2) { animation-delay: 0.47s; }
.constellation.in line:nth-of-type(3) { animation-delay: 0.69s; }
.constellation.in line:nth-of-type(4) { animation-delay: 0.91s; }
.constellation.in line:nth-of-type(5) { animation-delay: 1.13s; }
.constellation.in line:nth-of-type(6) { animation-delay: 1.35s; }
.constellation.in line:nth-of-type(7) { animation-delay: 1.57s; }
.constellation.in line:nth-of-type(8) { animation-delay: 1.79s; }
.constellation .bg {
  fill: #fff;
  opacity: 0;
}
.constellation.in .bg { animation: bgStarIn 1.2s 1.8s var(--ease) forwards, bgGlimmer 4.2s ease-in-out 3.2s infinite alternate; }
.constellation.in .bg:nth-of-type(2n) { animation-delay: 2.1s, 3.8s; }
.constellation.in .bg:nth-of-type(3n) { animation-delay: 2.4s, 4.4s; }
@keyframes bgStarIn { to { opacity: 0.4; } }
@keyframes bgGlimmer { from { opacity: 0.4; } to { opacity: 0.12; } }
.constellation circle:not(.bg) {
  fill: #fff;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.constellation .polaris { filter: drop-shadow(0 0 7px oklch(0.95 0.05 90 / 0.95)); fill: oklch(0.97 0.04 90); }
.constellation .sparkle {
  fill: none;
  stroke: oklch(0.95 0.06 90 / 0.9);
  stroke-width: 1.1;
  stroke-linecap: round;
  opacity: 0;
}
.constellation.in .sparkle { animation: starPop 0.6s 1.7s var(--ease) forwards, starGlimmer 2.8s ease-in-out 2.6s infinite alternate; transform-box: fill-box; transform-origin: center; }
.constellation .c3, .constellation .c6 { fill: oklch(0.88 0.07 330); }
.constellation .c5 { fill: oklch(0.89 0.07 175); }
.constellation .c8 { fill: oklch(0.92 0.07 85); }
.constellation.in circle:not(.bg) { animation: starPop 0.5s var(--ease) forwards, starGlimmer 3.4s ease-in-out infinite alternate; }
.constellation.in .c1 { animation-delay: 0.1s, 2.6s; }
.constellation.in .c2 { animation-delay: 0.72s, 3.2s; }
.constellation.in .c3 { animation-delay: 0.94s, 2.8s; }
.constellation.in .c4 { animation-delay: 1.16s, 3.7s; }
.constellation.in .c5 { animation-delay: 1.38s, 3s; }
.constellation.in .c6 { animation-delay: 1.6s, 3.4s; }
.constellation.in .c7 { animation-delay: 1.82s, 2.9s; }
.constellation.in .c8 { animation-delay: 2.04s, 3.6s; }
@keyframes drawline2 { to { stroke-dashoffset: 0; } }
@keyframes starGlimmer { from { opacity: 1; } to { opacity: 0.4; } }
@keyframes starPop {
  0% { opacity: 0; transform: scale(0); }
  70% { opacity: 1; transform: scale(1.7); }
  100% { opacity: 1; transform: scale(1); }
}

/* ============ SECTIONS ============ */
.section { position: relative; z-index: 1; padding: var(--space-xl) 0; }

.sec-head {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 480;
  font-size: var(--step-4);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 0.9rem;
  max-width: 22ch;
  text-wrap: balance;
}
/* italic accent on section heads — real italic, no faux oblique */
.sec-head .it { font-style: italic; }
.sec-sub { margin: 0 0 2.4rem; max-width: 52ch; font-size: var(--step-0); text-wrap: pretty; }

/* ---- VALUES — editorial numbered list ---- */
.values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
}
.value {
  position: relative;
  padding: var(--space-m) 0;
  border-top: 1px solid oklch(1 0 0 / 0.22);
}
.val-num {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--step-5);
  font-optical-sizing: auto;
  line-height: 1;
  color: var(--gold);
  opacity: 0.9;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 28px oklch(0.85 0.11 85 / 0.5);
}
.value h3 { color: #fff; text-shadow: 0 1px 8px oklch(0.2 0.06 295 / 0.8); margin: 0 0 0.35rem; font-size: var(--step-1); font-weight: 600; }
.value p.soft { color: oklch(0.9 0.022 300); text-shadow: 0 1px 8px oklch(0.2 0.06 295 / 0.7); margin: 0; font-size: var(--step--1); text-wrap: pretty; }

/* ---- DUSK BAND — a painted breath between night and day ---- */
.dusk-band {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  height: clamp(220px, 38vh, 420px);
  margin: clamp(1.5rem, 5vh, 3rem) 0 0;
  overflow: hidden;
}
.dusk-band img {
  position: absolute; inset: -2% -4%;
  width: 108%; height: 104%;
  object-fit: cover;
  object-position: center 42%;
  animation: drift-x 52s ease-in-out infinite alternate;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  opacity: 0.96;
}
.dusk-band::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, oklch(0.47 0.08 308 / 0.4), transparent 35%, transparent 65%, oklch(0.74 0.055 325 / 0.45));
}

/* ---- THE GALLERY PAINTING (galaxy) ---- */
.gallery {
  position: relative;
  z-index: 1;
  padding: var(--space-xl) 0 var(--space-l);
  text-align: center;
}
.painting {
  display: inline-block;
  margin: 0;
  transform: rotate(-1.4deg);
  transition: transform 0.5s var(--ease);
  /* edge-bleed: painting escapes centered column on wide screens */
  position: relative;
  margin-left: clamp(-3rem, -4vw, 0px);
  justify-self: start;
}
.painting:hover { transform: rotate(-0.4deg) scale(1.012); }
.painting img {
  display: block;
  width: min(440px, 78vw);
  height: auto;               /* preserve the painting's real 3:4 ratio — no stretch */
  border-radius: 6px;
  box-shadow:
    0 1px 2px oklch(0.25 0.06 310 / 0.3),
    0 24px 70px -24px oklch(0.3 0.09 310 / 0.75);
  transform-origin: 50% -12px;          /* pivot at the washi tape */
  animation: sway 9s ease-in-out infinite alternate;
}
@keyframes sway {
  from { transform: rotate(-0.35deg); }
  to   { transform: rotate(0.5deg); }
}
/* a hand-written caption under the painting */
.painting figcaption {
  margin-top: 1.6rem;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 480;
  font-size: var(--step-3);
  letter-spacing: -0.012em;
  transform: rotate(-0.6deg);
}
.painting figcaption .it { font-style: italic; }
.gallery .below {
  margin: 1.4rem auto 0;
  max-width: 52ch;
  font-size: 1.03rem;
  text-wrap: pretty;
}

/* tiny washi-tape on the painting corners */
.painting::before, .painting::after {
  content: "";
  position: absolute;
  width: var(--tape-w); height: var(--tape-h);
  background: var(--tape-bg);
  backdrop-filter: blur(1px);
  box-shadow: var(--tape-shadow);
}
.painting::before { top: -10px; left: 14%; transform: rotate(-5deg); }
.painting::after  { top: -10px; right: 14%; transform: rotate(4deg); }

/* ---- PRODUCTS — paper postcards pinned to the dawn sky ---- */
.feature {
  container-type: inline-size;
  container-name: feature;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  border-radius: 10px;
  background: oklch(0.975 0.012 90);
  rotate: -2.3deg;
  box-shadow:
    0 1px 2px oklch(0.3 0.06 310 / 0.25),
    0 26px 60px -28px oklch(0.32 0.09 310 / 0.6);
}
@container feature (min-width: 30rem) {
  .feature {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    text-align: left;
  }
}
/* paper tooth */
.feature::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 10px;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.91 0 0 0 0 0.88 0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}
/* washi tape on the top corners */
.feature .tape-l, .feature .tape-r {
  position: absolute;
  top: -11px;
  width: var(--tape-w); height: var(--tape-h);
  background: var(--tape-bg);
  backdrop-filter: blur(1px);
  box-shadow: var(--tape-shadow);
}
.feature .tape-l { left: 9%; transform: rotate(-5deg); }
.feature .tape-r { right: 9%; transform: rotate(4deg); }
.feature .f-tag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--rose-deep);
  background: oklch(0.62 0.17 356 / 0.1);
  border: 1px solid oklch(0.62 0.17 356 / 0.25);
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 1.1rem;
}
.feature h3 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: var(--step-4);
  letter-spacing: -0.02em;
  margin: 0 0 0.7rem;
}
.feature p { margin: 0 0 1.5rem; max-width: 42ch; color: var(--plum-soft); text-wrap: pretty; }
.cta {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-weight: 600;
  font-size: 0.98rem;
  color: #fff;
  background: var(--rose-deep);
  padding: 0.78rem 1.4rem;
  border-radius: 999px;
  box-shadow: 0 12px 28px -12px oklch(0.55 0.17 340 / 0.7);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), translate 0.35s var(--ease);
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -14px oklch(0.55 0.17 340 / 0.8); text-decoration: none; }
.cta svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.cta:hover svg { transform: translateX(3px); }
.cta-secondary {
  display: inline-flex;
  align-items: center;
  margin-left: 1rem;
  color: var(--plum-soft);
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  transition: color 0.2s var(--ease);
}
.cta-secondary:hover { color: var(--plum); }

/* a little painted "stamp" cut from the dawn artwork */
.f-art { position: relative; justify-self: center; }
.stamp {
  display: block;
  width: min(210px, 58vw);
  height: min(210px, 58vw);
  object-fit: cover;
  object-position: 50% 72%;     /* the painted rising sun */
  border: 7px solid #fff;
  border-radius: 4px;
  rotate: 2.2deg;
  box-shadow:
    0 1px 2px oklch(0.3 0.06 310 / 0.3),
    0 16px 40px -18px oklch(0.32 0.09 310 / 0.65);
}
.f-art::after {
  content: "";
  position: absolute;
  top: -9px; left: 50%;
  width: var(--tape-w); height: var(--tape-h);
  margin-left: calc(var(--tape-w) / -2);
  transform: rotate(-3deg);
  background: var(--tape-bg);
  backdrop-filter: blur(1px);
  box-shadow: var(--tape-shadow);
}

/* 3D tilt — driven by JS custom props, pointer devices only */
@media (hover: hover) {
  .tilt { transform: perspective(950px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.35s var(--ease); }
}

/* coming-soon tease panel (the unnamed fortune app) */
.tease { margin-top: clamp(1.8rem, 4vw, 3rem); rotate: 1.1deg; }
.tease .f-tag.gold-tag {
  color: oklch(0.5 0.12 80);
  background: oklch(0.8 0.12 80 / 0.14);
  border-color: oklch(0.7 0.12 80 / 0.45);
}
.star-4pt { width: 10px; height: 10px; flex-shrink: 0; }
.tease-art {
  position: relative;
  justify-self: center;
  transform: rotate(1.8deg);
}
.tease-art img {
  display: block;
  width: min(210px, 58vw);
  height: min(210px, 58vw);
  object-fit: cover;
  object-position: 50% 38%;
  border-radius: 8px;
  box-shadow:
    0 1px 2px oklch(0.25 0.06 310 / 0.3),
    0 20px 56px -22px oklch(0.3 0.09 310 / 0.7);
}
.tease-art::before, .tease-art::after {
  content: "";
  position: absolute;
  width: var(--tape-w); height: var(--tape-h);
  background: var(--tape-bg);
  backdrop-filter: blur(1px);
  box-shadow: var(--tape-shadow);
}
.tease-art::before { top: -9px; left: 12%; transform: rotate(-6deg); }
.tease-art::after  { top: -9px; right: 12%; transform: rotate(5deg); }
.naming {
  display: inline-block;
  margin-top: 0.4rem;
  color: oklch(0.6 0.13 80);
  text-shadow: 0 0 10px oklch(0.8 0.12 80 / 0.7);
  animation: namingPulse 2.6s ease-in-out infinite alternate;
}
.naming.slogan {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-style: italic;
  font-size: var(--step-1);
  letter-spacing: 0.01em;
}
@keyframes namingPulse { from { opacity: 0.45; } to { opacity: 1; } }

/* ============ FOOTER — the dawn painting ============ */
.site-footer {
  position: relative;
  z-index: 1;
  margin-top: clamp(3rem, 8vh, 5rem);
  padding-top: clamp(9rem, 26vh, 15rem);
  isolation: isolate;
}
.footer-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.footer-art img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 62%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 34%);
}
/* the painted sun shimmers awake */
.sun-glow {
  position: absolute;
  left: 50%; bottom: -6%;
  width: 40vw; height: 24vw;
  max-width: 640px; max-height: 380px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, oklch(0.96 0.08 80 / 0.55), oklch(0.95 0.07 60 / 0.2) 55%, transparent 75%);
  filter: blur(16px);
  mix-blend-mode: screen;
  animation: breathe 6s ease-in-out infinite;
  pointer-events: none;
}
.site-footer .tagline {
  position: relative;
  text-align: center;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 500;
  font-size: var(--step-3);
  color: oklch(0.25 0.06 310);
  text-shadow: 0 0 6px oklch(0.98 0.02 80 / 0.95), 0 1px 22px oklch(0.97 0.03 60 / 0.95);
  margin: 0 0 2.4rem;
}
.site-footer .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 2rem;
  padding-top: 1.3rem;
  padding-bottom: 2.2rem;
  border-top: 1px solid oklch(0.35 0.05 310 / 0.25);
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.3rem; font-size: 0.93rem; }
.site-footer nav a { color: oklch(0.27 0.05 310); text-shadow: 0 0 5px oklch(0.98 0.02 80 / 0.9), 0 1px 12px oklch(0.97 0.03 60 / 0.9); font-weight: 600; transition: color 0.2s var(--ease); }
.site-footer nav a:hover { color: oklch(0.18 0.05 310); text-decoration: underline; }
.site-footer .muted { display: inline-flex; align-items: center; gap: 0.45rem; color: oklch(0.38 0.05 310); font-size: 0.88rem; text-shadow: 0 1px 10px oklch(0.97 0.03 60 / 0.8); }
.site-footer .muted .moonico { width: 14px; height: 14px; }

/* ============ REVEALS (translate property — leaves transform free for tilt) ============ */
.js .reveal { opacity: 0; translate: 0 22px; }
.js .reveal.in { opacity: 1; translate: 0 0; transition: opacity 0.75s var(--ease), translate 0.75s var(--ease); }
.js .values.reveal, .js .values.reveal.in { translate: none; }
.js .values.reveal .value { opacity: 0; translate: 0 20px; }
.js .values.reveal.in .value { opacity: 1; translate: 0 0; transition: opacity 0.65s var(--ease), translate 0.65s var(--ease); transform: none; }
.js .values.reveal.in .value:nth-child(1) { transition-delay: 0.05s; }
.js .values.reveal.in .value:nth-child(2) { transition-delay: 0.18s; }
.js .values.reveal.in .value:nth-child(3) { transition-delay: 0.31s; }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

/* ============ SCROLL-TIMELINE (native, feature-gated) ============ */
/* When the browser supports scroll-driven animations, CSS drives the
   sky-dial orb, moon→sun crossfade, and hero parallax.
   The JS scroll handler (which sets --prog/--sy) is skipped in this path. */
@supports (animation-timeline: scroll()) {
  .sky-dial .orb {
    animation: orbDescend linear both;
    animation-timeline: scroll(root);
    animation-range: 0% 100%;
    /* override the JS-driven top: calc(var(--prog,0)*100%) */
    top: 0;
  }
  @keyframes orbDescend {
    from { top: 0%;   }
    to   { top: 100%; }
  }

  .sky-dial .orb .o-moon {
    /* override the calc() opacity so CSS drives it */
    opacity: 1;
    animation: moonFade linear both;
    animation-timeline: scroll(root);
    animation-range: 0% 58%;
  }
  @keyframes moonFade {
    from { opacity: 1; }
    to   { opacity: 0; }
  }

  .sky-dial .orb .o-sun {
    opacity: 0;
    animation: sunFade linear both;
    animation-timeline: scroll(root);
    animation-range: 38% 75%;
  }
  @keyframes sunFade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

}

/* Disable all scroll-driven animations under prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  @supports (animation-timeline: scroll()) {
    .sky-dial .orb,
    .sky-dial .orb .o-moon,
    .sky-dial .orb .o-sun,
    .hero-art img {
      animation: none !important;
    }
    /* restore static defaults */
    .sky-dial .orb { top: 0; }
    .sky-dial .orb .o-moon { opacity: 1; }
    .sky-dial .orb .o-sun  { opacity: 0; }
  }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
  .shoot, .dust, .mist { display: none; }
  .moon-glow, .sun-glow, .painting img, .dusk-band img, .naming { animation: none; }
  .hero-art img { filter: none; }
  .js .reveal, .js .values.reveal .value { opacity: 1; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 880px) {
  .hero { min-height: max(560px, 92svh); }
  .hero-art img { object-position: 68% 24%; filter: none; }
  /* touch targets ≥44px — visual size unchanged, padding adds tap area */
  .header-nav a,
  .site-footer nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}
@media (max-width: 560px) {
  .hero h1 { max-width: 100%; }
  .site-footer { padding-top: clamp(7rem, 20vh, 10rem); }
}

/* landscape phones: release the svh floor */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: clamp(3rem, 10vh, 5rem); }
}

/* ultrawide: side breathing room */
@media (min-width: 1600px) {
  .wrap { padding-left: max(var(--pad), calc((100vw - 1080px) / 2 * 0.5)); padding-right: max(var(--pad), calc((100vw - 1080px) / 2 * 0.5)); }
}