/* 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:400;font-size:1.375rem;line-height:1.15;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.25;font-weight:400;max-width:540px}
.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:400;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:400;font-size:1rem;color:#c70000;background-color:var(--bg-color,#fafaf7)}
.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.25rem}
  .hc-article__standfirst{font-size:1.3125rem}
  .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 + 3rem) 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 1.5rem 1.5rem}
  .hc-article__media{grid-column:2;grid-row:2;padding:0 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 1.5rem 0}
  .hc-article__rail-fill{display:block;grid-row:3}
  .hc-article__meta--noimg{grid-row:2 / 4}
  .hc-article__title{font-size:2.375rem}
}

/* 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-article .hc-mostviewed__title{text-transform:lowercase!important;letter-spacing:normal!important;font-variant:normal!important}
.hc-article .hc-mostviewed__title::first-letter{text-transform:uppercase!important}
.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:400;font-size:1.0625rem;line-height:1.25}

/* Story tease in the left-hand column (wide screens only) */
.hc-tease{display:none;margin-top:30rem;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 0 .9rem;text-align:left}
.hc-tease__headline{display:block;font-family:var(--font-heading);font-weight:400;font-size:1.25rem;line-height:1.2}
.hc-tease__more{display:flex;justify-content:flex-start;align-items:center;gap:.4rem;margin:.75rem 0 0;padding:0;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-color:#c70000!important;color:#fff!important;flex:none}
.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}}

/* Wide screens: rule between story and right-hand column, Latest about two paragraphs into the story */
@media (min-width:1024px){
  .hc-article__right-rule{display:block;grid-column:3;grid-row:1 / 4;border-left:1px solid var(--color-brd-soft)}
  .hc-mostviewed{grid-column:3;grid-row:3;align-self:start;margin:9rem 0 2.5rem 1.5rem}
}
.hc-article__right-rule{display:none}
@media (min-width:1024px){.hc-article__right-rule{display:block}}
.hc-tease[hidden]{display:none!important}
.hc-tease__headline{text-align:left;padding:0;margin:0}
.hc-tease__more::before{content:"\2192";display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;background:#c70000;color:#fff;font-size:.95rem;line-height:1}

/* Only the first tease candidate shows (duplicates of Latest are removed by script) */
.hc-tease-pool .hc-tease ~ .hc-tease{display:none!important}

/* Wide graphics in the story sit in front of the column rules, on the page colour */
@media (min-width:1024px){
  #hc-article-body{position:relative;z-index:1}
  #hc-article-body .ghost-content > *{background-color:var(--bg-color,#fafaf7)!important}
}

/* Breathing space above and below graphics, embeds and other blocks in the story */
#hc-article-body .ghost-content > :not(p):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(ul):not(ol):not(blockquote):not(hr):not(script):not(style){margin-top:2.5rem;margin-bottom:2.5rem}

/* Breathing space after graphics, tables and other blocks in the story */
#hc-article-body .ghost-content > :is(div,figure,section,table,aside,iframe,blockquote,ul,ol) + *{margin-top:2rem}
#hc-article-body .ghost-content > :is(div,figure,section,table,aside,iframe){margin-bottom:0}

/* Comments heading (theme-drawn, Lora) */
.hc-comments__head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.75rem 0 .5rem}
.hc-comments__title{font-family:var(--font-heading);font-size:1.75rem;line-height:1.1;font-weight:700!important}
.hc-comments__count{font-family:var(--font-body);font-size:1rem;color:var(--color-typ-tone)}

/* ===== End of story: sign-up, topics and comments in the story column, one hairline above each ===== */
#hc-article-body .hc-inline-signup :is(.hc-signup__box,.hc-signup__main,form,.hc-small,.hc-signup__text){border-top:0!important;border-bottom:0!important;box-shadow:none!important}
#hc-article-body .hc-end-signup{margin:2.5rem 0 0!important;padding-top:1.5rem!important;border:0!important;border-top:1px solid var(--color-brd-soft)!important}
#hc-article-body .hc-topics{margin:2rem 0 0!important;padding:1.5rem 0 0!important;border:0!important;border-top:1px solid var(--color-brd-soft)!important}
#hc-article-body .hc-comments-in{padding:0!important;margin:2rem 0 3rem!important}
#hc-article-body .hc-comments-in > div{max-width:none!important;border:0!important;border-top:1px solid var(--color-brd-soft)!important;padding:1.25rem 0 0!important}
#hc-article-body .ghost-content{margin-bottom:0}