/* ============================================================
   BYO Front — magazine front page for archyworldys.com
   rev 2026-08-08
   ============================================================ */

.byo-fp{
  --fp-ink:#0a0a0a; --fp-mute:#6b6b6b; --fp-rule:#d8d8d8; --fp-hair:#ececec;
  --fp-red:#D6002A;
  --fp-sans:'Libre Franklin',system-ui,-apple-system,sans-serif;
  --fp-serif:'Source Serif 4',Georgia,serif;
  max-width:1300px; margin:0 auto; padding:0 26px; box-sizing:border-box;
}
.byo-fp *{box-sizing:border-box}
.byo-fp a{text-decoration:none;color:inherit}
.byo-fp h2{margin:0}

/* shared image block */
.byo-img{display:block;width:100%;background:#e9ecee center/cover no-repeat;aspect-ratio:3/2;margin-bottom:10px}
.byo-img.r16x9{aspect-ratio:16/9;margin-bottom:14px}
.byo-fp a:hover .byo-img{filter:brightness(.93)}

.byo-kicker{display:inline-block;font-family:var(--fp-sans);font-size:11px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:var(--fp-red);margin-bottom:6px}
.byo-meta{display:block;font-family:var(--fp-sans);font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--fp-mute);margin-top:7px}
.byo-dek{display:block;font-family:var(--fp-serif);font-size:17px;line-height:1.5;color:#3a3a3a;
  margin:8px 0 0;max-width:62ch}

/* ---------- top strip ---------- */
.byo-fp-strip{display:flex;align-items:center;justify-content:space-between;gap:24px;
  border-bottom:1px solid var(--fp-rule);padding:10px 0 11px;margin-bottom:22px;
  font-family:var(--fp-sans);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--fp-mute)}
.byo-fp-trend{display:flex;gap:18px;align-items:center;overflow:hidden;white-space:nowrap;min-width:0}
.byo-fp-trend em{font-style:normal;font-weight:800;color:var(--fp-red);flex:0 0 auto}
.byo-fp-trend a{color:var(--fp-ink);font-weight:600;letter-spacing:.02em;text-transform:none;font-size:12.5px;
  overflow:hidden;text-overflow:ellipsis}
.byo-fp-trend a:hover{color:var(--fp-red)}

/* ---------- splash ---------- */
.byo-splash{display:grid;grid-template-columns:minmax(0,2.5fr) minmax(0,1fr);gap:36px;
  padding-bottom:32px;border-bottom:3px solid var(--fp-ink)}
.byo-splash-main{min-width:0}

.byo-hero{display:block}
.byo-hero-t{font-family:var(--fp-sans);font-weight:900;letter-spacing:-.024em;line-height:1.03;
  font-size:clamp(30px,3.2vw,46px);color:var(--fp-ink);margin:0 0 8px}
.byo-hero:hover .byo-hero-t{color:var(--fp-red)}

.byo-secondaries{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
  margin-top:26px;padding-top:24px;border-top:1px solid var(--fp-rule);align-items:start}

.byo-card{display:block;min-width:0}
.byo-card-t{display:block;font-family:var(--fp-sans);font-weight:700;font-size:16.5px;line-height:1.22;
  letter-spacing:-.008em;color:var(--fp-ink)}
.byo-card:hover .byo-card-t{color:var(--fp-red)}
.byo-card.is-text{border-top:3px solid var(--fp-red);padding-top:9px}

/* ---------- the latest rail ---------- */
.byo-rail{min-width:0;border-left:1px solid var(--fp-rule);padding-left:28px}
.byo-rail-h{font-family:var(--fp-sans);font-weight:900;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fp-ink);padding-bottom:10px;border-bottom:3px solid var(--fp-red)}
.byo-rail-list{list-style:none;margin:0;padding:0}
.byo-rail-list li{border-bottom:1px solid var(--fp-hair)}
.byo-rail-list a{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;padding:11px 0;align-items:start}
.byo-rail-time{font-family:var(--fp-sans);font-size:11px;font-weight:700;letter-spacing:.03em;
  color:var(--fp-red);padding-top:2px;white-space:nowrap}
.byo-rail-t{font-family:var(--fp-sans);font-weight:600;font-size:14px;line-height:1.28;color:var(--fp-ink)}
.byo-rail-list a:hover .byo-rail-t{color:var(--fp-red)}

/* ---------- sections ---------- */
.byo-sec{padding-top:28px;margin-top:36px;border-top:1px solid var(--fp-rule)}
.byo-sec:first-of-type{border-top:0}
.byo-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:22px}
.byo-sec-h h2{font-family:var(--fp-sans);font-weight:900;font-size:24px;letter-spacing:-.018em;
  text-transform:uppercase;color:var(--fp-ink);position:relative;padding-left:16px;line-height:1.1}
.byo-sec-h h2::before{content:"";position:absolute;left:0;top:.1em;bottom:.1em;width:6px;background:var(--fp-red)}
.byo-sec-more{font-family:var(--fp-sans);font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fp-mute);white-space:nowrap}
.byo-sec-more:hover{color:var(--fp-red)}

/* feature layout: big lead + stacked briefs */
.byo-sec--feature .byo-sec-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:32px;align-items:start}
.byo-card--lead .byo-card-t{font-size:27px;font-weight:800;line-height:1.08;letter-spacing:-.018em}
.byo-card--lead .byo-dek{font-size:16px}

.byo-briefs{display:flex;flex-direction:column;border-top:2px solid var(--fp-ink)}
.byo-brief{display:grid;grid-template-columns:minmax(0,1fr) 86px;gap:14px;padding:14px 0;
  border-bottom:1px solid var(--fp-hair);align-items:start}
.byo-brief.is-text{grid-template-columns:minmax(0,1fr)}
.byo-brief-body{min-width:0}
.byo-brief-t{display:block;font-family:var(--fp-sans);font-weight:600;font-size:14.5px;line-height:1.27;color:var(--fp-ink)}
.byo-brief:hover .byo-brief-t{color:var(--fp-red)}
.byo-brief .byo-meta{margin-top:5px}
.byo-brief-thumb{aspect-ratio:1/1;margin:0;border-radius:2px}

/* quad layout: 4 equal cards */
.byo-sec--quad .byo-sec-body{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;align-items:start}

/* Auto Ads defence: never let an injected slot steal a grid column */
.byo-fp .google-auto-placed{grid-column:1/-1;max-width:100%;margin:8px auto}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .byo-splash{grid-template-columns:1fr;gap:28px}
  .byo-rail{border-left:0;padding-left:0;border-top:3px solid var(--fp-ink);padding-top:14px}
  .byo-sec--feature .byo-sec-body{grid-template-columns:1fr;gap:26px}
  .byo-sec--quad .byo-sec-body{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .byo-fp{padding:0 16px}
  .byo-fp-strip{flex-direction:column;align-items:flex-start;gap:8px}
  .byo-fp-trend{width:100%}
  .byo-hero-t{font-size:29px}
  .byo-dek{font-size:16px}
  /* cards become list rows, the way real news sites do it on phones */
  .byo-secondaries,.byo-sec--quad .byo-sec-body{grid-template-columns:1fr;gap:0;border-top:0}
  .byo-secondaries .byo-card,.byo-sec--quad .byo-card{
    display:grid;grid-template-columns:minmax(0,1fr) 108px;gap:14px;
    padding:14px 0;border-bottom:1px solid var(--fp-hair)}
  .byo-secondaries .byo-card .byo-img,.byo-sec--quad .byo-card .byo-img{aspect-ratio:1/1;margin:0;grid-row:span 3}
  .byo-secondaries .byo-card.is-text,.byo-sec--quad .byo-card.is-text{grid-template-columns:1fr;border-top:0}
  .byo-sec{margin-top:28px;padding-top:22px}
  .byo-sec-h h2{font-size:20px}
}