/* Revision 8 — Letters visual rebuild. Designed to mirror the approved reference layouts while using only original uploaded family photos. */
:root{--letter-teal:#063f43;--letter-deep:#052f32;--letter-gold:#b8892e;--letter-cream:#fbf7ee;--letter-paper:#f4ead8;--letter-ink:#12383a}
body.letters-reference-page{background:#fbf8f1;color:#1d3435}
body.letters-reference-page .topbar{position:relative;background:#fffdf9;border-bottom:1px solid #e7dfcf}
body.letters-reference-page .nav{height:78px}
body.letters-reference-page .legacy-subnav{background:#06363a;border-top:0;border-bottom:1px solid rgba(255,255,255,.14)}
body.letters-reference-page .legacy-subnav .container{width:100%;max-width:none;padding:0 34px;display:flex;justify-content:center;gap:0;overflow-x:auto}
body.letters-reference-page .legacy-subnav a{padding:12px 17px;color:#fff;font-size:.83rem;white-space:nowrap;border-right:1px solid rgba(255,255,255,.05)}
body.letters-reference-page .legacy-subnav a[href*="letters"]{background:#0a5154;color:#fff}

/* HUB — approved first reference */
.letters-reference-hub{background:#fbf7ee}
.letters-reference-hub-hero{position:relative;min-height:325px;border-bottom:1px solid #d8c7a6;overflow:hidden;background:
 radial-gradient(circle at 15% 20%,rgba(164,119,49,.10),transparent 29%),
 radial-gradient(circle at 88% 0%,rgba(27,73,57,.12),transparent 27%),
 linear-gradient(105deg,#eadcc5 0%,#f8f0e2 40%,#efe4d1 100%)}
.letters-reference-hub-hero:before{content:"";position:absolute;inset:0;opacity:.25;background-image:repeating-linear-gradient(0deg,rgba(107,77,32,.03) 0 1px,transparent 1px 5px)}
.hub-hero-inner{position:relative;z-index:1;min-height:325px;display:grid;grid-template-columns:33% 40% 27%;align-items:stretch}
.hub-letter-paper{position:relative;margin:18px 0 18px 22px;background:#f9f3e6;box-shadow:0 11px 30px rgba(70,53,28,.14);transform:rotate(-2.1deg);border:1px solid #e2d2b6;padding:42px 48px 36px 54px;display:flex;align-items:center}
.hub-letter-paper:after{content:"";position:absolute;right:18px;bottom:25px;width:130px;height:16px;border-radius:10px;background:linear-gradient(90deg,#171717 0 70%,#b88d3d 70% 82%,#111 82%);transform:rotate(-11deg);box-shadow:0 3px 4px rgba(0,0,0,.15)}
.hand-note{font-family:"Segoe Print","Bradley Hand",cursive;font-size:1.12rem;line-height:1.55;color:#6a5943;transform:rotate(-2deg);max-width:320px}
.hand-note .sign{display:block;text-align:right;margin-top:12px;font-size:1.2rem}
.hub-title-block{text-align:center;padding:34px 24px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hub-envelope{font-size:3rem;color:var(--letter-gold);line-height:1}
.hub-title-block h1{font-family:Georgia,serif;font-size:clamp(3.8rem,6vw,6.5rem);line-height:.82;margin:4px 0 0;color:#093f43;letter-spacing:-.055em}
.hub-title-block .reflections{font-family:"Brush Script MT","Segoe Script",cursive;font-size:clamp(3.3rem,5vw,5.6rem);line-height:.85;color:#b38429;margin:-2px 0 16px;font-weight:400}
.hub-title-block .hub-tag{letter-spacing:.34em;font-size:.78rem;font-weight:800;color:#173f42;margin:0 0 10px}
.hub-title-block .hub-desc{font-family:Georgia,serif;line-height:1.35;color:#40504c;font-size:1rem;max-width:450px;margin:0}
.hub-feature-row{display:flex;justify-content:center;flex-wrap:wrap;gap:23px;margin-top:18px;font-size:.68rem;letter-spacing:.09em;font-weight:800;color:#314746}
.hub-feature-row b{color:#ae812e;font-size:1rem;margin-right:4px}
.hub-book-wrap{position:relative;padding:25px 25px 24px 6px;display:flex;align-items:center;justify-content:center}
.hub-book{width:205px;height:250px;background:linear-gradient(145deg,#06393b,#0e4946);border-radius:5px 13px 13px 5px;box-shadow:10px 12px 24px rgba(28,43,36,.28),inset 8px 0 0 rgba(0,0,0,.13);border:1px solid #0b312f;transform:rotate(-5deg);display:flex;align-items:center;justify-content:center;text-align:center;color:#e6cd83;font-family:Georgia,serif;font-size:1rem;line-height:1.65;letter-spacing:.08em;padding:30px}
.hub-book:after{content:"♡";display:block;position:absolute;bottom:45px;font-size:1.6rem}
.hub-compass{position:absolute;bottom:16px;right:45px;width:76px;height:76px;border-radius:50%;background:#cda84c;border:6px double #3d321a;display:grid;place-items:center;color:#3d321a;font-size:2.1rem;box-shadow:0 8px 18px rgba(0,0,0,.25)}
.hub-polaroid{position:absolute;right:-15px;top:64px;width:120px;background:#fff;padding:8px 8px 28px;box-shadow:0 8px 20px rgba(0,0,0,.18);transform:rotate(8deg)}
.hub-polaroid img{width:100%;height:85px;object-fit:cover}
.hub-polaroid span{font-family:"Segoe Script",cursive;font-size:.7rem;display:block;text-align:center;color:#554b3c;margin-top:7px}

.choose-child-section{padding:22px 28px 20px;background:#fbf8f1}
.choose-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;margin:0 auto 20px;max-width:1180px}
.choose-head:before{content:"";height:1px;background:#c5ac77}.choose-head:after{content:'“Different journeys. The same love.”';font-family:Georgia,serif;font-style:italic;color:#a27636;font-size:1rem;text-align:right;white-space:nowrap}
.choose-head h2{font-size:1.08rem;letter-spacing:.34em;text-transform:uppercase;margin:0;color:#0b3d40}
.children-reference-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1180px;margin:0 auto}
.ref-child-card{background:#fffdf8;border:1px solid #dfd6c7;border-radius:14px;box-shadow:0 7px 18px rgba(47,42,31,.08);padding:10px 10px 13px;color:#143d40;display:block;overflow:hidden}
.ref-child-collage{height:250px;display:grid;grid-template-columns:1.22fr .58fr .58fr;grid-template-rows:repeat(3,1fr);gap:4px;overflow:hidden}
.ref-child-collage figure{margin:0;overflow:hidden;background:#eae2d6}.ref-child-collage figure.main{grid-row:1/4}.ref-child-collage img{width:100%;height:100%;object-fit:cover;display:block}.ref-child-card h3{font-family:Georgia,serif;font-size:2rem;margin:8px 8px 0;color:#153f42}.ref-child-traits{font-size:.61rem;letter-spacing:.34em;color:#a6792c;margin:1px 8px 8px;text-transform:uppercase;font-weight:700}.ref-child-quote{font-family:Georgia,serif;font-style:italic;text-align:center;color:#5d5144;line-height:1.35;font-size:.93rem;min-height:50px;margin:7px 18px 12px}.ref-open{display:block;background:#004b4d;color:#fff;text-align:center;border-radius:999px;padding:10px 14px;font-family:Georgia,serif;font-size:.94rem;margin:0 8px}
.hub-final-banner{min-height:160px;display:grid;place-items:center;text-align:center;color:#3c392f;padding:25px;background:linear-gradient(180deg,rgba(251,240,215,.25),rgba(247,224,180,.30)),url('cruise-deck.jpeg') center 58%/cover no-repeat;position:relative;overflow:hidden}
.hub-final-banner:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,235,209,.72),rgba(250,243,227,.45),rgba(247,235,209,.72))}.hub-final-banner .inner{position:relative;z-index:1}.hub-final-banner blockquote{font-family:Georgia,serif;font-style:italic;font-size:1.18rem;line-height:1.45;margin:0 auto 16px;max-width:520px}.hub-final-banner small{letter-spacing:.28em;font-weight:800;font-size:.58rem}

/* CHILD PAGE — approved second reference */
.child-ref-hero{background:linear-gradient(100deg,#ecdfc9,#faf4e8 48%,#eee0ca);min-height:470px;position:relative;overflow:hidden;border-bottom:1px solid #dccbad}
.child-ref-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,rgba(177,130,54,.10),transparent 35%),repeating-linear-gradient(0deg,rgba(95,70,35,.018) 0 1px,transparent 1px 5px)}
.child-ref-hero-inner{position:relative;z-index:1;max-width:1320px;margin:auto;min-height:470px;display:grid;grid-template-columns:31% 34% 35%;align-items:stretch}
.child-main-photo{position:relative;overflow:hidden;align-self:stretch}.child-main-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(235,221,196,.05),transparent 80%),linear-gradient(0deg,rgba(240,228,208,.08),transparent 25%)}.child-main-photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block}
.child-main-photo .scribble{position:absolute;z-index:2;left:14px;top:105px;color:#f3e8d4;font-family:"Segoe Script",cursive;font-size:1.25rem;line-height:1.35;transform:rotate(-7deg);text-shadow:0 1px 2px rgba(0,0,0,.35)}
.child-main-photo .crown{position:absolute;z-index:2;left:18px;top:47px;color:#c79a3f;font-size:2.7rem;transform:rotate(-8deg)}
.child-ref-copy{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px 24px}.child-ref-copy .letters-to{font-size:.77rem;letter-spacing:.35em;font-weight:800;color:#154548;margin-bottom:5px}.child-ref-copy h1{font-family:Georgia,serif;font-size:clamp(4rem,6vw,6.6rem);line-height:.9;color:#0a3c40;margin:0;letter-spacing:-.055em}.child-ref-copy .initials{font-family:"Brush Script MT","Segoe Script",cursive;color:#b28227;font-size:4.2rem;line-height:.85;margin:-2px 0 12px}.child-ref-copy .traits{font-size:.72rem;letter-spacing:.32em;font-weight:800;color:#153f40;margin-bottom:10px}.child-ref-copy .intro{font-family:Georgia,serif;font-size:.98rem;line-height:1.4;max-width:470px;color:#42504b;margin:0 0 16px}.write-letter-ref{border:0;background:#075459;color:#fff;border-radius:999px;padding:14px 34px;min-width:270px;font:1.2rem Georgia,serif;cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.04)}.child-ref-copy .micro{font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:#31504d;margin-top:15px}
.child-hero-collage{padding:10px 12px 16px 0;display:grid;grid-template-columns:1.02fr .9fr;grid-template-rows:1fr 1fr;gap:7px;align-content:stretch;transform:rotate(-1deg)}.child-hero-collage figure{margin:0;background:#fff;padding:5px;box-shadow:0 7px 16px rgba(0,0,0,.13);overflow:hidden}.child-hero-collage figure:nth-child(1){grid-row:1;grid-column:1}.child-hero-collage figure:nth-child(2){grid-row:1;grid-column:2}.child-hero-collage figure:nth-child(3){grid-row:2;grid-column:1}.child-hero-collage figure:nth-child(4){grid-row:2;grid-column:2}.child-hero-collage img{width:100%;height:100%;object-fit:cover;display:block}.child-hero-note{position:absolute;right:15px;bottom:12px;background:#f8ecd4;padding:12px 15px;font-family:"Segoe Script",cursive;transform:rotate(-5deg);box-shadow:0 4px 10px rgba(0,0,0,.09);color:#5c4a2d;font-size:.9rem}

.child-ref-main{padding:22px 22px 0;background:#fbf8f1}.child-ref-grid{max-width:1240px;margin:auto;display:grid;grid-template-columns:59% 41%;gap:0}.child-archive-card{border:1px solid #e2d5bf;border-radius:14px;background:#fffdf8;padding:13px 14px 16px;box-shadow:0 6px 16px rgba(58,50,37,.05)}.child-archive-title{display:flex;align-items:flex-end;gap:12px}.child-archive-title .envelope{font-size:2.1rem;color:#b4862f}.child-archive-title h2{font-family:Georgia,serif;color:#123e41;font-size:2rem;margin:0}.child-archive-title p{font-size:.58rem;letter-spacing:.25em;margin:0;color:#345653}.child-archive-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.child-archive-top .write-letter-ref{min-width:auto;padding:9px 22px;font-size:.92rem}.letter-filters.ref-filters{margin:9px 0 10px;display:flex;gap:8px;align-items:center}.letter-filters.ref-filters button{font-size:.72rem;padding:7px 13px;background:#fff;border:1px solid #dcd2c2}.letter-filters.ref-filters button.active{background:#075054;color:#fff;border-color:#075054}.ref-search{margin-left:auto;width:34px;height:34px;border-radius:50%;border:1px solid #d7cebf;background:#fff;display:grid;place-items:center;color:#24494a}
.child-ref-main .letter-list{gap:6px}.child-ref-main .letter-row{grid-template-columns:58px 1fr auto 18px;padding:8px 10px;border-radius:11px;background:#fffdf9;border-color:#e5dac9;min-height:62px}.child-ref-main .letter-date{font-size:.62rem;border-right:1px solid #e0d2bc;line-height:1.1}.child-ref-main .letter-date strong{font-size:1.25rem}.child-ref-main .letter-row h4{font-size:.93rem;margin:0 0 1px}.child-ref-main .letter-row p{font-size:.72rem;line-height:1.3}.child-ref-main .letter-status{font-size:.62rem;padding:5px 8px;background:#fff7e9}.letter-arrow{font-size:1.1rem;color:#17484b}
.child-keepsake{padding:12px 16px 0 22px;position:relative}.child-quote-big{font:italic 1.55rem/1.4 Georgia,serif;text-align:center;color:#1c4650;margin:6px 0 22px;position:relative}.child-quote-big:before{content:'“';position:absolute;left:4px;top:-18px;color:#b4842d;font-size:4rem;font-style:normal}.child-quote-big small{display:block;margin-top:10px;font:700 .58rem Arial,sans-serif;letter-spacing:.3em;color:#415958}.child-keepsake-collage{display:grid;grid-template-columns:1fr 1.1fr;grid-template-rows:1fr .85fr;gap:6px;transform:rotate(-1deg)}.child-keepsake-collage figure{margin:0;background:white;padding:5px;box-shadow:0 7px 16px rgba(0,0,0,.12);overflow:hidden}.child-keepsake-collage figure:nth-child(3){grid-column:1/3}.child-keepsake-collage img{width:100%;height:100%;object-fit:cover;display:block}.keepsake-note{position:absolute;right:8px;bottom:-12px;background:#f5e7cc;padding:10px 13px;font-family:"Segoe Script",cursive;transform:rotate(-7deg);font-size:.9rem;color:#4c442f;box-shadow:0 4px 10px rgba(0,0,0,.09)}
.child-ref-footer-banner{height:175px;margin-top:28px;background:linear-gradient(90deg,rgba(248,233,204,.15),rgba(7,54,57,.15)),url('brand-banner.png') center 45%/cover no-repeat;position:relative;display:grid;grid-template-columns:61% 39%;overflow:hidden}.child-ref-footer-banner:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(250,238,213,.38),rgba(5,47,50,.22) 62%,rgba(5,47,50,.88) 62%)}.child-banner-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#173f40;letter-spacing:.11em;font-family:Georgia,serif}.child-banner-copy strong{font-size:1.35rem;font-weight:400}.child-banner-copy small{font:700 .58rem Arial,sans-serif;letter-spacing:.35em;margin-top:14px}.child-banner-icons{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);align-items:stretch;padding:25px 24px;gap:6px}.child-banner-icon{border:1px solid rgba(225,192,115,.55);border-radius:9px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:Georgia,serif;font-size:.85rem}.child-banner-icon b{font-size:1.6rem;font-family:Arial;margin-bottom:6px;font-weight:400}

/* Embedded family shell: parent already supplies the shared headers */
.mm-family-embedded-body.letters-reference-page .child-ref-hero,.mm-family-embedded-body.letters-reference-page .letters-reference-hub-hero{margin-top:0}
.mm-family-embedded-body.letters-reference-page .topbar,.mm-family-embedded-body.letters-reference-page .legacy-subnav,.mm-family-embedded-body.letters-reference-page .footer{display:none!important}

@media(max-width:980px){.hub-hero-inner{grid-template-columns:1fr}.hub-letter-paper,.hub-book-wrap{display:none}.children-reference-grid{grid-template-columns:1fr}.choose-head{grid-template-columns:1fr;text-align:center}.choose-head:before,.choose-head:after{display:none}.child-ref-hero-inner{grid-template-columns:1fr}.child-main-photo{height:430px}.child-hero-collage{display:none}.child-ref-grid{grid-template-columns:1fr}.child-keepsake{padding-left:0;margin-top:20px}.child-ref-footer-banner{grid-template-columns:1fr;height:auto}.child-banner-icons{background:#063b3d}.child-ref-copy{padding:38px 20px}.ref-child-collage{height:360px}.hub-title-block h1{font-size:4rem}}
@media(max-width:600px){.choose-child-section,.child-ref-main{padding-left:10px;padding-right:10px}.hub-title-block{padding:30px 12px}.hub-title-block h1{font-size:3.2rem}.hub-title-block .reflections{font-size:3rem}.ref-child-collage{height:280px}.child-ref-copy h1{font-size:3.8rem}.child-ref-copy .initials{font-size:3.2rem}.child-ref-main .letter-row{grid-template-columns:50px 1fr}.child-ref-main .letter-status,.letter-arrow{grid-column:2}.child-banner-icons{grid-template-columns:repeat(2,1fr)}.child-ref-footer-banner{height:auto}}
/* Revision 10 — functional keepsake letter writer/reader. No approved page layout or family photography changed. */
.letter-modal{padding:28px 14px;overflow:auto}.letter-modal-card{max-width:760px;background:#fbf7ee;border:1px solid #d9c8a8;box-shadow:0 24px 70px rgba(9,44,45,.28)}
.write-keepsake-head{display:flex;align-items:center;justify-content:center;gap:14px;text-align:center;border-bottom:1px solid #dfd2bd;padding-bottom:16px;margin-bottom:18px}.write-keepsake-head>span{font-size:2.2rem;color:#b8892e}.write-keepsake-head small{letter-spacing:.28em;color:#31504d;font-weight:800;font-size:.6rem}.write-keepsake-head h3{margin:2px 0 0!important;font:2.25rem Georgia,serif!important;color:#073f43!important}
.letter-form-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.letter-form textarea{min-height:250px;line-height:1.65;background:#fffdf8}.letter-form input,.letter-form select,.letter-form textarea{border:1px solid #d9cebd!important;border-radius:9px!important}.future-options{background:#f5ead5;border:1px dashed #c8a66a;border-radius:10px;padding:12px;margin-bottom:12px}.future-options p{font-size:.75rem;margin:4px 0 0;color:#6c5d46}
.attachment-picker{display:block;border:1px dashed #b88a35!important;background:#fffaf0;padding:14px!important;border-radius:10px;cursor:pointer}.attachment-picker span{display:block;font-size:.72rem;font-weight:400;color:#6d665b;margin:3px 0 8px}.attachment-picker input{border:0!important;padding:0!important;background:transparent}.file-names{font-size:.75rem;color:#31504d;margin:-5px 0 12px}.save-note{text-align:center;font-size:.68rem;color:#746a5c;margin:10px 0 0}.letter-save{background:#075459!important;border-radius:999px!important;padding:12px 22px!important}.letter-cancel{border-radius:999px!important}.letter-cancel.danger{color:#8b3f35;border-color:#d8b8b1!important}
.keepsake-letter{position:relative;background:#fffdf7;border:1px solid #ddcfb8;padding:42px 52px 50px;box-shadow:0 8px 25px rgba(70,53,28,.08);background-image:repeating-linear-gradient(0deg,transparent 0 31px,rgba(128,108,73,.07) 31px 32px)}.keepsake-letter:before{content:"";position:absolute;left:28px;top:0;bottom:0;border-left:1px solid rgba(180,90,72,.13)}.keepsake-letter-top{text-align:center;color:#b8892e}.keepsake-letter-top span{display:block;font-size:2rem}.keepsake-letter-top small{letter-spacing:.28em;font-weight:800;color:#31504d}.keepsake-date{text-align:center;margin:10px 0 4px;color:#7c6d58;font:italic .86rem Georgia,serif}.keepsake-letter h3{text-align:center!important;font:2.25rem Georgia,serif!important;color:#073f43!important;margin:8px 0 16px!important}.keepsake-milestone,.keepsake-lock{text-align:center;display:table;margin:0 auto 16px;padding:6px 13px;border-radius:999px;background:#f4e6ca;color:#735b2c;font-size:.75rem}.saved-letter-view{font:1.05rem/1.8 Georgia,serif;color:#3e423c;white-space:normal}.keepsake-signoff{text-align:right;margin-top:28px;font:1.25rem "Segoe Script",cursive;color:#8c6b2e}.keepsake-attachments{margin-top:28px;border-top:1px solid #dfd1bb;padding-top:18px}.keepsake-attachments h4{font:1.1rem Georgia,serif;color:#073f43}.keepsake-attachments{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.keepsake-attachments h4{grid-column:1/-1}.keepsake-attachments figure{margin:0;background:#fff;padding:6px;box-shadow:0 4px 12px rgba(0,0,0,.09)}.keepsake-attachments img,.keepsake-attachments video{width:100%;max-height:250px;object-fit:cover;display:block}.keepsake-attachments figcaption{font-size:.65rem;padding:5px;color:#655d51}.doc-attachment{display:block;padding:12px;background:#f5ead5;border-radius:8px;color:#17484b;text-decoration:none}
@media(max-width:600px){.letter-form-two{grid-template-columns:1fr}.keepsake-letter{padding:32px 25px 38px}.keepsake-attachments{grid-template-columns:1fr}}

/* Revision 15 — Zayden / next generation addition. Existing approved Letters layouts preserved. */
.grandchild-reference-section{padding:12px 28px 70px;background:#fbf8f1}
.grandchild-reference-wrap{max-width:420px;margin:0 auto}
.ref-grandchild-card{display:block}
@media(max-width:600px){.grandchild-reference-section{padding-left:10px;padding-right:10px}}