:root {
  --ash: #3E3932;
  --cream: #EFE6D4;
  --mustard: #C9A227;
  --ox: #6B2E2E;
  --ink: #4C4452;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{min-height:100svh;background:var(--ash);color:var(--cream);font-family:var(--sans);font-size:1rem;letter-spacing:0.03em}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:0.12em}
.quarters{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;min-height:100svh}
.q{padding:1.4rem;min-height:50svh;border:1px solid rgba(239,230,212,0.12)}
.q.cream{background:var(--cream);color:var(--ink)}
.q img{display:block;width:100%;height:calc(50svh - 2.8rem);object-fit:cover}
.mark img{width:5.2rem;height:auto}
.mark span{display:block;font-size:0.68rem;margin-top:0.3rem}
h1{margin:0 0 0.6rem;font-weight:700;letter-spacing:0.01em;font-size:clamp(1.6rem,4vw,2.6rem)}
.mustard{color:var(--mustard)}
.clock{letter-spacing:0.08em;font-size:0.95rem}
.rule{border-top:1px solid var(--ox);margin:0.8rem 0;padding-top:0.8rem}
.wide6{display:grid;grid-template-columns:repeat(6,1fr);gap:0.4rem;list-style:none;margin:0;padding:0;font-size:0.78rem}
.sheet{padding:1.6rem;max-width:56rem}
nav{display:flex;flex-wrap:wrap;gap:0.4rem 1rem;font-size:0.78rem;padding:1rem 1.4rem}
footer{display:flex;justify-content:flex-end;padding:0.8rem 1.2rem;font-size:0.62rem}
footer .by{color:var(--cream)}
.sheet footer .by, .q.cream .by{color:var(--ink)}
@media(max-width:800px){.quarters{grid-template-columns:1fr}.wide6{grid-template-columns:repeat(2,1fr)}.q img{height:40vw}}