/* Hackney Citizen homepage: full-width lead + Guardian-style section containers */
.hc-img{display:block;width:100%;aspect-ratio:5/4;object-fit:cover}
.hc-meta{margin-top:auto;padding-top:.75rem;opacity:1!important}
.hc-meta [data-post-card-authors] a{color:#c70000;font-weight:400!important}

/* Lead (used for the homepage lead and each section's first story) */
.hc-lead{display:flex;flex-direction:column-reverse;gap:1rem;color:var(--color-typ)}
.hc-lead__text{display:flex;flex-direction:column;gap:.75rem}
.hc-lead__title{font-size:1.5rem;line-height:1.15;font-weight:600}
.hc-lead__title a:hover,.hc-card__title a:hover,.hc-section__title a:hover{text-decoration:underline;text-underline-offset:4px}
.hc-lead__excerpt{font-size:1.0625rem;line-height:1.5;color:var(--color-typ-tone)}
.hc-lead__media:hover .hc-img,.hc-card__media:hover .hc-img{opacity:.9}


/* Section containers */
.hc-sections{margin-top:0}
.hc-section__inner{display:grid;gap:1rem;padding:.75rem 0 2.5rem;border-top:1px solid var(--color-brd)}
.hc-sections > .hc-section:first-child .hc-section__inner{border-top:0}
.hc-section__title{font-size:1.75rem;line-height:1.1;font-weight:700}
.hc-section__title a{display:inline-block;text-transform:lowercase}
.hc-sections .hc-section__title a{text-transform:lowercase!important;letter-spacing:normal!important;font-variant:normal!important}
.hc-sections .hc-section__title a::first-letter{text-transform:uppercase!important}
.hc-section__body > .hc-lead{padding-bottom:1.25rem;border-bottom:1px solid var(--color-brd-soft)}

/* Two-up grid of smaller stories */
.hc-grid{display:grid;grid-template-columns:1fr}
.hc-card{display:grid;grid-template-columns:2fr 3fr;gap:.75rem;padding:1rem 0;border-bottom:1px solid var(--color-brd-soft);color:var(--color-typ)}
.hc-card:last-child{border-bottom:0}
.hc-card__text{display:flex;flex-direction:column}
.hc-card__title{font-size:1.125rem;line-height:1.2;font-weight:600}

@media (min-width:768px){
  .hc-lead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:1.5rem}
  .hc-lead__title{font-size:1.875rem}
  .hc-grid{grid-template-columns:1fr 1fr}
  .hc-card{grid-template-columns:1fr 1fr;border-bottom:1px solid var(--color-brd-soft)}
  .hc-card:nth-child(odd){padding-right:1rem;border-right:1px solid var(--color-brd-soft)}
  .hc-card:nth-child(even){padding-left:1rem}
  .hc-card:nth-last-child(-n+2):nth-child(odd),.hc-card:last-child{border-bottom:0}
  .hc-card__title{font-size:1.3rem}
}
@media (min-width:1024px){
  /* heading rail | stories | empty right margin (narrower measure, as the Guardian) */
  .hc-section__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,4fr) minmax(0,.5fr);column-gap:0}
  .hc-section__title{grid-column:1}
  .hc-section__body{grid-column:2}
  /* rule between heading rail and stories runs unbroken from the top of the page down through every section */
  .hc-section__inner{padding:0}
  .hc-section__title{padding:.75rem 1rem 2.5rem 0}
  .hc-section__body{padding-top:.75rem;padding-bottom:2.5rem}
  .hc-section__body{padding-left:1.5rem;border-left:1px solid var(--color-brd-soft)}
}

/* Tit-bits: only the most recent (the section lead) keeps its picture */
[data-hc-section="tit-bits"] .hc-card__media,[data-hc-section="titbits"] .hc-card__media{display:none}
[data-hc-section="tit-bits"] .hc-card,[data-hc-section="titbits"] .hc-card{grid-template-columns:1fr}

/* Planning and traffic notices: only the most recent one */
[data-hc-section="planning-notices"] .hc-grid,[data-hc-section="traffic-notices"] .hc-grid{display:none}
[data-hc-section="planning-notices"] .hc-section__body > .hc-lead,[data-hc-section="traffic-notices"] .hc-section__body > .hc-lead{border-bottom:0;padding-bottom:0}

/* A lead story with no picture: let the text run wider instead of leaving an empty two-thirds */
@media (min-width:768px){
  .hc-lead--noimg{grid-template-columns:minmax(0,1fr)}
  .hc-lead--noimg .hc-lead__text{max-width:40rem}
}

/* ===== Section row (header navigation), styled like the homepage section headings ===== */
.hc-nav-row{padding:0;border-top:1px solid var(--color-brd);border-bottom:1px solid var(--color-brd)}
.hc-nav{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hc-nav::-webkit-scrollbar{display:none}
.hc-nav__list{display:flex;align-items:stretch;list-style:none;margin:0 auto;padding:0;max-width:var(--container-site);white-space:nowrap}
.hc-nav__item{display:flex;align-items:stretch;position:relative}
.hc-nav__item + .hc-nav__item::before{content:"";align-self:center;height:1.4em;border-left:1px solid var(--color-brd-soft)}
.hc-nav__link{display:flex;align-items:center;padding:.6rem 1rem .5rem;font-family:var(--font-heading);font-weight:400;font-size:1.125rem;line-height:1.2;color:var(--color-typ);text-transform:none!important;letter-spacing:normal!important;border-bottom:3px solid transparent;margin-bottom:-1px}
.hc-nav__item:first-child .hc-nav__link{padding-left:0}
.hc-nav__link:hover{color:#c70000}
.hc-nav__item.nav-current .hc-nav__link{border-bottom-color:#c70000}
/* E-edition and Support us: smaller, set apart at the right */
.hc-nav__item:is(.nav-e-edition,.nav-support-us,.nav-support,.nav-donate) .hc-nav__link{font-family:var(--font-body);font-weight:400;font-size:.875rem;color:var(--color-typ-tone)}
.hc-nav__item:is(.nav-support-us,.nav-support,.nav-donate) .hc-nav__link{color:#c70000}
.hc-nav__item:is(.nav-e-edition,.nav-support-us,.nav-support,.nav-donate)::before{display:none}
.hc-nav__item:not(:is(.nav-e-edition,.nav-support-us,.nav-support,.nav-donate)) + .hc-nav__item:is(.nav-e-edition,.nav-support-us,.nav-support,.nav-donate){margin-left:auto}
@media (min-width:768px){
  .hc-nav__link{font-size:1.1875rem;padding:.7rem 1.1rem .55rem}
}

/* ===== Footer ===== */
.hc-footnav{overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--color-brd);margin-bottom:2rem}
.hc-footnav::-webkit-scrollbar{display:none}
.hc-footnav .hc-nav__list{margin:0;max-width:none}
.hc-footer .hc-footer__head{text-transform:none;letter-spacing:normal;font-size:1.0625rem;font-weight:700}
.hc-footer .hc-footer__legal{font-size:.8125rem!important;line-height:1.5;color:var(--color-typ-tone)}
.hc-footer .hc-footer__top{font-size:.9375rem}

/* Footer: no column headings; fine rules between columns */
@media (min-width:640px){
  .hc-footer .hc-footer__cols > div + div{border-left:1px solid var(--color-brd-soft);padding-left:1.5rem}
}

/* Tag pages, laid out like a homepage section */
.hc-tagpage .hc-section__inner{border-top:0}
.hc-tagpage__desc{margin-top:.75rem;font-size:1rem;line-height:1.45;color:var(--color-typ-tone)}
.hc-tagpage__desc a{text-decoration:underline}
.hc-tagpage__pagination{margin-top:1.5rem}
.hc-tagpage .hc-section__title{font-size:2rem}
@media (min-width:1024px){
  .hc-tagpage__rail{grid-column:1;padding-right:1rem}
  .hc-tagpage .hc-tagpage__rail .hc-section__title{padding-bottom:0}
}

/* Tit-bits tag page: only the most recent item (the lead) keeps its picture */
[data-hc-tagpage="tit-bits"] .hc-card__media{display:none}
[data-hc-tagpage="tit-bits"] .hc-card{grid-template-columns:1fr}
[data-hc-tagpage="tit-bits"].hc-tagpage--later .hc-lead__media{display:none}
@media (min-width:768px){[data-hc-tagpage="tit-bits"].hc-tagpage--later .hc-lead{grid-template-columns:minmax(0,1fr)}}
