/* Code / Study 02 — The path */
.code-art-page {
  --art-ink: #20211f;
  --art-muted: #8a8a82;
  --art-rust: #a47760;
  --art-sage: #6a8a5c;
  /* The studio table's paints, softened: ochre, blue and crimson. */
  --art-ochre: #be9e62;
  --art-blue: #7a8eac;
  --art-crimson: #ac686e;
  --art-line: #d3d1c8;
}
.code-art-page .art-content { min-width: 0; }
.art-kicker,
.art-legend,
.art-stats dt,
.art-console-head,
.art-footnote {
  font: 400 11.5px/1.5 "Portfolio Mono", monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #6f6f68;
}
.art-kicker {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--art-line);
}
.art-preview { color: var(--art-rust); }

.code-art-page .art-title {
  margin: clamp(18px, 2.4vw, 30px) 0 0;
  font: 500 clamp(36px, 4.6vw, 64px)/.9 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -.055em;
  color: var(--art-ink);
}

/* The one sentence that says what this is, typed out on landing; "line" in the rust of your own line. */
.code-art-page .art-title .art-sub {
  display: block;
  margin: 10px 0 0;
  max-width: 640px;
  min-height: 1.3em;
  font: 400 clamp(12px, 1.05vw, 14px)/1.7 "Portfolio Mono", "IBM Plex Mono", monospace;
  letter-spacing: .04em;
  text-transform: none;
  color: #4a4b47;
}
.code-art-page .art-title .art-sub i { font-style: normal; color: var(--art-rust); }
/* confidence-type.css forces Helvetica on body * with !important; the caption keeps the typewriter face. */
.code-art-page .art-title .art-sub, .code-art-page .art-title .art-sub * { font-family: "Portfolio Mono", "IBM Plex Mono", monospace !important; font-weight: 400 !important; }

/* Sized so the field and the top of the command line both show on landing. */
.art-field { position: relative; margin: 0; }
#art-canvas {
  display: block;
  width: 100%;
  height: clamp(300px, min(38vw, 52vh), 540px);
  cursor: crosshair;
}
/* A quiet line under the field saying what it shows. */
.code-art-page .art-caption {
  display: block !important; margin: 10px 0 0; max-width: 640px;
  font: 400 13px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif !important; letter-spacing: 0; text-transform: none; color: #8a8a82;
}
.code-art-page .art-caption span { display: inline !important; color: #b8694a; }
.art-tooltip {
  position: absolute;
  pointer-events: none;
  transform: translate(12px, -50%);
  padding: 6px 9px;
  background: #f5f3ecee;
  border: 1px solid var(--art-line);
  font: 400 11.5px/1.5 "Portfolio Mono", monospace;
  letter-spacing: .05em;
  color: var(--art-ink);
  white-space: nowrap;
}

.art-console { margin-top: 10px; }
.art-console-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 20px;
  padding: 10px 0 8px;
  border-top: 1px solid var(--art-line);
}
.code-art-page .art-console-head h2 { margin: 0; font: inherit; letter-spacing: inherit; color: var(--art-ink); text-transform: none; }
.art-live {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  color: #6f6f68;
  font-variant-numeric: tabular-nums;
}
.art-live span:first-child { color: var(--art-ink); min-width: 12ch; }
#live-edge, #live-route { color: #8e6957; }
#live-sync, #live-train { color: #527365; }
#live-sun { color: #96755e; }
#live-moon { color: #72776c; }
#art-log {
  margin: 0;
  height: 132px;
  overflow: hidden;
  padding: 8px 0 0 14px;
  border-left: 1px solid var(--art-ink);
  font: 400 12px/1.72 "Portfolio Mono", monospace;
  letter-spacing: 0;
  color: #3f403b;
  white-space: pre;
}
#art-log .t { color: #7a7a72; }
#art-log .visit { color: var(--art-ink); }
#art-log .film { color: var(--art-crimson); }
#art-log .music { color: var(--art-blue); }
#art-log .you { color: var(--art-ink); font-weight: 500; }
#art-log .sun { color: var(--art-muted); }
#art-log .log-line,
.art-peek .log-line {
  --tone: #666961;
  --wash: rgba(32, 33, 31, .045);
  padding: 1px 5px 1px 4px;
  margin-left: -4px;
  background: var(--wash);
  box-shadow: inset 2px 0 0 var(--tone);
  color: var(--tone);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.log-line.system { --tone: #77796f; --wash: rgba(32, 33, 31, .04); }
.log-line.visit { --tone: #5e7057; --wash: rgba(106, 138, 92, .09); }
.log-line.page { --tone: #946d58; --wash: rgba(164, 119, 96, .11); }
.log-line.film { --tone: #955a60; --wash: rgba(172, 104, 110, .13); }
.log-line.music { --tone: #5f7291; --wash: rgba(122, 142, 172, .15); }
.log-line.flight { --tone: #93783f; --wash: rgba(190, 158, 98, .14); }
.log-line.rail { --tone: #4e7165; --wash: rgba(72, 110, 96, .13); }
.log-line.weather { --tone: #687b5b; --wash: rgba(106, 138, 92, .075); }
.log-line.sky { --tone: #8a7865; --wash: rgba(164, 119, 96, .065); }
.log-line.you { --tone: #8f5942; --wash: rgba(164, 119, 96, .17); }
#art-log .log-line .action,
.art-peek .log-line .action { color: var(--tone); font-weight: 500; }
#art-log .log-line .detail,
.art-peek .log-line .detail { color: #4a4b46; }
#art-log .log-line.you .detail,
.art-peek .log-line.you .detail { color: var(--art-ink); }
#art-log .cursor {
  display: inline-block;
  width: 7px;
  height: 12px;
  vertical-align: -2px;
  background: var(--art-ink);
  animation: art-blink 1.05s steps(1) infinite;
}
@keyframes art-blink { 50% { opacity: 0; } }

.art-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 22px;
  padding-top: 12px;
  border-top: 1px solid var(--art-line);
}
.art-legend span { display: inline-flex; align-items: center; gap: 8px; }
.key { display: inline-block; width: 18px; height: 1px; background: var(--art-ink); }
.key-past { background: rgba(32, 33, 31, .28); }
.key-film { background: var(--art-crimson); height: 2px; }
.key-flight { width: 6px; height: 6px; border-radius: 50%; background: var(--art-ochre); box-shadow: -9px 0 0 -2px rgba(190, 158, 98, .45); margin-left: 8px; }
.key-train { width: 18px; height: 2px; background: rgb(72, 110, 96); box-shadow: 0 0 0 0 transparent; position: relative; }
.key-train::after { content: ''; position: absolute; left: 7px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--art-ink); }
.key-music { background: var(--art-blue); height: 2px; }
.key-you { width: 11px; height: 11px; border: 1px solid var(--art-rust); border-radius: 50%; background: radial-gradient(circle, var(--art-rust) 0 2px, transparent 2.5px); }
.key-night { width: 15px; height: 5px; background: radial-gradient(circle, rgba(32, 33, 31, .5) 1px, transparent 1.4px) 0 0 / 5px 5px; }

.art-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 28px 0 0;
  border-bottom: 1px solid var(--art-line);
}
.art-stats div { padding: 0 0 16px; }
.art-stats small { display: block; margin-top: 6px; font: 400 11px/1.4 "Portfolio Mono", monospace; letter-spacing: .08em; color: var(--art-blue); }
.art-stats small#stat-week-cities,
.art-stats small#stat-films-time { color: #6f6f68; }
.art-stats small#stat-now-you { color: var(--art-rust); min-height: 1.4em; }
/* The Machines: the one drawing you are not in. */
.art-not-you { margin: 10px 0 0; font: 400 10.5px/1.5 "Portfolio Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--art-rust); }
.art-stats div:nth-child(4) dt { color: #955a60; }
.art-stats div:nth-child(5) dt { color: #5f7291; }
.art-stats dd {
  margin: 6px 0 0;
  font: 400 clamp(26px, 3vw, 40px)/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -.04em;
  color: var(--art-ink);
  font-variant-numeric: tabular-nums;
}

.art-footnote { margin: 22px 0 0; max-width: 520px; text-transform: none; letter-spacing: .03em; }

@media (max-width: 760px) {
  /* On phones the field runs top to bottom, so it needs height rather than width. */
  #art-canvas { height: min(760px, 118vw + 300px); }
  .art-console-head { flex-direction: column; align-items: flex-start; }
  .art-live { gap: 2px 12px; font-size: 10px; }
  #live-fps, #live-sync { display: none; }
  .art-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  /* Long lines wrap instead of running off the edge; the newest stays in view. */
  #art-log { font-size: 10.5px; line-height: 1.6; height: 150px; padding-left: 10px; white-space: pre-wrap; word-break: break-word; }
}
@media (prefers-reduced-motion: reduce) {
  #art-log .cursor { animation: none; }
}

/* The command line needs true monospace so its columns line up; the site otherwise forces Helvetica. */
.code-art-page #art-log,
.code-art-page #art-log *,
.code-art-page .art-console-head,
.code-art-page .art-console-head * { font-family: "Portfolio Mono", monospace !important; }

/* Cities: one row each, busiest first. */
.art-cities { margin-top: 34px; }
.art-cities-head {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-bottom: 10px; border-bottom: 1px solid var(--art-line);
  font: 400 11.5px/1.5 "Portfolio Mono", monospace; letter-spacing: .07em; color: #6f6f68;
}
.code-art-page .art-cities-head h2 { margin: 0; font: inherit; letter-spacing: inherit; color: var(--art-ink); }
.art-timeline { position: relative; }
/* The cities circle: as tall as it is wide on a phone, a little shorter than wide on a big screen. */
#art-cities { display: block; width: 100%; height: min(86vw, 860px); margin-top: 8px; cursor: crosshair; touch-action: pan-y; }
@media (max-width: 760px) { #art-cities { height: 96vw; } }
.code-art-page .art-caption span.is-crimson { color: #955a60; }
/* The machines: as tall as the busiest of its three columns. */
#art-machines { display: block; width: 100%; height: 300px; margin-top: 6px; cursor: crosshair; touch-action: pan-y; }
.art-machines { margin-top: 34px; }
#art-work { display: block; width: 100%; height: 200px; cursor: crosshair; }
.art-work { margin-top: 34px; }
/* My journeys' totals: everything together, then where it was played. */
.art-work-totals { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px clamp(28px, 5vw, 72px); margin: 18px 0 6px; }
.art-work-totals[hidden] { display: none; }
.art-work-all b { display: block; font: 400 clamp(30px, 3.6vw, 48px)/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -.04em; color: var(--art-ink); font-variant-numeric: tabular-nums; }
.art-work-all span { display: block; margin-top: 7px; font: 400 11px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .07em; color: #6f6f68; }
.art-work-parts { display: flex; flex-wrap: wrap; gap: 14px clamp(22px, 4vw, 56px); margin: 0; padding-bottom: 2px; }
.art-work-parts dt { font: 400 10.5px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .07em; color: #8a8a82; }
.art-work-parts dd { margin: 4px 0 0; font: 400 clamp(17px, 1.7vw, 22px)/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.art-work-parts .p-vimeo, .art-work-parts .p-sc { color: #5f7291; }
.art-work-parts .p-tube { color: #806896; }
/* What My journeys shows: the work above each line, its plays reflected below. */
.code-art-page .art-work-key { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 6px 0 0; font: 400 11px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif !important; letter-spacing: .02em; text-transform: none; color: #8a8a82; }
.code-art-page .art-work-key span { display: inline-flex !important; align-items: center; gap: 7px; }
.art-work-key i { display: inline-block; width: 16px; height: 6px; }
.art-work-key .k-made { height: 5px; border-bottom: 1px solid rgba(32, 33, 31, .45); background: rgba(172, 104, 110, .2); }
.art-work-key .k-seen { width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle, rgba(95, 114, 145, .9) 0 2px, rgba(95, 114, 145, .2) 3px, rgba(95, 114, 145, 0) 70%); }
.art-work-key .k-tube { width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle, rgba(128, 104, 150, .95) 0 2px, rgba(128, 104, 150, .2) 3px, rgba(128, 104, 150, 0) 70%); }
.art-work-key .k-here { width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle, rgba(172, 104, 110, .5), rgba(172, 104, 110, 0) 70%); }

/* The command line peeks in from the bottom until it is scrolled into view (phones and desktop). */
.art-peek {
  display: flex; align-items: center; gap: 14px;
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(620px, calc(100vw - 36px)); z-index: 20; padding: 10px 14px;
  background: rgba(245, 243, 236, .94); border: 1px solid rgba(32, 33, 31, .16);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 400 11px/1.4 "Portfolio Mono", monospace !important; letter-spacing: 0; color: #3f403b; text-decoration: none;
  transition: opacity .35s ease, transform .35s ease;
}
.art-peek:hover { border-color: rgba(32, 33, 31, .35); }
.art-peek.is-away { opacity: 0; transform: translate(-50%, 12px); pointer-events: none; }
.art-peek-line { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.art-peek-line .t { color: #8a8a82; }
.art-peek-line .cursor { display: inline-block; width: 6px; height: 11px; vertical-align: -2px; background: var(--art-ink); animation: art-blink 1.05s steps(1) infinite; }
.art-peek-arrow { font-size: 13px; color: var(--art-ink); animation: art-bob 1.6s ease-in-out infinite; }
.code-art-page .art-peek * { font-family: "Portfolio Mono", monospace !important; }
@media (max-width: 760px) {
  .art-peek { left: 18px; right: 18px; width: auto; transform: none; bottom: calc(14px + env(safe-area-inset-bottom)); font-size: 10.5px !important; }
  .art-peek.is-away { transform: translateY(12px); }
}
@keyframes art-bob { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .art-peek-arrow { animation: none; } }
/* Desktop: no live strip, just one arrow that hovers until the page is scrolled. */
@media (min-width: 761px) { .art-peek { display: none; } }
.art-more {
  position: fixed; left: 50%; bottom: 22px; z-index: 20; transform: translateX(-50%);
  padding: 6px 12px; text-decoration: none;
  font: 300 20px/1 "Helvetica Neue", Helvetica, Arial, sans-serif !important; color: #8a8a82;
  transition: opacity .6s ease, color .2s ease;
}
.art-more:hover { color: var(--art-ink); }
.art-more span { display: inline-block; animation: art-hover 2.8s ease-in-out infinite; }
@keyframes art-hover { 0%, 100% { transform: translateY(-2px); opacity: .5; } 50% { transform: translateY(4px); opacity: 1; } }
.art-more.is-away { opacity: 0; pointer-events: none; }
@media (max-width: 760px) { .art-more { display: none; } }
@media (prefers-reduced-motion: reduce) { .art-more span { animation: none; } }

/* The music: a single glyph, || while it plays and ▶ when paused. */
.art-kicker { align-items: baseline; }
.art-sound { display: inline-flex; align-items: baseline; gap: 9px; margin-left: auto; margin-right: 22px; }
/* The track name: quiet grey beside the glyph, darker while it plays; the arrow opens it on SoundCloud. */
.code-art-page .art-sound-title {
  font: 400 12px/1 "Helvetica Neue", Helvetica, Arial, sans-serif !important; letter-spacing: 0; text-transform: none;
  color: #9a9a92; text-decoration: none; white-space: nowrap; transition: color .2s ease;
}
/* The arrow is drawn, not typed, so phones never turn it into an emoji. */
.code-art-page .art-arrow { display: inline-block; margin-left: 4px; vertical-align: .05em; overflow: visible; transition: transform .2s ease; }
.code-art-page .art-arrow path { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.code-art-page .art-sound-title:hover { color: var(--art-ink); }
.code-art-page .art-sound-title:hover .art-arrow { transform: translate(1px, -1px); }
/* A small waveform beside the track: it moves while the music plays and rests when paused. */
.art-wave { display: inline-flex; align-items: center; gap: 2.5px; height: 13px; align-self: center; margin-right: -2px; }
.art-wave i { display: block; width: 2.5px; height: 7px; background: #9a9a92; transform-origin: center; }
.art-wave i:nth-child(2) { height: 12px; }
.art-sound:has(button[aria-pressed="true"]) .art-wave i { animation: art-wave 1s ease-in-out infinite; }
.art-sound:has(button[aria-pressed="true"]) .art-wave i:nth-child(1) { animation-delay: -.35s; }
.art-sound:has(button[aria-pressed="true"]) .art-wave i:nth-child(2) { animation-delay: -.7s; animation-duration: 1.15s; }
.art-sound:has(button[aria-pressed="true"]) .art-wave i:nth-child(3) { animation-delay: -.1s; animation-duration: .9s; }
@keyframes art-wave { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1.15); } }
@media (prefers-reduced-motion: reduce) { .art-sound .art-wave i { animation: none !important; } }
/* On phones the music sits on its own line under the kicker. */
@media (max-width: 760px) {
  .art-kicker { flex-wrap: wrap; row-gap: 8px; }
  .art-sound { order: 3; flex-basis: 100%; margin: 0; }
}
.code-art-page .art-sound:has(button[aria-pressed="true"]) .art-sound-title { color: #6f6f68; }
.code-art-page .art-sound button {
  padding: 2px 4px; border: 0; background: none; cursor: pointer;
  font: 400 11px/1 "Portfolio Mono", monospace !important; letter-spacing: .12em; color: #8a8a82;
  transition: color .2s ease;
}
.code-art-page .art-sound button:hover { color: var(--art-ink); }
/* While the music plays, the || pulses in rust with a soft, diffused glow. */
.code-art-page .art-sound button[aria-pressed="true"] { color: var(--art-rust); animation: art-playing 2.2s ease-in-out infinite; }
@keyframes art-playing {
  0%, 100% { opacity: .6; text-shadow: 0 0 0 rgba(164, 119, 96, 0); }
  50% { opacity: 1; text-shadow: 0 0 6px rgba(164, 119, 96, .85), 0 0 14px rgba(164, 119, 96, .45); }
}
@media (prefers-reduced-motion: reduce) { .code-art-page .art-sound button[aria-pressed="true"] { animation: none; } }
/* When the browser holds the sound back, the ▶ breathes softly. */
.code-art-page .art-sound.is-waiting button { color: var(--art-rust); animation: art-breathe 2.4s ease-in-out infinite; }
@keyframes art-breathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .code-art-page .art-sound.is-waiting button { animation: none; } }

/* The way in. The live page keeps moving, softened, behind it. */
.art-enter {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px;
  background: rgba(245, 243, 236, .78); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  transition: opacity .6s ease;
}
.art-enter[hidden] { display: none; }
.art-enter.is-leaving { opacity: 0; pointer-events: none; }
.art-enter-box { text-align: center; max-width: 440px; }
.code-art-page .art-enter h2 { margin: 0 0 30px; font: 500 clamp(30px, 4.4vw, 52px)/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .02em; color: var(--art-ink); }
.code-art-page .art-enter button {
  display: block; margin: 0 auto; padding: 10px 26px; cursor: pointer; background: none; border: 1px solid var(--art-ink);
  font: 400 12px/1.4 "Portfolio Mono", monospace !important; letter-spacing: .12em; text-transform: uppercase; color: var(--art-ink);
  transition: background .2s ease, color .2s ease;
}
.code-art-page .art-enter button:hover, .code-art-page .art-enter button:focus-visible { background: var(--art-ink); color: #f5f3ec; }
/* Arriving from the beacon on the Moving Image pages: the page opens out of the beacon as a growing circle,
   over the page that was left. The origin comes from the inline script in code.html. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: path-open .8s cubic-bezier(.7, 0, .2, 1) both; }
@keyframes path-open {
  from { clip-path: circle(0 at var(--path-x, 100%) var(--path-y, 0)); }
  to { clip-path: circle(150vmax at var(--path-x, 100%) var(--path-y, 0)); }
}
@media (prefers-reduced-motion: reduce) { ::view-transition-new(root) { animation: none; } }
/* Browsers without view transitions open on the way-in screen instead, drawn by the stylesheet from the first
   frame (the real one is parsed later) and lifted by the script. It matches .art-enter with its title alone;
   the extra bottom padding stands in for the title's margin. */
html.path-via-beacon.path-veil-fallback body::before {
  content: "THE PATH";
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px 24px 54px;
  width: auto; height: auto; margin: 0; border-radius: 0; /* over the corner mark this element usually draws */
  background: rgba(245, 243, 236, .78); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  font: 500 clamp(30px, 4.4vw, 52px)/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .02em; color: var(--art-ink);
  text-align: center; pointer-events: none;
  transition: opacity .6s ease;
  /* Lifts by itself if the script never gets to it. */
  animation: path-veil-fallback .6s ease 3s forwards;
}
html.path-via-beacon.path-veil-fallback.path-veil-lifting body::before { opacity: 0; }
@keyframes path-veil-fallback { to { opacity: 0; } }