/* Keepsake book looks (15 Oct 2026). The container (.lk) carries data-look, data-frame, data-label, data-type,
   data-sepia and data-dropcap; book-looks.js sets them from the "Choose the look" panel.
   Print-safe: light papers only, and the paper tint is left off when printing (no ink spent on backgrounds). */

.lk{--paper:#FBF6EA;--ink:#2B2117;--accent:#7A5A2E;--rule:#CDBF9F;background:var(--paper);color:var(--ink);transition:background-color .3s}
.lk .spread__l,.lk .spread__r{background:transparent}
.lk[data-look=heirloom]{--paper:#FBF6EA;--accent:#8A6A2E;--rule:#C9B48A}
.lk[data-look=album]{--paper:#F5F3EE;--accent:#3A3A3A;--rule:#D6D2C8}
.lk[data-look=scrapbook]{--paper:#F1E7D3;--accent:#6B4F2A;--rule:#D9C8A6}
.lk[data-look=clean]{--paper:#FFFFFF;--accent:#4A4A4A;--rule:#DDDDDD}
.lk[data-look=heirloom].spread{border:4px double var(--rule)}
.lk[data-look=clean].spread{border-color:var(--rule)}
.lk[data-sepia="1"]{--paper:#F2E5C8;background-image:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(120,88,40,.14))}

/* the photo */
.lk-fig{margin:0}
.lk-photo{position:relative;display:block}
.lk-photo img{display:block;width:100%;height:auto;transition:filter .3s}
.lk[data-sepia="1"] .lk-photo img,.lk[data-sepia="1"] .lk-photo .old{filter:sepia(.85) saturate(.85) contrast(1.05) brightness(.96)}

.lk[data-frame=none] .lk-photo{padding:0;background:none;box-shadow:none}
.lk[data-frame=line] .lk-photo{padding:5px;border:1px solid var(--accent)}
.lk[data-frame=white] .lk-photo{padding:10px;background:#fff;box-shadow:0 1px 2px rgba(20,14,6,.22),0 10px 20px -14px rgba(20,14,6,.55)}
.lk[data-frame=corners] .lk-photo{padding:0;margin:8px}
.lk[data-frame=corners] .lk-photo::after{content:"";position:absolute;inset:-7px;pointer-events:none;
  background:linear-gradient(135deg,#2A2A2A 50%,transparent 50%) top left/26px 26px no-repeat,
             linear-gradient(225deg,#2A2A2A 50%,transparent 50%) top right/26px 26px no-repeat,
             linear-gradient(45deg,#2A2A2A 50%,transparent 50%) bottom left/26px 26px no-repeat,
             linear-gradient(315deg,#2A2A2A 50%,transparent 50%) bottom right/26px 26px no-repeat}
.lk[data-frame=oval] .lk-photo{padding:0}
.lk[data-frame=oval] .lk-photo img{clip-path:ellipse(46% 44% at 50% 50%)}
.lk[data-frame=oval] .lk-photo::after{content:"";position:absolute;left:3%;right:3%;top:5%;bottom:5%;border:2px solid var(--accent);border-radius:50%;pointer-events:none;outline:1px solid var(--rule);outline-offset:4px}
.lk[data-frame=tape] .lk-photo{padding:8px;background:#fff;transform:rotate(-1.4deg);box-shadow:0 2px 6px rgba(20,14,6,.18)}
.lk[data-frame=tape] .lk-photo::before{content:"";position:absolute;z-index:1;top:-11px;left:50%;width:96px;height:24px;transform:translateX(-50%) rotate(-3deg);background:rgba(232,221,184,.88);box-shadow:0 1px 2px rgba(20,14,6,.15)}

/* the label under a photo */
.lk-cap{margin:.7rem 0 0}
.lk[data-label=typed] .lk-cap{font:italic 400 .92rem/1.4 var(--f-d)}
.lk[data-label=ink] .lk-cap{font:italic 400 1.18rem/1.3 var(--f-d);color:#2E3E66;transform:rotate(-1.5deg);text-align:center}
.lk[data-label=slip] .lk-cap{display:table;font:400 .78rem/1.45 var(--f-m);background:#fff;padding:.3rem .65rem;border:1px solid #D8CCB0;box-shadow:0 1px 2px rgba(20,14,6,.12);transform:rotate(.8deg)}
.lk[data-label=plate] .lk-cap{display:table;margin:.8rem auto 0;text-align:center;font:600 .7rem/1.3 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border-top:1px solid currentColor;border-bottom:1px solid currentColor;padding:.4rem .4rem}

/* the lettering of the story */
.lk[data-type=serif] .lk-h{font-family:var(--f-d);font-weight:400}
.lk[data-type=serif] .lk-t,.lk[data-type=serif] .book__story p{font-family:var(--f-d)}
.lk[data-type=clean] .lk-h{font-family:var(--f-b);font-weight:600;letter-spacing:-.01em}
.lk[data-type=clean] .lk-t,.lk[data-type=clean] .book__story p{font-family:var(--f-b);font-size:.95em}
.lk[data-type=typewriter] .lk-h{font-family:var(--f-m);font-weight:500;font-size:1.2em}
.lk[data-type=typewriter] .lk-t,.lk[data-type=typewriter] .book__story p{font-family:var(--f-m);font-size:.86em;line-height:1.7}
.lk .lk-h{color:var(--ink)}
.lk[data-dropcap="1"] .lk-t::first-letter,.lk[data-dropcap="1"] .book__by + p::first-letter{float:left;font:400 3.3em/.82 var(--f-d);padding:.06em .1em 0 0;color:var(--accent)}

/* the panel */
.lk-panel{display:grid;gap:1rem;margin:0 0 1.4rem}
.lk-panel fieldset{border:0;margin:0;padding:0}
.lk-panel legend{font:600 .72rem/1.3 var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3,#6B5638);margin:0 0 .45rem;padding:0}
.lk-opts{display:flex;flex-wrap:wrap;gap:.4rem}
.lk-opts label{position:relative;cursor:pointer}
.lk-opts input{position:absolute;opacity:0;width:1px;height:1px}
.lk-opts span{display:inline-block;padding:.45rem .8rem;border:1px solid var(--rule,#CDBF9F);border-radius:999px;font:500 .9rem/1.2 var(--f-b);background:transparent}
.lk-opts input:checked + span{background:var(--ink,#2B2117);color:var(--paper,#fff);border-color:var(--ink,#2B2117)}
.lk-opts input:focus-visible + span{outline:2px solid var(--accent,#7A5A2E);outline-offset:2px}
.lk-panel .check{margin:0}
.lk-panel .check b{display:block}
.lk-note{font:400 .85rem/1.45 var(--f-b);color:var(--ink-3,#6B5638);margin:0}

@media (prefers-reduced-motion:reduce){.lk,.lk-photo img{transition:none}}
@media print{
  .lk,.lk[data-sepia="1"]{background:#fff!important;background-image:none!important}
  .lk-photo img{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .lk-panel{display:none!important}
}