/* Một cột giấy trắng, dùng ảnh cưới thật và các chức năng chung của thiệp. */
:root[data-design="photo"] {
  --paper:#fafaf6;--paper-2:#eff1e9;--field:#fff;--ink:#2d3b31;--ink-soft:#566458;
  --accent:#425d4a;--on-accent:#fff;--gold:#657a60;--line:#d8dfd2;--wash:#e8ece3;
  --r:8px;--f-script:"Pinyon Script","Great Vibes",cursive;
  --f-calligraphy:"Ballet","Pinyon Script",cursive;
  --f-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
}
[data-design="photo"] body {background:#e2e7dc;font:400 19px/1.55 var(--f-display)}
[data-design="photo"] #invite {
  width:100%;max-width:480px;margin-inline:auto;padding:0 0 150px;
  background:var(--paper) url('/designs/photo/paper.jpg') repeat;
  box-shadow:0 0 60px #354d3112;
}
[data-design="photo"] .sec {max-width:480px;padding:40px 24px;scroll-margin-top:20px}
[data-design="photo"] .sec-head {gap:10px;margin-bottom:26px}
[data-design="photo"] .sec-head h2 {font:400 47px/1.35 var(--f-script);color:var(--accent)}
[data-design="photo"] .eyebrow {font:500 13px/1.5 var(--f-display);letter-spacing:.1em}
[data-design="photo"] .lunar {font-size:18px;line-height:1.55}
[data-design="photo"] .photo-script {font:400 50px/1.35 var(--f-script);color:var(--accent)}
[data-design="photo"] .photo-date {font:400 26px/1.4 var(--f-display);letter-spacing:.09em;color:var(--accent)}
[data-design="photo"] .photo-envelope {padding:0;background:#e2e7dc;display:grid;place-items:center}
.photo-envelope-panel {position:relative;width:min(100%,480px);height:100svh;max-height:900px;min-height:500px;overflow:hidden;background:var(--paper)}
.photo-envelope-image {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.photo-envelope-panel::after {content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 32%,#fafaf650 47%,#fafaf6ef 68%,#fafaf6 94%);pointer-events:none}
.photo-envelope-copy {position:absolute;inset:auto 20px max(28px,env(safe-area-inset-bottom)) ;z-index:2;display:grid;gap:9px;text-align:center;justify-items:center}
[data-design="photo"] .photo-envelope-copy .photo-script {font:500 14px/1.4 var(--f-display);letter-spacing:.2em;text-transform:uppercase}
.photo-envelope-names {display:grid;gap:0;font:400 clamp(51px,15.8vw,68px)/1.18 var(--f-calligraphy);text-wrap:balance;color:var(--accent);width:100%;font-synthesis:none}
.photo-envelope-names .photo-name,.photo-names .photo-name {display:block;white-space:nowrap;padding-inline:12px}
.photo-envelope-names .amp,.photo-names .amp {font:400 25px/1.2 var(--f-script);color:var(--gold);padding-block:2px}
.photo-envelope-copy .invitee {gap:5px;margin-block:4px}
.photo-envelope-copy .invitee strong {font-size:24px;font-weight:400}
.photo-envelope-copy .btn {min-height:48px;min-width:155px}
.photo-floral {position:absolute;display:block;height:auto;pointer-events:none;user-select:none}
.photo-floral--cover {width:150px;right:-10px;bottom:0;z-index:1;transform:rotate(180deg)}
.photo-bouquet {display:block;width:68px;height:auto;pointer-events:none;user-select:none}
.photo-hero-copy>.photo-bouquet {margin:16px auto 0}
.photo-hero {text-align:center;position:relative}
.photo-hero-picture {position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper-2)}
.photo-hero-picture>img {width:100%;height:100%;display:block;object-fit:cover;object-position:50% 20%;transform-origin:50% 20%}
.photo-hero-picture::after {content:"";position:absolute;inset:50% 0 0;background:linear-gradient(transparent,var(--paper));pointer-events:none}
.photo-hero-copy {position:relative;margin-top:-64px;padding:0 22px 26px;display:grid;gap:7px;justify-items:center}
[data-design="photo"] .photo-names {display:grid;gap:0;width:100%;font:400 clamp(53px,16.4vw,72px)/1.2 var(--f-calligraphy);color:var(--accent);overflow-wrap:normal;font-synthesis:none}
.opened .photo-hero-picture>img {animation:kenburns 16s ease-out both}
[data-design="photo"] .photo-calendar {padding-top:16px;padding-bottom:44px}
.photo-calendar table {width:100%;max-width:350px;margin:auto;border-collapse:collapse;text-align:center;font-variant-numeric:tabular-nums}
.photo-calendar caption {font:500 31px/1.3 var(--f-display);color:var(--accent);padding-bottom:18px}
.photo-calendar caption span {display:block;font-size:17px;letter-spacing:.15em;margin-top:4px}
.photo-calendar th {font-size:12px;font-weight:500;padding-bottom:8px;color:var(--gold)}
.photo-calendar td {height:42px;width:14.285%;font-size:14px}
.photo-calendar td span {display:inline-grid;place-items:center;width:34px;height:34px}
.photo-calendar .wedding-day {background:var(--accent);color:#fff;border-radius:50%;box-shadow:0 0 0 4px var(--wash)}
[data-design="photo"] .photo-letter {text-align:center;padding-top:0}
.photo-letter>.invitee {margin-top:20px;gap:10px}
.photo-letter>.invitee>span {font:500 21px/1.5 var(--f-display)}
.photo-letter>.invitee>strong {font-style:italic;font-weight:400;font-size:30px;line-height:1.4}
.photo-invitation-line {font:500 18px/1.5 var(--f-display);margin:8px auto 26px;max-width:30ch}
.photo-letter-portrait {position:relative;margin-bottom:42px}
.photo-letter-image {display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:180px 180px 4px 4px}
.photo-floral--portrait {width:180px;right:-18px;bottom:-18px;transform:rotate(180deg)}
.photo-letter>.photo-bouquet {width:62px;margin:22px auto 0}
.photo-wedding-title {font:500 29px/1.4 var(--f-display);letter-spacing:.05em}
.photo-wedding-title em {font:400 36px var(--f-script);letter-spacing:0}
.photo-couple-names {display:grid;gap:2px;margin:24px 0 36px;padding-block:8px;font:400 clamp(54px,16vw,72px)/1.28 var(--f-calligraphy);font-synthesis:none;color:var(--accent)}
.photo-couple-names>span:not(.amp) {white-space:nowrap}
.photo-couple-names .amp {font:400 27px/1.15 var(--f-script)}
[data-design="photo"] .parents {grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
[data-design="photo"] .fam .who {font-size:18px;line-height:1.5}
[data-design="photo"] .fam .addr {font-size:16px}
[data-design="photo"] .announce {font:500 15px/1.6 var(--f-display);letter-spacing:.02em;margin-top:28px}
[data-design="photo"] .couple strong {font:400 38px/1.4 var(--f-script)}
.photo-party-time {font:500 19px var(--f-display);margin:24px 0 14px}
.photo-party-date {display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;margin:0 auto 14px;max-width:300px}
.photo-party-date span {font-size:12px;border-block:1px solid var(--line);padding-block:8px}
.photo-party-date b {font:500 55px/1 var(--f-display);color:var(--accent)}
.photo-people {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;text-align:center;margin-top:38px}
.photo-person {min-width:0;margin:0}
.photo-person:nth-child(2) {padding-top:60px}
.photo-person img {display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:120px 120px 4px 4px}
.photo-person figcaption {display:grid;gap:10px;justify-items:center;padding-top:14px}
.photo-person h3 {font:italic 500 25px/1.25 var(--f-display)}
[data-design="photo"] .events {gap:24px}
[data-design="photo"] .ev {grid-template-columns:1fr;background:#ffffff70;text-align:center;border-radius:120px 120px 8px 8px}
[data-design="photo"] .ev-date {padding:36px 20px 20px;gap:6px;background:var(--wash);color:var(--accent)}
[data-design="photo"] .ev-date b {font-size:54px}
[data-design="photo"] .ev-date small {font-size:12px;letter-spacing:.06em}
[data-design="photo"] .ev-body {padding:24px 18px;justify-items:center;gap:10px}
[data-design="photo"] .ev-top {justify-content:center;gap:10px}
[data-design="photo"] .ev-top h3 {font:400 36px/1.35 var(--f-script);width:100%}
[data-design="photo"] .ev-acts {justify-content:center}
[data-design="photo"] #s-events .sec-head::before,[data-design="photo"] #s-wishes .sec-head::before,[data-design="photo"] .foot::before {content:"";display:block;width:62px;height:85px;background:url('/designs/photo/bouquet.svg') center/contain no-repeat;pointer-events:none}
[data-design="photo"] #s-wishes .sec-head::before {width:36px;height:50px}
[data-design="photo"] #s-album {background:var(--accent);color:var(--paper);padding:40px 16px}
[data-design="photo"] #s-album .sec-head h2 {color:var(--paper)}
[data-design="photo"] #s-album .eyebrow,[data-design="photo"] #s-album .orn {color:#cedac8}
[data-design="photo"] .album-preview {border-color:#ffffff60;border-radius:4px;margin-bottom:28px}
[data-design="photo"] .album-preview-open {background:#263d2d}
[data-design="photo"] .ev-schedule {width:fit-content;max-width:100%}
[data-design="photo"] .ev-schedule time {font-size:28px;text-align:center}
[data-design="photo"] .ev-schedule span {font-size:21px}
[data-design="photo"] .album-cta {gap:10px;flex-wrap:wrap;margin-top:22px}
[data-design="photo"] #s-album .btn {color:var(--paper);border-color:#ffffff90;font-size:13px}
.photo-album-closing {margin:0;position:relative;overflow:hidden}
.photo-album-closing>img {width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.photo-album-closing::after {content:"";position:absolute;inset:60% 0 0;background:linear-gradient(transparent,#172d20b8)}
.photo-album-closing figcaption {position:absolute;z-index:1;inset:auto 20px 28px;display:flex;gap:10px;justify-content:center;align-items:center;color:white;font:500 35px var(--f-display)}
.photo-album-closing em {font:400 55px var(--f-script)}
[data-design="photo"] .rsvp {padding:20px 16px;background:#ffffff75;font:400 15px/1.6 var(--f-body)}
[data-design="photo"] .sec-head .lede {font:400 19px/1.55 var(--f-display)}
[data-design="photo"] .ev-venue {font:600 20px/1.4 var(--f-display)}
[data-design="photo"] .ev-addr,[data-design="photo"] .ev-lunar {font-size:17px;line-height:1.5}
[data-design="photo"] input,[data-design="photo"] select,[data-design="photo"] textarea {font-size:16px}
[data-design="photo"] .seg span {font-size:13px}
[data-design="photo"] .count {padding:28px 14px;background:var(--wash);border-radius:100px 100px 8px 8px}
[data-design="photo"] .count-cell b {font-weight:400;font-size:48px}
[data-design="photo"] .count-cell span {font:500 12px/1.5 var(--f-display);letter-spacing:.08em}
[data-design="photo"] .sec--tight {padding-block:16px}
[data-design="photo"] .foot {padding-top:24px;padding-bottom:0}
[data-design="photo"] .foot .names-sm {font:400 39px/1.45 var(--f-script)}
[data-design="photo"] .foot p:not(.names-sm) {font-size:19px;line-height:1.65}
.photo-actions {position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:44;display:flex;width:min(100%,480px);padding:12px 12px calc(12px + env(safe-area-inset-bottom));gap:8px;background:#fafaf6f5;border-top:1px solid var(--line);box-shadow:0 -4px 20px #243d2410}
.photo-actions a {display:grid;place-items:center;flex:1;min-height:44px;color:var(--accent);text-decoration:none;font:500 12px/1.4 var(--f-body);border:1px solid var(--line);border-radius:6px}
.photo-actions a:hover {background:var(--wash)}
.photo-actions .photo-gift-action {display:flex;align-items:center;justify-content:center;gap:5px}
.photo-gift-action .gift-icon {width:17px;height:17px}
[data-design="photo"] .music-btn {top:calc(14px + env(safe-area-inset-top));bottom:auto;right:max(14px,calc(50vw - 226px));display:grid;place-items:center;width:46px;height:46px;background:#fafaf6eb}
[data-design="photo"] .scroll-btn {left:max(14px,calc(50vw - 226px));bottom:calc(86px + env(safe-area-inset-bottom));font-size:12px;padding:8px 14px}
[data-design="photo"] .sealed .photo-actions {visibility:hidden}
@media(max-height:620px) {
  .photo-envelope-panel {min-height:0}
  .photo-envelope-panel::after {background:linear-gradient(180deg,transparent 32%,#fafaf6c2 48%,#fafaf6 65%)}
  .photo-envelope-copy {bottom:16px;gap:4px}
  .photo-envelope-names {font-size:42px;line-height:1.15}
  .photo-envelope-names .amp {font-size:20px;padding-block:0}
  [data-design="photo"] .photo-envelope-copy .photo-script {font-size:12px}
  [data-design="photo"] .photo-envelope-copy .photo-date {font-size:23px}
  .photo-envelope-copy .invitee {margin-block:0;gap:2px}
  .photo-envelope-copy .invitee strong {font-size:21px}
  .photo-envelope-copy .btn {min-height:44px}
}
@media(max-width:360px) {
  [data-design="photo"] .sec {padding-inline:18px}
  [data-design="photo"] .photo-script {font-size:45px}
  [data-design="photo"] .fam .who {font-size:16px}
  .photo-person h3 {font-size:20px}
  .photo-couple-names {font-size:52px}
  [data-design="photo"] .couple strong {font-size:33px}
}
@media(prefers-reduced-motion:reduce) {
  .opened .photo-hero-picture>img,.opened .photo-hero-copy>.photo-script,.opened .photo-hero-copy>.photo-date {animation:none!important}
}