/* Memory book cover designs. Mirrors the PDF drawing in js/occasi-studio-pdf.js (book covers).
   Colours come from inline custom properties set by occasi-studio-memories.js:
   --cover-base, --cover-paper, --cover-ink, --cover-foil. "classic" keeps the original styling. */
.memory-cover:not(.cover-classic){outline:none;background:var(--cover-base);color:var(--cover-paper)}
.memory-cover:not(.cover-classic).has-photo::after{content:none}
.memory-cover:not(.cover-classic) .cover-photo{position:relative;inset:auto;width:auto;height:auto;object-fit:cover;display:block}
.memory-cover .cover-copy{position:relative;z-index:1}
/* The dashboard refinement sets every h2 in the sans; a book cover keeps the serif it was designed with. */
.studio-body .memory-cover h2{font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-weight:500;letter-spacing:0}
.memory-cover .cover-copy .eyebrow{letter-spacing:.18em}
.memory-cover:not(.cover-classic) .cover-copy .eyebrow{margin-bottom:12px}
.memory-cover:is(.cover-framed,.cover-fullbleed) .eyebrow{color:var(--cover-paper);opacity:.85}
.memory-cover:is(.cover-linen,.cover-gilded,.cover-framed){padding:46px 56px;gap:16px}
.memory-cover:is(.cover-linen,.cover-gilded,.cover-framed).has-photo h2{font-size:clamp(24px,2.8vw,40px);margin-bottom:10px}

/* Linen frame: ivory page, fine double frame, inset photo above the title */
.memory-cover.cover-linen{background:var(--cover-paper);color:var(--cover-ink);align-content:center;gap:22px}
.memory-cover.cover-linen::before,.memory-cover.cover-linen::after{content:'';position:absolute;pointer-events:none;border:1px solid var(--cover-base)}
.memory-cover.cover-linen::before{inset:22px}
.memory-cover.cover-linen.has-photo::after,.memory-cover.cover-linen::after{content:'';inset:28px;opacity:.5;background:none}
.memory-cover.cover-linen .eyebrow{color:var(--cover-base);opacity:1}
.memory-cover.cover-linen .cover-photo{width:clamp(110px,25%,250px);aspect-ratio:4/3}
.memory-cover.cover-linen.has-photo .cover-copy h2{margin-bottom:10px}

/* Gilded border: deep colour, gold border with small diamond ornaments */
.memory-cover.cover-gilded{align-content:center;gap:22px}
.memory-cover.cover-gilded::before{content:'';position:absolute;inset:20px;border:1.5px solid var(--cover-foil);pointer-events:none}
.memory-cover.cover-gilded::after,.memory-cover.cover-gilded.has-photo::after{content:'';position:absolute;left:50%;top:14px;width:11px;height:11px;margin-left:-5.5px;background:var(--cover-foil);transform:rotate(45deg);pointer-events:none}
.memory-cover.cover-gilded .cover-copy::after{content:'';display:block;width:11px;height:11px;margin:22px auto 0;background:var(--cover-foil);transform:rotate(45deg)}
.memory-cover.cover-gilded .eyebrow{color:var(--cover-foil);opacity:1}
.memory-cover.cover-gilded .cover-photo{width:clamp(110px,24%,240px);aspect-ratio:4/3;outline:1px solid var(--cover-foil);outline-offset:5px}

/* Editorial: ivory page, large left-aligned title, photo filling the right side */
.memory-cover.cover-editorial{background:var(--cover-paper);color:var(--cover-ink);text-align:left;place-items:end start;padding:46px 48px}
.memory-cover.cover-editorial .eyebrow{position:absolute;top:46px;left:48px;color:var(--cover-base);opacity:1;margin:0}
.memory-cover.cover-editorial .cover-copy{position:static;max-width:52%}
.memory-cover.cover-editorial.has-photo .cover-copy{max-width:48%}
.memory-cover.cover-editorial h2{margin:0 0 18px;font-size:clamp(34px,4.4vw,62px);line-height:1.06;max-width:none}
.memory-cover.cover-editorial .cover-sub{border-top:1px solid var(--cover-base);padding-top:14px;max-width:340px;margin:0}
.memory-cover.cover-editorial .cover-photo{position:absolute;top:0;right:0;bottom:0;width:42%;height:100%}

/* Framed photo: deep colour, photo in an ivory mount above the title */
.memory-cover.cover-framed{align-content:center;gap:24px}
.memory-cover.cover-framed .cover-photo{width:clamp(120px,28%,280px);aspect-ratio:4/3;border:12px solid var(--cover-paper);box-shadow:0 10px 24px #0000002e}
.memory-cover.cover-framed:not(.has-photo) .cover-copy{background:var(--cover-paper);color:var(--cover-ink);padding:44px 52px;max-width:72%}
.memory-cover.cover-framed:not(.has-photo) .eyebrow{color:var(--cover-base);opacity:1}

/* Modern split: photo or colour block on the left, title on ivory to the right */
.memory-cover.cover-split{background:var(--cover-paper);color:var(--cover-ink);text-align:left;padding:0;grid-template-columns:45% 1fr;place-items:center stretch}
.memory-cover.cover-split::before{content:'';grid-column:1;grid-row:1;align-self:stretch;height:100%;background:var(--cover-base)}
.memory-cover.cover-split .cover-photo{grid-column:1;grid-row:1;width:100%;height:100%;align-self:stretch}
.memory-cover.cover-split .cover-copy{grid-column:2;grid-row:1;padding:40px 44px}
.memory-cover.cover-split .eyebrow{color:var(--cover-base);opacity:1}
.memory-cover.cover-split h2{margin-left:0;max-width:none}
.memory-cover.cover-split .cover-sub{margin:0}

/* Full photo: the photo fills the page, title on a soft lower band */
.memory-cover.cover-fullbleed{text-align:left;place-items:end start;padding:42px 46px}
.memory-cover.cover-fullbleed .cover-photo{position:absolute;inset:0;width:100%;height:100%}
.memory-cover.cover-fullbleed.has-photo::after{content:'';position:absolute;inset:auto 0 0 0;height:58%;background:linear-gradient(transparent,#0e1a17d9)}
.memory-cover.cover-fullbleed .cover-copy{width:min(70%,560px)}
.memory-cover.cover-fullbleed h2{margin-left:0;max-width:none}
.memory-cover.cover-fullbleed .cover-sub{margin:0}

/* Artwork covers: book cloth in the chosen colour with Occasi stationery as an inset printed panel */
.memory-cover.cover-art{padding:0;place-items:center;background:var(--cover-base);background-image:repeating-linear-gradient(45deg,#ffffff08 0 2px,transparent 2px 5px),repeating-linear-gradient(-45deg,#00000010 0 2px,transparent 2px 5px)}
.memory-cover.cover-art .cover-panel{position:relative;height:90%;aspect-ratio:2/3;box-shadow:0 2px 0 #00000022,0 14px 30px #0000003d;outline:1px solid var(--cover-foil);outline-offset:7px;container-type:inline-size}
.memory-cover.cover-art .cover-panel>*{border-radius:0}
.memory-cover.cover-art .cover-art-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.memory-cover.cover-art .cover-copy{position:absolute;left:19%;right:19%;top:var(--art-y,45%);transform:translateY(-50%);color:var(--art-ink);text-align:center}
.memory-cover.cover-art .eyebrow{color:var(--art-accent);opacity:1;font-size:max(7px,3.6cqi);letter-spacing:.16em;margin:0 0 4cqi}
.studio-body .memory-cover.cover-art h2{font-size:9.6cqi;line-height:1.12;margin:0 0 4cqi;color:var(--art-ink);overflow-wrap:break-word}
.memory-cover.cover-art .cover-sub{font-size:max(8px,4.6cqi);line-height:1.4;margin:0}
/* Cover picker */
.cover-picker{border:0;padding:0;margin:0 0 18px;min-width:0}
.cover-picker legend{font-size:13px;font-weight:600;margin-bottom:10px}
.cover-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.cover-choice{position:relative;display:grid;gap:6px;cursor:pointer;font-size:12px;line-height:1.3}
.cover-choice input{position:absolute;opacity:0;pointer-events:none}
.cover-choice .cover-thumb{display:block;aspect-ratio:1.414;border-radius:6px;border:1px solid #d6ddd2;overflow:hidden;position:relative;background:var(--cover-base)}
.cover-choice small{color:#5d655b}
.cover-choice input:checked+.cover-thumb{outline:2px solid #1f4a3a;outline-offset:2px}
.cover-choice input:focus-visible+.cover-thumb{outline:3px solid #1f4a3a;outline-offset:3px}
.cover-thumb i{position:absolute;display:block}
.cover-thumb.t-art{background:var(--cover-base);display:grid;place-items:center}
.cover-picker .cover-thumb.t-art img{position:absolute;top:8%;left:50%;height:84%;width:auto;max-width:none;transform:translateX(-50%);aspect-ratio:2/3;object-fit:cover;box-shadow:0 3px 8px #0000003a}
.cover-group{font-size:12px;color:#5d655b;margin:14px 0 8px}
.cover-group:first-of-type{margin-top:0}
.cover-thumb.t-linen{background:var(--cover-paper)}
.cover-thumb.t-linen i{inset:8px;border:1px solid var(--cover-base);box-shadow:inset 0 0 0 3px var(--cover-paper),inset 0 0 0 4px color-mix(in srgb,var(--cover-base) 50%,transparent)}
.cover-thumb.t-gilded i{inset:7px;border:1px solid var(--cover-foil)}
.cover-thumb.t-editorial{background:var(--cover-paper)}
.cover-thumb.t-editorial i{top:0;right:0;bottom:0;width:42%;background:color-mix(in srgb,var(--cover-base) 70%,#c9c2b4)}
.cover-thumb.t-framed i{left:30%;right:30%;top:18%;height:42%;background:#c9c2b4;border:4px solid var(--cover-paper)}
.cover-thumb.t-split{background:var(--cover-paper)}
.cover-thumb.t-split i{top:0;left:0;bottom:0;width:45%;background:var(--cover-base)}
.cover-thumb.t-fullbleed{background:linear-gradient(160deg,#c9c2b4,color-mix(in srgb,var(--cover-base) 80%,#000))}
.cover-thumb b{position:absolute;left:14%;right:14%;bottom:26%;height:4px;border-radius:2px;background:currentColor;opacity:.75}
.cover-thumb.t-classic b,.cover-thumb.t-gilded b,.cover-thumb.t-framed b,.cover-thumb.t-fullbleed b{color:var(--cover-paper)}
.cover-thumb.t-linen b,.cover-thumb.t-editorial b,.cover-thumb.t-split b{color:var(--cover-ink)}
.cover-thumb.t-editorial b{left:10%;right:50%}
.cover-thumb.t-split b{left:52%;right:8%;bottom:48%}
.cover-thumb.t-fullbleed b{left:9%;right:42%;bottom:16%}
@media (max-width:640px){
 .memory-cover.cover-editorial .cover-copy,.memory-cover.cover-editorial.has-photo .cover-copy{max-width:56%}
 .memory-cover.cover-split .cover-copy{padding:24px 22px}
 .memory-cover.cover-editorial,.memory-cover.cover-fullbleed{padding:28px 26px}
 .memory-cover.cover-editorial .eyebrow{top:28px;left:26px}
}

/* Photo layouts before a photo is added (6 Oct 2026): show where the photo goes instead of a blank cover. */
.memory-cover .cover-photo-empty{display:grid;place-items:center;padding:16px;background:color-mix(in srgb,var(--cover-paper) 82%,var(--cover-base));border:1.5px dashed color-mix(in srgb,var(--cover-base) 45%,transparent);color:var(--cover-base);font:600 13px/1.4 var(--sans,Arial,sans-serif);letter-spacing:.02em;text-align:center}
.memory-cover.cover-framed .cover-photo-empty,.memory-cover.cover-linen .cover-photo-empty,.memory-cover.cover-gilded .cover-photo-empty{min-height:90px}
.memory-cover.cover-fullbleed .cover-photo-empty{align-items:start;padding-top:18%}
@media(max-width:640px){.memory-cover.cover-framed:not(.has-photo) .cover-copy{padding:28px 22px;max-width:88%}}