/* Shared styles. The outlet name and accent color come from outlet.py;
   build.py writes the :root block below. Do not hardcode either here. */
:root{--accent:#b3261e}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:#fff;color:#16181d;
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  line-height:1.6;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}

/* ---------- fake phone chrome (only when ?chrome=phone) ---------- */
/* Screenshot mode. Headless Chrome on Windows clamps the window to a ~500px
   minimum, so a true 390px viewport is unreachable. Instead we pin the page to
   a 390px column at the top-left and crop the PNG to 390x844 after render. */
#statusbar,#urlbar,#toolbar{display:none}
body.phone{padding-top:88px;padding-bottom:52px;width:390px;overflow-x:hidden}
body.phone #statusbar,body.phone #urlbar,body.phone #toolbar{width:390px;right:auto}
body.phone #statusbar{
  display:flex;position:fixed;top:0;left:0;right:0;height:44px;z-index:100;
  background:#f7f7f7;align-items:flex-end;justify-content:space-between;
  padding:0 24px 7px;font-family:Inter,sans-serif;font-size:15px;font-weight:600;color:#000;
}
body.phone #statusbar .rt{display:flex;align-items:center;gap:5px;font-size:12px}
body.phone #statusbar .bat{
  width:23px;height:11px;border:1.4px solid #000;border-radius:3px;position:relative;
}
body.phone #statusbar .bat::after{
  content:"";position:absolute;left:1.5px;top:1.5px;bottom:1.5px;width:13px;background:#000;border-radius:1px;
}
body.phone #urlbar{
  display:flex;position:fixed;top:44px;left:0;right:0;height:44px;z-index:100;
  background:#f7f7f7;align-items:center;justify-content:center;
  border-bottom:1px solid #d8d8d8;
}
body.phone #urlbar span{
  font-family:Inter,sans-serif;font-size:14px;color:#3c3c43;
  background:#e6e6e8;border-radius:9px;padding:5px 42px 5px 16px;letter-spacing:-.1px;
}
body.phone #toolbar{
  display:flex;position:fixed;bottom:0;left:0;right:0;height:52px;z-index:100;
  background:#f7f7f7;border-top:1px solid #d8d8d8;
  align-items:center;justify-content:space-around;padding:0 18px;
}
body.phone #toolbar i{
  font-style:normal;font-size:19px;color:#0a7cff;opacity:.92;font-family:Inter,sans-serif;
}
body.phone #toolbar i.dim{opacity:.26}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid #e3e3e6;padding:14px 16px 11px;text-align:center}
.masthead .logo{
  font-family:Inter,sans-serif;font-weight:800;font-size:15px;letter-spacing:1.6px;
  text-transform:uppercase;color:#0d1117;white-space:nowrap;
}
.masthead .logo b{color:var(--accent);font-weight:800}
.masthead .rule{margin:8px auto 0;max-width:210px;height:1px;background:#e3e3e6}
.masthead .dateline{
  font-family:Inter,sans-serif;font-size:9.5px;letter-spacing:1.1px;
  text-transform:uppercase;color:#9aa0a8;margin-top:8px;
}
.navbar{
  display:flex;gap:14px;justify-content:center;padding:9px 14px;
  border-bottom:1px solid #ececed;overflow:hidden;white-space:nowrap;
  font-family:Inter,sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.6px;text-transform:uppercase;color:#5b5f66;
}
.navbar a{color:inherit}
.navbar .on{color:var(--accent)}

/* ---------- shared photo component ---------- */
.ph{
  position:relative;overflow:hidden;
  background:
    radial-gradient(70% 55% at 34% 88%, rgba(255,146,38,.62) 0%, rgba(214,86,20,.22) 38%, rgba(0,0,0,0) 72%),
    linear-gradient(178deg, #10151f 0%, #1b202b 38%, #2a2418 72%, #40301a 100%);
}
.ph::before{ /* smoke haze */
  content:"";position:absolute;inset:0;z-index:3;filter:blur(6px);
  background:
    radial-gradient(45% 38% at 30% 44%, rgba(190,160,130,.20), rgba(190,160,130,0) 70%),
    radial-gradient(38% 30% at 58% 26%, rgba(160,140,120,.14), rgba(160,140,120,0) 70%);
}
.ph::after{ /* vignette + grade */
  content:"";position:absolute;inset:0;z-index:6;
  background:
    radial-gradient(110% 85% at 40% 80%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(10,14,22,.42), rgba(0,0,0,0) 34%);
}
.ph .gnd{
  position:absolute;left:0;right:0;bottom:0;height:24%;z-index:4;
  background:linear-gradient(180deg,#241d14,#120f0b);
}
.ph .glow{
  position:absolute;left:22%;bottom:14%;width:30%;height:44%;z-index:4;filter:blur(4px);
  background:radial-gradient(50% 62% at 50% 100%, rgba(255,214,120,.95) 0%, rgba(255,138,26,.7) 34%, rgba(220,70,10,0) 76%);
}
.ph .pylon{
  position:absolute;right:19%;bottom:22%;width:2.5px;height:56%;z-index:5;
  background:rgba(6,8,12,.92);
}
.ph .pylon::before,.ph .pylon::after{
  content:"";position:absolute;left:-21px;width:45px;height:2.5px;background:rgba(6,8,12,.92);
}
.ph .pylon::before{top:10%}
.ph .pylon::after{top:30%}
.ph .pylon2{
  position:absolute;right:38%;bottom:22%;width:2px;height:40%;z-index:5;
  background:rgba(6,8,12,.8);
}
.ph .pylon2::before{
  content:"";position:absolute;left:-15px;top:12%;width:32px;height:2px;background:rgba(6,8,12,.8);
}
.ph .fence{
  position:absolute;left:0;right:0;bottom:0;height:46%;z-index:7;opacity:.5;
  background:
    repeating-linear-gradient(58deg, rgba(200,200,200,.42) 0 1px, rgba(0,0,0,0) 1px 9px),
    repeating-linear-gradient(-58deg, rgba(200,200,200,.42) 0 1px, rgba(0,0,0,0) 1px 9px);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0), #000 26%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,0), #000 26%);
}
.ph .post{position:absolute;bottom:0;width:3px;height:46%;z-index:8;background:rgba(90,90,90,.55)}

/* alternate photo treatments, so the front page isn't one image repeated */
.ph.forest{
  background:
    radial-gradient(60% 50% at 30% 20%, rgba(190,214,150,.30) 0%, rgba(0,0,0,0) 62%),
    linear-gradient(172deg, #404a2e 0%, #2c3722 44%, #1a2116 100%);
}
.ph.forest .glow,.ph.forest .fence,.ph.forest .pylon,.ph.forest .pylon2{display:none}
.ph.forest .gnd{background:linear-gradient(180deg,#232c1c,#141a10)}
.ph.civic{
  background:
    radial-gradient(70% 60% at 50% 18%, rgba(206,212,222,.42) 0%, rgba(0,0,0,0) 66%),
    linear-gradient(175deg, #7d848f 0%, #5b626d 46%, #3a3f48 100%);
}
.ph.civic .glow,.ph.civic .fence{display:none}
.ph.civic .pylon,.ph.civic .pylon2{background:rgba(30,34,40,.5)}
.ph.civic .pylon::before,.ph.civic .pylon::after,.ph.civic .pylon2::before{background:rgba(30,34,40,.5)}
.ph.civic .gnd{background:linear-gradient(180deg,#4a5058,#2e323a)}
.ph.control{
  background:
    radial-gradient(50% 44% at 62% 46%, rgba(90,190,170,.34) 0%, rgba(0,0,0,0) 70%),
    linear-gradient(176deg, #10171c 0%, #172128 50%, #0d1216 100%);
}
.ph.control .glow{
  left:56%;bottom:26%;width:22%;height:30%;
  background:radial-gradient(50% 60% at 50% 100%, rgba(120,240,210,.6) 0%, rgba(40,180,150,0) 74%);
}
.ph.control .fence,.ph.control .pylon,.ph.control .pylon2{display:none}
.ph.control .gnd{background:linear-gradient(180deg,#141c22,#090d10)}

/* ---------- article ---------- */
main{max-width:660px;margin:0 auto;padding:0 22px}
.kicker{
  font-family:Inter,sans-serif;font-size:11px;font-weight:700;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--accent);margin-top:26px;
}
h1{font-size:32px;line-height:1.17;font-weight:700;letter-spacing:-.4px;margin-top:11px;color:#0d1117}
.standfirst{font-size:18px;line-height:1.5;color:#4a4f57;margin-top:15px}
.byline{
  display:flex;align-items:center;gap:11px;
  margin-top:22px;padding-bottom:16px;border-bottom:1px solid #e8e8ea;
}
.avatar{
  width:38px;height:38px;border-radius:50%;flex:0 0 38px;
  background:linear-gradient(150deg,#6b7280,#3f4650);
  display:flex;align-items:center;justify-content:center;
  font-family:Inter,sans-serif;font-size:13px;font-weight:700;color:#fff;
}
.byline .who{font-family:Inter,sans-serif;font-size:13.5px;font-weight:600;color:#16181d}
.byline .when{font-family:Inter,sans-serif;font-size:12px;color:#7c8189;margin-top:2px}
.live{
  display:inline-block;width:6px;height:6px;border-radius:50%;background:#d93025;
  margin-right:5px;vertical-align:middle;
}
figure{margin:22px -22px 0}
figure .ph{height:212px}
figcaption{
  font-family:Inter,sans-serif;font-size:11.5px;line-height:1.45;color:#7c8189;padding:9px 22px 0;
}
figcaption b{color:#4a4f57;font-weight:600}

article p{font-size:18.5px;line-height:1.66;margin-top:19px;color:#22252b}
article p.first::first-letter{
  float:left;font-size:56px;line-height:.84;font-weight:700;margin:5px 8px 0 0;color:#0d1117;
}
article h2{
  font-family:Inter,sans-serif;font-size:19px;font-weight:700;letter-spacing:-.2px;
  margin-top:34px;color:#0d1117;
}
blockquote{margin:26px 0 4px;padding-left:18px;border-left:3px solid var(--accent)}
blockquote p{font-size:21px;line-height:1.42;font-weight:600;color:#0d1117;margin-top:0}
blockquote cite{
  display:block;font-family:Inter,sans-serif;font-size:12px;font-style:normal;
  color:#7c8189;margin-top:9px;
}
.pull{margin:28px 0;padding:16px 18px;background:#f6f6f7;border-radius:6px;font-family:Inter,sans-serif}
.pull .lab{font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent)}
.pull .big{font-size:34px;font-weight:800;letter-spacing:-1px;margin-top:5px;color:#0d1117}
.pull .sub{font-size:13px;color:#5b5f66;margin-top:3px;line-height:1.45}

/* timeline, used by the docket piece */
.tl{margin:26px 0 0;border-left:2px solid #e3e3e6;padding-left:20px}
.tl .row{position:relative;padding:0 0 22px}
.tl .row::before{
  content:"";position:absolute;left:-27px;top:7px;width:11px;height:11px;
  border-radius:50%;background:var(--accent);border:2.5px solid #fff;
}
.tl .d{
  font-family:Inter,sans-serif;font-size:11px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:var(--accent);
}
.tl .h{font-size:17px;font-weight:600;line-height:1.35;margin-top:4px;color:#16181d}
.tl .b{font-size:15px;line-height:1.55;color:#5b5f66;margin-top:5px}

.related{margin:38px 0 0;padding-top:20px;border-top:2px solid #16181d}
.related h3{
  font-family:Inter,sans-serif;font-size:12px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:#16181d;
}
.related a{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 0;border-bottom:1px solid #ececed;
}
.related .num{font-family:Inter,sans-serif;font-size:19px;font-weight:800;color:#d5d7da;flex:0 0 20px}
.related .t{font-size:16px;line-height:1.35;font-weight:600;color:#16181d}
.related .m{font-family:Inter,sans-serif;font-size:11px;color:#8b9098;margin-top:4px}

/* ---------- front page ---------- */
.lead{padding-top:20px}
.lead .ph{height:196px;margin:0 -22px}
.lead .kicker{margin-top:16px}
.lead h2.hd{
  font-size:29px;line-height:1.17;font-weight:700;letter-spacing:-.4px;margin-top:9px;color:#0d1117;
}
.lead .dek{font-size:16.5px;line-height:1.48;color:#4a4f57;margin-top:11px}
.lead .meta{font-family:Inter,sans-serif;font-size:11.5px;color:#8b9098;margin-top:12px}

.sechead{
  display:flex;align-items:center;gap:11px;margin-top:34px;
  font-family:Inter,sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:1.3px;text-transform:uppercase;color:#16181d;
}
.sechead::after{content:"";flex:1;height:2px;background:#16181d;opacity:.12}

.story{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid #ececed}
.story .txt{flex:1;min-width:0}
.story .t{font-size:17px;line-height:1.32;font-weight:600;color:#16181d}
.story .d{font-size:14.5px;line-height:1.45;color:#6b7078;margin-top:6px}
.story .m{font-family:Inter,sans-serif;font-size:10.5px;color:#9aa0a8;margin-top:7px;letter-spacing:.3px}
.story .ph{flex:0 0 96px;height:72px;border-radius:3px}

.headlist{padding:4px 0 0}
.headlist a{display:block;padding:13px 0;border-bottom:1px solid #ececed}
.headlist .t{font-size:16px;line-height:1.34;font-weight:600;color:#16181d}
.headlist .m{font-family:Inter,sans-serif;font-size:10.5px;color:#9aa0a8;margin-top:6px;letter-spacing:.3px}

.opinion .story .t{font-style:italic}
.opinion .who{
  font-family:Inter,sans-serif;font-size:11px;font-weight:600;
  color:var(--accent);margin-top:6px;letter-spacing:.3px;
}



/* wrappers used by both layouts */
.wrap{width:100%}
.rail{display:none}
.grid3{display:block}
.fp-top{display:block}

/* =====================================================================
   DESKTOP
   Everything above this point is the mobile layout, which the phone
   screenshots depend on. Do not move desktop rules out of these blocks.
   ===================================================================== */

@media(min-width:700px){
  .masthead{padding:18px 16px 13px}
  .masthead .logo{font-size:26px;letter-spacing:4px}
  .masthead .rule{max-width:340px}
  .masthead .dateline{font-size:10.5px;letter-spacing:1.4px}
  .navbar{font-size:11px;gap:22px;padding:11px 14px}
  .navbar .hide-sm{display:inline}
  h1{font-size:40px}
  figure{margin:26px 0 0}
  figure .ph{height:320px;border-radius:4px}
  figcaption{padding:10px 0 0;font-size:12px}
  article p{font-size:19px}
  .lead .ph{margin:0;border-radius:4px}
}

@media(min-width:1000px){
  .wrap{max-width:1200px;margin:0 auto;padding:0 40px;
        display:grid;grid-template-columns:minmax(0,1fr);gap:0}
  main{max-width:none;margin:0;padding:0}

  /* ---- article page: reading column + sticky rail ---- */
  .artwrap{grid-template-columns:minmax(0,720px) minmax(0,300px);
           gap:64px;justify-content:center;align-items:start;padding-top:8px}
  .artwrap main{min-width:0}
  .artwrap .mobile-rail{display:none}
  .artwrap .rail{display:block;position:sticky;top:28px;padding-top:52px}
  .artwrap .rail .related{margin-top:0;border-top-width:2px}
  .artwrap .rail .related .t{font-size:15px}
  .artwrap figure{margin:26px 0 0}
  .artwrap figure .ph{height:380px}
  h1{font-size:46px;line-height:1.11;letter-spacing:-.9px}
  .standfirst{font-size:20px;max-width:640px}
  article p{font-size:19.5px;line-height:1.68}
  article h2{font-size:22px;margin-top:40px}
  blockquote p{font-size:24px}
  .pull{padding:20px 24px}
  .pull .big{font-size:40px}

  /* ---- front page: lead + right rail, then 3-up grids ---- */
  .fp-top{display:grid;grid-template-columns:minmax(0,1.72fr) minmax(0,1fr);
          gap:44px;align-items:start;padding-top:26px}
  .fp-top .lead{padding-top:0}
  .fp-top .lead .ph{height:404px}
  .fp-top .lead h2.hd{font-size:40px;line-height:1.13;margin-top:12px}
  .fp-top .lead .dek{font-size:18px;margin-top:13px}
  .fp-rail{border-left:1px solid #ececed;padding-left:32px}
  .fp-rail .sechead{margin-top:0}
  .fp-rail .story{flex-direction:row-reverse;gap:14px;padding:15px 0}
  .fp-rail .story .ph{flex:0 0 78px;height:60px}
  .fp-rail .story .t{font-size:15.5px}
  .fp-rail .story .d{display:none}
  .fp-rail .story:last-child{border-bottom:none}

  .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
  .grid3 .story{display:flex;flex-direction:column;padding:0;border-bottom:none}
  .grid3 .story .ph{order:-1}
  .grid3 .story .ph{width:100%;height:158px;margin-bottom:13px;border-radius:3px}
  .grid3 .story .t{font-size:19px;line-height:1.28}
  .grid3 .story .d{font-size:15px;margin-top:8px}
  .grid3.opinion .story{border-top:3px solid #16181d;padding-top:14px}
  .grid3.opinion .story .t{font-size:21px}

  .sechead{margin-top:46px;font-size:12.5px}
  footer{margin-top:56px}
}

@media(min-width:1360px){
  .wrap{max-width:1280px}
  .fp-top .lead .ph{height:440px}
  .fp-top .lead h2.hd{font-size:45px}
}

/* ---------- breadcrumb + page headers ---------- */
.crumb{
  display:inline-block;margin-top:24px;font-family:Inter,sans-serif;
  font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--accent);
}
.crumb + .kicker{margin-top:10px}
.pagehead{padding:26px 0 0;border-bottom:2px solid #16181d;padding-bottom:18px;margin-bottom:4px}
.pagehead h1{margin-top:0;font-size:34px}
.pagehead .standfirst{margin-top:10px;font-size:17px}
.empty{padding:40px 0;color:#8b9098;font-size:17px}

/* ---------- section pages ---------- */
.seclead{padding:22px 0 4px;border-bottom:1px solid #ececed}
.seclead .ph{height:210px;margin:0 -22px}
.seclead .kicker{margin-top:16px}
.seclead h2.hd{font-size:28px;line-height:1.16;font-weight:700;margin-top:9px;color:#0d1117}
.seclead .dek{font-size:16.5px;line-height:1.48;color:#4a4f57;margin-top:10px}
.seclead .meta{font-family:Inter,sans-serif;font-size:11.5px;color:#8b9098;margin:12px 0 18px}
.seclist{padding-top:4px}

/* ---------- section header with "all" link ---------- */
.sechead .secmore{
  font-family:Inter,sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.8px;color:var(--accent);text-transform:uppercase;white-space:nowrap;
}
.sechead::after{order:1}
.sechead .secmore{order:2;margin-left:11px}
.fpdivide{height:2px;background:#16181d;opacity:.12;margin-top:30px}

/* ---------- most read ---------- */
.mostread{margin-top:30px}
.mostread a{display:flex;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid #ececed}
.mostread a:last-child{border-bottom:none}
.mrn{
  font-family:Inter,sans-serif;font-size:20px;font-weight:800;color:#d5d7da;
  flex:0 0 22px;line-height:1;
}
.mrt{font-size:15px;line-height:1.34;font-weight:600;color:#16181d}

/* ---------- staff ---------- */
.people{padding-top:22px}
.person{display:flex;gap:15px;padding:19px 0;border-bottom:1px solid #ececed}
.person .avatar{width:46px;height:46px;flex:0 0 46px;font-size:15px}
.pname{font-family:Inter,sans-serif;font-size:16px;font-weight:700;color:#16181d}
.ptitle{
  font-family:Inter,sans-serif;font-size:11px;font-weight:600;letter-spacing:.7px;
  text-transform:uppercase;color:var(--accent);margin-top:3px;
}
.pbio{font-size:16px;line-height:1.55;color:#4a4f57;margin-top:7px}

/* ---------- contact ---------- */
.contactgrid{display:block;padding-top:24px}
.cbox{padding:20px;border:1px solid #e3e3e6;border-radius:6px;margin-bottom:14px}
.cbox.tip{border-color:var(--accent);border-width:1.5px;background:#fdf7f6}
.cbox h3{
  font-family:Inter,sans-serif;font-size:11.5px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:#16181d;
}
.cbig{
  font-family:Inter,sans-serif;font-size:23px;font-weight:700;color:#0d1117;
  margin-top:9px;letter-spacing:-.4px;
}
.cbox > a{
  display:inline-block;font-family:Inter,sans-serif;font-size:13.5px;
  color:var(--accent);margin-top:6px;
}
.cbox p{font-size:15px;line-height:1.55;color:#5b5f66;margin-top:10px}
.cbox p a{color:var(--accent)}

/* ---------- corrections ---------- */
.corrections{padding-top:20px}
.crow{padding:18px 0;border-bottom:1px solid #ececed}
.cdate{
  font-family:Inter,sans-serif;font-size:10.5px;font-weight:700;letter-spacing:1.1px;
  text-transform:uppercase;color:#8b9098;
}
.cart{
  display:block;font-size:17px;font-weight:600;line-height:1.32;
  color:#16181d;margin-top:6px;
}
.cbody p{font-size:15.5px;line-height:1.58;color:#5b5f66;margin-top:7px}

/* ---------- footer ---------- */
footer{margin-top:52px;border-top:3px solid #16181d;background:#fafafa;padding:34px 0 0}
footer .wrap{display:block}
.fcols{display:block;padding:0 22px}
.fcol{padding-bottom:26px}
.fcol h4{
  font-family:Inter,sans-serif;font-size:11px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:#16181d;margin-bottom:11px;
}
.fcol a{
  display:block;font-family:Inter,sans-serif;font-size:14px;color:#4a4f57;
  padding:5px 0;
}
.fcol a:hover{color:var(--accent)}
.flogo{
  font-family:Inter,sans-serif;font-weight:800;font-size:15px;letter-spacing:1.6px;
  text-transform:uppercase;color:#0d1117;
}
.flogo b{color:var(--accent)}
.fbrand p{font-size:14.5px;line-height:1.6;color:#5b5f66;margin-top:11px;max-width:340px}
.faddr{
  font-family:Inter,sans-serif;font-size:12.5px;line-height:1.7;color:#8b9098;margin-top:13px;
}
.fline{
  font-family:Inter,sans-serif;font-size:14px;color:#16181d;
  padding:5px 0;font-weight:600;
}
.fline span{display:block;font-size:10.5px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:#9aa0a8;margin-bottom:1px}
.fmail{margin-top:9px !important;color:var(--accent) !important;font-size:13.5px !important}
.fbar{
  margin-top:8px;padding:17px 22px;border-top:1px solid #e3e3e6;
  font-family:Inter,sans-serif;font-size:11.5px;color:#9aa0a8;line-height:1.9;
}
.fsat{color:var(--accent)}
.flegal a{display:inline-block;color:#9aa0a8;margin-right:15px}

@media(min-width:700px){
  .pagehead h1{font-size:40px}
  .seclead .ph{height:300px;margin:0;border-radius:4px}
  .seclead h2.hd{font-size:34px}
  .contactgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .cbox{margin-bottom:0}
  .fcols{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:34px;
         max-width:1200px;margin:0 auto;padding:0 40px}
  .fbar{display:flex;justify-content:space-between;align-items:center;gap:20px;
        max-width:1200px;margin:8px auto 0;padding:17px 40px}
  .crow{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:start}
  .cdate{padding-top:3px}
}

@media(min-width:1000px){
  .pagehead{padding-top:34px}
  .pagehead h1{font-size:46px;letter-spacing:-.9px}
  .narrow main{max-width:760px;margin:0 auto}
  .seclead{padding:30px 0 26px}
  .seclead a{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
             gap:40px;align-items:center}
  .seclead .ph{height:300px}
  .seclead .sectxt .kicker{margin-top:0}
  .seclead h2.hd{font-size:32px}
  .seclist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding-top:26px}
  .seclist .story{display:flex;flex-direction:column;padding:0;border-bottom:none}
  .seclist .story .ph{order:-1}
  .seclist .story .ph{width:100%;height:150px;margin-bottom:12px;border-radius:3px}
  .seclist .story .t{font-size:18px;line-height:1.3}
  .people{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
  .person{border-bottom:1px solid #ececed}
  .contactgrid{grid-template-columns:repeat(2,1fr);gap:18px}
  .mostread{margin-top:34px}
}