/* rafael.fyi v4 · a quiet page on graph paper, with a field of machines underneath. */
:root {
  color-scheme: light;
  --paper: #F3F5F1; --grid: #E6EBE7;
  --ink: #1D2528; --body: #3A4549; --pencil: #66737A; --faint: #9AA5A9;
  --amber: #B97A06; --wire: #2C5886; --eye: #FFFFFF;
  --accent: #2BD47D; --accent-ink: #0B2A18;   /* the one colour for things you can do */
  --v-fear: #D9534F; --v-aggr: #2F6FDB; --v-love: #C2549D; --v-build: #B97A06;   /* the machines, by temperament */
  --comb: #B8901F; --pollen: #D4A72C; --bee-coral: #D9534F; --bee-blue: #2F6FDB; --bee-pink: #C2549D; --bee-green: #2E9E62; --bee-amber: #D4A017; --bee-ink: #3A4549;   /* bees and their honeycomb */
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --hand: "Reenie Beanie", "Bradley Hand", cursive;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #121719; --grid: #1B2326;
    --ink: #DDE4E1; --body: #BAC4C4; --pencil: #93A0A5; --faint: #65737A;
    --amber: #E2A83A; --wire: #86ADD6; --eye: #EEF2F0;
    --v-fear: #FF7B7B; --v-aggr: #6FA8FF; --v-love: #F08CCB; --v-build: #F2B544;
    --comb: #E3C15A; --pollen: #F5D36A; --bee-coral: #FF7B7B; --bee-blue: #6FA8FF; --bee-pink: #F08CCB; --bee-green: #5FD394; --bee-amber: #F2C94C; --bee-ink: #BAC4C4;
  }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --paper: #121719; --grid: #1B2326;
    --ink: #DDE4E1; --body: #BAC4C4; --pencil: #93A0A5; --faint: #65737A;
    --amber: #E2A83A; --wire: #86ADD6; --eye: #EEF2F0;
    --v-fear: #FF7B7B; --v-aggr: #6FA8FF; --v-love: #F08CCB; --v-build: #F2B544;
    --comb: #E3C15A; --pollen: #F5D36A; --bee-coral: #FF7B7B; --bee-blue: #6FA8FF; --bee-pink: #F08CCB; --bee-green: #5FD394; --bee-amber: #F2C94C; --bee-ink: #BAC4C4;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  background-attachment: fixed;
  color: var(--ink);
  font: 400 1.1875rem/1.6 var(--serif);
}
a { color: var(--ink); text-decoration: underline 1px var(--faint); text-underline-offset: 4px; transition: text-decoration-color .12s var(--ease); }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 2px solid var(--wire); outline-offset: 3px; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }

/* the field sits under everything */
#field {
  position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none;
  opacity: .3;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.35) 0, rgba(0,0,0,.35) 52%, #000 72%);
          mask-image: linear-gradient(to right, rgba(0,0,0,.35) 0, rgba(0,0,0,.35) 52%, #000 72%);
  transition: opacity .48s var(--ease);
}
@media (max-width: 720px) { #field { opacity: .22; -webkit-mask-image: none; mask-image: none; } }

/* the page */
.page {
  position: relative; z-index: 1;
  padding: max(40px, env(safe-area-inset-top, 0px)) clamp(20px, 5vw, 48px) calc(48px + env(safe-area-inset-bottom, 0px));
  padding-left: clamp(20px, 16.5vw, 240px);
  transition: opacity .48s var(--ease);
}
.top { max-width: 960px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 1.125rem; }
.top a { text-decoration: none; }
.top .where { color: var(--pencil); }
.top .links { display: flex; gap: 28px; align-items: center; }
.top .links a { color: var(--pencil); }
.top .links a:hover { color: var(--ink); }
.column { max-width: 620px; margin-top: clamp(72px, 12vh, 144px); display: flex; flex-direction: column; gap: 88px; }
/* phones: one even margin, and a header that wraps flush-left with the text */
@media (max-width: 640px) {
  .page { padding-left: 20px; padding-right: 20px; }
  .top { flex-wrap: wrap; justify-content: flex-start; gap: 10px 24px; font-size: 1.0625rem; }
  .top .who { flex-basis: 100%; }
  .top .links { gap: 22px; flex: 1; }
  .top .theme { margin-left: auto; }
  .column { margin-top: 56px; gap: 64px; }
  .foot { margin-top: 88px; flex-direction: column; align-items: flex-start; gap: 6px; }
}
section { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 40px; }
section p { margin: 0; color: var(--body); }
.intro { gap: 26px; }
.intro .lede { font-size: clamp(1.55rem, 2.6vw, 2rem); line-height: 1.3; letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; }
h2 { margin: 0; font-size: 1.0625rem; font-weight: 400; font-style: italic; color: var(--pencil); }

.work { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.work .t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.work .d { font-size: 1rem; line-height: 1.45; color: var(--pencil); }
@media (min-width: 560px) { .work .d { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }   /* one line each, so the list keeps an even rhythm */
.work li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.work .y { font: .75rem var(--mono); color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }

.quote { font-size: 1.1875rem; transition: opacity .24s var(--ease); }
.quote.swap { opacity: 0; }
.meta { font-size: 1rem; color: var(--pencil) !important; }
.meta a { color: var(--pencil); }
.meta button { font: inherit; color: var(--pencil); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline 1px var(--accent); text-underline-offset: 4px; transition: box-shadow .16s var(--ease), color .16s var(--ease); }
.meta button:hover { color: var(--ink); box-shadow: inset 0 -.45em 0 color-mix(in srgb, var(--accent) 28%, transparent); }   /* a quieter cousin of the key links */

.note { display: flex; flex-direction: column; gap: 16px; }
.note .row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 560px) { .note .row { grid-template-columns: 1fr; } }
.note label { display: flex; flex-direction: column; gap: 4px; font-size: .9375rem; color: var(--pencil); }
.note input, .note textarea {
  font: inherit; font-size: 1.1875rem; color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--faint); border-radius: 0; padding: 6px 0; min-height: 44px; resize: vertical;
}
.note input:focus, .note textarea:focus { outline: none; border-bottom-color: var(--ink); }
.note .send { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.note button { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; min-height: 44px; cursor: pointer; text-decoration: underline 2px var(--accent); text-underline-offset: 5px; transition: box-shadow .16s var(--ease); }
.note button:hover { box-shadow: inset 0 -.55em 0 color-mix(in srgb, var(--accent) 38%, transparent); }   /* same as the key links */
.note button:disabled { color: var(--faint); text-decoration-color: var(--faint); cursor: default; box-shadow: none; }
#note-status { font-size: 1rem; color: var(--pencil); }
.elsewhere { font-size: 1rem; color: var(--pencil) !important; }
.elsewhere a { color: var(--pencil); }
.hp { position: absolute; left: -9999px; }

.foot { max-width: 960px; margin-top: 120px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; font-size: .9375rem; line-height: 1.5; color: var(--pencil); }
.foot > span { display: inline-flex; align-items: baseline; flex-wrap: wrap; white-space: pre; }
.foot .ring { gap: .5em; white-space: normal; }
.foot a { color: var(--pencil); }
.foot .num { font: .75rem var(--mono); font-variant-numeric: tabular-nums; color: var(--pencil); }
#wormhole {
  display: inline-flex; align-items: center; line-height: 1.5;
  --wormhole-bar-padding: 0; --wormhole-bar-align: left; --wormhole-bar-line-height: 1.5; --wormhole-bar-letter-spacing: 0;
  --wormhole-link-border: 1px solid var(--faint);
  --wormhole-font: var(--serif); --wormhole-size: .9375rem; --wormhole-fg: var(--pencil); --wormhole-accent: var(--ink);
  --wormhole-bg: transparent; --wormhole-border: transparent; --wormhole-border-strong: var(--faint);
  --wormhole-overlay-bg: color-mix(in srgb, var(--paper) 95%, transparent); --wormhole-edge: color-mix(in srgb, var(--pencil) 45%, transparent);
  --wormhole-node: var(--paper); --wormhole-muted: var(--pencil); --wormhole-card-bg: var(--paper); --wormhole-card-solid: var(--paper); --wormhole-glow: transparent;
}

/* "play" floats by the watermark on wide screens */
/* "play": deliberately quieter than everything else, a small mono label you might miss */
a.enter { font: .6875rem var(--mono); letter-spacing: .12em; color: var(--faint); text-decoration: none; }
a.enter::before { content: "▸ "; letter-spacing: 0; }
a.enter:hover { color: var(--ink); }
.foot a.enter { font-size: .75rem; margin-left: .3em; }   /* sits on the footer's baseline, a touch smaller than its words */
.enter-float { position: fixed; z-index: 2; right: clamp(24px, 12vw, 220px); top: 58vh; }
@media (max-width: 1000px) { .enter-float { display: none; } }
/* on narrower screens, "play" moves into the header menu */
.top .links a.nav-play { display: none; color: var(--faint); }
.top .links a.nav-play:hover { color: var(--ink); }
@media (max-width: 1000px) { .top .links a.nav-play { display: inline; } }

/* play mode: the page steps back, the field comes forward */
body.playing .page { opacity: .07; pointer-events: none; user-select: none; }
body.playing .enter-float { display: none; }
body.playing #field { opacity: 1; pointer-events: auto; cursor: crosshair; -webkit-mask-image: none; mask-image: none; }
.play { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.play p { margin: 0; position: absolute; pointer-events: auto; }
.play .status { left: 40px; right: 40px; top: max(28px, env(safe-area-inset-top, 0px)); display: flex; justify-content: space-between; gap: 16px; font-size: 1rem; color: var(--pencil); font-variant-numeric: tabular-nums; }
.play .how { left: 28px; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); max-width: 564px; padding: 10px 12px; font-size: 1rem; line-height: 1.55; color: var(--body); }
.play .whisper { right: 28px; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); padding: 6px 12px; font: 1.6rem/1 var(--hand); color: var(--amber); transform: rotate(-3deg); pointer-events: none; }
@media (max-width: 720px) { .play .status { left: 20px; right: 20px; } .play .how { left: 8px; right: 8px; } .play .whisper { display: none; } }
/* the quiet "i": shows how the field works, and the V-0 hint */
.play .info {
  position: absolute; left: 40px; bottom: calc(32px + env(safe-area-inset-bottom, 0px)); pointer-events: auto;   /* drawn like the machine and bee buttons */
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 28px; padding: 2px; border: 0; border-radius: 3px;
  background: none; color: var(--pencil); cursor: pointer; transition: color .12s var(--ease), background .12s var(--ease);
}
.play .info svg { display: block; }
.play .info::after { content: ""; position: absolute; inset: -8px; }   /* 44px touch target */
.play .info:hover, .play .info[aria-expanded="true"] { color: var(--ink); background: color-mix(in srgb, var(--paper) 70%, transparent); }
@media (max-width: 720px) { .play .info { left: 20px; } }
/* "+ machine": as quiet as "play" */
.play .machines { position: absolute; left: 85px; bottom: calc(32px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 12px; align-items: center; min-height: 24px; pointer-events: auto; font: .75rem var(--mono); letter-spacing: .08em; color: var(--pencil); }
.play .machines button { font: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; color: var(--pencil); cursor: pointer; min-height: 24px; }
.play .machines button:hover, .play .add[aria-expanded="true"] { color: var(--ink); }
.play .pick button { text-decoration: underline 1px var(--accent); text-underline-offset: 4px; }
.play .how, .play .whisper, .play .field-note {   /* frosted paper behind text, so it reads over the field */
  background: color-mix(in srgb, var(--paper) 72%, transparent); border-radius: 4px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.play .field-note { left: 28px; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); padding: 6px 12px; font-size: 1rem; color: var(--ink); }
.play .how:not([hidden]) ~ .field-note, .play .field-note:has(~ .how:not([hidden])) { bottom: calc(250px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 720px) { .play .machines { left: 65px; } .play .field-note { left: 20px; right: 20px; } }
#field.forecast { box-shadow: inset 0 0 0 2px var(--amber); }

.devbar { position: fixed; z-index: 4; right: 12px; bottom: 12px; display: flex; gap: 8px; align-items: center; font: .6875rem var(--mono); color: var(--pencil); background: var(--paper); border: 1px dashed var(--faint); padding: 6px 8px; }
.devbar button { font: inherit; background: none; border: 1px solid var(--faint); color: var(--ink); padding: 3px 6px; cursor: pointer; }

/* light/dark switch */
.theme { position: relative; width: 30px; height: 16px; padding: 0; border: 1px solid var(--faint); border-radius: 8px; background: transparent; cursor: pointer; }
.theme::before { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); transition: transform .24s var(--ease); }
.theme[aria-checked="true"]::before { transform: translateX(14px); }
.theme:hover { border-color: var(--pencil); }
.theme::after { content: ""; position: absolute; inset: -14px -8px; }   /* a 44px touch target without a bigger switch */

/* key actions: a green underline that fills like a highlighter on hover */
a.key { text-decoration: underline 2px var(--accent); text-underline-offset: 5px; transition: box-shadow .16s var(--ease); }
a.key:hover { box-shadow: inset 0 -.55em 0 color-mix(in srgb, var(--accent) 38%, transparent); text-decoration-color: var(--accent); }
.top .links a.key { color: var(--ink); }

/* for event organisers: a quiet disclosure under the intro */
.press { margin-top: -6px; }
.press summary { cursor: pointer; list-style: none; font-size: 1rem; font-style: italic; color: var(--pencil); width: fit-content; }
.press summary::-webkit-details-marker { display: none; }
.press summary::before { content: "▸ "; font-style: normal; font-size: .8em; }
.press[open] summary::before { content: "▾ "; }
.press summary:hover { color: var(--ink); }
.press-body { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; margin-top: 18px; }
@media (max-width: 560px) { .press-body { grid-template-columns: 1fr; } }
.shot { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.shot img { width: 180px; height: auto; border-radius: 2px; display: block; }
.shot figcaption { font-size: .9375rem; color: var(--pencil); display: flex; flex-direction: column; gap: 2px; }
.shot a { text-decoration: underline 2px var(--accent); text-underline-offset: 4px; width: fit-content; }
.meta-s { font: .6875rem var(--mono); color: var(--faint); letter-spacing: .03em; }
.bios { display: flex; flex-direction: column; gap: 18px; }
.bio p { margin: 0; font-size: 1rem; line-height: 1.55; }
.bio .bio-h { display: flex; gap: 10px; align-items: baseline; font-style: italic; color: var(--pencil); margin-bottom: 4px; }
.copy { font: .6875rem var(--mono); letter-spacing: .06em; color: var(--pencil); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline 1px var(--accent); text-underline-offset: 4px; min-height: 24px; }
.copy:hover { color: var(--ink); }

/* suggest a reading: the same quiet disclosure as the press kit */
.suggest { margin-top: 4px; }
.suggest summary { cursor: pointer; list-style: none; font-size: 1rem; font-style: italic; color: var(--pencil); width: fit-content; }
.suggest summary::-webkit-details-marker { display: none; }
.suggest summary::before { content: "▸ "; font-style: normal; font-size: .8em; }
.suggest[open] summary::before { content: "▾ "; }
.suggest summary:hover { color: var(--ink); }
.suggest form { margin-top: 14px; }

/* possess a bee: a small frosted panel above the field's controls */
.play .possess-box { position: absolute; left: 28px; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); max-width: 520px; padding: 12px 14px; pointer-events: auto;
  background: color-mix(in srgb, var(--paper) 80%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 4px; font-size: .9375rem; line-height: 1.5; color: var(--body); display: grid; gap: 8px; }
.play .possess-box p { position: static; margin: 0; }
.play .possess-box .k { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.play .possess-box .k span { font: .6875rem var(--mono); color: var(--pencil); letter-spacing: .06em; text-transform: uppercase; min-width: 3em; }
.play .possess-box code { font: .75rem var(--mono); color: var(--ink); word-break: break-all; }
.play .possess-box a { font-size: .875rem; color: var(--pencil); margin-left: 10px; }
@media (max-width: 720px) { .play .possess-box { left: 8px; right: 8px; } }

.play .machines button.icon { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 28px; padding: 2px; border-radius: 3px; }
.play .machines button.icon svg { display: block; }
.play .machines button.icon:hover, .play .machines button.icon[aria-expanded="true"] { color: var(--ink); background: color-mix(in srgb, var(--paper) 70%, transparent); }
.play .machines button.icon::after { content: ""; position: absolute; }

/* a bee that sometimes visits "play" on the page */
.visitor-bee { position: fixed; left: 0; top: 0; z-index: 2; pointer-events: none; will-change: transform; }
.visitor-bee .wings ellipse { fill: rgba(255,255,255,.75); stroke: var(--pencil); stroke-width: .6; transform-box: fill-box; transform-origin: center; animation: flap .09s ease-in-out infinite alternate; }
.visitor-bee .body { fill: var(--bee-color, var(--bee-amber)); }
@keyframes flap { from { opacity: .95; } to { opacity: .35; } }
body.playing .visitor-bee { display: none; }

.play .possess-box .ask { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.play .possess-box .ask label { width: 100%; font-size: .875rem; color: var(--pencil); }
.play .possess-box .ask input { font: inherit; font-size: .9375rem; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--faint); padding: 4px 0; min-width: 10em; }
.play .possess-box .ask input:focus { outline: none; border-bottom-color: var(--ink); }