/* Poker News Strategy - broadsheet sheet */
:root{
  --canvas:#DCD8CE; --paper:#FBF8F1; --band:#F2EEE4;
  --ink:#191713; --meta:#56514A; --brick:#8C2B22; --rule:#C6C0B2;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);
  font:17px/1.62 Georgia,"Times New Roman",serif}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--brick);text-decoration:underline;text-underline-offset:2px}
a:hover{text-decoration:none}
a:focus-visible,.overflow:focus-visible{outline:2px solid var(--brick);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--paper);padding:8px 12px;z-index:5}
.skip:focus{left:8px;top:8px}
.sheet{max-width:1300px;margin:0 auto;background:var(--paper);
  border-left:1px solid var(--rule);border-right:1px solid var(--rule);padding:0 28px 0}
.label,.util,.byline,.caption-label,.deptlabel,.brieflabel{
  font:11px/1.4 Arial,"Helvetica Neue",sans-serif;letter-spacing:.14em;text-transform:uppercase}
.label,.deptlabel,.brieflabel{color:var(--brick)}
.byline,.caption-label{color:var(--meta)}

/* 1 edition utility */
.util{display:flex;justify-content:space-between;align-items:center;gap:12px;
  color:var(--meta);padding:9px 0;border-bottom:1px solid var(--rule)}
.util span,.util a{white-space:nowrap}

/* 2 masthead */
.masthead{padding:22px 0 0;text-align:center}
.masthead .flag{font:700 62px/1.02 Georgia,"Times New Roman",serif;letter-spacing:-.01em;margin:0}
.masthead .strap{font:italic 17px/1.5 Georgia,serif;color:var(--meta);margin:8px 0 14px}
.masthead .rule3{border:0;border-top:3px solid var(--ink);margin:0}
.sectionmenu{border-bottom:1px solid var(--rule);padding:0;margin:0 0 20px}
.sectionmenu ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  margin:0;padding:0}
.sectionmenu li{border-right:1px solid var(--rule)}
.sectionmenu li:last-child{border-right:0}
.sectionmenu a{display:block;padding:9px 16px;text-decoration:none;color:var(--ink);
  font:11px/1.4 Arial,"Helvetica Neue",sans-serif;letter-spacing:.14em;text-transform:uppercase}
.sectionmenu a:hover,.sectionmenu a[aria-current="page"]{color:var(--brick)}
.sectionmenu a[aria-current="page"]{border-bottom:3px solid var(--brick)}

/* pip rule */
.piprule{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.piprule .t{font:11px/1.4 Arial,"Helvetica Neue",sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brick);white-space:nowrap}
.piprule .line{flex:1;height:1px;background:var(--ink)}
.pip{flex:none}

/* 3-5 front grid */
.frontgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px;
  padding:4px 0 0;border-bottom:1px solid var(--rule)}
.lead{grid-column:1/8;padding-bottom:26px}
.secondary{grid-column:8/11;padding:0 0 26px 22px;border-left:1px solid var(--rule)}
.rail{grid-column:11/13;padding:0 0 26px 22px;border-left:1px solid var(--rule)}
.lead h2.head{font:700 64px/1.04 Georgia,serif;margin:6px 0 12px}
.lead .deck{font:19px/1.5 Georgia,serif;color:var(--meta);max-width:34em;margin:0 0 10px}
figure{margin:16px 0 22px;border-top:1px solid var(--rule);padding-top:12px}
.leadbody{margin:18px 0 0;border-top:1px solid var(--rule);padding-top:14px}
.leadbody p{margin:0 0 14px}
.leadbody .more{font:11px/1.4 Arial,"Helvetica Neue",sans-serif;letter-spacing:.14em;text-transform:uppercase}
ul.routes{list-style:none;margin:0;padding:0}
ul.routes li{border-top:1px solid var(--rule);padding:8px 0;font-size:16px}
figure img{border:1px solid var(--rule)}
figcaption{font:15px/1.45 Georgia,serif;color:var(--meta);margin-top:8px}
.stack{border-top:1px solid var(--rule);padding:14px 0}
.stack:first-of-type{border-top:0;padding-top:0}
.stack h3{font:700 30px/1.1 Georgia,serif;margin:6px 0 8px}
.stack p{margin:0;font-size:16px;color:var(--meta)}
.rail .brief{border-top:1px solid var(--rule);padding:11px 0}
.rail .brief:first-of-type{border-top:0}
.rail .brief h3{font:700 17px/1.28 Georgia,serif;margin:5px 0 0}
.rail ul.routes li{font-size:15px}
.rail .brieflist+.piprule{margin-top:18px}
.secondary .stack h3{font:700 26px/1.14 Georgia,serif}

/* 6 department strips */
.departments{padding:24px 0 0;border-bottom:1px solid var(--rule)}
.dept{background:var(--band);border:1px solid var(--rule);border-left:4px solid var(--brick);
  padding:16px 20px;margin:0 0 18px}
.deptbody{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.deptbody.one{display:block}
.deptbody .stack{padding:12px 0}
.deptbody .stack h3{font-size:26px}
.deptbody>.stack+.stack{border-left:1px solid var(--rule);padding-left:24px;border-top:1px solid var(--rule)}
.dept figure{grid-column:1/3;border-top:1px solid var(--rule)}

/* 7 opinion / archive */
.opinion{display:grid;grid-template-columns:7fr 5fr;gap:0 28px;padding:24px 0;
  border-bottom:1px solid var(--rule)}
.opinion .col2{border-left:1px solid var(--rule);padding-left:26px}
.opinion h3{font:700 30px/1.12 Georgia,serif;margin:6px 0 10px}
.opinion p{margin:0 0 12px;max-width:40em}
.opinion .grouped{margin:0 0 14px}
.opinion .grouped ul{list-style:none;margin:6px 0 0;padding:0}
.opinion .grouped li{border-top:1px solid var(--rule);padding:7px 0;font-size:16px}

/* 8 colophon */
.colophon{display:grid;grid-template-columns:repeat(4,1fr);gap:0 24px;padding:24px 0 34px}
.colophon>div{padding-left:22px;border-left:1px solid var(--rule)}
.colophon>div:first-child{padding-left:0;border-left:0}
.colophon h2{font:11px/1.4 Arial,"Helvetica Neue",sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brick);margin:0 0 10px}
.colophon ul{list-style:none;margin:0;padding:0}
.colophon li{padding:5px 0;font-size:16px}
.colophon p{font-size:16px;color:var(--meta);margin:0}
.colophon .miniflag{font:700 20px/1.2 Georgia,serif;color:var(--ink);margin:0 0 6px}

/* inner pages */
.pagehead{padding:6px 0 0;border-bottom:1px solid var(--rule)}
.pagehead h1{font:700 44px/1.08 Georgia,serif;margin:8px 0 10px;max-width:22em}
.pagehead .standfirst{font:19px/1.5 Georgia,serif;color:var(--meta);max-width:44em;margin:0 0 20px}
.article{display:grid;grid-template-columns:minmax(0,700px) 1fr;gap:0 32px;padding:22px 0 0}
.article .body{max-width:700px}
.article h1{font:700 46px/1.06 Georgia,serif;margin:8px 0 12px}
.article .deck{font:20px/1.5 Georgia,serif;color:var(--meta);margin:0 0 14px;max-width:36em}
.article .credit{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:9px 0;margin:0 0 22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.article .body h2{font:700 26px/1.2 Georgia,serif;margin:26px 0 10px;
  border-top:1px solid var(--rule);padding-top:14px}
.article .body p{margin:0 0 15px}
.article aside{border-left:1px solid var(--rule);padding-left:28px}
.article aside .brief{border-top:1px solid var(--rule);padding:11px 0}
.article aside .brief h3{font:700 18px/1.3 Georgia,serif;margin:5px 0 0}
.returns{border-top:1px solid var(--rule);padding:16px 0 34px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.related{border-top:3px solid var(--ink);margin:28px 0 0;padding:14px 0 0}
.related .grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.related .stack{border-top:0;padding-top:0}
.related .stack h3{font-size:24px}
.related .stack+.stack{border-left:1px solid var(--rule);padding-left:24px}
.article aside .routes{margin-top:4px}

/* section lead */
.sectionlead{display:grid;grid-template-columns:6fr 5fr;gap:0 28px;padding:18px 0 6px;
  border-bottom:1px solid var(--rule)}
.sectionlead .col2{border-left:1px solid var(--rule);padding-left:26px}
.sectionlead h2{font:700 34px/1.1 Georgia,serif;margin:6px 0 10px}
.sectionlead .deck{font:18px/1.5 Georgia,serif;color:var(--meta);margin:0 0 14px}
.sectionlead p{margin:0 0 14px}
.sectionlead figure{margin:0}

/* listings */
.listing{padding:20px 0 0;border-bottom:1px solid var(--rule)}
.listing .row{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;
  border-top:1px solid var(--rule);padding:16px 0}
.listing .row:first-child{border-top:0}
.listing .row h3{font:700 28px/1.12 Georgia,serif;margin:6px 0 0}
.listing .row p{margin:0;color:var(--meta);font-size:16px}

/* tables */
.article>*,.frontgrid>*,.deptbody>*,.opinion>*,.colophon>*,.listing .row>*,.related .grid>*{min-width:0}
.overflow{overflow-x:auto;max-width:100%;margin:20px 0}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:16px}
p.tablelabel{font:11px/1.4 Arial,"Helvetica Neue",sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brick);margin:20px 0 8px}
th,td{border:1px solid var(--rule);padding:8px 10px;text-align:left;vertical-align:top}
thead th{font:11px/1.4 Arial,"Helvetica Neue",sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--meta);background:var(--band)}
tbody th{font:400 16px/1.5 Georgia,serif;color:var(--ink);white-space:nowrap}

.notfound{padding:40px 0 60px;max-width:44em}
.notfound h1{font:700 44px/1.1 Georgia,serif;margin:0 0 14px}

@media (max-width:1100px){
  .frontgrid{grid-template-columns:repeat(8,1fr)}
  .lead{grid-column:1/6}
  .secondary{grid-column:6/9}
  .rail{grid-column:1/9;padding:18px 0 26px;border-left:0;border-top:1px solid var(--rule)}
  .rail .brieflist{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
  .article{grid-template-columns:1fr}
  .article aside{border-left:0;border-top:1px solid var(--rule);padding:16px 0 0;margin-top:24px}
  .masthead .flag{font-size:50px}
  .lead h2.head{font-size:50px}
}
@media (max-width:760px){
  .sheet{padding:0 16px}
  .util{flex-direction:column;align-items:flex-start;gap:4px}
  .masthead .flag{font-size:34px}
  .masthead .strap{font-size:15px}
  .sectionmenu ul{justify-content:flex-start}
  .sectionmenu a{padding:8px 10px}
  .frontgrid{display:block}
  .lead,.secondary,.rail{padding-left:0;border-left:0}
  .secondary,.rail{border-top:1px solid var(--rule);padding-top:16px}
  .rail .brieflist{display:block}
  .lead h2.head{font-size:34px}
  .lead .deck{font-size:17px}
  .stack h3,.deptbody .stack h3{font-size:24px}
  .deptbody{display:block}
  .deptbody>.stack+.stack{border-left:0;padding-left:0}
  .dept{padding:14px}
  .opinion,.colophon,.listing .row,.related .grid{display:block}
  .sectionlead{display:flex;flex-direction:column}
  .sectionlead .col1{order:2;border-top:1px solid var(--rule);padding-top:14px;margin-top:14px}
  .sectionlead .col2{order:1;border-left:0;padding-left:0}
  .sectionlead h2{font-size:28px}
  .opinion .col2{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:16px}
  .colophon>div{padding-left:0;border-left:0;border-top:1px solid var(--rule);padding-top:14px}
  .colophon>div:first-child{border-top:0}
  .related .stack+.stack{border-left:0;padding-left:0}
  .article h1{font-size:32px}
  .pagehead h1{font-size:32px}
  .article .deck{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}
