/* Concept 12 — "Keepsake Letter".
   A refined, enchanting take on the Living Album (concept-9). One coherent type system:
   Fraunces (display, with a lighter italic accent) + Newsreader (warm book-serif body) +
   Castile Mastah (signature only). Nick's photograph appears ONCE, framed like a keepsake
   beside his signature at the very bottom. Warm, luminous palette with soft light and quiet
   ornaments. Motion is optional garnish only — the page reads enchanting fully static
   (the client reviews with OS reduced-motion on). */

@font-face{font-family:R3Fraunces;src:url('../../assets/fonts/fraunces-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"NcBody";src:url('../../assets/fonts/newsreader-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:R3Fraunces;src:url('../../assets/fonts/fraunces-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:R3Fraunces;src:url('../../assets/fonts/fraunces-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:R3Fraunces;src:url('../../assets/fonts/fraunces-400italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

.c12{
  --paper:#f4f0e6;
  --paper-warm:#efe6d4;
  --paper-deep:#eadfca;
  --text:#26382c;
  --ink:#48563f;
  --ink-soft:#6d7560;
  --accent:#966234;
  --accent-deep:#7c4f2a;
  --gold:#c49a5d;
  --line:#ddd3bd;
  --r-display:R3Fraunces,"ITC Galliard",Georgia,serif;
  --r-serif:R3Newsreader,Georgia,serif;
  --gap:clamp(96px,10vw,164px);
  background:var(--paper);
  color:var(--text);
}

/* ---- Type system ---- */
.c12 main h1,.c12 main h2{font-family:var(--r-display);font-weight:600;color:var(--text);letter-spacing:-.014em;line-height:1.02;text-wrap:balance}
.c12 main h1{font-weight:900;letter-spacing:-.02em}
.c12 main em{font-family:var(--r-display);font-weight:400;font-style:italic;color:var(--accent)}
.c12 .prose{font-family:var(--r-serif);font-size:clamp(18px,1.2vw,19.5px);line-height:1.76;color:var(--ink);letter-spacing:0}
.c12 .s12-unfinished .prose{font-family:"NcBody",Georgia,serif;font-weight:400;font-style:normal;font-size:14.74px;line-height:1.443}
.c12 .prose p{margin:0 0 1.15em}
.c12 .prose p:last-child{margin-bottom:0}
.c12 .prose .emphasis{font-family:var(--r-display);font-weight:600;font-style:normal;font-size:clamp(1.5rem,2vw,1.95rem);line-height:1.24;letter-spacing:-.012em;color:var(--text)}
.c12 .place{font-family:var(--body);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.c12 .signature{font-family:R3Signature,cursive;color:var(--accent-deep)}
.c12 .site-header__logo{width:104px}

/* ---- Photograph frames (keepsake style) ---- */
.c12 main .photo{border-radius:3px;background:var(--paper-deep);border:7px solid #fffef8;box-shadow:0 2px 3px rgba(38,56,44,.06),0 20px 44px -18px rgba(45,58,40,.34)}
.c12 main .photo img{border-radius:0}
.c12 .photo-open{background:#fffdf2ee;color:var(--text)}

/* Delicate ornament: a soft-glowing diamond between two fading hairlines. */
.s12-orn{display:flex;align-items:center;justify-content:center;gap:20px;margin:clamp(30px,4vw,52px) auto clamp(34px,4.5vw,58px);width:min(100%,520px)}
.s12-orn i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line) 55%,transparent)}
.s12-orn b{flex:none;width:9px;height:9px;background:var(--gold);transform:rotate(45deg);box-shadow:0 0 14px 1px rgba(196,154,93,.7),0 0 4px rgba(196,154,93,.9)}

/* =====================================================================
   HERO
   ===================================================================== */
.s12-hero{position:relative;min-height:900px;height:100svh;max-height:1040px;display:flex;align-items:center;justify-content:center;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(120% 78% at 50% 30%, #fbf7ee 0%, #f4f0e6 46%, #ede3d0 100%);}
.s12-hero-glow{position:absolute;z-index:0;left:50%;top:40%;width:min(880px,86vw);height:min(880px,86vw);transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle, rgba(214,170,96,.34) 0%, rgba(214,170,96,.14) 34%, rgba(214,170,96,0) 66%);filter:blur(6px)}
.s12-hero-motes{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background-image:
    radial-gradient(2px 2px at 18% 30%, rgba(210,170,100,.55), transparent 60%),
    radial-gradient(2px 2px at 76% 22%, rgba(210,170,100,.5), transparent 60%),
    radial-gradient(1.6px 1.6px at 63% 62%, rgba(210,170,100,.5), transparent 60%),
    radial-gradient(1.6px 1.6px at 32% 74%, rgba(210,170,100,.45), transparent 60%),
    radial-gradient(2px 2px at 88% 68%, rgba(210,170,100,.4), transparent 60%),
    radial-gradient(1.4px 1.4px at 45% 18%, rgba(210,170,100,.45), transparent 60%),
    radial-gradient(1.4px 1.4px at 8% 58%, rgba(210,170,100,.4), transparent 60%);
  animation:s12-twinkle 7s ease-in-out infinite alternate}
@keyframes s12-twinkle{from{opacity:.42}to{opacity:.72}}
.s12-masthead{position:relative;z-index:3;text-align:center;width:min(640px,90vw);padding-top:20px}
.s12-masthead .place{margin-bottom:26px;color:var(--accent-deep)}
.s12-masthead h1{font-size:clamp(66px,8.3vw,122px);line-height:.98;margin:0 0 30px;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.s12-masthead h1 em{color:var(--accent)}
.s12-lede{font-family:var(--r-serif);font-size:clamp(17px,1.4vw,20px);font-style:italic;line-height:1.55;color:var(--ink);max-width:22em;margin:0 auto 30px}
.s12-masthead .pill{background:rgba(255,254,247,.7);font-size:14px;padding:14px 24px;box-shadow:0 10px 26px -14px rgba(45,58,40,.4)}
.s12-hero-photos{position:absolute;inset:0;z-index:2;pointer-events:none}
.s12-hero-photos .photo{position:absolute;pointer-events:auto;transition:transform .5s var(--ease,cubic-bezier(.16,1,.3,1))}
.s12-hero-photos .photo:hover{transform:scale(1.02) rotate(0deg)!important;z-index:5}
.s12-photo-a{width:23%;height:360px;left:-1%;top:15%;transform:rotate(-8deg)}
.s12-photo-a img{object-position:67% 55%}
.s12-photo-b{width:25%;height:250px;right:-2%;top:16%;transform:rotate(8deg)}
.s12-photo-c{width:22%;height:262px;left:3.5%;bottom:8%;transform:rotate(5deg)}
.s12-photo-d{width:25%;height:236px;right:2%;bottom:11%;transform:rotate(-6deg)}
.s12-handnote{position:absolute;z-index:3;left:calc(50% - 150px);width:300px;bottom:8.5%;font:clamp(30px,3.4vw,42px)/1.12 R3Signature,cursive;color:var(--accent-deep);transform:rotate(-7deg);text-align:center;opacity:.92;pointer-events:none}

/* =====================================================================
   OPENING LETTER
   ===================================================================== */
.c12 .space{width:calc(100% - clamp(44px,8vw,140px));max-width:1180px;margin-inline:auto}
.c12 .section{padding-block:var(--gap)}
.s12-opening{text-align:center}
.s12-deck{font-family:var(--r-display);font-weight:400;font-style:italic;font-size:clamp(17px,1.6vw,21px);letter-spacing:0;color:var(--accent);margin-bottom:22px}
.s12-lead-h{font-size:clamp(38px,4.7vw,68px)!important;max-width:16ch;margin:0 auto!important;line-height:1.06}
.s12-opening-body{display:grid;grid-template-columns:.62fr 1.38fr;gap:clamp(40px,7vw,120px);max-width:1040px;margin:8px auto 0;text-align:left;align-items:start}
.s12-aside{padding-top:14px}
.s12-note{font-family:var(--r-display);font-weight:400;font-style:italic;font-size:clamp(22px,2vw,28px);line-height:1.28;letter-spacing:-.01em;color:var(--accent);max-width:11em}
.s12-first{max-width:none}
.s12-drop::first-letter{float:left;margin:.06em .1em 0 0;font-family:var(--r-display);font-weight:900;font-style:normal;font-size:4.4em;line-height:.72;color:var(--text)}

/* =====================================================================
   QUOTE
   ===================================================================== */
.s12-quote{display:grid;grid-template-columns:.82fr 1.18fr;gap:0 clamp(44px,6vw,88px);align-items:center}
.s12-quote-photo{grid-row:1;align-self:center;margin:0}
.c12 .s12-quote-photo .photo{aspect-ratio:.86;border-radius:46% 46% 4px 4px;transform:rotate(-2deg)}
.s12-quote-photo img{object-position:72% center}
.s12-quote-text{grid-row:1}
.c12 .s12-quote blockquote{position:relative;font-family:var(--r-display);font-weight:600;font-size:clamp(34px,3.9vw,58px);line-height:1.14;letter-spacing:-.02em;margin:0 0 40px;color:var(--text);text-wrap:balance}
.s12-qmark{position:absolute;left:-.05em;top:-.5em;font-family:var(--r-display);font-size:1.3em;color:var(--gold);opacity:.6}
.s12-prayer{max-width:36em}

/* =====================================================================
   THEN CAME RUIDOSO
   ===================================================================== */
.s12-reopen{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(34px,4.5vw,64px) clamp(44px,6vw,84px);align-items:center}
.s12-reopen-title{grid-column:1;grid-row:1}
.s12-reopen-title h2{font-size:clamp(52px,7vw,104px)!important;margin:0 0 20px;line-height:.98}
.s12-reopen-when{display:block;font-family:var(--r-serif);font-style:italic;font-size:16px;color:#4c5940}
.s12-reopen-photo{grid-column:2;grid-row:1;margin:0}
.c12 .s12-reopen-photo .photo{aspect-ratio:1.62;transform:rotate(1.5deg)}
.s12-reopen-photo figcaption{font-family:var(--r-serif);font-style:italic;font-size:13px;color:var(--ink-soft);margin:18px 0 0 22px}
.s12-reopen-copy{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,92px);max-width:1040px;margin-left:auto}

/* =====================================================================
   COMMUNITY (soft warm band for rhythm)
   ===================================================================== */
.s12-people{position:relative;background:linear-gradient(180deg,var(--paper-warm),#efe4d0 60%,var(--paper-warm));padding-block:clamp(84px,9vw,124px);isolation:isolate;overflow:hidden}
.s12-people-glow{position:absolute;z-index:0;left:50%;top:6%;width:720px;height:720px;transform:translateX(-50%);pointer-events:none;background:radial-gradient(circle,rgba(214,170,96,.2),transparent 62%)}
.s12-people .space{position:relative;z-index:1}
.s12-people-h{text-align:center;font-size:clamp(46px,5.8vw,86px)!important;margin:0 auto clamp(48px,6vw,72px)!important;max-width:15ch;line-height:1.03}
.s12-people-spread{display:grid;grid-template-columns:1.06fr 1fr;gap:clamp(48px,7vw,100px);align-items:start}
.c12 .s12-people-images{position:relative}
.c12 .s12-people-images>.photo:first-child{aspect-ratio:1.45;transform:rotate(-2.5deg);margin-right:44px}
.c12 .s12-people-images>.photo:last-child{aspect-ratio:1.5;transform:rotate(2.5deg);margin:44px 0 0 44px}
.s12-values{font-family:var(--r-display)!important;font-weight:600;font-style:normal;font-size:clamp(1.5rem,1.9vw,1.9rem)!important;line-height:1.32;letter-spacing:-.01em;color:var(--accent-deep)!important;margin-top:1.2em!important;word-spacing:.12em}

/* =====================================================================
   GRATITUDE
   ===================================================================== */
.s12-gratitude{display:grid;grid-template-columns:1fr .84fr;gap:clamp(56px,8vw,120px);align-items:center}
.s12-gratitude-copy h2{font-size:clamp(52px,6.4vw,92px)!important;margin:0 0 36px;line-height:1.0}
.s12-quiet-photo{margin:0}
.c12 .s12-quiet-photo .photo{aspect-ratio:.78;transform:rotate(2.5deg)}
.s12-quiet-photo img{object-position:57% center}
.s12-quiet-photo figcaption{font-family:var(--r-display);font-style:italic;font-size:clamp(26px,2.4vw,36px);line-height:1.14;color:var(--accent);text-align:right;margin-top:34px}

/* =====================================================================
   STILL BEING WRITTEN
   ===================================================================== */
.s12-unfinished{padding-block:clamp(60px,7vw,104px) var(--gap)}
/* Same canvas-to-canvas gap as A Bigger Story Began → Through it All.
   Through-it-All paper at the join is 249,246,239; this band is --paper
   244,240,230. Ramp the padding, never the `transparent` keyword. */
.gx + .s12-unfinished{
  padding-block-start:calc(clamp(96px,10vw,128px) + clamp(48px,6.4vw,96px) + 36px);
  /* Ramp runs 1.85× the padding so it eases out through the unfinished
     heading instead of finishing as a band at the artboard edge. */
  background:
    linear-gradient(to bottom,
      rgb(249 246 239) 0%,
      rgb(248.96 245.95 238.92) 10%,
      rgb(248.71 245.65 238.48) 20%,
      rgb(248.18 245.02 237.53) 30%,
      rgb(247.41 244.10 236.14) 40%,
      rgb(246.5 243 234.5) 50%,
      rgb(245.59 241.90 232.86) 60%,
      rgb(244.82 240.98 231.47) 70%,
      rgb(244.29 240.35 230.52) 80%,
      rgb(244.04 240.05 230.08) 90%,
      rgb(244 240 230) 100%)
      top/100% calc((clamp(96px,10vw,128px) + clamp(48px,6.4vw,96px) + 36px) * 1.85) no-repeat,
    var(--paper);
}
.gx + .s12-unfinished.art-canvas::before{
  -webkit-mask-image:linear-gradient(to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) calc(clamp(96px,10vw,128px) + clamp(48px,6.4vw,96px) + 36px),
    rgba(0,0,0,1) calc((clamp(96px,10vw,128px) + clamp(48px,6.4vw,96px) + 36px) * 1.85),
    rgba(0,0,0,1) 100%);
  mask-image:linear-gradient(to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) calc(clamp(96px,10vw,128px) + clamp(48px,6.4vw,96px) + 36px),
    rgba(0,0,0,1) calc((clamp(96px,10vw,128px) + clamp(48px,6.4vw,96px) + 36px) * 1.85),
    rgba(0,0,0,1) 100%);
}
.s12-unfinished-h{font-size:clamp(54px,6.6vw,98px)!important;max-width:14ch;margin:0 0 clamp(44px,5vw,64px);line-height:1.0}
.s12-unfinished-copy{display:grid;grid-template-columns:1fr 1fr;gap:clamp(44px,6vw,96px)}
.c12 .s12-unfinished.art-canvas::before{opacity:.08}

/* =====================================================================
   SIGN-OFF — the keepsake portrait + signature (Nick's ONLY photo)
   ===================================================================== */
.s12-signoff{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(44px,7vw,110px);align-items:center;padding-block:clamp(30px,4vw,56px) var(--gap)}
.s12-signoff-words .emphasis{font-family:var(--r-display)!important;font-weight:600;font-size:clamp(1.7rem,2.5vw,2.4rem)!important;line-height:1.24;color:var(--text);margin-bottom:.18em!important}
.s12-signoff-words .emphasis:last-child{color:var(--accent-deep)}
.s12-portrait{position:relative;justify-self:center;width:min(340px,80%);margin:0;isolation:isolate}
.s12-portrait-glow{position:absolute;z-index:0;inset:-14% -14% -6% -14%;pointer-events:none;background:radial-gradient(circle at 50% 42%,rgba(214,170,96,.32),transparent 66%);filter:blur(4px)}
.c12 .s12-portrait .photo{position:relative;z-index:1;aspect-ratio:.82;border-radius:52% 52% 4px 4px;border:9px solid #fffef8;transform:rotate(-2deg);box-shadow:0 3px 4px rgba(38,56,44,.08),0 30px 60px -22px rgba(45,58,40,.44)}
.s12-portrait .photo img{object-position:50% 20%}
.s12-portrait figcaption{position:relative;z-index:1;text-align:center;margin-top:22px}
.s12-portrait .signature{font-size:clamp(38px,4vw,52px);line-height:1.1;display:block}
.s12-portrait figcaption p{font-family:var(--body);font-size:13px;line-height:1.55;color:var(--ink-soft);margin-top:8px}

/* =====================================================================
   CLOSING BOOK NOW
   ===================================================================== */
.s12-close{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,7vw,104px);align-items:center;padding-block:clamp(80px,9vw,120px)}
.s12-close-photo{margin:0}
.c12 .s12-close-photo .photo{aspect-ratio:1.04;border-radius:46% 46% 4px 4px;transform:rotate(-1.5deg)}
.s12-close-photo img{object-position:50% 52%}
.s12-close-copy h2{font-size:clamp(52px,6.6vw,96px)!important;margin:0 0 22px;line-height:1.0}
.c12 main .s12-close-copy h2{color:#16291c}
.s12-close-copy>p{font-family:"NcBody",Georgia,serif;font-weight:400;font-style:normal;font-size:14.74px;color:var(--ink);margin:0 0 30px;max-width:24em}

/* ---- Chrome touch-ups to match the warmer canvas ---- */
.c12 .site-footer__tagline{font-family:var(--r-display);font-weight:600}

/* =====================================================================
   REVEALS (ungated; content shows without JS and under reduced motion)
   ===================================================================== */
.js .c12 [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.js .c12 [data-reveal].is-visible{opacity:1;transform:none}
/* staggered reveal (stagger.js): the group's pieces fade up in turn, 80ms apart by their row on the artboard.
   `translate` rather than `transform`, so rotated pieces keep their angle; nothing hides until the script has
   assigned the order (.rv-ready), so a script failure leaves the page fully visible. */
.rv-ready.js .c12 [data-reveal-group] .rv{opacity:0;translate:0 14px;transition:opacity .8s cubic-bezier(.2,.7,.2,1),translate .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--rv,0) * 80ms)}
.rv-ready.js .c12 [data-reveal-group].is-visible .rv{opacity:1;translate:none}
@media(prefers-reduced-motion:reduce){.rv-ready.js .c12 [data-reveal-group] .rv{opacity:1;translate:none;transition:none}}
@media(prefers-reduced-motion:reduce){.js .c12 [data-reveal]{transition-duration:.9s,1s!important}}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(min-width:1600px){
  .s12-photo-a{left:2%;width:22%;height:380px}
  .s12-photo-b{right:1%;width:23%;height:300px}
}
@media(max-width:1100px){
  .s12-opening-body{gap:56px}
  .s12-photo-a{left:-6%;width:29%;height:320px}
  .s12-photo-b{right:-7%;width:31%;height:246px}
  .s12-photo-c{width:29%;left:2%}
  .s12-photo-d{width:31%;right:0}
  .s12-quote{gap:0 44px}
  .s12-reopen{gap:40px}
  .s12-reopen-copy,.s12-unfinished-copy,.s12-people-spread{gap:48px}
  .s12-gratitude{gap:56px}
  .s12-close{gap:56px}
}
@media(max-width:760px){
  .s12-hero{height:auto;min-height:0;max-height:none;padding:150px 0 clamp(360px,92vw,520px);display:block}
  .s12-hero-glow{top:26%}
  .s12-masthead{width:calc(100% - 44px);margin-inline:auto;padding-top:0}
  .s12-masthead h1{font-size:clamp(58px,15vw,84px)}
  .s12-hero-photos{inset:auto 0 0 0;height:clamp(360px,92vw,520px);pointer-events:auto}
  .s12-photo-a{top:auto;bottom:44%;left:2%;width:44%;height:216px;transform:rotate(-7deg)}
  .s12-photo-b{top:auto;bottom:46%;right:-2%;width:52%;height:168px;transform:rotate(7deg)}
  .s12-photo-c{bottom:2%;left:9%;width:40%;height:132px}
  .s12-photo-d{bottom:4%;right:-3%;width:51%;height:168px}
  .s12-handnote{display:none}
  .s12-opening{text-align:left}
  .s12-lead-h{max-width:none;margin:0!important}
  .s12-orn{margin-inline:0;justify-content:flex-start;width:280px}
  .s12-opening-body{grid-template-columns:1fr;gap:30px}
  .s12-aside{padding-top:0;order:2}
  .s12-note{max-width:none}
  .s12-first{order:1}
  .s12-quote{display:flex;flex-direction:column;gap:32px}
  .c12 .s12-quote-photo{width:86%}
  .c12 .s12-quote-photo .photo{aspect-ratio:1.05}
  .s12-reopen{grid-template-columns:1fr;gap:28px}
  .s12-reopen-title,.s12-reopen-photo{grid-column:1}
  .s12-reopen-title h2{font-size:clamp(58px,15vw,80px)!important}
  .c12 .s12-reopen-photo .photo{aspect-ratio:1.4}
  .s12-reopen-copy{grid-template-columns:1fr;gap:24px;margin-left:0}
  .s12-people-spread{grid-template-columns:1fr;gap:44px}
  .s12-people-h{text-align:left;margin-bottom:40px!important}
  .s12-gratitude{display:flex;flex-direction:column;gap:44px}
  .c12 .s12-quiet-photo{width:88%}
  .c12 .s12-quiet-photo .photo{aspect-ratio:1.02}
  .s12-quiet-photo figcaption{text-align:left}
  .s12-unfinished-copy{grid-template-columns:1fr;gap:28px}
  .s12-signoff{grid-template-columns:1fr;gap:44px;text-align:center;padding-bottom:clamp(64px,10vw,96px)}
  .s12-signoff-words{order:2}
  .s12-portrait{order:1;width:min(280px,74%)}
  .s12-close{grid-template-columns:1fr;gap:38px}
  .s12-close-photo{order:2}
  .s12-close-copy{order:1}
  .s12-close-copy h2{font-size:clamp(52px,13vw,76px)!important}
}
@media(max-width:420px){
  .s12-masthead h1{font-size:clamp(50px,14vw,64px)}
  .s12-lead-h{font-size:38px!important}
  .s12-drop::first-letter{font-size:3.9em}
}