:root { --paper:#f3ead7; --ink:#292b23; --blue:#002fa7; --rose:#b97878; --olive:#48583d; --serif:"Alegreya", Georgia, serif; --hand:"Gaegu", cursive; --sketch:"Cabin Sketch", Georgia, serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper) url("assets/paper-texture.svg") repeat; font:1.35rem/1.25 var(--hand); }
button { font:inherit; cursor:pointer; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; }
.draft-header { max-width:1480px; margin:auto; padding:3rem clamp(1rem,4vw,4rem) 2rem; display:flex; align-items:center; gap:clamp(1rem,5vw,5rem); }
.draft-header > div { flex:1; }
.draft-home { width:clamp(82px,12vw,150px); flex:none; transition:transform .2s; }
.draft-home:hover { transform:rotate(-4deg) scale(1.04); }
.draft-home img { width:100%; }
.kicker { color:var(--blue); text-transform:uppercase; letter-spacing:.12em; font:700 1.1rem/1.2 var(--hand); margin:0 0 .5rem; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font:400 clamp(3.2rem,7vw,7rem)/.94 var(--sketch); }
h1 { margin-bottom:.5rem; }
h2 { font-size:clamp(2.8rem,5vw,5rem); margin-bottom:.9rem; }
.draft-header p:last-child { margin-bottom:0; }
.draft-stamp { border:2px solid var(--rose); border-radius:50%; color:var(--rose); transform:rotate(14deg); padding:1.05rem .7rem; font:700 1rem/1 var(--hand); text-align:center; }
.draft-disclaimer { max-width:1200px; margin:0 auto 2rem; padding:.9rem 1.4rem; border-left:4px solid var(--blue); background:rgb(255 250 238 / .8); font-size:1.12rem; }
.concept { padding:clamp(3.5rem,7vw,7rem) clamp(1rem,4vw,4rem); overflow:hidden; }
.concept-heading,.concept-footnote { max-width:1260px; margin-left:auto; margin-right:auto; }
.concept-heading { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:2.7rem; }
.concept-heading > div:first-child { max-width:700px; }
.concept-heading p:last-child { margin-bottom:0; }
.concept-footnote { margin-top:2rem; font-size:1.13rem; color:var(--olive); }
.concept--book { background:linear-gradient(146deg,#e7e3d4 4%,#f7edda 59%,#eae2d1); }
.book-controls { display:flex; gap:.5rem; }
.book-controls button { width:3.1rem; height:3.1rem; border:1px solid var(--ink); border-radius:50%; background:transparent; font-size:2rem; line-height:1; }
.book-controls button:hover { color:#fff; background:var(--blue); border-color:var(--blue); }
.book-rail { max-width:1280px; margin:auto; display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 1px; padding:1rem .2rem 2rem; scrollbar-color:var(--blue) transparent; cursor:grab; touch-action:pan-x pan-y; }
.book-rail:active { cursor:grabbing; }
.book-page { position:relative; flex:0 0 58%; min-height:620px; padding:clamp(1.4rem,3vw,3rem); scroll-snap-align:start; background:#fffaf0; box-shadow:5px 9px 18px rgb(50 40 20 / .15); font:1.8rem/1.16 var(--serif); }
.book-page--letter { display:flex; flex-direction:column; }
.book-visit-date { margin:auto 2.2rem 0 0; padding-top:1rem; font:1.1rem/1.1 var(--hand); color:var(--olive); }
.book-page:nth-child(even) { background:#f8f2e3; box-shadow:-5px 9px 18px rgb(50 40 20 / .13); }
.book-page::before { content:""; position:absolute; top:0; left:0; right:0; height:12px; background:linear-gradient(175deg,var(--paper) 35%,transparent 38%); }
.page-number,.book-label,.book-caption,.book-signature { font-family:var(--hand); }
.page-number { position:absolute; bottom:1.4rem; right:2rem; color:var(--rose); font-size:1.1rem; }
.book-label { color:var(--blue); text-transform:uppercase; letter-spacing:.07em; font-size:1.1rem; }
.book-page h3 { font:400 clamp(3.1rem,5vw,5rem)/1 var(--sketch); margin:.6rem 0 1.8rem; }
.book-photo { width:78%; max-height:255px; object-fit:cover; margin:auto; padding:8px 8px 24px; background:#fff; transform:rotate(-3deg); box-shadow:3px 6px 12px rgb(0 0 0 / .16); }
.book-photo--small { width:58%; max-height:230px; margin:1.3rem auto; transform:rotate(3deg); }
.book-caption { margin:1.4rem 0 0; text-align:center; font-size:1.4rem; }
.book-letter { margin:1.15rem 0 1rem; font:400 clamp(1.32rem,1.8vw,1.55rem)/1.08 var(--hand); }
.book-signoff { margin:.4rem 0 1.3rem; font:1.6rem var(--hand); }
.book-signoff .book-signature { vertical-align:middle; margin:0 0 0 .45rem; }
.memory-collage { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:.7rem; height:480px; margin-top:1.3rem; align-items:center; }
.memory-collage figure { margin:0; padding:5px 5px .8rem; background:#fff; box-shadow:3px 6px 12px rgb(0 0 0 / .15); }
.memory-collage img { width:100%; height:100%; object-fit:cover; }
.memory-collage figcaption { padding:.45rem .1rem 0; text-align:center; font:1.03rem/1 var(--hand); }
.memory-collage__swing,.memory-collage__dinner { height:95%; }
.memory-collage__swing { grid-column:1; grid-row:1; transform:rotate(-3deg); }
.memory-collage__swing img { height:calc(100% - 1.7rem); object-position:70% center; }
.memory-collage__sunset { grid-column:2; grid-row:1; width:72%; justify-self:end; transform:rotate(4deg); }
.memory-collage__sunset img { aspect-ratio:1; }
.memory-collage__winter { grid-column:1; grid-row:2; width:69%; justify-self:start; transform:rotate(3deg); }
.memory-collage__winter img { aspect-ratio:1; }
.memory-collage__dinner { grid-column:2; grid-row:2; transform:rotate(-2deg); }
.memory-collage__dinner img { height:calc(100% - 1.7rem); }
.memory-vibes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; gap:.7rem; margin:1.1rem 0 2rem; }
.memory-vibes img { width:100%; aspect-ratio:1; object-fit:cover; border:3px solid #fff; box-shadow:2px 3px 6px rgb(0 0 0 / .14); transform:rotate(-4deg); }
.memory-vibes img:nth-child(even) { transform:rotate(5deg) translateY(.3rem); }
.book-signature { display:inline-block; margin:0 0 .8rem; color:#25365c; font:400 clamp(2.5rem,4vw,3.5rem)/1.05 "Reenie Beanie", cursive; transform:rotate(-5deg); }
.signature-note { max-width:1280px; margin:2.2rem auto 0; font-size:1.13rem; color:var(--olive); }
.book-ink { position:absolute; right:3rem; bottom:3rem; color:var(--blue); font:4rem var(--hand); }
.concept--scraps { background:linear-gradient(110deg,#f2e9d7,#e9dacf); }
.scrap-board { max-width:1280px; min-height:650px; margin:auto; display:grid; grid-template-columns:1.1fr 1fr .85fr; grid-template-rows:auto auto; align-items:center; gap:1.2rem; padding:clamp(1rem,3vw,3rem); border:1px solid rgb(41 43 35 / .15); background:rgb(245 237 219 / .75); }
.scrap { margin:0; position:relative; padding:1.5rem; box-shadow:4px 10px 16px rgb(40 30 10 / .14); }
.scrap--photo,.scrap--photo-two { padding:10px 10px 2rem; background:#fffdf6; }
.scrap--photo { transform:rotate(-6deg); grid-row:1/3; }
.scrap--photo-two { transform:rotate(4deg); grid-column:3; grid-row:1/3; }
.scrap img { width:100%; aspect-ratio:4/5; object-fit:cover; }
.scrap figcaption { margin:.8rem .3rem 0; text-align:center; font-size:1.1rem; }
.scrap--letter { background:#fbf1dd; transform:rotate(2deg); font:clamp(1.5rem,2vw,2rem)/1.12 var(--serif); }
.scrap--tiny { max-width:85%; justify-self:end; background:#e1e8e2; transform:rotate(-3deg); font:clamp(1.6rem,2vw,2rem)/1.12 var(--serif); }
.scrap--letter::before,.scrap--tiny::before { content:""; position:absolute; top:-.6rem; left:40%; width:5rem; height:1.2rem; background:rgb(255 255 248 / .64); transform:rotate(-4deg); }
.scrap-date,.scrap-author { display:block; font:700 1rem/1 var(--hand); }
.scrap-date { color:var(--blue); }
.scrap-author { text-align:right; }
.scrap p { margin:1.8rem 0 1.4rem; }
.concept--letters { background:#eee8db; }
.letter-drawer { max-width:1180px; margin:auto; border-top:2px solid var(--ink); }
.letter-drawer details { border-bottom:1px solid var(--ink); }
.letter-drawer summary { display:grid; grid-template-columns:200px 1fr 30px; gap:2rem; align-items:center; padding:1.4rem .5rem; cursor:pointer; list-style:none; font:400 clamp(1.8rem,3vw,2.8rem)/1 var(--sketch); }
.letter-drawer summary::-webkit-details-marker { display:none; }
.letter-date { color:var(--blue); font:700 1.05rem/1 var(--hand); }
.letter-plus { font:2rem/1 var(--hand); transition:transform .2s; }
details[open] .letter-plus { transform:rotate(45deg); }
.letter-inside { width:min(640px,85%); padding:.5rem 0 2.4rem; margin-left:calc(200px + 2rem); font:1.75rem/1.18 var(--serif); }
.letter-inside span { font:1.35rem var(--hand); }
.draft-footer { padding:3rem 1.5rem 4rem; text-align:center; background:#dce1d5; }
.draft-footer p { max-width:560px; margin:0 auto 1rem; }
.draft-footer a { font-weight:700; color:var(--blue); }
@media(max-width:740px) {
  body { font-size:1.2rem; }
  .draft-header { padding-top:1.5rem; align-items:start; gap:.7rem; }
  .draft-home { width:76px; }
  .draft-stamp { font-size:.7rem; padding:.5rem .35rem; }
  .draft-disclaimer { margin:0 1rem 1rem; }
  .concept { padding:3rem 1rem; }
  .concept-heading { gap:1rem; align-items:end; }
  .concept-heading p:last-child { font-size:1.2rem; }
  .book-controls button { width:2.5rem; height:2.5rem; }
  .book-page { flex-basis:calc(100% - 1.8rem); min-height:580px; padding:1.5rem; font-size:1.55rem; }
  .book-page h3 { font-size:3.4rem; }
  .book-photo { max-height:210px; }
  .memory-collage { height:440px; gap:.45rem; }
  .memory-collage figcaption { font-size:.88rem; }
  .book-letter { font-size:clamp(1.3rem,4.7vw,1.48rem); line-height:1.06; }
  .memory-vibes { gap:.25rem; margin-bottom:1.6rem; }
  .memory-vibes img { border-width:2px; }
  .scrap-board { display:grid; grid-template-columns:1fr 1fr; min-height:0; gap:1rem; }
  .scrap--photo { grid-column:1/3; grid-row:auto; max-width:75%; justify-self:start; }
  .scrap--letter { grid-column:1/3; }
  .scrap--tiny { grid-column:1/3; justify-self:end; }
  .scrap--photo-two { grid-column:1/3; grid-row:auto; max-width:70%; justify-self:end; }
  .scrap img { aspect-ratio:4/3; }
  .letter-drawer summary { grid-template-columns:1fr 24px; gap:.6rem; padding:1.2rem .2rem; }
  .letter-date { grid-column:1/-1; }
  .letter-inside { width:100%; margin-left:0; font-size:1.5rem; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Public guestbook polish. */
.concept--book { background: #f4e5e6; }
.concept-heading { align-items: end; }
.book-page--letter { display: flex; flex-direction: column; }
.book-page--letter .memory-vibes { margin-top: auto; }
.guestbook-credit { margin-top: 1.5rem !important; font-size: 1rem; }
@media(max-width:740px) { .book-page { flex-basis: calc(100% - 1.8rem); } .book-page--letter { min-height: 620px; } }

/* The paper stays visible behind the book, and both pages share one stock. */
.concept--book { background: #f3ead7 url("assets/paper-texture.svg") repeat; }
.book-page, .book-page:nth-child(even) { background: #fffaf0; }
.book-postscript { margin: 0 0 .75rem; font: 400 clamp(1.15rem,1.6vw,1.35rem)/1.04 var(--hand); color: #48583d; }
.draft-footer .guestbook-mailbox { display: block; width: 78px; margin: .3rem auto .25rem; }
.guestbook-mailbox img { width: 100%; height: auto; }
.draft-footer .guestbook-memory-link { display: inline-block; }
.draft-footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: .35rem .65rem; max-width: 960px; margin: 2rem auto 0; font-size: 1.12rem; }
@media (max-width: 740px) { .book-postscript { font-size: 1.15rem; } .book-page--letter { padding-bottom: 2rem; } }

/* Keep the whole swing photograph within its polaroid. */
.memory-collage__swing img { object-fit: contain; object-position: center; background: #fff; }


/* One page title and a compact invitation to turn the book. */
.draft-header { padding-bottom: .5rem; }
.concept--book { padding-top: clamp(1.5rem,3vw,3rem); }
.concept-heading { margin-bottom: 1rem; }
.concept-heading > div:first-child { max-width: 100%; }
@media (max-width: 740px) { .concept--book { padding-top: 1.5rem; } }

/* Desktop uses the page arrows; phone retains native touch swiping. */
.book-rail { overflow-x: hidden; cursor: auto; scroll-snap-type: none; }
.book-rail:active { cursor: auto; }
.book-page { flex-basis: calc((100% - 18px) / 2); min-width: 0; }
.book-controls button:disabled { opacity: .35; cursor: default; }
.book-controls button:disabled:hover { color: var(--ink); background: transparent; border-color: var(--ink); }
@media (max-width: 740px) {
  .book-rail { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .book-rail::-webkit-scrollbar { display: none; }
  .book-page { flex-basis: calc(100% - 1.8rem); }
}

/* A complete two-page spread, with photos contained inside the left page. */
.memory-collage { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); min-width: 0; }
.memory-collage figure { min-width: 0; min-height: 0; }
@media (max-width: 740px) { .book-page { flex-basis: calc(100% - 1.8rem); } }

/* Keep intrinsic HTML dimensions from stretching responsive guestbook images. */
.draft-home img { height: auto; }
.memory-vibes img { height: auto; aspect-ratio: 1 / 1; }