/* mparker.co
   Values come from HANDOFF.md. Every color is a token below; Linen (light) first,
   Nocturne (dark) in the media query after it. */

:root {
  --ground: #ece2d5;
  --text: #33202b;
  --muted: #574050;
  --field-upper: #e5b88c;
  --glow-upper: #f2d3ab;
  --band: #d39c98;
  --field-lower: #b8a5b9;
  --glow-lower: transparent;
  --sidebar-glow: #f2d3ab;
  --body-track: 0em;

  --font: 'ABC Areal', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --ease: cubic-bezier(0.55, 0.05, 0.25, 1);

  /* Motion speed (section 6): 0.9x desktop, 0.8x phone. --ms is one millisecond at that speed. */
  --k: 0.9;
  --ms: calc(var(--k) * 1ms);

  /* Desktop measurements (1280px designs) */
  --pad-t: 40px;
  --pad-x: 48px;
  --pad-b-home: 40px;
  --head-h: 24px;          /* header row height; site.js measures the real value */
  --head-gap: 16px 40px;
  --nav-gap: 32px;
  --inset: 12%;
  --glow-inset: 22%;
  --glow-blur: 70px;
  --glow-lower-inset: 25%;
  --glow-lower-blur: 50px;
  --band-top: 106px;
  --band-h: 12px;
  --band-blur: 8px;
  --name-size: 20px;
  --name-scale: 1.7;
  --name-origin: 0 78%;    /* on the baseline, so the name grows upward from it */
  --so: 0px;               /* scroll offset while gliding home; set by site.js */

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #121826;
    --text: #e8e2d6;
    --muted: #bcbdc4;
    --field-upper: #2b3d58;
    --glow-upper: #405a7e;
    --band: #5b3a4a;
    --field-lower: #3a1d24;
    --glow-lower: #4a252c;
    --sidebar-glow: #344766;
    --body-track: 0.01em;
  }
}

/* Phone values below 700px (390px designs) */
@media (max-width: 699.98px) {
  :root {
    --k: 0.8;
    --pad-t: 28px;
    --pad-x: 24px;
    --pad-b-home: 32px;
    --head-h: 21.6px;
    --head-gap: 12px 20px;
    --nav-gap: 24px;
    --inset: 10%;
    --glow-inset: 20%;
    --glow-blur: 60px;
    --glow-lower-inset: 23%;
    --glow-lower-blur: 44px;
    --band-top: 79px;
    --band-h: 10px;
    --band-blur: 7px;
    --name-size: 18px;
    --name-scale: 1.556;
    --name-origin: 0 63%;
  }
}

/* ---------- Base ---------- */

html {
  background: var(--ground);
  color: var(--text);
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html[data-view="home"] {
  overflow: hidden;
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--ground);
}

a {
  color: inherit;
  -webkit-tap-highlight-color: transparent; /* no grey flash when tapped on iPhone */
  text-decoration: none;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

@media (hover: hover) {
  a:hover {
    text-decoration-line: underline;
  }
}

a:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 6px;
}

/* site.js sets this when focus moved to the name after a tap, not a key press. */
.name[data-quiet-focus]:focus-visible {
  outline: none;
}

[tabindex="-1"]:focus {
  outline: none;
}

/* ---------- Home painting ----------
   No layer here uses position: fixed. Safari 26 tints its toolbars from fixed layers at
   the screen edges and never re-reads them when the phone switches light/dark, which
   left the toolbars the wrong color. With nothing fixed, it follows the page background. */

.painting {
  position: absolute;
  top: var(--so);
  left: 0;
  right: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  pointer-events: none;
  transform-origin: 50% 40%;
}

.painting > div {
  position: absolute;
  border-radius: 4px;
  filter: blur(22px);
}

.field-upper {
  left: var(--inset);
  right: var(--inset);
  top: 7%;
  height: 42%;
  background: var(--field-upper);
}

.painting > .glow-upper {
  left: var(--glow-inset);
  right: var(--glow-inset);
  top: 14%;
  height: 26%;
  background: var(--glow-upper);
  border-radius: 50%;
  filter: blur(var(--glow-blur));
  opacity: 0.7;
  animation: breathe 16s ease-in-out infinite alternate;
}

.field-lower {
  left: var(--inset);
  right: var(--inset);
  top: 62%;
  height: 15%;
  background: var(--field-lower);
}

.painting > .glow-lower {
  display: none;
  left: var(--glow-lower-inset);
  right: var(--glow-lower-inset);
  top: 65%;
  height: 9%;
  background: var(--glow-lower);
  border-radius: 50%;
  filter: blur(var(--glow-lower-blur));
  opacity: 0.6;
}

@media (prefers-color-scheme: dark) {
  .painting > .glow-lower {
    display: block;
  }
}

@keyframes breathe {
  from { opacity: 0.5; transform: scale(1); }
  to { opacity: 0.9; transform: scale(1.05); }
}

/* The thin band: part of the painting on home, the header band on reading. */
.band {
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  top: var(--band-top);
  height: var(--band-h);
  background: var(--band);
  border-radius: 4px;
  filter: blur(var(--band-blur));
  pointer-events: none;
}

html[data-view="home"] .band {
  left: var(--inset);
  right: var(--inset);
  top: calc(var(--so) + 53vh);
  top: calc(var(--so) + 53svh);
  height: 5vh;
  height: 5svh;
  filter: blur(22px);
}

.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("/grain.png");
  background-image: image-set(url("/grain.png") 1x, url("/grain-2x.png") 2x);
  background-repeat: repeat;
  background-size: 256px 256px;
  opacity: 0.2;
  mix-blend-mode: overlay;
}

/* ---------- Header row ---------- */

/* Above <main>, whose top padding sits under the header and would otherwise catch its taps. */
.masthead {
  position: absolute;
  z-index: 2;
  left: var(--pad-x);
  right: var(--pad-x);
  top: var(--pad-t);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--head-gap);
  line-height: 1.2;
}

/* On home the row sits on the bottom edge of the screen. --lift raises it by the space
   under the baseline that the full-size home name has (0.26em of the extra size), so the
   row lines up with the home design. */
html[data-view="home"] .masthead {
  --lift: calc(var(--name-size) * (var(--name-scale) - 1) * 0.26);
  transform: translateY(calc(var(--so) + 100vh - var(--pad-b-home) - var(--head-h) - var(--pad-t) - var(--lift)));
  transform: translateY(calc(var(--so) + 100svh - var(--pad-b-home) - var(--head-h) - var(--pad-t) - var(--lift)));
}

.name {
  display: inline-block;
  font-size: var(--name-size);
  letter-spacing: -0.01em;
  transform-origin: var(--name-origin);
}

/* Home size: 34px desktop, 28px phone. The margin keeps room for the larger name so the
   row wraps the way the home design does on very narrow screens. */
html[data-view="home"] .name {
  transform: scale(var(--name-scale));
  margin-right: calc(6.6em * (var(--name-scale) - 1));
}

.masthead nav {
  display: flex;
  gap: var(--nav-gap);
  font-size: 16px;
  letter-spacing: 0.01em;
}

/* ---------- Reading content ---------- */

main {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  padding: 196px 48px 120px;
}

html[data-view="home"] main {
  visibility: hidden;
}

.columns {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 64px 80px;
}

article {
  flex: 999 1 560px;
  min-width: 0;
  max-width: 640px;
}

.date {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--muted);
}

h1 {
  margin: 12px 0 40px;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.prose {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: 19px;
  line-height: 1.65;
  letter-spacing: var(--body-track);
  text-wrap: pretty;
}

.prose > * {
  margin: 0;
}

/* Basics for Markdown the design does not show: links, lists, quotes, images. */
.prose a {
  text-decoration-line: underline;
}

.prose :is(h2, h3, h4) {
  font-size: 1em;
  font-weight: 700;
}

.prose :is(ul, ol) {
  padding-left: 1.25em;
}

.prose blockquote {
  padding-left: 24px;
}

.prose img {
  max-width: 100%;
  height: auto;
}

aside {
  position: relative;
  flex: 1 1 260px;
  max-width: 320px;
  box-sizing: border-box;
  padding: 36px 32px 44px;
}

.index-block {
  position: absolute;
  inset: 0;
}

.index-block::before,
.index-block::after {
  content: "";
  position: absolute;
}

.index-block::before {
  inset: 0;
  background: var(--field-upper);
  border-radius: 4px;
  filter: blur(22px);
}

.index-block::after {
  left: 15%;
  right: 15%;
  top: 10%;
  height: 55%;
  background: var(--sidebar-glow);
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.6;
}

.v-side {
  position: relative;
}

aside h2 {
  margin: 0 0 24px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--muted);
}

aside ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

aside li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

aside li a {
  font-size: 16px;
  line-height: 1.35;
}

aside li a[aria-current="page"] {
  font-weight: 700;
}

aside li time {
  font-size: 14px;
  color: var(--muted);
}

@media (max-width: 699.98px) {
  main {
    padding: 142px 24px 96px;
  }

  .columns {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 56px;
  }

  article,
  aside {
    flex: none;
    max-width: none;
  }

  .date {
    font-size: 14px;
  }

  h1 {
    margin: 10px 0 28px;
    font-size: 30px;
  }

  .prose {
    gap: 20px;
    font-size: 18px;
    line-height: 1.6;
  }

  aside {
    padding: 28px 24px 32px;
  }

  .index-block::after {
    filter: blur(44px);
  }

  aside h2 {
    margin-bottom: 20px;
    font-size: 14px;
  }

  aside ol {
    gap: 18px;
  }

  /* Tap targets at least 44px tall, without changing the layout */
  .name {
    padding: 12px 0;
    margin: -12px 0;
  }

  .masthead nav a {
    padding: 13px 0;
    margin: -13px 0;
  }

  aside li a {
    padding: 11px 0;
    margin: -11px 0;
  }
}

/* ---------- View states (section 6) ----------
   The reading values above are the resting state. Home hides the reading layers. */

html[data-view="reading"] .painting {
  opacity: 0;
  filter: blur(18px);
  transform: translateY(-3%) scale(1.04);
}

/* Once the painting has faded out, stop drawing it. */
html[data-view="reading"]:not([data-moving]) .painting {
  visibility: hidden;
  animation-play-state: paused;
}

html[data-view="reading"]:not([data-moving]) .glow-upper {
  animation-play-state: paused;
}

html[data-view="home"] :is(.v-head, .v-body, .v-side) {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
}

html[data-view="home"] .index-block {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
}

/* Transitions only run while site.js marks a view change in progress, so resizing the
   window never sets things gliding. Changing data-view mid-flight reverses each
   transition from wherever it is. */

[data-moving] :is(.painting, .band, .masthead, .name, .index-block, .v-head, .v-body, .v-side) {
  transition-timing-function: var(--ease);
}

[data-moving] .painting { transition-property: opacity, filter, transform; }
[data-moving] .band { transition-property: left, right, top, height, filter; }
[data-moving] :is(.masthead, .name) { transition-property: transform; }
[data-moving] .index-block { transition-property: opacity, transform; }
[data-moving] :is(.v-head, .v-body, .v-side) { transition-property: opacity, transform, filter; }
[data-moving] main { transition: visibility 0s linear 0s; }

/* Home to Reading (6.1) */
[data-moving][data-view="reading"] .painting { transition-duration: calc(1400 * var(--ms)); transition-delay: 0s; }
[data-moving][data-view="reading"] .band { transition-duration: calc(1600 * var(--ms)); transition-delay: calc(100 * var(--ms)); }
[data-moving][data-view="reading"] :is(.masthead, .name) { transition-duration: calc(1600 * var(--ms)); transition-delay: calc(150 * var(--ms)); }
[data-moving][data-view="reading"] .index-block { transition-duration: calc(1300 * var(--ms)); transition-delay: calc(700 * var(--ms)); }
[data-moving][data-view="reading"] .v-head { transition-duration: calc(1000 * var(--ms)); transition-delay: calc(1500 * var(--ms)); }
[data-moving][data-view="reading"] .v-body { transition-duration: calc(1000 * var(--ms)); transition-delay: calc(1680 * var(--ms)); }
[data-moving][data-view="reading"] .v-side { transition-duration: calc(1000 * var(--ms)); transition-delay: calc(1850 * var(--ms)); }

/* Reading to Home (6.2) */
[data-moving][data-view="home"] .v-side { transition-duration: calc(500 * var(--ms)); transition-delay: 0s; }
[data-moving][data-view="home"] .v-body { transition-duration: calc(500 * var(--ms)); transition-delay: calc(60 * var(--ms)); }
[data-moving][data-view="home"] .v-head { transition-duration: calc(500 * var(--ms)); transition-delay: calc(120 * var(--ms)); }
[data-moving][data-view="home"] .index-block { transition-duration: calc(800 * var(--ms)); transition-delay: calc(200 * var(--ms)); }
[data-moving][data-view="home"] .band { transition-duration: calc(1500 * var(--ms)); transition-delay: calc(400 * var(--ms)); }
[data-moving][data-view="home"] :is(.masthead, .name) { transition-duration: calc(1500 * var(--ms)); transition-delay: calc(450 * var(--ms)); }
[data-moving][data-view="home"] .painting { transition-duration: calc(1400 * var(--ms)); transition-delay: calc(600 * var(--ms)); }
[data-moving][data-view="home"] main { transition-delay: calc(1000 * var(--ms)); }

/* Piece to Piece (6.3) */
.p-head,
.p-body {
  transition-property: opacity, transform, filter;
  transition-timing-function: var(--ease);
  transition-duration: 0s;
}

[data-phase="out"] :is(.p-head, .p-body) {
  opacity: 0;
  transform: translateY(-10px);
  filter: blur(5px);
  transition-duration: calc(380 * var(--ms));
}

[data-phase="pre"] :is(.p-head, .p-body) {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(5px);
  transition: none;
}

[data-phase="in"] :is(.p-head, .p-body) { transition-duration: calc(800 * var(--ms)); }
[data-phase="in"] .p-body { transition-delay: calc(140 * var(--ms)); }

/* ---------- Reduced motion (6.4) ----------
   No breathing. site.js swaps views instantly inside a 300ms crossfade. */

@media (prefers-reduced-motion: reduce) {
  .painting > .glow-upper {
    animation: none;
  }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 300ms;
}