/* genshin.day — an almanac of imperfect days
   sepia-nostalgic · wabi-sabi · vertical-timeline · botanical-illustration */

:root {
  --vellum: #f5ecd9;
  --foxed: #e8d9b8;
  --foxed-deep: #d9c69a;
  --walnut: #3a2a1d;
  --sanguine: #6b3a2b;
  --olive: #8a7a5c;
  --verdigris: #2d4a3c;
  --gilt: #c9a96e;
  --gilt-warm: #a87b4a;

  /* golden-ratio spacing — irrational rhythm */
  --s1: 1rem;
  --s2: 1.618rem;
  --s3: 2.618rem;
  --s4: 4.236rem;
  --s5: 6.854rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(ellipse at 30% 20%, #f5ecd9, #e8d9b8 60%, #d9c69a 100%);
  background-attachment: fixed;
  color: var(--walnut);
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.72;
  font-feature-settings: "liga", "dlig", "onum";
  overflow-x: hidden;
  position: relative;
}

/* hand-drawn magnifier cursor over specimens */
.entry-illus svg, .float-specimen svg {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%233a2a1d' stroke-width='1.6'%3E%3Ccircle cx='13' cy='13' r='9'/%3E%3Cpath d='M20 20 L29 29'/%3E%3C/g%3E%3C/svg%3E") 13 13, zoom-in;
}

/* ---- paper texture overlay ---- */
.paper-grain {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: multiply;
}

/* ---- foxing stains ---- */
.foxing-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.foxing-stain {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(168,123,74,0.18), rgba(168,123,74,0) 70%);
  filter: blur(2px);
}

/* ---- the vine spine ---- */
.vine-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 33vw;
  max-width: 420px;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.vine-svg {
  width: 100%;
  height: 100%;
  display: block;
}
#vinePath {
  transition: stroke-dashoffset 0.1s linear;
}

/* ---- layout shell ---- */
.almanac {
  position: relative;
  z-index: 3;
  display: block;
}

.panel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 2.4fr;
  min-height: 100vh;
  padding: var(--s4) clamp(1.2rem, 5vw, 5rem) var(--s5);
  align-content: center;
}
.panel > * { grid-column: 2; }

/* ============ 1. OPENING PLATE ============ */
.panel--opening {
  min-height: 100vh;
  align-content: center;
}
.torn-frame {
  position: relative;
  background: linear-gradient(160deg, var(--vellum), var(--foxed) 70%, var(--foxed-deep));
  padding: clamp(2rem, 6vw, 5.2rem) clamp(1.6rem, 5vw, 4.2rem);
  margin-left: -2.4rem;
  margin-right: clamp(0rem, 6vw, 4rem);
  box-shadow: 0 14px 40px rgba(58,42,29,0.16), inset 0 0 60px rgba(168,123,74,0.08);
  clip-path: polygon(
    0% 2%, 6% 0.5%, 14% 1.6%, 23% 0.2%, 34% 1.4%, 46% 0%, 58% 1.2%, 70% 0.4%,
    82% 1.8%, 92% 0.6%, 100% 2.2%, 99% 14%, 100% 28%, 98.6% 42%, 100% 58%,
    99% 72%, 100% 86%, 98.6% 96%, 99.4% 100%, 88% 99%, 74% 100%, 60% 98.8%,
    46% 100%, 32% 99.2%, 18% 100%, 7% 98.8%, 0.6% 100%, 1.2% 86%, 0% 72%,
    1.4% 58%, 0% 44%, 1.2% 30%, 0.4% 16%
  );
}
.datestamp--top {
  font-family: "IM Fell English SC", "EB Garamond", serif;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--olive);
  transform: rotate(-2.4deg);
  margin-bottom: var(--s2);
  display: inline-block;
}
.wordmark {
  font-family: "Cormorant Infant", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.8rem, 9vw, 6.4rem);
  line-height: 0.94;
  letter-spacing: -0.012em;
  color: var(--walnut);
  margin-bottom: var(--s2);
}
.wordmark__line1 { display: inline-block; transform: rotate(-1.1deg); }
.wordmark__dot { color: var(--sanguine); }
.wordmark__line2 {
  display: inline-block;
  color: var(--sanguine);
  transform: rotate(0.8deg);
  margin-left: 0.04em;
}
.opening-sub {
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  font-style: italic;
  color: var(--walnut);
  max-width: 34ch;
  margin-bottom: var(--s3);
  margin-left: 1.2rem;
}
.opening-foot {
  font-family: "Caveat", cursive;
  font-size: 1.18rem;
  color: var(--olive);
  transform: rotate(-1.4deg);
}
.fern-corner {
  position: absolute;
  right: clamp(0.5rem, 4vw, 5rem);
  bottom: 0;
  width: clamp(160px, 22vw, 320px);
  height: auto;
  opacity: 0.78;
  z-index: 4;
  pointer-events: none;
}
.scroll-hint {
  position: absolute;
  bottom: var(--s3);
  left: 33vw;
  font-family: "Caveat", cursive;
  font-size: 1.1rem;
  color: var(--olive);
  transform: rotate(2deg);
  animation: bob 4s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: rotate(2deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(7px); }
}

/* shared latin tag */
.latin-tag {
  font-family: "IM Fell English SC", serif;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  color: var(--olive);
  transform: rotate(-1.6deg);
  margin-bottom: var(--s3);
}
.latin-tag--right { text-align: right; transform: rotate(1.4deg); }

/* ============ 2. THE VINE BEGINS ============ */
.panel--vinebegins {
  min-height: 100vh;
}
.float-specimen--dandelion {
  position: relative;
  width: clamp(180px, 24vw, 280px);
  margin-left: clamp(2rem, 14vw, 13rem);
  margin-bottom: var(--s3);
  transform: rotate(1.2deg);
  z-index: 5;
}
.float-specimen svg { width: 100%; height: auto; display: block; }
.float-anno {
  display: inline-block;
  font-family: "Caveat", cursive;
  font-size: 0.98rem;
  color: var(--olive);
  transform: rotate(-1.4deg);
  margin-top: 0.4rem;
}
.float-anno--verdigris { color: var(--verdigris); }
.vinebegins-text {
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  font-style: italic;
  max-width: 42ch;
  margin-left: -1.2rem;
  color: var(--walnut);
}
.dotted-ligature {
  width: 130px;
  height: 1px;
  margin: var(--s2) 0 0 -2rem;
  background-image: linear-gradient(to right, var(--olive) 38%, transparent 0%);
  background-size: 8px 1px;
  background-repeat: repeat-x;
  transform: rotate(-3deg);
}

/* ============ 3. DAILY SPECIMENS / TIMELINE ============ */
.panel--timeline {
  display: block;
  padding-left: 33vw;
  padding-right: clamp(1rem, 5vw, 4rem);
  min-height: auto;
  padding-top: var(--s5);
  padding-bottom: var(--s5);
}
@media (max-width: 760px) {
  .panel--timeline { padding-left: clamp(1rem, 12vw, 4rem); }
}

.entry {
  position: relative;
  max-width: 640px;
  margin-bottom: var(--s5);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.entry.in-view { opacity: 1; transform: translateY(0); }
.entry--right { margin-left: auto; margin-right: -3rem; }
.entry--left { margin-left: -1.2rem; }
@media (max-width: 760px) {
  .entry--right, .entry--left { margin-left: 0; margin-right: 0; }
}

.entry-card {
  position: relative;
  background: linear-gradient(150deg, var(--foxed), var(--vellum) 55%, var(--foxed-deep));
  padding: clamp(1.6rem, 3.4vw, 2.8rem);
  box-shadow: 0 10px 30px rgba(58,42,29,0.14), inset 0 0 40px rgba(168,123,74,0.06);
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--s3);
  /* default tear — overridden per-session by JS */
  clip-path: polygon(
    1% 1.4%, 12% 0%, 28% 1.6%, 44% 0.4%, 60% 1.8%, 76% 0.2%, 90% 1.6%, 100% 0.6%,
    99% 16%, 100% 32%, 98.6% 48%, 100% 64%, 99% 80%, 100% 94%, 98% 100%,
    84% 99%, 68% 100%, 52% 98.6%, 36% 100%, 20% 99%, 6% 100%, 0.6% 96%,
    1.4% 80%, 0% 64%, 1.2% 48%, 0% 32%, 1.4% 16%
  );
}
.entry--left .entry-card { grid-template-columns: 1fr 180px; }
.entry--left .entry-illus { order: 2; }
@media (max-width: 620px) {
  .entry-card, .entry--left .entry-card { grid-template-columns: 1fr; }
  .entry--left .entry-illus { order: 0; }
}
.entry-card:hover { box-shadow: 0 12px 36px rgba(58,42,29,0.2), inset 0 0 40px rgba(201,169,110,0.14); }

.entry-illus {
  align-self: start;
  transform: rotate(-1.4deg) translate(8%, 6%);
}
.entry-illus svg { width: 100%; height: auto; display: block; }

.entry-date {
  font-family: "IM Fell English SC", serif;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  color: var(--olive);
  margin-bottom: 0.4rem;
}
.entry-title {
  font-family: "Cormorant Infant", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.7rem, 4vw, 2.7rem);
  line-height: 1.06;
  letter-spacing: -0.012em;
  color: var(--sanguine);
  margin-bottom: var(--s1);
}
.entry-title-var {
  font-family: "IM Fell English SC", serif;
  font-style: normal;
  font-size: 0.5em;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--olive);
  display: inline-block;
  vertical-align: baseline;
}
.entry-body p { margin-bottom: var(--s1); }
.entry-body p:last-child { margin-bottom: 0; }
.entry-marginalia {
  font-family: "Caveat", cursive;
  font-size: 1.1rem;
  color: var(--olive);
  transform: rotate(-1deg);
  margin-top: var(--s1);
}

/* washi tape pieces */
.washi {
  position: absolute;
  width: 44px;
  height: 13px;
  opacity: 0.32;
  background-color: var(--gilt);
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.4) 0 3px, transparent 3px 6px);
  z-index: 6;
  pointer-events: none;
}
.washi--a { top: -7px; left: 14%; transform: rotate(-8deg); }
.washi--b { bottom: -7px; right: 18%; transform: rotate(6deg); }
.entry--left .washi--a { left: auto; right: 14%; transform: rotate(7deg); }

.pin {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--walnut);
  box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  z-index: 7;
}
.entry--left .pin { left: 12%; }
.entry--right .pin { left: auto; right: 12%; }

/* ============ 4. THE GLITCH STRATUM ============ */
.panel--glitch {
  display: block;
  min-height: 56vh;
  padding-left: 33vw;
  padding-top: var(--s4);
  padding-bottom: var(--s4);
  align-content: center;
}
@media (max-width: 760px) { .panel--glitch { padding-left: clamp(1rem,12vw,4rem); } }

.glitch-band {
  position: relative;
  height: 14vh;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(90deg, var(--foxed-deep), var(--vellum) 50%, var(--foxed));
  padding: var(--s2) clamp(1.2rem, 4vw, 3rem);
  margin-left: -3rem;
  margin-right: clamp(0rem, 8vw, 6rem);
  overflow: hidden;
  clip-path: inset(0 0 0 0);
  box-shadow: 0 8px 24px rgba(58,42,29,0.12);
}
.glitch-band.glitched { animation: tear 600ms steps(1) 1; }
@keyframes tear {
  0%   { clip-path: inset(0 0 0 0); transform: translateX(0); }
  12%  { clip-path: inset(38% 0 18% 0); transform: translateX(6px); }
  20%  { clip-path: inset(10% 0 60% 0); transform: translateX(-5px); }
  32%  { clip-path: inset(56% 0 8% 0); transform: translateX(4px); }
  44%  { clip-path: inset(0 0 0 0); transform: translateX(-3px); }
  60%  { clip-path: inset(24% 0 40% 0); transform: translateX(2px); }
  100% { clip-path: inset(0 0 0 0); transform: translateX(0); }
}
.glitch-heading {
  position: relative;
  font-family: "Cormorant Infant", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.6rem, 4.6vw, 3.2rem);
  line-height: 1.06;
  color: var(--walnut);
}
.glitch-band.glitched .glitch-heading {
  text-shadow: 2px 0 var(--sanguine), -2px 0 var(--verdigris);
  animation: chshift 600ms steps(2) 1;
}
.glitch-heading::before,
.glitch-heading::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
}
.glitch-band.glitched .glitch-heading::before {
  opacity: 0.7;
  color: var(--sanguine);
  mix-blend-mode: multiply;
  transform: translateX(3px);
  animation: gb 600ms steps(3) 1;
}
.glitch-band.glitched .glitch-heading::after {
  opacity: 0.7;
  color: var(--verdigris);
  mix-blend-mode: multiply;
  transform: translateX(-3px);
  animation: ga 600ms steps(3) 1;
}
@keyframes chshift { 0%,100%{letter-spacing:0;} 30%{letter-spacing:0.06em;} 60%{letter-spacing:-0.04em;} }
@keyframes gb { 0%{transform:translateX(0);} 25%{transform:translateX(6px);} 50%{transform:translateX(-2px);} 75%{transform:translateX(4px);} 100%{transform:translateX(0);} }
@keyframes ga { 0%{transform:translateX(0);} 25%{transform:translateX(-6px);} 50%{transform:translateX(2px);} 75%{transform:translateX(-4px);} 100%{transform:translateX(0);} }
.glitch-sub {
  margin-top: 0.4rem;
  font-style: italic;
  font-size: clamp(0.9rem, 1.8vw, 1.05rem);
  color: var(--olive);
  max-width: 52ch;
}

/* ============ 5. MARGINALIA CLUSTER ============ */
.panel--marginalia {
  display: block;
  min-height: 100vh;
  padding-left: 33vw;
  position: relative;
  padding-top: var(--s4);
  padding-bottom: var(--s5);
}
@media (max-width: 760px) { .panel--marginalia { padding-left: clamp(1rem,12vw,4rem); } }

.float-specimen.mg {
  position: absolute;
  z-index: 5;
  transform: rotate(var(--tilt, 0deg));
}
.float-specimen.mg svg { width: 100%; height: auto; display: block; }
.mg--1 { width: 200px; top: 12%; left: 38%; animation: drift 27s ease-in-out infinite; }
.mg--2 { width: 110px; top: 28%; right: 8%;  animation: drift 36s ease-in-out infinite; }
.mg--3 { width: 320px; top: 48%; left: 30%; animation: drift 33s ease-in-out infinite reverse; }
.mg--4 { width: 130px; top: 66%; right: 16%; animation: drift 26s ease-in-out infinite; }
.mg--5 { width: 90px;  top: 78%; left: 44%; animation: drift 38s ease-in-out infinite reverse; }
@media (max-width: 760px) {
  .mg--1{left:6%;} .mg--3{left:2%;width:240px;} .mg--5{left:30%;}
}
@keyframes drift {
  0%   { transform: rotate(calc(var(--tilt, 0deg) - 2deg)) translateY(-6px); }
  50%  { transform: rotate(calc(var(--tilt, 0deg) + 2deg)) translateY(6px); }
  100% { transform: rotate(calc(var(--tilt, 0deg) - 2deg)) translateY(-6px); }
}
.marginalia-note {
  position: relative;
  z-index: 8;
  margin-top: 88vh;
  max-width: 40ch;
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--walnut);
  margin-left: -1.2rem;
  background: linear-gradient(150deg, rgba(245,236,217,0.8), rgba(232,217,184,0.8));
  padding: var(--s2);
  transform: rotate(-1deg);
}

/* ============ 6. COLOPHON FOOTER ============ */
.panel--colophon {
  display: block;
  min-height: 64vh;
  padding-left: 33vw;
  padding-top: var(--s4);
  padding-bottom: var(--s4);
  align-content: center;
}
@media (max-width: 760px) { .panel--colophon { padding-left: clamp(1rem,12vw,4rem); } }

.colophon-inner {
  position: relative;
  background: linear-gradient(180deg, var(--foxed), var(--foxed-deep));
  padding: var(--s4) clamp(1.4rem, 4vw, 3.4rem) var(--s4);
  margin-left: -3rem;
  margin-right: clamp(0rem, 6vw, 4rem);
  text-align: right;
  box-shadow: 0 -8px 24px rgba(58,42,29,0.1);
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 100%, 94% 97%, 88% 100%, 82% 96%, 74% 100%, 67% 96.5%,
    60% 100%, 53% 97%, 46% 100%, 39% 96%, 32% 100%, 25% 97%, 18% 100%, 11% 96.5%,
    5% 100%, 0% 97%
  );
}
.clover-press {
  position: absolute;
  top: -10px;
  left: clamp(1rem, 6vw, 4rem);
  width: 90px;
  height: auto;
  opacity: 0.7;
  transform: rotate(-9deg);
}
.colophon-imprint {
  font-family: "Cormorant Infant", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  color: var(--walnut);
  margin-bottom: var(--s1);
}
.colophon-line {
  font-style: italic;
  color: var(--walnut);
  max-width: 48ch;
  margin-left: auto;
  margin-bottom: var(--s2);
}
.colophon-rule {
  width: 73%;
  height: 1px;
  background: var(--olive);
  margin-left: auto;
  margin-bottom: var(--s2);
}
.colophon-foot {
  font-family: "Caveat", cursive;
  font-size: 1.15rem;
  color: var(--olive);
  transform: rotate(-1deg);
}
.colophon-roman {
  font-family: "IM Fell English SC", serif;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  display: block;
  margin-top: 0.3rem;
  transform: rotate(1.2deg);
}

/* reduce vine width on small screens */
@media (max-width: 760px) {
  .vine-wrap { width: 16vw; }
  .panel { grid-template-columns: 1fr; padding-left: clamp(1rem, 12vw, 4rem); }
  .panel > * { grid-column: 1; }
  .scroll-hint { left: 16vw; }
}