/* Jeff Bond - portfolio. One stylesheet for the whole site.

   The first half is the frame every page shares: tokens, header, buttons,
   the photo banner with the white sheet over it, the articles, the
   Off the clock page, the footer. The second half is the pieces that give
   the site its own face: prints, the blueprint, the tape measure.

   Colours are tokens, defined once for light and once for dark. */

/* ------------------------------------------------------------- tokens */

:root {
  color-scheme: light;

  --bg: #ffffff;
  --bg-raise: #f6f8f7;
  --surface: #ffffff;
  --surface-2: #f1f4f3;
  --line: #dfe4e8;
  --line-soft: #edf0f2;

  --ink: #232f3e;
  --text: #232f3e;
  --text-dim: #4a5561;
  --text-faint: #6e7379;

  --accent: #f76c02;
  --accent-hover: #e05f00;
  --accent-ink: #ffffff;
  --accent-soft: rgba(247, 108, 2, 0.12);

  --navy: #232f3e;
  --navy-2: #273342;
  --on-navy: #ffffff;
  --on-navy-dim: rgba(255, 255, 255, 0.78);

  /* Jeff's own mark, used sparingly for badges and the life page. */
  --mark-blue: #1b9ee2;
  --mark-green: #8bc53f;

  --scrim-a: rgba(255, 255, 255, 0.94);
  --scrim-b: rgba(255, 255, 255, 0.72);
  --shadow: 0 18px 50px -28px rgba(20, 45, 66, 0.35);
  --shadow-sheet: 1px 1px 5px 1px rgba(35, 47, 62, 0.55);
  --shadow-card: 0 10px 30px -18px rgba(20, 45, 66, 0.35);

  --font-sans:
    "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  --font-display: "Lora", Georgia, "Times New Roman", serif;

  --radius: 10px;
  --radius-lg: 16px;
  --maxw: 1180px;
  --nav-h: 66px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b141d;
    --bg-raise: #0f1a25;
    --surface: #131f2b;
    --surface-2: #192736;
    --line: #263a4d;
    --line-soft: #1c2c3b;
    --ink: #e9f0f6;
    --text: #e9f0f6;
    --text-dim: #b0c2d1;
    --text-faint: #7e95a8;
    --accent: #ff8a33;
    --accent-hover: #ffa057;
    --accent-ink: #2a1502;
    --accent-soft: rgba(255, 138, 51, 0.16);
    --navy: #0f1a25;
    --navy-2: #131f2b;
    --scrim-a: rgba(11, 20, 29, 0.92);
    --scrim-b: rgba(11, 20, 29, 0.66);
    --shadow: 0 24px 70px -30px rgba(0, 0, 0, 0.85);
    --shadow-sheet: 0 0 0 1px #263a4d, 0 30px 60px -30px rgba(0, 0, 0, 0.8);
    --shadow-card: 0 14px 40px -24px rgba(0, 0, 0, 0.8);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b141d;
  --bg-raise: #0f1a25;
  --surface: #131f2b;
  --surface-2: #192736;
  --line: #263a4d;
  --line-soft: #1c2c3b;
  --ink: #e9f0f6;
  --text: #e9f0f6;
  --text-dim: #b0c2d1;
  --text-faint: #7e95a8;
  --accent: #ff8a33;
  --accent-hover: #ffa057;
  --accent-ink: #2a1502;
  --accent-soft: rgba(255, 138, 51, 0.16);
  --navy: #0f1a25;
  --navy-2: #131f2b;
  --scrim-a: rgba(11, 20, 29, 0.92);
  --scrim-b: rgba(11, 20, 29, 0.66);
  --shadow: 0 24px 70px -30px rgba(0, 0, 0, 0.85);
  --shadow-sheet: 0 0 0 1px #263a4d, 0 30px 60px -30px rgba(0, 0, 0, 0.8);
  --shadow-card: 0 14px 40px -24px rgba(0, 0, 0, 0.8);
}

/* --------------------------------------------------------------- base */

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

/* a class that sets display must not un-hide a hidden element */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* prints hang past their columns; they must never give a phone a sideways scroll */
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition:
    background 0.25s var(--ease),
    color 0.25s var(--ease);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  text-wrap: balance;
}
p {
  margin: 0;
}
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
::selection {
  background: var(--accent);
  color: #ffffff;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: min(100% - 32px, var(--maxw));
  margin-inline: auto;
}
.wrap--narrow {
  width: min(100% - 32px, 820px);
  margin-inline: auto;
}

/* ---------------------------------------------------------------- nav */

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.skip:focus {
  top: 12px;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  box-shadow:
    0 2px 1px -1px rgba(0, 0, 0, 0.2),
    0 1px 1px 0 rgba(0, 0, 0, 0.14),
    0 1px 3px 0 rgba(0, 0, 0, 0.12);
}
:root[data-theme="dark"] .nav,
:root:not([data-theme="light"]) .nav {
  box-shadow: none;
  border-bottom: 1px solid var(--line-soft);
}
:root[data-theme="light"] .nav {
  box-shadow:
    0 2px 1px -1px rgba(0, 0, 0, 0.2),
    0 1px 1px 0 rgba(0, 0, 0, 0.14),
    0 1px 3px 0 rgba(0, 0, 0, 0.12);
  border-bottom: 0;
}
.nav-in {
  width: min(100% - 32px, 1280px);
  margin-inline: auto;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
  flex: 0 0 auto;
}
.brand:hover {
  text-decoration: none;
}
.brand-mark {
  width: 42px;
  height: 38px;
  flex: 0 0 auto;
}
.brand-name {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.brand-name b {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.brand-name span {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.nav-links {
  display: none;
  align-items: center;
  gap: 26px;
  margin-left: auto;
}
.nav-links a {
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition:
    color 0.16s ease,
    border-color 0.16s ease;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--accent);
}
.nav-links a[aria-current="page"] {
  border-bottom-color: var(--accent);
}
.nav-tools .nav-cta {
  display: none;
}
@media (min-width: 520px) {
  .nav-tools .nav-cta {
    display: inline-flex;
  }
}
.nav-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}
.icon-btn:hover {
  background: var(--surface-2);
}
.icon-btn svg {
  width: 20px;
  height: 20px;
}
.theme-toggle .sun,
.theme-toggle .moon {
  display: none;
}
:root[data-theme="dark"] .theme-toggle .sun,
:root:not([data-theme="light"]) .theme-toggle .sun {
  display: block;
}
:root[data-theme="light"] .theme-toggle .moon {
  display: block;
}
:root[data-theme="light"] .theme-toggle .sun {
  display: none;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle .moon {
    display: block;
  }
  :root:not([data-theme="dark"]) .theme-toggle .sun {
    display: none;
  }
}

.menu-btn {
  display: inline-grid;
}
.mobile-menu {
  display: none;
  border-top: 1px solid var(--line-soft);
  background: var(--bg);
}
.mobile-menu[data-open="true"] {
  display: block;
}
.mobile-menu a {
  display: block;
  padding: 14px 20px;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
}
.mobile-menu a[aria-current="page"] {
  color: var(--accent);
}
.mobile-menu .pill {
  margin: 16px 20px;
}

@media (min-width: 1080px) {
  .nav-links {
    display: flex;
  }
  .nav-tools {
    margin-left: 0;
  }
  .menu-btn,
  .mobile-menu {
    display: none !important;
  }
}

/* ------------------------------------------------------------ buttons */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 30px;
  border-radius: 24px;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    transform 0.2s var(--ease);
}
.pill:hover {
  background: var(--navy);
  color: #ffffff;
  text-decoration: none;
}
:root[data-theme="dark"] .pill:hover,
:root:not([data-theme="light"]) .pill:hover {
  background: var(--accent-hover);
  color: var(--accent-ink);
}
.pill--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.pill--ghost:hover {
  background: var(--ink);
  color: var(--bg);
}
.pill--light {
  background: #ffffff;
  color: var(--navy);
}
.pill--light:hover {
  background: var(--accent);
  color: #ffffff;
}
.pill--sm {
  padding: 8px 20px;
  font-size: 13.5px;
}

/* ------------------------------------------------------------ sections */

.section {
  padding: 72px 0;
}
.section--raise {
  background: var(--bg-raise);
}
.section--navy {
  background: var(--navy-2);
  color: var(--on-navy);
}
.section--tight {
  padding: 48px 0;
}
@media (max-width: 700px) {
  .section {
    padding: 52px 0;
  }
}

.eyebrow {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.h-serif {
  font-family: var(--font-display);
  color: var(--accent);
  font-weight: 700;
  font-size: clamp(27px, 3vw, 38px);
  line-height: 1.2;
  text-align: center;
  margin: 0 10px;
}
.h-serif--left {
  text-align: left;
  margin: 0;
}
.h-serif--ink {
  color: var(--ink);
}
.section--navy .h-serif--ink {
  color: #ffffff;
}
.lede {
  font-size: 18.5px;
  line-height: 1.6;
  color: var(--text-dim);
  text-align: center;
  max-width: 760px;
  margin: 16px auto 0;
}
.section--navy .lede {
  color: var(--on-navy-dim);
}

/* The divider: a few ticks of a tape measure, the long one in the middle. */
.divider {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  height: 18px;
  margin: 18px 0;
}
.divider i {
  width: 41px;
  height: 9px;
  background: repeating-linear-gradient(
    90deg,
    var(--accent) 0 2px,
    transparent 2px 9.75px
  );
}
.divider b {
  width: 2.5px;
  height: 18px;
  background: var(--accent);
}
.divider--left {
  justify-content: flex-start;
}

/* ------------------------------------------------- banner + sheet pages */

.banner {
  position: relative;
  width: 100%;
  height: clamp(300px, calc(100svh - 410px), 480px);
  overflow: hidden;
  background: var(--surface-2);
}
.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
}
.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 55%,
    var(--scrim-b) 100%
  );
  pointer-events: none;
}
:root[data-theme="dark"] .banner::after,
:root:not([data-theme="light"]) .banner::after {
  background: linear-gradient(
    180deg,
    rgba(11, 20, 29, 0.1) 40%,
    var(--scrim-b) 100%
  );
}
.sheet-wrap {
  display: flex;
  justify-content: center;
  padding-bottom: 64px;
}
.sheet {
  position: relative;
  z-index: 4;
  margin-top: clamp(-240px, -25vh, -90px);
  width: min(80vw, 1180px);
  border-radius: clamp(18px, 3vw, 36px);
  padding: 34px clamp(20px, 5vw, 64px) 44px;
  background: var(--surface);
  box-shadow: var(--shadow-sheet);
}
@media (max-width: 700px) {
  .sheet {
    width: min(100% - 24px, 1180px);
    margin-top: clamp(-160px, -18vh, -70px);
    padding: 26px 20px 34px;
  }
}
.crumb {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 800;
}
.crumb a {
  color: var(--accent);
}
.crumb span {
  color: var(--text);
}
.sheet-title {
  text-align: center;
  font-size: clamp(30px, 3.6vw, 40px);
  font-weight: 300;
  color: var(--text);
  margin: 12px 0 0;
  letter-spacing: -0.01em;
}
.sheet-title strong {
  font-weight: 700;
}
.sheet-intro {
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--text-dim);
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}

/* ------------------------------------------------------------ articles */

.post-grid {
  display: grid;
  gap: 22px;
  margin-top: 36px;
}
@media (min-width: 700px) {
  .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1000px) {
  .post-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.post-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  transition:
    transform 0.25s var(--ease),
    border-color 0.2s ease;
}
.post-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
}
.post-card a.cover {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-2);
}
.post-card a.cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.post-card:hover a.cover img {
  transform: scale(1.04);
}
.post-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px 22px;
  flex: 1;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  white-space: nowrap;
  font-size: 13px;
  color: var(--text-faint);
  font-weight: 600;
}
.chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--accent-soft);
  color: var(--accent);
}
.chip--buyers {
  background: rgba(27, 158, 226, 0.14);
  color: #1279b3;
}
.chip--owners {
  background: rgba(139, 197, 63, 0.18);
  color: #4f7f12;
}
.chip--realtors {
  background: var(--accent-soft);
  color: var(--accent);
}
:root[data-theme="dark"] .chip--buyers,
:root:not([data-theme="light"]) .chip--buyers {
  color: #6cc2f2;
}
:root[data-theme="dark"] .chip--owners,
:root:not([data-theme="light"]) .chip--owners {
  color: #b5df7c;
}
.post-body h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}
.post-body h3 a {
  color: var(--ink);
}
.post-body h3 a:hover {
  color: var(--accent);
  text-decoration: none;
}
.post-body p {
  color: var(--text-dim);
  font-size: 15.5px;
}
.post-body .more {
  margin-top: auto;
  padding-top: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.post-body .more::after {
  content: " →";
}

/* the index toolbar */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}
.search {
  flex: 1 1 280px;
  max-width: 420px;
  position: relative;
}
.search input {
  width: 100%;
  padding: 11px 14px 11px 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 16px;
}
.search input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  translate: 0 -50%;
  width: 18px;
  height: 18px;
  color: var(--text-faint);
  pointer-events: none;
}
.seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  padding: 3px;
  gap: 2px;
}
.seg button {
  border: 0;
  background: none;
  border-radius: 999px;
  padding: 7px 14px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-faint);
  cursor: pointer;
}
.seg button[aria-pressed="true"] {
  background: var(--navy);
  color: #ffffff;
}
:root[data-theme="dark"] .seg button[aria-pressed="true"],
:root:not([data-theme="light"]) .seg button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}
.count {
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: var(--text-faint);
  margin-top: 4px;
}
.empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-dim);
}

/* the article page */
.post-hero {
  position: relative;
  height: clamp(280px, 48vh, 520px);
  overflow: hidden;
  background: var(--surface-2);
}
.post-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
.post-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 40%,
    rgba(11, 20, 29, 0.45) 100%
  );
}
.post-head {
  width: min(100% - 32px, 820px);
  margin: -90px auto 0;
  position: relative;
  z-index: 2;
  padding: 30px clamp(20px, 4vw, 44px) 26px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sheet);
}
.post-head .post-meta {
  justify-content: center;
}
.post-head h1 {
  margin-top: 14px;
  text-align: center;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  color: var(--ink);
}
.post-head .byline {
  margin-top: 14px;
  text-align: center;
  color: var(--text-faint);
  font-size: 15px;
}
.post-head .byline b {
  color: var(--text);
}
.prose {
  width: min(100% - 32px, 720px);
  margin: 40px auto 0;
  font-size: 18px;
  line-height: 1.75;
}
.prose > * + * {
  margin-top: 1.1em;
}
.prose h2 {
  margin-top: 2em;
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 700;
  color: var(--ink);
}
.prose h3 {
  margin-top: 1.6em;
  font-size: 21px;
  font-weight: 700;
}
.prose h4 {
  margin-top: 1.4em;
  font-size: 18px;
  font-weight: 700;
}
.prose p:first-child {
  font-size: 20px;
  color: var(--text-dim);
}
.prose ul,
.prose ol {
  padding-left: 24px;
}
.prose li + li {
  margin-top: 0.4em;
}
.prose blockquote {
  margin: 1.6em 0;
  padding: 6px 0 6px 22px;
  border-left: 4px solid var(--accent);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-dim);
}
.prose figure {
  margin: 1.8em 0;
}
.prose figure img {
  border-radius: var(--radius);
  width: 100%;
}
.prose figcaption {
  margin-top: 8px;
  font-size: 14px;
  color: var(--text-faint);
  text-align: center;
}
.prose a {
  font-weight: 600;
}
.prose strong {
  color: var(--ink);
}
.post-foot {
  width: min(100% - 32px, 720px);
  margin: 48px auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.author {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 18px;
  align-items: center;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--bg-raise);
}
.author img {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 30%;
}
.author b {
  display: block;
  font-size: 18px;
}
.author p {
  margin-top: 4px;
  color: var(--text-dim);
  font-size: 15.5px;
}
.pager {
  display: grid;
  gap: 14px;
  margin-top: 26px;
}
@media (min-width: 640px) {
  .pager {
    grid-template-columns: 1fr 1fr;
  }
}
.pager a {
  display: block;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.pager a:hover {
  border-color: var(--accent);
}
.pager small {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.pager a.next {
  text-align: right;
}
.related {
  margin-top: 56px;
}

/* ----------------------------------------------------------- life page */

.gallery {
  columns: 1;
  column-gap: 22px;
  margin-top: 36px;
}
@media (min-width: 640px) {
  .gallery {
    columns: 2;
  }
}
@media (min-width: 1000px) {
  .gallery {
    columns: 3;
  }
}
.polaroid {
  break-inside: avoid;
  margin: 0 0 22px;
  padding: 12px 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow-card);
  transform: rotate(var(--tilt, 0deg));
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
.polaroid:hover {
  transform: rotate(0deg) scale(1.02);
  z-index: 2;
  position: relative;
}
.polaroid button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.polaroid img {
  width: 100%;
  border-radius: 3px;
  background: var(--surface-2);
}
.polaroid figcaption {
  margin-top: 12px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  color: var(--text);
}
.polaroid figcaption small {
  display: block;
  margin-top: 6px;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.polaroid:nth-child(3n + 1) {
  --tilt: -1.2deg;
}
.polaroid:nth-child(3n + 2) {
  --tilt: 0.9deg;
}
.polaroid:nth-child(3n + 3) {
  --tilt: -0.6deg;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(11, 20, 29, 0.9);
}
.lightbox[data-open="true"] {
  display: flex;
}
.lightbox img {
  max-width: min(96vw, 1200px);
  max-height: 82vh;
  border-radius: 8px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9);
}
.lightbox figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  text-align: center;
  color: #ffffff;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  padding: 0 24px;
}
.lightbox .close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 22px;
  cursor: pointer;
}
.lightbox .close:hover {
  background: var(--accent);
}

.hobbies {
  display: grid;
  gap: 14px;
  margin-top: 30px;
}
@media (min-width: 700px) {
  .hobbies {
    grid-template-columns: repeat(3, 1fr);
  }
}
.hobby {
  padding: 22px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: center;
}
.hobby .big {
  font-size: 34px;
  line-height: 1;
}
.hobby b {
  display: block;
  margin-top: 10px;
  font-size: 18px;
}
.hobby p {
  margin-top: 6px;
  color: var(--text-dim);
  font-size: 15.5px;
}

/* --------------------------------------------------------------- footer */

.footer {
  border-top: 1px solid var(--line-soft);
  background: var(--bg-raise);
}
.footer-in {
  width: min(100% - 32px, 1280px);
  margin-inline: auto;
  padding: 44px 0 36px;
  display: grid;
  gap: 32px;
}
@media (min-width: 900px) {
  .footer-in {
    grid-template-columns: minmax(260px, 1fr) 2fr;
  }
}
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.footer-brand .brand-mark {
  width: 62px;
  height: 56px;
}
.footer-brand .name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
}
.footer-brand .tagline {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.footer-brand .social {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.footer-brand .social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  display: grid;
  place-items: center;
}
.footer-brand .social a:hover {
  background: var(--ink);
  color: var(--bg);
}
.footer-brand .social svg {
  width: 16px;
  height: 16px;
}
.footer-cols {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px) {
  .footer-cols {
    grid-template-columns: repeat(3, 1fr);
  }
}
.footer-cols h4 {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 10px;
}
.footer-cols a,
.footer-cols span {
  display: block;
  padding: 4px 0;
  color: var(--text-dim);
  font-size: 15.5px;
  text-decoration: none;
}
.footer-cols a:hover {
  color: var(--accent);
}
.footer-bar {
  background: var(--navy);
  color: #ffffff;
}
.footer-bar-in {
  width: min(100% - 32px, 1280px);
  margin-inline: auto;
  padding: 16px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.footer-bar a {
  color: #ffffff;
}

/* -------------------------------------------------------------- misc */

.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: var(--navy);
  color: #ffffff;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  translate: 0 12px;
  transition:
    opacity 0.25s ease,
    translate 0.25s var(--ease);
  box-shadow: var(--shadow-card);
}
.to-top[data-show="true"] {
  opacity: 1;
  translate: 0 0;
}
.to-top svg {
  width: 18px;
  height: 18px;
}

/* Reveal on scroll: quiet, once, and never under reduced motion. */
.js .reveal {
  opacity: 0;
  translate: 0 14px;
}
.js .reveal.is-in {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 0.7s var(--ease),
    translate 0.7s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .js .reveal {
    opacity: 1;
    translate: none;
    transition: none;
  }
  .card,
  .post-card,
  .polaroid,
  .polaroid img {
    transition: none;
  }
}

.note-box {
  margin-top: 26px;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--text);
  font-size: 15.5px;
}
.note-box b {
  color: var(--accent);
}

@media print {
  .nav,
  .footer,
  .footer-bar,
  .to-top,
  .mobile-menu,
  .toolbar {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
  .sheet,
  .post-head,
  .card,
  .post-card {
    box-shadow: none;
    border: 1px solid #ccc;
  }
  a[href]::after {
    content: "";
  }
}

/* ==========================================================================
   The site's own pieces.

   Two materials carry the story. PRINTS - photographs with a white border,
   a little crooked, captioned in italic serif - are the field: the roofs,
   the crawlspaces, the person. BLUEPRINT - a deep navy sheet with a fine
   grid, thin blue line work and monospaced labels - is the platform: the
   same knowledge, drawn up as engineering. A tape measure is the divider
   and the timeline.
   ========================================================================== */

:root {
  --font-mono:
    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --bp: #18283b;
  --bp-line: #86c5ea;
  --on-bp: #eef4f9;
  --on-bp-dim: rgba(238, 244, 249, 0.76);
  --paper: #ffffff;
  --paper-ink: #232f3e;
}
:root[data-theme="dark"] {
  --bp: #101d2c;
}

.mono {
  font-family: var(--font-mono);
}
.link {
  font-weight: 700;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition:
    color 0.2s ease,
    text-underline-offset 0.2s ease;
}
.link:hover {
  color: var(--ink);
}

/* ---------------------------------------------------------------- prints */

/* --tilt is how crooked a print lies, --zoom how close it is held */
.print {
  margin: 0;
  padding: 10px 10px 0;
  background: var(--paper);
  box-shadow:
    0 18px 44px -20px rgba(20, 35, 50, 0.55),
    0 0 0 1px rgba(35, 47, 62, 0.08);
  rotate: var(--tilt, 0deg);
  scale: var(--zoom, 1);
  transition:
    rotate 0.4s var(--ease),
    scale 0.4s var(--ease);
}
.print img {
  width: 100%;
  object-fit: cover;
  background: #dfe4e8;
}
.print figcaption {
  padding: 10px 2px 12px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.35;
  color: var(--paper-ink);
}

/* A screenshot of the product, in a plain browser frame. */
.frame {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 26px 60px -30px rgba(20, 35, 50, 0.6);
}
.frame-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.frame-bar i {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
}
.frame-bar span {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 8px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 11.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-faint);
}
.frame img {
  width: 100%;
}
.fig {
  margin: 0;
}
.fig figcaption {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-faint);
}
.fig figcaption b {
  margin-right: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
}

/* ------------------------------------------------------- home: the intro */

.intro {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.intro-in {
  position: relative;
  display: grid;
  gap: 44px;
  width: min(100% - 32px, 1220px);
  margin-inline: auto;
  padding: 44px 0 64px;
}
.intro-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-bottom: 18px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}
.intro-name span {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}
.intro h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.2vw, 64px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.intro h1 em {
  font-style: italic;
  font-weight: 600;
  color: var(--accent);
}
.intro-lede {
  max-width: 560px;
  margin: 22px 0 30px;
  font-size: 19.5px;
  line-height: 1.55;
  color: var(--text-dim);
}
.intro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.collage {
  position: relative;
  width: min(100%, 600px);
  margin-inline: auto;
  aspect-ratio: 1 / 1.03;
}
.collage .print {
  position: absolute;
  left: 0;
  top: 0;
  width: 74%;
  --tilt: -3deg;
}
.collage .print img {
  aspect-ratio: 4 / 3;
  object-position: 60% 40%;
}
.collage .frame {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50%;
  rotate: 2deg;
}
.collage .frame img {
  aspect-ratio: 5 / 6.4;
  object-fit: cover;
  object-position: 50% 0;
}
.collage-tag {
  position: absolute;
  left: 5%;
  bottom: 13%;
  display: grid;
  gap: 2px;
  padding: 9px 14px;
  border: 1px solid rgba(35, 47, 62, 0.14);
  border-left: 4px solid #f76c02;
  border-radius: 4px;
  background: var(--paper);
  box-shadow: 0 14px 30px -16px rgba(20, 35, 50, 0.6);
  rotate: -2deg;
}
.collage-tag b {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--paper-ink);
}
.collage-tag span {
  font-size: 13.5px;
  color: #4a5561;
}
/* On load, the three things settle onto the desk. */
@media (prefers-reduced-motion: no-preference) {
  .js .collage > * {
    animation: settle 0.8s var(--ease) both;
  }
  .js .collage .frame {
    animation-delay: 0.16s;
  }
  .js .collage-tag {
    animation-delay: 0.32s;
  }
  @keyframes settle {
    from {
      opacity: 0;
      translate: 0 22px;
      scale: 1.04;
    }
  }
}
@media (max-width: 520px) {
  /* on a phone the caption takes two lines: give the screen room below it */
  .collage {
    aspect-ratio: 1 / 1.28;
  }
  .collage-tag {
    bottom: 9%;
  }
  .finding-photo img {
    aspect-ratio: 16 / 10;
  }
}
@media (min-width: 980px) {
  .intro-in {
    grid-template-columns: 1.02fr 0.98fr;
    align-items: center;
    gap: 56px;
    padding: 64px 0 88px;
  }
}

/* ------------------------------------------------------ home: the letter */

.letter {
  padding: 76px 0;
  background: var(--bg-raise);
}
.letter-in {
  display: grid;
  gap: 40px;
  width: min(100% - 32px, 1080px);
  margin-inline: auto;
}
.letter .print {
  width: min(100%, 320px);
  margin-inline: auto;
  --tilt: 2deg;
}
.letter .print img {
  aspect-ratio: 1;
  object-position: 22% 60%;
}
.letter-body p {
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 22.5px);
  line-height: 1.6;
  color: var(--text);
}
.letter-body p + p {
  margin-top: 20px;
}
.letter-sign {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin-top: 28px !important;
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
}
.letter-sign b {
  font-family: var(--font-display);
  font-size: 26px;
  font-style: italic;
  font-weight: 600;
  color: var(--ink);
}
.letter-sign span {
  color: var(--text-faint);
}
@media (min-width: 860px) {
  .letter-in {
    grid-template-columns: 320px 1fr;
    align-items: center;
    gap: 72px;
  }
}

/* -------------------------------------------------------------- blueprint */

.bp {
  position: relative;
  overflow: hidden;
  padding: 84px 0;
  background: var(--bp);
  color: var(--on-bp);
}
/* the border of the drawing sheet */
.bp::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(134, 197, 234, 0.28);
  pointer-events: none;
}
.bp-in {
  position: relative;
  z-index: 1;
  width: min(100% - 56px, 1180px);
  margin-inline: auto;
}
.bp h1,
.bp h2 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  color: #ffffff;
}
.bp h1 {
  font-size: clamp(34px, 4.6vw, 56px);
}
.bp h2 {
  font-size: clamp(28px, 3.4vw, 42px);
}
.bp-lede {
  max-width: 640px;
  margin-top: 16px;
  font-size: 18.5px;
  line-height: 1.6;
  color: var(--on-bp-dim);
}
.bp .pill--ghost {
  color: #ffffff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7);
}
.bp .pill--ghost:hover {
  background: #ffffff;
  color: #18283b;
}
.bp .pill:not(.pill--ghost):hover {
  background: #ffffff;
  color: #18283b;
}
.bp .frame {
  border-color: rgba(134, 197, 234, 0.3);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8);
}
.bp .fig figcaption {
  color: var(--on-bp-dim);
}
.bp .fig figcaption b {
  color: var(--bp-line);
}
.bp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
@media (max-width: 700px) {
  .bp {
    padding: 60px 0;
  }
  .bp-in {
    width: min(100% - 44px, 1180px);
  }
}

/* Anatomy of a finding: the specimen on the left, what each part is on the
   right. The numbers on the specimen are the numbers of the list. */
.anatomy {
  display: grid;
  gap: 34px;
  margin-top: 44px;
}
.finding {
  display: grid;
  gap: 0;
  overflow: hidden;
  border-left: 5px solid #f76c02;
  border-radius: 8px;
  background: #ffffff;
  color: #232f3e;
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.9);
}
.finding-photo {
  position: relative;
}
.finding-photo img {
  width: 100%;
  height: 100%;
  min-height: 190px;
  object-fit: cover;
}
.finding-body {
  position: relative;
  padding: 22px 24px 20px;
}
.finding-call {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
.finding-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 10px;
  font-size: 15.5px;
  color: #4a5561;
}
.finding-meta .sev {
  padding: 2px 10px;
  border-left: 3px solid #f76c02;
  border-radius: 3px;
  background: #fdeee2;
  font-weight: 700;
  color: #232f3e;
}
.finding-meta b {
  color: #232f3e;
}
.finding-evidence {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.55;
  color: #4a5561;
}
.finding-code {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #c9d2da;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: #6e7379;
}
.pin {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: 6px;
  border-radius: 50%;
  background: #f76c02;
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  vertical-align: 2px;
}
.finding-photo .pin {
  position: absolute;
  left: 12px;
  top: 12px;
  margin: 0;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9);
}
.parts {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: part;
}
.parts li {
  position: relative;
  padding-left: 40px;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--on-bp-dim);
  counter-increment: part;
}
.parts li::before {
  content: counter(part);
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--bp-line);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--bp-line);
}
.parts b {
  color: #ffffff;
}
@media (min-width: 620px) {
  .finding {
    grid-template-columns: 200px 1fr;
  }
}
@media (min-width: 1020px) {
  .anatomy {
    grid-template-columns: 1.08fr 0.92fr;
    align-items: center;
    gap: 56px;
  }
}

/* The twelve characters, read left to right like a dimension line. */
.decode {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px 14px;
  margin-top: 30px;
}
.decode div {
  position: relative;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bp-line);
}
.decode div::before,
.decode div::after {
  content: "";
  position: absolute;
  bottom: -5px;
  width: 1px;
  height: 9px;
  background: var(--bp-line);
}
.decode div::before {
  left: 0;
}
.decode div::after {
  right: 0;
}
.decode b {
  display: block;
  width: fit-content;
  font-family: var(--font-mono);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  color: #ffffff;
}
.decode span {
  display: block;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bp-line);
}
.decode em {
  display: block;
  font-size: 15.5px;
  font-style: normal;
  color: var(--on-bp);
}
.decode-note {
  margin-top: 56px;
  font-size: 17px;
  color: var(--on-bp-dim);
}
.decode-note b {
  color: #ffffff;
}
@media (min-width: 820px) {
  .decode {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* The drawing's legend: the seventeen systems, by their two letters. */
.systems {
  display: grid;
  gap: 0 34px;
  margin-top: 36px;
}
.systems div {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 2px 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(134, 197, 234, 0.22);
}
.systems b {
  grid-row: span 2;
  align-self: start;
  padding: 4px 0;
  border: 1px solid var(--bp-line);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: var(--bp-line);
}
.systems span {
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
}
.systems small {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--on-bp-dim);
}
@media (min-width: 680px) {
  .systems {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1040px) {
  .systems {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* --------------------------------------------------------- plain sections */

.band {
  padding: 80px 0;
}
.band--raise {
  background: var(--bg-raise);
}
.band-in {
  width: min(100% - 32px, 1180px);
  margin-inline: auto;
}
.band h2,
.h-ink {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.3vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
}
.band-lede {
  max-width: 680px;
  margin-top: 14px;
  font-size: 18.5px;
  line-height: 1.6;
  color: var(--text-dim);
}
@media (max-width: 700px) {
  .band {
    padding: 56px 0;
  }
}

/* two screenshots, the second one set lower */
.glimpse {
  display: grid;
  gap: 40px;
  margin-top: 40px;
}
@media (min-width: 900px) {
  .glimpse {
    grid-template-columns: 1fr 1fr;
    gap: 44px;
  }
  .glimpse .fig + .fig {
    margin-top: 64px;
  }
}

/* three steps in a row */
.process {
  display: grid;
  gap: 40px;
  margin-top: 44px;
}
.process img {
  width: 100%;
  aspect-ratio: 5 / 4;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  object-fit: cover;
}
.process h3 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 20px;
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
}
.process h3 b {
  font-family: var(--font-display);
  font-size: 40px;
  font-style: italic;
  font-weight: 600;
  line-height: 0.9;
  color: var(--accent);
}
.process p {
  margin-top: 10px;
  font-size: 16.5px;
  color: var(--text-dim);
}
@media (min-width: 860px) {
  .process {
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
  }
}

/* the tour: a screenshot and what it shows, side by side, alternating */
.tour {
  display: grid;
  gap: 72px;
  margin-top: 52px;
}
.tour-row {
  display: grid;
  gap: 26px;
  align-items: center;
}
/* a grid child is as wide as its longest word unless told otherwise */
.tour-row > *,
.glimpse > *,
.anatomy > * {
  min-width: 0;
}
.tour-row h3 {
  font-family: var(--font-display);
  font-size: clamp(23px, 2.4vw, 29px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}
.tour-row p {
  margin-top: 14px;
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--text-dim);
}
@media (min-width: 940px) {
  .tour-row {
    grid-template-columns: 1.18fr 0.82fr;
    gap: 60px;
  }
  .tour-row:nth-child(even) .fig {
    order: 2;
  }
  .tour-row:nth-child(even) {
    grid-template-columns: 0.82fr 1.18fr;
  }
}

/* rules, credentials, services: a heading and a sentence, between hairlines */
.facts {
  display: grid;
  gap: 0 48px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
.facts li {
  position: relative;
  padding: 18px 0 18px 22px;
  border-top: 1px solid var(--line);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--text-dim);
}
.facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: 3px;
  height: 18px;
  background: var(--accent);
}
.facts b {
  display: block;
  margin-bottom: 2px;
  font-size: 18px;
  color: var(--ink);
}
@media (min-width: 780px) {
  .facts {
    grid-template-columns: 1fr 1fr;
  }
}

/* running text inside a sheet */
.copy {
  max-width: 780px;
  margin: 0 auto;
}
.copy p {
  margin-top: 16px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--text);
}
.copy a {
  font-weight: 600;
}
.sheet h2.h-serif {
  margin-top: 60px;
}
.bio {
  display: grid;
  gap: 30px;
  max-width: 940px;
  margin: 34px auto 0;
}
.bio .print {
  width: min(100%, 300px);
  margin-inline: auto;
  --tilt: -2deg;
}
.bio .print img {
  aspect-ratio: 1;
}
.bio p {
  font-size: 18px;
  line-height: 1.7;
}
.bio p + p {
  margin-top: 14px;
}
.bio .say {
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.4;
  color: var(--accent);
}
@media (min-width: 820px) {
  .bio {
    grid-template-columns: 300px 1fr;
    align-items: center;
    gap: 52px;
  }
}

/* --------------------------------------------------------- tape measure */

.tape {
  position: relative;
  margin: 44px 0 0;
}
.tape-band {
  position: relative;
  height: 34px;
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, #232f3e 0 2px, transparent 2px 60px) 0
      100% / 100% 18px no-repeat,
    repeating-linear-gradient(
        90deg,
        rgba(35, 47, 62, 0.75) 0 1.5px,
        transparent 1.5px 12px
      )
      0 100% / 100% 9px no-repeat,
    #f9a03f;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(35, 47, 62, 0.3),
    0 10px 20px -14px rgba(20, 35, 50, 0.7);
}
/* the hook at the end of the tape */
.tape-band::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -5px;
  width: 9px;
  height: 44px;
  border-radius: 2px;
  background: linear-gradient(90deg, #8d99a5, #c9d2da 55%, #8d99a5);
}
.tape-marks {
  display: grid;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tape-marks li {
  position: relative;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--text-dim);
}
.tape-marks b {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
@media (min-width: 860px) {
  .tape-marks {
    grid-template-columns: repeat(5, 1fr);
    margin-top: 26px;
  }
  .tape-marks li {
    padding-top: 2px;
  }
  .tape-marks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: -26px;
    width: 2px;
    height: 20px;
    background: var(--ink);
  }
}
@media (max-width: 859.98px) {
  .tape {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 0 20px;
  }
  .tape-band {
    width: 30px;
    height: auto;
    background:
      repeating-linear-gradient(180deg, #232f3e 0 2px, transparent 2px 60px)
        100% 0 / 16px 100% no-repeat,
      repeating-linear-gradient(
          180deg,
          rgba(35, 47, 62, 0.75) 0 1.5px,
          transparent 1.5px 12px
        )
        100% 0 / 8px 100% no-repeat,
      #f9a03f;
  }
  .tape-band::before {
    left: -5px;
    top: -5px;
    width: 40px;
    height: 9px;
    background: linear-gradient(180deg, #8d99a5, #c9d2da 55%, #8d99a5);
  }
  .tape-marks {
    padding: 8px 0 12px;
  }
}

/* ------------------------------------------------ home: field and reading */

.duo {
  display: grid;
  gap: 48px;
}
.duo h2 {
  font-size: clamp(25px, 2.6vw, 32px);
}
.duo p {
  margin-top: 14px;
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--text-dim);
}
.duo .link {
  display: inline-block;
  margin-top: 20px;
}
.reading {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.reading li {
  display: grid;
  gap: 2px 20px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.reading li:last-child {
  border-bottom: 1px solid var(--line);
}
.reading time {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-faint);
}
.reading a {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.reading a:hover {
  color: var(--accent);
  text-decoration: none;
}
@media (min-width: 560px) {
  .reading li {
    grid-template-columns: 118px 1fr;
    align-items: baseline;
  }
}
@media (min-width: 940px) {
  .duo {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 80px;
  }
}

/* a few prints from the Off the clock page, fanned out */
.fan {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 40px;
}
.fan .polaroid {
  margin: 0;
}
.fan .polaroid img {
  aspect-ratio: 1;
  object-fit: cover;
}
@media (min-width: 900px) {
  .fan {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 0 20px;
  }
  .fan .polaroid {
    margin: 0 -12px;
  }
  .fan .polaroid:nth-child(even) {
    margin-top: 26px;
  }
}

/* --------------------------------------------- platform page: the header */

.bp--top {
  padding: 64px 0 0;
}
.bp--top .bp-in {
  text-align: left;
}
.bp-note {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--bp-line);
}
.bp-stage {
  margin-top: 48px;
}
.bp-stage .frame {
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 -20px 70px -30px rgba(0, 0, 0, 0.8);
}
.bp-stage img {
  aspect-ratio: 16 / 8.2;
  object-fit: cover;
  object-position: 50% 0;
}

/* tables: plans, fees */
.table-wrap {
  margin-top: 30px;
  overflow-x: auto;
}
table.table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 16.5px;
}
.table th,
.table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.table thead th {
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.table td:first-child {
  font-weight: 700;
  color: var(--ink);
}
.table .num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink);
}
.table s {
  margin-right: 8px;
  font-weight: 400;
  color: var(--text-faint);
}

/* questions */
.faq {
  max-width: 860px;
  margin: 30px auto 0;
}
.faq details {
  border-top: 1px solid var(--line);
}
.faq details:last-child {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 2px;
  font-family: var(--font-display);
  font-size: 19.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 400;
  color: var(--accent);
}
.faq details[open] summary::after {
  content: "\2212";
}
.faq details > p,
.faq details > .table-wrap {
  margin: 0 2px 20px;
}
.faq details > p {
  max-width: 720px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-dim);
}
.band .faq {
  margin-inline: 0;
}

/* the last word, on blueprint */
.closing-bp {
  text-align: center;
}
.closing-bp h2 {
  max-width: 800px;
  margin-inline: auto;
}
.closing-bp .bp-lede {
  margin-inline: auto;
}
.closing-bp .bp-actions {
  justify-content: center;
}
.closing-bp .credit {
  margin-top: 34px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--on-bp-dim);
}
.closing-bp .credit a {
  color: var(--bp-line);
}

/* contact */
.reach {
  display: grid;
  gap: 40px;
  max-width: 980px;
  margin: 34px auto 0;
}
.reach dl {
  margin: 0;
}
.reach dt {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.reach dt:first-child {
  margin-top: 0;
}
.reach dd {
  margin: 4px 0 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-dim);
}
.reach dd b,
.reach dd a {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 600;
  color: var(--ink);
}
.reach dd a:hover {
  color: var(--accent);
  text-decoration: none;
}
.form {
  display: grid;
  gap: 14px;
}
.form-row {
  display: grid;
  gap: 14px;
}
.form label {
  display: grid;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.form input,
.form select,
.form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16.5px;
  letter-spacing: 0;
  text-transform: none;
}
.form textarea {
  min-height: 150px;
  resize: vertical;
}
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form small {
  font-size: 14px;
  color: var(--text-faint);
}
.form .pill {
  justify-self: start;
}
@media (min-width: 560px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 880px) {
  .reach {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 64px;
  }
}

.sheet-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}

/* ==========================================================================
   Motion. Calm and few: each thing moves once, then stays still.
   The moving parts sit behind the "js" class and the no-preference query,
   so with no script, with reduced motion, or on paper, everything is
   simply there.
   ========================================================================== */

/* Pointing at a pin lights its line in the list, and the other way round. */
.parts li,
.parts li::before {
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}
.parts li.is-lit {
  color: #ffffff;
}
.parts li.is-lit::before {
  border-color: #f76c02;
  background-color: #f76c02;
  color: #ffffff;
}
.pin {
  transition: box-shadow 0.2s ease;
}
.pin.is-lit {
  box-shadow: 0 0 0 4px rgba(247, 108, 2, 0.35);
}
.finding-photo .pin.is-lit {
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.9),
    0 0 0 7px rgba(247, 108, 2, 0.5);
}

/* the order things arrive in, counted from nought */
.parts li:nth-child(2),
.decode div:nth-child(2),
.tape-marks li:nth-child(2) {
  --n: 1;
}
.parts li:nth-child(3),
.decode div:nth-child(3),
.tape-marks li:nth-child(3) {
  --n: 2;
}
.parts li:nth-child(4),
.decode div:nth-child(4),
.tape-marks li:nth-child(4) {
  --n: 3;
}
.parts li:nth-child(5),
.decode div:nth-child(5),
.tape-marks li:nth-child(5) {
  --n: 4;
}
.decode div:nth-child(6) {
  --n: 5;
}

/* Under the pointer: a print straightens, a screenshot lifts, a link's
   underline drops a little. */
.fig .frame,
.bp-stage .frame {
  transition:
    translate 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
@media (hover: hover) {
  .print:hover {
    --tilt: 0deg;
    --zoom: 1.02;
  }
  .fig .frame:hover,
  .bp-stage .frame:hover {
    translate: 0 -4px;
  }
  .link:hover {
    text-underline-offset: 7px;
  }
}

@media screen and (prefers-reduced-motion: no-preference) {
  /* Every transition here is declared on the arrived state (.is-in), so
     marking a block as waiting is instant and only its arrival is seen. */

  /* A print is put down: straight and a touch large, then it settles. */
  .js .print.reveal:not(.is-in) {
    --tilt: 0deg;
    --zoom: 1.05;
  }
  .js .print.reveal.is-in {
    transition:
      opacity 0.7s var(--ease),
      translate 0.7s var(--ease),
      rotate 0.9s var(--ease),
      scale 0.9s var(--ease);
  }
  .js .polaroid.reveal:not(.is-in) {
    transform: rotate(0deg) scale(1.04);
  }
  .js .polaroid.reveal.is-in {
    transition:
      opacity 0.7s var(--ease),
      translate 0.7s var(--ease),
      transform 0.8s var(--ease),
      box-shadow 0.3s var(--ease);
  }

  /* The divider is a tape measure: the ticks run out from the middle. */
  .js .divider.reveal {
    opacity: 1;
    translate: none;
  }
  .js .divider.reveal i {
    scale: 0 1;
  }
  .js .divider.reveal i:first-child {
    transform-origin: 100% 100%;
  }
  .js .divider.reveal i:last-child {
    transform-origin: 0 100%;
  }
  .js .divider.reveal b {
    scale: 1 0;
    transform-origin: 50% 100%;
  }
  .js .divider.reveal.is-in i {
    scale: 1 1;
    transition: scale 0.7s var(--ease) 0.15s;
  }
  .js .divider.reveal.is-in b {
    scale: 1 1;
    transition: scale 0.35s var(--ease);
  }

  /* The timeline: the tape is pulled out, and each year shows as the
     tape reaches it. */
  .js .tape.reveal {
    opacity: 1;
    translate: none;
  }
  .js .tape.reveal .tape-band {
    clip-path: inset(-8px 100% -30px -8px);
  }
  .js .tape.reveal.is-in .tape-band {
    clip-path: inset(-8px -8px -30px -8px);
    transition: clip-path 1.6s var(--ease);
  }
  .js .tape.reveal .tape-marks li {
    opacity: 0;
    translate: 0 8px;
  }
  .js .tape.reveal.is-in .tape-marks li {
    opacity: 1;
    translate: 0 0;
    transition:
      opacity 0.5s var(--ease),
      translate 0.5s var(--ease);
    transition-delay: calc(var(--n, 0) * 0.24s + 0.2s);
  }
  @media (max-width: 859.98px) {
    .js .tape.reveal .tape-band {
      clip-path: inset(-8px -30px 100% -8px);
    }
    .js .tape.reveal.is-in .tape-band {
      clip-path: inset(-8px -30px -8px -8px);
    }
  }

  /* Anatomy of a finding: the pins go in one by one, and each one
     brings up its line in the list. */
  .js .anatomy.reveal .pin {
    scale: 0;
  }
  .js .anatomy.reveal.is-in .pin {
    scale: 1;
    transition: scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: calc(var(--n, 0) * 0.36s + 0.55s);
  }
  .js .anatomy.reveal .parts li {
    opacity: 0.3;
  }
  .js .anatomy.reveal.is-in .parts li {
    opacity: 1;
    transition: opacity 0.5s ease;
    transition-delay: calc(var(--n, 0) * 0.36s + 0.55s);
  }

  /* The code is typed, two letters at a time, then its labels come up. */
  .js .decode.reveal {
    opacity: 1;
    translate: none;
  }
  .js .decode.reveal b {
    clip-path: inset(0 100% 0 0);
  }
  .js .decode.reveal.is-in b {
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.2s steps(2, end);
    transition-delay: calc(var(--n, 0) * 0.22s + 0.25s);
  }
  .js .decode.reveal div {
    border-bottom-color: transparent;
  }
  .js .decode.reveal.is-in div {
    border-bottom-color: var(--bp-line);
    transition: border-color 0.6s ease 1.65s;
  }
  .js .decode.reveal div::before,
  .js .decode.reveal div::after {
    opacity: 0;
  }
  .js .decode.reveal.is-in div::before,
  .js .decode.reveal.is-in div::after {
    opacity: 1;
    transition: opacity 0.6s ease 1.65s;
  }
  .js .decode.reveal span,
  .js .decode.reveal em {
    opacity: 0;
    translate: 0 6px;
  }
  .js .decode.reveal.is-in span,
  .js .decode.reveal.is-in em {
    opacity: 1;
    translate: 0 0;
    transition:
      opacity 0.5s var(--ease),
      translate 0.5s var(--ease);
    transition-delay: calc(var(--n, 0) * 0.07s + 1.7s);
  }

  /* On the tour, each screen comes in from its own side. */
  .js .tour-row > .fig.reveal.is-in {
    transition-duration: 0.9s;
  }
  @media (min-width: 940px) {
    .js .tour-row > .fig.reveal:not(.is-in) {
      translate: -40px 0;
    }
    .js .tour-row:nth-child(even) > .fig.reveal:not(.is-in) {
      translate: 40px 0;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .print,
  .link,
  .pin,
  .parts li,
  .parts li::before,
  .fig .frame,
  .bp-stage .frame {
    transition: none;
  }
}

@media print {
  .bp {
    background: #ffffff;
    color: #000000;
  }
  .bp::after {
    display: none;
  }
  .bp h1,
  .bp h2,
  .parts b,
  .decode b,
  .systems span {
    color: #000000;
  }
  .js .reveal {
    opacity: 1;
    translate: none;
  }
}