:root{
  --paper:#f7f4ee; --sand:#e9e2d4; --ink:#20242a; --quiet:#4d5560;
  --olive:#3f5d52; --stone:#c9c0ae; --dark:#1a1d22;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:17px/1.65 "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
}
img,svg{max-width:100%}
a{color:var(--olive)}
a:focus-visible,button:focus-visible{outline:2px solid var(--olive); outline-offset:2px}
.sheet{max-width:1120px; margin:0 auto; padding:0 24px}

/* ---- header band ---- */
.masthead{background:var(--paper); border-bottom:2px solid var(--olive)}
.masthead .sheet{
  min-height:74px; display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding-top:16px; padding-bottom:16px;
}
.wordmark{display:block; text-decoration:none; color:var(--ink)}
.wordmark b{
  display:block; font-family:Georgia,"Times New Roman",serif; font-weight:normal;
  font-size:34px; line-height:1.05; font-variant:small-caps; letter-spacing:.06em;
}
.wordmark span{display:block; font-family:Georgia,serif; font-style:italic; font-size:13px; color:var(--quiet); margin-top:4px}
.reading-route{
  font:12px/1.5 Arial,Helvetica,sans-serif; text-transform:uppercase; letter-spacing:.08em;
  color:var(--quiet); text-align:right; max-width:330px;
}

/* ---- rectangular tab menu ---- */
.tabs{border-bottom:1px solid var(--stone); background:var(--paper)}
.tabs ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:0}
.tabs li{margin:0}
.tabs a{
  display:block; padding:12px 18px; border:1px solid var(--stone); border-left:0;
  font:12px/1.4 Arial,Helvetica,sans-serif; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink); text-decoration:none; border-radius:0; border-bottom:0;
}
.tabs li:first-child a{border-left:1px solid var(--stone)}
.tabs a:hover{background:var(--sand)}
.tabs a[aria-current="page"]{background:var(--sand); box-shadow:inset 0 -3px 0 var(--olive); font-weight:bold}

/* ---- lead plate ---- */
.plate{margin:28px 0 0}
.plate .frame{border:1px solid var(--stone); background:var(--sand); overflow:hidden}
.plate .frame img{display:block; width:100%; aspect-ratio:16/7; object-fit:cover}
.plate .caption{
  border:1px solid var(--stone); border-top:0; padding:8px 14px; background:var(--paper);
  font:12px/1.5 Arial,Helvetica,sans-serif; text-transform:uppercase; letter-spacing:.08em; color:var(--quiet);
}

/* ---- body grid ---- */
.body-grid{display:grid; grid-template-columns:7fr 5fr; gap:32px; margin:36px 0 8px; align-items:start}
.story h1{
  font-family:Georgia,"Times New Roman",serif; font-weight:normal; font-size:38px; line-height:1.15;
  margin:0 0 12px; padding-bottom:12px; border-bottom:2px solid var(--olive);
}
.story h2{font-family:Georgia,serif; font-weight:normal; font-size:24px; line-height:1.2; margin:30px 0 10px}
.story h3{font-size:17px; margin:24px 0 6px}
.story p{max-width:68ch; margin:0 0 16px}

/* ---- printed panel ---- */
.panel{background:var(--sand); border:1px solid var(--stone); padding:20px 22px}
.panel h2,.panel h3{
  font:12px/1.4 Arial,Helvetica,sans-serif; text-transform:uppercase; letter-spacing:.08em;
  margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid var(--stone); color:var(--ink);
}
.panel dl{margin:0}
.panel dt{font-weight:bold; font-size:15px; margin-top:14px}
.panel dt:first-of-type{margin-top:0}
.panel dd{margin:2px 0 0; font-size:15px; line-height:1.55; color:var(--quiet)}
.panel .prow{border-top:1px solid var(--stone); padding-top:12px; margin-top:12px}
.panel .prow:first-of-type{border-top:0; padding-top:0; margin-top:0}
.panel .plabel{font:11px/1.4 Arial,Helvetica,sans-serif; text-transform:uppercase; letter-spacing:.08em; color:var(--olive)}
.panel .ptext{margin:4px 0 0; font-size:15px; line-height:1.55}

/* ---- section headings ---- */
.section{margin:44px 0}
.section > h2{
  font-family:Georgia,serif; font-weight:normal; font-size:26px; margin:0 0 6px;
}
.section > .lede{margin:0 0 22px; color:var(--quiet); max-width:64ch}
.rule{border:0; border-top:1px solid var(--stone); margin:0 0 24px}

/* ---- editorial rows ---- */
.row{display:grid; grid-template-columns:200px 1fr; gap:24px; padding:22px 0; border-top:1px solid var(--stone); align-items:start}
.row:first-of-type{border-top:0}
.row .mark{border:1px solid var(--stone); background:var(--sand)}
.row .mark img{display:block; width:100%; aspect-ratio:8/5; object-fit:cover}
.row h3{font-family:Georgia,serif; font-weight:normal; font-size:22px; margin:0 0 6px}
.row h3 a{text-decoration:none; color:var(--ink); border-bottom:1px solid var(--olive)}
.row p{margin:0 0 10px; max-width:66ch}
.row ul{margin:0; padding-left:20px; color:var(--quiet); font-size:15px}
.row li{margin:2px 0}

/* ---- gallery strip ---- */
.strip{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.strip figure{margin:0}
.strip .frame{border:1px solid var(--stone); background:var(--sand)}
.strip img{display:block; width:100%; aspect-ratio:1/1; object-fit:cover}
.strip figcaption{margin-top:8px; font-size:14px; line-height:1.5; color:var(--quiet)}
.strip .name{display:block; color:var(--ink); font-weight:bold; font-size:15px}

/* ---- record columns ---- */
.records{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--stone)}
.records > div{border-right:1px solid var(--stone); padding:20px 20px 6px}
.records > div:last-child{border-right:0}
.records h3{font:12px/1.4 Arial,Helvetica,sans-serif; text-transform:uppercase; letter-spacing:.08em; margin:0 0 10px; color:var(--olive)}
.records p{margin:0; font-size:15px; line-height:1.6}

/* ---- detail pages ---- */
.pagehead{margin:32px 0 0}
.pagehead h1{
  font-family:Georgia,"Times New Roman",serif; font-weight:normal; font-size:40px; line-height:1.12;
  margin:0 0 14px; padding-bottom:14px; border-bottom:2px solid var(--olive); max-width:22ch;
}
.standfirst{font-family:Georgia,serif; font-size:19px; line-height:1.55; color:var(--quiet); max-width:60ch; margin:0}
.detail-grid{display:grid; grid-template-columns:minmax(0,640px) 1fr; gap:40px; margin:30px 0 10px; align-items:start}
.detail-mark{border:1px solid var(--stone); background:var(--sand); margin:0 0 22px}
.detail-mark img{display:block; width:100%; aspect-ratio:16/6; object-fit:cover}
.prose p{margin:0 0 16px}
.prose h2{font-family:Georgia,serif; font-weight:normal; font-size:25px; margin:32px 0 10px}
.nextpair{display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--stone); margin:40px 0 0}
.nextpair a{
  display:block; padding:18px 20px; text-decoration:none; color:var(--ink);
  border-right:1px solid var(--stone);
}
.nextpair a:last-child{border-right:0}
.nextpair a:hover{background:var(--sand)}
.nextpair .plabel{display:block; font:11px/1.4 Arial,Helvetica,sans-serif; text-transform:uppercase; letter-spacing:.08em; color:var(--olive); margin-bottom:4px}
.nextpair .t{font-family:Georgia,serif; font-size:19px; border-bottom:1px solid var(--olive)}

/* ---- footer ---- */
.sitefoot{background:var(--dark); color:#ded8cc; margin-top:56px; padding:36px 0 26px}
.sitefoot a{color:#ded8cc}
.sitefoot .cols{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:28px}
.sitefoot .fmark{font-family:Georgia,serif; font-variant:small-caps; letter-spacing:.06em; font-size:26px; color:#f3efe6}
.sitefoot .fline{margin:8px 0 0; font-size:15px; line-height:1.6; color:#b7b1a6; max-width:34ch}
.sitefoot h2{font:11px/1.4 Arial,Helvetica,sans-serif; text-transform:uppercase; letter-spacing:.09em; margin:6px 0 10px; color:#9fb3a9}
.sitefoot ul{list-style:none; margin:0; padding:0; font-size:15px}
.sitefoot li{margin:0 0 7px}
.sitefoot .yearline{
  border-top:1px solid #3a3f47; margin-top:28px; padding-top:16px;
  font:12px/1.5 Arial,Helvetica,sans-serif; letter-spacing:.06em; text-transform:uppercase; color:#8d877d;
}

/* ---- responsive ---- */
@media (max-width:1000px){
  .body-grid{gap:24px}
  .detail-grid{gap:28px}
  .records{grid-template-columns:repeat(2,1fr)}
  .records > div:nth-child(2){border-right:0}
  .records > div:nth-child(3),.records > div:nth-child(4){border-top:1px solid var(--stone)}
}
@media (max-width:900px){
  .body-grid{grid-template-columns:1fr}
  .detail-grid{grid-template-columns:1fr}
  .strip{grid-template-columns:repeat(3,1fr)}
  .sitefoot .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  body{font-size:16px}
  .sheet{padding:0 16px}
  .masthead .sheet{flex-direction:column; align-items:flex-start; gap:6px}
  .reading-route{display:none}
  .wordmark b{font-size:28px}
  .tabs ul{display:grid; grid-template-columns:1fr 1fr}
  .tabs a{border:1px solid var(--stone); border-bottom:0; min-height:44px; display:flex; align-items:center}
  .plate .frame img{aspect-ratio:4/3; object-position:14% 72%}
  .row{grid-template-columns:1fr; gap:14px}
  .row .mark img{aspect-ratio:16/5}
  .strip{grid-template-columns:repeat(2,1fr)}
  .records{grid-template-columns:1fr}
  .records > div{border-right:0; border-top:1px solid var(--stone)}
  .records > div:first-child{border-top:0}
  .pagehead h1{font-size:31px; max-width:none}
  .story h1{font-size:30px}
  .nextpair{grid-template-columns:1fr}
  .nextpair a{border-right:0; border-bottom:1px solid var(--stone)}
  .nextpair a:last-child{border-bottom:0}
  .sitefoot .cols{grid-template-columns:1fr}
}