/* ==========================================================================
   МИР ДИНОЗАВРОВ — прототип
   Стиль: дорогая иллюстрированная энциклопедия естественной истории.
   Пергамент + глубокий оливково-лесной + бронза/золото. Серифные заголовки.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --parchment:   #efe8d7;
  --parchment-2: #e7dec9;
  --card:        #f7f1e5;
  --card-2:      #f2ead9;

  --ink:      #211b11;
  --ink-soft: #574d3b;
  --ink-mute: #8a7e66;

  --forest:   #4e5a33;
  --forest-d: #3a4426;
  --forest-l: #6b7645;
  --bronze:   #b28a45;
  --bronze-d: #8e6c30;
  --bronze-l: #cba55f;
  --marine:   #3b5a62;
  --rust:     #9a5734;

  --night:    #16120a;
  --night-2:  #221a0f;
  --night-3:  #2c2413;

  --line:      rgba(33,27,17,.14);
  --line-soft: rgba(33,27,17,.08);
  --gold-line: rgba(178,138,69,.45);

  --font-display: "Playfair Display", Georgia, serif;
  --font-body:    "Spectral", Georgia, serif;
  --font-ui:      "Manrope", system-ui, sans-serif;

  --wrap: 1200px;
  --radius: 14px;
  --radius-s: 10px;
  --shadow-s: 0 1px 2px rgba(33,27,17,.06), 0 2px 8px rgba(33,27,17,.05);
  --shadow-m: 0 6px 22px rgba(33,27,17,.10), 0 2px 6px rgba(33,27,17,.06);
  --shadow-l: 0 18px 50px rgba(20,15,8,.22);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--parchment);
  background-image:
    radial-gradient(1200px 600px at 15% -5%, rgba(178,138,69,.10), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(78,90,51,.10), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  line-height: 1.7;
  font-size: 18px;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
[x-cloak] { display: none !important; }

/* ---------- Layout ---------- */
.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.wrap-wide { width: min(100% - 28px, 1360px); margin-inline: auto; }
.section { padding: clamp(48px, 7vw, 92px) 0; }
.section-tight { padding: clamp(34px, 5vw, 60px) 0; }

/* ---------- Typography ---------- */
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.08; color: var(--ink); letter-spacing: -.01em; }
.eyebrow {
  font-family: var(--font-ui); font-weight: 700; font-size: .74rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--bronze-d);
  display: inline-flex; align-items: center; gap: .6em;
}
.eyebrow::before { content:""; width: 26px; height: 2px; background: var(--bronze); display:inline-block; }
.section-head { display:flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(24px,3vw,40px); }
.section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.7rem); }
.section-head .more { font-family: var(--font-ui); font-weight: 600; font-size: .85rem; color: var(--forest-d); white-space: nowrap; display:inline-flex; align-items:center; gap:.4em; transition: gap .2s var(--ease); }
.section-head .more:hover { gap: .8em; color: var(--bronze-d); }
.lead { font-size: clamp(1.05rem,1.6vw,1.28rem); color: var(--ink-soft); }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-ui); font-weight: 700; font-size: .82rem;
  letter-spacing: .12em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .7em;
  padding: 15px 26px; border-radius: 3px; border: 1.5px solid transparent;
  transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), color .2s;
}
.btn svg { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn-primary { background: var(--forest); color: #f4efe2; box-shadow: var(--shadow-m); }
.btn-primary:hover { background: var(--forest-d); transform: translateY(-2px); box-shadow: var(--shadow-l); }
.btn-ghost { border-color: rgba(244,239,226,.4); color: #f4efe2; }
.btn-ghost:hover { border-color: var(--bronze); background: rgba(178,138,69,.14); }
.btn-bronze { background: var(--bronze); color: var(--night); box-shadow: var(--shadow-m); }
.btn-bronze:hover { background: var(--bronze-l); transform: translateY(-2px); }
.btn-outline { border-color: var(--line); color: var(--ink); background: var(--card); }
.btn-outline:hover { border-color: var(--bronze); color: var(--bronze-d); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: 60; background: var(--night); color: #ece4d2; border-bottom: 1px solid rgba(178,138,69,.28); }
.site-header::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background: linear-gradient(90deg, transparent, var(--bronze), transparent); opacity:.6; }
.header-inner { display:flex; align-items:center; gap: 22px; min-height: 74px; }

.brand { display:flex; align-items:center; gap: 13px; margin-right: auto; }
.brand-badge { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; border: 2px solid var(--bronze); box-shadow: 0 0 0 3px rgba(178,138,69,.14); flex: none; background:#222; }
.brand-badge img { width: 148%; height: 148%; object-fit: cover; object-position: 32% 30%; }
.brand-name { font-family: var(--font-display); font-weight: 800; font-size: 1.28rem; letter-spacing: .02em; line-height: 1; color: #f2ead6; }
.brand-tag { font-family: var(--font-ui); font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; color: var(--bronze-l); margin-top: 5px; white-space: nowrap; }
.brand > span { display: flex; flex-direction: column; }

.main-nav { display:flex; align-items:center; gap: 2px; }
.main-nav a, .nav-item > button {
  font-family: var(--font-ui); font-weight: 600; font-size: .82rem; color: #d8cfba;
  padding: 9px 13px; border-radius: 5px; background: none; border: none;
  display:inline-flex; align-items:center; gap: 5px; transition: color .2s, background .2s;
  position: relative;
}
.main-nav a::after {
  content:""; position:absolute; left:13px; right:13px; bottom:4px; height:2px; background: var(--bronze);
  transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease);
}
.main-nav a:hover, .nav-item > button:hover { color: #fbf6ea; }
.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
.main-nav a.active, .nav-item > button.active { color: var(--bronze-l); }
.nav-drop a.active { color: var(--bronze-l); }

.nav-item { position: relative; }
.nav-item > button svg { width: 12px; height: 12px; opacity: .7; }
.nav-drop {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 250px;
  background: #1e180d; border: 1px solid rgba(178,138,69,.3); border-radius: 10px;
  padding: 8px; box-shadow: var(--shadow-l); display:flex; flex-direction: column;
}
.nav-drop a { padding: 10px 14px; border-radius: 7px; font-size: .84rem; color:#d8cfba; }
.nav-drop a::after { display:none; }
.nav-drop a:hover { background: rgba(178,138,69,.14); color: #fbf6ea; }

.header-tools { display:flex; align-items:center; gap: 6px; }
.icon-btn { width: 42px; height: 42px; border-radius: 50%; display:grid; place-items:center; background: transparent; border: 1px solid transparent; color:#e4dbc6; transition: background .2s, border-color .2s; }
.icon-btn:hover { background: rgba(178,138,69,.14); border-color: rgba(178,138,69,.3); }
.icon-btn svg { width: 20px; height: 20px; }
.burger { display:none; }

/* mobile drawer */
.drawer-back { position: fixed; inset: 0; background: rgba(10,7,3,.6); backdrop-filter: blur(3px); z-index: 90; }
.drawer { position: fixed; top:0; right:0; bottom:0; width: min(88vw, 380px); background: var(--night); color:#ece4d2; z-index: 95; padding: 22px; overflow-y:auto; border-left: 1px solid rgba(178,138,69,.3); box-shadow: var(--shadow-l); }
.drawer-head { display:flex; align-items:center; justify-content: space-between; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid rgba(178,138,69,.2); }
.drawer nav { display:flex; flex-direction: column; gap: 2px; }
.drawer nav a { font-family: var(--font-ui); font-weight:600; padding: 13px 12px; border-radius: 8px; color:#d8cfba; border-bottom: 1px solid rgba(255,255,255,.04); }
.drawer nav a:hover { background: rgba(178,138,69,.12); color:#fff; }
.drawer .grp-label { font-family: var(--font-ui); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color: var(--bronze-l); margin: 16px 12px 4px; }

/* ==========================================================================
   HERO (home)
   ========================================================================== */
.hero { position: relative; min-height: min(86vh, 760px); display:flex; align-items: center; overflow: hidden; color: #f5efe1; isolation: isolate; }
.hero-slide { position:absolute; inset:0; opacity:0; transition: opacity 1.1s var(--ease), transform 7s linear; transform: scale(1.06); }
.hero-slide.on { opacity:1; transform: scale(1.12); }
.hero-slide img { width:100%; height:100%; object-fit: cover; }
.hero::before { content:""; position:absolute; inset:0; z-index:1; background:
  linear-gradient(90deg, rgba(12,9,4,.86) 0%, rgba(12,9,4,.55) 45%, rgba(12,9,4,.18) 100%),
  linear-gradient(0deg, rgba(12,9,4,.7), transparent 55%); }
.hero .wrap { position: relative; z-index: 2; }
.hero-inner { max-width: 640px; padding: 40px 0; }
.hero h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1.02; text-shadow: 0 2px 30px rgba(0,0,0,.4); }
.hero h1 em { font-style: italic; color: var(--bronze-l); }
.hero p.sub { font-size: clamp(1.05rem,2vw,1.3rem); color: #e4dcc9; margin-top: 22px; max-width: 520px; }
.hero-cta { display:flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-note {
  margin-top: 34px; display:flex; align-items:center; gap: 14px; max-width: 430px;
  background: rgba(23,18,10,.5); border: 1px solid rgba(178,138,69,.35); backdrop-filter: blur(6px);
  border-radius: 12px; padding: 14px 18px;
}
.hero-note .leaf { width: 34px; height:34px; color: var(--bronze-l); flex:none; }
.hero-note b { font-family: var(--font-ui); font-size: .84rem; letter-spacing:.02em; color:#f3ecdb; display:block; }
.hero-note span { font-size: .82rem; color:#cfc6b1; }
.hero-dots { position:absolute; z-index:3; bottom: 30px; left: 50%; transform: translateX(-50%); display:flex; gap:10px; }
.hero-dots button { width: 30px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.35); border:none; transition: background .3s, width .3s; }
.hero-dots button.on { background: var(--bronze); width: 46px; }

/* ==========================================================================
   SECTION CARDS
   ========================================================================== */
.cards-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(270px,1fr)); gap: 20px; }
.card-sec {
  position: relative; background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-s); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  display:flex; flex-direction: column;
}
.card-sec:hover { transform: translateY(-5px); box-shadow: var(--shadow-l); border-color: var(--gold-line); }
.card-sec-media { aspect-ratio: 16/10; overflow:hidden; position: relative; }
.card-sec-media img { width:100%; height:100%; object-fit: cover; transition: transform .6s var(--ease); filter: saturate(1.02); }
.card-sec:hover .card-sec-media img { transform: scale(1.07); }
.card-sec-media::after { content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(20,15,8,.35), transparent 55%); }
.card-badge {
  position:absolute; left: 16px; bottom: -22px; width: 52px; height: 52px; border-radius: 50%;
  background: var(--forest); color: #f2ead6; display:grid; place-items:center; z-index:2;
  border: 3px solid var(--card); box-shadow: var(--shadow-m);
}
.card-badge svg { width: 26px; height: 26px; }
.card-sec-body { padding: 30px 22px 22px; flex: 1; display:flex; flex-direction: column; }
.card-sec-body h3 { font-size: 1.24rem; margin-bottom: 5px; }
.card-sec-body .sub { font-family: var(--font-ui); font-size: .8rem; color: var(--ink-mute); letter-spacing:.02em; }
.card-sec-arrow { margin-top: auto; padding-top: 16px; font-family: var(--font-ui); font-weight:600; font-size:.8rem; color: var(--bronze-d); display:inline-flex; align-items:center; gap:.4em; transition: gap .2s var(--ease); }
/* inline icon sizing (outside .btn) */
.card-sec-arrow svg, .section-head .more svg, .card-sec-body .card-sec-arrow svg { width: 16px; height: 16px; }
.article-meta svg { width: 15px; height: 15px; }
.crumbs svg { width: 14px; height: 14px; }
.card-sec:hover .card-sec-arrow { gap: .8em; }

/* alt band background */
.band { background:
  linear-gradient(180deg, rgba(78,90,51,.05), rgba(78,90,51,.02)),
  var(--parchment-2);
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}

/* ==========================================================================
   TIMELINE (mezozoic)
   ========================================================================== */
.timeline { display:grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.tl-card { position: relative; overflow:hidden; border-radius: var(--radius); min-height: 180px; padding: 24px; color:#f3ecda; display:flex; flex-direction: column; justify-content: flex-end; box-shadow: var(--shadow-m); transition: transform .3s var(--ease), box-shadow .3s var(--ease); border: 1px solid rgba(0,0,0,.1); }
.tl-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-l); }
.tl-card img { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; z-index:0; opacity:.42; }
.tl-card::before { content:""; position:absolute; inset:0; z-index:1; }
.tone-tri::before { background: linear-gradient(180deg, rgba(122,90,46,.55), rgba(60,42,20,.9)); }
.tone-jur::before { background: linear-gradient(180deg, rgba(58,84,92,.5), rgba(24,44,50,.9)); }
.tone-cre::before { background: linear-gradient(180deg, rgba(122,104,40,.5), rgba(58,48,16,.9)); }
.tl-card > * { position: relative; z-index:2; }
.tl-card .era { font-family: var(--font-ui); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color: var(--bronze-l); }
.tl-card h3 { font-size: 1.5rem; margin: 6px 0 4px; color:#fff; }
.tl-card .span { font-family: var(--font-ui); font-size: .84rem; color:#e6ddc8; }
.tl-card .note { font-size:.9rem; color:#d9d0bb; margin-top: 8px; }

/* ==========================================================================
   HOME: latest + discoveries
   ========================================================================== */
.home-two { display:grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.mini-list { display:flex; flex-direction: column; }
.mini {
  display:flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); align-items:center;
  transition: transform .2s var(--ease);
}
.mini:hover { transform: translateX(4px); }
.mini:last-child { border-bottom: none; }
.mini-thumb { width: 92px; height: 68px; border-radius: 8px; overflow:hidden; flex:none; box-shadow: var(--shadow-s); background: var(--card-2); }
.mini-thumb img { width:100%; height:100%; object-fit: cover; }
.mini .eb { font-family: var(--font-ui); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color: var(--bronze-d); }
.mini h4 { font-family: var(--font-display); font-weight:700; font-size: 1.08rem; line-height:1.2; margin: 3px 0; }
.mini .meta { font-family: var(--font-ui); font-size:.76rem; color: var(--ink-mute); }

.feature-card { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-s); }
.feature-card .media { aspect-ratio: 16/9; overflow:hidden; }
.feature-card .media img { width:100%; height:100%; object-fit: cover; transition: transform .6s var(--ease); }
.feature-card:hover .media img { transform: scale(1.05); }
.feature-card .fc-body { padding: 24px; }
.feature-card h3 { font-size: 1.4rem; margin: 8px 0 10px; }
.feature-card p { color: var(--ink-soft); font-size: .98rem; }

/* ==========================================================================
   TELEGRAM CTA
   ========================================================================== */
.tg-cta { position: relative; overflow:hidden; border-radius: var(--radius); background: var(--night-2); color:#f2ead6; padding: clamp(30px,5vw,52px); display:flex; align-items:center; gap: 30px; flex-wrap: wrap; box-shadow: var(--shadow-l); border: 1px solid rgba(178,138,69,.3); }
.tg-cta::before { content:""; position:absolute; right:-60px; top:-60px; width: 320px; height:320px; background: radial-gradient(circle, rgba(42,157,244,.18), transparent 70%); }
.tg-cta .tg-ico { width: 66px; height:66px; border-radius: 50%; background: linear-gradient(135deg,#2aabee,#229ed9); display:grid; place-items:center; flex:none; box-shadow: var(--shadow-m); }
.tg-cta .tg-ico svg { width: 34px; height:34px; color:#fff; }
.tg-cta .tg-txt { flex: 1; min-width: 240px; }
.tg-cta .tg-txt .eyebrow { color: var(--bronze-l); }
.tg-cta h3 { color:#fff; font-size: clamp(1.3rem,2.6vw,1.8rem); margin: 6px 0; }
.tg-cta p { color:#d6cdb8; font-size: .95rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--night); color:#c7bda6; padding: clamp(48px,6vw,72px) 0 30px; border-top: 3px solid var(--bronze-d); position: relative; }
.footer-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand .brand-name { color:#f2ead6; }
.footer-brand p { color:#a89d84; font-size:.92rem; margin-top: 14px; max-width: 320px; }
.footer-col h4 { font-family: var(--font-ui); font-weight:700; font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color: var(--bronze-l); margin-bottom: 16px; }
.footer-col a { display:block; padding: 6px 0; font-size:.92rem; color:#b7ac93; transition: color .2s, padding-left .2s; }
.footer-col a:hover { color:#f2ead6; padding-left: 5px; }
.footer-bottom { margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-bottom .enc { font-family: var(--font-display); font-style: italic; color:#8f846c; font-size: 1rem; }
.socials { display:flex; gap: 10px; }
.socials a { width: 40px; height:40px; border-radius: 50%; border: 1px solid rgba(178,138,69,.3); display:grid; place-items:center; color:#c7bda6; transition: background .2s, color .2s, transform .2s; }
.socials a:hover { background: var(--bronze); color: var(--night); transform: translateY(-3px); }
.socials svg { width: 18px; height:18px; }

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */
.crumbs { font-family: var(--font-ui); font-size:.8rem; color: var(--ink-mute); display:flex; flex-wrap:wrap; gap: 8px; align-items:center; padding: 20px 0; }
.crumbs a:hover { color: var(--bronze-d); }
.crumbs .sep { opacity:.5; }
.crumbs [aria-current] { color: var(--ink-soft); }

/* ==========================================================================
   ARTICLE
   ========================================================================== */
.article-hero { position: relative; }
.article-head { max-width: 820px; margin: 0 auto; text-align: center; padding: 8px 0 34px; }
.article-head h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); margin: 14px 0; }
.article-meta { font-family: var(--font-ui); font-size:.82rem; color: var(--ink-mute); display:flex; gap: 18px; justify-content:center; flex-wrap:wrap; }
.article-meta span { display:inline-flex; align-items:center; gap:.4em; }
.article-figure { max-width: 1000px; margin: 0 auto clamp(30px,4vw,52px); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-l); border: 1px solid var(--line); position: relative; }
.article-figure img { width:100%; max-height: 560px; object-fit: cover; }

.prose { max-width: 760px; margin: 0 auto; font-size: 1.14rem; line-height: 1.82; color: #2c2416; }
.prose > p:first-of-type::first-letter {
  font-family: var(--font-display); font-weight: 800; float: left; font-size: 4.1rem; line-height: .82;
  padding: 6px 14px 0 0; color: var(--forest);
}
.prose h2 { font-size: clamp(1.5rem,2.8vw,2rem); margin: 2em 0 .6em; padding-bottom: .3em; border-bottom: 1px solid var(--gold-line); }
.prose h3 { font-size: 1.3rem; margin: 1.6em 0 .5em; color: var(--forest-d); }
.prose h4 { font-family: var(--font-ui); font-weight:700; font-size: 1.02rem; letter-spacing:.02em; margin: 1.4em 0 .4em; color: var(--bronze-d); }
.prose p { margin: 0 0 1.1em; }
.prose a { color: var(--bronze-d); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold-line); }
.prose a:hover { color: var(--forest-d); }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.prose li { margin: .4em 0; }
.prose ul li::marker { color: var(--bronze); }
.prose strong { color: var(--ink); }
.prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--bronze); font-style: italic; color: var(--ink-soft); font-size: 1.15rem; }
.prose hr { border: none; height: 1px; background: var(--line); margin: 2.4em 0; }
.prose .a-fig { margin: 2em 0; border-radius: var(--radius-s); overflow: hidden; box-shadow: var(--shadow-m); border: 1px solid var(--line); }
.prose .a-fig img { width: 100%; }

.article-body-wrap { padding-bottom: clamp(40px,6vw,80px); }

/* related */
.related-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 20px; }
.rel-card { background: var(--card); border:1px solid var(--line-soft); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-s); transition: transform .3s var(--ease), box-shadow .3s; }
.rel-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-l); }
.rel-card .media { aspect-ratio: 16/10; overflow:hidden; }
.rel-card .media img { width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.rel-card:hover .media img { transform: scale(1.06); }
.rel-card .b { padding: 18px; }
.rel-card .eb { font-family: var(--font-ui); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color: var(--bronze-d); }
.rel-card h4 { font-family: var(--font-display); font-size: 1.12rem; margin: 5px 0; line-height:1.2; }

/* ==========================================================================
   LISTING
   ========================================================================== */
.listing-hero { position: relative; overflow:hidden; color:#f3ecda; padding: clamp(48px,8vw,110px) 0; isolation:isolate; }
.listing-hero img.bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.listing-hero::before { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(90deg, rgba(12,9,4,.85), rgba(12,9,4,.5)); }
.listing-hero h1 { font-size: clamp(2rem,5vw,3.6rem); color:#fff; max-width: 720px; }
.listing-hero .lead { color:#e2d9c5; max-width: 620px; margin-top: 16px; }

.listing-empty { text-align:center; max-width: 560px; margin: 0 auto; padding: 40px 0; }
.listing-empty .ico { width: 84px; height:84px; border-radius:50%; background: var(--card); border:1px solid var(--line); display:grid; place-items:center; margin: 0 auto 20px; color: var(--bronze-d); box-shadow: var(--shadow-s); }
.listing-empty .ico svg { width: 40px; height:40px; }

/* ==========================================================================
   SCROLL TO TOP
   ========================================================================== */
.to-top { position: fixed; right: 24px; bottom: 24px; z-index: 70; width: 52px; height: 52px; border-radius: 50%; background: var(--forest); color:#f3ecda; border: 1.5px solid var(--bronze); display:grid; place-items:center; box-shadow: var(--shadow-l); opacity:0; transform: translateY(14px) scale(.9); pointer-events:none; transition: opacity .3s var(--ease), transform .3s var(--ease), background .2s; }
.to-top.show { opacity:1; transform: none; pointer-events:auto; }
.to-top:hover { background: var(--forest-d); transform: translateY(-3px); }
.to-top svg { width: 22px; height:22px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .main-nav { display: none; }
  .burger { display: grid; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  body { font-size: 17px; }
  .home-two { grid-template-columns: 1fr; gap: 30px; }
  .timeline { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 560px) {
  .wrap { width: min(100% - 28px, var(--wrap)); }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .hero-cta .btn { flex: 1 1 auto; justify-content:center; }
  .brand-tag { display:none; }
  .prose { font-size: 1.06rem; }
  .to-top { right: 16px; bottom: 16px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto; }
  .hero-slide { transform: none !important; }
}

/* staggered reveal on load */
.reveal { opacity:0; transform: translateY(22px); }
.reveal.in { opacity:1; transform:none; transition: opacity .7s var(--ease), transform .7s var(--ease); }