/* Hackney Citizen: Guardian-style article page */
.hc-article{display:flex;flex-direction:column;gap:1rem;padding-top:1rem;color:var(--color-typ)}
.hc-article__kicker a{display:inline-block;font-weight:700;font-size:1.75rem;line-height:1.1;color:var(--color-brand);text-transform:lowercase}
.hc-article .hc-article__kicker a{text-transform:lowercase!important;letter-spacing:normal!important;font-variant:normal!important}
.hc-article .hc-article__kicker a::first-letter{text-transform:uppercase!important}
.hc-article__kicker a:hover{text-decoration:underline;text-underline-offset:3px}
.hc-article__title{font-size:2rem;line-height:1.1;font-weight:600;letter-spacing:-.01em}
.hc-article__standfirst{margin-top:1rem;font-size:1.25rem;line-height:1.35;font-weight:400}
.hc-article__media{margin:0}
.hc-article__img{display:block;width:100%;aspect-ratio:5/4;object-fit:cover;background:var(--color-bgr-tone)}
.hc-article__caption{margin-top:.5rem;font-family:var(--font-sans);font-size:.85rem;line-height:1.4;color:var(--color-typ-tone)}
.hc-article__cam{display:inline-block;width:1rem;height:1rem;margin-right:.35rem;vertical-align:-2px}
.hc-article__cam svg{width:100%;height:100%}

/* byline block */
.hc-article__meta{border-top:4px double var(--color-brd-soft);padding-top:.75rem}
.hc-article__byline{font-weight:700;font-size:1.125rem;line-height:1.25}
.hc-article__byline a{color:#c70000}
.hc-article__byline a:hover{text-decoration:underline;text-underline-offset:3px}
.hc-article__date{display:block;margin-top:.6rem;padding-bottom:.75rem;border-bottom:1px solid var(--color-brd-soft);font-family:var(--font-sans);font-size:.85rem;color:var(--color-typ-tone)}
.hc-article__actions{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;padding-top:.75rem}
.hc-share{position:relative}
/* share menu opens in the flow, pushing the Google pill down rather than sitting over it */
.hc-share [data-share]{position:static;margin-top:.5rem;width:max-content}
.hc-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem 1rem;border:1px solid var(--color-brd-soft);border-radius:999px;font-family:var(--font-sans);font-size:.85rem;line-height:1.2;color:var(--color-typ);background:var(--color-bgr);cursor:pointer}
.hc-pill:hover{border-color:var(--color-typ)}
.hc-pill--share{font-weight:700;font-size:1rem;color:var(--color-brand)}
.hc-pill__icon{display:inline-block;width:1.1rem;height:1.1rem;flex:none}
.hc-pill__icon svg{width:100%;height:100%}
.hc-article__comments{display:block;width:100%;font-family:var(--font-sans);font-size:.85rem;color:var(--color-typ-tone)}
.hc-article__comments:hover{color:var(--color-brand)}
.hc-article__comments:has(> span:empty){display:none}

/* body copy: fill its column instead of the theme's centred grid */
.hc-article .ghost-content{grid-template-columns:[full-start wide-start main-start] minmax(0,1fr) [main-end wide-end full-end];margin-bottom:3rem;font-size:1.125rem;line-height:1.4}
/* Guardian spacing: lines at 1.4, paragraphs about 0.8 of a line apart */
.hc-article .ghost-content p{line-height:1.4;margin-top:0;margin-bottom:.8em}
.hc-article__rail-fill{display:none}

@media (min-width:768px){
  .hc-article__title{font-size:2.5rem}
  .hc-article__standfirst{font-size:1.375rem}
  .hc-article .ghost-content{font-size:1.25rem}
}

/* wide screens: rail | main | margin, rule between rail and main running full height */
@media (min-width:1024px){
  .hc-article{display:grid;max-width:1300px;grid-template-columns:minmax(0,1fr) calc(620px + 1.5rem) minmax(0,1.4fr);grid-template-rows:auto auto 1fr;gap:0;padding-top:0}
  .hc-article__kicker,.hc-article__meta,.hc-article__rail-fill{grid-column:1;padding-right:1.5rem;border-right:1px solid var(--color-brd-soft)}
  .hc-article__kicker{grid-row:1;padding-top:1rem}
  .hc-article__head{grid-column:2;grid-row:1;padding:1rem 0 1.5rem 1.5rem}
  .hc-article__media{grid-column:2;grid-row:2;padding-left:1.5rem}
  .hc-article__meta{grid-row:2;align-self:stretch;border-top:0;padding-top:0}
  .hc-article__meta::before{content:"";display:block;border-top:4px double var(--color-brd-soft);margin-bottom:.75rem}
  .hc-article__body{grid-column:2;grid-row:3;padding:1.5rem 0 0 1.5rem}
  .hc-article__rail-fill{display:block;grid-row:3}
  .hc-mostviewed{grid-column:3;grid-row:2 / 4;align-self:start;margin:0 0 0 2.5rem}
  .hc-article__meta--noimg{grid-row:2 / 4}
  .hc-article__title{font-size:3rem}
}

/* tag list at the foot of a story: sentence case to match the left-hand column */
.hc-tag-pill{text-transform:lowercase}
.hc-tag-pill::first-letter{text-transform:uppercase}

/* Most viewed */
.hc-mostviewed{margin:1rem 0 2.5rem;border-top:4px double var(--color-brd-soft);padding-top:.6rem}
.hc-mostviewed__title{font-size:1.375rem;font-weight:700;line-height:1.2;margin-bottom:.5rem}
.hc-mostviewed__list{list-style:none;margin:0;padding:0}
.hc-mostviewed__item{border-bottom:1px solid var(--color-brd-soft)}
.hc-mostviewed__item:last-child{border-bottom:0}
.hc-mostviewed__link{display:flex;gap:.9rem;align-items:flex-start;padding:.6rem 0 .8rem;color:var(--color-typ)}
.hc-mostviewed__link:hover .hc-mostviewed__headline{text-decoration:underline;text-underline-offset:3px}
.hc-mostviewed picture{flex:none}
.hc-mostviewed__img{display:block;width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none}
.hc-mostviewed__img--blank{background:var(--color-bgr-tone)}
.hc-mostviewed__headline{font-weight:600;font-size:1.0625rem;line-height:1.25}

/* Story tease in the left-hand column (wide screens only) */
.hc-tease{display:none;margin-top:3rem;position:sticky;top:1.5rem;background:var(--color-bgr-tone);border-top:2px solid #c70000;color:var(--color-typ)}
.hc-tease__img{display:block;width:100%;aspect-ratio:5/4;object-fit:cover}
.hc-tease__body{display:block;padding:.6rem .75rem .9rem}
.hc-tease__headline{display:block;font-family:var(--font-heading);font-weight:700;font-size:1.25rem;line-height:1.2}
.hc-tease__more{display:inline-flex;align-items:center;gap:.4rem;margin-top:.75rem;font-family:var(--font-heading);font-size:1.0625rem;color:#c70000}
.hc-tease__arrow{display:inline-flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;border-radius:50%;background:#c70000;color:#fff}
.hc-tease__arrow svg{width:1rem;height:1rem}
.hc-tease:hover .hc-tease__headline{text-decoration:underline;text-underline-offset:3px}
.hc-tease__icon{display:flex;width:1rem;height:1rem}

@media (min-width:1024px){.hc-tease{display:block}}