:root{
  --bg:#fbfbfa; --card:#fff; --ink:#111; --ink-2:#6b6b68; --ink-3:#9a9a96;
  --rule:#e6e5e2; --ph:#f1f0ed; --dot:#cfcdc6;
  --sans:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --rail:13rem; --content:42rem;
  --block:calc(1px + .75rem + 3 * .8125rem * 1.75);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0e0e0d; --card:#161615; --ink:#ededea; --ink-2:#9b9a95; --ink-3:#6e6d68;
    --rule:#272725; --ph:#1c1c1a; --dot:#302f2c;
  }
}
:root[data-theme="dark"]{
  --bg:#0e0e0d; --card:#161615; --ink:#ededea; --ink-2:#9b9a95; --ink-3:#6e6d68;
  --rule:#272725; --ph:#1c1c1a; --dot:#302f2c;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:.9375rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,var(--dot) 1px,transparent 0);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(152deg,#000 0%,rgba(0,0,0,.5) 26%,transparent 64%);
          mask-image:linear-gradient(152deg,#000 0%,rgba(0,0,0,.5) 26%,transparent 64%);
}
@media print{body::before{display:none}}
h1,h2{margin:0;font-size:.9375rem;font-weight:600;line-height:1.4}
p{margin:0}
a{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--rule)}
a:hover{text-decoration-color:currentColor}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--ink);color:var(--bg);padding:.5rem .9rem;border-radius:4px}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:2px;border-radius:2px}

.layout{
  position:relative;z-index:1;
  max-width:calc(var(--rail) + var(--content) + 6rem);
  margin:0 auto;padding:1.25rem;
  display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:2.5rem;
  align-items:start;
}
.card{background:none;border:0;padding:0}

.rail{position:sticky;top:1.25rem;display:grid;gap:1.25rem;
      min-height:calc(100vh - 2.5rem);grid-template-rows:auto 1fr auto}
.nav-card{display:grid;gap:1.25rem;align-content:start}
.now-card{grid-row:3;font-variant-numeric:tabular-nums;color:var(--ink-2);
          border-top:1px solid var(--rule);padding-top:.75rem}
.now-card p{font-size:.8125rem;line-height:1.75}
.now-card #clock{font-family:var(--mono);color:var(--ink)}
.skel{color:var(--ink-3)}
#unit{background:none;border:0;padding:0 0 0 .25rem;font:inherit;font-size:.75rem;
      color:var(--ink-3);cursor:pointer}
#unit:hover{color:var(--ink)}

.mark{display:block;width:3.25rem;aspect-ratio:120/100;text-decoration:none;
      background:currentColor;
      -webkit-mask:url('assets/mark.svg') left center/contain no-repeat;
              mask:url('assets/mark.svg') left center/contain no-repeat}
.rail nav{display:grid;gap:.25rem}
.rail nav a{font-size:.8125rem;text-decoration:none;color:var(--ink)}
.rail nav a:hover{text-decoration:underline;text-underline-offset:2px}
.rail .ext a{color:var(--ink-3)}
.rail .ext a:hover{color:var(--ink)}

main{display:grid;gap:2.75rem;max-width:var(--content);padding-top:.25rem}
header{display:grid;gap:.75rem}
.bio{color:var(--ink-2);max-width:34rem}
section{display:grid;gap:.875rem}
section > p{color:var(--ink-2);max-width:34rem}
.sub{font-size:.8125rem;color:var(--ink-3)}

.table{border-top:1px solid var(--rule)}
.row{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:1.25rem;
     padding:.7rem 0;border-bottom:1px solid var(--rule)}
.k{font-family:var(--mono);font-size:.8125rem;color:var(--ink-3);padding-top:.1rem}
.v{color:var(--ink-2);font-size:.875rem;line-height:1.55}
.row.tot .k,.row.tot .v{color:var(--ink)}

figure{margin:0;background:var(--ph);border-radius:2px;overflow:hidden;display:grid}
figure > *{grid-area:1/1}
figure img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.lead{aspect-ratio:3/2}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.grid figure{aspect-ratio:4/5}
.ph{border:1px dashed var(--rule)}
figure span{place-self:center;font-family:var(--mono);font-size:.6875rem;
            letter-spacing:.08em;color:var(--ink-3);text-align:center;padding:0 .5rem}
figure:not(.ph) span{display:none}

footer{border-top:1px solid var(--rule);padding-top:.75rem;min-height:var(--block);
       font-size:.75rem;color:var(--ink-3)}

@media (max-width:46rem){
  .layout{display:flex;flex-direction:column;gap:1.25rem;padding:1rem}
  .rail{display:contents}
  .nav-card{order:1;display:flex;flex-wrap:wrap;align-items:center;
            gap:.5rem 1rem;padding:0 0 1rem;border-bottom:1px solid var(--rule)}
  .nav-card .mark{width:2.25rem;margin-right:.25rem}
  .rail nav{display:flex;flex-wrap:wrap;gap:.5rem .9rem}
  main{order:2;max-width:none;gap:2.25rem}
  .now-card{order:3}
  .row{grid-template-columns:1fr;gap:.2rem}
  .k{font-size:.75rem}
  footer{min-height:0}
}
@media print{ .rail,.ph{display:none} }