/* livingroomroma.com ("The Roman Evening") — style-v1
   Evening-timeline archetype: stages down the page with a clock marker on the
   left. Three-part masthead (wordmark left / nav centre / mark far right).
   Dark single-row footer. Nav collapses at 940px — measured need 963px, so the
   burger appears just before the three parts collide. */

:root{
  --paper:#faf7f3;
  --ink:#1c1917;
  --dim:#6f665f;
  --wine:#6b2033;
  --brass:#b08d57;
  --rule:#e6dfd6;
  --night:#1a1513;
  --rail:1160px;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Rubik,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--wine)}
p{text-wrap:pretty}
h1,h2,h3{margin:0;font-family:Vollkorn,Georgia,serif;text-wrap:balance}

.rail{width:100%;max-width:var(--rail);margin:0 auto;padding:0 30px}

/* three-part masthead */
.cap{background:var(--paper);border-bottom:1px solid var(--rule)}
.caprow{display:flex;align-items:center;justify-content:space-between;gap:40px;padding-top:18px;padding-bottom:18px}
.wordm{display:flex;flex-direction:column;text-decoration:none;color:inherit;line-height:1.14;flex:0 0 auto}
.wordm b{font-family:Vollkorn,Georgia,serif;font-weight:600;font-size:24px}
.wordm i{font-style:italic;font-size:12.5px;color:var(--dim);font-family:Vollkorn,Georgia,serif}
.mid{display:flex;align-items:center;gap:24px;flex:1 1 auto;justify-content:center}
.mid a{
  color:var(--ink);text-decoration:none;font-size:15px;white-space:nowrap;
  padding-bottom:3px;border-bottom:2px solid transparent;
}
.mid a:hover{border-bottom-color:var(--brass)}
.mid a.on{border-bottom-color:var(--wine);color:var(--wine)}
.stamp{flex:0 0 auto;display:block}
.stamp img{width:48px;height:auto}
.drop{display:none}

@media (max-width:940px){
  .caprow{gap:0;justify-content:space-between}
  .mid,.stamp{display:none}
  .drop{display:block}
  .drop summary{
    list-style:none;display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;padding:10px;cursor:pointer;
  }
  .drop summary::-webkit-details-marker{display:none}
  .drop summary span{display:block;height:2px;background:var(--ink);border-radius:2px}
  .dropin{
    position:absolute;left:0;right:0;z-index:20;background:var(--paper);
    border-bottom:1px solid var(--rule);display:flex;flex-direction:column;padding:2px 30px 14px;
  }
  .dropin a{color:var(--ink);text-decoration:none;font-size:16px;padding:12px 0;border-bottom:1px solid var(--rule)}
  .dropin a.on{color:var(--wine)}
  .cap{position:relative}
}

.curtain img{width:100%;height:400px;object-fit:cover}
@media (max-width:940px){.curtain img{height:250px}}

.body{padding-top:46px;padding-bottom:70px}
.preamble{max-width:660px;margin-bottom:52px}
.preamble h1{font-size:clamp(29px,4.4vw,42px);font-weight:600;line-height:1.13;margin-bottom:14px}
.preamble p{margin:0;color:var(--dim);font-size:17.5px}

/* the timeline */
.stage{display:grid;grid-template-columns:190px 1fr;gap:40px;padding:34px 0;border-top:1px solid var(--rule)}
@media (max-width:820px){.stage{grid-template-columns:1fr;gap:18px}}
.clock{position:sticky;top:26px;align-self:start}
@media (max-width:820px){.clock{position:static}}
.clockt{
  display:block;font-family:Vollkorn,Georgia,serif;font-size:26px;font-weight:600;
  color:var(--ink);line-height:1.15;
}
.clockc{
  display:inline-block;margin-top:6px;font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass);text-decoration:none;
}
.clockc:hover{color:var(--wine)}

.slabs{display:flex;flex-direction:column;gap:30px}
.slab{display:flex;gap:24px;align-items:flex-start}
.slabpic{flex:0 0 250px}
.slabpic img{width:100%;aspect-ratio:3/2;object-fit:cover}
.slabtext h3{font-size:22px;font-weight:600;line-height:1.24;margin:6px 0 7px}
.slabtext h3 a{color:var(--ink);text-decoration:none}
.slabtext h3 a:hover{color:var(--wine)}
.slabtext p{margin:0 0 8px;color:var(--dim);font-size:16px;max-width:60ch}
@media (max-width:620px){.slab{flex-direction:column;gap:12px}.slabpic{flex:none;width:100%}}
.tick{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.when{font-size:12.5px;color:var(--dim)}

/* article */
.piece{max-width:700px}
.piece h1{font-size:clamp(28px,4.3vw,39px);font-weight:600;line-height:1.15;margin:9px 0 12px}
.by{color:var(--dim);font-size:14px;margin:0 0 26px}
.piecepic{margin:0 0 28px}
.piecepic img{width:100%;aspect-ratio:3/2;object-fit:cover}
.lead{
  font-family:Vollkorn,Georgia,serif;font-size:20.5px;line-height:1.5;font-style:italic;
  margin:0 0 30px;padding-left:20px;border-left:3px solid var(--wine);
}
.piece h2{font-size:24px;font-weight:600;line-height:1.3;margin:36px 0 12px}
.piece p{margin:0 0 17px}
.piece a{text-underline-offset:3px}
.onward{margin-top:66px;padding-top:34px;border-top:1px solid var(--rule)}
.onhead{
  font-family:Rubik,sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass);margin-bottom:26px;
}

/* dark single-row footer */
.base{margin-top:62px;background:var(--night);color:#cdc4bb}
.baserow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding-top:32px;padding-bottom:26px}
.basename{font-family:Vollkorn,Georgia,serif;font-size:21px;font-weight:600;color:#fff;margin:0}
.baselinks{display:flex;flex-wrap:wrap;gap:20px}
.baselinks a{color:#a99e94;text-decoration:none;font-size:14.5px}
.baselinks a:hover{color:#fff}
.basefine{border-top:1px solid rgba(255,255,255,.12)}
.basefine p{margin:0;padding:16px 0 26px;font-size:13px;color:#8a7f76}