:root {
  color-scheme: light;
  --sky: #f8f7f2;
  --ink: #1c323b;
  --muted: #52656a;
  --deep: #075d78;
  --square: #057292;
  --almond: #579293;
  --rule: #c8d2ce;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--sky); }
body {
  margin: 0; color: var(--ink);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; line-height: 1.53; -webkit-font-smoothing: antialiased;
}
.site { width: min(100% - 84px, 1000px); margin: 0 auto; padding-block: 42px 66px; }
a { color: var(--deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--ink); text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--square); outline-offset: 4px; }
::selection { background: var(--deep); color: white; }
.masthead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; padding-bottom: 15px; border-bottom: 1px solid var(--rule); }
.wordmark, nav a { font-size: 14px; color: var(--ink); text-decoration: none; }
.wordmark { font: 400 27px/1.1 Georgia, "Times New Roman", serif; letter-spacing: -.045em; }
.wordmark span { margin-left: 10px; color: var(--muted); font: 13px/1.4 "Hiragino Mincho ProN", "Yu Mincho", serif; letter-spacing: .08em; }
nav { display: flex; gap: 22px; }
nav a { color: var(--muted); }
nav a[aria-current], nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .28em; }
.home {
  margin-top: clamp(55px, 6.8vw, 94px);
  display: grid; grid-template-columns: minmax(0, 570px) minmax(0, 342px);
  grid-template-areas: "about print" "work print" "writing .";
  justify-content: space-between; column-gap: clamp(35px, 6vw, 84px); align-items: start;
}
.about { grid-area: about; }
h1, h2, h3, p, figure, ul { margin: 0; }
.about h1, .project-index h1 {
  font-size: clamp(33px, 3.4vw, 48px); line-height: 1.12; letter-spacing: -.047em;
  font-weight: 450; text-wrap: pretty;
}
.about h1 a { color: var(--ink); text-decoration-color: var(--almond); text-underline-offset: .12em; }
.about h1 a:hover { text-decoration-color: var(--square); }
.about p { max-width: 49ch; margin-top: 20px; }
.print { grid-area: print; width: 100%; max-width: 332px; margin: 3px 0 0 auto; }
.print a, .print img { display: block; width: 100%; height: auto; }
.selected { grid-area: work; margin-top: 38px; }
.writing { grid-area: writing; margin-top: 36px; }
.home h2 { font-size: 16px; line-height: 1.4; font-weight: 600; margin-bottom: 11px; }
.selected ul { padding-left: 1.05em; }
.selected li { padding-left: .15em; margin-bottom: 8px; }
.selected li::marker { font-size: .72em; color: var(--deep); }
.more { display: inline-block; margin-top: 5px; }
.more span { font-size: .8em; }
.writing h2 span { margin-left: 4px; color: var(--muted); font-weight: 400; font-size: 13px; }
.writing ul { padding: 0; list-style: none; }
.writing li { display: flex; align-items: baseline; gap: 12px; margin-block: 6px; }
.writing time { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.project-index { max-width: 820px; margin: 50px auto 0 0; }
.project-index h1 { font: 400 clamp(29px, 3.4vw, 44px)/1.12 Georgia, "Times New Roman", serif; letter-spacing: -.04em; }
.project-index section { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: minmax(130px, 180px) minmax(0, 1fr); gap: 20px 28px; align-items: start; }
.project-index section h2 { font: 400 25px/1.2 Georgia, "Times New Roman", serif; letter-spacing: -.025em; }
.project-index article { grid-column: 2; scroll-margin-top: 24px; }
.project-index h3 { font-size: 17px; line-height: 1.4; font-weight: 550; margin-bottom: 4px; }
.project-index p { font-size: 15px; line-height: 1.55; }
.project-index p + p { margin-top: .55em; }
.project-index article:target h3 { text-decoration: underline; text-decoration-color: var(--almond); }
@media (max-width: 730px) {
  .site { width: min(100% - 42px, 560px); padding-block: 26px 40px; }
  .home { column-gap: 30px; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .wordmark span { margin-left: 5px; }
}
@media (max-width: 600px) {
  .masthead { align-items: center; }
  .wordmark { font-size: 23px; }
  .wordmark span { display: block; margin: 2px 0 0; font-size: 11px; }
  nav { gap: 13px; }
  .home { margin-top: 34px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "about" "print" "work" "writing"; }
  .about h1 { font-size: clamp(31px, 7.4vw, 39px); }
  .about p { margin-top: 13px; }
  .print { width: min(46vw, 205px); margin: 21px 0 0; }
  .selected, .writing { margin-top: 26px; }
  .project-index { margin-top: 30px; }
  .project-index section { display: block; margin-top: 28px; }
  .project-index h2 { margin-bottom: 16px; }
  .project-index article + article { margin-top: 16px; }
}