/*
Theme Name: JolieDestination
Theme URI: https://joliedestination.com
Author: JolieDestination
Description: Premium expedition and photography publication theme. Photography-led editorial design with Expedition, Photography, and Culture & History as core categories.
Version: 1.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: joliedestination
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  --jd-near-black: #0A0A0B;
  --jd-off-white: #F2F0EC;
  --jd-white: #FFFFFF;
  --jd-brown-dark: #1A1512;
  --jd-brown-mid: #3A2E22;
  --jd-amber: #C9974C;
  --jd-amber-muted: #D9AE64;
  --jd-amber-muted-2: #B08A44;
  --jd-text-on-light: #141312;
  --jd-text-secondary-light: #6B6660;
  --jd-text-secondary-light-2: #9B968D;
  --jd-text-secondary-dark: #B9B4AA;
  --jd-border-dark-1: #201D19;
  --jd-border-dark-2: #2E2B26;
  --jd-border-light-1: #E3DFD4;
  --jd-border-light-2: #EDEAE3;

  --jd-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --jd-font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --jd-font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  --jd-radius: 8px;
  --jd-radius-sm: 4px;
  --jd-transition: 200ms ease;
  --jd-container-max: 1320px;
  --jd-reading-col: 760px;
  --jd-wide-col: 1100px;

  --jd-header-h: 84px;
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  margin: 0;
  font-family: var(--jd-font-body);
  color: var(--jd-text-on-light);
  background: var(--jd-white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--jd-font-display); font-weight: 600; line-height: 1.15; margin: 0 0 0.5em; }
.jd-container { max-width: var(--jd-container-max); margin: 0 auto; padding: 0 24px; }
.jd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--jd-font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jd-amber);
}
.jd-eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--jd-amber);
}
.jd-eyebrow--dark { color: var(--jd-amber-muted); }
.jd-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--jd-near-black); color: var(--jd-off-white);
  padding: 12px 20px; font-family: var(--jd-font-mono); font-size: 13px;
}
.jd-skip-link:focus { left: 16px; top: 16px; }
:focus-visible { outline: 2px solid var(--jd-amber); outline-offset: 2px; }

/* ==========================================================================
   3. HEADER
   ========================================================================== */
.jd-header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 500;
  height: var(--jd-header-h);
  display: flex; align-items: center;
  background: transparent;
  transition: background var(--jd-transition), box-shadow var(--jd-transition), height var(--jd-transition);
  border-bottom: 1px solid transparent;
}
.jd-header.is-scrolled,
.jd-header.is-solid {
  background: var(--jd-near-black);
  border-bottom: 1px solid var(--jd-border-dark-1);
}
.jd-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
}
.jd-logo {
  font-family: var(--jd-font-display);
  font-size: 22px; font-weight: 600; color: var(--jd-off-white);
  letter-spacing: 0.01em;
}
.jd-logo span { color: var(--jd-amber); }
.jd-nav-primary { display: none; }
@media (min-width: 1024px) {
  .jd-nav-primary { display: flex; align-items: center; gap: 32px; }
}
.jd-nav-primary a {
  font-family: var(--jd-font-mono); font-size: 12.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--jd-text-secondary-dark);
  transition: color var(--jd-transition);
  position: relative; padding: 4px 0;
}
.jd-nav-primary a:hover,
.jd-nav-primary a.is-active { color: var(--jd-amber); }
.jd-nav-primary a.is-active::after {
  content: ""; position: absolute; left: 0; bottom: -6px; width: 100%; height: 1px; background: var(--jd-amber);
}
.jd-header-actions { display: flex; align-items: center; gap: 20px; }
.jd-articles-toggle {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--jd-font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--jd-off-white); background: transparent; border: 1px solid var(--jd-border-dark-2);
  padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: border-color var(--jd-transition), color var(--jd-transition);
}
.jd-articles-toggle:hover { border-color: var(--jd-amber); color: var(--jd-amber); }
/* v1.2 fix: this button opened .jd-articles-panel, which is force-hidden
   below 1024px (the mobile slide-down panel absorbs that job instead) —
   so the button was visible but silently did nothing on mobile/tablet.
   Hide it there and let the hamburger be the single entry point. */
@media (max-width: 1023.98px) {
  .jd-articles-toggle { display: none; }
}
.jd-mobile-toggle {
  display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px;
}
@media (min-width: 1024px) { .jd-mobile-toggle { display: none; } }
.jd-mobile-toggle span { width: 22px; height: 1.5px; background: var(--jd-off-white); display: block; }

/* Article dropdown panel (desktop) */
.jd-articles-panel {
  position: fixed; top: var(--jd-header-h); right: 24px; width: 380px; max-width: calc(100vw - 32px);
  background: var(--jd-brown-dark); border: 1px solid var(--jd-border-dark-2);
  border-radius: var(--jd-radius); z-index: 490;
  max-height: 70vh; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--jd-transition), transform var(--jd-transition), visibility var(--jd-transition);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.jd-articles-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.jd-articles-panel__row {
  display: flex; gap: 12px; align-items: center; padding: 12px 16px;
  border-bottom: 1px solid var(--jd-border-dark-2);
}
.jd-articles-panel__row:last-of-type { border-bottom: none; }
.jd-articles-panel__thumb { width: 52px; height: 52px; border-radius: var(--jd-radius-sm); object-fit: cover; flex-shrink: 0; background: var(--jd-border-dark-2); }
.jd-articles-panel__title { font-family: var(--jd-font-display); font-size: 14.5px; color: var(--jd-off-white); line-height: 1.3; }
.jd-articles-panel__date { font-family: var(--jd-font-mono); font-size: 10.5px; color: var(--jd-text-secondary-dark); text-transform: uppercase; margin-top: 4px; }
.jd-articles-panel__footer { padding: 14px 16px; text-align: center; }
.jd-articles-panel__footer a { font-family: var(--jd-font-mono); font-size: 12px; color: var(--jd-amber); text-transform: uppercase; letter-spacing: 0.08em; }
.jd-articles-panel__empty { padding: 20px 16px; font-size: 13px; color: var(--jd-text-secondary-dark); font-family: var(--jd-font-mono); }

/* Mobile nav + mobile article list: full-width slide-down, not the small anchored panel */
/* v1.2 fix: all of .jd-mobile-panel's hide/show rules previously lived only
   inside the max-width:1023.98px block, so on any screen ≥1024px (e.g. an
   iPad in landscape) the panel had NO display rule at all — it rendered as
   a plain static block, permanently visible, sitting right after the header.
   That showed up as a second, always-on duplicate article list that never
   closed. Give it an explicit global default first. */
.jd-mobile-panel { display: none; }
@media (max-width: 1023.98px) {
  .jd-mobile-panel {
    display: block;
    position: fixed; top: var(--jd-header-h); left: 0; width: 100%; height: calc(100vh - var(--jd-header-h));
    background: var(--jd-near-black); z-index: 480; overflow-y: auto;
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: opacity var(--jd-transition), transform var(--jd-transition), visibility var(--jd-transition);
    padding: 8px 24px 40px;
  }
  .jd-mobile-panel.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .jd-mobile-panel__nav { display: flex; flex-direction: column; padding: 16px 0; border-bottom: 1px solid var(--jd-border-dark-1); margin-bottom: 16px; }
  .jd-mobile-panel__nav a {
    display: block;
    font-family: var(--jd-font-mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--jd-off-white); padding: 12px 0; border-bottom: 1px solid var(--jd-border-dark-1);
  }
  .jd-mobile-panel__nav a:last-child { border-bottom: none; }
  .jd-articles-panel { display: none; } /* desktop-anchored panel hidden on mobile; the mobile panel absorbs the article list */
}

/* ==========================================================================
   4. HERO (homepage + single article)
   ========================================================================== */
.jd-hero {
  position: relative; min-height: 640px; display: flex; align-items: flex-end;
  background: linear-gradient(180deg, var(--jd-brown-dark) 0%, var(--jd-near-black) 100%);
  background-size: cover; background-position: center;
  padding: 140px 0 64px;
  color: var(--jd-off-white);
}
.jd-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,11,0.15) 0%, rgba(10,10,11,0.55) 60%, rgba(10,10,11,0.92) 100%);
  pointer-events: none;
}
.jd-hero__content { position: relative; z-index: 2; max-width: 820px; }
.jd-hero__title { font-size: clamp(32px, 5vw, 58px); color: var(--jd-off-white); margin: 14px 0 16px; }
.jd-hero__dek { font-size: 17px; color: var(--jd-text-secondary-dark); max-width: 560px; }
.jd-hero__byline { font-family: var(--jd-font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--jd-text-secondary-dark); margin-top: 18px; }
@media (max-width: 767.98px) {
  .jd-hero { min-height: 460px; padding: 120px 0 40px; }
}

/* ==========================================================================
   5. HOMEPAGE CATEGORY ROWS (horizontal scroll)
   ========================================================================== */
.jd-home { background: var(--jd-near-black); }
.jd-category-row { padding: 56px 0; border-bottom: 1px solid var(--jd-border-dark-1); }
.jd-category-row__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; }
.jd-category-row__hint { font-family: var(--jd-font-mono); font-size: 11px; color: var(--jd-text-secondary-dark); text-transform: uppercase; letter-spacing: 0.08em; }
.jd-scroll-row {
  display: flex; gap: 20px; overflow-x: auto; padding: 4px 24px 12px;
  margin: 0 -24px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--jd-border-dark-2) transparent;
}
.jd-scroll-row::-webkit-scrollbar { height: 6px; }
.jd-scroll-row::-webkit-scrollbar-thumb { background: var(--jd-border-dark-2); border-radius: 4px; }
.jd-scroll-row .jd-card {
  flex: 0 0 260px;
  scroll-snap-align: start;
}
@media (max-width: 599.98px) {
  /* peek-of-next-card pattern on mobile: card is ~82% of viewport width */
  .jd-scroll-row .jd-card { flex: 0 0 82vw; scroll-snap-align: center; scroll-snap-stop: always; }
}
@media (min-width: 600px) and (max-width: 1023.98px) {
  .jd-scroll-row .jd-card { flex: 0 0 46vw; }
}

/* ==========================================================================
   6. CARD COMPONENT (shared: homepage, archive, related)
   ========================================================================== */
.jd-card { position: relative; text-decoration: none; display: block; }
.jd-card__image-wrap {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--jd-radius);
  background: var(--jd-border-dark-2);
}
.jd-card__image-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 350ms ease;
}
.jd-card:hover .jd-card__image-wrap img,
.jd-card:focus-visible .jd-card__image-wrap img { transform: scale(1.06); }
.jd-card {
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.jd-card:hover, .jd-card:focus-visible {
  transform: scale(1.045);
  box-shadow: 0 22px 40px rgba(0,0,0,0.35);
}
.jd-card__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,11,0) 45%, rgba(10,10,11,0.85) 100%);
}
.jd-card__overlay { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; }
.jd-card__title { font-family: var(--jd-font-display); font-size: 18px; color: var(--jd-white); line-height: 1.25; }
.jd-card__excerpt { font-family: var(--jd-font-mono); font-size: 11.5px; color: var(--jd-amber-muted); margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jd-card__date-outside { font-family: var(--jd-font-mono); font-size: 11px; color: var(--jd-text-secondary-light); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 10px; }

/* ==========================================================================
   7. ARCHIVE / CATEGORY PAGES
   ========================================================================== */
.jd-archive-banner {
  position: relative; min-height: 420px; display: flex; align-items: flex-end;
  background: linear-gradient(180deg, var(--jd-brown-mid) 0%, var(--jd-near-black) 100%);
  background-size: cover; background-position: center; padding: 130px 0 48px; color: var(--jd-off-white);
}
.jd-archive-banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,11,0.2) 0%, rgba(10,10,11,0.9) 100%);
}
.jd-archive-banner__content { position: relative; z-index: 2; max-width: 760px; }
.jd-archive-banner__title { font-size: clamp(28px, 4vw, 42px); color: var(--jd-off-white); margin: 12px 0 0; }
.jd-archive-body { background: var(--jd-white); padding: 56px 0 80px; }
.jd-archive-heading { font-size: 30px; margin-bottom: 8px; }
.jd-archive-desc { color: var(--jd-text-secondary-light); max-width: 640px; margin-bottom: 40px; }
.jd-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 28px;
}
@media (max-width: 1023.98px) { .jd-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; } }
@media (max-width: 599.98px) { .jd-grid { grid-template-columns: 1fr; gap: 32px; } }

/* Empty state (no posts yet in a category) */
.jd-empty-state {
  text-align: center; padding: 70px 24px; border: 1px dashed var(--jd-border-light-1); border-radius: var(--jd-radius);
}
.jd-empty-state__title { font-size: 22px; margin-bottom: 8px; }
.jd-empty-state__text { color: var(--jd-text-secondary-light); max-width: 420px; margin: 0 auto 20px; }
.jd-empty-state a { font-family: var(--jd-font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--jd-amber-muted-2); border-bottom: 1px solid currentColor; }

.jd-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 56px; }
.jd-pagination a, .jd-pagination span {
  font-family: var(--jd-font-mono); font-size: 12.5px; padding: 10px 14px; border: 1px solid var(--jd-border-light-1); border-radius: var(--jd-radius-sm);
  color: var(--jd-text-secondary-light);
}
.jd-pagination .current { background: var(--jd-near-black); color: var(--jd-off-white); border-color: var(--jd-near-black); }
.jd-pagination a:hover { border-color: var(--jd-amber); color: var(--jd-amber-muted-2); }

/* ==========================================================================
   8. SINGLE ARTICLE
   ========================================================================== */
.jd-breadcrumb {
  background: var(--jd-white); padding: 18px 0; font-family: var(--jd-font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--jd-text-secondary-light-2);
  border-bottom: 1px solid var(--jd-border-light-2);
}
.jd-breadcrumb a { color: var(--jd-text-secondary-light-2); }
.jd-breadcrumb a:hover { color: var(--jd-amber-muted-2); }
.jd-breadcrumb .sep { margin: 0 8px; }

.jd-article-layout { position: relative; background: var(--jd-white); padding: 56px 0 0; }
.jd-article-inner { max-width: var(--jd-reading-col); margin: 0 auto; padding: 0 24px; position: relative; }

/* Sticky share rail */
.jd-share-rail {
  position: sticky; top: 140px; float: left; margin-left: -76px;
  display: flex; flex-direction: column; gap: 12px;
}
.jd-share-rail__btn {
  width: 42px; height: 42px; border-radius: 50%; background: var(--jd-near-black);
  display: flex; align-items: center; justify-content: center; color: var(--jd-amber);
  transition: transform var(--jd-transition), background var(--jd-transition);
  cursor: pointer; border: none;
}
.jd-share-rail__btn:hover { transform: scale(1.08); background: var(--jd-brown-dark); }
.jd-share-rail__btn svg { width: 18px; height: 18px; }
@media (max-width: 1279.98px) {
  .jd-share-rail { display: none; } /* replaced by bottom bar below */
}
.jd-share-bottom-bar {
  display: none;
}
@media (max-width: 1279.98px) {
  .jd-share-bottom-bar {
    display: flex; justify-content: center; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
    background: var(--jd-near-black); padding: 12px 16px;
    border-top: 1px solid var(--jd-border-dark-1);
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .jd-share-bottom-bar .jd-share-rail__btn { width: 40px; height: 40px; }
  body.single-post { padding-bottom: 68px; } /* keep bottom bar clear of content */
}

.jd-article-body {
  font-size: 18px; line-height: 1.75; color: var(--jd-text-on-light);
}
.jd-article-body p:first-of-type::first-letter {
  font-family: var(--jd-font-display); font-size: 76px; float: left; line-height: 0.8;
  padding: 8px 10px 0 0; color: var(--jd-amber); font-weight: 600;
}
.jd-article-body h2 { font-size: 28px; margin-top: 2.2em; }
.jd-article-body h3 { font-size: 22px; margin-top: 1.8em; }
.jd-article-body blockquote {
  border-left: 3px solid var(--jd-amber); margin: 2.4em 0; padding: 0.2em 0 0.2em 24px;
  font-family: var(--jd-font-display); font-style: italic; font-size: 24px; color: var(--jd-text-on-light);
}
.jd-article-body figure { margin: 2.2em 0; }
.jd-article-body figcaption {
  font-family: var(--jd-font-mono); font-size: 11.5px; color: var(--jd-text-secondary-light-2);
  margin-top: 10px; text-transform: uppercase; letter-spacing: 0.04em;
}
.jd-article-body img { border-radius: var(--jd-radius-sm); }

/* Wide/full-bleed image support (align-wide theme support) */
.jd-article-body .alignwide {
  width: 100%; max-width: var(--jd-wide-col);
  margin-left: 50%; transform: translateX(-50%);
}
.jd-article-body .alignfull {
  width: 100vw; margin-left: 50%; transform: translateX(-50%); max-width: none;
}
@media (max-width: 1023.98px) {
  .jd-article-body .alignwide, .jd-article-body .alignfull { width: 100%; margin-left: 0; transform: none; }
}

.jd-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 48px 0; }
.jd-tags a {
  font-family: var(--jd-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 8px 14px; border: 1px solid var(--jd-border-light-1); border-radius: 999px; color: var(--jd-text-secondary-light);
  transition: border-color var(--jd-transition), color var(--jd-transition);
}
.jd-tags a:hover { border-color: var(--jd-amber); color: var(--jd-amber-muted-2); }

/* v1.2 addition: styled FAQ/Q&A block for article bodies — replaces the
   default nested-bullet-list look with something matching the rest of the
   editorial design system. */
.jd-faq { margin: 3em 0; }
.jd-faq__item {
  border-top: 1px solid var(--jd-border-light-2);
  padding: 28px 0;
}
.jd-faq__item:last-child { border-bottom: 1px solid var(--jd-border-light-2); }
.jd-faq__question {
  font-family: var(--jd-font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--jd-text-on-light);
  margin: 0 0 10px;
  padding-left: 32px;
  position: relative;
}
.jd-faq__question::before {
  content: "Q";
  position: absolute;
  left: 0;
  top: -1px;
  font-family: var(--jd-font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--jd-amber);
  border: 1px solid var(--jd-amber);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.jd-faq__answer {
  font-size: 16px;
  line-height: 1.7;
  color: var(--jd-text-secondary-light);
  margin: 0;
  padding-left: 32px;
}
.jd-faq__answer em { color: var(--jd-text-on-light); font-style: italic; }
@media (max-width: 599.98px) {
  .jd-faq__question { font-size: 17px; }
}

.jd-author-card {
  display: flex; gap: 18px; align-items: center; padding: 32px 0; margin: 24px 0 8px;
  border-top: 1px solid var(--jd-border-light-2); border-bottom: 1px solid var(--jd-border-light-2);
}
.jd-author-card img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.jd-author-card__name { font-family: var(--jd-font-display); font-size: 17px; }
.jd-author-card__role { font-family: var(--jd-font-mono); font-size: 11px; text-transform: uppercase; color: var(--jd-amber-muted-2); letter-spacing: 0.06em; margin: 4px 0 8px; }
.jd-author-card__bio { font-size: 14.5px; color: var(--jd-text-secondary-light); }

.jd-related { background: var(--jd-off-white); padding: 64px 0 72px; }
.jd-related h3 { font-size: 22px; margin-bottom: 28px; }

/* Reading progress bar */
.jd-progress-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--jd-amber); z-index: 600;
  transition: width 60ms linear;
}

/* ==========================================================================
   9. COMMENTS (dark band)
   ========================================================================== */
.jd-comments-band { background: var(--jd-near-black); color: var(--jd-off-white); padding: 64px 0 80px; }
.jd-comments-band .jd-article-inner { max-width: var(--jd-reading-col); }
.jd-comments-band .comment-reply-title,
.jd-comments-band .comments-title { font-family: var(--jd-font-display); font-size: 24px; margin-bottom: 32px; }
.jd-comment-form textarea, .jd-comment-form input[type="text"], .jd-comment-form input[type="email"], .jd-comment-form input[type="url"] {
  width: 100%; background: var(--jd-brown-dark); border: 1px solid var(--jd-border-dark-2); border-radius: var(--jd-radius-sm);
  color: var(--jd-off-white); padding: 12px 14px; font-family: var(--jd-font-body); font-size: 14px; margin-bottom: 14px;
}
.jd-comment-form textarea { min-height: 130px; resize: vertical; }
.jd-comment-form .form-submit input[type="submit"] {
  background: var(--jd-amber); color: var(--jd-near-black); border: none; font-family: var(--jd-font-mono);
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; padding: 12px 26px; border-radius: 999px; cursor: pointer;
  transition: opacity var(--jd-transition);
}
.jd-comment-form .form-submit input[type="submit"]:hover { opacity: 0.85; }
.jd-comment-form p.honeypot-field { position: absolute; left: -9999px; }

.jd-comment-list { list-style: none; margin: 40px 0 0; padding: 0; }
.jd-comment-list .comment { display: flex; gap: 14px; padding: 20px 0; border-top: 1px solid var(--jd-border-dark-1); }
.jd-comment-list ul.children { list-style: none; margin: 0 0 0 26px; padding: 0; border-left: 1px solid var(--jd-border-dark-1); }
.jd-comment-list ul.children ul.children { margin-left: 20px; } /* cap visual nesting depth at 2 further levels */
.jd-comment-avatar-fallback {
  width: 40px; height: 40px; border-radius: 50%; background: var(--jd-amber); color: var(--jd-near-black);
  display: flex; align-items: center; justify-content: center; font-family: var(--jd-font-mono); font-weight: 600; flex-shrink: 0;
}
.jd-comment-meta__name { font-family: var(--jd-font-mono); font-size: 13px; color: var(--jd-off-white); }
.jd-comment-meta__date { font-family: var(--jd-font-mono); font-size: 10.5px; color: var(--jd-text-secondary-dark); margin-left: 10px; }
.jd-comment-content { font-size: 14.5px; color: var(--jd-text-secondary-dark); margin-top: 6px; }
.jd-comments-empty { font-family: var(--jd-font-mono); font-size: 13px; color: var(--jd-text-secondary-dark); padding: 20px 0; }

/* ==========================================================================
   10. ABOUT & CONTACT PAGE
   ========================================================================== */
.jd-about-masthead { background: var(--jd-near-black); color: var(--jd-off-white); padding: 160px 0 72px; }
.jd-about-masthead__title { font-size: clamp(30px, 4vw, 44px); margin: 14px 0 20px; }
.jd-about-masthead p { color: var(--jd-text-secondary-dark); max-width: 680px; font-size: 17px; }
.jd-founder { background: var(--jd-white); padding: 72px 0; border-bottom: 1px solid var(--jd-border-light-2); }
.jd-founder__inner { display: flex; gap: 40px; align-items: center; max-width: 820px; margin: 0 auto; }
.jd-founder img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.jd-founder__role { font-family: var(--jd-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--jd-amber-muted-2); margin: 6px 0 10px; }
@media (max-width: 599.98px) {
  .jd-founder__inner { flex-direction: column; text-align: center; }
}
.jd-contact { background: var(--jd-off-white); padding: 72px 0 88px; }
.jd-contact__inner { max-width: 620px; margin: 0 auto; }
.jd-contact h2 { font-size: 26px; margin-bottom: 24px; }

/* ==========================================================================
   11. FOOTER
   ========================================================================== */
.jd-footer { background: var(--jd-near-black); color: var(--jd-text-secondary-dark); padding: 64px 0 32px; }
/* v1.2 fix: footer widget area can receive an arbitrary number of widgets
   (e.g. the default WP Archives/Categories block widgets, added outside
   theme control), so the grid must flex to fit N columns instead of being
   hardcoded to 3 — previously this caused widgets to stack awkwardly in
   a single column and misalign against the other footer content. */
.jd-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--jd-border-dark-1);
}
@media (max-width: 767.98px) { .jd-footer__grid { grid-template-columns: 1fr; gap: 32px; } }
.jd-footer__widget h4,
.jd-footer__widget h2,
.jd-footer__widget h2.wp-block-heading {
  font-family: var(--jd-font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--jd-off-white);
  margin: 0 0 16px;
}
.jd-footer__nav a { display: block; font-size: 13.5px; padding: 6px 0; color: var(--jd-text-secondary-dark); }
.jd-footer__nav a:hover { color: var(--jd-amber); }

/* v1.2 fix: default WordPress block-widget output (Archives, Categories,
   Recent Posts, etc.) ships its own wp-block-* wrapper markup with no jd-
   classes attached, so it previously fell through to unstyled browser
   defaults inside the dark footer — oversized serif headings, default
   bullets, blue link color. Normalize it to match the rest of the footer. */
.jd-footer__widget .wp-block-group,
.jd-footer__widget .wp-block-group__inner-container {
  margin: 0;
}
.jd-footer__widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.jd-footer__widget li {
  padding: 6px 0;
  border-bottom: 1px solid var(--jd-border-dark-1);
}
.jd-footer__widget li:last-child { border-bottom: none; }
.jd-footer__widget a {
  font-family: var(--jd-font-body);
  font-size: 13.5px;
  color: var(--jd-text-secondary-dark);
  text-decoration: none;
}
.jd-footer__widget a:hover { color: var(--jd-amber); }
.jd-footer__widget p { font-size: 13.5px; margin: 0; }
.jd-footer__bottom { display: flex; justify-content: space-between; padding-top: 24px; font-family: var(--jd-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
@media (max-width: 599.98px) { .jd-footer__bottom { flex-direction: column; gap: 8px; } }

/* ==========================================================================
   12. 404
   ========================================================================== */
.jd-404 { background: var(--jd-near-black); color: var(--jd-off-white); min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 160px 24px 80px; }
.jd-404__code { font-family: var(--jd-font-mono); color: var(--jd-amber); letter-spacing: 0.1em; }
.jd-404__title { font-size: clamp(28px, 4vw, 42px); margin: 16px 0 20px; }
.jd-404 a { font-family: var(--jd-font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--jd-amber-muted); border-bottom: 1px solid currentColor; }

/* ==========================================================================
   13. LIGHTBOX
   ========================================================================== */
.jd-lightbox { position: fixed; inset: 0; background: rgba(10,10,11,0.94); z-index: 900; display: none; align-items: center; justify-content: center; padding: 24px; }
.jd-lightbox.is-open { display: flex; }
.jd-lightbox img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: var(--jd-radius-sm); }
.jd-lightbox__close { position: absolute; top: 24px; right: 24px; color: var(--jd-off-white); font-family: var(--jd-font-mono); font-size: 13px; cursor: pointer; background: none; border: none; }

/* About page hero memory-wall (rebuilt as native Elementor widgets 2026-08-28) */
.jd-memwall { position: relative; padding: 24px 0 8px; }
.jd-memwall__photos {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: nowrap;
}
.jd-memwall__frame {
  position: relative;
  background: #F2F0EC;
  padding: 10px;
  border-radius: 2px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}
.jd-memwall__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jd-memwall__frame--sm { width: 190px; height: 190px; }
.jd-memwall__frame--lg { width: 250px; height: 340px; }
.jd-memwall__frame--left { transform: rotate(-3deg); }
.jd-memwall__frame--right { transform: rotate(3deg); }
.jd-memwall__frame--center { transform: rotate(0deg); z-index: 2; }
.jd-memwall__title { text-align: center; margin-top: 56px; position: relative; z-index: 3; }
.jd-memwall__title h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(48px, 8vw, 88px);
  color: #F2F0EC;
  margin: 0;
  line-height: 1;
}
.jd-memwall__tagline {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 18px;
  color: #C9974C;
  margin: 12px 0 0;
}
.jd-memwall__closing { display: flex; justify-content: center; margin-top: 48px; }
.jd-memwall__frame--wide { width: 100%; max-width: 620px; height: 380px; transform: rotate(-1deg); }
@media (max-width: 680px) {
  .jd-memwall__photos { gap: 12px; }
  .jd-memwall__frame--sm { width: 90px; height: 90px; }
  .jd-memwall__frame--lg { width: 130px; height: 180px; }
  .jd-memwall__title { margin-top: 40px; }
  .jd-memwall__frame--wide { height: 220px; }
}


/* ==========================================================================
   MEMORY WALL \u2014 About page photo layout (jd-memwall)
   ========================================================================== */
.jd-memwall__photos { display: flex; justify-content: center; align-items: flex-end; gap: 24px; flex-wrap: nowrap; }
.jd-memwall__frame { position: relative; background: #F2F0EC; padding: 10px; border-radius: 2px; box-shadow: 0 12px 28px rgba(0,0,0,0.45); overflow: hidden; }
.jd-memwall__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jd-memwall__frame--sm { width: 190px; height: 190px; }
.jd-memwall__frame--lg { width: 250px; height: 340px; }
.jd-memwall__frame--left { transform: rotate(-3deg); }
.jd-memwall__frame--right { transform: rotate(3deg); }
.jd-memwall__frame--center { transform: rotate(0deg); z-index: 2; }
.jd-memwall__frame--wide { width: 100%; max-width: 620px; height: 380px; transform: rotate(-1deg); margin: 0 auto; }
.jd-memwall__title { text-align: center; padding-top: 56px; padding-bottom: 8px; }
.jd-memwall__title h1 { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 600; font-size: clamp(48px, 8vw, 88px); color: #F2F0EC; margin: 0; line-height: 1; }
.jd-memwall__tagline p { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 18px; color: #C9974C; text-align: center; margin: 12px 0 0; }
@media (max-width: 680px) {
  .jd-memwall__photos { gap: 12px; }
  .jd-memwall__frame--sm { width: 90px; height: 90px; }
  .jd-memwall__frame--lg { width: 130px; height: 180px; }
  .jd-memwall__title { padding-top: 40px; }
  .jd-memwall__frame--wide { height: 220px; }
}


/* ==========================================================================
   COVERFLOW CAROUSEL (jd-coverflow) \u2014 custom Swiper coverflow init
   ========================================================================== */
.jd-coverflow .swiper { padding: 30px 10px 50px; overflow: visible; }
.jd-coverflow .swiper-slide { width: 280px; height: 360px; }
.jd-coverflow .swiper-slide-inner { position: relative; width: 100%; height: 100%; border-radius: 4px; overflow: hidden; border: 1px solid #2E2B26; background: #0A0A0B; }
.jd-coverflow .swiper-slide-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 300ms ease; }
.jd-coverflow .swiper-slide:not(.swiper-slide-active) .swiper-slide-image { filter: brightness(0.55) blur(1px); }
.jd-coverflow .swiper-slide-active { z-index: 5; }
.jd-coverflow .swiper-slide-active .swiper-slide-inner { box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
.jd-coverflow .swiper-slide-inner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.18) 45%, rgba(255,255,255,0.04) 55%, rgba(255,255,255,0) 70%); mix-blend-mode: overlay; pointer-events: none; }
.jd-coverflow .swiper-slide-inner::before { content: ''; position: absolute; inset: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); pointer-events: none; z-index: 2; }
.jd-coverflow .elementor-swiper-button { color: #C9974C; }
.jd-coverflow .swiper-pagination-bullet { background: #2E2B26; opacity: 1; }
.jd-coverflow .swiper-pagination-bullet-active { background: #C9974C; }
@media (max-width: 680px) {
  .jd-coverflow .swiper-slide { width: 200px; height: 260px; }
}


/* ==========================================================================
   COVERFLOW CAROUSEL \u2014 responsive fixes (tablet/mobile clipping + sizing)
   ========================================================================== */
@media (max-width: 991px) {
  .jd-coverflow .swiper { overflow: hidden; padding: 24px 10px 44px; }
  .jd-coverflow .swiper-slide { width: 220px; height: 300px; }
}
@media (max-width: 680px) {
  .jd-coverflow .swiper { overflow: hidden; padding: 16px 8px 40px; }
  .jd-coverflow .swiper-slide { width: 170px; height: 230px; }
}