/* Feed page — article listing */
body{font-size:18px;line-height:1.6}
.wrap{max-width:1200px;margin:0 auto;padding:0 30px}

.hero{display:grid;grid-template-columns:1.05fr 0.95fr;border-bottom:1px solid var(--line-2)}
@media(max-width:900px){.hero{grid-template-columns:1fr}}
.hero .htext{padding:64px 44px 60px 30px;display:flex;flex-direction:column;justify-content:flex-start}
.hero .kicker{font-family:"Roboto Mono",monospace;font-size:12px;letter-spacing:0.3em;text-transform:uppercase;color:var(--ox)}
.hero h1{font-family:"Archivo Black",sans-serif;text-transform:uppercase;letter-spacing:-0.06em;font-size:clamp(46px,7.4vw,92px);line-height:0.82;margin-top:16px}
.hero .sub{font-family:"Roboto Mono",monospace;font-weight:400;font-size:16px;line-height:22px;letter-spacing:-0.3px;color:var(--bone-soft);margin-top:22px;max-width:42ch}
.hero .readlink{display:inline-block;margin-top:26px;border:1px solid var(--bone);padding:14px 22px;font-family:"Roboto Mono",monospace;font-weight:500;font-size:16px;line-height:22px;letter-spacing:-0.6px;width:fit-content;color:var(--bone);transition:.2s}
.hero .readlink:hover{background:var(--bone);color:var(--ink)}
.hero .himg{position:relative;overflow:hidden;background:var(--ash);min-height:340px}
.hero .himg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06) brightness(0.92)}
@media(max-width:900px){.hero .himg{min-height:260px}}

.infostrip{border-bottom:1px solid var(--line-2);padding:22px 30px}
.infostrip .lbl{font-family:"Roboto Mono",monospace;font-size:11px;letter-spacing:0.24em;text-transform:uppercase;color:var(--bone-dim)}
.infostrip .row2{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.infostrip .title{font-family:"Archivo Black",sans-serif;text-transform:uppercase;letter-spacing:-0.05em;font-size:clamp(20px,2.6vw,26px);text-decoration:underline;text-underline-offset:5px}
.infostrip .sort{display:flex;align-items:center;gap:8px;font-family:"Roboto Mono",monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--bone-dim)}
.infostrip .intro{max-width:68ch;margin-top:18px;font-family:"Roboto Mono",monospace;font-size:15px;line-height:1.6;letter-spacing:-0.2px;color:var(--bone-soft)}

#tabs button{text-transform:uppercase}

.lead{display:block;margin:0 30px;margin-top:40px;border:1px solid var(--line-2)}
.lead .lgrid{display:grid;grid-template-columns:1.1fr 1fr;gap:0}
@media(max-width:760px){.lead .lgrid{grid-template-columns:1fr}}
.lead .lim{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--ash)}
.lead .lim img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(0.9);transition:filter .4s,transform .5s}
.lead:hover .lim img{filter:grayscale(0);transform:scale(1.03)}
.lead .lim .fmt{position:absolute;top:14px;left:14px;background:var(--ink)}
.lead .lcontent{padding:34px 34px 30px;display:flex;flex-direction:column;justify-content:center}
.lead .ltags{display:flex;gap:10px;align-items:center;font-family:"Roboto Mono",monospace;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--bone-dim)}
.lead .ltags .city{color:var(--ox);font-weight:700}
.lead h2{font-family:"Archivo Black",sans-serif;text-transform:uppercase;letter-spacing:-0.05em;font-size:clamp(22px,3vw,32px);line-height:0.98;margin-top:12px}
.lead p{font-size:15px;color:var(--bone-dim);margin-top:12px;font-family:"Roboto Mono",monospace;line-height:1.6;max-width:44ch}
.lead .date{margin-top:18px;font-family:"Roboto Mono",monospace;font-size:11px;letter-spacing:0.1em;color:var(--bone-dim)}

.gridhead{margin:56px 30px 0;padding-bottom:14px;font-family:"Roboto Mono",monospace;font-size:12px;letter-spacing:0.24em;text-transform:uppercase;color:var(--bone-dim)}
.cellgrid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-2);border-left:1px solid var(--line-2);margin:18px 30px 0}
@media(max-width:900px){.cellgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cellgrid{grid-template-columns:1fr}}
.cell{border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding:20px 20px 0;display:flex;flex-direction:column}
.cell .ctitle{font-family:"Archivo Black",sans-serif;text-transform:uppercase;letter-spacing:-0.03em;font-size:15px;line-height:1.25}
.cell .cmeta{font-family:"Roboto Mono",monospace;font-size:12px;letter-spacing:0.04em;color:var(--bone-soft);margin-top:8px}
.cell .cim{margin-top:18px;aspect-ratio:4/3;overflow:hidden;background:var(--ash)}
.cell .cim img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06) brightness(0.9);transition:filter .35s,transform .5s}
.cell:hover .cim img{filter:grayscale(0);transform:scale(1.03)}

.loadmore{margin:0 30px 60px;background:var(--bone);color:var(--ink);text-align:center;padding:20px;font-family:"Roboto Mono",monospace;font-size:13px;letter-spacing:0.2em;text-transform:uppercase;cursor:pointer;border:none;width:calc(100% - 60px);transition:.2s}
.loadmore:hover{background:var(--ox)}

@media(max-width:900px){
  .hero h1{font-size:clamp(30px,7vw,67px);line-height:0.85}

  /* reorder: identity strip + filters first, then the featured article, then the rest */
  body{display:flex;flex-direction:column;height:auto;min-height:100%}
  nav{order:1}
  .infostrip{order:2}
  #tabs{order:3}
  .hero{order:4}
  .gridhead{order:5}
  #rowlist{order:6}
  #loadmore{order:7}
  #join{order:8}
  footer{order:9}

  #tabs{font-size:11px;padding:16px 20px;gap:14px;justify-content:center}
  #tabs button{text-transform:uppercase}
}

@media(max-width:640px){
  /* thin out the top of the page on phones */
  .infostrip .lbl{display:none}
  .infostrip .row2{margin-top:0}

  /* The featured story is text-only on phones. */
  .hero .himg{display:none}

  /* the 44px right padding is a leftover from the desktop two-column hero,
     where it separated the text from the image. On one column it just makes
     the block sit off-centre and steals width from the kicker. */
  .hero .htext{padding-right:30px}

  /* "Dubai · Hardcore · Scene report" needs 335px at 12px but only ~315px is
     available — 10px fits on one line with the 0.3em tracking preserved. */
  .hero .kicker{font-size:10px}

  /* ---- vertical rhythm on phones ----
     nav / infostrip / tabs / hero stack with zero gap between them, so each
     strip's own padding is the only separation there is. At 22px and 16px they
     read as one dense block. Widening them gives each strip its own air. */
  .infostrip{padding:30px}
  /* Equal-width filters are a phone-only treatment. */
  #tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch;font-size:clamp(9px,2.7vw,11px);padding:0 30px;gap:0;justify-content:normal;overflow:visible}
  #tabs button,#tabs button.active{width:100%;min-width:0;padding:6px 4px;text-align:center}

  /* hero text block: more room above the kicker, more below the button.
     Base is 64px top / 60px bottom — these must stay ABOVE that or the block
     nets tighter than it started. */
  .hero .htext{padding-top:76px;padding-bottom:76px}
  .hero h1{margin-top:22px}
  .hero .sub{margin-top:28px}
  .hero .readlink{margin-top:36px}

  /* card grid */
  .gridhead{margin-top:80px}
  .cellgrid{margin-top:24px}
  .cell{padding:24px 24px 0}
  #loadmore{margin-top:24px;margin-bottom:88px}
}

/* below ~350px even 10px wraps — one more step down */
@media(max-width:350px){
  .hero .kicker{font-size:9px}
}