@charset "UTF-8";
/* ==========================================================================
   droupadimurmu.com — Responsive layer
   Breakpoints: 1280 / 1140 / 1080 (nav) / 900 / 720 / 560 / 400
   ========================================================================== */

/* ---------- Large desktop tuning ---------- */
@media (max-width: 1280px) {
  .footer-top { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-contact { grid-column: 1 / -1; border-top: 1px solid rgba(214,186,140,.16); padding-top: var(--space-s); }
}

@media (max-width: 1180px) {
  .nav-list { gap: .55rem; }
  .nav-link { font-size: .745rem; letter-spacing: .08em; }
}

/* ---------- Mobile / tablet navigation ---------- */
@media (max-width: 1080px) {
  :root { --header-h: 68px; }

  .nav-toggle { display: inline-flex; }

  /* A backdrop-filter makes the header a containing block for fixed-position
     descendants, which would clip the off-canvas panel to the header box.
     The header is effectively opaque at these widths, so drop the filter. */
  .site-header {
    z-index: 960;
    background: rgba(248, 243, 233, .98);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav-backdrop { z-index: 930; }

  /* The panel opens below the header row so the brand and the close control
     stay visible and tappable for as long as the menu is open. */
  .nav {
    position: fixed;
    top: var(--header-h);
    right: 0;
    bottom: 0;
    left: auto;
    width: min(430px, 90vw);
    z-index: 940;
    display: block;
    padding: 1.5rem clamp(1.25rem, 4vw, 2rem) 3.5rem;
    background: var(--ivory-hi);
    border-left: 1px solid rgba(124, 96, 52, .24);
    box-shadow: -24px 0 70px rgba(23, 13, 16, .22);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .45s var(--ease-out), visibility .45s;
  }
  body.nav-open .nav { transform: translateX(0); visibility: visible; }
  body.nav-open { overflow: hidden; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li { width: 100%; }

  .nav-link {
    width: 100%;
    justify-content: space-between;
    padding: 1.05rem .25rem;
    font-size: .82rem;
    letter-spacing: .13em;
    border-bottom: 1px solid rgba(124, 96, 52, .18);
    min-height: 48px;
  }
  .nav-link::after { display: none; }
  .nav-link.is-current { color: var(--wine-700); }
  .nav-caret { width: 8px; height: 8px; }

  .nav-panel {
    position: static;
    display: none;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: .5rem 0 1rem .35rem;
    margin: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .nav-panel::before { display: none; }
  .nav-item.is-open > .nav-panel { display: block; }
  .nav-panel a {
    padding: .8rem .9rem;
    border-left: 1px solid rgba(124, 96, 52, .28);
    min-height: 46px;
  }
  .nav-panel a:hover, .nav-panel a:focus-visible, .nav-panel a.is-current { padding-left: 1.15rem; }
  .nav-panel a small { font-size: .74rem; }
}

/* ---------- Desktop-only: hide backdrop ---------- */
@media (min-width: 1081px) {
  .nav-backdrop { display: none; }
  .nav { visibility: visible !important; transform: none !important; }
}

/* ---------- Wide tablet ---------- */
@media (max-width: 1000px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 1rem + 4vw, 3rem);
    min-height: 0;
  }
  .hero-copy { max-width: none; order: 1; }
  .hero-portrait { order: 2; max-width: 460px; }
  .hero-portrait::after { display: none; }

  .page-hero--split .page-hero__grid { grid-template-columns: 1fr; gap: 2.25rem; }

  .split, .split--wide-left, .split--wide-right { grid-template-columns: 1fr; gap: 2.25rem; }
  .split__media--first { order: 0; }
  .split .fig { max-width: 620px; }

  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .gallery-grid { column-count: 3; }

  .footer-top { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-contact { grid-column: 1 / -1; }
}

/* ---------- Tablet portrait ---------- */
@media (max-width: 900px) {
  .chapter { grid-template-columns: 1fr; gap: 1.25rem; }
  .chapter__index { padding-top: .4rem; display: inline-block; }

  .entry { grid-template-columns: 1fr; gap: .85rem; }
  .entry__date { padding-top: 0; }
  .entry__place { display: inline; margin-top: 0; margin-left: .6rem; }

  .fact-list li { grid-template-columns: 1fr; gap: .35rem; }
  .fact-list dt, .fact-list .k { padding-top: 0; }

  .node-tree__row { grid-template-columns: 1fr; gap: 2.25rem; }
  .node-tree__row::before { display: none; }
  .node-tree__row > *::before { top: -1.6rem; height: 1.6rem; }
  .node-tree__row > *:first-child::before { top: -2.25rem; height: 2.25rem; }

  .lightbox__img { max-height: calc(100vh - 14rem); }
}

/* ---------- Small tablet / large phone ---------- */
@media (max-width: 720px) {
  :root { --lh-body: 1.72; }

  .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .grid--2 { grid-template-columns: 1fr; }

  .hero-meta { gap: 1.35rem 2rem; }
  .hero-meta div { flex: 1 1 40%; }

  .stat-row { grid-template-columns: 1fr; }

  .brand-mark { width: 34px; height: 34px; }
  .brand-name { font-size: 1rem; }
  .brand-role { font-size: .58rem; letter-spacing: .18em; }

  .timeline > li { padding-left: 1.5rem; }

  .flow__step { grid-template-columns: 2.1rem minmax(0, 1fr); gap: .85rem; }

  .footer-top { grid-template-columns: 1fr; gap: 2.25rem; padding-bottom: var(--space-m); }
  .footer-contact { border-top: 0; padding-top: 0; }
  .footer-bottom { flex-direction: column; align-items: flex-start; text-align: left; }
  .footer-credit { text-align: left; }

  .gallery-grid { column-count: 2; }

  .lightbox__btn { width: 46px; height: 46px; }
  .lightbox__prev { left: .5rem; }
  .lightbox__next { right: .5rem; }
  .lightbox__img { max-height: calc(100vh - 15rem); }

  .pullquote { padding-left: 1.15rem; }
  .article-ref { margin-left: 0; margin-top: .4rem; display: inline-block; }
}

/* ---------- Phone ---------- */
@media (max-width: 560px) {
  :root { --header-h: 62px; }

  .brand-text .brand-role { display: none; }
  .brand-name { font-size: 1.02rem; }

  .hero-eyebrow { font-size: .66rem; letter-spacing: .2em; gap: .6rem; }
  .hero-eyebrow::before { width: 1.5rem; }
  .hero-actions .btn { width: 100%; justify-content: center; }

  .eyebrow { letter-spacing: .2em; }
  .eyebrow::before { width: 1.5rem; }

  .btn { padding: .9rem 1.4rem; font-size: .78rem; letter-spacing: .12em; }

  .gallery-grid { column-count: 1; }

  .filters { gap: .4rem; }
  .filter-btn { padding: .5rem .8rem; font-size: .68rem; letter-spacing: .09em; }

  .contact-card { grid-template-columns: 1fr; }

  .rail__item { flex-basis: min(280px, 84vw); }

  .lightbox { padding: .75rem; }
  .lightbox__img { max-height: calc(100vh - 13rem); }
  .lightbox__close { top: .6rem; right: .6rem; }

  .entry__place { display: block; margin-left: 0; margin-top: .35rem; }

  .fig figcaption { font-size: .76rem; }
}

/* ---------- Very small phone ---------- */
@media (max-width: 400px) {
  :root { --gutter: 1.1rem; }
  .gate__panel { padding: 1.85rem 1.35rem; }
  .gate__title { font-size: .92rem; letter-spacing: .22em; }
  .nav { width: 100%; }
  .social { flex-wrap: wrap; }
}

/* ---------- Short viewports (landscape phones) ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  .gate { padding-block: 2rem; }
  .hero-grid { min-height: 0; }
  .lightbox__img { max-height: calc(100vh - 8rem); }
  .lightbox__cap { display: none; }
}

/* ---------- Large screens: keep measure comfortable ---------- */
@media (min-width: 1600px) {
  :root { --maxw: 1400px; }
}