/* /claude, 23 August 2026
   One photograph, one notebook, one drawer of older web experiments. */

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/sourceserif4-var-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-var-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/assets/fonts/jetbrainsmono-var-latin.woff2') format('woff2');
}

:root,
[data-ctheme="light"] {
  --bg: #FAF9F5;
  --bg-raised: #F0EEE7;
  --bg-inset: #E9E5DC;
  --paper: #FFFDF8;
  --ink: #171716;
  --ink-soft: #3F3E39;
  --muted: #66655E;
  --border: #D9D5CA;
  --border-strong: #A7A39A;
  --brand: #FF4F00;
  --accent: #C23C00;
  --accent-ink: #C23C00;
  --accent-soft: #F5E4DA;
  --accent-glow: rgba(255, 79, 0, .12);
  --code-bg: #21201C;
  --shadow: 0 14px 40px rgba(23, 23, 22, .08);
  --cosmic: var(--accent);
  --cosmic-soft: var(--accent-soft);
  --violet: var(--accent);
  --radius: 5px;
  --page: 1160px;
  --gutter: clamp(20px, 4.2vw, 56px);
  --serif: 'Source Serif 4', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

[data-ctheme="dark"] {
  --bg: #262624;
  --bg-raised: #302F2C;
  --bg-inset: #1F1F1D;
  --paper: #2B2A27;
  --ink: #F0EEE7;
  --ink-soft: #D1CEC5;
  --muted: #9F9D93;
  --border: #44423D;
  --border-strong: #66635C;
  --brand: #FF4F00;
  --accent: #FF8551;
  --accent-ink: #FF8551;
  --accent-soft: #3C2C24;
  --accent-glow: rgba(255, 79, 0, .18);
  --code-bg: #1A1917;
  --shadow: 0 16px 42px rgba(0, 0, 0, .25);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-ctheme]) {
    --bg: #262624;
    --bg-raised: #302F2C;
    --bg-inset: #1F1F1D;
    --paper: #2B2A27;
    --ink: #F0EEE7;
    --ink-soft: #D1CEC5;
    --muted: #9F9D93;
    --border: #44423D;
    --border-strong: #66635C;
    --brand: #FF4F00;
    --accent: #FF8551;
    --accent-ink: #FF8551;
    --accent-soft: #3C2C24;
    --accent-glow: rgba(255, 79, 0, .18);
    --code-bg: #1A1917;
    --shadow: 0 16px 42px rgba(0, 0, 0, .25);
  }
}

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

html {
  color-scheme: light;
  scroll-behavior: smooth;
  background: var(--bg);
}

[data-ctheme="dark"] {
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-ctheme]) {
    color-scheme: dark;
  }
}

body.claude-space {
  min-height: 100vh;
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.58;
  letter-spacing: -.012em;
  -webkit-tap-highlight-color: transparent;
}

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

a {
  color: inherit;
  text-underline-offset: .2em;
}

button,
textarea,
input {
  font: inherit;
}

::selection {
  background: var(--brand);
  color: #171716;
}

:where(a, button, summary, textarea, input):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 300;
  transform: translateY(-160%);
  padding: 10px 14px;
  background: var(--ink);
  color: var(--bg);
  font: 700 .72rem/1.2 var(--mono);
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-head,
.site-main,
.site-foot {
  width: min(100%, var(--page));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-head {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--border);
}

.site-name,
.site-head p,
.site-foot,
.eyebrow,
.trip-facts dt,
.trip-facts dd,
.lead-photo figcaption,
.archive-date,
.archive-status,
.archive-close,
.archive-summary-meta,
.archive-noscript {
  font-family: var(--mono);
}

.site-name {
  font-size: .72rem;
  font-weight: 720;
  text-decoration: none;
}

.site-head p {
  margin: 0;
  color: var(--muted);
  font: 500 .62rem/1.3 var(--mono);
}

.site-main {
  padding-bottom: clamp(64px, 9vw, 112px);
}

.lead {
  display: grid;
  grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr);
  gap: clamp(42px, 7vw, 94px);
  align-items: end;
  padding-block: clamp(54px, 7vw, 94px) clamp(70px, 9vw, 118px);
  border-bottom: 1px solid var(--border-strong);
}

.lead-copy {
  padding-bottom: clamp(6px, 2vw, 24px);
}

.eyebrow {
  margin: 0;
  color: var(--accent-ink);
  font-size: .62rem;
  font-weight: 720;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.lead h1 {
  margin: 18px 0 0;
  font-family: var(--serif);
  font-size: clamp(4rem, 7.8vw, 7.2rem);
  font-weight: 650;
  line-height: .82;
  letter-spacing: -.055em;
}

.lede {
  max-width: 39ch;
  margin: 30px 0 0;
  color: var(--ink-soft);
  font-size: clamp(.98rem, 1.4vw, 1.08rem);
  line-height: 1.62;
}

.trip-facts {
  max-width: 390px;
  margin: 34px 0 0;
  border-top: 1px solid var(--border);
}

.trip-facts div {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}

.trip-facts dt,
.trip-facts dd {
  margin: 0;
  font-size: .6rem;
  line-height: 1.45;
}

.trip-facts dt {
  color: var(--muted);
}

.trip-facts dd {
  color: var(--ink);
}

.text-link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-height: 44px;
  margin-top: 28px;
  padding-block: 10px;
  color: var(--ink);
  font-size: .9rem;
  font-weight: 720;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 2px;
}

.lead-photo {
  min-width: 0;
  margin: 0;
}

.lead-photo > a {
  display: block;
  overflow: hidden;
  background: var(--bg-raised);
}

.lead-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 50%;
}

.lead-photo figcaption {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 10px;
  color: var(--muted);
  font-size: .56rem;
  line-height: 1.4;
}

.archive {
  padding-block: clamp(72px, 9vw, 116px);
}

.archive-disclosure {
  border-block: 1px solid var(--border-strong);
}

.archive-disclosure > summary {
  min-height: 114px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 24px 0;
  list-style: none;
  cursor: pointer;
}

.archive-disclosure > summary::-webkit-details-marker {
  display: none;
}

.archive-disclosure > summary::after {
  content: '+';
  color: var(--brand);
  font: 400 1.8rem/1 var(--sans);
}

.archive-disclosure[open] > summary::after {
  content: '−';
}

.archive-summary-title {
  display: block;
  margin-top: 9px;
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 630;
  line-height: .95;
  letter-spacing: -.045em;
}

.archive-summary-meta {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: .58rem;
}

.archive-body {
  padding: 24px 0 8px;
}

.archive-intro {
  max-width: 58ch;
  margin: 0 0 32px;
  color: var(--ink-soft);
  font-size: .9rem;
}

.archive-grid {
  counter-reset: archive-item;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 5vw, 64px);
  border-top: 1px solid var(--border);
}

.archive-item {
  counter-increment: archive-item;
  position: relative;
  border-bottom: 1px solid var(--border);
}

.archive-item::before {
  content: counter(archive-item, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 20px;
  width: 30px;
  color: var(--muted);
  font: 500 .52rem/1.35 var(--mono);
  pointer-events: none;
}

.archive-button {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 16px 8px 16px 38px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.archive-button.is-active {
  background: var(--accent-soft);
  box-shadow: inset 2px 0 0 var(--brand);
}

.archive-button:disabled {
  opacity: .52;
  cursor: wait;
}

.archive-date {
  color: var(--muted);
  font-size: .55rem;
}

.archive-object-title {
  font-size: .9rem;
  font-weight: 650;
  letter-spacing: -.014em;
}

.archive-button.is-active .archive-object-title {
  color: var(--accent-ink);
}

.archive-noscript {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: .6rem;
}

.archive-stage {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--border-strong);
  scroll-margin-top: 20px;
}

.archive-stage[hidden] {
  display: none;
}

.archive-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.archive-status {
  margin: 0;
  color: var(--muted);
  font-size: .6rem;
}

.archive-close {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink-soft);
  font-size: .58rem;
  cursor: pointer;
}

.archive-object-panel {
  margin-top: 0 !important;
  box-shadow: none !important;
}

.release-panel {
  grid-column: auto;
}

/* Shared shell for archived objects. Their own styles are lazy-loaded. */
.span-12 {
  grid-column: span 12;
}

.panel {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px clamp(16px, 3vw, 24px);
  box-shadow: none;
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  flex-wrap: wrap;
}

.panel-title {
  margin: 0;
  color: var(--ink);
  font: 650 .95rem/1.3 var(--sans);
}

.panel-badge {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font: 500 .68rem/1.3 var(--mono);
  white-space: nowrap;
}

.panel p {
  margin: 0 0 10px;
  color: var(--ink-soft);
  font-size: .88rem;
}

.panel p:last-child {
  margin-bottom: 0;
}

.colophon {
  display: grid;
  grid-template-columns: 170px minmax(0, 620px);
  gap: 28px;
  padding-top: clamp(30px, 5vw, 50px);
  border-top: 1px solid var(--border);
}

.colophon > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.6;
}

.site-foot {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--border-strong);
  color: var(--muted);
  font-size: .58rem;
}

.site-foot p {
  margin: 0;
}

@media (hover: hover) and (pointer: fine) {
  .site-name,
  .text-link,
  .lead-photo img,
  .archive-button,
  .archive-close {
    transition:
      color .16s ease,
      background-color .16s ease,
      border-color .16s ease,
      opacity .16s ease;
  }

  .site-name:hover,
  .text-link:hover {
    color: var(--accent-ink);
  }

  .lead-photo a:hover img {
    opacity: .94;
  }

  .archive-button:hover {
    background: var(--bg-raised);
  }

  .archive-button:hover .archive-object-title {
    color: var(--accent-ink);
  }

  .archive-close:hover {
    border-color: var(--brand);
    color: var(--ink);
  }
}

@media (max-width: 820px) {
  .lead {
    grid-template-columns: 1fr;
    gap: 42px;
    align-items: start;
  }

  .lead-copy {
    padding-bottom: 0;
  }

  .lead h1 {
    font-size: clamp(4rem, 18vw, 6.2rem);
  }

  .lead-photo {
    width: min(100%, 620px);
  }

  .archive-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .colophon {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 520px) {
  .site-head {
    min-height: 58px;
  }

  .lead {
    padding-block: 42px 68px;
  }

  .lead h1 {
    margin-top: 14px;
    font-size: clamp(3.7rem, 20vw, 5.5rem);
  }

  .lede {
    margin-top: 24px;
  }

  .trip-facts {
    margin-top: 28px;
  }

  .archive {
    padding-block: 60px 72px;
  }

  .archive-disclosure > summary {
    min-height: 104px;
  }

  .archive-body {
    padding-top: 18px;
  }

  .archive-toolbar {
    align-items: flex-start;
  }

  .panel-head {
    align-items: flex-start;
  }

  .panel-badge {
    white-space: normal;
  }

  .site-foot {
    min-height: 74px;
  }
}

@media (pointer: coarse) {
  .site-name,
  .text-link,
  .archive-button,
  .archive-close,
  .archive-disclosure > summary {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  :root,
  [data-ctheme="light"],
  [data-ctheme="dark"] {
    --bg: #FFFFFF;
    --bg-raised: #F3F1EB;
    --paper: #FFFFFF;
    --ink: #171716;
    --ink-soft: #3F3E39;
    --muted: #66655E;
    --border: #D9D5CA;
    --border-strong: #A7A39A;
    --accent: #C23C00;
    --accent-ink: #C23C00;
    --brand: #FF4F00;
    color-scheme: light;
  }

  body.claude-space {
    background: #FFFFFF;
  }

  .site-head,
  .site-main,
  .site-foot {
    width: 100%;
    padding-inline: 0;
  }

  .lead {
    grid-template-columns: .8fr 1.2fr;
    gap: 36px;
    padding-block: 30px 44px;
    break-inside: avoid;
  }

  .lead h1 {
    font-size: 52pt;
  }

  .archive-stage,
  .archive-close,
  .skip-link {
    display: none !important;
  }

  .archive {
    padding-block: 44px;
  }

  .archive-disclosure > summary::after {
    display: none;
  }

  .site-foot {
    min-height: 54px;
  }
}