.life-preview{background:#dce1bc;overflow:hidden;min-height:100vh}
.life-preview-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.55fr);gap:8vw;align-items:end;margin:38px 0 44px}
.life-preview-head .hand{display:block;margin-bottom:6px;transform:rotate(-2deg);transform-origin:left center}
.life-preview-head h2{font-size:clamp(68px,8.1vw,132px);line-height:.78;letter-spacing:-.065em}
.life-preview-head h2 em{font-weight:400}
.life-preview-head>p{max-width:520px;font-size:clamp(15px,1.18vw,19px);line-height:1.8;border-left:1px solid rgba(31,63,43,.45);padding-left:24px;margin-bottom:2px}
.life-preview-layout{display:grid;grid-template-columns:minmax(230px,.31fr) minmax(0,.69fr);gap:clamp(38px,6vw,92px);align-items:start}
.life-record-preview{position:relative;align-items:flex-start;padding:18px 0 0 12px}
.life-record-preview .record{width:clamp(225px,20vw,330px);height:clamp(225px,20vw,330px);box-shadow:0 16px 35px rgba(31,45,35,.18)}
.life-record-preview .record-label{font-size:clamp(14px,1.25vw,20px)}
.life-record-preview .record-foot{margin:18px 0 0 8px;font-size:9px;letter-spacing:.17em}
.life-track-note{margin:46px 0 0 8px;display:flex;flex-direction:column;border-top:1px solid rgba(31,63,43,.5);padding-top:12px;width:min(260px,92%)}
.life-track-note span{font-size:10px;letter-spacing:.2em}
.life-track-note strong{font-family:var(--font-display,Georgia,serif);font-size:clamp(23px,2.2vw,35px);font-weight:500;line-height:1.05;margin-top:8px}
.life-album{min-width:0}
.life-spread{height:clamp(430px,45vw,670px);display:grid;grid-template-columns:1.38fr .82fr .88fr;grid-template-rows:1fr .86fr;gap:clamp(12px,1.3vw,22px);position:relative;transition:opacity .18s ease,transform .18s ease}
.life-spread.is-changing{opacity:.18;transform:translateY(8px)}
.life-shot{background:#f3ead9;padding:clamp(8px,.75vw,12px);box-shadow:0 10px 24px rgba(50,51,34,.12);position:relative;min-width:0;min-height:0;margin:0}
.life-shot img{width:100%;height:calc(100% - 25px);display:block;object-fit:cover;filter:saturate(.88) contrast(.98)}
.life-shot figcaption{height:25px;display:flex;align-items:flex-end;font-size:8px;letter-spacing:.15em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#263d2d}
.life-shot-main{grid-row:1/3;transform:rotate(-.8deg);z-index:2}
.life-shot-main img{object-position:center center}
.life-shot-a{grid-column:2/4;transform:rotate(.5deg)}
.life-shot-b{grid-column:2;transform:rotate(-1.2deg)}
.life-shot-c{grid-column:3;transform:rotate(1deg)}
.life-shot-c[hidden]{display:none}
.life-shot-c[hidden]+.life-margin-note{grid-column:3;display:flex}
.life-margin-note{display:none;background:#efb7c1;color:#1f3f2b;padding:clamp(18px,2vw,30px);flex-direction:column;justify-content:center;align-items:flex-start;position:relative;transform:rotate(1deg)}
.life-margin-note:before{content:"";position:absolute;top:-8px;left:50%;width:70px;height:20px;background:rgba(239,230,210,.8);transform:translateX(-50%) rotate(-3deg)}
.life-margin-note span{font-family:var(--font-hand,"Comic Sans MS",cursive);font-size:clamp(18px,2vw,31px)}
.life-margin-note strong{font-family:var(--font-display,Georgia,serif);font-size:clamp(25px,3vw,44px);line-height:.9;font-weight:500;font-style:italic}
.life-margin-note i{font-style:normal;font-size:28px;align-self:flex-end;margin-top:18px}
.life-controls{display:grid;grid-template-columns:minmax(330px,1.05fr) minmax(250px,.95fr);gap:clamp(28px,4vw,64px);align-items:start;margin-top:34px;border-top:1px solid rgba(31,63,43,.45)}
.life-controls .tracks{margin:0}
.life-controls .track-btn{min-height:54px;padding:0 5px;background:transparent}
.life-controls #trackDisplay{padding-top:18px;min-height:145px}
.life-controls #trackQuote{font-family:var(--font-serif,Georgia,serif);font-style:italic;font-size:clamp(17px,1.45vw,23px);line-height:1.5;margin:0 0 12px}
.life-controls #trackDesc{font-size:13px;line-height:1.75;margin:0;max-width:520px}
.life-record-preview .record.is-cued{animation:record-cue .75s cubic-bezier(.2,.8,.2,1)}
@keyframes record-cue{from{transform:rotate(0)}to{transform:rotate(42deg)}}
@media (max-width:900px){
  .life-preview-head{grid-template-columns:1fr;gap:24px;margin-bottom:34px}
  .life-preview-head>p{max-width:630px}
  .life-preview-layout{grid-template-columns:1fr}
  .life-record-preview{display:grid;grid-template-columns:auto 1fr;column-gap:24px;align-items:center;padding:0}
  .life-record-preview .record{width:190px;height:190px;grid-row:1/3}
  .life-record-preview .record-foot{margin:0;align-self:end}
  .life-track-note{margin:14px 0 0;width:100%;align-self:start}
  .life-spread{height:620px}
}
@media (max-width:620px){
  .life-preview{padding-left:20px;padding-right:20px}
  .life-preview-head{margin-top:28px}
  .life-preview-head h2{font-size:63px}
  .life-preview-head>p{font-size:14px;line-height:1.7;padding-left:16px}
  .life-record-preview{grid-template-columns:128px 1fr;column-gap:18px}
  .life-record-preview .record{width:128px;height:128px}
  .life-record-preview .record-label{font-size:10px}
  .life-record-preview .record-foot{font-size:7px}
  .life-track-note{margin-top:10px}
  .life-track-note strong{font-size:22px}
  .life-spread{height:570px;grid-template-columns:1.08fr .92fr;grid-template-rows:1.15fr .85fr .78fr;gap:10px}
  .life-shot-main{grid-column:1/3;grid-row:1;transform:rotate(-.5deg)}
  .life-shot-a{grid-column:1;grid-row:2/4}
  .life-shot-b{grid-column:2;grid-row:2}
  .life-shot-c{grid-column:2;grid-row:3}
  .life-shot-c[hidden]+.life-margin-note{grid-column:2;grid-row:3}
  .life-shot figcaption{font-size:7px;letter-spacing:.08em}
  .life-controls{grid-template-columns:1fr;gap:10px;margin-top:24px}
  .life-controls #trackDisplay{padding-top:12px;min-height:160px}
}
@media (prefers-reduced-motion:reduce){.life-spread,.life-record-preview .record{transition:none!important;animation:none!important}}