/* Harbor Optics — paper palette, narrow measure, serif headings. */

:root{
  --paper:#f6f2e9;
  --ink:#22201c;
  --soft:#5c574d;
  --rule:#d9d2c2;
  --mark:#7a4a2b;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#1a1917;
    --ink:#ece7dc;
    --soft:#a49d90;
    --rule:#33312c;
    --mark:#c98d5f;
  }
}

*{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  background:var(--paper);
}

body{
  margin:0 auto;
  padding:0 24px 64px;
  max-width:38rem;
  background:var(--paper);
  color:var(--ink);
  font:17px/1.72 Georgia,"Iowan Old Style","Times New Roman",Times,serif;
}

a{color:var(--mark)}
a:hover{color:var(--ink)}

.masthead{
  padding:56px 0 18px;
}

.wordmark{
  margin:0;
  font-size:1.55rem;
  letter-spacing:.02em;
}

.wordmark a{
  color:var(--ink);
  text-decoration:none;
}

.strapline{
  margin:6px 0 0;
  color:var(--soft);
  font-size:.86rem;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  letter-spacing:.02em;
}

nav.rule{
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:9px 0;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:.82rem;
}

nav.rule a{
  margin-right:20px;
  text-decoration:none;
  color:var(--soft);
}

nav.rule a:hover{
  color:var(--mark);
  text-decoration:underline;
}

main{
  padding-top:34px;
}

h1{
  margin:0 0 22px;
  font-size:1.9rem;
  font-weight:400;
  line-height:1.25;
  letter-spacing:-.005em;
}

h2{
  margin:38px 0 10px;
  font-size:1.12rem;
  font-weight:400;
  font-style:italic;
  color:var(--mark);
}

p{margin:0 0 16px}

.opening{
  font-size:1.06rem;
  border-left:2px solid var(--rule);
  padding-left:16px;
  color:var(--soft);
}

.entries{
  margin:0 0 8px;
}

.entries dt{
  margin-top:18px;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:.8rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink);
}

.entries dd{
  margin:5px 0 0;
  padding-left:0;
  color:var(--soft);
}

.aside{
  margin-top:26px;
  padding-top:14px;
  border-top:1px dotted var(--rule);
  font-size:.94rem;
  color:var(--soft);
}

footer{
  margin-top:56px;
  padding-top:16px;
  border-top:1px solid var(--rule);
  color:var(--soft);
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:.76rem;
  line-height:1.9;
}

footer p{margin:0}

@media (max-width:480px){
  body{font-size:16px;padding:0 18px 48px}
  .masthead{padding-top:36px}
  h1{font-size:1.6rem}
}