/* Arabian.CEO outlet archives. One stylesheet, three mastheads. Newspaper
   furniture only: a rule, a serif, a dateline. No decoration that a reader
   of the index could mistake for a live newsroom. */

:root{
  --paper:#f7f5f1;
  --ink:#17181c;
  --ink-2:#4d5158;
  --rule:#d3cdc2;
  --accent:#0d5c66;
  --f-head:'Fraunces',Georgia,serif;
  --f-body:'Source Serif 4',Georgia,serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--f-body)}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
a:hover{border-bottom-color:var(--accent);color:var(--accent)}
.wrap{max-width:44rem;margin:0 auto;padding:0 20px}

.masthead{border-bottom:3px double var(--ink);padding:26px 0 14px;margin-bottom:26px}
.masthead .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px}
.masthead h1{font:600 30px/1.1 var(--f-head);margin:0;letter-spacing:-.01em}
.masthead h1 a{border:0}
.masthead .desk{font:400 11px/1.4 var(--f-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-2)}
.masthead nav{margin-left:auto;font:400 11px/1.4 var(--f-mono);text-transform:uppercase;letter-spacing:.1em}
.masthead nav a{border:0;margin-left:14px;color:var(--ink-2)}
.masthead nav a:hover{color:var(--accent)}

.banner{border-bottom:1px solid var(--rule);padding:9px 0;font:400 12px/1.5 var(--f-mono);color:var(--ink-2);margin-bottom:34px}
.banner .wrap{max-width:44rem}

.kicker{font:400 11px/1.4 var(--f-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin:0 0 8px}
h2.headline{font:600 34px/1.15 var(--f-head);margin:0 0 12px;letter-spacing:-.012em}
.standfirst{font-size:19px;line-height:1.5;color:var(--ink-2);margin:0 0 18px}

.byline{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:9px 0;margin-bottom:26px;font:400 12px/1.5 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2)}
.byline b{color:var(--ink);font-weight:500}

article p{margin:0 0 20px}
article h3{font:600 20px/1.3 var(--f-head);margin:34px 0 12px}

.record{background:#efece5;border:1px solid var(--rule);border-left:3px solid var(--accent);padding:16px 18px;margin:30px 0;font-size:15px;line-height:1.55}
.record h3{margin:0 0 8px;font:400 11px/1.4 var(--f-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}
.record ol,.record ul{margin:0;padding-left:18px}
.record li{margin:0 0 6px}
.record .status{display:block;margin-top:10px;padding-top:10px;border-top:1px solid var(--rule);color:var(--ink-2)}

.index{list-style:none;padding:0;margin:0}
.index li{border-bottom:1px solid var(--rule);padding:16px 0}
.index .when{font:400 11px/1.4 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2)}
.index .title{font:600 21px/1.3 var(--f-head);display:block;margin:4px 0 3px}
.index .what{font-size:15px;color:var(--ink-2)}

.colophon{border-top:3px double var(--ink);margin-top:50px;padding:20px 0 60px;font-size:13px;line-height:1.6;color:var(--ink-2)}
.colophon p{margin:0 0 10px}

@media(max-width:34rem){
  h2.headline{font-size:27px}
  .masthead nav{width:100%;margin-left:0}
  .masthead nav a{margin:0 14px 0 0}
}

.also{font-size:.95em;border-top:1px solid var(--rule);padding-top:10px;margin-top:22px;color:#555}