/* ──────────────────────────────────────────────────────────────────────
   The Phantom Studio — v0.3
   - Buonfiglio Classic layout (photo top-right, name top-left, cross,
     tilde dates, small-caps footer) as new default
   - Both card sizes: standard 2.75×4.25 (4-up) + wallet 4.25×2.5 (8-up)
   - Hero landing band, Memorial Master comparison
   ────────────────────────────────────────────────────────────────────── */

:root {
  --ink:        #1a1714;
  --ink-soft:   #3d342a;
  --ink-faint:  #8a8475;
  /* Refined antique-gold palette, more saturated than v0.3 */
  --gold:       #a07a3a;     /* primary antique gold — for the name */
  --gold-deep:  #7a5a28;     /* deepest, for footer + small text */
  --gold-soft:  #c9a360;     /* highlight, for ornaments + on-dark */
  --gold-faint: #d4b985;     /* very subtle for hairlines */
  --paper:      #fdfaf3;
  --paper-edge: #f5efe2;
  --bg-deep:    #14110e;
  --bg:         #1f1c19;
  --bg-soft:    #2a2622;
  --panel:      #ffffff;
  --panel-soft: #faf7f2;
  --rule:       #e6dfd2;
  --shadow:     rgba(0, 0, 0, 0.18);
  --serif:      "Cormorant Garamond", "Garamond", "Times New Roman", Georgia, serif;
  --sans:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--sans);
  background: var(--panel-soft);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ──────────────────────────────────────────────────────────────────────
   HERO BAND — landing page above the studio
   ────────────────────────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 60%, var(--bg-soft) 100%);
  color: var(--paper);
  padding: 56px 32px 64px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  /* subtle gold rule at bottom */
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
  transform: translateX(-50%);
}
.hero-inner {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  font-family: var(--serif);
}
.brand-mark {
  color: var(--gold);
  font-size: 22px;
  line-height: 1;
}
.brand-name {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--paper);
}
.hero-title {
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 500;
  line-height: 1.05;
  margin: 0 0 22px;
  color: var(--paper);
  letter-spacing: -0.5px;
}
.hero-title em {
  color: var(--gold-soft);
  font-style: italic;
}
.hero-sub {
  font-size: 17px;
  line-height: 1.55;
  color: #c4b9a4;
  max-width: 640px;
  margin: 0 auto 12px;
}
.hero-attribution {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--gold-soft);
  letter-spacing: 0.3px;
  margin: 0 auto 28px;
}
.hero-offer {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  border: 1px solid rgba(176, 141, 87, 0.4);
  border-radius: 10px;
  background: rgba(176, 141, 87, 0.06);
}
.offer-pill {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.offer-text {
  font-size: 15px;
  color: var(--paper);
}
.offer-text s { color: #6b6357; }
.offer-text strong { color: var(--gold-soft); }

@media (max-width: 720px) {
  .hero { padding: 36px 18px 40px; }
  .hero-title { font-size: 36px; }
  .hero-sub { font-size: 15px; }
  .hero-attribution { font-size: 14px; }
  .offer-text { font-size: 13px; }
}
@media (max-width: 480px) {
  .hero-title { font-size: 30px; line-height: 1.1; }
  .hero-sub { font-size: 14px; }
  .brand-name { font-size: 16px; }
}

/* ──────────────────────────────────────────────────────────────────────
   STUDIO LAYOUT — form + preview
   ────────────────────────────────────────────────────────────────────── */
.layout {
  display: grid;
  grid-template-columns: minmax(380px, 1fr) minmax(380px, 1.05fr);
  gap: 32px;
  padding: 40px 32px;
  max-width: 1240px;
  margin: 0 auto;
}
@media (max-width: 880px) {
  .layout { grid-template-columns: 1fr; padding: 24px 16px; gap: 20px; }
  .form-pane, .preview-pane { padding: 20px 16px; }
}
@media (max-width: 480px) {
  .layout { padding: 16px 10px; gap: 14px; }
  .form-pane, .preview-pane { padding: 16px 12px; border-radius: 8px; }
  .form-pane h2, .preview-pane h2 { font-size: 10px; margin-bottom: 14px; }
  label { margin-bottom: 12px; font-size: 12px; }
  input, select, textarea { font-size: 16px; }   /* 16px = no iOS zoom on focus */
  .layout-options, .layout-options.bg-options { grid-template-columns: repeat(2, 1fr); }
  .layout-options.symbol-options { grid-template-columns: repeat(3, 1fr); }
  .layout-icon { font-size: 16px; }
  .layout-name { font-size: 11px; }
  .layout-btn small, .size-btn small { font-size: 9px; }
  .primary, .secondary { padding: 16px; font-size: 15px; }
  .preview-note { font-size: 10.5px; padding: 0 8px; }
}

.form-pane, .preview-pane {
  background: var(--panel);
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

.form-pane h2, .preview-pane h2 {
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

/* Form fields */
label {
  display: block;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--ink-soft);
}
label > span {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--ink);
}
label em {
  font-style: normal;
  color: var(--ink-faint);
  font-weight: 400;
  margin-left: 6px;
  font-size: 12px;
}
label small.hint {
  display: block;
  color: var(--ink-faint);
  font-size: 11px;
  margin-top: 5px;
}

input[type="text"], input[type="date"], select, input[type="file"], textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 7px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
textarea { resize: vertical; min-height: 110px; font-family: var(--serif); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.15);
}

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Library / Custom toggle */
.prayer-source-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
  padding: 4px;
  background: var(--panel-soft);
  border-radius: 8px;
}
.toggle-btn {
  background: transparent;
  border: none;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.toggle-btn.active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
#f-prayer-custom { display: none; }
.prayer-source-custom #f-prayer { display: none; }
.prayer-source-custom #f-prayer-custom { display: block; }

/* Layout / size pickers */
.layout-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.layout-options:has(.size-btn) {
  grid-template-columns: repeat(2, 1fr);
}
.layout-options.bg-options {
  grid-template-columns: repeat(4, 1fr);
}
.layout-options.symbol-options {
  grid-template-columns: repeat(3, 1fr);
}
.bg-btn, .sym-btn, .frame-btn, .front-btn,
.layout-btn, .size-btn {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 12px 8px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  transition: all 0.15s;
}
.layout-btn:hover, .size-btn:hover, .bg-btn:hover, .sym-btn:hover, .frame-btn:hover, .front-btn:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
}
.layout-btn.active, .size-btn.active, .bg-btn.active, .sym-btn.active, .frame-btn.active, .front-btn.active {
  border-color: var(--gold);
  background: rgba(176, 141, 87, 0.08);
  box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.12);
}
.frame-btn.active::after {
  content: "✓";
  position: absolute;
  top: 4px;
  right: 6px;
  color: var(--gold-deep);
  font-size: 11px;
  font-weight: 700;
}
.frame-btn { position: relative; }

/* Background swatches inside the bg-* buttons */
.swatch {
  display: block;
  width: 28px;
  height: 18px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.1);
  margin-bottom: 4px;
}
.swatch-white  { background: #ffffff; }
.swatch-cream  { background: linear-gradient(180deg, #fdfaf3 0%, #f5efe2 100%); }
.swatch-sepia  { background: linear-gradient(180deg, #f4ecd8 0%, #ebe0c4 100%); }
.swatch-gray   { background: linear-gradient(180deg, #f7f5f3 0%, #ece8e2 100%); }
.layout-icon { font-size: 18px; color: var(--gold-deep); }
.layout-name { font-weight: 600; color: var(--ink); }
.layout-btn small, .size-btn small {
  color: var(--ink-faint);
  font-size: 10px;
  line-height: 1.3;
}

/* Help launcher (top-right floating button on hero) + slide-in panel */
.help-launcher {
  position: absolute;
  top: 18px;
  right: 22px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
  border: 1px solid var(--gold);
  border-radius: 22px;
  padding: 8px 16px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  z-index: 30;
  transition: all 0.15s;
}
.help-launcher:hover {
  background: var(--gold);
  color: white;
  transform: translateY(-1px);
}
.help-launcher span { color: var(--gold-deep); margin-right: 4px; font-weight: 700; }
.help-launcher:hover span { color: white; }

.help-panel {
  position: fixed;
  inset: 0;
  z-index: 1000;
}
.help-panel[hidden] { display: none; }
.help-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 8, 0.55);
}
.help-drawer {
  position: absolute;
  top: 0; right: 0;
  height: 100vh;
  width: min(560px, 92vw);
  background: #fdfaf3;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slidein 0.22s ease-out;
}
@keyframes slidein {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.help-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--rule);
  background: white;
}
.help-head h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ink);
}
.help-body {
  padding: 20px 26px 40px;
  overflow-y: auto;
  flex: 1;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}
.help-body h4 {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--gold-deep);
  margin: 22px 0 8px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 6px;
}
.help-body h4:first-child { margin-top: 0; }
.help-lead { font-size: 13.5px; color: var(--ink-faint); margin: 0 0 12px; }
.help-steps { padding-left: 22px; margin: 0 0 14px; }
.help-steps li { margin-bottom: 10px; }
.help-list { padding-left: 22px; margin: 0 0 14px; }
.help-list li { margin-bottom: 6px; }
.help-tip {
  background: rgba(176, 141, 87, 0.1);
  border-left: 3px solid var(--gold);
  padding: 10px 14px;
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  margin: 12px 0 0;
}
.help-body a { color: var(--gold-deep); }

/* CRITICAL: ensure [hidden] cards are truly hidden (overrides .card { display: flex }) */
.card[hidden] { display: none !important; }

/* ── Preview side toggle (Front | Back) ─────────────────────────────── */
.preview-side-toggle {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 0 auto 16px;
  background: #faf6ed;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 4px;
  width: fit-content;
}
.side-btn {
  background: transparent;
  border: none;
  padding: 8px 22px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-faint);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s;
}
.side-btn:hover { color: var(--ink); }
.side-btn.active {
  background: white;
  color: var(--gold-deep);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* ── FRONT side card layout ─────────────────────────────────────────── */
.card.front-side {
  width: 336px;
  height: 571px;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 28px 30px;
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  font-family: var(--serif);
  position: relative;
  overflow: hidden;
}
.card.front-side::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid var(--gold);
  pointer-events: none;
}
.front-headline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--gold-deep);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin: 10px 0 26px;
  font-weight: 500;
}
.front-photo {
  width: 220px;
  height: 280px;
  background: #ddd6c5;
  border: 1px solid rgba(160, 122, 58, 0.6);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  margin-bottom: 28px;
  transition: border-radius 0.2s;
}
.front-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}
.front-photo img[hidden] { display: none; }
/* Frame variants on the front card */
.card.front-side.frame-rect    .front-photo { border-radius: 2px; }
.card.front-side.frame-rounded .front-photo { border-radius: 14px; }
.card.front-side.frame-oval    .front-photo { border-radius: 50%; }
/* Photo size variants on the front card */
.card.front-side.psize-small  .front-photo { width: 180px; height: 230px; }
.card.front-side.psize-medium .front-photo { width: 220px; height: 280px; }
.card.front-side.psize-large  .front-photo { width: 260px; height: 330px; }
/* Background variants on the front card */
.card.front-side.bg-cream  { background: linear-gradient(180deg, #fdfaf3 0%, #f5efe2 100%); }
.card.front-side.bg-sepia  { background: linear-gradient(180deg, #f4ecd8 0%, #ebe0c4 100%); }
.card.front-side.bg-gray   { background: linear-gradient(180deg, #f7f5f3 0%, #ece8e2 100%); }
.front-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 36px;
  color: var(--gold);
  line-height: 1.1;
  letter-spacing: 0;
  margin-bottom: 8px;
}
.front-dates {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
  letter-spacing: 0.4px;
  margin-top: 4px;
}

/* ── BACK side variants ─────────────────────────────────────────────── */
/* When front is being printed, hide name+memoriam+photo on back; show dates inline at top */
.card.back-with-front .card-cross { /* keep symbol */ }
.card.back-with-front .card-memoriam { display: none; }
.card.back-with-front .card-name { display: none; }
.card.back-with-front .card-photo { display: none; }
.card.back-with-front .card-text-block { display: none; }
.card.back-with-front .card-top { display: block; padding-top: 20px; text-align: center; }
.card.back-with-front .card-dates {
  display: block;
  text-align: center;
  font-size: 13.5px;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
  padding-bottom: 8px;
}
.card.back-with-front .card-dates::after { left: 50%; transform: translateX(-50%); }
/* When the front carries photo+name+dates, the BACK is only the prayer —
   use the extra vertical room: bigger title, bigger body, more breathing room.
   (Previously these were SMALLER than skip-front mode, which wasted the room.) */
.card.back-with-front .card-prayer-title { font-size: 28px; margin-top: 12px; }
.card.back-with-front .card-prayer-text  { font-size: 24px; padding: 0; margin: 12px 14px; line-height: 1.45; }

/* ── Theme picker gallery ──────────────────────────────────────────── */
.theme-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.theme-btn {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 8px 6px 10px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  transition: all 0.15s;
}
.theme-btn:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
}
.theme-btn.active {
  border-color: var(--gold);
  background: rgba(176, 141, 87, 0.08);
  box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.12);
}
.theme-btn .layout-name { font-weight: 600; font-size: 11px; color: var(--ink); }
.theme-swatch {
  display: block;
  width: 100%;
  height: 36px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.theme-sw-classic  { background: linear-gradient(135deg, #fdfaf3 0%, #f5efe2 100%); position: relative; }
.theme-sw-classic::after { content: "✦"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #b08d57; font-size: 16px; }
.theme-sw-rose     { background: linear-gradient(135deg, #fdf6f6 0%, #f9eaea 100%); position: relative; }
.theme-sw-rose::after { content: "❀"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #c89097; font-size: 16px; }
.theme-sw-catholic { background: linear-gradient(135deg, #f7eeda 0%, #ead9b3 100%); position: relative; }
.theme-sw-catholic::after { content: "✟"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #a07a37; font-size: 14px; }
.theme-sw-modern   { background: #ffffff; border: 1px solid #ddd; position: relative; }
.theme-sw-modern::after { content: "—"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #1a1a1a; font-size: 18px; }
.theme-sw-nature   { background: linear-gradient(135deg, #f3f5ee 0%, #dfe5d3 100%); position: relative; }
.theme-sw-nature::after { content: "▲"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #5e7a4b; font-size: 14px; }
.theme-sw-veteran  { background: linear-gradient(135deg, #f6f7fb 0%, #e6e9f3 100%); position: relative; }
.theme-sw-veteran::after { content: "★"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #c12a2a; font-size: 14px; }

/* Photo size variants — small/medium/large footprint */
.card.psize-small  .card-photo { width: 95px;  height: 118px; }
.card.psize-medium .card-photo { width: 110px; height: 138px; }  /* default */
.card.psize-large  .card-photo { width: 135px; height: 168px; }
/* Centered layout proportionally */
.card.layout-centered.psize-small  .card-photo { width: 120px; height: 150px; }
.card.layout-centered.psize-medium .card-photo { width: 150px; height: 188px; }
.card.layout-centered.psize-large  .card-photo { width: 190px; height: 238px; }

/* Mode tabs — "30-Second Prayer Card" vs "Custom Prayer Card" */
/* Hero placement (default): big + obvious for non-tech-savvy users */
.hero-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 800px;
  margin: 36px auto 30px;
  padding: 0 20px;
  background: transparent;
  border: none;
  border-radius: 0;
}
.hero-tabs .mode-tab {
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: 18px 16px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: all 0.18s;
  letter-spacing: 0.3px;
}
.hero-tabs .mode-tab:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border-color: var(--gold);
  transform: translateY(-1px);
}
.hero-tabs .mode-tab.active {
  background: var(--gold);
  color: white;
  border-color: var(--gold);
  box-shadow: 0 6px 20px rgba(176, 141, 87, 0.5);
}
@media (max-width: 600px) {
  .hero-tabs { grid-template-columns: 1fr; gap: 8px; }
  .hero-tabs .mode-tab { font-size: 14px; padding: 14px; }
}

/* Quick mode: hide the customize-block fields entirely */
form[data-mode="quick"] .customize-block { display: none; }
form[data-mode="custom"] .customize-block { display: block; }

/* Calibration block — tunable print offset */
.calib-block {
  margin: 16px 0 8px;
  padding: 10px 12px;
  background: #faf6ed;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-size: 12px;
}
.calib-block summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
}
.calib-note {
  color: var(--ink-faint);
  font-size: 11.5px;
  margin: 8px 0 10px;
}
.calib-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.calib-inputs label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; }
.calib-inputs input {
  padding: 6px 8px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  font-family: inherit;
  font-size: 13px;
}

/* Action buttons */
.output-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 8px;
}
.primary, .secondary {
  width: 100%;
  border: none;
  padding: 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}
.primary {
  background: var(--ink);
  color: var(--paper);
}
.primary:hover { background: #000; transform: translateY(-1px); }
.secondary {
  background: var(--panel-soft);
  color: var(--ink);
  border: 1px solid var(--rule);
}
.secondary:hover { border-color: var(--gold); }
.paywall-note {
  text-align: center;
  font-size: 12px;
  color: var(--ink-faint);
  margin: 6px 0 0;
}

.print-instructions-banner {
  margin: 12px 0 6px;
  padding: 10px 12px;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink);
}
.print-instructions-banner strong { color: var(--gold); }
.print-instructions-banner em { font-style: italic; color: var(--ink); }

/* ──────────────────────────────────────────────────────────────────────
   THE CARD — Buonfiglio Classic as default
   Standard: 2.75" × 4.25" (4-up on Letter)
   Wallet:   4.25" × 2.5"  (8-up on Letter)
   ────────────────────────────────────────────────────────────────────── */

.preview-frame {
  background: linear-gradient(135deg, #2a2622 0%, #15120f 100%);
  border-radius: 10px;
  padding: 32px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 600px;
  position: relative;
  /* On narrow viewports, the .card scales down proportionally — the
     transform keeps the printed dims exact while displaying smaller. */
  overflow: hidden;
}

/* Scale the card so it fits the viewport. We keep the card at its print-
   proportional pixel size (good for measurements) and use CSS transform
   for the visual fit. The container gets the resulting display size via
   --card-scale. */
.card { transform-origin: center center; }
@media (max-width: 600px) {
  .preview-frame { min-height: 500px; padding: 20px 12px; }
  .card.size-standard { transform: scale(0.78); margin: -65px 0; }
  .card.size-wallet   { transform: scale(0.78); margin: -65px 0; }
}
@media (max-width: 420px) {
  .preview-frame { min-height: 440px; padding: 16px 8px; }
  .card.size-standard { transform: scale(0.66); margin: -100px 0; }
  .card.size-wallet   { transform: scale(0.66); margin: -100px 0; }
}

.card {
  /* Default background is PURE WHITE — matches what Buonfiglio's cards
     actually look like. Background variants below switch via class. */
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4),
              0 2px 6px rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  display: flex;
  font-family: var(--serif);
  position: relative;
  overflow: hidden;
}

/* Background variants */
.card.bg-white  { background: #ffffff; }
.card.bg-cream  { background: linear-gradient(180deg, #fdfaf3 0%, #f5efe2 100%); }
.card.bg-sepia  { background: linear-gradient(180deg, #f4ecd8 0%, #ebe0c4 100%); }
.card.bg-gray   { background: linear-gradient(180deg, #f7f5f3 0%, #ece8e2 100%); }

/* ── Theme system ────────────────────────────────────────────────────────
   Each theme is a CSS class on .card that overrides the accent color
   (--gold), background, and optionally font/decorative motifs. Themes
   work alongside the existing layout/size/symbol/frame variants — they
   layer on top of the Buonfiglio Classic structure without breaking it.
   ──────────────────────────────────────────────────────────────────── */

/* Classic Gold — current default. No override; uses --gold from :root */
.card.theme-classic { /* default */ }

/* Floral Rose — soft pink+gold, subtle rose corner ornaments */
.card.theme-rose {
  background: linear-gradient(180deg, #fdf6f6 0%, #f9eaea 100%);
  --gold: #c89097;
  --gold-deep: #a36870;
  --gold-soft: #e2bcc1;
}
.card.theme-rose::after {
  content: "";
  position: absolute;
  top: 12px; left: 12px;
  width: 38px; height: 38px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><g fill='none' stroke='%23c89097' stroke-width='1' opacity='0.65'><circle cx='20' cy='20' r='3' fill='%23c89097'/><path d='M20 17 Q24 14 28 17 Q26 21 20 20 Q14 21 12 17 Q16 14 20 17 Z' fill='%23e2bcc1' opacity='0.5'/></g></svg>");
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0.8;
  z-index: 0;
}

/* Catholic Traditional — sepia tones, cross filigree top center */
.card.theme-catholic {
  background: linear-gradient(180deg, #f7eeda 0%, #ead9b3 100%);
  --gold: #a07a37;
  --gold-deep: #7a5a25;
  --gold-soft: #d6bb86;
}
.card.theme-catholic::after {
  content: "";
  position: absolute;
  top: 26px; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14'><g fill='%23a07a37' opacity='0.5'><path d='M5 7 Q15 4 30 7 Q45 4 55 7 Q45 10 30 7 Q15 10 5 7 Z'/><circle cx='30' cy='7' r='2.5'/></g></svg>");
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

/* Modern Minimalist — pure white, sans-serif accents, no decoration */
.card.theme-modern {
  background: #ffffff;
  --gold: #1a1a1a;
  --gold-deep: #1a1a1a;
  --gold-soft: #aaa;
  font-family: "Inter", system-ui, sans-serif;
}
.card.theme-modern .card-name,
.card.theme-modern .card-prayer-title,
.card.theme-modern .card-memoriam {
  font-family: "Inter", system-ui, sans-serif;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.5px;
}
.card.theme-modern::before { border-color: #1a1a1a; opacity: 0.15; }

/* Nature — soft sage green, mountain silhouette top */
.card.theme-nature {
  background: linear-gradient(180deg, #f3f5ee 0%, #dfe5d3 100%);
  --gold: #5e7a4b;
  --gold-deep: #3f5331;
  --gold-soft: #a3b78f;
}
.card.theme-nature::after {
  content: "";
  position: absolute;
  top: 22px; left: 0; right: 0;
  height: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 28' preserveAspectRatio='none'><path fill='%235e7a4b' opacity='0.18' d='M0 28 L20 16 L40 22 L60 8 L85 18 L110 4 L135 14 L160 10 L180 20 L200 12 L200 28 Z'/></svg>");
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
  z-index: 0;
}

/* Patriotic / Veteran — flag-coded red/white/blue, star top */
.card.theme-veteran {
  background: linear-gradient(180deg, #f6f7fb 0%, #e6e9f3 100%);
  --gold: #1f3a73;
  --gold-deep: #11244c;
  --gold-soft: #7a8db5;
}
.card.theme-veteran::after {
  content: "★";
  position: absolute;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  font-size: 22px;
  color: #c12a2a;
  pointer-events: none;
  z-index: 0;
  font-style: normal;
}
.card.theme-veteran .card-cross { color: #c12a2a; }

/* Standard 2.75 × 4.25 (preview at 1.4×) */
.card.size-standard {
  width: 370px;
  height: 571px;
  flex-direction: column;
  padding: 22px 14px 16px;
}

/* Wallet 2.5 × 4.25 portrait — same Buonfiglio Classic layout as standard.
   Print rotates 90° to fit landscape slots. */
.card.size-wallet {
  width: 336px;
  height: 571px;
  flex-direction: column;
  padding: 22px 14px 16px;
}

/* Inner gold border — single rule, matches the real Buonfiglio reference */
.card::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid var(--gold);
  pointer-events: none;
  border-radius: 1px;
  z-index: 0;
}

/* ── BUONFIGLIO CLASSIC (default layout) ────────────────────────────────
   Tiny gold cross at top
   "In Memory" italic small
   Name large gold italic on LEFT
   Photo on RIGHT (top alongside name)
   Dates with tilde, centered, italic
   Optional quote, italic gold
   Prayer title italic gold caps
   Prayer body centered serif soft gray
   Footer: small caps funeral home name + optional logo
   ────────────────────────────────────────────────────────────────────── */

/* Top symbol (cross / star / dove / etc.) — independent of layout.
   Symbol controlled by .sym-* class on .card. .sym-none hides it. */
.card-cross {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--gold);
  font-size: 18px;
  line-height: 1;
  z-index: 1;
  display: none;
}
.card.sym-cross    .card-cross { display: block; font-size: 18px; }
.card.sym-star     .card-cross { display: block; font-size: 18px; }
.card.sym-dove     .card-cross { display: block; font-size: 20px; }
/* sym-none → no display (default off) */

.card-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 6px;
  margin-bottom: 6px;
}

.card-text-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  padding-top: 6px;
}

.card-memoriam {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--gold-deep);
  margin-bottom: 7px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  font-weight: 500;
}

.card-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 30px;
  color: var(--gold);
  line-height: 1.0;
  letter-spacing: 0;
  margin-bottom: 12px;
}

/* Refined date treatment — em-dash separator, hairline gold underline as accent */
.card-dates {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.3px;
  text-align: left;
  position: relative;
  padding-bottom: 7px;
}
.card-dates::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold) 0%, transparent 100%);
}

/* Photo — uses <img> with object-fit: cover so it always fills the box
   without distortion, regardless of upload aspect ratio. Photo data URL
   is set on the <img>'s src by app.js. */
.card-photo {
  width: 130px;
  height: 160px;
  flex-shrink: 0;
  background: #ddd6c5;
  border-radius: 1px;
  position: relative;
  transition: border-radius 0.2s;
  overflow: hidden;
}
/* Skip-front mode: full classic layout with photo, name, dates, prayer.
   Build-front mode (.back-with-front): photo + name hidden because the
   front already shows them — the back is prayer-focused only. */
.card-photo img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 0;
  /* Inherit parent's border-radius so oval/rounded frames clip the
     image edges. Some browsers don't clip absolutely-positioned
     children to a parent's border-radius unless this is explicit. */
  border-radius: inherit;
}
.card-photo img[hidden] { display: none; }
.card-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(160, 122, 58, 0.6);
  border-radius: inherit;
  pointer-events: none;
}
/* Empty state placeholder (shown when no photo uploaded) — beautiful
   vector cameo frame, crystal-clear at any size. Hides automatically
   when a real photo is uploaded (via :has). */
.card-photo:not(:has(img:not([hidden]))),
.front-photo:not(:has(img:not([hidden]))) {
  background-image: url("assets/photo-placeholder.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Hide the inner pseudo "Photo" text when SVG placeholder is showing */
.card-photo:not(:has(img:not([hidden])))::before,
.front-photo:not(:has(img:not([hidden])))::before {
  content: "";
}

/* Frame variants */
.card.frame-rect    .card-photo { border-radius: 1px; }
.card.frame-rounded .card-photo { border-radius: 8px; }
.card.frame-oval    .card-photo { border-radius: 50%; }
.card.frame-oval    .card-photo::after { border-radius: 50%; }
/* (placeholder logic moved above using :has(img:not([hidden]))) */

/* Personal quote (italic gold, optional) — wrapped with elegant flanking ornaments */
.card-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--gold-deep);
  text-align: center;
  margin: 6px 10px 12px;
  line-height: 1.45;
  position: relative;
}
.card-quote:empty { display: none; }
.card-quote:not(:empty)::before { content: "❦ "; color: var(--gold-soft); margin-right: 2px; font-style: normal; }
.card-quote:not(:empty)::after  { content: " ❦"; color: var(--gold-soft); margin-left: 2px;  font-style: normal; }

/* Prayer title — italic gold, small, with subtle ornament */
.card-prayer-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  text-align: center;
  color: var(--gold-deep);
  margin: 6px 0 4px;
  letter-spacing: 0.2px;
  position: relative;
}
.card-prayer-title:empty { display: none; }
.card-prayer-title:not(:empty)::after {
  content: "✦";
  display: block;
  margin-top: 4px;
  color: var(--gold-soft);
  font-size: 7px;
  font-style: normal;
  letter-spacing: normal;
  opacity: 0.85;
}

.card-prayer-text {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.4;
  text-align: center;
  white-space: pre-line;
  flex: 1;
  overflow: hidden;
  color: var(--ink-soft);
  /* Positive horizontal margin so long-line psalms (23rd, Our Father, etc.)
     stay inside the inner gold border. Was 0 -10px which pulled text OUTSIDE
     the card padding — caused the 23rd Psalm to overflow the frame. */
  margin: 6px 14px;
  padding: 0;
  letter-spacing: 0.05px;
}

/* Footer — refined: gold ornamental flourish above, then logo + small caps */
.card-footer {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 14px;
  position: relative;
}
.card-footer::before {
  /* Three dots ornament — classic prayer-card detail */
  content: "·    ✦    ·";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  color: var(--gold-soft);
  font-size: 8px;
  letter-spacing: 1px;
  line-height: 1;
}

.card-fh-logo {
  max-height: 42px;
  max-width: 70px;
  object-fit: contain;
  opacity: 1;
}
.card-funeral-home {
  font-family: var(--sans);
  font-size: 13px;
  text-align: center;
  color: var(--gold-deep);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-weight: 600;
  line-height: 1.2;
}
/* When logo is present, stack logo above funeral home name vertically */
.card-footer {
  flex-direction: column;
  gap: 4px;
}

/* ── CENTERED layout — photo top center, name below, traditional ─────── */
.card.layout-centered .card-cross { display: block; }
.card.layout-centered .card-top {
  flex-direction: column;
  align-items: center;
  margin-top: 18px;
  gap: 12px;
}
.card.layout-centered .card-photo {
  width: 200px;
  height: 200px;
  margin: 0 auto;
}
.card.layout-centered .card-text-block { text-align: center; }
.card.layout-centered .card-name { text-align: center; font-size: 22px; }
.card.layout-centered .card-dates { text-align: center; }

/* ── PHOTO emphasis — large photo, minimal text ──────────────────────── */
.card.layout-emphasis .card-cross { display: none; }
.card.layout-emphasis .card-top {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.card.layout-emphasis .card-photo {
  width: 100%;
  height: 280px;
}
.card.layout-emphasis .card-text-block { text-align: center; }
.card.layout-emphasis .card-name { font-size: 20px; text-align: center; }
.card.layout-emphasis .card-dates { text-align: center; }
.card.layout-emphasis .card-prayer-title { display: none; }
.card.layout-emphasis .card-prayer-text {
  font-size: 10.5px;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Wallet preview is portrait identical to standard — print rotates to landscape. */

.preview-note {
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-faint);
  margin: 14px 0 0;
  letter-spacing: 0.3px;
}

/* ──────────────────────────────────────────────────────────────────────
   COMPARISON TABLE
   ────────────────────────────────────────────────────────────────────── */
.comparison {
  background: #fff;
  padding: 56px 32px;
  border-top: 1px solid var(--rule);
}
.comparison h2 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  text-align: center;
  margin: 0 0 32px;
  color: var(--ink);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Mobile-only bullet list version of the comparison */
.compare-bullets {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 480px;
}
.compare-bullets li {
  background: var(--panel-soft);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.compare-bullets li strong {
  font-size: 15px;
  color: var(--ink);
  font-weight: 600;
}
.compare-bullets li small {
  font-size: 12.5px;
  color: var(--ink-faint);
  line-height: 1.4;
}
.compare-table {
  max-width: 1000px;
  margin: 0 auto;
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}
.compare-table th, .compare-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--rule);
}
.compare-table th {
  font-weight: 600;
  font-size: 13px;
  background: var(--panel-soft);
  color: var(--ink-soft);
  vertical-align: top;
}
.compare-table th small {
  display: block;
  font-weight: 400;
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 2px;
}
.compare-table th.winner, .compare-table td.winner {
  background: rgba(176, 141, 87, 0.06);
}
.compare-table th.winner {
  color: var(--gold-deep);
}
.compare-table td.winner {
  font-weight: 600;
  color: var(--ink);
}
.compare-table tbody tr:hover td { background: var(--panel-soft); }

@media (max-width: 720px) {
  .compare-table { font-size: 12px; }
  .compare-table th, .compare-table td { padding: 10px 8px; }
  .compare-table th small { font-size: 10px; }
}

/* On phones, swap the 4-column table for the bullet list. Cleaner. */
@media (max-width: 720px) {
  .compare-bullets { display: block; }
  .compare-table   { display: none; }
}
@media (max-width: 560px) {
  .comparison { padding: 36px 16px; }
  .comparison h2 { font-size: 22px; line-height: 1.25; }
}

/* ──────────────────────────────────────────────────────────────────────
   FOOTER
   ────────────────────────────────────────────────────────────────────── */
.footer {
  background: var(--bg-deep);
  color: #a39988;
  text-align: center;
  padding: 36px 24px;
  font-size: 13px;
  line-height: 1.6;
}
.footer strong { color: var(--paper); font-family: var(--serif); font-weight: 500; }

/* ──────────────────────────────────────────────────────────────────────
   PHOTO CROP MODAL
   ────────────────────────────────────────────────────────────────────── */
.recrop-btn {
  margin-top: 6px;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.recrop-btn:hover {
  border-color: var(--gold);
  color: var(--ink);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 12, 10, 0.78);
  backdrop-filter: blur(4px);
}
.modal-panel {
  position: relative;
  background: var(--panel);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--rule);
}
.modal-head h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
}
.modal-close {
  background: transparent;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 0 4px;
}
.modal-close:hover { color: var(--ink); }
.modal-body {
  padding: 16px 22px;
  overflow-y: auto;
}
.modal-help {
  font-size: 13px;
  color: var(--ink-faint);
  margin: 0 0 14px;
  line-height: 1.45;
}
.cropper-stage {
  background: #1a1714;
  border-radius: 8px;
  overflow: hidden;
  max-height: 60vh;
}
.cropper-stage img {
  display: block;
  max-width: 100%;
}
.modal-foot {
  display: flex;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--rule);
  background: var(--panel-soft);
}
.modal-foot button { flex: 1; }

@media (max-width: 600px) {
  .modal { padding: 0; }
  .modal-panel { border-radius: 0; max-height: 100vh; height: 100vh; max-width: 100vw; }
}