@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0ms; } }
/* Product prints sit directly on the same paper. */
.bar { position: fixed; left: 0; right: 0; top: 0; height: 68px; padding: 0 var(--g); display: flex; justify-content: space-between; align-items: center; z-index: 8; pointer-events: none; }
.bar::before { content: ""; position: absolute; inset: 0 0 -30px; z-index: -1; background: linear-gradient(var(--paper) 58%, transparent); pointer-events: none; }
.bar .name { font: 400 12.5px/1 var(--mono); color: var(--soft); padding: 15px 0; pointer-events: auto; }
.bar nav { display: flex; gap: clamp(16px, 2.4vw, 34px); font-size: 14.5px; pointer-events: auto; }
.bar nav a { padding: 15px 0; }
main { margin: 0 var(--g); }
.heading { padding-top: clamp(112px, 17svh, 168px); }
.back { display: block; width: fit-content; font: 400 12.5px/1 var(--mono); color: var(--soft); }
.back:is(:hover, :focus-visible) { color: var(--ink); }
h1 { margin-top: 16px; font: 400 clamp(26px, 3vw, 40px)/1.2 var(--sans); letter-spacing: -.02em; }
.description { max-width: 34em; margin-top: 22px; font: 400 17px/1.6 var(--sans); }
/* A field note: the title, its date, then plain paragraphs. */
.date { display: block; margin-top: 14px; font: 400 12px/1.5 var(--mono); color: var(--soft); }
.text { margin-top: clamp(40px, 7svh, 64px); }
.text p { max-width: 34em; font: 400 17px/1.6 var(--sans); text-wrap: pretty; }
.text p + p, .beat p + p { margin-top: 1.15em; }
.pic { display: block; position: relative; }
.pic img { display: block; width: 100%; height: auto; opacity: 0; }   /* each print is drawn on stroke by stroke when it comes into view (detail.js) */
.main { width: min(680px, 100%); margin-top: clamp(44px, 8svh, 80px); }
.main.duo { display: flex; align-items: flex-end; gap: clamp(18px, 4vw, 52px); width: min(900px, 100%); }
.main.duo .can { flex: none; width: clamp(84px, 13vw, 164px); }
.main.duo .word { flex: 1; min-width: 0; max-width: 660px; margin-bottom: 1%; }
/* An illustrated essay: a short paragraph, then the piece it talks about. Tall pieces stand beside their paragraph where there is room. */
.beat { margin-top: clamp(72px, 13svh, 128px); }
.beat p { max-width: 34em; font: 400 17px/1.6 var(--sans); text-wrap: pretty; }
.fig { margin-top: clamp(28px, 5svh, 44px); }
.fig.wide { width: min(720px, 100%); }
.fig.narrow { width: min(380px, 100%); }
.fig figcaption { margin-top: 14px; font: 400 12px/1.5 var(--mono); color: var(--soft); }
.pic.p { display: none; }
@media (min-width: 900px) {
  .beat.side { display: grid; grid-template-columns: minmax(0, 34em) minmax(0, 380px); gap: clamp(48px, 7vw, 112px); align-items: start; }
  .beat.side .fig { margin-top: 4px; }
}
@media (max-width: 600px) {
  .pic.d { display: none; }
  .pic.p { display: block; }
  .fig.narrow { width: min(340px, 100%); }
}
/* The way goes on: a charcoal path runs across the page end, under the next project's name (detail.js). */
.next { position: relative; margin: 18svh var(--g) 0; }
.next a { display: inline-flex; flex-direction: column; gap: 12px; padding-bottom: 14px; }
.next .k { font: 400 12.5px/1 var(--mono); color: var(--dust); }
.next .nm { font: 400 clamp(26px, 3vw, 40px)/1.1 var(--sans); letter-spacing: -.02em; }
.next .way { position: absolute; left: calc(-1 * var(--g)); bottom: -6px; width: calc(100% + 2 * var(--g)); height: 16px; overflow: visible; pointer-events: none; }
.next .way path { fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-linecap: round; opacity: .42; }
.next .way .on { stroke-width: 1.5; opacity: .85; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .45s cubic-bezier(.45,.05,.25,1); }
.next:has(a:is(:hover, :focus-visible)) .way .on { stroke-dashoffset: 0; }
.next + .foot { margin-top: 9svh; }
.foot { display: flex; flex-wrap: wrap; gap: 22px; margin: 14svh var(--g) 0; padding-bottom: 16svh; font: 400 12.5px/1 var(--mono); color: var(--dust); }
.foot .back { color: inherit; }
.foot a:is(:hover, :focus-visible) { color: var(--ink); }
@media (max-width: 760px) {
  .bar { height: 60px; }
  .bar nav { font-size: 14px; gap: 16px; }
  .bar .name { font-size: 12px; }
  .heading { padding-top: 96px; }
  .description, .beat p, .text p { font-size: 16px; line-height: 1.55; }
}
@media (max-width: 345px) {
  .bar nav { font-size: 13px; gap: 11px; }
  .bar .name { font-size: 11px; }
}
/* A field note's margin sketch: drawn in pen beside the text, stroke by stroke (detail.js). */
.sketch { width: min(320px, 100%); margin-top: clamp(48px, 8svh, 72px); }
.sketch svg { display: block; width: 100%; height: auto; overflow: visible; }
.sketch path { fill: none; stroke: var(--ink); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; opacity: .82; }
.sketch .t { stroke-width: .9; opacity: .5; }
.sketch .x { stroke-width: 1.6; opacity: .78; }
.sketch text { font: 400 9.5px/1 var(--mono); fill: var(--dust); }
@media (min-width: 1000px) {
  main.note { display: grid; grid-template-columns: minmax(0, 34em) minmax(0, 320px); column-gap: clamp(56px, 8vw, 128px); align-items: start; }
  main.note .heading { grid-column: 1 / -1; }
  main.note .sketch { grid-column: 2; grid-row: 2; margin-top: calc(clamp(40px, 7svh, 64px) + 6px); }
}