/* ---------- category hero ---------- */
.chero{padding-top:34px;position:relative}
.crumb{display:flex;align-items:center;gap:10px;font-family:var(--fh);font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--dim)}
.crumb a:hover{color:var(--or2)}
.crumb i{width:6px;height:6px;background:var(--or);transform:rotate(45deg)}
.ctitle{position:relative;margin:18px 0 10px;line-height:.95}
.ctitle h1{position:relative;z-index:1;font-family:var(--fh);font-weight:800;font-size:clamp(20px,3.7vw,56px);letter-spacing:-.035em;text-transform:uppercase}
.ctitle .ghost{position:absolute;left:.06em;top:.06em;z-index:0;font-family:var(--fh);font-weight:800;font-size:clamp(20px,3.7vw,56px);letter-spacing:-.035em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px rgba(255,106,31,.55);pointer-events:none;white-space:nowrap}
.cdesc{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:8px}
.cdesc p{font-size:17px;color:var(--muted);max-width:52ch}
.cmeta{display:flex;gap:10px;flex-wrap:wrap}
.pill{font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:.08em;padding:8px 13px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.pill b{color:var(--or2)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;padding-bottom:6px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
@media (min-width:1241px){.chips{display:none}} /* header nav shows the categories above 1240 px */
.chips a{flex:none;font-family:var(--fh);font-size:11px;font-weight:600;letter-spacing:.06em;padding:9px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--muted);transition:all .2s}
.chips a:hover{color:var(--ink);border-color:var(--or)}
.chips a.on{background:var(--or);border-color:var(--or);color:#120800}

/* ---------- lead ---------- */
.clead{display:grid;grid-template-columns:2.1fr 1fr;gap:28px;align-items:stretch}
.feat{position:relative;display:block;border-radius:20px;overflow:hidden;min-height:480px;background:#141416;box-shadow:0 30px 90px rgba(204,80,20,.17),0 0 0 1px rgba(204,95,35,.15)}
.feat img{position:absolute;inset:0;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.feat:hover img{transform:scale(1.04)}
.feat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(42,15,3,.6) 62%,rgba(14,6,2,.96))}
.feat .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:32px 34px 34px}
.feat .cap .tag{margin:0 0 12px;background:var(--or);color:#120800;padding:6px 10px;border-radius:6px}
.feat h2{font-family:var(--fh);font-weight:700;font-size:clamp(20px,2.4vw,34px);line-height:1.18;letter-spacing:-.01em;max-width:30ch;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.feat:hover h2{color:#fff}
.lside{display:flex;flex-direction:column;justify-content:space-between;gap:6px}
.lside .row{grid-template-columns:150px 1fr;flex:1}
.lside .row .media{aspect-ratio:4/3}

/* ---------- grid ---------- */
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 24px}
.cgrid .card.big{grid-column:span 2}
.cgrid .card.big .media{aspect-ratio:16/8.2}
.cgrid .card.big h3{font-family:var(--fh);font-size:22px;line-height:1.22}
.loadmore{display:flex;justify-content:center;margin-top:40px}
.loadmore button{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.1em;padding:15px 26px;border-radius:999px;border:1px solid var(--or);color:var(--or2);display:flex;align-items:center;gap:10px;transition:all .2s}
.loadmore button:hover{background:var(--or);color:#120800}
.loadmore small{font-family:var(--fb);font-weight:500;letter-spacing:0;opacity:.75}
.other a{display:grid;grid-template-columns:86px 1fr;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.other a:first-of-type{border-top:0}
.other .media{border-radius:9px;overflow:hidden;aspect-ratio:4/3;background:#1a1a1d}
.other .tag{margin:0 0 3px;font-size:9px}
.other h3{font-size:13.5px;font-weight:600;line-height:1.32;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.other a:hover h3{color:var(--or2)}

/* ---------- empty category ---------- */
.empty{position:relative;overflow:hidden;border-radius:24px;padding:56px 40px;text-align:center;background:linear-gradient(160deg,#231005,var(--bg2) 55%,#160b06);border:1px solid rgba(204,80,20,.21)}
.empty::before{content:"";position:absolute;width:520px;height:520px;left:50%;top:-320px;transform:translateX(-50%);background:radial-gradient(circle,rgba(204,80,20,.35),transparent 65%)}
.empty .ic{position:relative;width:72px;height:72px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;background:var(--or);color:#120800;box-shadow:0 14px 50px rgba(255,106,31,.35)}
.empty .ic svg{width:30px;height:30px}
.empty h2{position:relative;font-family:var(--fh);font-size:clamp(22px,3vw,34px);font-weight:800;letter-spacing:-.01em}
.empty p{position:relative;color:var(--muted);max-width:46ch;margin:12px auto 24px}
.empty .acts{position:relative;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn{font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:.08em;padding:12px 18px;border-radius:999px;border:1px solid var(--line);transition:all .2s}
.btn.solid{background:var(--or);border-color:var(--or);color:#120800}
.btn:hover{border-color:var(--or);color:var(--or2)}
.btn.solid:hover{background:var(--or2);color:#120800}

@media (max-width:1024px){
  .clead{grid-template-columns:1fr}
  .feat{min-height:0;aspect-ratio:16/10;align-self:start}
  .feat::before{content:"";display:block;padding-top:62.5%} /* iOS Safari: real height, see .slider in site.css */
  .lside{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
  .lside .row{grid-template-columns:1fr;align-items:start;padding:8px}
  .lside .row .media{aspect-ratio:16/10}
}
@media (max-width:720px){
  .chero{padding-top:22px}
  .chips{flex-wrap:nowrap;overflow-x:auto}
  .ctitle .ghost{display:none}
  .cdesc p{font-size:15px}
  .feat{aspect-ratio:4/5;border-radius:16px}
  .feat::before{padding-top:125%}
  .feat .cap{padding:22px 20px}
  .lside{grid-template-columns:1fr}
  .lside .row{grid-template-columns:108px 1fr;align-items:center;padding:10px 6px}
  .lside .row .media{aspect-ratio:4/3}
  .cgrid{grid-template-columns:1fr 1fr;gap:22px 14px}
  .cgrid .card.big{grid-column:1/-1}
  .cgrid .card.big .media{aspect-ratio:16/10}
  .cgrid .card.big h3{font-size:18px}
  .empty{padding:40px 20px}
}

/* LIGHT THEME (category page) — colours only, same layout */
html[data-theme="light"] .feat{background:#efe3d6;box-shadow:0 30px 90px rgba(200,90,30,.16),0 0 0 1px rgba(230,110,40,.18)}
html[data-theme="light"] .feat h2,html[data-theme="light"] .feat:hover h2{color:#fbf4ec}
html[data-theme="light"] .other .media{background:#efe3d6}
html[data-theme="light"] .empty{background:linear-gradient(160deg,#ffe7d5,#fdf6ee 55%,#ffefe2);border-color:rgba(230,110,40,.22)}
html[data-theme="light"] .empty::before{background:radial-gradient(circle,rgba(255,120,40,.22),transparent 65%)}