/*
Theme Name: Premiere Night
Theme URI: https://www.kollywoodzone.com/boxoffice/
Description: "Premiere Night" — the standalone theme for KollywoodZone.com/Boxoffice, a Kollywood cinema news and actress photo gallery site.
Author: Praveen
Version: 1.0.0
Text Domain: kz-premiere-night
*/

/* =====================================================================
   This stylesheet consolidates the design system from the four approved
   static prototypes (homepage, category, actress gallery single,
   attachment) into one file, organised by component. Search the
   "============ SECTION ============" comments to jump around.
   ===================================================================== */

:root{
  --ink:#15110D;
  --ink-soft:#1B150F;
  --panel:#211A15;
  --panel-2:#2B221A;
  --gold:#D9A857;
  --gold-dim:#B98A3E;
  --crimson:#A2293B;
  --crimson-bright:#C23B52;
  --ivory:#F4EDE2;
  --smoke:#9C9187;
  --hairline:rgba(244,237,226,0.12);
  --hairline-strong:rgba(244,237,226,0.22);

  --font-display:'Fraunces', serif;
  --font-body:'Manrope', sans-serif;
  /* Small-caps / uppercase label treatment (breadcrumbs, category tags,
     timestamps, form labels, buttons) used to run on IBM Plex Mono as a
     third typeface. Down to two fonts now — these reuse Manrope, just
     kept under their own variable name (rather than switching every
     reference to --font-body directly) since the letter-spacing/uppercase
     treatment is a distinct enough role that it's still worth being able
     to retune independently of regular body copy later. */
  --font-label:'Manrope', sans-serif;

  --container:1240px;
}

/* ============ BASE / RESET ============ */
.kz-theme,
.kz-theme *{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body.kz-theme{
  background:var(--ink);
  color:var(--ivory);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.kz-theme img{ display:block; max-width:100%; height:auto; }
.kz-theme a{ color:inherit; text-decoration:none; }
.kz-theme ul{ list-style:none; margin:0; padding:0; }
.kz-theme h1, .kz-theme h2, .kz-theme h3{ scroll-margin-top:110px; margin:0; }
.kz-theme p{ margin:0 0 1em; }

.kz-theme a:focus-visible,
.kz-theme button:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

.kz-theme .wrap{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 20px;
}

.kz-theme .kz-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.kz-theme .section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:28px;
  flex-wrap:wrap;
}
.kz-theme .section-head h2{
  font-family:var(--font-display) !important;
  font-weight:600 !important;
  font-style:normal !important;
  font-size:clamp(24px,3.4vw,32px) !important;
  letter-spacing:-0.01em !important;
  color:var(--ivory) !important;
}
.kz-theme .view-all{
  font-family:var(--font-label);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--smoke);
  border-bottom:1px solid var(--hairline-strong);
  padding-bottom:3px;
  white-space:nowrap;
  transition:color .2s, border-color .2s;
}
.kz-theme .view-all:hover{ color:var(--gold); border-color:var(--gold); }

.kz-theme main section{ padding:0 0 64px; }
.kz-theme main section.alt{ background:var(--ink-soft); }
.kz-theme main > section:first-of-type{ padding-top:0; }

/* front page sections use slightly larger vertical rhythm */
.kz-front section{ padding:64px 0; }
.kz-front section.alt{ background:var(--ink-soft); }
.kz-front section:first-of-type{ padding-top:48px; }

/* ============ HEADER / DROPDOWN NAV ============ */
.kz-theme .site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(21,17,13,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
}
.kz-theme .nav-row{
  display:flex; align-items:center; justify-content:space-between;
  height:76px; gap:24px;
}
.kz-theme .brand{ display:flex; align-items:center; }
.kz-theme .brand img{ height:34px; width:auto; }

.kz-theme .primary-nav{
  display:none; align-self:stretch; align-items:center; gap:30px;
  font-size:14px; font-weight:600;
}
@media (min-width:880px){ .kz-theme .primary-nav{ display:flex; } }
.kz-theme .nav-item{ position:relative; height:100%; display:flex; align-items:center; }
.kz-theme .nav-link{
  display:flex; align-items:center; gap:6px; height:100%;
  color:rgba(244,237,226,.85); transition:color .2s;
}
.kz-theme .nav-link:hover{ color:var(--gold); }
.kz-theme .caret{ width:9px; height:9px; opacity:.6; transition:transform .2s, opacity .2s; }
.kz-theme .has-dropdown:hover .caret{ transform:rotate(180deg); opacity:1; }

.kz-theme .dropdown{
  position:absolute; top:100%; left:0; min-width:220px;
  background:var(--panel); border:1px solid var(--hairline-strong);
  border-radius:0 0 8px 8px; padding:8px;
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  box-shadow:0 20px 40px -18px rgba(0,0,0,.65);
  z-index:60;
}
.kz-theme .has-dropdown:hover .dropdown,
.kz-theme .has-dropdown:focus-within .dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.kz-theme .dropdown a{
  display:block; padding:9px 14px; font-size:13px; font-weight:600;
  border-radius:4px; color:rgba(244,237,226,.85);
  transition:background .15s, color .15s; white-space:nowrap;
}
.kz-theme .dropdown a:hover{ background:rgba(217,168,87,.12); color:var(--gold); }

/* ============ MOBILE MENU (hamburger + stacked drawer, below 880px) ============ */
.kz-theme .mobile-menu-btn{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border:1px solid var(--hairline-strong);
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  transition:border-color .2s;
}
.kz-theme .mobile-menu-btn:hover{ border-color:var(--gold); }
@media (min-width:880px){ .kz-theme .mobile-menu-btn{ display:none; } }

.kz-theme .mobile-nav{
  display:none;
  background:var(--panel);
  border-top:1px solid var(--hairline);
  padding:18px 20px 26px;
}
.kz-theme .mobile-nav.is-open{ display:block; }
@media (min-width:880px){ .kz-theme .mobile-nav{ display:none !important; } }
.kz-theme .mobile-nav-group{ margin-bottom:20px; }
.kz-theme .mobile-nav-label{
  display:block;
  font-family:var(--font-label); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--smoke); margin-bottom:6px;
}
.kz-theme .mobile-nav a{
  display:block; padding:11px 0;
  font-size:15px; font-weight:600;
  color:rgba(244,237,226,.9);
  border-bottom:1px solid var(--hairline);
  transition:color .2s;
}
.kz-theme .mobile-nav-group a:last-child{ border-bottom:none; }
.kz-theme .mobile-nav a:hover{ color:var(--gold); }
.kz-theme .mobile-nav-top{ font-weight:700; border-bottom:none !important; padding-top:4px; }

.kz-theme .nav-actions{ display:flex; align-items:center; gap:14px; }
.kz-theme .search-btn{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--hairline-strong);
  display:flex; align-items:center; justify-content:center;
  color:var(--ivory); transition:border-color .2s, color .2s;
  background:transparent; cursor:pointer;
}
.kz-theme .search-btn:hover{ border-color:var(--gold); color:var(--gold); }
.kz-theme .search-btn svg{ width:16px; height:16px; }
.kz-theme .search-wrap{ position:relative; }
.kz-theme .search-panel{
  position:absolute; top:100%; right:0; margin-top:14px; width:300px;
  background:var(--panel); border:1px solid var(--hairline-strong);
  border-radius:8px; padding:14px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s, transform .18s, visibility .18s;
  box-shadow:0 20px 40px -18px rgba(0,0,0,.65); z-index:60;
}
.kz-theme .search-panel.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
.kz-theme .search-form{ display:flex; gap:8px; }
.kz-theme .search-form input{
  flex:1; background:var(--ink-soft); border:1px solid var(--hairline);
  border-radius:6px; padding:10px 12px; color:var(--ivory);
  font-family:var(--font-body); font-size:14px;
}
.kz-theme .search-form input::placeholder{ color:var(--smoke); }
.kz-theme .search-form input:focus{ outline:none; border-color:var(--gold); }
.kz-theme .search-form button{
  background:var(--gold); border:none; border-radius:6px; width:40px;
  display:flex; align-items:center; justify-content:center; color:var(--ink);
  cursor:pointer; transition:background .2s;
}
.kz-theme .search-form button:hover{ background:var(--crimson-bright); color:var(--ivory); }
.kz-theme .search-form button svg{ width:16px; height:16px; }

/* ============ BREADCRUMB + PAGE HEADER ============ */
.kz-theme .breadcrumb{
  font-family:var(--font-label); font-size:12px; color:var(--smoke);
  padding:22px 0 0; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap;
}
.kz-theme .breadcrumb a{ color:var(--smoke); transition:color .2s; flex-shrink:0; }
.kz-theme .breadcrumb a:hover{ color:var(--gold); }
.kz-theme .breadcrumb .sep{ opacity:.5; flex-shrink:0; }
.kz-theme .breadcrumb .current{
  color:var(--ivory); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.kz-theme .page-header{ padding:18px 0 40px; }
.kz-theme .page-header h1{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(34px,5.4vw,54px); letter-spacing:-0.01em;
}

/* single actress gallery photo title (attachment page) */
.kz-theme .photo-title{
  padding:16px 0 36px;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(22px,3.2vw,30px); letter-spacing:-0.01em;
}

/* ============ BIO (single post content before the gallery shortcode) ============ */
.kz-theme .bio{ padding:8px 0 48px; }
.kz-theme .bio p,
.kz-theme .bio p *{
  font-family:var(--font-body) !important;
  font-style:normal !important;
}
.kz-theme .bio p{ color:rgba(244,237,226,.85); font-size:16px; line-height:1.75; margin-bottom:18px; }
.kz-theme .bio a{ color:var(--gold) !important; border-bottom:1px solid rgba(217,168,87,.4) !important; transition:border-color .2s; }
.kz-theme .bio a:hover{ border-bottom-color:var(--gold) !important; }

/* The post's own "X Photo Gallery" line is a real <h2> the editors write
   directly into the content, right before the [foogallery] shortcode —
   single.php doesn't inject a second one of its own. Styled to match the
   same look used for .section-head h2 elsewhere (category pages, the
   homepage), since it's serving the same role here. */
.kz-theme .bio h2{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(24px,3.4vw,32px);
  letter-spacing:-0.01em;
  color:var(--ivory);
  margin-top:8px;
}

/* ============ LANGUAGE JUMP NAV (Indian Actress Gallery landing page) ============ */
.kz-theme .lang-jumpnav{
  display:flex; flex-wrap:wrap; gap:10px;
  margin:8px 0 40px;
}
.kz-theme .lang-jumpnav a{
  font-family:var(--font-label); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(244,237,226,.85);
  border:1px solid var(--hairline-strong);
  border-radius:999px;
  padding:8px 18px;
  transition:border-color .2s, color .2s, background .2s;
}
.kz-theme .lang-jumpnav a:hover{ border-color:var(--gold); color:var(--gold); }

/* ============ "MORE" CTA (per-language section on the landing page) ============ */
.kz-theme .lang-more{ text-align:center; margin:28px 0 0; }
.kz-theme .lang-more a{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-label); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink);
  background:var(--gold);
  border-radius:999px;
  padding:12px 28px;
  transition:background .2s, color .2s;
}
.kz-theme .lang-more a:hover{ background:var(--crimson-bright); color:var(--ivory); }

/* ============ REEL CARDS (signature element — homepage + category) ============ */
.kz-theme .reel-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
  gap:22px;
}
.kz-front .reel-grid{ grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); }
@media (max-width:640px){
  .kz-theme .reel-grid,
  .kz-front .reel-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
  }
}
.kz-theme .reel-card{
  position:relative;
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:3px;
  overflow:hidden;
  display:block;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.kz-theme .reel-card:hover{
  transform:translateY(-5px);
  border-color:var(--hairline-strong);
  box-shadow:0 18px 34px -16px rgba(0,0,0,.6);
}
.kz-theme .sprockets{
  height:13px;
  background-color:#3A2613;
  background-image:radial-gradient(circle at center, var(--panel) 0 3px, transparent 3.3px);
  background-size:18px 13px;
  background-position:5px center;
}
.kz-theme .reel-frame{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  background:linear-gradient(160deg, var(--panel-2), var(--ink));
}
.kz-theme .reel-frame img{ width:100%; height:100%; object-fit:cover; }
.kz-theme .reel-frame .ph-mark{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-style:italic; font-weight:600; font-size:54px;
  color:rgba(244,237,226,0.14);
}
.kz-theme .ph-1{ background:linear-gradient(155deg, #3A2613, #15110D); }
.kz-theme .ph-2{ background:linear-gradient(155deg, #5C2430, #15110D); }
.kz-theme .ph-3{ background:linear-gradient(155deg, #2B221A, #1B150F); }
.kz-theme .ph-4{ background:linear-gradient(155deg, #6E4E22, #221A12); }
.kz-theme .ph-5{ background:linear-gradient(155deg, #4A1E29, #1B150F); }
.kz-theme .reel-tag{
  position:absolute; left:0; bottom:14px;
  background:var(--gold);
  color:var(--ink);
  font-family:var(--font-display);
  font-style:italic;
  font-weight:600;
  font-size:15px;
  padding:5px 14px 5px 12px;
  border-radius:0 3px 3px 0;
  max-width:calc(100% - 20px);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.kz-theme .rank-badge{
  position:absolute; top:10px; left:10px;
  width:26px; height:26px; border-radius:50%;
  background:var(--crimson); color:var(--ivory);
  font-family:var(--font-label); font-size:12px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--ink); z-index:3;
}
.kz-theme .reel-meta{ padding:12px 16px 16px; display:flex; justify-content:flex-end; }
.kz-theme .reel-meta .cta{ font-size:12px; color:var(--gold); font-weight:700; }

/* ============ PAGINATION (WordPress paginate_links() output) ============ */
.kz-theme .pagination{
  display:flex; align-items:center; justify-content:center;
  gap:8px; margin-top:40px; flex-wrap:wrap;
}
.kz-theme .pagination .page-numbers{
  min-width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--hairline);
  border-radius:4px;
  font-family:var(--font-label);
  font-size:13px;
  color:rgba(244,237,226,.8);
  text-decoration:none;
  transition:border-color .2s, color .2s, background .2s;
}
.kz-theme .pagination a.page-numbers:hover{ border-color:var(--gold); color:var(--gold); }
.kz-theme .pagination .page-numbers.current{
  background:var(--gold); color:var(--ink);
  border-color:var(--gold); font-weight:700;
}
.kz-theme .pagination .page-numbers.dots{ border:none; color:var(--smoke); background:none; }

/* ============ CATEGORY DESCRIPTION ============ */
.kz-theme .cat-description{
  margin-top:8px;
  padding:48px 0 0;
  border-top:1px solid var(--hairline);
}
.kz-theme .cat-description h2{
  font-family:var(--font-display);
  font-weight:600;
  font-size:26px;
  margin-bottom:16px;
}
.kz-theme .cat-description p{
  color:var(--smoke);
  font-size:15px;
  margin-bottom:14px;
}

/* ============ DISPATCH (news list — homepage + news category archives) ============ */
.kz-theme .dispatch-list{ display:flex; flex-direction:column; }
.kz-theme .dispatch-item{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:20px;
  align-items:start;
  padding:24px 0;
  border-top:1px solid var(--hairline);
  transition:opacity .2s;
}
.kz-theme .dispatch-item:hover{ opacity:.86; }
.kz-theme .dispatch-list .dispatch-item:last-child{ border-bottom:1px solid var(--hairline); }
.kz-theme .dispatch-thumb{
  display:block;
  width:96px;
  height:96px;
  border-radius:4px;
  overflow:hidden;
  background:linear-gradient(160deg, var(--panel-2), var(--ink));
  position:relative;
  flex-shrink:0;
}
.kz-theme .dispatch-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.kz-theme .dispatch-thumb .ph-mark{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-style:italic; font-weight:600; font-size:34px;
  color:rgba(244,237,226,0.18);
}
.kz-theme .dispatch-cat{
  font-family:var(--font-label);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--crimson-bright);
  display:block;
  margin-bottom:8px;
}
.kz-theme .dispatch-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(18px,2.4vw,22px);
  line-height:1.3;
  margin-bottom:8px;
}
.kz-theme .dispatch-title a:hover{ color:var(--gold); }
.kz-theme .dispatch-dek{
  color:var(--smoke);
  font-size:14.5px;
  max-width:560px;
  margin:0;
}
@media (max-width:640px){
  .kz-theme .dispatch-item{ grid-template-columns:72px 1fr; gap:14px; }
  .kz-theme .dispatch-thumb{ width:72px; height:72px; }
}

/* ============ WALK OF FAME (homepage — most popular actresses) ============ */
.kz-theme .scroll-row{
  display:flex;
  gap:26px;
  overflow-x:auto;
  padding-bottom:8px;
  scroll-snap-type:x proximity;
}
.kz-theme .scroll-row::-webkit-scrollbar{ height:6px; }
.kz-theme .scroll-row::-webkit-scrollbar-thumb{ background:var(--panel-2); border-radius:3px; }

.kz-theme .fame-item{
  scroll-snap-align:start;
  flex:0 0 128px;
  text-align:center;
}
.kz-theme .fame-portrait{
  width:108px; height:108px;
  border-radius:50%;
  margin:0 auto 12px;
  position:relative;
  overflow:hidden;
  background:var(--panel-2);
  border:2px solid var(--gold);
  box-shadow:0 0 0 4px rgba(217,168,87,0.12);
}
.kz-theme .fame-portrait img{ width:100%; height:100%; object-fit:cover; }
.kz-theme .fame-portrait .ph-mark{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-style:italic; font-weight:600;
  color:rgba(244,237,226,0.35);
}
.kz-theme .fame-rank{
  position:absolute; top:-6px; right:-6px;
  background:var(--crimson);
  color:var(--ivory);
  font-family:var(--font-label);
  font-size:10px;
  width:22px;height:22px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--ink);
  z-index:2;
}
.kz-theme .fame-name{ font-size:13px; font-weight:700; }

@media (max-width:640px){
  .kz-theme .scroll-row{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:28px 16px;
    overflow-x:visible;
    padding-bottom:0;
  }
  .kz-theme .fame-item{
    flex:none;
    width:auto;
  }
}

/* ============ GALLERY MARKER (used only if you keep a dev-only label; safe to leave unused) ============ */
.kz-theme .gallery-marker{
  font-family:var(--font-label);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold-dim);
  border:1px dashed var(--hairline-strong);
  border-radius:4px;
  padding:6px 12px;
  display:inline-block;
  margin-bottom:18px;
}

/* Note: there's no separate "gallery grid" CSS here for the related-photos
   block on attachment pages — foogallery_render_gallery() outputs FooGallery's
   own real markup there too (same .fg-item structure as the single-post
   gallery), so it's styled by the FOOGALLERY OVERRIDES section below rather
   than a custom .g-card component. */

/* ============ POST NAV (prev/next actress within the same category) ============ */
.kz-theme .post-nav{
  display:flex; justify-content:space-between; gap:24px;
  margin-top:56px; padding-top:28px; border-top:1px solid var(--hairline);
  flex-wrap:wrap;
}
.kz-theme .post-nav a{ max-width:46%; }
.kz-theme .post-nav .dir{
  display:block; font-family:var(--font-label); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--smoke); margin-bottom:6px;
}
.kz-theme .post-nav .name{
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:19px; transition:color .2s;
}
.kz-theme .post-nav a:hover .name{ color:var(--gold); }
.kz-theme .post-nav .next{ text-align:right; margin-left:auto; }

/* ============ RELATED (related actresses on single post) ============ */
.kz-theme .related-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}
@media (max-width:880px){ .kz-theme .related-row{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:560px){ .kz-theme .related-row{ grid-template-columns:repeat(2, 1fr); } }
.kz-theme .related-card{
  background:var(--panel); border:1px solid var(--hairline);
  border-radius:3px; overflow:hidden;
  transition:border-color .2s, transform .2s;
}
.kz-theme .related-card:hover{ border-color:var(--hairline-strong); transform:translateY(-3px); }
.kz-theme .related-frame{
  aspect-ratio:1/1; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:30px; color:rgba(244,237,226,.18);
}
.kz-theme .related-frame img{ width:100%; height:100%; object-fit:cover; }
.kz-theme .related-name{ padding:10px 12px 12px; font-size:12.5px; font-weight:700; }

/* ============ ATTACHMENT PAGE: MAIN IMAGE ============ */
.kz-theme .photo-stage{ display:flex; flex-direction:column; align-items:center; }
/* width:fit-content so the frame's border/background hug whatever size
   the photo actually renders at - a 540px-wide photo gets a 540px-wide
   frame, not a 960px frame with empty space around a smaller image.
   max-width:100% keeps it from ever overflowing the page on narrow
   viewports, independent of the image's own sizing below. */
.kz-theme .photo-frame{
  width:fit-content;
  max-width:100%;
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:4px;
  overflow:hidden;
}

.kz-theme .photo-sprockets{
  height:14px;
  background-color:#3A2613;
  background-image:radial-gradient(circle at center, var(--panel) 0 3px, transparent 3.4px);
  background-size:20px 14px;
  background-position:6px center;
}
/* The actual sizing logic. width:auto + height:auto means the image
   displays at its own native resolution by default - it never gets
   stretched past what the file actually contains, the way a flat
   width:100% would (that was the bug: it forced every photo to fill
   whatever the frame's width happened to be, capped at a fixed 480px
   regardless of whether the source was 540px, 720px, or 960px wide).
   max-width:min(960px, 100%) is the only ceiling now: large screens
   can show a 960px-wide original at its full 960px, while anything
   narrower than that (a smaller original, or a narrow viewport) is
   still naturally constrained - by whichever of the two is smaller. */
.kz-theme .photo-frame img{
  display:block;
  width:auto;
  height:auto;
  max-width:min(960px, 100%);
}

.kz-theme .image-nav{
  width:100%;
  max-width:min(960px, 100%);
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-top:20px;
}
.kz-theme .image-nav a{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-label) !important; font-size:12px !important; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(244,237,226,.85) !important;
  border:1px solid var(--hairline-strong) !important;
  border-radius:999px;
  padding:10px 18px;
  text-decoration:none !important;
  transition:border-color .2s, color .2s;
}
.kz-theme .image-nav a:hover{ border-color:var(--gold) !important; color:var(--gold) !important; }
.kz-theme .image-nav svg{ width:13px; height:13px; }

.kz-theme .back-to-gallery{
  text-align:center;
  margin-top:32px;
  font-family:var(--font-label);
  font-size:13px;
}
.kz-theme .back-to-gallery a{ color:var(--gold); border-bottom:1px solid rgba(217,168,87,.4); }
.kz-theme .back-to-gallery a:hover{ border-bottom-color:var(--gold); }

.kz-theme .by-line a{ color:var(--gold) !important; border-bottom:1px solid rgba(217,168,87,.4) !important; }

/* ============ COMMENTS (attachment pages only) ============ */
.kz-theme .comments-section{ margin-top:56px; padding-top:40px; border-top:1px solid var(--hairline); }
.kz-theme .comments-title{ font-family:var(--font-display); font-weight:600; font-size:22px; margin-bottom:28px; }

.kz-theme .comment-list{ list-style:none; margin:0 0 40px; padding:0; }
.kz-theme .comment-body{
  display:flex; flex-direction:column; gap:10px;
  padding-bottom:24px; margin-bottom:24px; border-bottom:1px solid var(--hairline);
}
.kz-theme .comment-meta{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.kz-theme .comment-author{ display:flex; align-items:center; gap:10px; }
.kz-theme .comment-author .avatar{ width:40px; height:40px; border-radius:50%; object-fit:cover; border:1px solid var(--hairline-strong); }
.kz-theme .comment-author .fn{ font-size:14.5px; font-weight:700; font-style:normal; color:var(--ivory); }
.kz-theme .comment-metadata{ font-family:var(--font-label); font-size:11.5px; color:var(--smoke); }
.kz-theme .comment-metadata a{ color:inherit; }
.kz-theme .comment-content p{ font-size:14.5px; color:rgba(244,237,226,.85); line-height:1.6; }
.kz-theme .reply{ align-self:flex-start; }
.kz-theme .comment-reply-link{
  font-family:var(--font-label); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold); border-bottom:1px solid rgba(217,168,87,.4);
}
.kz-theme .comment-reply-link:hover{ border-bottom-color:var(--gold); }

.kz-theme .comment-respond{ max-width:560px; }
.kz-theme .comment-reply-title{ font-family:var(--font-display); font-weight:600; font-size:19px; margin-bottom:18px; }
.kz-theme #cancel-comment-reply-link{ display:none; }
.kz-theme .comment-form p{ margin-bottom:16px; }
.kz-theme .comment-form label{
  display:block; font-family:var(--font-label); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--smoke); margin-bottom:8px;
}
.kz-theme .comment-form input[type="text"],
.kz-theme .comment-form input[type="email"],
.kz-theme .comment-form input[type="url"],
.kz-theme .comment-form textarea{
  width:100%; background:var(--ink-soft); border:1px solid var(--hairline);
  border-radius:6px; padding:11px 13px; color:var(--ivory);
  font-family:var(--font-body); font-size:14px;
}
.kz-theme .comment-form textarea{ resize:vertical; min-height:120px; }
.kz-theme .comment-form input::placeholder, .kz-theme .comment-form textarea::placeholder{ color:var(--smoke); }
.kz-theme .comment-form input:focus, .kz-theme .comment-form textarea:focus{ outline:none; border-color:var(--gold); }
.kz-theme .comment-form .form-submit{ margin-bottom:0; }
.kz-theme .comment-form .submit{
  background:var(--gold); border:none; border-radius:999px; padding:12px 28px;
  color:var(--ink); font-family:var(--font-label); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; cursor:pointer; transition:background .2s, color .2s;
}
.kz-theme .comment-form .submit:hover{ background:var(--crimson-bright); color:var(--ivory); }

/* ============ FOOGALLERY OVERRIDES (confirmed against live rendered HTML) ============
   Real markup, copied from a live gallery page (FooGallery 3.0+ — confirmed
   by the .fg-caption-title/.fg-caption-desc split and the CSS custom
   properties on the container, matching FooGallery's own v3 migration notes):

     <div class="foogallery foogallery-container foogallery-default
          foogallery-lightbox-none fg-center fg-m-col2 fg-default fg-ready
          fg-light fg-border-thin fg-round-small fg-shadow-outline
          fg-loading-default fg-loaded-fade-in fg-caption-hover fg-hover-fade
          fg-hover-zoom" id="foogallery-gallery-XXXXXX" ...>
       <div class="fg-item fg-type-iframe fg-loaded">
         <figure class="fg-item-inner">
           <a class="fg-thumb" href="…/photos/{slug}/" data-caption-title="…">
             <span class="fg-image-wrap"><img class="fg-image skip-lazy" width="180" height="225" …></span>
             <span class="fg-image-overlay"></span>
           </a>
           <figcaption class="fg-caption">
             <div class="fg-caption-inner">
               <div class="fg-caption-title">…</div>
             </div>
           </figcaption>
         </figure>
         <div class="fg-loader"></div>
       </div>
       <!-- … more .fg-item siblings, no row-wrapper between them … -->
     </div>

   Worth knowing:
   - This is the "Default" layout (foogallery-default / fg-default) — fixed
     180×225 thumbnails that simply wrap row by row, not a true variable-
     width justified algorithm. That's good news: it's a uniform grid, so
     a plain flex-wrap container with no row markup to fight is all we need.
   - Thumbnails already link straight to the WP attachment page (no
     lightbox — foogallery-lightbox-none), exactly matching our rewrite
     rules and attachment.php/attachment-single.php. Nothing to change there.
   - Selectors below follow FooGallery's own v3 custom-CSS guidance
     (fooplugins.com → FooGallery v3.0 Custom CSS Migration Guide):
     scope with ".foogallery:not(.fg-preset)" and avoid !important, relying
     on specificity instead (this gallery isn't a preset, but :not(.fg-preset)
     future-proofs against one that is, per their recommended pattern).
   - OPTIONAL clean-up: in each gallery's Appearance settings you could set
     Border Size / Rounded Corners / Drop Shadow / Inner Shadow to "None" so
     FooGallery stops generating its own CSS for fg-border-thin/fg-round-small/
     fg-shadow-outline — but it's not required, the rules below are specific
     enough (.kz-theme ancestor + 2 classes) to win either way. */
.kz-theme .foogallery.foogallery-container:not(.fg-preset){
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:0 0 8px;
}
.kz-theme .foogallery:not(.fg-preset) .fg-item{
  background:var(--panel) !important;
  border:1px solid var(--hairline) !important;
  border-radius:3px !important;
  box-shadow:none !important;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.kz-theme .foogallery:not(.fg-preset) .fg-item:hover{
  transform:translateY(-4px);
  border-color:var(--hairline-strong) !important;
  box-shadow:0 16px 30px -16px rgba(0,0,0,.6);
}
@media (max-width:640px){
  /* Without this, each .fg-item keeps its configured intrinsic width
     (180px from the gallery's Thumbnail Size setting) and only one fits
     per row on a phone screen. Forcing a 50%-based flex-basis (rather
     than relying on FooGallery's own wrapping) guarantees exactly two
     per row regardless of that setting, on both the gallery shortcode
     (single posts) and the related-photos grid (attachment pages) —
     same markup, same fix covers both. */
  .kz-theme .foogallery.foogallery-container:not(.fg-preset){
    gap:10px !important;
  }
  .kz-theme .foogallery:not(.fg-preset) .fg-item{
    flex:0 0 calc(50% - 5px) !important;
    max-width:calc(50% - 5px) !important;
  }
  .kz-theme .foogallery:not(.fg-preset) .fg-image-wrap,
  .kz-theme .foogallery:not(.fg-preset) img.fg-image{
    width:100% !important;
    height:auto !important;
  }
}
.kz-theme .foogallery:not(.fg-preset) .fg-item-inner{ margin:0; }
.kz-theme .foogallery:not(.fg-preset) .fg-caption{
  background:linear-gradient(to top, rgba(21,17,13,.85), transparent);
}
.kz-theme .foogallery:not(.fg-preset) .fg-caption .fg-caption-inner{ padding:10px 12px; }
.kz-theme .foogallery:not(.fg-preset) .fg-caption-title{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:600;
  color:var(--ivory);
  font-size:13px;
  line-height:1.3;
}
.kz-theme .foogallery:not(.fg-preset) .fg-caption-desc{
  color:var(--smoke);
  font-size:12px;
}
.kz-theme .foogallery:not(.fg-preset) .fg-loader{ display:none; }

/* Pagination — there's a legacy custom-CSS block already saved against
   this site (shared with us directly) that hard-codes orange #fc7745
   boxes using !important on very specific selectors like
   ".fg-paging-container.fg-dark .fg-page-item .fg-page-link". Beating an
   existing !important rule needs equal-or-greater specificity — source
   order alone won't do it — so every selector below mirrors the legacy
   block's exact chains (with .kz-theme added, which makes ours the more
   specific one) and also carries !important. If you'd rather remove the
   legacy CSS at the source instead — FooGallery → Settings → Custom JS &
   CSS, or Appearance → Customize → Additional CSS, wherever it's actually
   saved — that works too; these rules stay harmless either way. */
.kz-theme .fg-paging-container .fg-pages{ margin:24px 0 0 !important; }

.kz-theme .fg-paging-container .fg-load-more,
.kz-theme .fg-paging-container.fg-dark .fg-load-more{
  background-color:transparent !important;
  border-color:var(--hairline-strong) !important;
  color:rgba(244,237,226,.85) !important;
  padding:10px 22px !important;
  font-family:var(--font-label) !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  border-radius:999px !important;
}
.kz-theme .fg-paging-container .fg-load-more:hover,
.kz-theme .fg-paging-container.fg-dark .fg-load-more:hover{
  background-color:var(--gold) !important;
  border-color:var(--gold) !important;
  color:var(--ink) !important;
}

.kz-theme .fg-paging-container .fg-page-item,
.kz-theme .fg-paging-container .fg-page-item.fg-page-button,
.kz-theme .fg-paging-container .fg-page-item.fg-visible{
  display:inline-flex !important;
  background-color:transparent !important;
  border-color:transparent !important;
  margin:0 4px !important;
}
.kz-theme .fg-paging-container .fg-page-item .fg-page-link,
.kz-theme .fg-paging-container.fg-dark .fg-page-item .fg-page-link{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:38px !important;
  height:38px !important;
  padding:0 10px !important;
  border:1px solid var(--hairline) !important;
  border-radius:4px !important;
  background-color:transparent !important;
  font-family:var(--font-label) !important;
  font-size:13px !important;
  font-weight:400 !important;
  color:rgba(244,237,226,.8) !important;
  text-decoration:none !important;
}
.kz-theme .fg-paging-container .fg-page-item:hover .fg-page-link,
.kz-theme .fg-paging-container.fg-dark .fg-page-item:hover .fg-page-link{
  border-color:var(--gold) !important;
  color:var(--gold) !important;
}
.kz-theme .fg-paging-container .fg-page-item.fg-selected .fg-page-link,
.kz-theme .fg-paging-container.fg-dark .fg-page-item.fg-selected .fg-page-link{
  background-color:var(--gold) !important;
  border-color:var(--gold) !important;
  color:var(--ink) !important;
  font-weight:700 !important;
  font-size:13px !important;
}
.kz-theme .fg-paging-container .fg-page-item.fg-disabled .fg-page-link,
.kz-theme .fg-paging-container.fg-dark .fg-page-item.fg-disabled .fg-page-link,
.kz-theme .fg-paging-container.fg-dark .fg-page-item.fg-disabled:hover .fg-page-link,
.kz-theme .fg-paging-container.fg-dark .fg-page-item.fg-disabled:focus .fg-page-link{
  background-color:transparent !important;
  border-color:transparent !important;
  color:rgba(244,237,226,.4) !important;
  font-weight:400 !important;
  opacity:1 !important;
}

/* PARENT THEME OVERRIDES section removed — attachment.php is now a
   standalone template and no longer prints any markup that needed
   overriding. Its breadcrumb uses the same plain .breadcrumb markup as
   every other template on the site, styled above under "BREADCRUMB +
   PAGE HEADER". */

/* ============ FOOTER: BY LANGUAGE ============ */
.kz-theme .footer-languages{
  background:var(--ink-soft);
  border-top:1px solid var(--hairline);
  padding:40px 0;
}
.kz-theme .lang-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:28px 32px;
}
.kz-theme .lang-block .lang-head{ display:flex; align-items:center; gap:8px; margin-bottom:13px; }
.kz-theme .lang-tab{ width:5px; height:14px; border-radius:2px; display:inline-block; }
.kz-theme .lang-head h4{
  font-family:var(--font-label); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--smoke); margin:0;
}
.kz-theme .tag-tamil{ background:var(--gold); }
.kz-theme .tag-telugu{ background:var(--crimson-bright); }
.kz-theme .tag-kannada{ background:#7C8B5A; }
.kz-theme .tag-malayalam{ background:#5A8B8B; }
.kz-theme .tag-bollywood{ background:#B0508A; }
.kz-theme .lang-block ul{ display:flex; flex-direction:column; gap:10px; }
.kz-theme .lang-block a{ font-size:14px; color:rgba(244,237,226,.82); transition:color .2s; }
.kz-theme .lang-block a:hover{ color:var(--gold); }
@media (max-width:880px){ .kz-theme .lang-grid{ grid-template-columns:repeat(3, 1fr); gap:26px 24px; } }
@media (max-width:560px){ .kz-theme .lang-grid{ grid-template-columns:repeat(2, 1fr); } }

/* ============ FOOTER ============ */
.kz-theme .site-footer{ border-top:1px solid var(--hairline); background:var(--ink-soft); padding:64px 0 0; }
.kz-theme .footer-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:36px;
  padding-bottom:48px;
}
.kz-theme .footer-brand .brand{ margin-bottom:14px; }
.kz-theme .footer-brand p{ color:var(--smoke); font-size:13.5px; max-width:280px; margin-bottom:20px; }
.kz-theme .footer-social{ display:flex; gap:12px; }
.kz-theme .footer-social a{
  width:36px; height:36px; border:1px solid var(--hairline-strong); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:border-color .2s, color .2s;
}
.kz-theme .footer-social a:hover{ border-color:var(--gold); color:var(--gold); }
.kz-theme .footer-social svg{ width:15px; height:15px; }
.kz-theme .footer-col h4{
  font-family:var(--font-label); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--smoke); margin-bottom:16px;
}
.kz-theme .footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.kz-theme .footer-col a{ font-size:14px; color:rgba(244,237,226,.82); transition:color .2s; }
.kz-theme .footer-col a:hover{ color:var(--gold); }
.kz-theme .footer-bottom{
  border-top:1px solid var(--hairline);
  padding:22px 0 28px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:12.5px; color:var(--smoke);
}
@media (max-width:880px){
  .kz-theme .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .kz-theme .footer-top{ grid-template-columns:1fr; }
  .kz-theme .post-nav a{ max-width:100%; }
  .kz-front main section,
  .kz-theme main section{ padding-left:0; padding-right:0; }
}

@media (prefers-reduced-motion: reduce){
  .kz-theme *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* ============ GENERIC PAGE TEMPLATE (Contact Us, Privacy Policy, etc.) ============ */

/* Narrower reading width than the site's normal 1240px .wrap — long-form
   prose and a contact form both read/use better constrained than full-bleed. */
.kz-theme .wrap-narrow{ max-width:760px; }

/* Broad prose styling for arbitrary page content. Unlike .bio (which only
   needs to handle p/a/h2, since gallery posts have a known shape), a
   generic page can contain anything an editor puts in the block editor —
   headings, lists, blockquotes, bold text used as pseudo-headings (the
   Privacy Policy page does this rather than real <h2>/<h3> tags) — so
   this covers the full common set rather than just what one page needs. */
.kz-theme .page-content{ padding:8px 0 56px; }
.kz-theme .page-content p,
.kz-theme .page-content li,
.kz-theme .page-content p *,
.kz-theme .page-content li *{
  font-family:var(--font-body) !important;
  font-style:normal !important;
}
.kz-theme .page-content p{ color:rgba(244,237,226,.85); font-size:16px; line-height:1.75; margin-bottom:18px; }
.kz-theme .page-content strong{ color:var(--ivory); font-weight:700; }
.kz-theme .page-content a{ color:var(--gold) !important; border-bottom:1px solid rgba(217,168,87,.4) !important; transition:border-color .2s; }
.kz-theme .page-content a:hover{ border-bottom-color:var(--gold) !important; }
.kz-theme .page-content h2,
.kz-theme .page-content h3,
.kz-theme .page-content h4{
  font-family:var(--font-display) !important;
  font-style:normal !important;
  font-weight:600;
  color:var(--ivory);
  letter-spacing:-0.01em;
  margin:36px 0 14px;
}
.kz-theme .page-content h2{ font-size:clamp(22px,3vw,28px); }
.kz-theme .page-content h3{ font-size:clamp(19px,2.4vw,22px); }
.kz-theme .page-content h4{ font-size:17px; }
.kz-theme .page-content ul,
.kz-theme .page-content ol{
  margin:0 0 20px;
  padding-left:22px;
  color:rgba(244,237,226,.85);
  font-size:16px;
  line-height:1.75;
}
.kz-theme .page-content li{ margin-bottom:8px; }
.kz-theme .page-content blockquote{
  margin:24px 0;
  padding:4px 0 4px 20px;
  border-left:2px solid var(--gold);
  color:rgba(244,237,226,.75);
  font-style:italic;
}
.kz-theme .page-content hr{ border:none; border-top:1px solid var(--hairline); margin:32px 0; }

/* ============ FLUENT FORMS OVERRIDES (Contact Us) ============
   Fluent Forms ships its own front-end CSS, so — same approach as the
   FooGallery overrides — these target the plugin's own stable class
   names with !important rather than replacing its markup. Based on
   Fluent Forms' standard/documented classes; if the live rendered HTML
   uses different class names in your installed version, send me an
   Inspect Element snippet of the rendered form and I'll correct these
   to match exactly, the same way the FooGallery rules were tightened
   up earlier. */
.kz-theme .fluentform{
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:4px;
  padding:32px clamp(20px,4vw,40px);
  margin:28px 0;
}
.kz-theme .fluentform .ff-el-group{ margin-bottom:20px; }
.kz-theme .fluentform .ff-el-input--label label,
.kz-theme .fluentform label{
  font-family:var(--font-label) !important;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--smoke);
  margin-bottom:8px;
  display:block;
}
.kz-theme .fluentform .ff-el-is-required{ color:var(--crimson-bright); }
.kz-theme .fluentform input[type="text"],
.kz-theme .fluentform input[type="email"],
.kz-theme .fluentform input[type="tel"],
.kz-theme .fluentform input[type="number"],
.kz-theme .fluentform select,
.kz-theme .fluentform textarea,
.kz-theme .fluentform .ff-el-form-control{
  width:100% !important;
  background:var(--ink) !important;
  border:1px solid var(--hairline-strong) !important;
  border-radius:3px !important;
  color:var(--ivory) !important;
  font-family:var(--font-body) !important;
  font-size:15px !important;
  padding:12px 14px !important;
  box-shadow:none !important;
  transition:border-color .2s;
}
.kz-theme .fluentform textarea{ min-height:140px; resize:vertical; }
.kz-theme .fluentform input:focus,
.kz-theme .fluentform select:focus,
.kz-theme .fluentform textarea:focus,
.kz-theme .fluentform .ff-el-form-control:focus{
  outline:none !important;
  border-color:var(--gold) !important;
}
.kz-theme .fluentform input::placeholder,
.kz-theme .fluentform textarea::placeholder{ color:var(--smoke); opacity:.7; }
.kz-theme .fluentform .ff-el-help-text{ font-size:12.5px; color:var(--smoke); margin-top:6px; }
.kz-theme .fluentform .error,
.kz-theme .fluentform .text-danger{ font-size:12.5px; color:var(--crimson-bright); margin-top:6px; }
.kz-theme .fluentform button[type="submit"],
.kz-theme .fluentform .ff-btn-submit{
  font-family:var(--font-label) !important;
  font-size:12px !important;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink) !important;
  background:var(--gold) !important;
  border:none !important;
  border-radius:999px !important;
  padding:14px 32px !important;
  cursor:pointer;
  transition:background .2s, color .2s;
}
.kz-theme .fluentform button[type="submit"]:hover,
.kz-theme .fluentform .ff-btn-submit:hover{ background:var(--crimson-bright) !important; color:var(--ivory) !important; }
/* Fluent Forms' "Name" field type splits into two columns (First/Last) on
   its own grid classes — keep them side by side on desktop, stacked on
   mobile, matching how every other two-up layout on this site collapses. */
@media (max-width:560px){
  .kz-theme .fluentform [class*="ff-grid-col-"]{ width:100% !important; }
}


/* ============ SEARCH RESULTS ============ */

/* The quoted term in "Search results for "x"" — same gold highlight
   used for the quoted query, separate from .page-header h1's own color
   so it can be retuned independently if needed. */
.kz-theme .search-term{ color:var(--gold); }

/* kz_render_search_card()'s meta block — sits below the reel-frame,
   same position .reel-meta normally occupies on a plain reel card, but
   carrying a category label + title instead of just the "View" CTA. */
.kz-theme .search-card-meta{ padding:14px 16px 16px; }
.kz-theme .search-card-meta .dispatch-cat{ margin-bottom:6px; }
.kz-theme .search-card-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:16px;
  line-height:1.35;
  color:var(--ivory);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  transition:color .2s;
}
.kz-theme .search-card:hover .search-card-title{ color:var(--gold); }

/* Empty state — shown when a search comes back with nothing. */
.kz-theme .search-empty{ padding:24px 0 56px; text-align:center; }
.kz-theme .search-empty-message{
  color:rgba(244,237,226,.85);
  font-size:16px;
  line-height:1.7;
  max-width:520px;
  margin:0 auto 8px;
}