/* ============================================
The Feeling — Letter Page System (Milestone 3)
============================================
The paper becomes a keepsake book: each authored
section is ONE long physical sheet of stationery.
The sheet slides inside the paper window (vertical
scroll lives in the sheet only — never the
browser), and calm horizontal glides move between
the sheets.
The words live in content/letter.js — edit
that file only. Layout lives here.
- Generous margins, comfortable reading measure
- Luxury stationery typography
- Understated page-dot indicator
- Quiet navigation arrows (desktop only)
- One unified printed border around every sheet
============================================ */
/* During reading the paper is a sheet resting in the viewport, and each
page is a LONG sheet of the same paper sliding inside it — the reader
scrolls vertically INSIDE the sheet (momentum on touch, wheel on
desktop) and swipes horizontally between sheets. The browser itself
never becomes the scroll container. touch-action stays pan-y so the
browser never hijacks horizontal swipes. */
.paper--reading {
touch-action: pan-y;
overscroll-behavior: contain;
}
/* The book — the paper window is an invisible viewport: it only clips
the sheet so it cannot spill past the screen. The paper's identity
(material, rounded corners, shadow, edge, border, folio) lives on the
sheet itself, so the whole object scrolls together as one physical
sheet — never a frame with words sliding behind it. */
.paper__pages {
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden;
overscroll-behavior: contain;
pointer-events: auto;
}
/* One long physical sheet. The page itself is the scroll container:
overflow lives here (never the browser), the scrollbar is hidden so
the sheet simply moves beneath the reader's hand, and overscroll is
contained so the browser never takes over. */
.paper__page {
position: absolute;
inset: 0;
z-index: 0;
opacity: 0;
visibility: hidden;
transform: translateX(9%);
pointer-events: none;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch; /* legacy iOS momentum */
scrollbar-width: none;
}
.paper__page::-webkit-scrollbar {
display: none;
}
.paper__page--active {
z-index: 1;
opacity: 1;
visibility: visible;
pointer-events: auto;
/* Only the page actually gliding deserves a compositor layer */
will-change: transform, opacity;
}
/* The long sheet IS the paper — the same premium cotton material as the
envelope-phase letter (--paper-material, experience.css), now carrying
the whole physical identity: rounded corners, the precision-cut
border, the cardstock edge and the resting shadow. Every one of them
scrolls with the sheet, so the border, corners, texture, fibres,
vines and folio move together as one handcrafted object. */
.paper__page-sheet {
position: relative;
width: 100%;
min-height: 100%;
background: var(--paper-material);
border-radius: 6px;
border: 1px solid rgba(206, 186, 152, 0.3);
box-shadow:
1px 2.5px 0 0 rgba(214, 196, 162, 0.5),
0 2px 5px rgba(70, 45, 20, 0.18),
0 16px 40px rgba(70, 45, 20, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.9),
inset 0 -1px 0 rgba(180, 150, 105, 0.15),
inset 0 0 120px rgba(180, 150, 105, 0.06);
}
/* Reading column — the printable area of the long sheet, set like an
expensive printed page: generous margins all round (the opening
screen breathes — border, whitespace, title, then the story), a
comfortable reading measure, and the column always centred. */
.paper__page-inner {
position: relative; /* paints above the printed border (z-0) */
z-index: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
width: 100%;
max-width: 36em;
margin: 0 auto;
padding: clamp(3.2rem, 9vw, 6.5rem) clamp(1.6rem, 6vw, 4.5rem) clamp(3rem, 8vw, 6rem);
}
/* --------------------------------------------------
Book-page frame — a quiet double rule around the
reading column, like the printed rules of a luxury
keepsake: an outer sage line and an inner lavender
line (the purple thread, Milestone 4.1). The frame
belongs to the sheet — it scrolls with the paper —
and lives well inside the reading margins, so it
never touches the words. A breath of soft lavender
light behind the text adds warmth without colour.
-------------------------------------------------- */
.paper__page-inner::before,
.paper__page-inner::after {
content: '';
position: absolute;
z-index: -1; /* behind the words, above the printed border */
pointer-events: none;
}
.paper__page-inner::before {
inset: clamp(0.55rem, 2vw, 1.3rem);
border: 1px solid rgba(151, 163, 133, 0.5);
background:
radial-gradient(130% 70% at 50% -8%, rgba(214, 204, 232, 0.15), transparent 68%);
}
.paper__page-inner::after {
inset: calc(clamp(0.55rem, 2vw, 1.3rem) + 4px);
border: 1px solid rgba(156, 141, 184, 0.38);
}
/* --------------------------------------------------
Printed folio — a tiny lavender page number at the
top of each sheet, in the same italic hand as the
title. The quiet purple accent that runs through
the whole reading (Milestone 4.1).
-------------------------------------------------- */
.paper__pages {
counter-reset: letter-page;
}
.paper__page {
counter-increment: letter-page;
}
.paper__page--active .paper__page-sheet::after {
content: counter(letter-page);
position: absolute;
top: clamp(1.2rem, 3vw, 2rem);
left: 50%;
transform: translateX(-50%);
z-index: 2;
font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
font-style: italic;
font-size: clamp(0.8rem, 1.7vw, 1.05rem);
letter-spacing: 0.18em;
color: #8A7CA6;
opacity: 0.55;
pointer-events: none;
}
/* --------------------------------------------------
Typography — luxury stationery
-------------------------------------------------- */
.paper__page-title {
font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(1.9rem, 6.5vw, 3.6rem);
line-height: 1.15;
letter-spacing: 0.01em;
color: #33281C;
text-align: center;
}
.paper__page-subtitle {
font-family: 'Inter', -apple-system, sans-serif;
font-size: clamp(0.75rem, 1.6vw, 0.9rem);
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #9C9288;
text-align: center;
margin-top: 1.1rem;
}
.paper__page-heading {
font-family: 'Inter', -apple-system, sans-serif;
font-size: clamp(0.68rem, 1.4vw, 0.85rem);
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: #8B7355;
text-align: center;
margin-top: 1.6rem;
margin-bottom: 2rem;
}
/* Ornamental rule — same quiet divider as the cover */
.paper__page-rule {
width: clamp(4rem, 30%, 6.5rem);
color: #C4A882;
opacity: 0.6;
margin: 1.5rem auto 2.4rem;
}
.paper__page-rule svg {
display: block;
width: 100%;
height: auto;
}
.paper__page-body {
font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
font-size: clamp(1.05rem, 2.1vw, 1.3rem);
line-height: 1.9;
color: #3A3329;
text-align: left;
font-feature-settings: 'liga', 'kern';
}
/* The {{PLACEHOLDER}} draft notes — clearly mutable, never loud.
Tinted toward lavender so the purple thread runs even through the
quiet notes (Milestone 4.1). */
.paper__page-token {
font-family: 'Inter', -apple-system, sans-serif;
font-size: clamp(0.72rem, 1.4vw, 0.84rem);
letter-spacing: 0.05em;
color: #A79AC2;
margin-bottom: 1.8em;
}
.paper__page-token + .paper__page-paragraph {
margin-top: 1.8em;
}
.paper__page-paragraph + .paper__page-paragraph {
margin-top: 1.4em;
}
/* Drop cap — the first paragraph opens like a printed keepsake */
.paper__page-paragraph--lead::first-letter {
font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
font-style: italic;
font-weight: 500;
float: left;
font-size: 3.1em;
line-height: 0.85;
padding: 0.06em 0.18em 0 0;
color: #8B7355;
}
.paper__page-foot {
font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
font-style: italic;
font-size: clamp(1rem, 2vw, 1.25rem);
color: #6B5D4B;
text-align: center;
margin-top: 3.4rem;
}
.paper__page-foot::before {
content: '';
display: block;
width: 3rem;
height: 1px;
background: rgba(139, 115, 85, 0.4);
margin: 0 auto 1.2rem;
}
/* --------------------------------------------------
Page indicator — understated dots
-------------------------------------------------- */
.paper__indicator {
position: absolute;
/* Below the sheet, in the paper's margin — a control, not part of
the document, so it never floats over the reading surface. It
floats in the gutter when the gutter is roomy, and tucks inside
it on very short screens so the dots are never clipped. */
bottom: max(-0.5rem, calc(-1 * clamp(12px, 3.5vh, 76px) + 0.5rem));
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
gap: 0.55rem;
opacity: 0;
transition: opacity 0.8s ease;
pointer-events: none;
}
.paper__indicator--visible {
opacity: 1;
}
.paper__indicator-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: transparent;
border: 1px solid rgba(139, 115, 85, 0.45);
transition: background 0.5s ease, border-color 0.5s ease, transform 0.5s ease;
}
.paper__indicator-dot--active {
background: #9C8DB8;
border-color: #9C8DB8;
transform: scale(1.15);
}
/* --------------------------------------------------
Navigation arrows — quiet, desktop only
-------------------------------------------------- */
.paper__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.6rem;
height: 2.6rem;
border-radius: 50%;
border: 1px solid rgba(139, 115, 85, 0.3);
background: rgba(246, 238, 220, 0.78);
color: #8B7355;
cursor: pointer;
opacity: 0.85;
/* .paper--final sets pointer-events:none on the paper — re-enable here
or the desktop arrows could never be clicked */
pointer-events: auto;
transition: opacity 0.5s ease, background 0.4s ease, border-color 0.4s ease;
}
.paper__nav svg {
display: block;
width: 1.15rem;
height: 1.15rem;
}
.paper__nav--prev {
/* Straddle the sheet's edge — outside the paper, in its margin */
left: -1.6rem;
}
.paper__nav--next {
right: -1.6rem;
}
.paper__nav:hover {
background: rgba(196, 168, 130, 0.18);
border-color: rgba(139, 115, 85, 0.5);
}
.paper__nav--hidden {
opacity: 0;
pointer-events: none;
}
.paper__nav:focus-visible {
outline: 2px solid #8B7355;
outline-offset: 2px;
}
/* Touch devices swipe — arrows would only add clutter */
@media (hover: none) {
.paper__nav {
display: none;
}
}
/* --------------------------------------------------
Printed border — one unified decorative frame
around every sheet (Milestone 4.2). Pure CSS/SVG:
two corner flourishes (full + light, placed to
break symmetry) and faint vine runs along the four
edges, printed into the paper. The reading column
is untouched — the artwork lives only in the outer
margin band and fades before the text begins.
-------------------------------------------------- */
.paper__page-sheet::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
/* Printed, not pasted: softly veiled but clearly present — the
flowers and vines should read on a phone screen, never disappear */
opacity: 0.95;
filter: saturate(0.9);
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
background-repeat:
no-repeat, no-repeat, no-repeat, no-repeat,
repeat-x, repeat-x, repeat-y, repeat-y;
background-position:
0 0, 100% 0, 0 100%, 100% 100%,
0 0, 0 100%, 0 0, 100% 0;
background-size:
clamp(100px, 22vw, 170px), clamp(100px, 22vw, 170px), clamp(100px, 22vw, 170px), clamp(100px, 22vw, 170px),
clamp(140px, 36vw, 210px) auto, clamp(140px, 36vw, 210px) auto,
auto clamp(80px, 22vh, 130px), auto clamp(80px, 22vh, 130px);
}
/* --------------------------------------------------
Reduced motion — the engine already shortens the
glides; kill the remaining CSS motion
-------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.paper__indicator-dot,
.paper__nav {
transition: none;
}
}