/* Palette is taken from the woodshop: the page is the moss green of the favicon, with ash
   for text and pine and walnut for accents. One palette serves light and dark mode alike. */

:root {
  --paper: #2d6a4c;
  --surface: #26603f;
  --ink: #eceee8;
  --dim: #d6dfd2;
  --line: #4f8a6b;
  --accent: #f3d9b1;
  --walnut: #e2b98f;
  --on-accent: #1f4a35;
  --gutter: 16px;
  --measure: 62ch;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  color-scheme: dark;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Keeps the footer at the bottom of the window on short pages. */
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
main {
  flex: 1;
}

h1,
h2,
h3 {
  font-family: var(--display);
  line-height: 1.1;
  margin: 0;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-thickness: 2px;
}
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  background: var(--accent);
  color: var(--on-accent);
  padding: 8px 14px;
  z-index: 10;
}
.skip:focus {
  top: 8px;
}

/* Header */

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
}
/* The favicon's rings stand in for the name. */
.brand {
  display: block;
  flex-shrink: 0;
}
.brand img {
  width: 36px;
  height: 36px;
}
.nav {
  display: flex;
  gap: 4px 20px;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.05rem;
}
.nav a {
  color: var(--dim);
  text-decoration: none;
  padding: 4px 0;
}
.nav a:hover {
  color: var(--ink);
}
.nav a[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--walnut);
}
@media (max-width: 380px) {
  .nav {
    column-gap: 14px;
    font-size: 1rem;
  }
}

/* Home: the hero is the whole page, with the four pages as big links underneath */

.hero {
  display: grid;
  grid-template-areas: "portrait" "text";
  gap: 8px;
  padding-top: 8px;
  padding-bottom: 48px;
}
.hero-text {
  grid-area: text;
}
.hero h1 {
  font-size: clamp(3rem, 13vw, 6.75rem);
  font-weight: 800;
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.04em;
  line-height: 0.92;
  margin-left: -0.04em;
}
.lede {
  max-width: 44ch;
  font-size: 1.375rem;
  line-height: 1.5;
  color: var(--dim);
  margin: 24px 0 0;
}

/* The portrait sits in the middle of three slightly off-center rings, like the favicon.
   Each ring turns around the photo at its own speed, so the gaps between them slowly
   breathe. The rings' sizes are set so that they never touch each other or the photo. */
.portrait {
  grid-area: portrait;
  position: relative;
  width: min(78vw, 320px);
  aspect-ratio: 1;
  /* Too big to sit comfortably against the left edge on phones, so it's centered */
  justify-self: center;
}
.portrait img {
  position: absolute;
  inset: 25%;
  width: 50%;
  height: 50%;
  object-fit: cover;
  border-radius: 50%;
  background: var(--surface);
}
.rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--walnut);
  stroke-width: 3;
}
.rings ellipse {
  transform-box: view-box;
  transform-origin: 200px 200px;
  stroke-dasharray: 1;
  animation:
    draw 1.4s cubic-bezier(0.3, 0.6, 0.3, 1) both,
    turn var(--period) linear infinite;
}
.rings .r1 {
  --period: 70s;
}
.rings .r2 {
  --period: 95s;
  animation-direction: normal, reverse;
  animation-delay: 0.15s, 0s;
}
.rings .r3 {
  --period: 130s;
  animation-delay: 0.3s, 0s;
}
@keyframes draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes turn {
  to {
    rotate: 360deg;
  }
}

.doors {
  display: grid;
  gap: 0 32px;
  margin-top: 40px;
}
.doors a {
  display: block;
  padding: 16px 0 20px;
  border-top: 2px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.doors a:hover,
.doors a:focus-visible {
  border-top-color: var(--walnut);
}
.door-title {
  display: block;
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.doors a:hover .door-title {
  color: var(--accent);
}
.door-note {
  display: block;
  margin-top: 6px;
  color: var(--dim);
  font-size: 1rem;
  line-height: 1.45;
}

@media (min-width: 560px) {
  .doors {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 860px) {
  .hero {
    grid-template-areas: "text portrait" "doors doors";
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
    gap: 0 40px;
    padding-top: 40px;
  }
  .portrait {
    width: 100%;
    max-width: 420px;
    justify-self: end;
  }
  .doors {
    grid-area: doors;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 56px;
  }
}

/* Inner pages: a big title, a lede, then rows that pair a short block of text with a
   picture, alternating sides so the page reads as a zigzag rather than a column. */

.page-head {
  padding-top: 32px;
  padding-bottom: 24px;
}
.page-head h1 {
  font-size: clamp(3rem, 12vw, 5.75rem);
  font-weight: 800;
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin-left: -0.04em;
}
.page-head .lede {
  max-width: 40ch;
}
.lede + .lede {
  margin-top: 0.75em;
}

.row {
  display: grid;
  gap: 28px;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
}
.row h2,
.band h2 {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
@media (min-width: 820px) {
  .row {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 64px;
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .row.flip > :last-child {
    order: -1;
  }
  /* A page head that has a photo uses the row layout too. */
  .page-head.row {
    padding-top: 32px;
  }
}

.prose {
  max-width: var(--measure);
}
.prose p {
  margin: 0 0 1em;
}
.prose p:last-child {
  margin-bottom: 0;
}

/* A full-width section, for things that don't pair with a single photo. */
.band {
  padding-top: 40px;
  padding-bottom: 40px;
}
@media (min-width: 820px) {
  .band {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

/* Photos */

figure {
  margin: 0;
}
figure img,
figure video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 6px;
  background: var(--surface);
}
.tall img,
.tall video {
  aspect-ratio: 4 / 5;
}
/* For tall photos where the subject runs nearly edge to edge, crop mostly off the bottom. */
.tall.crop-top img {
  object-position: center 15%;
}
.wide img {
  aspect-ratio: 4 / 3;
}
.band > .pair {
  margin-top: 28px;
}
.row > figure {
  width: 100%;
  max-width: 420px;
}
.row > figure.wide {
  max-width: none;
}
@media (min-width: 820px) {
  .row > figure {
    justify-self: center;
  }
}
figcaption {
  margin-top: 12px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--dim);
}
figcaption strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
}
/* Real Polaroids get a slight tilt, the way they'd sit on a fridge. */
.polaroid img {
  aspect-ratio: auto;
  border-radius: 2px;
  rotate: -1.5deg;
  box-shadow: 0 10px 30px rgb(10 40 25 / 0.35);
}
.flip .polaroid img {
  rotate: 1.5deg;
}
.polaroid figcaption {
  margin-top: 18px;
}

/* Phone screenshots */
.phone {
  max-width: 240px;
}
.row > figure.phone {
  max-width: 240px;
}
.phone img {
  aspect-ratio: auto;
  border-radius: 28px;
  border: 1px solid var(--line);
}

/* Two phone screenshots fanned out like a hand of cards. Each one tilts away from the middle
   around its inner bottom corner, so they overlap at the bottom and open into a V at the top. */
.fan {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  width: 100%;
  max-width: 400px;
  padding: 16px 0 8px;
}
.fan figure {
  grid-row: 1;
}
.fan figure:first-child {
  grid-column: 1 / 7;
  rotate: -8deg;
  transform-origin: bottom right;
}
.fan figure:last-child {
  grid-column: 5 / 11;
  rotate: 8deg;
  transform-origin: bottom left;
}
.fan img {
  aspect-ratio: auto;
  border-radius: 22px;
  border: 1px solid var(--line);
  box-shadow: 0 16px 36px rgb(10 40 25 / 0.45);
}
/* In a single column, the tilted tops would poke past the screen edge, so the cards get some
   room on either side. */
@media (max-width: 819px) {
  .row > .fan {
    justify-self: center;
    padding-left: 13%;
    padding-right: 13%;
  }
}
@media (min-width: 820px) {
  .row > .fan {
    justify-self: center;
  }
}

/* Two photos side by side in a row's picture column, like Squid and Brie. */
.pair {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  width: 100%;
  max-width: 480px;
  padding: 8px 0;
}
@media (min-width: 820px) {
  .row > .pair {
    justify-self: center;
  }
}
/* Two photos laid down overlapping, like prints on a table. They tilt away from each other,
   and the second sits a little lower and on top. */
.pair figure {
  grid-row: 1;
}
.pair figure:first-child {
  grid-column: 1 / 8;
}
.pair figure:last-child {
  grid-column: 6 / 13;
  margin-top: 40px;
  z-index: 1;
}
.pair img {
  rotate: -2deg;
  box-shadow: 0 10px 30px rgb(10 40 25 / 0.35);
}
.pair figure:last-child img {
  rotate: 2deg;
}
/* A photo narrower than 4:5 keeps its whole frame and shrinks to the same height as its
   partner. 77.5% is a 744 x 1200 photo next to a 4:5 one. It sits partway down so the
   second photo covers less of it. */
.pair figure.slim {
  margin-top: 24px;
}
.pair figure.slim img {
  width: 77.5%;
  margin-left: 8%;
}
/* The first caption stops short of where the second photo covers it. */
.pair figure:first-child figcaption {
  padding-right: 30%;
}
/* Landscape photos across a full-width section. On phones they'd be tiny overlapped, so they
   stack flat instead. */
.pair-wide {
  max-width: 880px;
}
@media (max-width: 599px) {
  .pair-wide {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .pair-wide figure:first-child,
  .pair-wide figure:last-child {
    grid-column: 1;
    grid-row: auto;
    margin-top: 0;
  }
  .pair-wide figure:first-child figcaption {
    padding-right: 0;
  }
  .pair-wide img,
  .pair-wide figure:last-child img {
    rotate: none;
  }
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 24px;
  margin-top: 28px;
}

/* Short items under a walnut rule: things built at Lioness, the smaller hobbies */

.shortlist {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 28px 40px;
}
@media (min-width: 820px) {
  .shortlist {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}
.shortlist li {
  padding-top: 14px;
  border-top: 2px solid var(--walnut);
}
.shortlist h3 {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 8px;
}
.shortlist p {
  margin: 0;
}
.shortlist p + p {
  margin-top: 0.75em;
}
.shortlist + p {
  margin: 28px 0 0;
  max-width: var(--measure);
}

/* How the Mothership talk ended, set like a slide pinned up at a slight tilt. */
.superlatives {
  /* Narrower than the column so the tilted corners don't touch the screen edge on phones. */
  width: calc(100% - 24px);
  max-width: 420px;
  padding: 28px 28px 24px;
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 16px 36px rgb(10 40 25 / 0.45);
  rotate: -1.5deg;
  font-family: var(--display);
}
.superlatives p {
  margin: 0;
  font-weight: 500;
  color: var(--dim);
}
.superlatives ul {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.superlatives li {
  padding: 14px 0;
  border-bottom: 2px solid var(--walnut);
  color: var(--accent);
  font-size: clamp(2rem, 6vw, 2.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.superlatives figcaption {
  margin-top: 16px;
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic;
  font-size: 1.1rem;
}
.row > .superlatives {
  justify-self: center;
}

/* Where to carve, set like a scorecard pinned up at a slight tilt: a stamp for each spot,
   a pine check for yes and a walnut cross for no. */
.spots {
  /* Narrower than the column so the tilted corners don't touch the screen edge on phones. */
  width: calc(100% - 24px);
  max-width: 480px;
  margin: 40px auto;
  padding: 28px 28px 20px;
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 16px 36px rgb(10 40 25 / 0.45);
  rotate: 1.2deg;
}
.spots p {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  color: var(--dim);
}
.spots ul {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.spots li {
  display: grid;
  grid-template-columns: 30px 1fr;
  column-gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
}
.spots li:last-child {
  border-bottom: 0;
}
.spots svg {
  grid-row: span 2;
  width: 30px;
  height: 30px;
}
.spots .yes svg {
  color: var(--accent);
}
.spots .no svg {
  color: var(--walnut);
}
.spots .place {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
}
.spots .no .place {
  color: var(--walnut);
}
.spots .why {
  grid-column: 2;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--dim);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A warning label next to a heading, for things that shouldn't be opened at work. */
.nsfw {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  border: 2px solid var(--walnut);
  border-radius: 999px;
  color: var(--walnut);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  vertical-align: middle;
}

/* The Nucamp course app's Directory screen, rebuilt as the top of a phone: a purple header
   bar over photo tiles, each with its campsite's name laid over the photo. The phone is cut
   off below the second campsite and fades out there, to keep it small. */
.campsites {
  width: 100%;
  max-width: 340px;
}
.row > figure.campsites {
  max-width: 340px;
}
.campsites-phone {
  position: relative;
  width: 170px;
  height: 266px;
  margin: 0 auto;
  overflow: hidden;
  padding: 6px 6px 0;
  border-radius: 30px 30px 0 0;
  background: #15171a;
  box-shadow: inset 0 0 0 1px #3a3d42;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, #000 78%, transparent);
}
.campsites-phone::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 50%;
  width: 42px;
  height: 12px;
  translate: -50% 0;
  border-radius: 999px;
  background: #15171a;
  z-index: 1;
}
.campsites-screen {
  overflow: hidden;
  border-radius: 24px 24px 0 0;
  background: #fff;
  font-family: system-ui, sans-serif;
}
.campsites-bar {
  position: relative;
  margin: 0;
  padding: 24px 12px 5px;
  background: #5637dd;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  text-align: center;
}
.campsites-bar span {
  position: absolute;
  top: 6px;
  left: 16px;
  font-size: 0.55rem;
  font-weight: 600;
}
.campsites figcaption {
  margin-top: 16px;
}
.campsites-screen ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.campsites-screen li {
  position: relative;
}
.campsites-screen img {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  border-radius: 0;
}
.campsites-screen li span {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 10px;
  background: rgb(0 0 0 / 0.35);
  color: #fff;
  font-size: 0.55rem;
  line-height: 1.35;
  text-align: center;
}
.campsites-screen li strong {
  display: block;
  margin-bottom: 3px;
  font-size: 0.72rem;
  line-height: 1.2;
}
@media (min-width: 820px) {
  .row > .campsites {
    justify-self: center;
  }
}

/* A short pointer to another page: the icon sits beside the text instead of on top of it. */
.aside-link {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.aside-link .app-icon {
  flex-shrink: 0;
  margin: 0;
}

/* The page's last word, set apart under a rule so it doesn't read as part of the section above. */
.outro .lede {
  max-width: 44ch;
  margin: 0;
  padding-top: 24px;
  border-top: 2px solid var(--walnut);
  color: var(--ink);
}

.app-icon {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  margin-bottom: 16px;
}

.button {
  display: inline-block;
  margin-top: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
}
.button:hover {
  filter: brightness(1.08);
}

/* The link to the next page, at the bottom of each inner page */

.next {
  padding-top: 24px;
  padding-bottom: 56px;
}
.next a {
  display: inline-block;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--display);
  line-height: 1.1;
}
.next span {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  color: var(--dim);
}
.next strong {
  font-size: clamp(2.25rem, 7vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: underline;
  text-decoration-color: var(--walnut);
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}
.next a:hover strong {
  color: var(--accent);
}

/* Footer: contact lives here, on every page */

.site-footer {
  background: var(--surface);
  padding: 40px 0 32px;
}
.site-footer h2 {
  font-size: 1.5rem;
  font-weight: 700;
}
.site-footer .prose {
  margin-top: 10px;
  color: var(--dim);
}
.contact {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
}
.copyright {
  margin: 40px 0 0;
  color: var(--dim);
  font-size: 0.95rem;
}
.footnote {
  margin: 6px 0 0;
  color: var(--dim);
  font-size: 0.85rem;
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .rings ellipse {
    animation: none;
  }
}