.studio { min-width: 0; }
.studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 1.1rem;
  align-items: start;
  padding-bottom: 2rem;
  min-width: 0;
}
.booklet { position: sticky; top: .8rem; }
.booklet-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-bottom: 2px;
  position: relative;
}
.panel {
  position: relative;
  aspect-ratio: 148 / 210;
  border-radius: 2px;
  padding: 1.28rem .95rem .85rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: .62rem;
  line-height: 1.25;
  background-color: #f7f3ea;
  background-size: 114% 114%;
  background-position: center;
  color: #2a241c;
  box-shadow: 0 8px 22px rgba(40,24,8,.14);
}
.panel .frame {
  pointer-events: none;
  position: absolute;
  inset: 8px;
  z-index: 0;
  border: 1px solid rgba(196,163,90,.85);
  box-shadow: inset 0 0 0 2px rgba(248,243,233,.5), inset 0 0 0 3px rgba(196,163,90,.75);
}
.panel .frame::before,
.panel .frame::after {
  content: "";
  position: absolute;
  width: 32px;
  height: 32px;
  background: url("/static/img/gold-corner.svg") no-repeat center / contain;
}
.panel .frame::before { top: -1px; left: -1px; }
.panel .frame::after { top: -1px; right: -1px; transform: scaleX(-1); }
.panel .frame .c-bl,
.panel .frame .c-br {
  position: absolute;
  width: 32px;
  height: 32px;
  background: url("/static/img/gold-corner.svg") no-repeat center / contain;
}
.panel .frame .c-bl { bottom: -1px; left: -1px; transform: scaleY(-1); }
.panel .frame .c-br { bottom: -1px; right: -1px; transform: scale(-1); }
.panel > * { position: relative; z-index: 1; }
.panel .eyebrow {
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #5c4a32;
  margin: .1rem auto .4rem;
  padding: .12rem .45rem;
  text-align: center;
  align-self: center;
  max-width: calc(100% - 8px);
  background: rgba(248, 243, 233, .92);
  border-radius: 2px;
  z-index: 2;
}
.panel h3 {
  margin: .1rem 0 .15rem;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.1;
}
.panel .mini { font-size: .62rem; opacity: .9; white-space: pre-line; }
.ornament { display: block; color: #c4a35a; letter-spacing: .2em; margin: .35rem 0; }

.panel.front {
  justify-content: flex-start;
  text-align: center;
  background-image: url("/static/img/themes/ivory.jpg");
}
.panel.front .cover-head {
  padding: .05rem .35rem 0;
  text-shadow: 0 1px 0 rgba(255,250,241,.6);
}
.panel.front .photo-slot {
  position: absolute;
  inset: 6% 4% 4% 4%;
  z-index: 2;
  background: none;
  overflow: visible;
  pointer-events: none;
}
.panel.front .photo-box {
  position: absolute;
  left: var(--photo-x, 18%);
  top: var(--photo-y, 28%);
  width: var(--photo-scale, 42%);
  aspect-ratio: 3 / 4;
  pointer-events: auto;
  cursor: grab;
  box-shadow: 0 2px 10px rgba(40,24,8,.22);
  overflow: visible;
}
.panel.front .photo-box.edge-rect { border-radius: 2px; }
.panel.front .photo-box.edge-rect img { border-radius: 2px; }
.panel.front .photo-box.edge-oval { border-radius: 50%; }
.panel.front .photo-box.edge-oval img { border-radius: 50%; }
.panel.front .photo-box.edge-fade { box-shadow: none; }
.panel.front .photo-box.edge-fade img {
  -webkit-mask-image: radial-gradient(ellipse 78% 78% at 50% 46%, #000 46%, transparent 74%);
  mask-image: radial-gradient(ellipse 78% 78% at 50% 46%, #000 46%, transparent 74%);
}
.panel.front .photo-box:active { cursor: grabbing; }
.panel.front .photo-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  pointer-events: none;
}
.photo-edge-row { display:flex; flex-wrap:wrap; gap:.35rem 1rem; margin:.45rem 0 .7rem; }

.panel.back {
  justify-content: center;
  text-align: center;
  background-image: url("/static/img/themes/ivory.jpg");
}
.panel.back .back-copy {
  margin: 0 .4rem;
  padding: .5rem .35rem;
  background: linear-gradient(180deg, rgba(248,243,233,.18), rgba(248,243,233,.55) 40%, rgba(248,243,233,.18));
}
.panel.inside-l, .panel.inside-r {
  justify-content: flex-start;
  text-align: center;
  background-image: url("/static/img/themes/ivory.jpg");
}
.panel.inside-l::after, .panel.inside-r::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(248,243,233,.55), rgba(248,243,233,.28) 40%, rgba(248,243,233,.45));
  z-index: 0;
}
.oos { flex: 1; overflow: hidden; text-align: center; z-index: 1; }
.oos-item { margin: .18rem 0; }
.oos-item strong { display: block; font-size: .62rem; }
.oos-item em { display: block; font-size: .55rem; font-style: italic; opacity: .85; }
.oos-item pre {
  white-space: pre-wrap;
  font: italic .48rem/1.25 Georgia, serif;
  margin: .12rem 0 0;
  opacity: .88;
  max-height: 4.2rem;
  overflow: hidden;
}

.theme-churchyard .panel.front { background-image: url("/static/img/themes/churchyard-front.jpg"); background-position: 12% 42%; background-size: 118% 118%; }
.theme-churchyard .panel.back { background-image: url("/static/img/themes/churchyard-back.jpg"); background-position: 50% 46%; }
.theme-churchyard .panel.inside-l { background-image: url("/static/img/themes/churchyard-inside-l.jpg"); }
.theme-churchyard .panel.inside-r { background-image: url("/static/img/themes/churchyard-inside-r.jpg"); }
.theme-ivory .panel { background-image: url("/static/img/themes/ivory.jpg"); }
.theme-navy .panel { background-image: url("/static/img/themes/navy.jpg"); color: #f4efe4; }
.theme-navy .panel .eyebrow { color: #c6a15a; }
.theme-navy .panel.inside-l::after, .theme-navy .panel.inside-r::after,
.theme-navy .panel.back .back-copy { background: linear-gradient(180deg, rgba(28,42,58,.25), rgba(28,42,58,.55)); }
.theme-garden .panel { background-image: url("/static/img/themes/garden.jpg"); }
.theme-celtic .panel { background-image: url("/static/img/themes/celtic.jpg"); }
.theme-linen .panel { background-image: url("/static/img/themes/linen.jpg"); }
.theme-linen .panel .frame { border-color: #c8c2b6; box-shadow: none; }
.theme-lily .panel { background-image: url("/static/img/themes/lily.jpg"); }
.theme-dove .panel { background-image: url("/static/img/themes/dove.jpg"); }
.theme-candle .panel { background-image: url("/static/img/themes/candle.jpg"); color: #f4efe4; }
.theme-candle .panel .eyebrow { color: #e2c27a; }
.theme-candle .panel.inside-l::after, .theme-candle .panel.inside-r::after,
.theme-candle .panel.back .back-copy { background: linear-gradient(180deg, rgba(28,20,12,.25), rgba(28,20,12,.55)); }
.theme-harbour .panel { background-image: url("/static/img/themes/harbour.jpg"); }
.theme-woodland .panel { background-image: url("/static/img/themes/woodland.jpg"); }
.theme-rose .panel { background-image: url("/static/img/themes/rose.jpg?v=floral-20260919"); }
.theme-wreath .panel { background-image: url("/static/img/themes/wreath.jpg"); }
.theme-poppy .panel { background-image: url("/static/img/themes/poppy.jpg?v=floral-20260919"); }
.theme-forgetmenot .panel { background-image: url("/static/img/themes/forgetmenot.jpg?v=floral-20260919"); }
.theme-magnolia .panel { background-image: url("/static/img/themes/magnolia.jpg?v=floral-20260919"); }
.theme-yellowrose .panel { background-image: url("/static/img/themes/yellowrose.jpg?v=floral-20260919"); }
.theme-hydrangea .panel { background-image: url("/static/img/themes/hydrangea.jpg?v=floral-20260919"); }
.theme-redrose .panel { background-image: url("/static/img/themes/redrose.jpg?v=floral-20260919"); }
.theme-mixed .panel { background-image: url("/static/img/themes/mixed.jpg?v=floral-20260919"); }
.theme-whitebloom .panel { background-image: url("/static/img/themes/whitebloom.jpg?v=floral-20260919"); }
.theme-lily .panel, .theme-dove .panel, .theme-rose .panel, .theme-poppy .panel,
.theme-forgetmenot .panel, .theme-magnolia .panel, .theme-yellowrose .panel,
.theme-hydrangea .panel, .theme-redrose .panel, .theme-mixed .panel,
.theme-whitebloom .panel {
  background-color: #fcfcfd;
}
.theme-lily .panel .eyebrow, .theme-dove .panel .eyebrow, .theme-rose .panel .eyebrow,
.theme-poppy .panel .eyebrow, .theme-forgetmenot .panel .eyebrow, .theme-magnolia .panel .eyebrow,
.theme-yellowrose .panel .eyebrow, .theme-hydrangea .panel .eyebrow, .theme-redrose .panel .eyebrow,
.theme-mixed .panel .eyebrow, .theme-whitebloom .panel .eyebrow {
  background: rgba(255,255,255,.92);
}
.theme-linen .panel .frame::before, .theme-linen .panel .frame::after,
.theme-linen .panel .frame .c-bl, .theme-linen .panel .frame .c-br { display: none; }
.theme-harbour .panel .frame {
  border-color: rgba(80,120,145,.75);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.45), inset 0 0 0 3px rgba(80,120,145,.45);
}
.theme-harbour .panel .frame::before, .theme-harbour .panel .frame::after,
.theme-harbour .panel .frame .c-bl, .theme-harbour .panel .frame .c-br { display: none; }
.theme-garden .panel .frame {
  border-color: rgba(90,120,70,.7);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.4), inset 0 0 0 3px rgba(110,140,90,.5);
}
.theme-garden .panel .frame::before, .theme-garden .panel .frame::after,
.theme-garden .panel .frame .c-bl, .theme-garden .panel .frame .c-br { display: none; }
.theme-celtic .panel .frame {
  border-width: 2px; border-color: #6b5434;
  box-shadow: inset 0 0 0 1px #c4a35a, inset 0 0 0 5px rgba(80,60,30,.12);
}
.theme-rose .panel .frame, .theme-redrose .panel .frame, .theme-poppy .panel .frame {
  border-color: rgba(150,70,70,.55);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.5), inset 0 0 0 3px rgba(160,80,80,.4);
  border-radius: 3px;
}
.theme-rose .panel .frame::before, .theme-rose .panel .frame::after,
.theme-rose .panel .frame .c-bl, .theme-rose .panel .frame .c-br,
.theme-redrose .panel .frame::before, .theme-redrose .panel .frame::after,
.theme-redrose .panel .frame .c-bl, .theme-redrose .panel .frame .c-br,
.theme-poppy .panel .frame::before, .theme-poppy .panel .frame::after,
.theme-poppy .panel .frame .c-bl, .theme-poppy .panel .frame .c-br { display: none; }
.theme-whitebloom .panel .frame, .theme-lily .panel .frame, .theme-dove .panel .frame,
.theme-magnolia .panel .frame {
  border-color: rgba(170,170,175,.8);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.7), inset 0 0 0 3px rgba(190,190,195,.55);
}
.theme-whitebloom .panel .frame::before, .theme-whitebloom .panel .frame::after,
.theme-whitebloom .panel .frame .c-bl, .theme-whitebloom .panel .frame .c-br,
.theme-lily .panel .frame::before, .theme-lily .panel .frame::after,
.theme-lily .panel .frame .c-bl, .theme-lily .panel .frame .c-br,
.theme-dove .panel .frame::before, .theme-dove .panel .frame::after,
.theme-dove .panel .frame .c-bl, .theme-dove .panel .frame .c-br,
.theme-magnolia .panel .frame::before, .theme-magnolia .panel .frame::after,
.theme-magnolia .panel .frame .c-bl, .theme-magnolia .panel .frame .c-br { display: none; }
.theme-forgetmenot .panel .frame, .theme-hydrangea .panel .frame {
  border-color: rgba(90,120,160,.65);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), inset 0 0 0 3px rgba(110,140,180,.4);
}
.theme-forgetmenot .panel .frame::before, .theme-forgetmenot .panel .frame::after,
.theme-forgetmenot .panel .frame .c-bl, .theme-forgetmenot .panel .frame .c-br,
.theme-hydrangea .panel .frame::before, .theme-hydrangea .panel .frame::after,
.theme-hydrangea .panel .frame .c-bl, .theme-hydrangea .panel .frame .c-br { display: none; }
.theme-yellowrose .panel .frame, .theme-mixed .panel .frame {
  border-color: rgba(170,140,60,.55);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.5), inset 0 0 0 3px rgba(180,150,70,.4);
}
.theme-yellowrose .panel .frame::before, .theme-yellowrose .panel .frame::after,
.theme-yellowrose .panel .frame .c-bl, .theme-yellowrose .panel .frame .c-br,
.theme-mixed .panel .frame::before, .theme-mixed .panel .frame::after,
.theme-mixed .panel .frame .c-bl, .theme-mixed .panel .frame .c-br { display: none; }
.theme-woodland .panel .frame {
  border-color: rgba(90,80,50,.7);
  box-shadow: inset 0 0 0 2px rgba(248,243,233,.35), inset 0 0 0 4px rgba(90,80,50,.35);
}

.price-box { margin-top: .8rem; background: #fffaf1; border: 1px solid rgba(185,141,76,.4); border-radius: 12px; padding: .8rem 1rem; }
.price-box h2 { margin: 0 0 .4rem; font-size: 1rem; }
.bundles { display: grid; gap: .4rem; }
.bundles label { display: flex; justify-content: space-between; gap: .6rem; margin: 0; cursor: pointer; }
.steps { display: flex; gap: .4rem; margin: 0 0 1rem; }
.steps button { flex: 1; border: 1px solid #d9cbb8; background: #fff; border-radius: 999px; padding: .35rem .5rem; font: inherit; cursor: pointer; }
.steps button.on { background: #25384f; color: #fffaf1; border-color: #25384f; }
.step { display: none; }
.step.on { display: block; }
.hymn-results { max-height: 220px; overflow: auto; border: 1px solid #eadfcf; border-radius: 8px; background: #fff; }
.hymn-results button {
  display: grid; gap: .1rem; width: 100%; text-align: left; border: 0;
  border-bottom: 1px solid #f0e6d8; background: none; padding: .4rem .55rem; font: inherit; cursor: pointer;
}
.hymn-results small { color: #7f7163; font-size: .78rem; }
.hymn-lyrics { white-space: pre-wrap; font-size: .9rem; line-height: 1.45; background: #fffaf1; border: 1px solid #eadfcf; border-radius: 10px; padding: .8rem; max-height: 220px; overflow: auto; }
.copy-note { font-size: .85rem; color: #7f7163; }
.sub { font-size: 1.05rem; margin: 1.2rem 0 .3rem; }
.service-cards { display: grid; gap: 1rem; }
.oos-card {
  background: rgba(255,250,241,.94);
  border: 1px solid rgba(185,141,76,.4);
  border-radius: 16px;
  padding: 1rem 1.1rem 1.15rem;
}
.oos-card h3 { margin: 0 0 .5rem; font-size: 1.08rem; }
.oos-field { margin: .5rem 0; }
.oos-field label {
  display: block; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: #7f7163; margin-bottom: .2rem;
}
.oos-field input, .oos-field textarea { width: 100%; }
.eulogy-box { margin: 1.2rem 0; padding: 1rem; border: 1px solid #eadfcf; border-radius: 12px; background: #fffaf1; }
@media (max-width: 860px) {
  .studio-grid { grid-template-columns: 1fr; }
  .booklet { position: static; }
}
/* Studio refresh: keep artwork while making editing and complete wording readable. */
.studio-edit, .studio-grid > div:first-child { min-width: 0; background: rgba(247,250,252,.97); color:#2a3038; border:1px solid #cfd8e0; border-radius:16px; padding:1rem; }
.studio-grid input,.studio-grid textarea,.studio-grid select { min-width:0; width:100%; font-size:16px; color:#2f2923; }
.studio-grid input[type=radio],.studio-grid input[type=checkbox] { width:auto; min-width:18px; min-height:18px; }
.studio-grid button,.studio-grid summary { min-height:44px; }
.studio-grid button:focus-visible,.studio-grid input:focus-visible,.studio-grid textarea:focus-visible,.studio-grid select:focus-visible { outline:3px solid #91631f; outline-offset:3px; }
.studio-grid .help,.studio-grid .copy-note,.studio-grid .oos-field label { color:#645545; }
.studio-grid .theme-opt.theme-navy span { color:#eee5d8; }
.steps { position:sticky; top:0; z-index:5; background:#f7fafc; padding:.6rem 0; }
.steps button { border-radius:10px; font-size:.95rem; }
.draft-tools { padding:.6rem .8rem; margin-bottom:1rem; border:1px solid #d9cbb8; border-radius:10px; background:#f6f0e6; }
.draft-tools .help { font-size:.86rem; line-height:1.4; }
.draft-tools [role=status]:empty { display:none; }
.text-button { border:0; background:transparent; text-decoration:underline; color:#49341c; font:inherit; padding:.4rem; cursor:pointer; }
.action-row,.step-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:.8rem 0; }
.step-actions { position:sticky; bottom:0; padding:.8rem 0; margin-bottom:0; background:#f7fafc; z-index:4; border-top:1px solid #cfd8e0; }
[hidden] { display:none!important; }
.preview-heading,.price-box { color:#2a3038; background:rgba(247,250,252,.95); border-radius:12px; padding:.7rem .85rem; }
.preview-heading { margin-bottom:.45rem; display:flex; flex-wrap:wrap; gap:.4rem .8rem; align-items:center; }
.preview-heading h2 { margin:0; font-size:1.05rem; }
.preview-heading [role=status] { font-size:.85rem; line-height:1.35; width:100%; }
.preview-heading .demo-banner { margin:0; font:700 .72rem/1 system-ui,sans-serif; letter-spacing:.12em; color:#8a1f1f; }
.preview-heading .action-row { margin:0; }
.page-tag {
  position:absolute; top:6px; left:8px; z-index:6;
  font:700 .58rem/1 system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:rgba(37,56,79,.82); padding:.18rem .4rem; border-radius:4px;
  pointer-events:none;
}
.back-line { display:grid; grid-template-columns:44px 1fr 44px; gap:.35rem; align-items:start; margin:.45rem 0; }
.back-line label { margin:0; }
.flip-back, .rename-back {
  min-width:44px; min-height:44px; border:1px solid #cfd8e0; border-radius:10px; background:#fff;
  font:inherit; cursor:pointer; color:#25384f;
}
.flip-back[aria-pressed="false"] { background:#e8f2ea; color:#1d5c32; }
.back-line.is-off label { opacity:.45; }
.tab-n { display:inline-block; width:1.2rem; height:1.2rem; margin-right:.25rem; border-radius:50%; background:#d9e2ea; font-size:.75rem; line-height:1.2rem; text-align:center; }
.service-tabs [role=tab][aria-selected=true] .tab-n { background:#c6a15a; color:#1c140c; }
.tab-sub { display:block; font-size:.68rem; font-weight:400; opacity:.8; letter-spacing:0; text-transform:none; }
.tab-hint { margin:.1rem 0 .7rem; font-size:.88rem; color:#5d6a75; }
.booklet { position:static; min-width:0; scroll-margin-top:1rem; background:transparent; }
.price-box { border:1px solid #d9cbb8; }
.price-box .bundles label { display:grid; grid-template-columns:auto 1fr auto; align-items:center; padding:.55rem 0; min-height:44px; }
.price-box .bundles strong { white-space:nowrap; }
.order-total { display:flex; justify-content:space-between; padding-top:1rem; margin:.8rem 0 .6rem; border-top:1px solid #d9cbb8; font-size:1.4rem; font-weight:bold; }
.panel.front { overflow:hidden; }
.panel.front .cover-head { flex:none; overflow-wrap:anywhere; }
.panel.front .photo-slot { position:absolute; inset:6% 4% 4% 4%; margin:0; width:auto; height:auto; flex:none; z-index:2; mask-image:none; -webkit-mask-image:none; overflow:visible; }
.panel .mini { margin:.3rem 0; }
.panel.back { overflow:hidden; }
#booklet .booklet-row::before,
#booklet .booklet-row::after {
  position: absolute;
  left: -6%;
  width: 112%;
  z-index: 9;
  pointer-events: none;
  text-align: center;
  text-transform: uppercase;
  font: 700 1.05rem/1.15 "Segoe UI", Calibri, system-ui, sans-serif;
  letter-spacing: 0.18em;
  color: rgba(132, 22, 22, 0.58);
  text-shadow: 0 1px 0 rgba(255,250,241,.55);
  transform: rotate(-26deg);
}
#booklet .booklet-row::before {
  content: "SAMPLE  ·  DEMO  ·  PREVIEW";
  top: 36%;
}
#booklet .booklet-row::after {
  content: "NOT A PRINT FILE";
  top: 52%;
  font-size: .72rem;
  letter-spacing: .28em;
}
#booklet .preview-heading .demo-banner {
  margin: .55rem 0 0;
  font: 700 .8rem/1.35 system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8a1f1f;
}
@media (max-width: 600px) {
  .panel .frame::before, .panel .frame::after,
  .panel .frame .c-bl, .panel .frame .c-br { width: 22px; height: 22px; }
  #booklet .booklet-row::before { font-size: .62rem; }
  #booklet .booklet-row::after { font-size: .52rem; }
}
.oos { overflow:auto; min-height:0; scrollbar-width:thin; }
.oos-item pre { max-height:none; overflow:visible; overflow-wrap:anywhere; }
.oos-field { padding-bottom:.8rem; margin-bottom:.8rem; border-bottom:1px solid #e5daca; }
.oos-field summary { display:flex; align-items:center; cursor:pointer; color:#49341c; }
.oos-field details { margin-top:.4rem; }
.photo-controls { padding:.7rem; }
.photo-controls:disabled { opacity:.55; }
.eulogy-draft { user-select:text; -webkit-user-select:text; background:white; font:1rem/1.6 Georgia,serif; width:100%; }
.eulogy-draft-wrap::before { content:none; }
#wording-dialog { width:min(740px,calc(100% - 24px)); max-height:90dvh; overflow:auto; border:1px solid #d9cbb8; border-radius:14px; background:#fffaf1; color:#2f2923; padding:1.2rem; }
#wording-dialog::backdrop { background:rgba(15,23,34,.65); }
.proof-dialog-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; position:sticky; top:-1.2rem; background:#fffaf1; padding:.6rem 0; }
#readable-proof { font-size:17px; line-height:1.6; overflow-wrap:anywhere; }
#readable-proof h3 { border-top:1px solid #d9cbb8; margin:1.8rem 0 .6rem; padding-top:1rem; }
#readable-proof h4 { margin:1rem 0 .3rem; }
#readable-proof pre { font:inherit; white-space:pre-wrap; }
body.studio-page.theme-navy .site-head a,body.studio-page.theme-navy .site-foot,body.studio-page.theme-navy .site-foot a,body.studio-page.theme-navy main > .lede { color:#f4efe4; }
@media(max-width:600px) { .studio-grid > div:first-child { padding:.65rem; } .studio-grid .grid-2 { grid-template-columns:1fr; } .booklet-row { gap:.35rem; } .panel { padding:1.05rem .7rem .65rem; } .panel h3 { font-size:.85rem; } .panel .mini { font-size:.52rem; } .oos-item { margin:.08rem 0; } .oos-item strong { font-size:.55rem; } .oos-item em { font-size:.46rem; } .oos-item pre { font-size:.4rem; line-height:1.2; } .step-actions .btn { flex:1; padding:.55rem .7rem; } .proof-dialog-head h2 { font-size:1.2rem; } }

.step-mark { margin:0 0 .4rem; font-size:.95rem; font-weight:600; letter-spacing:.02em; }
.theme-bar { background:rgba(247,250,252,.96); border:1px solid #cfd8e0; border-radius:16px; padding:.7rem .85rem .8rem; margin:0 0 1rem; overflow-anchor:none; min-width:0; overflow:hidden; }
.theme-carousel-row { min-width:0; }
.order-end { margin-top:1.2rem; padding:1rem 1.05rem 1.15rem; border:1px solid #c5d0da; border-radius:14px; background:#fff; }
.order-end h2 { margin:0 0 .25rem; font-size:1.15rem; }
.pay-btn { width:100%; margin-top:.7rem; padding:.7rem 1rem; font-size:1.05rem; border-radius:12px; }
.theme-carousel-row { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; gap:.35rem; align-items:center; min-width:0; }
.theme-arrow { min-width:44px; min-height:44px; border:1px solid #d9cbb8; border-radius:10px; background:#fff; font-size:1.6rem; line-height:1; cursor:pointer; color:#25384f; }
.theme-scroller { display:flex; gap:.4rem; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; cursor:grab; touch-action:pan-x; -webkit-overflow-scrolling:touch; padding:.15rem .1rem; min-width:0; }
.theme-scroller::-webkit-scrollbar { display:none; height:0; }
.theme-scroller.is-dragging { cursor:grabbing; }
.theme-grid { display:flex; }
.theme-now { margin:.55rem 0 0; color:#645545; font-size:.92rem; }
.theme-just-changed { outline: 2px solid #b98d4c; outline-offset: 6px; transition: outline-color .8s ease; }
.qty-slider { display:grid; gap:.35rem; margin:.6rem 0 .35rem; }
.qty-slider input[type=range] { width:100%; }
.qty-live, .qty-sum { color:#2f2923; }
.qty-sum { margin:.1rem 0 .8rem; font-size:.95rem; }
.order-total output { font-weight:600; }
.theme-carousel { display:grid; grid-template-columns: 108px 1fr; gap:1rem; align-items:stretch; max-height: 28rem; }
.theme-rail { overflow-y:auto; scroll-snap-type:y mandatory; display:flex; flex-direction:column; gap:.45rem; padding:.2rem .15rem .2rem 0; max-height:28rem; }
.theme-thumb { position:relative; flex:0 0 128px; width:128px; scroll-snap-align:start; display:grid; gap:.2rem; margin:0; padding:.3rem; border:1px solid #d9cbb8; border-radius:12px; background:#fff; cursor:pointer; }
.theme-thumb input { position:absolute; opacity:0; pointer-events:none; }
.theme-thumb strong { font-size:.78rem; line-height:1.15; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.theme-thumb-art { display:block; height:176px; border-radius:8px; overflow:hidden; background:#efe6d6; }
.theme-thumb-art img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.theme-thumb.theme-churchyard .theme-thumb-art { background-image:url("/static/img/themes/churchyard-front.jpg"); }
.theme-thumb.theme-ivory .theme-thumb-art { background-image:url("/static/img/themes/ivory.jpg"); }
.theme-thumb.theme-navy .theme-thumb-art { background-image:url("/static/img/themes/navy.jpg"); }
.theme-thumb.theme-garden .theme-thumb-art { background-image:url("/static/img/themes/garden.jpg"); }
.theme-thumb.theme-celtic .theme-thumb-art { background-image:url("/static/img/themes/celtic.jpg"); }
.theme-thumb.theme-linen .theme-thumb-art { background-image:url("/static/img/themes/linen.jpg"); }
.theme-thumb.theme-lily .theme-thumb-art { background-image:url("/static/img/themes/lily.jpg"); }
.theme-thumb.theme-dove .theme-thumb-art { background-image:url("/static/img/themes/dove.jpg"); }
.theme-thumb.theme-candle .theme-thumb-art { background-image:url("/static/img/themes/candle.jpg"); }
.theme-thumb.theme-harbour .theme-thumb-art { background-image:url("/static/img/themes/harbour.jpg"); }
.theme-thumb.theme-woodland .theme-thumb-art { background-image:url("/static/img/themes/woodland.jpg"); }
.theme-thumb.theme-rose .theme-thumb-art { background-image:url("/static/img/themes/rose.jpg?v=floral-20260919"); }
.theme-thumb.theme-wreath .theme-thumb-art { background-image:url("/static/img/themes/wreath.jpg"); }
.theme-thumb.theme-poppy .theme-thumb-art { background-image:url("/static/img/themes/poppy.jpg?v=floral-20260919"); }
.theme-thumb.theme-forgetmenot .theme-thumb-art { background-image:url("/static/img/themes/forgetmenot.jpg?v=floral-20260919"); }
.theme-thumb.theme-magnolia .theme-thumb-art { background-image:url("/static/img/themes/magnolia.jpg?v=floral-20260919"); }
.theme-thumb.theme-yellowrose .theme-thumb-art { background-image:url("/static/img/themes/yellowrose.jpg?v=floral-20260919"); }
.theme-thumb.theme-hydrangea .theme-thumb-art { background-image:url("/static/img/themes/hydrangea.jpg?v=floral-20260919"); }
.theme-thumb.theme-redrose .theme-thumb-art { background-image:url("/static/img/themes/redrose.jpg?v=floral-20260919"); }
.theme-thumb.theme-mixed .theme-thumb-art { background-image:url("/static/img/themes/mixed.jpg?v=floral-20260919"); }
.theme-thumb.theme-whitebloom .theme-thumb-art { background-image:url("/static/img/themes/whitebloom.jpg?v=floral-20260919"); }
.theme-thumb:has(input:checked), .theme-thumb[aria-selected="true"] { box-shadow:inset 0 0 0 2px #25384f; }
.theme-stage { display:flex; flex-direction:column; min-height:0; }
.theme-stage-art { flex:1; min-height:16rem; border-radius:14px; background:#efe6d6 center top/cover no-repeat; border:1px solid #d9cbb8; }
.theme-stage-art.theme-churchyard { background-image:url("/static/img/themes/churchyard-front.jpg"); }
.theme-stage-art.theme-ivory { background-image:url("/static/img/themes/ivory.jpg"); }
.theme-stage-art.theme-navy { background-image:url("/static/img/themes/navy.jpg"); }
.theme-stage-art.theme-garden { background-image:url("/static/img/themes/garden.jpg"); }
.theme-stage-art.theme-celtic { background-image:url("/static/img/themes/celtic.jpg"); }
.theme-stage-art.theme-linen { background-image:url("/static/img/themes/linen.jpg"); }
.theme-stage-art.theme-lily { background-image:url("/static/img/themes/lily.jpg"); }
.theme-stage-art.theme-dove { background-image:url("/static/img/themes/dove.jpg"); }
.theme-stage-art.theme-candle { background-image:url("/static/img/themes/candle.jpg"); }
.theme-stage-art.theme-harbour { background-image:url("/static/img/themes/harbour.jpg"); }
.theme-stage-art.theme-woodland { background-image:url("/static/img/themes/woodland.jpg"); }
.theme-stage h2 { margin:.7rem 0 .2rem; font-size:1.2rem; }
.theme-stage-nav { display:flex; flex-wrap:wrap; gap:.5rem; }
.service-tabs { display:flex; gap:.35rem; margin:0 0 .35rem; position:sticky; top:3.2rem; z-index:4; background:#f7fafc; padding:.2rem 0; }
.service-tabs [role=tab] { flex:1; border:1px solid #cfd8e0; background:#fff; border-radius:10px; padding:.4rem .35rem .35rem; font:inherit; cursor:pointer; min-height:52px; text-align:center; }
.service-tabs [role=tab][aria-selected=true] { background:#25384f; color:#fffaf1; border-color:#25384f; }
.service-panel { display:none; }
.service-panel.on { display:block; }
.oos-row { display:grid; grid-template-columns:1fr auto auto; gap:.35rem .5rem; align-items:center; padding:.45rem 0; border-bottom:1px solid #e5daca; }
.oos-row strong { font-size:.95rem; }
.oos-row .oos-meta { color:#645545; font-size:.82rem; }
.oos-editor, .oos-row .oos-meta { grid-column:1 / -1; }
.word-mode { margin:.6rem 0 1rem; }
.spell-wrap { display:grid; grid-template-columns:1fr minmax(160px, 220px); gap:.8rem; align-items:start; }
.eulogy-visual { min-height:12rem; max-height:18rem; overflow:auto; background:#fff; border:1px solid #d9cbb8; border-radius:8px; padding:.6rem .7rem; font:1rem/1.6 Georgia,serif; white-space:pre-wrap; }
.eulogy-visual:focus { outline:3px solid #91631f; outline-offset:3px; }
.spell-mark { border-bottom:2px wavy #b3261e; background:rgba(179,38,30,.06); cursor:pointer; }
.spell-mark.active { background:rgba(179,38,30,.16); }
.spell-pane { background:#f6f0e6; border:1px solid #d9cbb8; border-radius:10px; padding:.7rem .8rem; }
.spell-pane h3 { margin:0 0 .3rem; font-size:1rem; }
.spell-pane ol { margin:.4rem 0; padding-left:1.1rem; }
.spell-pane li { margin:.35rem 0; }
.spell-suggestions { display:flex; flex-wrap:wrap; gap:.3rem; margin:.25rem 0; }
.spell-suggestions button { font:inherit; padding:.2rem .45rem; border-radius:999px; border:1px solid #d9cbb8; background:#fff; cursor:pointer; }
.helper-suggestion { margin:1rem 0; padding:.8rem; border:1px dashed #c6a866; border-radius:12px; background:#fff8ea; }
body.studio-page.theme-lily { background:#f7f1e6 url("/static/img/themes/lily.jpg") center top / cover fixed; }
body.studio-page.theme-dove { background:#f4f1ea url("/static/img/themes/dove.jpg") center top / cover fixed; }
body.studio-page.theme-candle { background:#1c140c url("/static/img/themes/candle.jpg") center top / cover fixed; }
body.studio-page.theme-harbour { background:#e8eef2 url("/static/img/themes/harbour.jpg") center top / cover fixed; }
body.studio-page.theme-woodland { background:#ece8df url("/static/img/themes/woodland.jpg") center top / cover fixed; }
body.studio-page.theme-rose { background:#f7f1e8 url("/static/img/themes/rose.jpg?v=floral-20260919") center top / cover fixed; }
body.studio-page.theme-wreath { background:#f4f1e8 url("/static/img/themes/wreath.jpg") center top / cover fixed; }
body.studio-page.theme-poppy { background:#f6eee6 url("/static/img/themes/poppy.jpg?v=floral-20260919") center top / cover fixed; }
body.studio-page.theme-forgetmenot { background:#f3f1ea url("/static/img/themes/forgetmenot.jpg?v=floral-20260919") center top / cover fixed; }
body.studio-page.theme-magnolia { background:#f7f3ea url("/static/img/themes/magnolia.jpg?v=floral-20260919") center top / cover fixed; }
body.studio-page.theme-yellowrose { background:#f7f3e4 url("/static/img/themes/yellowrose.jpg?v=floral-20260919") center top / cover fixed; }
body.studio-page.theme-hydrangea { background:#eef1f4 url("/static/img/themes/hydrangea.jpg?v=floral-20260919") center top / cover fixed; }
body.studio-page.theme-redrose { background:#f4ece8 url("/static/img/themes/redrose.jpg?v=floral-20260919") center top / cover fixed; }
body.studio-page.theme-mixed { background:#f4f0e6 url("/static/img/themes/mixed.jpg?v=floral-20260919") center top / cover fixed; }
body.studio-page.theme-whitebloom { background:#f7f4ec url("/static/img/themes/whitebloom.jpg?v=floral-20260919") center top / cover fixed; }
.photo-slot { touch-action:none; }
/* Keep the live artwork legibility treatment aligned with the frozen print sheet. */
.booklet .panel .eyebrow { background: transparent; }
.panel.front::before, .panel.back::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.panel.front::before {
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.52) 45%, rgba(255,255,255,.14) 76%, rgba(255,255,255,0));
}
.panel.front .cover-head { z-index: 4; }
.panel.back::before {
  background: radial-gradient(ellipse at center, rgba(255,255,255,.92) 0%, rgba(255,255,255,.84) 38%, rgba(255,255,255,.34) 72%, rgba(255,255,255,0));
}
.panel.back .back-copy { flex: 0 1 auto; background: transparent; }
.panel.inside-l::after, .panel.inside-r::after {
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.84) 66%, rgba(255,255,255,.50));
}
.photo-handle {
  position:absolute; right:-6px; bottom:-6px; width:18px; height:18px; z-index:4;
  border-radius:50%; background:#25384f; box-shadow:0 0 0 2px #fffaf1; cursor:nwse-resize;
}
body.studio-page.theme-candle::before { background:rgba(20,16,10,.55); }
body.studio-page.theme-candle { color:#f4efe4; }
body.studio-page.theme-candle .site-head a,body.studio-page.theme-candle .site-foot,body.studio-page.theme-candle .site-foot a,body.studio-page.theme-candle main > .lede { color:#f4efe4; }
.hold-offer { margin:2rem auto 0; max-width:42rem; text-align:left; }
.hold-offer h2 { font-size:1.1rem; font-weight:500; }
.hold-thumbs { display:grid; grid-template-columns:repeat(auto-fit,minmax(72px,1fr)); gap:.45rem; margin:1rem 0 0; }
.hold-thumbs figure { margin:0; }
.hold-thumbs span { display:block; aspect-ratio:2/3; border-radius:8px; background-center/cover no-repeat; border:1px solid rgba(185,141,76,.35); }
.hold-thumbs figcaption { font-size:.72rem; color:#7f7163; margin-top:.25rem; text-align:center; }
@media (max-width:860px) {
  .theme-carousel { grid-template-columns: 88px 1fr; max-height:none; }
  .theme-rail { max-height:none; }
  .theme-grid { display:flex; }
  .spell-wrap { grid-template-columns:1fr; }
  .theme-thumb { flex-basis:100px; width:100px; }
  .theme-thumb-art { height:138px; }
  .studio-grid { grid-template-columns:1fr; }
  .booklet { position:static; }
  .photo-handle { width:22px; height:22px; }
}

/* Scale the small cover thumbnail like its A5 print sheet. Form controls and
   the readable "All wording" view retain their normal text sizes. */
@media (max-width:600px) {
  .panel.front { padding:calc(16 * var(--cover-mm, 1px)) calc(12 * var(--cover-mm, 1px)); }
  .panel.front .cover-head { padding:calc(1 * var(--cover-mm, 1px)) calc(4 * var(--cover-mm, 1px)) 0; }
  .panel.front .cover-head .eyebrow {
    font-size:calc(2.999 * var(--cover-mm, 1px)); line-height:1.25;
    margin:0 auto calc(3 * var(--cover-mm, 1px));
    padding:calc(1 * var(--cover-mm, 1px)) calc(3 * var(--cover-mm, 1px));
  }
  .panel.front .cover-head h3 {
    font-size:calc(6.35 * var(--cover-mm, 1px)); line-height:1.15;
    margin:calc(1.693 * var(--cover-mm, 1px)) 0;
  }
  .panel.front .cover-head .mini {
    font-size:calc(3.528 * var(--cover-mm, 1px)); line-height:1.25;
    margin:calc(3.528 * var(--cover-mm, 1px)) 0;
  }
  .panel.front .cover-head .eyebrow + .mini {
    margin:calc(.847 * var(--cover-mm, 1px)) 0; font-style:italic;
  }
}