/* matthewreate.com — the whole design.
   Ink on paper, one typeface, one size. Hierarchy comes from weight and
   space, not decoration. If a rule isn't doing a job, it goes.
   The face is Iowan Old Style (John Downer, 1990), already on every Apple
   device, so nothing downloads. Palatino stands in on Windows. */

:root {
  color-scheme: light;
  --ink: #1e1d1b;    /* almost black, a touch warm */
  --paper: #faf9f5;  /* almost white, a touch warm */
  --quiet: #6b6862;  /* data: dates, runtimes, BPM and key (5.3:1 on paper) */
  --rule: color-mix(in srgb, var(--ink) 32%, transparent);  /* resting underline */
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 3.5em max(1.1em, 7vw) 5em;
  background: var(--paper);
  color: var(--ink);
  font: 19px/1.5 "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif;
  text-wrap: pretty;
}

header, main, footer { max-width: 34em; }
header { margin-bottom: 3em; }
footer { margin-top: 5em; }
footer p { margin: 0 0 .25em; }

/* The footer's tiny wagon, the door to Wilma's page: his drawing of her, faint
   and in her dark green at rest. Point at it and it comes up in his colors
   (the same crossfade as the heading drawings, below). */
a.wagon { margin-left: .4em; text-decoration: none; opacity: .55; transition: opacity .35s ease; }
a.wagon .dd { vertical-align: -.12em; }
a.wagon .dd > img { display: block; }
a.wagon:hover, a.wagon:focus-visible { opacity: 1; }
a.wagon:focus-visible .dd > img.color { opacity: 1; }
a.wagon:focus-visible .dd > img:not(.color) { opacity: 0; }
@media (hover: hover) {
  a.wagon:hover .dd > img.color { opacity: 1; }
  a.wagon:hover .dd > img:not(.color) { opacity: 0; }
}

/* Links keep the early-web underline, just quieter until you point at them. */
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .15em;
  text-decoration-color: var(--rule); }
a:hover { text-decoration-color: currentColor; }
main a:visited { color: var(--quiet); }

h1, h2, h3 { font-size: 1em; line-height: inherit; margin: 2.4em 0 .5em; }
h1 { margin-top: 0; }
h3 { margin-top: 1.8em; }

p, ul, ol, blockquote { margin: 0 0 1em; }
ul, ol { padding-left: 1.6em; }
blockquote { margin-left: 1.6em; }
hr { border: 0; border-top: 1px solid var(--ink); margin: 2.5em 0; }
a[href^="tel:"] { white-space: nowrap; }  /* never 917-586- / 6753 */
audio { display: block; width: 100%; margin: 1em 0; }
/* Shirts (shop/shirts/): the drawn tee, the drawing up close, and the record's player,
   which loads only when opened. */
img.shirt-pic { display: block; width: 100%; max-width: 26em; height: auto; margin: 0 0 1.2em -.4em; }
img.shirt-art { display: block; width: 100%; max-width: 18em; height: auto; }
details.listen { margin: 0 0 1.2em; }
details.listen summary { cursor: pointer; width: fit-content; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: .15em; text-decoration-color: var(--rule); }
details.listen summary:hover { text-decoration-color: currentColor; }
details.listen iframe { display: block; width: 100%; max-width: 30em; height: 152px; border: 0;
  border-radius: 12px; margin-top: .8em; }
details.listen iframe.yt { height: auto; aspect-ratio: 16 / 9; border-radius: 4px; }

/* Gray is data (dates, counts, BPM and key). Italic is a note in my voice. */
.m { color: var(--quiet); }
time, .m, ol { font-variant-numeric: tabular-nums; }

/* Tracklists run long, so they get room for three-digit numbers. */
ol.t { padding-left: 2.4em; }
ol.t i { display: block; }

/* Index rows: date, title, runtime. The play button plays the mix in place,
   and the runtime becomes a running clock. */
ul.rows { list-style: none; padding: 0; }
.rows li { display: grid; grid-template-columns: 3.9em minmax(0, 1fr) auto; column-gap: 1em; }
.rows time, .rows .n { color: var(--quiet); font-variant-numeric: tabular-nums; }
.rows .n { white-space: nowrap; }
/* Generous hit area for thumbs; the negative margin keeps it from moving the text. */
.play { border: 0; background: none; padding: .45em .45em .45em .6em; margin: -.45em 0 -.45em -.6em;
  font: inherit; font-size: .8em; color: var(--ink); cursor: pointer; line-height: 1; }
.play img { height: 1.45em; width: auto; vertical-align: -.3em; }
.play .i-pause, .rows li.on .play .i-play, .player.on .play .i-play { display: none; }
.rows li.on .play .i-pause, .player.on .play .i-pause { display: inline; }
.rows li.on .clock { color: var(--ink); }
.rows li.on .t { text-decoration-color: currentColor; }

/* Wilma's log: the same rows with the whole date, and the odometer on the
   right where it was read. The odometer column keeps its width on every row,
   so the jobs all wrap at one edge. A job can run to two lines, so rows get
   some air. */
.rows.log li { grid-template-columns: 5.4em minmax(0, 1fr) 3.8em; margin-bottom: .45em; }
.rows.log .n { text-align: right; }
/* Her photos sit on the job they show, printed in ink on the paper until you
   point at one; then it comes up in color, like his drawings. Click or tap
   one for the full photo. */
.rows.log .shots { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: .5em;
  margin: .55em 0 .35em; }  /* under the job, and into the odometer's empty column */
.rows.log .shots a { display: block; line-height: 0; }
.rows.log .shots img { width: auto; height: 7.5em; max-width: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.06); mix-blend-mode: multiply; transition: filter .35s ease; }
.rows.log .shots a:focus-visible img { filter: none; }
@media (hover: hover) { .rows.log .shots a:hover img { filter: none; } }
@media (prefers-reduced-motion: reduce) { .rows.log .shots img { transition: none; } }
/* Her tape deck: one of his mixes on a log row, with his drawn play button. */
.rows.deck li { grid-template-columns: 5.4em minmax(0, 1fr) auto; }
.rows.deck .k { color: var(--quiet); white-space: nowrap; }

/* A mix's own page: the same drawn button, an ink line you can drag, and the
   clock. Without JavaScript the browser's own player shows instead. */
.player { display: flex; align-items: center; column-gap: .9em; margin: 1.4em 0 1.8em; }
.player .play { font-size: 1.1em; }
.player .clock { color: var(--quiet); font-variant-numeric: tabular-nums; white-space: nowrap; }
.player.on .now { color: var(--ink); }
.player audio:not([controls]) { display: none; }
.seek { flex: 1; min-width: 3em; height: 1.6em; margin: 0; background: none; cursor: pointer;
  -webkit-appearance: none; appearance: none; }
.seek::-webkit-slider-runnable-track { height: 1px; border: 0;
  background: linear-gradient(var(--ink), var(--ink)) 0 0 / var(--p, 0%) 100% no-repeat, var(--rule); }
.seek::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: .5em; height: .5em;
  margin-top: calc(.5px - .25em); border: 0; border-radius: 50%; background: var(--ink); }
.seek::-moz-range-track { height: 1px; border: 0; background: var(--rule); }
.seek::-moz-range-progress { height: 1px; background: var(--ink); }
.seek::-moz-range-thumb { width: .5em; height: .5em; border: 0; border-radius: 50%; background: var(--ink); }

/* Matthew's drawings. Crude on purpose. */
img { max-width: 100%; height: auto; }
h1 img.name { display: block; width: 10em; margin: .2em 0 .3em -.4em; }
header img.sig { display: block; width: 5em; margin-left: -.25em; }
.lede .mark { display: block; width: 11em; margin: 1em 0 1.2em -.2em; }
/* With its colored twin, the controller's size and place move to the pair. */
.lede .dd { display: block; width: 11em; margin: 1em 0 1.2em -.2em; }
.lede .dd > img.mark { display: block; width: 100%; margin: 0; }
.motto { font-style: italic; margin: 0 0 .7em; }
h2 img.label { height: 1.9em; width: auto; vertical-align: -.5em; }  /* crate dividers */
.lost { display: block; width: 12em; margin: 0 0 1.5em -.2em; }
.signoff { display: block; width: 3.2em; margin: 0 0 .8em -.15em; }
footer .dd.signoff { display: block; }
.dd.signoff > img { display: block; width: 100%; margin: 0; }
@media (hover: hover) {
  footer:hover .dd.signoff > img.color { opacity: 1; }
  footer:hover .dd.signoff > img:not(.color) { opacity: 0; }
}
/* Heading doodles hang up into the white space above, so they add texture
   without pushing the text around. */
h2 img.h, h2 .dd { vertical-align: baseline; margin: calc(1.3em - 3.3em * var(--s, 1)) 0 -.35em .45em; }
h2 img.h { width: auto; height: calc(3.3em * var(--s, 1)); }
/* A drawing with a colored-in twin: ink at rest, color when you point at its
   section (on an inner page, at the drawing). Only where there's a pointer to
   point with; phones stay ink. */
.dd { display: inline-block; position: relative; }
.dd > img.h { display: block; margin: 0; }
.dd > img { transition: opacity .35s ease; }
.dd > img.color { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  opacity: 0; }  /* exactly over the ink drawing; the two crossfade */
@media (hover: hover) {
  section:not(.page):hover .dd > img.color, .rail:hover .dd > img.color { opacity: 1; }
  section:not(.page):hover .dd > img:not(.color), .rail:hover .dd > img:not(.color) { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .dd > img { transition: none; } }
h2:has(img.h) { margin-top: calc(1.5em + 2.1em * var(--s, 1)); }

/* Inner pages sit in their crate: his divider for it (a link back to that crate
   on the homepage) with the crate's drawing. On phones they share a row above
   the title; on wide screens they move to the rail and stay while you scroll. */
.page > .rail { display: flex; align-items: flex-end; column-gap: .55em; margin: 0 0 1.5em -.15em; }
.page > .rail a { display: block; line-height: 0; }
.page > .rail img.label { display: block; width: auto; }
.page > .rail img.h { display: block; width: auto; height: calc(2.9em * var(--s, 1)); }
.page > .rail .dd { display: block; }
.page > .rail .mark { display: block; width: 9em; }
.page > .rail .car { display: block; width: 12em; }  /* Wilma's page: his drawing of her */

/* Wide screens: section labels and drawings move to a left rail, like the
   credits on the back of a sleeve, and the page uses its width. */
@media (min-width: 56em) {
  main:has(> section) { max-width: 47em; }
  main > section { display: grid; grid-template-columns: 9em minmax(0, 1fr); column-gap: 2.5em;
    margin-top: 3.4em; }
  main > section > h2, main > section > .rail { grid-column: 1; grid-row: 1; margin: 0; }
  main > section > :not(h2, .rail) { grid-column: 2; grid-row: 1; }
  main > section.lede { margin-top: 2em; }
  .lede .mark { width: 100%; margin: .15em 0 0 -.2em; }
  .lede .dd { width: 100%; margin: .15em 0 0 -.2em; }
  h2 img.h, h2 .dd { display: block; margin: .7em 0 0 -.1em; }
  h2 img.h { height: calc(3.8em * var(--s, 1)); }
  h2 .dd > img.h { margin: 0; }
  h2 .dd { width: fit-content; }  /* hug the drawing, not the whole rail */
  h2 img.label { display: block; vertical-align: 0; margin: -.2em 0 0 -.15em; }
  main > section > h2:has(img.h) { margin: 0; }  /* the narrow-screen headroom doesn't apply here */
  main > section.page { margin-top: 0; }
  .page > .rail { display: block; position: sticky; top: 2.5em; align-self: start; margin: 0 0 0 -.15em; }
  .page > .rail img.h, .page > .rail .dd { margin-top: .7em; }
  .page > .rail img.h { height: calc(3.8em * var(--s, 1)); }
  .page > .rail .dd { width: fit-content; }
  .page > .rail .dd > img.h { margin-top: 0; }
  .page > .rail > img.h:first-child { margin-top: .15em; }  /* a page's own drawing, no divider above it */
  .page > .rail .mark { width: 100%; margin-top: .15em; }
  .page > .rail .dd.her { width: auto; margin-top: .15em; }
  .page > .rail .car { width: 100%; }
  body:has(main > section) footer { margin-left: 11.5em; }
}

/* Gig photos: swipe, or click a photo for the next one. No captions. */
main:has(.photos) { max-width: 60em; }
.photos { display: flex; gap: .5em; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; overscroll-behavior-x: contain; }
.photos a { flex: 0 0 100%; scroll-snap-align: center; scroll-margin-top: 1em; }
.photos img { display: block; width: 100%; height: min(82vh, 52em); object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .photos { scroll-behavior: auto; } }

/* The planning-call page (call/). On a wide screen it embeds Google's booking
   calendar, sized so a full day of slots fits without the box scrolling inside
   the page; its type and blue buttons are Google's and can't be styled from
   here. On a phone the embed is cramped, so it steps aside for one button in
   ink that opens Google's own full-screen page, which is built for phones. */
.booking { display: block; width: 100%; height: 1100px; border: 0; margin: 1.5em 0; }
.pick { display: none; }
@media (max-width: 40em) {
  .booking, .booking-help { display: none; }
  .pick { display: block; margin: 2em 0 2.6em; }
  .pick a, main .pick a:visited { display: flex; align-items: center; justify-content: center;
    gap: .8em; padding: .85em 1em; text-align: center;
    color: var(--ink); text-decoration: none; border: 1px solid var(--ink); }
  .pick a:active { background: var(--ink); color: var(--paper); }
  /* The button's face is his Casio (in his colors) and his handwritten "Pick a time".
     Pressed, the box goes dark and the lettering turns paper; the watch keeps its glow. */
  .pick a img.h { display: block; width: auto; height: 4.8em; }
  .pick a img.hand { display: block; width: auto; height: 2.9em; }
  .pick a:active img.hand { filter: brightness(0) invert(1); }
  .pick p { margin: .7em 0 0; text-align: center; }
}

::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

@media (max-width: 40em) {
  body { font-size: 17px; padding-top: 2em; }
  .rows li { column-gap: .8em; }
}

/* Phones: every mix on one line. The date steps out (each mix page still has
   it), and the side margins tighten a little so the longest title fits on a
   360px screen. */
@media (max-width: 30em) {
  body { padding-left: 1em; padding-right: 1em; }
  .rows li { grid-template-columns: minmax(0, 1fr) auto; column-gap: .6em; }
  .rows time { display: none; }
  /* Wilma's log keeps its dates: date and odometer on one gray line, the job
     under it at full width. */
  .rows.log li { grid-template-columns: minmax(0, 1fr) auto; margin-bottom: .8em; }
  .rows.log time { display: block; }
  .rows.log .t { grid-column: 1 / -1; grid-row: 2; }
  .rows.log .shots { grid-column: 1 / -1; grid-row: 3; }
  .rows.log .shots img { height: 6.4em; }
}