/* Mementos of My Life: Poetry from My Soul. Single page site. */

:root {
  --violet: #6a4fc9;
  --violet-deep: #5a3fbf;
  --cyan: #1a74a6;
  --ink: #ffffff;
  --ink-soft: rgba(255, 255, 255, 0.92);
  --rose: #ffc9e0;
  --rose-deep: #ff7fb8;
  --paper: #f6f0e6;
  --paper-edge: #e7dfd0;
  --serif: 'Spectral', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --script: 'Pinyon Script', 'Snell Roundhand', 'Apple Chancery', cursive;
  --max: 1180px;
  --gutter: clamp(20px, 5vw, 72px);
  --line-w: 1.5px;
  --p: 0;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--violet);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection { background: var(--rose-deep); color: #2a1458; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 4px; border-radius: 2px; }
a { color: inherit; text-decoration-color: var(--rose); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--ink); }

/* Sky: the book's gradient panel, drifting from violet toward blue as the page goes on */
.sky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(168deg, var(--violet-deep) 0%, var(--violet) 26%, #5f63d0 50%, #3a76c4 76%, var(--cyan) 100%);
  background-size: 100% 320%;
  background-position: 0 calc(var(--p) * 100%);
}

/* The thread: one SVG laid over the whole document */
#thread {
  position: absolute; top: 0; left: 0; width: 100%; z-index: 1; pointer-events: none;
  overflow: visible;
}
#thread path {
  fill: none; stroke: var(--ink); stroke-width: var(--line-w); stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

main { position: relative; z-index: 2; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* Figures */
.fig { position: relative; display: block; width: 100%; }
.fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.fig svg .s { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.fig svg .f { fill: var(--ink); }
.fig svg image { width: 100%; height: 100%; }

/* Type */
.script { font-family: var(--script); font-weight: 400; line-height: 1; color: var(--rose); letter-spacing: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
.poem-title { font-size: clamp(2.6rem, 5.5vw, 4.4rem); margin: 0 0 0.35em; text-wrap: balance; }
.poem { margin: 0; font-size: clamp(1.02rem, 0.9vw + 0.7rem, 1.2rem); line-height: 1.58; white-space: pre-line; max-width: 50ch; }
.poem .refrain { font-style: italic; color: var(--ink-soft); }
.where { font-size: 0.95rem; color: var(--ink-soft); margin: 1.4em 0 0; letter-spacing: 0.01em; }
.where b { font-weight: 500; color: var(--ink); }

/* Buttons */
.buy {
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.85em 1.5em; border-radius: 999px;
  background: var(--ink); color: var(--violet-deep);
  font-weight: 500; font-size: 1rem; text-decoration: none; letter-spacing: 0.01em;
  box-shadow: 0 10px 30px -10px rgba(20, 10, 60, 0.6);
  position: relative; isolation: isolate;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), box-shadow 180ms, color 140ms ease;
}
.buy:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(20, 10, 60, 0.7); }
.buy:active { transform: translateY(0); }
.buy .mark { position: relative; display: inline-grid; width: 1.1em; height: 1.1em; }
.buy .arrow { width: 100%; height: 100%; transition: transform 180ms cubic-bezier(.2,.8,.2,1), opacity 180ms; }

/* Hover paints the cover onto the button: the arrow becomes the cover's rainbow heart, its rings
   drawn outside in like the line, and the cover's red to magenta ground spreads out from the heart.
   Hover only on precise pointers, so a tap on a phone always navigates on the first touch. */
.buy::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(110deg, #d1314d, #d0216f 55%, #d52b91);
  clip-path: circle(0 at calc(100% - 2.05em) 50%); opacity: 0;
  transition: opacity 180ms ease, clip-path 0s 200ms;
}
.buy .heart {
  position: absolute; left: 50%; top: 50%; width: 1.8em; height: 1.8em; margin: -0.92em 0 0 -0.9em;
  overflow: visible; pointer-events: none; opacity: 0;
  transition: opacity 160ms ease, transform 120ms ease;
}
.buy .heart path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0s 200ms; }
.buy .heart .core { fill-opacity: 0; transition: fill-opacity 0s 200ms; }
@media (hover: hover) and (pointer: fine) {
  .buy:is(:hover, :focus-visible) { color: var(--ink); transition: transform 180ms cubic-bezier(.2,.8,.2,1), box-shadow 180ms, color 120ms ease; }
  .buy:is(:hover, :focus-visible)::before { opacity: 1; clip-path: circle(150% at calc(100% - 2.05em) 50%); transition: clip-path 560ms cubic-bezier(.16,1,.3,1), opacity 0s; }
  .buy:is(:hover, :focus-visible) .arrow { transform: translateX(0.45em); opacity: 0; transition-duration: 140ms; }
  .buy:is(:hover, :focus-visible) .heart { opacity: 1; transition: opacity 0s, transform 120ms ease; }
  .buy:is(:hover, :focus-visible) .heart path { stroke-dashoffset: 0; transition: stroke-dashoffset 320ms cubic-bezier(.3,.6,.3,1) calc(var(--i) * 55ms); }
  .buy:is(:hover, :focus-visible) .heart .core { fill-opacity: 1; transition: fill-opacity 200ms ease 300ms; }
  .buy:active .heart { transform: scale(0.86); transition: transform 90ms ease; }
}



/* Hero */
.hero {
  position: relative; min-height: 100svh;
  /* Equal side columns put the book on the page's centre line; equal outer rows centre it vertically. */
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: 1fr auto 1fr; align-items: center; gap: clamp(24px, 4vw, 64px);
  padding: clamp(48px, 8vh, 96px) var(--gutter);
}
.hero > .fig, .hero .book-peek, .hero-copy { grid-row: 2; }
.hero .fig { max-width: 520px; margin-inline: auto; }
.hero-copy { max-width: 40ch; justify-self: start; }
.hero-copy .script { font-size: clamp(2rem, 3.5vw, 3.6rem); line-height: 1.1; white-space: nowrap; }
/* Sized to the column so no line of the poem ever breaks. */
.hero-copy .epigraph { font-size: clamp(0.95rem, 2vw, 1.5rem); font-style: italic; line-height: 1.45; margin: 0.6em 0 0; white-space: pre-line; }
.hero .actions { grid-row: 3; grid-column: 1 / -1; align-self: end; display: flex; align-items: center; gap: 1.4rem; }
.hero .hint { font-size: 0.95rem; transition: opacity 240ms; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 0.5em; }
.hero .hint svg { width: 14px; height: 22px; }
.hero .book-peek { --pad: clamp(8px, 2vw, 28px); position: relative; justify-self: center; z-index: 3; padding: 0 var(--pad); }
/* Ground shadow: stays on the floor and narrows to the spine's width as the book turns edge on. */
.hero .book-peek::before {
  content: ''; position: absolute; left: 50%; top: calc(100% - 22px); height: 44px; pointer-events: none;
  width: calc((100% - 2 * var(--pad)) * 1.08 * var(--spread, 0.94)); transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(10, 5, 40, 0.5), transparent); filter: blur(5px);
}
/* Capped by viewport height so the whole book stays in view on short screens. */
.hero .book-peek .book { --w: clamp(200px, min(19vw, 32svh), 290px); }

/* 3D book */
.book {
  --w: 230px;
  --h: calc(var(--w) * 1.683);
  --d: calc(var(--w) * 0.123);
  position: relative; width: var(--w); height: var(--h);
  transform-style: preserve-3d;
  /* Tilt applied after the spin, so the viewing angle holds as the book turns. */
  transform: perspective(1400px) rotateX(var(--rx, 4deg)) rotateY(var(--ry, -28deg));
  will-change: transform;
}
/* Both books turn by hand; vertical swipes still scroll on touch screens. */
.hero .book-peek .book, .finale .book { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.hero .book-peek .book.dragging, .finale .book.dragging { cursor: grabbing; }
.book .face { position: absolute; inset: 0; backface-visibility: hidden; background-size: 100% 100%; background-repeat: no-repeat; }
.book .front { background-image: url(assets/cover/front.webp); transform: translateZ(calc(var(--d) / 2)); border-radius: 2px 6px 6px 2px; box-shadow: 0 30px 60px -20px rgba(10, 5, 40, 0.7); }
.book .back { background-image: url(assets/cover/back.webp); transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); border-radius: 2px 6px 6px 2px; }
.book .spine { width: var(--d); inset-inline: auto; left: calc(var(--d) * -0.5); background-image: linear-gradient(90deg, rgba(0,0,0,0.25), transparent 30%, transparent 70%, rgba(0,0,0,0.25)), url(assets/cover/spine.webp); transform: rotateY(-90deg); }
.book .front::after, .book .back::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(100deg, rgba(255,255,255,0.14), transparent 35%, transparent 70%, rgba(0,0,0,0.12)); pointer-events: none; }
.book .back::after { background: linear-gradient(100deg, rgba(0,0,0,0.14), transparent 30%, transparent 65%, rgba(255,255,255,0.1)); }
/* Page block: seven sheets spread through the depth, under the three paper edges */
.book .block { position: absolute; inset: 3px 2px 3px 0; transform-style: preserve-3d; }
.book .block i { position: absolute; inset: 0; background: var(--paper); transform: translateZ(calc(var(--d) * (var(--i) - 4) / 8)); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.05); }
.book .block i:nth-child(1) { --i: 1; } .book .block i:nth-child(2) { --i: 2; } .book .block i:nth-child(3) { --i: 3; } .book .block i:nth-child(4) { --i: 4; }
.book .block i:nth-child(5) { --i: 5; } .book .block i:nth-child(6) { --i: 6; } .book .block i:nth-child(7) { --i: 7; }
.book .block i:first-child, .book .block i:last-child { background: #f1ebe0; }
.book .edge { width: calc(var(--d) - 6px); inset: 3px 2px 3px auto; transform: translateX(calc(var(--d) / 2 - 3px)) rotateY(90deg); background: linear-gradient(90deg, rgba(60, 40, 20, 0.18), transparent 35%, transparent 65%, rgba(60, 40, 20, 0.22)), repeating-linear-gradient(90deg, #f3ede2 0 2px, #d4cab9 2px 3px); }
.book .top-edge { height: calc(var(--d) - 6px); inset: 3px 2px auto 0; transform: translateY(calc(var(--d) / -2 + 3px)) rotateX(90deg); background: linear-gradient(0deg, rgba(60, 40, 20, 0.14), transparent 40%, rgba(60, 40, 20, 0.1)), repeating-linear-gradient(0deg, #f3ede2 0 2px, #d4cab9 2px 3px); }
.book .bottom-edge { height: calc(var(--d) - 6px); inset: auto 2px 3px 0; transform: translateY(calc(var(--d) / 2 - 3px)) rotateX(-90deg); background: linear-gradient(0deg, rgba(60, 40, 20, 0.3), rgba(60, 40, 20, 0.12)), repeating-linear-gradient(0deg, #e8e1d3 0 2px, #c9bfae 2px 3px); }
.book .shadow { position: absolute; left: 10%; right: -10%; bottom: -8%; height: 12%; background: radial-gradient(50% 50% at 50% 50%, rgba(10, 5, 40, 0.55), transparent 70%); transform: translateZ(calc(var(--d) * -1)) rotateX(90deg); filter: blur(6px); }

/* Poem rows */
.row {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(28px, 5vw, 80px);
  padding: clamp(80px, 12vh, 160px) var(--gutter);
  width: min(100%, var(--max) + 2 * var(--gutter)); margin-inline: auto;
}
.row .fig { max-width: 520px; width: 100%; justify-self: center; }
.row.flip .fig { order: 2; }
.row .text { max-width: 52ch; }
.row.flip .text { justify-self: end; }

/* Painting interlude */
.paintings { padding: clamp(80px, 12vh, 160px) var(--gutter); }
.paintings .lead { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; width: min(100%, var(--max)); margin-inline: auto; }
.canvas { position: relative; margin: 0; }
.canvas img { display: block; width: 100%; height: auto; border-radius: 3px; box-shadow: 0 30px 60px -24px rgba(10, 5, 40, 0.75), 0 2px 0 rgba(255,255,255,0.15) inset; }
.canvas figcaption { margin: 0.9em 0 0; font-size: 0.95rem; color: var(--ink-soft); }
.canvas figcaption b { font-weight: 400; color: var(--ink); font-style: italic; }


/* Finale: the book turns */
.finale { position: relative; height: 260svh; }
.finale .closing { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.finale .closing path { fill: none; stroke: var(--ink); stroke-width: var(--line-w); stroke-linecap: round; }
.finale .stage { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(24px, 4vw, 64px); padding: 0 var(--gutter); width: min(100%, var(--max) + 2 * var(--gutter)); margin-inline: auto; }
.finale .book { --w: clamp(220px, 24vw, 330px); justify-self: center; position: relative; z-index: 1; }
.finale .text .script { font-size: clamp(2.8rem, 5.5vw, 4.6rem); }
.finale .text p { margin: 0.8em 0 0; max-width: 40ch; }
.finale .text .actions { display: flex; flex-wrap: wrap; gap: 0.9rem 1rem; align-items: center; margin-top: 1.8em; }



/* Reduced motion: everything already drawn */
@media (prefers-reduced-motion: reduce) {
  .buy, .buy:is(:hover, :focus-visible) { transition: color 160ms ease !important; }
  /* The heart and the cover colour still arrive, as a short crossfade with nothing moving. */
  .buy::before { clip-path: none !important; transition: opacity 160ms ease !important; }
  .buy .arrow { transform: none !important; }
  .buy .heart path { stroke-dashoffset: 0 !important; transition: none !important; }
  .buy .heart .core { fill-opacity: 1 !important; }
  .buy .heart { transition: opacity 160ms ease !important; transform: none !important; }
}

/* Responsive */
@media (max-width: 980px) {
  .hero .book-peek .book { --w: clamp(160px, min(17vw, 30svh), 200px); }
  .hero-copy .script { font-size: 3.3vw; }
}
@media (max-width: 760px) {
  body { font-size: 1.05rem; }
  .hero { min-height: 0; grid-template-columns: 1fr; grid-template-rows: auto; align-items: start; padding-top: 56px; padding-bottom: 60px; gap: 16px; }
  .hero > .fig, .hero-copy, .hero .actions { grid-row: auto; }
  .hero .actions { margin-top: 8px; }
  .hero .fig { max-width: 320px; margin-bottom: 36px; }
  .hero-copy { max-width: 100%; order: -1; }
  .hero-copy .script { font-size: 9.4vw; }
  .hero-copy .epigraph { font-size: clamp(1.2rem, 1.2vw + 0.75rem, 1.5rem); }
  .hero .book-peek { display: none; }
  .hero .actions { align-self: end; }
  .hero .hint { display: none; }
  .row { grid-template-columns: 1fr; gap: 28px; }
  .row.flip .fig { order: 0; }
  .row .fig { max-width: 420px; margin-bottom: 36px; }
  .row.flip .text { justify-self: start; }
  .paintings .lead { grid-template-columns: 1fr; }
  .finale { height: 220svh; }
  .finale .stage { grid-template-columns: 1fr; align-content: center; gap: 16px; }
  .finale .book { --w: clamp(120px, 30vw, 170px); }
  .finale .text .script { font-size: clamp(2.2rem, 9vw, 2.8rem); }
  .finale .text p { margin-top: 0.6em; }
  .finale .text .actions { margin-top: 1.2em; }
}