/* The Gaffer — sections added in the page editor (the block library), the layout settings every section can have,
   and the blog: post pages and the Notes index. Used by the landing page and the blog (public/post.html).
   Blocks are drawn by public/app/pagekit.js. Same look as the rest of the site: the matchday programme (rules, kickers,
   columns), the scoreboard (Bitcount on dot-matrix black) and the BBC-light page. */

/* ---------- every block ---------- */
.blk{position:relative; background:var(--card); color:var(--text);}
.blk > .wrap{padding-block:64px;}
.blk.tone-paper{background:var(--paper);}
.blk.tone-white{background:var(--card);}
.blk.tone-black{background:var(--ink); color:var(--on-dark);}
.blk.tone-yellow{background:var(--gold); color:var(--ink);}
.blk.tone-white + .blk.tone-white{border-top:1px solid var(--line);}
.blk h2{font:900 clamp(30px,3.6vw,48px)/1.04 var(--display); letter-spacing:-.025em; margin:14px 0 16px;}
.blk .kicker{margin:0;}
.blk.tone-black .kicker{background:var(--gold); color:var(--ink);}
.blk.tone-yellow .kicker{background:var(--ink); color:var(--gold);}
.blk-body{font-size:17px; line-height:1.65;}
.blk-body p{margin:0 0 14px;} .blk-body p:last-child{margin-bottom:0;}
.blk-body h3{font:900 22px/1.2 var(--display); margin:26px 0 10px;}
.blk-body ul,.blk-body ol{margin:0 0 14px; padding-left:22px;} .blk-body li{margin:0 0 6px;}
.blk-body a{text-decoration-color:var(--gold-deep); text-decoration-thickness:2px; text-underline-offset:3px;}
.blk.tone-black .blk-body{color:#DADADA;}
.blk-link{display:inline-flex; align-items:center; gap:8px; margin-top:18px; font:800 15px var(--display); color:inherit; text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:3px; text-underline-offset:6px;}
.blk.tone-yellow .blk-link{text-decoration-color:var(--ink);}
.blk figure{margin:0;}
.blk figcaption{margin-top:10px; padding-left:12px; border-left:3px solid var(--gold); font-size:14px; line-height:1.5; color:var(--muted);}
.blk.tone-black figcaption{color:var(--on-dark-2);}
.blk .cover{display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; aspect-ratio:4/3; width:100%; object-fit:cover; border:0;}
.blk .cover.dm b{font:600 clamp(24px,3vw,40px)/1 var(--board); letter-spacing:.06em; color:var(--gold); text-shadow:0 0 12px rgba(255,210,48,.45);}
.blk .cover.dm span{margin-top:10px; font:500 11px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:#9A9A9A;}
.blk-mast{display:flex; justify-content:space-between; align-items:baseline; gap:6px 18px; flex-wrap:wrap; padding-bottom:10px; border-bottom:4px solid currentColor; font:500 12px var(--mono); letter-spacing:.14em; text-transform:uppercase;}
.blk-mast b{font:900 16px var(--display); letter-spacing:.05em; margin-right:10px;}
.blk-mast + .mast-thin{border-top-color:currentColor;}

/* text + image */
.blk-ti > .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center;}
.blk-ti.side-left .blk-ti-fig{order:-1;}

/* big statement */
.blk-statement{text-align:center;}
.blk-statement > .wrap{padding-block:88px;}
.blk-statement h2{font-size:clamp(40px,6.4vw,92px); line-height:.95; text-transform:uppercase; max-width:14em; margin:18px auto 18px;}
.blk-statement .blk-sub{margin:0 auto; max-width:36em; font:600 clamp(17px,1.6vw,20px)/1.5 var(--display);}
.blk h2 mark{background:var(--gold); color:var(--ink); padding:0 .1em; box-decoration-break:clone; -webkit-box-decoration-break:clone;}
.blk.tone-yellow h2 mark{background:var(--ink); color:var(--gold);}

/* quote */
.blk-quote blockquote{margin:0 auto; max-width:30em; padding:0 0 0 22px; border-left:6px solid var(--gold);}
.blk-quote blockquote p{margin:0; font:900 clamp(26px,3.2vw,42px)/1.12 var(--display); letter-spacing:-.02em;}
.blk-quote blockquote p mark{background:var(--gold); color:var(--ink); padding:0 .12em; box-decoration-break:clone; -webkit-box-decoration-break:clone;}
.blk-quote cite{display:block; margin-top:16px; font:500 12px var(--mono); letter-spacing:.12em; text-transform:uppercase; font-style:normal; color:var(--muted);}
.blk-quote.tone-black cite{color:var(--on-dark-2);}
.blk-quote.tone-yellow blockquote{border-left-color:var(--ink);}
.blk-quote.tone-yellow blockquote p mark{background:var(--ink); color:var(--gold);}

/* stats strip: the numbers come from the game, on a scoreboard */
.blk-stats h2{font-size:clamp(22px,2.2vw,28px); margin:0 0 20px;}
.blk-stats .st-row{display:grid; grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); gap:12px;}
.blk-stats .st{padding:20px 18px 18px; border-top:6px solid var(--gold); background:#0A0A0A; background-image:radial-gradient(circle at center, #222 0 1.15px, transparent 1.55px); background-size:5px 5px; color:var(--on-dark);}
.blk-stats .st-v{display:block; font:600 clamp(34px,4.2vw,58px)/1 var(--board); letter-spacing:.04em; color:var(--gold); text-shadow:0 0 12px rgba(255,210,48,.45); font-variant-numeric:tabular-nums;}
.blk-stats .st-l{display:block; margin-top:12px; font:500 12px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:#B5B5B5;}
.blk-stats.tone-black .st{border:1px solid #2B2B2B; border-top:6px solid var(--gold);}

/* call to action */
.blk-cta{text-align:center;}
.blk-cta > .wrap{padding-block:72px; display:grid; gap:16px; justify-items:center;}
.blk-cta h2{font-size:clamp(32px,4.6vw,60px); line-height:1; text-transform:uppercase; max-width:14em; margin:0;}
.blk-cta p{margin:0; font-size:18px; max-width:34em;}
.blk-cta .btn{background:var(--ink); color:var(--gold); box-shadow:0 4px 0 #000; margin-top:6px;}
.blk-cta.tone-black .btn{background:var(--gold); color:var(--ink); box-shadow:0 4px 0 var(--gold-deep);}

/* blog feed */
.blk-feed .fd-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:26px;}
.fcard{display:grid; align-content:start; gap:0; min-width:0; color:inherit; text-decoration:none;}
.fcard .cover{aspect-ratio:16/9;}
.fcard-tag{justify-self:start; margin-top:14px; background:var(--gold); color:var(--ink); font:800 11px/1 var(--display); letter-spacing:.14em; text-transform:uppercase; padding:5px 8px 4px;}
.fcard h3{margin:10px 0 8px; font:900 21px/1.15 var(--display); letter-spacing:-.015em;}
.fcard:hover h3{text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:3px;}
.fcard p{margin:0 0 8px; font-size:15px; line-height:1.55; color:#333;}
.fcard small{font:500 12.5px var(--mono); color:var(--muted);}
.blk.tone-black .fcard p{color:#CFCFCF;} .blk.tone-black .fcard small{color:var(--on-dark-3);}
.fd-empty{margin:24px 0 0; font:600 16px var(--display); color:var(--muted);}

/* feature (the Haaland rule's layout) */
.blk-feature > .wrap{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:56px; align-items:center; padding-block:76px 84px;}
.blk-feature .pull{margin:18px 0 0; padding:0;}
.blk-feature .pull p{margin:0; font:900 clamp(26px,3vw,40px)/1.12 var(--display); letter-spacing:-.02em;}
.blk-feature .pull p mark{background:var(--gold); color:var(--ink); padding:0 .12em; box-decoration-break:clone; -webkit-box-decoration-break:clone;}
.blk-feature .pull cite{display:block; margin-top:14px; font:500 12px var(--mono); letter-spacing:.12em; text-transform:uppercase; font-style:normal; color:var(--muted);}
.blk-feature .ft-lede{margin:22px 0 18px; font:600 18px/1.55 var(--display); max-width:30em;}
.blk-feature .ft-pts{list-style:none; margin:0; padding:16px 0 0; border-top:1px solid var(--line); display:grid; gap:12px;}
.blk-feature .ft-pts li{display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; align-items:start; font-size:15.5px; line-height:1.5;}
.blk-feature .ft-pts svg{color:var(--gold-text); margin-top:1px;}
.blk-feature .cover{aspect-ratio:16/10;}
.blk-feature.tone-black .pull cite{color:var(--on-dark-2);} .blk-feature.tone-black .ft-pts svg{color:var(--gold);} .blk-feature.tone-black .ft-pts{border-top-color:#333;}

/* pictures */
.blk-gallery h2{font-size:clamp(22px,2.2vw,28px); margin:0 0 18px;}
.blk-gallery .gl{display:grid; grid-template-columns:repeat(var(--n,3),minmax(0,1fr)); gap:16px;}
.blk-gallery .gl .cover{aspect-ratio:4/3;}
.blk-gallery.n1 .gl .cover{aspect-ratio:21/9;}

/* spacer / divider */
.blk-divider{background:transparent;}
.blk-divider > .wrap{padding-block:28px;}
.blk-divider .dv{height:0;}
.blk-divider.kind-rule .dv{border-top:1px solid var(--line);}
.blk-divider.kind-double .dv{border-top:4px solid var(--ink); position:relative;}
.blk-divider.kind-double .dv::after{content:""; position:absolute; left:0; right:0; top:3px; border-top:1px solid var(--ink);}
.blk-divider.kind-bulbs .dv{height:14px; background-image:radial-gradient(circle at center, var(--gold) 0 3px, transparent 3.6px); background-size:16px 14px; background-repeat:repeat-x;}
.blk-divider.kind-space > .wrap{padding-block:36px;}

/* article text (blog posts) */
.blk-article > .wrap{max-width:calc(720px + 48px); padding-block:28px;}
.blk-article .blk-body{font-size:18.5px; line-height:1.7;}

/* ---------- a blog post ---------- */
.post-head{background:var(--card); border-bottom:1px solid var(--line);}
.post-head > .wrap{max-width:calc(900px + 48px); padding-block:40px 34px;}
.ph-tags{display:flex; flex-wrap:wrap; gap:6px; margin:26px 0 0;}
.ph-tags a{background:var(--gold); color:var(--ink); font:800 11px/1 var(--display); letter-spacing:.14em; text-transform:uppercase; padding:5px 8px 4px; text-decoration:none;}
.ph-tags a:hover{background:var(--ink); color:var(--gold);}
.ph-people{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:-12px 0 24px;}
.ph-people:empty{display:none;}
.pp-k{font:500 11px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-right:4px;}
.pp-club,.pp-player{display:inline-flex; align-items:baseline; gap:6px; padding:5px 9px; border:1.5px solid var(--ink); border-radius:3px; font:800 12.5px/1.2 var(--display); color:var(--ink); text-decoration:none;}
.pp-club{letter-spacing:.06em;} .pp-player small{font:500 11px var(--mono); color:var(--muted);}
.pp-club:hover,.pp-player:hover{background:var(--ink); color:var(--gold);} .pp-player:hover small{color:var(--on-dark-2);}
/* the blog's filters */
.nf{display:flex; flex-wrap:wrap; gap:6px; margin:18px 0 0;}
.nf a{padding:6px 10px; border:1.5px solid var(--line); border-radius:3px; font:700 13px var(--display); color:var(--ink); text-decoration:none;}
.nf a:hover{border-color:var(--ink);} .nf a.on{background:var(--ink); color:var(--gold); border-color:var(--ink);}
.nf-k{font:500 11px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); align-self:center; margin-right:4px;}
.post-head h1{font:900 clamp(36px,5vw,64px)/1.02 var(--display); letter-spacing:-.025em; margin:16px 0 16px;}
.ph-stand{margin:0 0 18px; font:700 clamp(18px,1.8vw,22px)/1.45 var(--display); max-width:36em;}
.ph-by{margin:0 0 26px; font:500 13px var(--mono); color:var(--muted);}
.ph-by span{color:var(--ink);}
.ph-cover{margin:0;} .ph-cover .cover{aspect-ratio:16/9;}
.ph-cover figcaption{margin-top:10px; padding-left:12px; border-left:3px solid var(--gold); font-size:14px; line-height:1.5; color:var(--muted);}
.post-missing > .wrap,.notes-index > .wrap{padding-block:56px 84px;}
.post-missing h1,.notes-index h1{font:900 clamp(34px,4.6vw,58px)/1.02 var(--display); letter-spacing:-.025em; margin:22px 0 14px;}
.post-missing p{font-size:17px; color:#333; max-width:36em;}
.notes-index{background:var(--card);}
.notes-index .fd-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px 28px; margin-top:30px;}

/* ---------- layout settings (any section) ---------- */
[data-sec].t-pt-s > .wrap{padding-top:24px !important;} [data-sec].t-pt-m > .wrap{padding-top:56px !important;} [data-sec].t-pt-l > .wrap{padding-top:104px !important;}
[data-sec].t-pb-s > .wrap{padding-bottom:24px !important;} [data-sec].t-pb-m > .wrap{padding-bottom:56px !important;} [data-sec].t-pb-l > .wrap{padding-bottom:104px !important;}
[data-sec].t-al-l > .wrap{text-align:left;} [data-sec].t-al-c > .wrap{text-align:center;} [data-sec].t-al-r > .wrap{text-align:right;}
[data-sec].t-al-l > .wrap :is(h1,h2,h3,p,blockquote,.blk-sub,.ph-stand){margin-left:0; margin-right:auto;}
[data-sec].t-al-c > .wrap :is(h1,h2,h3,p,blockquote,.blk-sub,.ph-stand){margin-left:auto; margin-right:auto;}
[data-sec].t-al-r > .wrap :is(h1,h2,h3,p,blockquote,.blk-sub,.ph-stand){margin-left:auto; margin-right:0;}
[data-sec].t-al-l.blk-cta > .wrap{justify-items:start;} [data-sec].t-al-r.blk-cta > .wrap{justify-items:end;}
[data-sec].t-al-c > .wrap :is(.blk-mast,.ph-tags,.ctas){justify-content:center;} [data-sec].t-al-r > .wrap :is(.ph-tags,.ctas){justify-content:flex-end;}
[data-sec].t-w-full > .wrap{max-width:none !important;}
/* text size: S, M (as designed), L, XL — the site's own fonts, scaled; game data boards keep their size */
[data-sec].t-fs-s :is(h1,h2,h3,p,li,cite,figcaption,blockquote):not(:is(h1,h2,h3,p,li,blockquote,.dm,.hb,.ticker,.sheet,.hr-sheet,.ft,.st) *){zoom:.88;}
[data-sec].t-fs-l :is(h1,h2,h3,p,li,cite,figcaption,blockquote):not(:is(h1,h2,h3,p,li,blockquote,.dm,.hb,.ticker,.sheet,.hr-sheet,.ft,.st) *){zoom:1.12;}
[data-sec].t-fs-xl :is(h1,h2,h3,p,li,cite,figcaption,blockquote):not(:is(h1,h2,h3,p,li,blockquote,.dm,.hb,.ticker,.sheet,.hr-sheet,.ft,.st) *){zoom:1.26;}

/* ---------- smaller screens ---------- */
@media (max-width:1060px){
  .blk-ti > .wrap,.blk-feature > .wrap{grid-template-columns:1fr; gap:32px;}
  .blk-ti.side-left .blk-ti-fig{order:0;}
  .blk-feed .fd-grid,.notes-index .fd-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .blk > .wrap{padding-block:44px;}
  .blk-statement > .wrap{padding-block:60px;}
  .blk-cta > .wrap{padding-block:52px;}
  .blk-feature > .wrap{padding-block:52px 60px;}
  .blk-article > .wrap{padding-block:20px;}
  .blk-stats .st-row{grid-template-columns:repeat(2,minmax(0,1fr));}
  .blk-gallery .gl{grid-template-columns:1fr;}
  .blk-feed .fd-grid,.notes-index .fd-grid{grid-template-columns:1fr;}
  .blk-article .blk-body{font-size:17px;}
  .post-head > .wrap{padding-block:28px 26px;}
  /* the computer's spacing, scaled down for a phone… */
  [data-sec].t-pt-s > .wrap{padding-top:16px !important;} [data-sec].t-pt-m > .wrap{padding-top:36px !important;} [data-sec].t-pt-l > .wrap{padding-top:64px !important;}
  [data-sec].t-pb-s > .wrap{padding-bottom:16px !important;} [data-sec].t-pb-m > .wrap{padding-bottom:36px !important;} [data-sec].t-pb-l > .wrap{padding-bottom:64px !important;}
  /* …unless the phone has its own */
  [data-sec].m-pt-s > .wrap{padding-top:16px !important;} [data-sec].m-pt-m > .wrap{padding-top:36px !important;} [data-sec].m-pt-l > .wrap{padding-top:64px !important;}
  [data-sec].m-pb-s > .wrap{padding-bottom:16px !important;} [data-sec].m-pb-m > .wrap{padding-bottom:36px !important;} [data-sec].m-pb-l > .wrap{padding-bottom:64px !important;}
  [data-sec].m-fs-s :is(h1,h2,h3,p,li,cite,figcaption,blockquote):not(:is(h1,h2,h3,p,li,blockquote,.dm,.hb,.ticker,.sheet,.hr-sheet,.ft,.st) *){zoom:.88;}
  [data-sec].m-fs-m :is(h1,h2,h3,p,li,cite,figcaption,blockquote):not(:is(h1,h2,h3,p,li,blockquote,.dm,.hb,.ticker,.sheet,.hr-sheet,.ft,.st) *){zoom:1;}
  [data-sec].m-fs-l :is(h1,h2,h3,p,li,cite,figcaption,blockquote):not(:is(h1,h2,h3,p,li,blockquote,.dm,.hb,.ticker,.sheet,.hr-sheet,.ft,.st) *){zoom:1.12;}
  [data-sec].m-fs-xl :is(h1,h2,h3,p,li,cite,figcaption,blockquote):not(:is(h1,h2,h3,p,li,blockquote,.dm,.hb,.ticker,.sheet,.hr-sheet,.ft,.st) *){zoom:1.26;}
  [data-sec].hide-m{display:none !important;}
}
@media (min-width:761px){ [data-sec].hide-d{display:none !important;} }