/* The reading pages: warm paper, quiet ink and a different keepsake for each story. */
.space-page {
  --paper: #fffdf7;
  --paper-tint: #edf0e6;
  --paper-ink: #34483d;
  --paper-muted: #657162;
  --paper-accent: #7d8866;
  --paper-line: #d9ddce;
  --paper-grain: radial-gradient(#8677590c .6px, transparent .8px);
}
.space-page:is(.design-letter, .design-journey) { --paper: #fdfcf9; --paper-tint: #eff0f5; --paper-ink: #394457; --paper-muted: #697082; --paper-accent: #8790a5; --paper-line: #dcdfe7; }
.space-page.design-minimal { --paper: #fcfefc; --paper-tint: #eaf2ef; --paper-ink: #345754; --paper-muted: #607c79; --paper-accent: #6f9690; --paper-line: #d3e2dd; }
.space-page:is(.design-panorama, .design-editorial, .design-diptych) { --paper: #fffcf5; --paper-tint: #f3ecdf; --paper-ink: #584938; --paper-muted: #7b6b56; --paper-accent: #a08760; --paper-line: #e2d7c4; }
.space-page.design-framed { --paper: #fffbf8; --paper-tint: #f6eae6; --paper-ink: #634944; --paper-muted: #856c65; --paper-accent: #ad8780; --paper-line: #e7d6cf; }
.space-page .stationery-ornament { display: block; width: 44px; height: 44px; flex-shrink: 0; color: var(--paper-accent); }
.space-page .space-body { color: var(--paper-ink); }
.space-page #main .story-section {
  position: relative;
  padding: clamp(32px, 6vw, 72px) 0;
  margin: 44px auto 36px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
}
.space-page .story-section::before { display: none; }
.space-page .story-section .story-masthead { max-width: 640px; margin: 0 auto 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.space-page .story-section .eyebrow { justify-content: flex-start; margin: 0; color: var(--paper-muted); font-size: 10px; letter-spacing: .2em; }
.space-page .story-section h2 { max-width: 640px; margin: 0 auto 28px; font: 400 clamp(25px, 3vw, 34px)/1.65 var(--serif); color: var(--paper-ink); word-break: keep-all; }
.space-page #main .story-text { max-width: 640px; margin: 0 auto; color: var(--paper-ink); font: 400 17px/1.95 var(--serif); text-align: left; white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; column-count: 1; }
.space-page #main .story-text::first-letter { float: none; margin: 0; font: inherit; color: inherit; }
.space-page .story-colophon { max-width: 640px; display: flex; align-items: center; gap: 16px; margin: 32px auto 0; color: var(--paper-muted); font: 11px/1.8 var(--sans); letter-spacing: .06em; }
.space-page .story-colophon::before { content: ''; width: 36px; height: 1px; background: var(--paper-accent); flex-shrink: 0; }
.space-page #main .memory-notebook { padding: 42px 0 28px; background: none; border-radius: 0; }
.space-page .memory-notebook .chapter-label > span { color: var(--paper-accent); }
.space-page .memory-notebook .editorial-note { color: var(--paper-muted); }
.space-page .memory-favorites { gap: 9px; margin-bottom: 36px; }
.space-page #main .memory-favorites span { border: 1px solid var(--paper-line); background: var(--paper-tint); color: var(--paper-ink); padding: 8px 15px; font-size: 12px; }
.space-page .memory-milestones { gap: 20px; }
.space-page .memory-milestones li { position: relative; padding: 24px 0; border: 0; border-top: 1px solid var(--paper-line); background: none; box-shadow: none; }
.space-page .memory-milestones li::after { display: none; }
.space-page .memory-index { font: italic 32px/1 var(--serif); color: var(--paper-accent); }
.space-page .memory-milestones h3 { font-size: 21px; color: var(--paper-ink); word-break: keep-all; }
.space-page .memory-milestones p { color: var(--paper-muted); font-size: 15px; line-height: 1.95; white-space: pre-line; }
.space-page .memory-journal { gap: 24px; margin-top: 32px; }
.space-page #main .memory-journal article { position: relative; padding: 32px; border: 0; border-top: 1px solid var(--paper-line); border-radius: 2px; background: var(--paper-tint); box-shadow: 0 7px 16px #343a2905; }
.space-page .memory-journal article::before { content: ''; position: absolute; left: 32px; top: -1px; width: 34px; height: 2px; background: var(--paper-accent); }
.space-page .memory-journal .eyebrow { font-size: 10px; letter-spacing: .08em; color: var(--paper-muted); }
.space-page .memory-journal p { color: var(--paper-ink); font: 17px/1.95 var(--serif); white-space: pre-line; }
.space-page .memory-journal small { display: block; border-top: 1px solid var(--paper-line); padding-top: 16px; color: var(--paper-muted); font-size: 11px; text-align: right; }
.space-page .letters-section { width: 100%; max-width: 880px; margin-inline: auto; }
.space-page .letters-section > .eyebrow { color: var(--paper-muted); }
.space-page .sample-letters { gap: 28px; }
.space-page #main :is(.sample-letter, .letters article, .letter-form) {
  background-color: var(--paper);
  background-image: var(--paper-grain), linear-gradient(110deg, #fff6, transparent 70%);
  background-size: 5px 5px, auto;
  border: 1px solid var(--paper-line);
  border-top: 2px solid var(--paper-accent);
  border-radius: 3px;
  padding: clamp(26px, 5vw, 52px) clamp(24px, 6vw, 64px);
  box-shadow: 0 14px 34px #343a2909;
  color: var(--paper-ink);
}
.space-page .stationery-letter-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 28px; padding-bottom: 26px; border-bottom: 1px solid var(--paper-line); }
.space-page .stationery-letter-heading > div { min-width: 0; }
.space-page .letter-stamp { color: var(--paper-muted); margin: 0 0 14px; font: 9px/1.8 var(--sans); letter-spacing: .18em; }
.space-page .letter-recipient { margin: 0; font: 400 24px/1.6 var(--serif); word-break: keep-all; }
.space-page .stationery-postage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; flex-shrink: 0; width: 72px; height: 88px; border: 1px dashed var(--paper-accent); outline: 1px solid var(--paper-line); outline-offset: -5px; color: var(--paper-accent); background: var(--paper-tint); transform: rotate(4deg); }
.space-page .stationery-postage > span { font: 7px/1 var(--sans); letter-spacing: .1em; }
.space-page #main :is(.sample-letter, .letters article) > p { max-width: 640px; font: 400 18px/2 var(--serif); color: var(--paper-ink); margin: 0 0 30px; white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; }
.space-page #main :is(.letter-signature, .letters article > .letter-signature) { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 8px 18px; border-top: 1px solid var(--paper-line); padding-top: 20px; margin: 0; color: var(--paper-muted); font: 13px/1.8 var(--serif); text-align: right; }
.space-page .letter-signature strong { font-weight: 400; }
.space-page .letter-signature time { font: 11px/1.7 var(--sans); }
.space-page .letter-form { margin-bottom: 32px; }
.space-page .letter-form label { font: 400 22px/1.6 var(--serif); color: var(--paper-ink); }
.space-page #main .letter-form textarea { margin: 20px 0; padding: 18px 0; border: 0; border-bottom: 1px solid var(--paper-line); border-radius: 0; background: transparent; color: var(--paper-ink); font: 17px/1.95 var(--serif); resize: vertical; }
.space-page .letter-form textarea:focus-visible { outline: 2px solid var(--paper-accent); outline-offset: 6px; }
.space-page .letter-form textarea::placeholder { color: var(--paper-muted); }
.space-page .letter-form > div small { color: var(--paper-muted); }
.space-page #main .letter-form .button { background: var(--paper-ink); color: var(--paper); }
/* Preserve the journey's timeline while giving each entry a paper surface. */
.space-page.design-journey .memory-milestones li { padding: 24px; margin: 18px 0; }
@media (max-width: 760px) {
  .space-page #main .story-section { margin-block: 26px; }
  .space-page #main .story-text { font-size: 16px; line-height: 1.95; }
  .space-page .memory-milestones { grid-template-columns: 1fr; gap: 16px; }
  .space-page .memory-milestones li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; padding: 24px; }
  .space-page .memory-milestones h3 { margin-top: 0; }
  .space-page #main .memory-journal article { padding: 26px; }
  .space-page .memory-journal article::before { left: 26px; }
  .space-page .stationery-postage { width: 56px; height: 70px; }
  .space-page .stationery-postage .stationery-ornament { width: 32px; height: 32px; }
  .space-page .stationery-letter-heading { gap: 14px; margin-bottom: 24px; padding-bottom: 22px; }
  .space-page .letter-recipient { font-size: 21px; }
  .space-page #main :is(.sample-letter, .letters article) > p { font-size: 16px; line-height: 2; }
  .space-page .letter-stamp { font-size: 8px !important; letter-spacing: .1em; }
  .space-page .letter-form > div { flex-wrap: wrap; gap: 14px; }
}

/* A keepsake album: the page itself, a photograph, and a single sheet of paper. */
.space-page #main .space-body{max-width:1060px;padding-inline:32px;border-inline:0}
.space-page #main .memory-section{scroll-margin-top:28px}
.space-page #main .story-section{padding-block:72px 80px;margin:24px auto 20px}
.space-page #main .story-masthead{margin-bottom:24px}
.space-page #main .story-section h2{font-size:clamp(27px,3vw,34px);letter-spacing:-.035em;margin-bottom:34px}
.space-page #main .story-text{font-size:17px;line-height:2.15}
.space-page #main .story-colophon{margin-top:38px}
.space-page #main .memory-notebook{padding-block:55px 80px;border-top:1px solid var(--paper-line)}
.space-page #main .chapter-label>span{font-size:22px;color:var(--paper-accent)}
.space-page #main .chapter-label .eyebrow{font-size:9px;letter-spacing:.18em}
.space-page #main .memory-notebook h2{font:400 clamp(25px,3vw,32px)/1.6 var(--serif);margin:18px 0 12px;color:var(--paper-ink)}
.space-page #main .notebook-spread{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:60px;align-items:start;margin-top:40px}
.space-page #main .notebook-text-only{display:block;max-width:640px;margin-inline:auto}
.space-page #main .notebook-photograph{margin:0;padding:12px 12px 20px;background:var(--paper);box-shadow:0 12px 36px #50452d0c;transform:rotate(-1.5deg)}
.space-page #main .notebook-photograph img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:1px}
.space-page #main .notebook-photograph figcaption{font:12px/1.9 var(--serif);color:var(--paper-muted);margin:16px 8px 0;overflow-wrap:anywhere}
.space-page #main .notebook-writing{min-width:0}
.space-page #main .memory-favorites{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0 0 26px;padding:0 0 22px;border-bottom:1px solid var(--paper-line)}
.space-page #main .memory-favorites:empty{display:none}
.space-page #main .memory-favorites span{border:0;border-radius:0;background:none;padding:0;font:13px/2 var(--serif);color:var(--paper-muted)}
.space-page #main .memory-favorites span::before{content:'·';margin-right:8px;color:var(--paper-accent)}
.space-page #main .memory-milestones{display:grid;grid-template-columns:1fr;gap:26px;border:0;padding:0}
.space-page #main .memory-milestones li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:16px;margin:0;padding:0;border:0;background:none;box-shadow:none}
.space-page #main .memory-milestones li::before,.space-page #main .memory-milestones li::after{display:none}
.space-page #main .memory-index{font:italic 18px/1.9 var(--serif);color:var(--paper-accent)}
.space-page #main .memory-milestones h3{font:400 21px/1.7 var(--serif);margin:0 0 10px}
.space-page #main .memory-milestones p{font-size:14px;line-height:2;margin:0;color:var(--paper-muted)}
.space-page #main .album-section{border-top:1px solid var(--paper-line);padding-block:55px 80px}
.space-page #main .space-album{display:grid;grid-template-columns:1fr 1fr;gap:42px 36px;margin-top:36px}
.space-page #main .space-album figure{margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;transform:none}
.space-page #main .space-album figure:nth-child(even){margin-top:50px}
.space-page #main .space-album img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.space-page #main .space-album figcaption{margin:16px 0 0;padding-left:18px;border-left:1px solid var(--paper-line);font:13px/1.9 var(--serif);color:var(--paper-muted)}
.space-page #main .letters-section{max-width:820px;padding-block:55px 80px;border-top:1px solid var(--paper-line)}
.space-page #main .letters-section>h2{font:400 clamp(26px,3vw,32px)/1.65 var(--serif);margin-bottom:36px}
.space-page #main :is(.sample-letter,.letters article,.letter-form){border:0;border-radius:2px;background-color:#fffdf6;background-image:linear-gradient(110deg,#fffefb9c,transparent 70%),var(--paper-grain);background-size:auto,5px 5px;box-shadow:0 18px 54px #51412609,0 1px 3px #51412605;padding:48px 58px;color:var(--paper-ink)}
.space-page #main .stationery-letter-heading{border:0;padding-bottom:0;margin-bottom:32px;gap:20px}
.space-page #main .stationery-postage{width:48px;height:58px;border:0;outline:0;background:none;transform:none;opacity:.8}
.space-page #main .stationery-postage>span{display:none}
.space-page #main .letter-stamp{color:var(--paper-accent);font-size:9px;letter-spacing:.2em;margin-bottom:16px}
.space-page #main .letter-recipient{font-size:26px;line-height:1.7;letter-spacing:-.025em}
.space-page #main :is(.sample-letter,.letters article)>p{font-size:18px;line-height:2.15;margin-bottom:34px}
.space-page #main .letter-signature{border:0;padding-top:8px;font-size:14px}
.space-page #main .letter-signature::before{content:'—';color:var(--paper-accent)}
.space-page #main .letter-form{margin-top:28px}
.space-page #main .letter-form textarea{border-bottom:1px solid var(--paper-line)}
@media(max-width:760px){
 .space-page #main .space-body{padding-inline:24px;width:100%}
 .space-page #main .story-section{padding-block:40px 52px;margin-block:12px}
 .space-page #main .story-section h2{font-size:26px;line-height:1.65;margin-bottom:28px}
 .space-page #main .story-text{font-size:16px;line-height:2.05}
 .space-page #main .story-masthead .eyebrow{font-size:8px;letter-spacing:.13em}
 .space-page #main .story-masthead .stationery-ornament{width:32px;height:32px}
 .space-page #main .memory-notebook,.space-page #main .album-section,.space-page #main .letters-section{padding-block:40px 50px}
 .space-page #main .notebook-spread{grid-template-columns:1fr;gap:36px;margin-top:28px}
 .space-page #main .notebook-photograph{max-width:360px;margin:0 8px;padding:9px 9px 16px}
 .space-page #main .notebook-photograph img{aspect-ratio:4/3}
 .space-page #main .memory-milestones{gap:26px}
 .space-page #main .memory-milestones h3{font-size:20px}
 .space-page #main .memory-milestones p{font-size:15px}
 .space-page #main .space-album{grid-template-columns:1fr;gap:28px}
 .space-page #main .space-album figure:nth-child(even){margin-top:0}
 .space-page #main :is(.sample-letter,.letters article,.letter-form){padding:30px 24px}
 .space-page #main .letter-recipient{font-size:22px}
 .space-page #main :is(.sample-letter,.letters article)>p{font-size:16px;line-height:2.1}
 .space-page #main .stationery-letter-heading{gap:10px;margin-bottom:25px}
 .space-page #main .stationery-postage{width:32px;height:40px}
 .space-page #main .stationery-postage .stationery-ornament{width:30px;height:30px}
 .space-page #main .tabs{gap:20px;font-size:11px;flex-wrap:wrap}
}