@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4.woff2") format("woff2-variations"),
       url("fonts/source-serif-4.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/source-sans-3.woff2") format("woff2-variations"),
       url("fonts/source-sans-3.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* Light theme variables */
:root {
  --paper:     #fbf7ef;                  /* Warm off-white */
  --desk:      #b1bfb1;                  /* Light winter green */
  --ink:       #2b2520;                  /* Warm near-black, 14.2:1 on paper (AAA) */
  --ink-soft:  #4a3f37;                  /* Slightly lifted, 9.5:1 on paper (AAA) */
  --link:      #3d5e3d;                  /* Forest, 6.8:1 on paper (AA) */
  --line:      rgba(140, 170, 200, 0.18);
  --margin:    rgba(200, 110, 110, 0.22);

  --line-gap:   28px;
  --line-pad:   calc((var(--line-gap) - 1rem) / 2);  /* 6px, padding from top of text to previous row line. */
  --margin-x:   64px;
  --line-thick: 1px;
  --top-blank:  calc(var(--line-gap) * 3);   /* Unruled area at top of paper. */

  /* 18px when the user's default is 16px. */
  font-size: 100%;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  background-color: var(--desk);
  min-height: 100vh;
}

body {
  font-family: "Source Serif 4", serif;
  line-height: var(--line-gap);
  color: var(--ink);

  max-width: 1024px;
  min-height: 100vh;
  margin: 0;
  padding: var(--line-gap) 1rem var(--line-gap) calc(var(--margin-x) + 1rem);

  background-color: var(--paper);
  background-image:
    /* Vertical margin line, visible all the way up. */
    linear-gradient(to right,
      transparent calc(var(--margin-x) - 1px),
      var(--margin) calc(var(--margin-x) - 1px),
      var(--margin) calc(var(--margin-x) + 1px),
      transparent calc(var(--margin-x) + 1px)
    ),
    /* Paper-colored mask covering the top region. No rules behind the title. */
    linear-gradient(to bottom,
      var(--paper) 0,
      var(--paper) var(--top-blank),
      transparent var(--top-blank)
    ),
    /* repeating horizontal lines */
    repeating-linear-gradient(to bottom,
      transparent 0,
      transparent calc(var(--line-gap) - var(--line-thick)),
      var(--line) calc(var(--line-gap) - var(--line-thick)),
      var(--line) var(--line-gap)
    );
}

a:link,
a:visited {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-thickness: 2px;
}

a:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-radius: 1px;
}

hr {
  margin-bottom: var(--line-gap);
}

p,
ul,
.section {
  margin-top: 0;
  margin-bottom: calc(var(--line-gap) - var(--line-pad));
  padding-top: var(--line-pad);
}

h1,
h2 {
  font-family: "Source Sans 3", sans-serif;
  margin-top: 0;
  margin-bottom: var(--line-gap);
  line-height: calc(var(--line-gap)*2);
}

h2,
h3,
h4 {
  line-height: var(--line-gap);
}

h2 {
  font-size: 1.4rem;
}

h3,
h4 {
  font-size: 1rem;
}

h1 a,
h2 a,
h3 a,
h4 a {
  color: var(--link);
  text-decoration-line: none;
}

svg.icon {
  width: 22px;
  height: 22px;
}

.section {
  display: flex;
  gap: 1rem;
}

.full-width {
  width: 100vw;
  margin-left: calc(-1 * (var(--margin-x) + 1rem));
}

/* Projects */
.projects > .section {
  margin-right: 1rem;
}

a.project-icon {
  display: inline-flex;
  align-self: flex-start;
  flex-shrink: 0;
  width: var(--margin-x);
  gap: 0.5rem;
}

a.project-icon:link,
a.project-icon:visited {
  color: var(--ink-soft);
  text-decoration-line: none;
}
a.project-icon:hover {
  color: var(--link);
}

.projects .icon {
  margin: 0.25rem 0.5rem 0.5rem auto;
  max-height: var(--line-gap);
}

/* Photos */
.photo-grid {
  /* Full width on mobile only. */
  width: 100vw;
  margin-left: calc(-1 * (var(--margin-x) + 1rem));
}

.photo-row {
  --photo-h: 280px;
  --polaroid-h: calc(var(--photo-h) + 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--line-gap);
  margin: var(--line-gap) auto;
  margin-top: calc(-1 * var(--line-pad));
  /* 3 polaroids + 2 gaps, snapped up to next line. */
  height: round(up, calc(3 * var(--polaroid-h) + 2 * var(--line-gap)), var(--line-gap));
  width: 80%;
}

.photo {
  background: #fff;
  padding: 10px;
  margin: 0;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.15),
    0 8px 20px rgba(0,0,0,0.1);
  transform: rotate(var(--tilt));
  position: relative;
}

.photo img {
  display: block;
  object-fit: cover;
  height: var(--photo-h);
  width: auto;
  max-width: 100%;
}

.photo.portrait img  { aspect-ratio: 3 / 4; }
.photo.landscape img { aspect-ratio: 4 / 3; }
.photo.square img    { aspect-ratio: 1 / 1; }

.photo:nth-child(1) { --tilt: -1.2deg; }
.photo:nth-child(2) { --tilt: 0.6deg; }
.photo:nth-child(3) { --tilt: -0.4deg; }

/* Polaroid "tape" */
.photo::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  width: 48px;
  height: 16px;
  background: rgba(240, 225, 185, 0.85);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  border-radius: 2px;
}


/* Field notes */

.field-notes h3 {
  margin: 0;
}

.field-note h3 a:link,
.field-note h3 a:visited {
  color: var(--ink);
  text-decoration-line: none;
}

.field-note h3 a:hover {
  color: var(--link);
  text-decoration-line: underline;
}

.field-notes-list {
  list-style: none;
  margin-top: 0;
  padding: 0;
}

.field-note {
  display: grid;
  grid-template-columns: 4rem 1fr;
  column-gap: 1rem;
  padding-top: var(--line-pad);
  padding-right: 1rem;
}

.field-note time,
.field-note .tags {
  color: var(--ink-soft);
}

.field-note .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  list-style: none;
  padding: 0;
}

.field-note .tags li:not(:last-child)::after {
  content: "·";
  margin-left: 0.5rem;
}

.field-note time {
  align-self: start;
  max-width: calc(var(--margin-x) - 0.5rem);
  text-align: right;
}

.field-note time .day {
  display: block;
  line-height: 1rem;
  font-size: 125%;
}


/* Social */

.social ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: flex-end;
  gap: 1.25rem;
}

.social a:link,
.social a:visited {
  color: var(--ink-soft);
  display: inline-flex;
  text-decoration-line: none;
  /* Expand hit area to 44x44 (WCAG 2.5.5) without changing visual layout. */
  padding: 11px;
  margin: -11px;
}

.social a:hover {
  color: var(--link);
}


/* Dark mode */

@media (prefers-color-scheme: dark) {
  :root {
    --paper:    #12110f;                 /* Warm charcoal */
    --desk:     #1a1612;                 /* Dark walnut */
    --ink:      rgba(255,255,255,0.92);  /* ~17:1 on dark paper (AAA). */
    --ink-soft: rgba(255,255,255,0.7);   /* 9.4:1 on dark paper (AAA). */
    --link:     #a8c9a8;                 /* Forest light, 10.3:1 on dark paper (AAA). */
    --line:     rgba(255,255,255,0.06);
    --margin:   rgba(255,255,255,0.10);
  }
}


/* Desktop view */

@media (min-width: 768px) {
  .projects .project-icon {
    max-height: var(--line-gap);
  }

  .photo-grid {
    width: auto;
    margin-left: 0;

  }
  .photo-row {
    --photo-h: min(300px, calc(31vw - 65px));
    flex-direction: row;
    justify-content: space-between;
    margin-left: 0;
    /* One polaroid tall, snapped up to next line. */
    height: round(up, var(--polaroid-h), var(--line-gap));
    width: 100%;
  }
}

@media (min-width: 1024px) {
  body {
    width: 1024px;
    padding-right: 2rem;
  }
  .full-width {
    width: 1024px;
  }
  .field-note {
    padding-right: 2rem;
  }
}

@media (min-width: calc(1024px + 2*1rem)) {
  body {
    margin: 1rem auto;
    border-radius: 1rem;
    box-shadow:
      0 2px 8px rgba(0,0,0,0.08),
      0 16px 48px rgba(0,0,0,0.12);
  }
}