/* ============================================================
   composition — materials
   One object: a composition notebook on a dark desk, shot from above.
   Textures are procedural (SVG noise + lighting), no clip-art.
   ============================================================ */

:root {
  --desk: #1d1a17;
  --paper: #f5f1e7;
  --paper-deep: #ece7da;
  --rule: rgba(90, 125, 178, .42);
  --margin-red: rgba(200, 80, 74, .62);
  --ink: #26262b;
  --ink-2: #4b4b52;
  --pen: #1f2a5a;           /* blue ballpoint */
  --pen-black: #23232a;
  --pen-red: #9a2f2a;
  --pencil: #75757d;
  --cover: #6d3a35;          /* overridden per season */
  --cover-deep: #4a2522;
  --label: #f3efe4;
  --tape: rgba(246, 238, 210, .62);
  --serif: 'Instrument Serif', 'Libre Baskerville', Georgia, serif;
  --sans: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --typed: 'Courier Prime', 'Courier New', Courier, monospace;
  --typewriter: 'Special Elite', 'Courier Prime', 'Courier New', monospace;
  --ink-type: #4a4034;
  --pen-font: 'Nanum Pen Script', 'Bradley Hand', cursive;
  --ts: 1;                   /* scale of the scanned paper tiles */
  --line: 36px;              /* one scanned rule: keep this a whole number of pixels so type and paper never drift */
  --top-h: calc(130px * var(--ts)); /* blank top of the page above the first rule */
  --book-w: 100vw;
  --text-w: 760px;
  --spine-w: 0px;
  --margin-w: calc(95px * var(--ts));
}
.season-autumn { --cover: #6f3d38; --cover-deep: #4b2723; }
.season-winter { --cover: #3f5169; --cover-deep: #283548; }
.season-spring { --cover: #4f6752; --cover-deep: #334536; }
.season-summer { --cover: #a8925c; --cover-deep: #7d6a3c; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--desk); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.5; overflow-x: hidden; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: rgba(255, 224, 150, .55); }

/* ---------- the desk: matte, warm, lit from the upper left ---------- */
.desk-surface {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 30% 10%, rgba(255, 236, 205, .13), transparent 70%),
    radial-gradient(ellipse 90% 80% at 50% 100%, rgba(0,0,0,.45), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='w' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .09' numOctaves='4' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .13 0 0 0 0 .11 .5 .2 0 0 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #2a2521, #1a1714);
}
.grain {
  position: fixed; inset: -20px; z-index: 50; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- the notebook ---------- */
.stage { position: relative; z-index: 1; width: var(--book-w);
  --cover-w: min(var(--book-w), calc((100vh - 84px) * .769)); }
.stage.on-cover { width: 100vw; }
.stage { margin: 0 auto; padding: 0; perspective: 2400px; }
.book { position: relative; }

/* cover: marbled board with a black cloth spine */
.cover {
  position: relative; min-height: 100vh; border-radius: 0; overflow: hidden;
  background-color: var(--cover);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.032' numOctaves='6' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .91 0 0 0 0 .88 0 0 0 0 .8 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='16' intercept='-7.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  background-size: 380px 380px;
  box-shadow: 0 2px 2px rgba(0,0,0,.35), 0 14px 30px -8px rgba(0,0,0,.65), 0 40px 60px -20px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.05);
}
.cover::before { /* wear on the board: soft light at edges and corners, plus a broad sheen */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 100% 0, rgba(255,255,255,.22), transparent 9%),
    radial-gradient(circle at 100% 100%, rgba(255,255,255,.2), transparent 8%),
    radial-gradient(circle at 0 100%, rgba(255,255,255,.12), transparent 6%),
    linear-gradient(115deg, rgba(255,255,255,.08) 0%, transparent 35%, transparent 70%, rgba(0,0,0,.12) 100%),
    linear-gradient(90deg, rgba(0,0,0,.25), transparent 12%);
  mix-blend-mode: soft-light;
}
.cover::after { /* fine board texture */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .8 0 0 0 0 .8 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E");
}
.spine { display: none; }

/* the label */
.label {
  position: absolute; left: 50%; top: 50%; width: min(520px, 86vw); transform: translate(-46%, -50%); padding: 22px 28px 24px;
  background: var(--label) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  border-radius: 14px / 18px; box-shadow: 0 1px 1px rgba(0,0,0,.25), 0 3px 8px -2px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.08);
  color: #1f1f22;
}
.label::before { content: ''; position: absolute; inset: 6px; border: 1.5px solid #1f1f22; border-radius: 10px / 14px; pointer-events: none; }
.label::after { content: ''; position: absolute; inset: 9px; border: .75px solid #1f1f22; border-radius: 8px / 12px; pointer-events: none; }
.label h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 5vw, 46px); letter-spacing: .01em; line-height: 1; text-align: center; }
.label .kicker { text-align: center; font-family: var(--sans); font-size: 10.5px; letter-spacing: .34em; text-transform: uppercase; color: #333; margin: 6px 0 22px; }
.label .line { display: flex; align-items: flex-end; gap: 10px; margin-top: 18px; border-bottom: 1px solid #2a2a2e; padding-bottom: 2px; }
.label .line span { font-family: var(--serif); font-size: 15px; letter-spacing: .02em; white-space: nowrap; color: #222; padding-bottom: 3px; }
.label .line input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-family: var(--typewriter); font-size: 19px; line-height: 1.2; padding: 0 4px 2px; color: var(--ink-type); }
.label .line input::placeholder { color: rgba(74, 64, 52, .35); }
.label .fine { display: flex; justify-content: space-between; margin-top: 26px; font-family: var(--sans); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #444; }
.label .open { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.label .check { display: flex; align-items: center; gap: 8px; font-family: var(--typewriter); font-size: 13.5px; color: var(--ink-type); cursor: pointer; user-select: none; }
.label .check input { appearance: none; width: 14px; height: 14px; border: 1.2px solid #2a2a2e; border-radius: 2px; margin: 0; position: relative; background: transparent; }
.label .check input:checked::after { content: 'x'; position: absolute; left: 2px; top: -6px; font-family: var(--typewriter); font-size: 15px; color: var(--ink-type); }
.btn-pen { border: 0; background: transparent; cursor: pointer; font-family: var(--typewriter); font-size: 17px; line-height: 1.2; color: var(--ink-type); padding: 2px 4px; position: relative; letter-spacing: .03em; }
.btn-pen::after { content: ''; position: absolute; left: 2px; right: 2px; bottom: -1px; height: 2px; background: currentColor; opacity: .55; border-radius: 2px; transform: rotate(-1.2deg); }
.btn-pen:hover::after { opacity: 1; }
.btn-pen[disabled] { opacity: .45; cursor: default; }
.label .err { font-family: var(--typewriter); font-size: 14px; color: #8a2b28; min-height: 24px; margin-top: 8px; }
.cover .hint { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); font-family: var(--typewriter); font-size: 13px; letter-spacing: .06em; text-transform: lowercase; color: #f3efe4; background: rgba(20,14,12,.55); padding: 6px 14px; border-radius: 3px; max-width: 86vw; text-align: center; line-height: 1.4; }

/* ---------- the pages ---------- */
.page-wrap { position: relative; }
.page {
  position: relative; min-height: 100vh; color: var(--ink); line-height: var(--line);
  padding: calc(159px * var(--ts)) 40px calc(var(--line) * 3) calc(var(--margin-w) + 18px);
  /* the real scanned page: blank top strip, then a band of four rules repeated; the left tiles carry the red margin */
  background-color: #eeeadc;
  background-image: url(/real/tile-top-left.jpg), url(/real/tile-top-mid.jpg), url(/real/tile-left.jpg), url(/real/tile-mid.jpg);
  background-repeat: no-repeat, repeat-x, repeat-y, repeat;
  background-size: calc(228px * var(--ts)) var(--top-h), calc(499px * var(--ts)) var(--top-h), calc(228px * var(--ts)) calc(var(--line) * 4), calc(499px * var(--ts)) calc(var(--line) * 4);
  background-position: 0 0, 0 0, 0 var(--top-h), 0 var(--top-h);
  box-shadow: inset 22px 0 46px -26px rgba(0,0,0,.42);
}
.page > *:not(.spine):not(.ink-layer) { position: relative; z-index: 1; }

/* text on the rules */
.typed { font-family: var(--typewriter); font-size: calc(21px * var(--ts)); line-height: var(--line); color: var(--ink-type); mix-blend-mode: multiply; filter: url(#inkbleed); }
.typed.small { font-family: var(--typed); font-size: max(13px, calc(15.5px * var(--ts))); letter-spacing: .03em; color: var(--ink-2); filter: none; }
.pen { font-family: var(--typewriter); color: var(--ink-type); font-size: max(13px, calc(15.5px * var(--ts))); line-height: var(--line); mix-blend-mode: multiply; }
.hand { font-family: var(--pen-font); color: var(--pen); font-size: calc(24px * var(--ts)); line-height: var(--line); mix-blend-mode: multiply; }
.hand.black { color: var(--pen-black); } .hand.red { color: var(--pen-red); } .hand.faint { opacity: .6; }
.typed .pen, .small-ui .pen, .in-margin .pen, .typed .hand { display: inline-block; vertical-align: top; line-height: var(--line); }
.pen.black { color: var(--ink-type); } .pen.red { color: #8a2b28; } .pen.faint { opacity: .6; }
.poem-body { white-space: pre-wrap; margin: 0; font-family: var(--typewriter); font-size: calc(23px * var(--ts)); line-height: var(--line); color: var(--ink-type); mix-blend-mode: multiply; filter: url(#inkbleed); }
.poem-body .ch { display: inline-block; position: relative; }
.poem-body .w { white-space: nowrap; }
.poem-title { font-family: var(--typewriter); font-weight: 400; font-size: calc(23px * var(--ts)); line-height: var(--line); margin: 0; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-type); position: relative; display: inline-block; vertical-align: top; mix-blend-mode: multiply; filter: url(#inkbleed); }
.poem-title a { text-decoration: none; }
.poem-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.in-margin { position: absolute; right: calc(100% + 30px); width: calc(var(--margin-w) - 26px); text-align: right; top: 0; }
.in-margin .pen { font-size: max(12px, calc(14px * var(--ts))); line-height: 1.25; display: block; letter-spacing: .02em; }
.entry { position: relative; margin-bottom: calc(var(--line) * 2); max-width: var(--text-w); }
.entry .more { font-family: var(--typed); font-size: inherit; color: var(--ink-2); text-decoration: none; }
.entry .more:hover { color: var(--ink); text-decoration: underline; }
.fade { position: relative; max-height: calc(var(--line) * 10); filter: none; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 98%); mask-image: linear-gradient(to bottom, #000 55%, transparent 98%); }

/* pen circle around a title */
.circle-svg { position: absolute; left: -14px; top: -8px; width: calc(100% + 28px); height: calc(100% + 16px); pointer-events: none; overflow: visible; }
.circle-svg path { fill: none; stroke: var(--pen); stroke-width: 1.8; stroke-linecap: round; opacity: .85; }
.circle-btn { display: block; margin-left: auto; border: 0; background: none; cursor: pointer; font-family: var(--typewriter); font-size: max(12px, calc(14px * var(--ts))); color: var(--ink-type); opacity: .55; padding: 0; line-height: 1.25; text-align: right; }
.circle-btn:hover, .circle-btn.on { opacity: 1; }
.circled-by { font-family: var(--pen-font); font-size: 19px; color: var(--pen); opacity: .8; line-height: 1.1; }

/* ---------- things on the page ---------- */
.taped { position: relative; display: inline-block; }
.tape {
  position: absolute; z-index: 3; width: 84px; height: 24px; left: 50%; top: -12px; margin-left: -42px;
  background: linear-gradient(90deg, rgba(246,238,210,.5), rgba(250,245,225,.72) 40%, rgba(246,238,210,.55));
  box-shadow: 0 1px 1px rgba(0,0,0,.12), inset 0 0 6px rgba(255,255,255,.35); transform: rotate(-2.5deg);
  clip-path: polygon(0 3px, 2% 0, 4% 3px, 6% 0, 8% 2px, 100% 1px, 98% 100%, 95% 96%, 4% 100%, 2% 96%, 0 100%);
}
.tape.tl { left: -22px; margin-left: 0; top: 12px; transform: rotate(-45deg); }
.tape.tr { left: auto; right: -22px; margin-left: 0; top: 12px; transform: rotate(45deg); }
.tape.br { left: auto; right: -22px; margin-left: 0; top: auto; bottom: 12px; transform: rotate(-45deg); }
.print { background: #fdfcf9; padding: 7px; box-shadow: 0 1px 1px rgba(0,0,0,.15), 0 8px 16px -6px rgba(0,0,0,.4), 0 26px 40px -22px rgba(0,0,0,.4); }
.print img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.03); }
.polaroid { background: linear-gradient(180deg, #fbfaf6, #f3f1ea); padding: 14px 14px 52px; width: 236px; box-shadow: 0 1px 1px rgba(0,0,0,.18), 0 10px 20px -8px rgba(0,0,0,.45), 0 30px 46px -24px rgba(0,0,0,.45); }
.polaroid .photo { aspect-ratio: 1; background: #17161a; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }
.polaroid .photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.05) brightness(1.02); }
.polaroid .cap { position: absolute; left: 14px; right: 14px; bottom: 12px; font-family: var(--typewriter); font-size: 14px; color: var(--ink-type); line-height: 1.2; text-align: center; letter-spacing: .02em; }
.empty-photo { width: 100%; height: 100%; display: grid; place-items: center; color: rgba(255,255,255,.35); font-family: var(--sans); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; text-align: center; padding: 20px; }
.photo-row { display: flex; gap: 42px 36px; flex-wrap: wrap; align-items: flex-start; margin: var(--line) 0 var(--line); padding-top: 12px; }
.photo-row .taped { transform: rotate(var(--r, 0deg)); }
.photo-row .taped:hover { z-index: 4; }

/* coffee ring */
.ring { position: absolute; width: 190px; height: 190px; border-radius: 50%; pointer-events: none; mix-blend-mode: multiply; opacity: .55;
  background: radial-gradient(circle, transparent 60%, rgba(120, 78, 40, .25) 63%, rgba(120, 78, 40, .55) 66%, rgba(120, 78, 40, .25) 70%, transparent 74%);
  filter: blur(.4px); }
.ring::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, transparent 66%, rgba(120,78,40,.35) 68%, transparent 71%); transform: rotate(20deg) translate(3px, 2px); }

/* torn scrap taped in (song list) */
.scrap { position: relative; display: inline-block; text-align: left; background: #fbf8ef; padding: 18px 26px 22px 40px; color: var(--ink); max-width: 380px;
  background-image: repeating-linear-gradient(to bottom, transparent 0 27px, rgba(90,125,178,.35) 27px 28px); background-size: 100% 28px; line-height: 28px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)) drop-shadow(0 10px 14px rgba(0,0,0,.25));
  clip-path: polygon(0 2%, 4% 0, 9% 2.5%, 15% .5%, 21% 3%, 27% 1%, 34% 2.5%, 40% 0, 47% 2%, 54% .5%, 61% 3%, 69% 1%, 76% 2.5%, 83% 0, 89% 2%, 95% .5%, 100% 2%, 100% 98%, 96% 100%, 90% 97.5%, 84% 99.5%, 78% 97%, 71% 99%, 65% 97.5%, 58% 100%, 51% 98%, 45% 99.5%, 38% 97%, 31% 99%, 24% 97.5%, 17% 100%, 10% 98%, 4% 99.5%, 0 98%); }
.scrap::before { content: ''; position: absolute; left: 28px; top: 0; bottom: 0; width: 1px; background: var(--margin-red); }
.scrap .typed { font-size: 15px; line-height: 28px; }
.scrap .pen { font-size: 13px; line-height: 28px; color: var(--ink-2); }

.index-card { position: relative; background: #fffdf7; color: var(--ink); padding: 8px 18px 16px; line-height: 24px; width: 100%; max-width: 330px;
  background-image: linear-gradient(to bottom, transparent 30px, rgba(200,80,74,.55) 30px, rgba(200,80,74,.55) 31px, transparent 31px), repeating-linear-gradient(to bottom, transparent 0 23px, rgba(90,125,178,.35) 23px 24px);
  background-size: 100% 100%, 100% 24px; background-position: 0 0, 0 32px;
  box-shadow: 0 1px 1px rgba(0,0,0,.2), 0 6px 14px -4px rgba(0,0,0,.35); }
.index-card .who { font-family: var(--typed); font-size: 11px; letter-spacing: .06em; color: var(--pencil); line-height: 24px; }
.index-card .song { font-family: var(--pen-font); font-size: 27px; line-height: 24px; color: var(--pen-black); margin-top: 4px; }
.index-card .artist { font-family: var(--pen-font); font-size: 21px; color: #3d3d46; }
.index-card .why { font-family: var(--pen-font); font-size: 20px; color: var(--pen); }

/* ---------- the iPod (silver classic, front, lying on the page) ---------- */
.ipod-wrap { position: relative; margin: var(--line) 0 0; }
.ipod-scene { position: relative; width: 780px; height: 560px; transform-origin: 0 0; }
.ipod-shadow { position: absolute; left: 50%; top: 66px; width: 250px; height: 420px; margin-left: -118px; border-radius: 28px; transform: rotate(-4deg);
  background: rgba(0,0,0,.55); filter: blur(22px); opacity: .55; }
.ipod-shadow.tight { top: 46px; margin-left: -128px; filter: blur(5px); opacity: .5; background: rgba(0,0,0,.6); }
.ipod { position: absolute; left: 50%; top: 40px; width: 262px; height: 438px; margin-left: -131px; transform: rotate(-4deg); }
.ipod svg.body { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ipod .screen { position: absolute; left: 11.5%; top: 9.2%; width: 77%; height: 34.6%; border-radius: 3px; overflow: hidden; background: #05070a; }
.ipod .screen .sb { display: flex; justify-content: space-between; align-items: center; height: 15%; padding: 0 5%; font-family: var(--sans); font-size: 9.5px; font-weight: 600; color: #e6ebf1; text-shadow: 0 -1px 0 rgba(0,0,0,.7);
  background: linear-gradient(180deg, #8a939e 0%, #58616c 46%, #434b55 52%, #30373f 100%); border-bottom: 1px solid #000; }
.ipod .screen .sb .bat { width: 17px; height: 8px; border: 1px solid #d5dbe2; border-radius: 2px; position: relative; }
.ipod .screen .sb .bat::after { content: ''; position: absolute; left: 1px; top: 1px; bottom: 1px; width: 72%; background: linear-gradient(180deg, #a9e88a, #47b33f); }
.ipod .screen .art { position: absolute; left: 5%; top: 21%; width: 40%; aspect-ratio: 1; object-fit: cover; background: #1a1f26; box-shadow: 0 2px 6px rgba(0,0,0,.8); }
.ipod .screen .art-ref { position: absolute; left: 5%; top: 92%; width: 40%; height: 8%; background: linear-gradient(180deg, rgba(255,255,255,.12), transparent); }
.ipod .screen .txt { position: absolute; left: 50%; right: 5%; top: 24%; color: #f3f6f9; font-family: var(--sans); font-size: 10.5px; line-height: 1.45; text-shadow: 0 1px 1px rgba(0,0,0,.9); }
.ipod .screen .txt b { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ipod .screen .txt span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #c3ccd6; }
.ipod .screen .time { position: absolute; left: 50%; right: 5%; bottom: 18%; display: flex; justify-content: space-between; font-family: var(--sans); font-size: 8.5px; color: #b8c1cc; }
.ipod .screen .prog { position: absolute; left: 50%; right: 5%; bottom: 8%; height: 6px; border-radius: 3px; background: linear-gradient(180deg, #1f242b, #39404a); box-shadow: inset 0 1px 2px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.06); }
.ipod .screen .prog i { display: block; height: 100%; width: 0%; border-radius: 3px; background: linear-gradient(180deg, #93c3ff, #3a78e0 55%, #2b60be); }
.ipod .screen .glass { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(104deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.08) 22%, rgba(255,255,255,.02) 36%, transparent 40%, transparent 72%, rgba(255,255,255,.05) 100%); }
.ipod .hit { position: absolute; left: 50%; top: 74.4%; width: 66%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; cursor: pointer; }
.ipod .hit .c { position: absolute; left: 50%; top: 50%; width: 38%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; }
.ipod .hit .c:active { background: rgba(0,0,0,.04); }
.ipod .hit .menu, .ipod .hit .prev, .ipod .hit .next, .ipod .hit .play { position: absolute; width: 30%; height: 30%; }
.ipod .hit .menu { left: 35%; top: 0; } .ipod .hit .play { left: 35%; bottom: 0; } .ipod .hit .prev { left: 0; top: 35%; } .ipod .hit .next { right: 0; top: 35%; }
.ipod .sticker { position: absolute; border-radius: 50%; overflow: hidden; box-shadow: 0 1px 1px rgba(0,0,0,.3), inset 0 0 0 3px #d7322c; transform: rotate(-12deg); left: 7%; bottom: 8%; width: 16%; aspect-ratio: 1; }
.ipod .sticker img { width: 100%; height: 100%; object-fit: cover; }
/* photo of the real device: the live screen and wheel are placed by the measured geometry of /real/ipod.png */
.ipod.photo { width: calc(210px * var(--ts)); height: calc(357px * var(--ts)); }
.ipod.photo .screen .sb { font-size: 8px; height: 14%; } .ipod.photo .screen .sb .bat { width: 13px; height: 6px; } .ipod.photo .screen .txt { font-size: 8.5px; top: 22%; } .ipod.photo .screen .time { font-size: 7px; } .ipod.photo .screen .prog { height: 4px; }
.ipod.photo img.real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)) drop-shadow(0 3px 3px rgba(0,0,0,.18)) drop-shadow(10px 22px 22px rgba(0,0,0,.30)); }
.ipod.photo .screen { left: 10.1%; top: 8.2%; width: 79.6%; height: 37.6%; border-radius: 2px; }
.ipod.photo .hit { left: 49.1%; top: 71.1%; width: 58.6%; }
.ipod.photo ~ .ipod-shadow, .ipod-float .ipod.photo + .ipod-shadow { display: none; }
.ipod-scene:has(.ipod.photo) .ipod-shadow { display: none; }
.ipod.photo .sticker { left: 12%; bottom: 6%; width: 14%; }
.ipod-caption { max-width: var(--text-w); }

/* page-wide doodles */
.ink-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: visible; }
.ink-layer { mix-blend-mode: multiply; }
.ink-layer path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; }
.page.penning .ink-layer { pointer-events: auto; cursor: crosshair; touch-action: none; }
.page.penning .entry a, .page.penning button, .page.penning input, .page.penning textarea { pointer-events: none; }
.pen-tools { position: fixed; right: 18px; bottom: 18px; z-index: 30; display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 30px;
  background: rgba(20,17,15,.9); color: #e8e2d6; box-shadow: 0 6px 20px rgba(0,0,0,.4); font-family: var(--sans); font-size: 11px; letter-spacing: .08em; }
.pen-tools .swatch { width: 16px; height: 16px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.pen-tools .swatch.on { border-color: #fff; }
.pen-tools button { border: 1px solid rgba(255,255,255,.35); background: transparent; color: #e8e2d6; border-radius: 20px; padding: 4px 10px; font-family: var(--sans); font-size: 11px; letter-spacing: .08em; cursor: pointer; }
.pen-tools button.on { background: #e8e2d6; color: #1a1714; }
.pen-tools button[disabled] { opacity: .4; cursor: default; }

/* month tabs on the page edge */
.tabs { position: sticky; top: 90px; height: 0; z-index: 3; }
.tabs-inner { position: absolute; right: 0; top: 0; display: flex; flex-direction: column; gap: 6px; }
.tab { border-radius: 4px 0 0 4px; box-shadow: -1px 1px 2px rgba(0,0,0,.3); }
.tab { width: 32px; height: 68px; border-radius: 0 4px 4px 0; text-decoration: none; display: grid; place-items: center; color: rgba(0,0,0,.65);
  font-family: var(--typewriter); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; writing-mode: vertical-rl;
  box-shadow: 1px 1px 2px rgba(0,0,0,.3), inset 1px 0 0 rgba(255,255,255,.35); opacity: .92; transition: transform .15s ease; }
.tab:hover { transform: translateX(-3px); }
.tab.now { font-weight: 700; }
.tab.c0 { background: #d9c3a5; } .tab.c1 { background: #cdb7b0; } .tab.c2 { background: #b9c4b1; } .tab.c3 { background: #aebccb; } .tab.c4 { background: #d2c9a5; } .tab.c5 { background: #c6b4c4; }

/* ---------- inputs & controls (typed / pen) ---------- */
.field { margin-bottom: 10px; }
.field label { display: block; font-family: var(--typed); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); line-height: 20px; }
.field input, .field textarea, .field select { width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(0,0,0,.35); padding: 2px 2px 4px; font-family: var(--pen-font); font-size: 24px; line-height: 1.15; color: var(--pen); outline: none; border-radius: 0; }
.field textarea { min-height: 92px; resize: vertical; line-height: var(--line); background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--line) - 1px), rgba(0,0,0,.18) calc(var(--line) - 1px) var(--line)); background-size: 100% var(--line); border-bottom: 0; }
.field input:focus, .field textarea:focus { border-color: var(--pen); }
.field.typed-in input, .field.typed-in textarea { font-family: var(--typed); font-size: 15.5px; color: var(--ink); }
.field.typed-in textarea { line-height: var(--line); }
.field select { font-family: var(--typed); font-size: 14px; color: var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: rgba(0,0,0,.28); }
.btn { display: inline-block; cursor: pointer; border: 1px solid rgba(0,0,0,.55); background: transparent; color: var(--ink); padding: 6px 14px; border-radius: 2px;
  font-family: var(--typed); font-size: 13px; letter-spacing: .06em; text-decoration: none; transition: background .12s ease; }
.btn:hover { background: rgba(0,0,0,.06); }
.btn.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); } .btn.solid:hover { background: #000; }
.btn[disabled] { opacity: .45; cursor: default; }
.msg { font-family: var(--pen-font); font-size: 21px; color: var(--pen-red); min-height: 26px; line-height: 1.2; }
.msg.ok { color: #2f5d3a; }
.hidden { display: none !important; }
.hr { height: 0; border-top: 1px solid rgba(0,0,0,.12); margin: var(--line) 0 calc(var(--line) - 1px); }
.small-ui { font-family: var(--typewriter); font-size: max(13px, calc(14.5px * var(--ts))); letter-spacing: .04em; text-transform: lowercase; color: var(--ink-2); line-height: var(--line); display: flex; flex-wrap: wrap; gap: 0 6px; align-items: flex-start; }
.small-ui a { text-decoration: underline; text-decoration-color: rgba(0,0,0,.3); text-underline-offset: 3px; } .small-ui a:hover { text-decoration-color: var(--ink); }

/* ---------- page turn: hinged strips, lit, casting a shadow ---------- */
.turn { position: fixed; top: 0; perspective: 2000px; perspective-origin: 30% 50%; pointer-events: none; }
.turn.static { overflow: hidden; }
.turn .strip { position: absolute; top: 0; transform-style: preserve-3d; transform-origin: 0 50%; will-change: transform; }
.turn .face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.turn .shade { position: absolute; inset: 0; background: #14110d; opacity: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.turn .spec { position: absolute; inset: 0; background: #fff; opacity: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.turn .back { position: absolute; inset: 0; transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden;
  background-color: #eeeadc;
  background-image: url(/real/tile-top-left.jpg), url(/real/tile-top-mid.jpg), url(/real/tile-left.jpg), url(/real/tile-mid.jpg);
  background-repeat: no-repeat, repeat-x, repeat-y, repeat;
  background-size: calc(228px * var(--ts)) var(--top-h), calc(499px * var(--ts)) var(--top-h), calc(228px * var(--ts)) calc(var(--line) * 4), calc(499px * var(--ts)) calc(var(--line) * 4);
  background-position: 0 0, 0 0, 0 var(--top-h), 0 var(--top-h); filter: brightness(.97); }
.turn .back.board { background: #f3efe3; }
.turn .backshade { position: absolute; inset: 0; background: #1a1610; opacity: 0; }
.turn .edge { position: absolute; left: 100%; top: 0; width: 7px; height: 100%; transform-origin: 0 50%; transform: rotateY(90deg); background: linear-gradient(90deg, #d8d2c3, #efe9db 50%, #cfc8b8); }
.turn-shadow { position: absolute; left: 0; top: 0; height: 100%; width: 0; opacity: 0; background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.42) 100%); }
.inside-cover { position: absolute; inset: 0; padding: 7vh 9vw; color: #2a2a2e; font-family: var(--sans); }
.ic-title { font-family: var(--serif); font-size: clamp(22px, 3vw, 34px); letter-spacing: .02em; margin-bottom: 14px; }
.ic-table { width: 100%; border-collapse: collapse; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.ic-table th, .ic-table td { border: 1px solid #2a2a2e; height: 30px; padding: 0 8px; text-align: left; font-weight: 600; }
.ic-table th:first-child { width: 68px; }
.ic-lines { display: flex; gap: 40px; margin-top: 30px; }
.ic-lines > div { flex: 1; border-bottom: 1px solid #2a2a2e; padding-bottom: 4px; font-family: var(--serif); font-size: 14px; }
.stage.busy { pointer-events: none; }
@keyframes riseIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.view { animation: riseIn .5s ease both; }
@media (prefers-reduced-motion: reduce) { .turn { display: none; } .view { animation: none; } }

/* ---------- the iPod lying across the corner of a poem ---------- */
.ipod-host { position: relative; max-width: var(--text-w); min-height: calc(var(--line) * 14); }
.ipod-float { position: absolute; left: calc(100% - 340px * var(--ts)); top: calc(var(--line) * 1.5); width: calc(300px * var(--ts)); height: calc(430px * var(--ts)); z-index: 6; pointer-events: none; }
.ipod-float .ipod-scene { width: calc(300px * var(--ts)); height: calc(400px * var(--ts)); }
.ipod-float .ipod { pointer-events: auto; transform: rotate(-7deg); left: 50%; margin-left: calc(-105px * var(--ts)); top: 10px; }
.ipod-float .ipod-caption { top: calc(385px * var(--ts)); }
.ipod-float .ipod-shadow { transform: rotate(-13deg); }
.ipod-float .ipod-caption { position: absolute; left: 8px; width: calc(300px * var(--ts)); pointer-events: auto; }
.ipod-float .ipod-caption .pen, .ipod-caption span { line-height: var(--line); display: block; }
@media (max-width: 1000px) {
  .ipod-host { min-height: 0; }
  .ipod-float { position: relative; left: 0; top: 0; width: 100%; height: auto; margin: var(--line) 0 0; }
  .ipod-float .ipod-scene { margin: 0 auto; }
  .ipod-float .ipod-caption { position: static; width: auto; margin-top: 4px; }
}

/* ---------- the sticky note ---------- */
.sticky-host { position: relative; max-width: var(--text-w); margin: var(--line) 0; min-height: calc(var(--line) * 8); }
.sticky-slot { position: relative; width: calc(230px * var(--ts)); min-height: calc(230px * var(--ts)); margin-left: auto; margin-right: 6%; }
.sticky { position: absolute; left: 0; top: 0; width: calc(230px * var(--ts)); min-height: calc(230px * var(--ts)); padding: calc(24px * var(--ts)) calc(20px * var(--ts)) calc(18px * var(--ts)); cursor: pointer; z-index: 6;
  color: #2a2a30; font-family: var(--typewriter); font-size: max(14px, calc(16px * var(--ts))); line-height: 1.3; transform: rotate(-2deg);
  background: linear-gradient(180deg, #f2e58a 0%, #fbef9c 12%, #fbf1a8 55%, #f5e78c 100%);
  box-shadow: 0 1px 1px rgba(0,0,0,.12), 1px 6px 10px -5px rgba(0,0,0,.28), 6px 18px 22px -14px rgba(0,0,0,.35); }
.sticky::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .9 0 0 0 0 .85 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); }
.sticky::after { /* the bottom corner lifts a little */
  content: ''; position: absolute; right: 0; bottom: 0; width: 26%; height: 26%; pointer-events: none;
  background: linear-gradient(225deg, rgba(0,0,0,.0) 0 48%, rgba(0,0,0,.06) 50%, rgba(255,255,255,.35) 60%, rgba(0,0,0,.02) 100%); }
.sticky.pink { background: linear-gradient(180deg, #f3c9d1 0%, #fadde2 12%, #fbe3e7 55%, #f4cfd6 100%); transform: rotate(2deg); cursor: default; }
.sticky:hover:not(.writing):not(.pink) { transform: rotate(-2deg) translateY(-2px); }
.sticky .s-title { font-size: max(17px, calc(20px * var(--ts))); line-height: 1.2; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .03em; }
.sticky .s-small { font-size: max(15px, calc(18px * var(--ts))); color: rgba(42,42,48,.7); line-height: 1.2; }
.sticky .s-foot { position: absolute; left: calc(20px * var(--ts)); right: calc(20px * var(--ts)); bottom: calc(14px * var(--ts)); font-size: max(14px, calc(17px * var(--ts))); color: rgba(42,42,48,.6); line-height: 1.15; }
.sticky .s-foot a { color: inherit; text-decoration: underline; }
.sticky .s-song { font-family: var(--pen-font); font-size: calc(28px * var(--ts)); line-height: 1.05; color: #1e1e24; margin-top: 4px; }
.sticky .s-artist { font-family: var(--pen-font); font-size: calc(21px * var(--ts)); color: #3a3a44; }
.sticky .s-why { font-family: var(--pen-font); font-size: calc(19px * var(--ts)); color: var(--pen); margin-top: 6px; }
.sticky .s-by { font-family: var(--pen-font); font-size: calc(18px * var(--ts)); color: var(--pen); }
.sticky.writing { cursor: auto; }
.sticky input { width: 100%; border: 0; border-bottom: 1px solid rgba(0,0,0,.18); background: transparent; outline: none; font-family: var(--pen-font); font-size: calc(23px * var(--ts)); line-height: 1.3; color: var(--pen); padding: 2px 0; margin-bottom: 4px; }
.sticky input::placeholder { color: rgba(31,42,90,.35); }
.sticky .s-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; }
@media (max-width: 720px) { .sticky-slot { margin: 0 auto; } }

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  :root { --ts: .77778; --line: 28px; --spine-w: 0px; }
  .page { padding-right: 16px; }
  .pen-tools { right: 10px; bottom: 10px; left: 10px; justify-content: center; padding: 6px 10px; gap: 8px; font-size: 10px; }
  .pen-tools button { padding: 4px 9px; font-size: 10px; }
  .photo-row { justify-content: center; gap: 30px 20px; }
  .polaroid { width: min(236px, 100%); }
  .print { max-width: 100%; }
  .taped { max-width: 100%; }
  .scrap { max-width: 100%; padding: 14px 16px 16px 30px; }
  .scrap::before { left: 20px; }
  .ipod-caption { text-align: center; }
  .fade { max-height: calc(var(--line) * 8); }
  .page { padding: 44px 20px 60px calc(var(--spine-w) + var(--margin-w) + 12px); }
  .in-margin { right: calc(100% + 18px); width: calc(var(--margin-w) - 14px); }
  .tabs { display: none; }
  .label { width: 74%; padding: 16px 18px 18px; }
  .label .line input { font-size: 22px; }
}
@media print { .no-print, .grain, .desk-surface, .tabs { display: none !important; } body { background: #fff; } }

/* small phones: slightly smaller paper so lines hold more words */
@media (max-width: 430px) {
  :root { --ts: .72222; --line: 26px; }
  .page { padding-left: calc(var(--margin-w) + 12px); padding-right: 12px; }
  .in-margin { right: calc(100% + 10px); width: calc(var(--margin-w) - 8px); }
  .label { padding: 16px 16px 18px; }
  .label h1 { font-size: 30px; }
  .label .line span { font-size: 13px; }
  .label .line input { font-size: 16px; }
  .label .fine { font-size: 8.5px; } .label .fine span:last-child { display: none; }
  .ipod-float .ipod-scene { margin: 0 auto; }
}

/* ---------- wide screens: poems in a column, everything else scattered down the blank side ---------- */
@media (min-width: 1200px) {
  #entries.wide { position: relative; min-height: 100vh; }
  #entries.wide .side { position: absolute; left: 0; right: 30px; top: 0; pointer-events: none; }
  #entries.wide .side-item { position: absolute; width: max-content; max-width: min(560px, 100%); pointer-events: auto; }
  #entries.wide .pair { display: flex; gap: 26px; align-items: flex-start; }
  #entries.wide .pair .taped { transform: rotate(var(--r, 0deg)); }
  #entries.wide .side-item .photo-row, #entries.wide .side-item .taped { margin: 0; padding: 0; }
  #entries.wide .side-item .ipod-wrap { position: relative; left: auto; top: auto; margin: 0; width: calc(300px * var(--ts)); height: calc(440px * var(--ts)); }
  #entries.wide .side-item .ipod-caption { position: absolute; top: calc(385px * var(--ts)); left: 8px; width: calc(300px * var(--ts)); }
  #entries.wide .side-item .sticky-host, #entries.wide .side-item .sticky-slot { margin: 0; min-height: 0; }
  #entries.wide .side-item .sticky-host { width: calc(230px * var(--ts)); }
  #entries.wide .side-item .sticky-host > .typed.small { display: none; }
  #entries.wide .side-item .sticky { position: relative; }
  #entries.wide .side-item > div[style] { text-align: left !important; margin: 0 !important; }
}