/* ===========================================================================
   Politick — home page layout  ·  "Broadcast · Soft red"
   ---------------------------------------------------------------------------
   Page-specific layout on top of tokens.css + ui.css. Editorial / record feel:
   square, flat, hairline-ruled. The seamless tiling is a CONTAINED editorial
   device: it backs the hero block (always) and the weekly-digest accent block
   only — never the whole page. Everything else is clean paper, so the motif
   reads as a deliberate masthead, not an all-over wash.
   =========================================================================== */

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;color:var(--pk-ink);
  font-family:var(--pk-font-sans);font-size:var(--pk-text-base);
  line-height:var(--pk-leading-body);
  background:var(--pk-paper);         /* clean paper everywhere; tiling is per-block */
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

/* --- block-confined tiling layer ------------------------------------------ */
/* Sits absolutely behind a block's content, clipped to the block. The host
   block is position:relative + overflow:hidden and lifts its own content above
   this layer with z-index. Strokes inherit currentColor (ink); accent dots use
   var(--pattern-accent). Per-block opacities are baked into the inlined SVG. */
.pk-tiling{position:absolute;inset:0;z-index:0;overflow:hidden;
  pointer-events:none;color:var(--pk-ink);}
.pk-tiling svg{position:absolute;inset:0;width:100%;height:100%;display:block;}

a{color:var(--pk-accent);text-decoration:none;}
a:hover{color:var(--pk-accent-strong);}

.wrap{max-width:var(--pk-content-max);margin:0 auto;padding:0 var(--pk-gutter);}

/* --- header / chrome ------------------------------------------------------ */
.site-header{position:sticky;top:0;z-index:50;background:var(--pk-paper);
  border-bottom:var(--pk-rule-w) solid var(--pk-ink);}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;
  gap:var(--pk-space-5);padding:var(--pk-space-4) 0;}
.brand{display:flex;align-items:center;}
.brand svg{height:30px;width:auto;display:block;color:var(--pk-ink);}
.brand a{display:inline-flex;}
.nav{display:flex;align-items:center;gap:var(--pk-space-5);flex-wrap:wrap;}
.navlinks{display:flex;align-items:center;gap:var(--pk-space-5);flex-wrap:wrap;}
.nav a{color:var(--pk-ink-strong);font-size:var(--pk-text-sm);
  font-weight:var(--pk-weight-medium);}
.nav a:hover{color:var(--pk-accent);}
.nav a.soon{color:var(--pk-faint);cursor:default;}
.nav a.soon:hover{color:var(--pk-faint);}
.nav .country{display:inline-flex;align-items:center;gap:0.45em;
  font-family:var(--pk-font-mono);font-size:var(--pk-text-xs);color:var(--pk-muted);
  border-left:var(--pk-hairline) solid var(--pk-rule);padding-left:var(--pk-space-4);}
.nav-toggle{display:none;}

/* edition strip */
.edition{border-bottom:var(--pk-hairline) solid var(--pk-rule);
  background:var(--pk-paper);}
.edition .row{display:flex;align-items:center;gap:var(--pk-space-4);
  flex-wrap:wrap;padding:0.45rem 0;font-family:var(--pk-font-mono);
  font-size:var(--pk-text-2xs);letter-spacing:0.04em;color:var(--pk-muted);
  text-transform:uppercase;}
.edition .sep{color:var(--pk-rule);}
.edition .right{margin-left:auto;display:flex;align-items:center;gap:var(--pk-space-3);}

/* --- generic section ------------------------------------------------------ */
main{display:block;}
.section{padding:var(--pk-space-7) 0;}
.section + .section{border-top:var(--pk-hairline) solid var(--pk-rule);}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--pk-space-5);margin-bottom:var(--pk-space-5);flex-wrap:wrap;}
.sec-head h2{font-family:var(--pk-font-display);font-weight:600;
  font-size:var(--pk-text-xl);letter-spacing:var(--pk-track-display);
  line-height:var(--pk-leading-tight);margin:4px 0 0;}
.sec-head .more{font-size:var(--pk-text-sm);font-weight:var(--pk-weight-semibold);}
.foot-note{font-size:var(--pk-text-xs);color:var(--pk-muted);
  margin:var(--pk-space-4) 0 0;}
.foot-note a{color:var(--pk-accent);}

/* --- hero ----------------------------------------------------------------- */
/* The hero is the masthead block: the tiling fills it edge-to-edge (like the
   reference), the dark serif rides on top. A gentle horizontal mask lightens
   the pattern under the headline (left) and lets it read full on the right. */
.hero{position:relative;overflow:hidden;padding:var(--pk-space-8) 0 var(--pk-space-7);
  border-bottom:var(--pk-rule-w) solid var(--pk-ink);}
.hero > .wrap{position:relative;z-index:1;}
.hero .pk-tiling--hero svg{
  -webkit-mask-image:linear-gradient(100deg,
    rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.42) 30%, rgba(0,0,0,0.85) 62%, #000 80%);
  mask-image:linear-gradient(100deg,
    rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.42) 30%, rgba(0,0,0,0.85) 62%, #000 80%);}
.hero .eyebrow{display:flex;align-items:center;gap:0.5em;margin:0 0 var(--pk-space-4);}
.hero h1{font-family:var(--pk-font-display);font-weight:700;
  font-size:var(--pk-text-3xl);line-height:var(--pk-leading-display);
  letter-spacing:var(--pk-track-display);margin:0;max-width:18ch;}
.hero h1 .accent{color:var(--pk-accent);}
.hero .lede{font-family:var(--pk-font-sans);font-size:var(--pk-text-md);
  color:var(--pk-muted);line-height:var(--pk-leading-lead);
  max-width:54ch;margin:var(--pk-space-5) 0 0;}
.hero .search{display:flex;gap:var(--pk-space-4);align-items:stretch;
  margin:var(--pk-space-6) 0 0;flex-wrap:wrap;}
.hero .search .pk-field{flex:1;min-width:280px;}
.hero .search .pk-btn{flex:none;}
.hero .undersearch{display:flex;gap:var(--pk-space-4);align-items:center;
  flex-wrap:wrap;margin-top:var(--pk-space-4);font-size:var(--pk-text-sm);
  color:var(--pk-muted);}
.hero .undersearch a{color:var(--pk-ink-strong);text-decoration:underline;
  text-decoration-color:var(--pk-rule);text-underline-offset:2px;}
.hero .undersearch a:hover{color:var(--pk-accent);text-decoration-color:var(--pk-accent);}

/* --- stat row ------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);
  border:var(--pk-rule-w) solid var(--pk-rule);background:var(--pk-paper);}
.stats .cell{display:flex;align-items:center;gap:var(--pk-space-4);
  padding:var(--pk-space-5);border-left:var(--pk-hairline) solid var(--pk-rule);}
.stats .cell:first-child{border-left:0;}
.stats .cell .ico{color:var(--pk-muted);flex:none;}
.stats .cell .ico svg{width:26px;height:26px;display:block;}
.stats .fig{font-family:var(--pk-font-mono);
  font-feature-settings:var(--pk-font-tabular);font-weight:var(--pk-weight-medium);
  font-size:var(--pk-text-xl);line-height:1;color:var(--pk-ink);}
.stats .lbl{font-size:var(--pk-text-xs);color:var(--pk-muted);margin-top:2px;}

/* --- column grids --------------------------------------------------------- */
.cols{display:grid;gap:var(--pk-space-5);}
.cols.two-third{grid-template-columns:2fr 1fr;}
.cols.half{grid-template-columns:1fr 1fr;}
.panel{background:var(--pk-paper);border:var(--pk-rule-w) solid var(--pk-rule);
  padding:var(--pk-space-5) var(--pk-space-6);}
.panel .phead{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--pk-space-4);margin-bottom:var(--pk-space-4);flex-wrap:wrap;}
.panel .phead .pk-kicker{margin:0;}
.panel h3{font-family:var(--pk-font-display);font-weight:600;
  font-size:var(--pk-text-lg);line-height:var(--pk-leading-tight);margin:6px 0 0;}

/* latest sitting */
.sitting .title{font-family:var(--pk-font-display);font-weight:600;
  font-size:var(--pk-text-lg);line-height:var(--pk-leading-tight);margin:8px 0 0;}
.sitting .meta{display:flex;align-items:center;gap:var(--pk-space-4);
  flex-wrap:wrap;margin-top:var(--pk-space-4);font-size:var(--pk-text-sm);
  color:var(--pk-muted);}
.sitting .chips{display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center;}

/* featured speech pull-quote */
.quote{display:flex;flex-direction:column;height:100%;}
.quote blockquote{margin:var(--pk-space-4) 0 0;font-family:var(--pk-font-display);
  font-style:italic;font-weight:400;font-size:var(--pk-text-md);
  line-height:var(--pk-leading-lead);color:var(--pk-ink);}
.quote .byline{display:flex;align-items:center;gap:0.5em;margin-top:var(--pk-space-5);
  font-size:var(--pk-text-sm);color:var(--pk-muted);flex-wrap:wrap;}
.pdot{width:var(--pk-party-size);height:var(--pk-party-size);border-radius:50%;
  display:inline-block;flex:none;}
.quote .src{margin-top:var(--pk-space-3);}

/* this week — digest (the one accent block besides the hero) */
/* The tiling fades in from the left so the numbered digest stays clean and the
   motif decorates the right edge (as in the reference). */
.digest{position:relative;overflow:hidden;}
.digest > *:not(.pk-tiling){position:relative;z-index:1;}
.digest .pk-tiling--digest svg{
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0%, transparent 42%, rgba(0,0,0,0.55) 66%, #000 88%);
  mask-image:linear-gradient(90deg,
    transparent 0%, transparent 42%, rgba(0,0,0,0.55) 66%, #000 88%);}
.digest .pk-listrow .headline{font-weight:var(--pk-weight-medium);color:var(--pk-ink);}
.digest .cta-row{display:flex;gap:var(--pk-space-4);align-items:center;
  flex-wrap:wrap;margin-top:var(--pk-space-5);}

/* policy areas grid */
.topics{display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;border-top:var(--pk-hairline) solid var(--pk-rule-faint);}
.topic{display:flex;align-items:center;gap:0.7rem;padding:0.6rem 0.4rem;
  border-bottom:var(--pk-hairline) solid var(--pk-rule-faint);
  border-right:var(--pk-hairline) solid var(--pk-rule-faint);}
.topic:nth-child(3n){border-right:0;}
.topic .ico{color:var(--pk-ink-strong);flex:none;}
.topic .ico svg{width:22px;height:22px;display:block;}
.topic .name{flex:1;min-width:0;font-size:var(--pk-text-sm);color:var(--pk-ink-strong);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topic .num{font-family:var(--pk-font-mono);
  font-feature-settings:var(--pk-font-tabular);font-size:var(--pk-text-sm);
  color:var(--pk-muted);flex:none;}
a.topic:hover .name{color:var(--pk-accent);}
a.topic:hover .ico{color:var(--pk-accent);}

/* most active MPs */
.mps .pk-listrow{align-items:center;}
.mps .who{display:flex;flex-direction:column;gap:1px;}
.mps .who .nm{font-size:var(--pk-text-sm);color:var(--pk-ink);font-weight:var(--pk-weight-medium);}
.mps .who .dist{font-size:var(--pk-text-xs);color:var(--pk-muted);
  display:flex;align-items:center;gap:0.4em;}

/* recent sittings table wrapper */
.tablewrap{overflow-x:auto;}
.tablewrap .pk-table{min-width:560px;}
.pk-table td .biz{color:var(--pk-ink);}
.pk-table td .arrow{color:var(--pk-muted);}
tr:hover td .arrow{color:var(--pk-accent);}

/* future modules — ghosted */
.future-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--pk-space-5);}
.ghost{border:var(--pk-rule-w) dashed var(--pk-rule);background:transparent;
  padding:var(--pk-space-5);color:var(--pk-muted);}
.ghost .pk-kicker{display:flex;align-items:center;gap:0.5em;margin:0 0 var(--pk-space-3);}
.ghost h3{font-family:var(--pk-font-display);font-weight:600;
  font-size:var(--pk-text-md);color:var(--pk-faint);margin:0 0 var(--pk-space-3);}
.ghost .line{height:0.62em;background:var(--pk-rule-faint);margin:0.5em 0;}
.ghost .line.s{width:62%;}

/* --- footer (ink band) ---------------------------------------------------- */
/* data-theme="ink" remaps the token names, so --pk-paper here is the dark
   surface and --pk-ink the light text (the contract's whole point). */
.site-footer{background:var(--pk-paper);color:var(--pk-ink);margin-top:var(--pk-space-8);}
.site-footer .cols-foot{display:grid;
  grid-template-columns:1.6fr repeat(3,1fr);gap:var(--pk-space-6);
  padding:var(--pk-space-8) 0 var(--pk-space-6);}
.site-footer .fbrand svg{height:34px;width:auto;color:var(--pk-ink);display:block;}
.site-footer .fbrand p{color:var(--pk-muted);font-size:var(--pk-text-sm);
  max-width:34ch;margin:var(--pk-space-4) 0 0;}
.site-footer .fcol h4{font-family:var(--pk-font-sans);font-size:var(--pk-text-2xs);
  text-transform:uppercase;letter-spacing:var(--pk-track-caps);
  color:var(--pk-muted);margin:0 0 var(--pk-space-4);font-weight:600;}
.site-footer .fcol a{display:block;color:var(--pk-ink-strong);
  font-size:var(--pk-text-sm);padding:0.22rem 0;}
.site-footer .fcol a:hover{color:var(--pk-accent);}
.site-footer .fcol a.soon{color:var(--pk-faint);}
.site-footer .strip{border-top:var(--pk-hairline) solid var(--pk-rule);
  display:flex;align-items:center;gap:var(--pk-space-5);flex-wrap:wrap;
  padding:var(--pk-space-5) 0 var(--pk-space-8);
  font-family:var(--pk-font-sans);font-size:var(--pk-text-2xs);
  letter-spacing:var(--pk-track-caps);text-transform:uppercase;color:var(--pk-muted);}
.site-footer .strip .doctrine{display:flex;align-items:center;gap:0.5em;}
.site-footer .strip .accent{color:var(--pk-accent);}
.site-footer .strip .preview{margin-left:auto;
  font-family:var(--pk-font-mono);letter-spacing:0;text-transform:none;
  color:var(--pk-faint);}

/* --- responsive ----------------------------------------------------------- */
@media(max-width:860px){
  .cols.two-third,.cols.half{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr 1fr;}
  .stats .cell:nth-child(3){border-left:0;}
  .stats .cell:nth-child(odd){border-left:0;}
  .stats .cell:nth-child(3),.stats .cell:nth-child(4){
    border-top:var(--pk-hairline) solid var(--pk-rule);}
  .topics{grid-template-columns:1fr 1fr;}
  .topic:nth-child(3n){border-right:var(--pk-hairline) solid var(--pk-rule-faint);}
  .topic:nth-child(2n){border-right:0;}
  .future-grid{grid-template-columns:1fr;}
  .site-footer .cols-foot{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .hero h1{font-size:var(--pk-text-2xl);}
  .nav .desktop-only{display:none;}
  .nav-toggle{display:inline-flex;}
  .topics{grid-template-columns:1fr;}
  .topic{border-right:0;}
  .topic:nth-child(3n){border-right:0;}
  .stats{grid-template-columns:1fr;}
  .stats .cell{border-left:0;border-top:var(--pk-hairline) solid var(--pk-rule);}
  .stats .cell:first-child{border-top:0;}
  .site-footer .cols-foot{grid-template-columns:1fr;}
  .hero .search .pk-btn{flex:1;justify-content:center;}
}