/* Dhofar Chronicle — dark header, Georgia headlines, two-column index. */

:root{
  --navy:#101828;
  --navy-2:#1d2a3f;
  --paper:#fdfcf9;
  --ink:#20242c;
  --ink-2:#5a6270;
  --rule:#d9d5cc;
  --gold:#b98a2f;
  --f-head:Georgia,'Times New Roman',serif;
  --f-body:'Segoe UI',Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.7 var(--f-body)}
a{color:var(--navy);text-decoration:none}
a:hover{color:var(--gold)}

.masthead{background:var(--navy);color:#fff;padding:26px 0 18px;border-bottom:4px solid var(--gold)}
.masthead .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px}
.masthead h1{font:700 30px/1.1 var(--f-head);margin:0;letter-spacing:.02em}
.masthead h1 a{color:#fff}
.masthead h1 a:hover{color:var(--gold)}
.masthead .desk{font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:#a8b3c4}
.masthead nav{margin-left:auto;font-size:12px;text-transform:uppercase;letter-spacing:.1em}
.masthead nav a{color:#cfd7e3;margin-left:16px}
.masthead nav a:hover{color:var(--gold)}

.wrap{max-width:56rem;margin:0 auto;padding:0 20px}

.kicker{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--gold);margin:30px 0 10px}
h2.headline{font:700 32px/1.2 var(--f-head);margin:0 0 12px;color:var(--navy)}
.standfirst{font-size:18px;line-height:1.55;color:var(--ink-2);margin:0 0 20px;font-style:italic;font-family:var(--f-head)}

.byline{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2);border-top:2px solid var(--navy);border-bottom:1px solid var(--rule);padding:8px 0;margin-bottom:26px}
.byline b{color:var(--navy)}

article p{margin:0 0 20px}
article h3{font:700 20px/1.3 var(--f-head);color:var(--navy);margin:32px 0 12px;padding-left:12px;border-left:4px solid var(--gold)}

.factsbox{background:var(--navy);color:#e8ecf3;padding:18px 20px;margin:32px 0;font-size:14px;line-height:1.6}
.factsbox h3{margin:0 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--gold);border:0;padding:0}
.factsbox ul{margin:0;padding-left:18px}
.factsbox li{margin:0 0 6px}
.factsbox a{color:#fff;text-decoration:underline}

.index{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 34px}
.index li{border-bottom:1px solid var(--rule);padding:18px 0}
.index .when{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--gold);font-weight:700}
.index .title{font:700 20px/1.3 var(--f-head);display:block;margin:5px 0 4px;color:var(--navy)}
.index .title:hover{color:var(--gold)}
.index .what{font-size:14px;color:var(--ink-2)}

.colophon{background:var(--navy);color:#a8b3c4;margin-top:56px;padding:24px 0 60px;font-size:13px;line-height:1.7}
.colophon p{margin:0 0 10px}
.colophon a{color:#cfd7e3}

@media(max-width:44rem){
  .index{grid-template-columns:1fr}
  h2.headline{font-size:26px}
  .masthead nav{margin-left:0;width:100%}
  .masthead nav a{margin:0 16px 0 0}
}