/* =========================================================
   DEAR TEACHER — scoped styles
   Every rule lives under .dt-scope so this plugin never
   touches the rest of your WordPress theme's styling.
   Tokens here are copied 1:1 from the approved design preview.
   --dt-accent / --dt-gold are set in Settings; --dt-accent-deep
   is auto-derived (a darkened shade) so gradients always work
   with whatever single accent color you pick.
   ========================================================= */

.dt-scope{
  --dt-paper:#FDEEE4; --dt-paper-card:#FFFFFF; --dt-paper-deep:#FFF9F4;
  --dt-ink:#2B2420; --dt-ink-soft:#6B5D53; --dt-ink-faint:#9C8C80; --dt-line:#F3E1D5;
  --dt-red:#E0503A;
  --dt-accent-deep: color-mix(in srgb, var(--dt-accent) 100%, black 12%);
  --dt-glass:rgba(255,255,255,.55); --dt-glass-border:rgba(255,255,255,.7);
  --dt-font-display:'Fraunces',Georgia,serif;
  --dt-font-body:'Plus Jakarta Sans',-apple-system,sans-serif;
  --dt-font-hand:'Caveat',cursive;
  --dt-shadow-soft:0 10px 30px rgba(232,90,59,.10), 0 2px 8px rgba(43,36,32,.06);
  --dt-shadow-lift:0 20px 50px rgba(232,90,59,.16), 0 6px 16px rgba(43,36,32,.08);
  font-family:var(--dt-font-body);
  color:var(--dt-ink);
  line-height:1.6;
}
.dt-scope *,.dt-scope *::before,.dt-scope *::after{ box-sizing:border-box; }
.dt-scope img{ max-width:100%; }
.dt-scope h1,.dt-scope h2,.dt-scope h3{
  font-family:var(--dt-font-display); font-weight:700; margin:0 0 .5em; letter-spacing:-.01em; color:var(--dt-ink);
}
.dt-scope h1{ font-size:clamp(1.9rem,4.2vw,2.8rem); line-height:1.12; }
.dt-scope h2{ font-size:clamp(1.4rem,2.6vw,1.9rem); }
.dt-scope p{ margin:0 0 1em; }
.dt-hand{ font-family:var(--dt-font-hand); }
.dt-eyebrow{ font-size:.76rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--dt-accent); }
.dt-lede{ font-size:1.1rem; color:var(--dt-ink-soft); }
.dt-container{ max-width:1100px; margin:0 auto; padding:0 24px; }
@media (max-width:600px){ .dt-container{ padding:0 16px; } }
/* Breaks the gallery/featured/search grid out of the theme's own (often narrow)
   content column, so it centers against the real screen width instead of
   whatever width the theme's page template happens to constrain content to. */
.dt-container-wide-bleed{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}
.dt-container-wide{ width:100%; max-width:2400px; margin:0 auto; padding:0 24px; box-sizing:border-box; }
@media (max-width:600px){
  .dt-container-wide-bleed{ width:100%; left:0; right:0; margin-left:0; margin-right:0; }
  .dt-container-wide{ padding:0 16px; }
}
.dt-section{ padding:40px 0; }

/* Buttons — pill-shaped. Primary = solid accent gradient (matches the preview's
   coral→coral-deep button exactly). Secondary = glass. */
.dt-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--dt-font-body); font-weight:700; font-size:.92rem;
  padding:14px 28px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; text-decoration:none; line-height:1;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.dt-btn:hover{ transform:translateY(-2px); }
.dt-btn-primary{
  background:linear-gradient(135deg, var(--dt-accent), var(--dt-accent-deep));
  color:#fff; box-shadow:0 10px 24px rgba(232,90,59,.35);
}
.dt-btn-primary:hover{ box-shadow:0 14px 30px rgba(232,90,59,.45); }
.dt-btn-secondary{
  background:var(--dt-glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--dt-glass-border); color:var(--dt-ink); box-shadow:var(--dt-shadow-soft);
}
.dt-btn-ghost{ background:transparent; color:var(--dt-accent); border-color:var(--dt-line); }
.dt-btn-ghost:hover{ background:var(--dt-paper-deep); }
.dt-btn-sm{ padding:9px 18px; font-size:.8rem; }
.dt-btn-block{ width:100%; }
.dt-btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

/* Hero (layout classes kept for compatibility — you design this part yourself) */
.dt-hero{ padding:56px 20px; text-align:center; }
.dt-hero h1 em{ font-style:italic; color:var(--dt-accent); }
.dt-hero-sub{ max-width:540px; margin:14px auto 26px; font-size:1.08rem; color:var(--dt-ink-soft); }
.dt-hero-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.dt-hero-note{ margin-top:16px; font-size:.82rem; color:var(--dt-ink-faint); }

/* Stats — glass pills, exactly like the preview's stat-pill */
.dt-stat-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.dt-stat-cell{
  background:var(--dt-glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--dt-glass-border); border-radius:24px; padding:22px 16px; text-align:center;
  box-shadow:var(--dt-shadow-soft);
}
.dt-stat-num{
  font-family:var(--dt-font-display); font-size:1.9rem; font-weight:800;
  background:linear-gradient(135deg, var(--dt-accent-deep), var(--dt-accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.dt-stat-label{ font-size:.74rem; color:var(--dt-ink-faint); text-transform:uppercase; letter-spacing:.06em; font-weight:600; margin-top:4px; }
@media (max-width:640px){ .dt-stat-strip{ grid-template-columns:repeat(1,1fr); } }

/* Gallery cards — solid white, rounded, soft shadow (the preview's letter-card
   was solid, not glass — glass was reserved for stat pills / secondary buttons) */
.dt-gallery-grid{ display:grid; grid-template-columns:repeat(var(--dt-cols, 4), 1fr); gap:24px; align-items:stretch; }
@media (max-width:900px){ .dt-gallery-grid{ grid-template-columns:repeat(var(--dt-cols-tablet, 2), 1fr); gap:16px; } }
@media (max-width:600px){ .dt-gallery-grid{ grid-template-columns:repeat(var(--dt-cols-mobile, 1), 1fr); gap:10px; } }

.dt-letter-card{
  background:var(--dt-card-bg, var(--dt-paper-card)); border:1px solid var(--dt-card-border, var(--dt-line)); border-radius:26px;
  padding:30px 28px 28px; box-shadow:var(--dt-shadow-soft);
  position:relative; display:flex; flex-direction:column; gap:8px; min-height:270px; height:100%;
  cursor:pointer; transition:transform .2s ease, box-shadow .2s ease;
}
.dt-letter-card:hover{ transform:translateY(-6px); box-shadow:var(--dt-shadow-lift); }
@media (max-width:600px){ .dt-letter-card{ padding:20px 18px 22px; min-height:210px; gap:6px; border-radius:22px; } }
.dt-letter-card.dt-featured{
  background:linear-gradient(160deg, var(--dt-card-featured-bg, #fff) 0%, var(--dt-paper-deep) 100%);
  border-color:var(--dt-card-featured-border, var(--dt-gold));
}
.dt-featured-tag{
  display:inline-flex; align-self:flex-start; margin-bottom:2px;
  font-size:.65rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; background:linear-gradient(135deg, var(--dt-gold), var(--dt-accent)); padding:5px 12px; border-radius:999px;
  box-shadow:0 3px 8px rgba(232,90,59,.25);
}
.dt-letter-to{ font-family:var(--dt-font-display); font-size:1.2rem; font-weight:700; margin-top:4px; overflow-wrap:break-word; word-break:break-word; hyphens:none; }
@media (max-width:600px){ .dt-letter-to{ font-size:1rem; } }
.dt-letter-excerpt{ color:var(--dt-ink-soft); font-size:.95rem; flex:1; overflow-wrap:break-word; word-break:break-word; hyphens:none; margin-bottom:0; }
.dt-letter-excerpt.dt-clamped{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.dt-letter-excerpt.dt-expanded{ display:block; -webkit-line-clamp:unset; overflow:visible; }
@media (max-width:600px){
  .dt-letter-excerpt{ font-size:.87rem; }
  .dt-letter-excerpt.dt-clamped{ -webkit-line-clamp:3; }
}
.dt-readmore-btn{ align-self:flex-start; margin-top:2px; font-size:.75rem !important; padding:3px 0 !important; background:none !important; border:none !important; color:var(--dt-accent) !important; font-weight:700 !important; text-decoration:underline; }
.dt-letter-meta{ font-size:.8rem; color:var(--dt-ink-faint); border-top:1px dashed var(--dt-line); padding-top:9px; }
@media (max-width:600px){ .dt-letter-meta{ font-size:.72rem; padding-top:7px; } }
.dt-letter-from{ font-weight:700; color:var(--dt-ink); }
.dt-letter-date{ position:absolute; bottom:8px; right:16px; font-size:.65rem; color:var(--dt-ink-faint); opacity:.65; letter-spacing:.02em; }
@media (max-width:600px){ .dt-letter-date{ font-size:.6rem; bottom:6px; right:12px; } }

.dt-perpage-bar{ display:flex; flex-wrap:nowrap; align-items:center; gap:8px; justify-content:center; margin-top:20px; font-size:.85rem; color:var(--dt-ink-soft); white-space:nowrap; }
.dt-perpage-bar select{ padding:8px 14px; border:1px solid var(--dt-line); border-radius:999px; background:var(--dt-paper-card); font-family:var(--dt-font-body); flex-shrink:0; }
.dt-perpage-form{ display:inline-flex; flex-wrap:nowrap; align-items:center; gap:8px; white-space:nowrap; }
.dt-perpage-form label, .dt-perpage-form span{ white-space:nowrap; }

/* Forms — solid white, deeply rounded, soft decorative corner blob like the preview's form-shell */
.dt-form-card{
  background:var(--dt-paper-card); border:1px solid var(--dt-line); border-radius:32px; padding:44px;
  box-shadow:var(--dt-shadow-lift); position:relative; overflow:hidden;
}
.dt-field{ margin-bottom:18px; position:relative; z-index:1; }
.dt-field label{ display:block; font-weight:700; font-size:.9rem; margin-bottom:6px; }
.dt-field .dt-hint{ font-size:.78rem; color:var(--dt-ink-faint); margin-top:5px; }
.dt-req{ color:var(--dt-red); }
.dt-field input[type=text],.dt-field input[type=email],.dt-field select,.dt-field textarea{
  width:100%; font-family:var(--dt-font-body); font-size:.95rem; color:var(--dt-ink);
  background:var(--dt-paper-deep); border:1.5px solid #F0DFD3; border-radius:16px; padding:14px 18px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.dt-field select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  line-height:normal; padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%239C8C80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
}
.dt-field input[type=text]:focus,.dt-field input[type=email]:focus,.dt-field select:focus,.dt-field textarea:focus{
  outline:none; border-color:var(--dt-accent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--dt-accent) 14%, transparent);
}
.dt-field textarea{ resize:vertical; min-height:130px; }
.dt-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; position:relative; z-index:1; }
@media (max-width:600px){ .dt-field-row{ grid-template-columns:1fr; } }
.dt-char-count{ text-align:right; font-size:.78rem; color:var(--dt-ink-faint); }
.dt-consent-box{ display:flex; gap:10px; align-items:flex-start; background:var(--dt-paper-deep); padding:16px 18px; border-radius:16px; position:relative; z-index:1; }
.dt-consent-box p{ margin:0; font-size:.86rem; color:var(--dt-ink-soft); }
.dt-honeypot{ position:absolute; left:-9999px; opacity:0; height:0; }
.dt-alert{ padding:14px 20px; border-radius:16px; font-size:.9rem; margin-bottom:20px; }
.dt-alert-error{ background:#FDEAE5; color:var(--dt-red); border:1px solid #F5C6B8; }
.dt-alert-success{ background:color-mix(in srgb, var(--dt-accent) 10%, white); color:var(--dt-ink); border:1px solid var(--dt-line); }

/* Appreciation card — solid gradients only (no glass): this is captured to a
   PNG by html2canvas, which doesn't render backdrop-filter correctly. */
.dt-card-stage{ display:flex; justify-content:center; padding:16px 0; }
.dt-card{
  width:520px; max-width:100%; min-height:560px; background:var(--dt-paper-card);
  border:1px solid var(--dt-line); border-radius:26px; position:relative; padding:48px 40px 60px;
  display:flex; flex-direction:column; font-family:var(--dt-font-body); overflow:hidden;
  box-shadow:var(--dt-shadow-soft);
}
.dt-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:8px;
  background:linear-gradient(90deg, var(--dt-gold), var(--dt-accent));
}
.dt-card .dt-cc-eyebrow{ font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--dt-accent); margin-bottom:18px; font-weight:700; }
.dt-card .dt-cc-to{ font-family:var(--dt-font-display); font-size:1.7rem; font-weight:700; margin-bottom:14px; color:var(--dt-ink); overflow-wrap:break-word; word-break:break-word; hyphens:none; }
.dt-card .dt-cc-message{ font-size:1rem; line-height:1.6; flex:1; white-space:pre-wrap; color:var(--dt-ink); overflow-wrap:break-word; word-break:break-word; hyphens:none; }
.dt-card .dt-cc-from{ font-family:var(--dt-font-hand); font-size:1.4rem; color:var(--dt-accent); margin-top:16px; }
.dt-card .dt-cc-meta{ margin-top:12px; font-size:.76rem; color:var(--dt-ink-faint); border-top:1px dashed var(--dt-line); padding-top:10px; }
.dt-card .dt-cc-brand{ position:absolute; bottom:20px; right:40px; font-family:var(--dt-font-display); font-size:.8rem; color:var(--dt-ink-faint); }
.dt-card .dt-cc-mark{ position:absolute; top:38px; right:40px; width:30px; height:30px; }

/* Search / filter bar — solid white pill with shadow, exactly like the preview
   (glass was intentionally NOT used here in the approved design) */
.dt-filter-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:2px;
  max-width:820px; margin:0 auto 10px;
  background:var(--dt-paper-card); border:1px solid transparent; border-radius:999px;
  padding:8px 8px 8px 18px; box-shadow:var(--dt-shadow-soft);
}
.dt-search-icon{ display:flex; align-items:center; color:var(--dt-ink-faint); padding:0 8px 0 0; flex-shrink:0; }
.dt-filter-bar input[type=text],
.dt-filter-bar select{
  border:none; background:transparent; padding:10px 12px; font-size:.86rem; color:var(--dt-ink);
  border-radius:999px; transition:background .15s ease; font-family:var(--dt-font-body);
}
.dt-filter-bar input[type=text]{ flex:1 1 110px; min-width:80px; }
.dt-filter-bar select{ flex:0 1 118px; color:var(--dt-ink-soft); appearance:none; -webkit-appearance:none; -moz-appearance:none; line-height:normal; padding-right:32px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%239C8C80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:14px; }
.dt-filter-bar input[type=text]:hover, .dt-filter-bar select:hover{ background:var(--dt-paper-deep); }
.dt-filter-bar input[type=text]:focus, .dt-filter-bar select:focus{ background:var(--dt-paper-deep); outline:none; }
.dt-filter-bar input::placeholder{ color:var(--dt-ink-faint); }
.dt-featured-toggle{ display:flex; align-items:center; gap:5px; font-size:.78rem; color:var(--dt-ink-soft); white-space:nowrap; padding:9px 12px; border-radius:999px; cursor:pointer; }
.dt-featured-toggle:hover{ background:var(--dt-paper-deep); }
.dt-featured-toggle input{ accent-color:var(--dt-accent); margin:0; }
.dt-filter-bar .dt-btn-primary{ padding:10px 20px; font-size:.82rem; flex-shrink:0; }
.dt-live-note{ display:block; text-align:center; font-size:.72rem; color:var(--dt-ink-faint); font-style:italic; margin:0 0 22px; }
@media (max-width:600px){
  .dt-filter-bar{ border-radius:24px; padding-left:14px; }
  .dt-filter-bar input[type=text], .dt-filter-bar select{ flex:1 1 100%; }
}

.dt-gallery-results{ transition:opacity .15s ease; }
.dt-gallery-results.dt-loading{ opacity:.45; pointer-events:none; }

.dt-pagination{ display:flex; gap:8px; justify-content:center; margin-top:28px; }
.dt-pagination a,.dt-pagination span{ padding:8px 15px; border:1px solid var(--dt-line); border-radius:999px; text-decoration:none; font-size:.88rem; color:var(--dt-ink-soft); transition:all .15s ease; background:var(--dt-paper-card); }
.dt-pagination a:hover{ background:var(--dt-paper-deep); }
.dt-pagination .dt-current{ background:linear-gradient(135deg, var(--dt-accent), var(--dt-accent-deep)); color:#fff; border-color:transparent; font-weight:700; box-shadow:0 6px 16px rgba(232,90,59,.3); }

.dt-empty-state{ text-align:center; padding:48px 16px; color:var(--dt-ink-faint); }
.dt-empty-state h3{ color:var(--dt-ink-soft); font-family:var(--dt-font-display); }

/* Roadshow slideshow / kiosk display mode */
.dt-slideshow-overlay{
  position:fixed; inset:0; z-index:99999; background:var(--dt-paper);
  display:flex; align-items:center; justify-content:center; text-align:left;
  padding:7vh 6vw; cursor:pointer; opacity:0; transition:opacity 1s ease;
  box-sizing:border-box;
}
.dt-slideshow-overlay.dt-slideshow-visible{ opacity:1; }
.dt-slideshow-content{
  max-width:1100px; width:100%; max-height:100%; opacity:0; transition:opacity .9s ease;
  background:var(--dt-card-bg, var(--dt-paper-card)); border:1px solid var(--dt-card-border, var(--dt-line));
  border-radius:32px; padding:72px 84px; position:relative; overflow:auto;
  box-shadow:var(--dt-shadow-lift);
  box-sizing:border-box;
}
.dt-slideshow-content.dt-slide-visible{ opacity:1; }
.dt-slideshow-content::before{
  content:""; position:absolute; top:0; left:0; right:0; height:10px;
  background:linear-gradient(90deg, var(--dt-gold), var(--dt-accent));
}
.dt-slideshow-eyebrow{ font-family:var(--dt-font-body); font-size:1rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dt-accent); margin-bottom:28px; font-weight:700; }
.dt-slideshow-to{ font-family:var(--dt-font-display); font-weight:700; font-size:clamp(2rem,4.5vw,3.8rem); color:var(--dt-ink); line-height:1.15; margin-bottom:32px; }
.dt-slideshow-message{ font-size:clamp(1.2rem,2.2vw,1.9rem); line-height:1.55; color:var(--dt-ink); margin-bottom:40px; white-space:pre-wrap; }
.dt-slideshow-from{ font-family:var(--dt-font-hand); font-size:clamp(1.6rem,3vw,2.4rem); color:var(--dt-accent); margin-bottom:10px; }
.dt-slideshow-meta{ font-size:clamp(.95rem,1.4vw,1.15rem); color:var(--dt-ink-faint); border-top:1px dashed var(--dt-line); padding-top:18px; margin-top:8px; }

/* Grid mode — several letters shown on screen at once */
.dt-slideshow-content.dt-slideshow-grid{
  max-width:1500px; display:grid; gap:24px; padding:44px;
  grid-template-columns:repeat(var(--dt-grid-cols, 3), minmax(0,1fr));
  background:transparent; border:none; box-shadow:none;
}
.dt-slideshow-content.dt-slideshow-grid::before{ display:none; }
.dt-slideshow-grid-card{
  background:var(--dt-card-bg, var(--dt-paper-card)); border:1px solid var(--dt-card-border, var(--dt-line));
  border-radius:22px; padding:28px 30px; position:relative; overflow:hidden;
  box-shadow:var(--dt-shadow-soft); display:flex; flex-direction:column;
  transition:visibility 0s;
}
.dt-slideshow-grid-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:6px;
  background:linear-gradient(90deg, var(--dt-gold), var(--dt-accent));
}
.dt-slideshow-grid-card .dt-slideshow-eyebrow{ font-size:.7rem; margin-bottom:10px; }
.dt-slideshow-grid-card .dt-slideshow-to{ font-size:clamp(1.1rem,1.6vw,1.5rem); margin-bottom:12px; }
.dt-slideshow-grid-card .dt-slideshow-message{ font-size:clamp(.82rem,1.05vw,1rem); line-height:1.5; margin-bottom:16px; flex:1; display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; }
.dt-slideshow-grid-card .dt-slideshow-from{ font-size:clamp(1.05rem,1.4vw,1.3rem); margin-bottom:4px; }
.dt-slideshow-grid-card .dt-slideshow-meta{ font-size:.75rem; padding-top:10px; margin-top:4px; }
@media (max-width:900px){
  .dt-slideshow-content.dt-slideshow-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px){
  .dt-slideshow-content.dt-slideshow-grid{ grid-template-columns:1fr; }
}

@media (max-width:700px){
  .dt-slideshow-overlay{ padding:20px; }
  .dt-slideshow-content{ padding:44px 32px; border-radius:24px; }
  .dt-slideshow-content.dt-slideshow-grid{ padding:16px; gap:16px; }
}

/* Lightbox / focus view for gallery cards — glass dimmer behind the card (a
   natural extension of the preview's glass language, applied where it fits) */
.dt-lightbox-overlay{
  position:fixed; inset:0; background:rgba(43,36,32,.4); z-index:9999;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; padding:32px;
  opacity:0; transition:opacity .2s ease;
}
.dt-lightbox-overlay.dt-lightbox-visible{ opacity:1; }
.dt-lightbox-overlay .dt-letter-card{
  cursor:default; min-height:0; height:auto; width:100%; max-width:640px; max-height:85vh;
  overflow-y:auto; padding:44px 40px 36px; font-size:1.05rem; border-radius:28px;
  box-shadow:var(--dt-shadow-lift);
  transform:scale(.94) translateY(8px); transition:transform .2s ease, box-shadow .2s ease;
}
.dt-lightbox-overlay .dt-letter-card:hover{ transform:scale(.94) translateY(8px); }
.dt-lightbox-overlay.dt-lightbox-visible .dt-letter-card,
.dt-lightbox-overlay.dt-lightbox-visible .dt-letter-card:hover{ transform:scale(1) translateY(0); }
.dt-lightbox-overlay .dt-letter-to{ font-size:1.5rem; }
.dt-lightbox-overlay .dt-letter-excerpt{ font-size:1.02rem; -webkit-line-clamp:unset; display:block; overflow:visible; white-space:pre-wrap; }
@media (max-width:600px){
  .dt-lightbox-overlay{ padding:16px; }
  .dt-lightbox-overlay .dt-letter-card{ padding:26px 20px 22px; border-radius:22px; }
}

/* Standalone slideshow trigger — quiet and minimal, glass like the preview's secondary button */
.dt-slideshow-trigger{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 18px; border-radius:999px; border:1px solid var(--dt-glass-border);
  background:var(--dt-glass); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--dt-ink-soft); font-family:var(--dt-font-body);
  font-size:.8rem; letter-spacing:.02em; cursor:pointer; transition:all .15s ease;
}
.dt-slideshow-trigger svg{ opacity:.75; }
.dt-slideshow-trigger:hover{ background:var(--dt-paper-card); color:var(--dt-accent); border-color:var(--dt-accent); }
.dt-slideshow-trigger:hover svg{ opacity:1; }