/* The handwriting, served from this site. Same files and ranges as Google Fonts' Latin subsets. */
@font-face {
  font-family: 'Zen Kurenaido'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/zen-kurenaido-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Zen Kurenaido'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/zen-kurenaido-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper: #F7F5EC;
  --ink: #26302A;
  --mute: #667063;
  --link: #2B5C8F; /* links: blue ink, the colour of the washes in the paper */
  --hand: 'Zen Kurenaido', 'Bradley Hand', 'Segoe Print', cursive; /* all text is written in the drawing's pen */
  --gx: 88px; /* left edge of all text, clear of the vine */
  --gr: 56px; /* right margin */
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'220'%20height%3D'220'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'.9'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20values%3D'0%200%200%200%20.14%200%200%200%200%20.19%200%200%200%200%20.13%200%200%200%20.1%200'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23n)'%2F%3E%3C%2Fsvg%3E");
  font: 400 17px/1.45 var(--hand);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  isolation: isolate; /* so the paper layer below sits above the body colour */
}
/* watercolour paper, pinned behind everything */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url(paper.svg) center / cover no-repeat;
}
::selection { background: #4E7A2E; color: #F7F5EC; }
a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; outline: none; }
h1, h2, h3, p, ul { margin: 0; padding: 0; font: inherit; }
svg { display: block; width: 100%; height: auto; }

/* things that can be clicked show the normal hand pointer */
.bean, .label, .stage:not(.open) .pod-svg { cursor: pointer; }

/* ---------- header (every page) ---------- */
.top { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 40px var(--gr) 0 var(--gx); }
.name { font-size: 23px; line-height: 1.2; }
.what { color: var(--mute); }
.contacts { display: flex; flex-wrap: wrap; gap: 6px 30px; }
/* each link: a small pen drawing, then the word; the drawing tips over a little under the pointer */
.contacts a { display: flex; align-items: center; gap: 8px; color: var(--link); }
.contacts .doodle { flex: none; width: 32px; height: 24px; overflow: visible; transform-origin: 50% 80%; transition: transform .5s cubic-bezier(.3,1.7,.45,1); }
.contacts a:hover .doodle, .contacts a:focus-visible .doodle { transform: rotate(-9deg) translateY(-2px); }

/* ---------- homepage ---------- */
/* the vine behind everything; text and pods sit over it */
.vine { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; }
/* it is drawn in pieces, each placed by home.js: the stem and the branches show as far as they have grown,
   a leaf unfolds from its stalk once the stem has reached it, and a small hook leads the growing tip */
.vine > div { position: absolute; }
.vine svg { position: absolute; left: 0; top: 0; width: auto; height: auto; overflow: visible; }
.v-clip { overflow: hidden; }
.v-leaf { mix-blend-mode: multiply; transform: scale(0) rotate(-35deg); transition: transform .8s cubic-bezier(.3,1.5,.5,1); }
.v-leaf.in { transform: none; }
.v-tip { left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity .3s ease; }
.v-tip svg { left: -14px; top: -20px; }

/* a section's name, written on a dab of paint (drawn by home.js) */
.sec { position: relative; font-size: 22px; mix-blend-mode: multiply; }
/* it comes in when the vine has grown as far as its branch */
.grow .sec { transform-origin: 0 50%; transition: opacity .45s ease, transform .7s cubic-bezier(.3,1.4,.5,1); }
.grow .sec:not(.in) { opacity: 0; transform: translateX(-12px) scale(.9); }
.sec-wash { position: absolute; pointer-events: none; mix-blend-mode: multiply; }
.sec-word { position: relative; }
.pod-sec { position: relative; display: flow-root; margin-top: 44px; } /* flow-root: the room kept under a pod for its tag stays inside the section */
.pod-sec:first-child { margin-top: 20px; }
/* desktop: each pod gets about a screen to itself, so only one is in view at a time */
@media (min-width: 1180px) { .pod-sec { min-height: min(100vh, 1400px); } }
.pod-sec .sec { position: absolute; left: var(--gx); white-space: nowrap; } /* top is set where the branch forks */
.stage-wrap { position: relative; }
/* the pod is one painted layer, so it can grow out of its branch (home.js scales it) without being redrawn */
.stage { position: absolute; top: 0; mix-blend-mode: multiply; will-change: transform, opacity; }

.pod-svg { overflow: visible; }
/* over the body: the lid on layers of its own, so that swinging it redraws nothing else, then the stalk and the titles.
   The lid has two drawings: a plain one that is quick to redraw on every frame while it moves, and the painted one
   it settles into, which fades in once it has stopped. */
.pod-lid, .pod-fine, .pod-top { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; will-change: transform; }
.pod-top { mix-blend-mode: multiply; }
.pod-lid [data-k="lid"] { opacity: 0; transition: opacity .16s linear; }
.pod-fine { transition: opacity .16s linear; }
.stage.lid-moving .pod-lid [data-k="lid"] { opacity: 1; }
.stage.lid-moving .pod-fine { opacity: 0; }
.stage:not(.open) .bean { pointer-events: none; }
.stalk { transition: d .5s cubic-bezier(.25,.8,.25,1); }
.bean { outline: none; }
.bean .lift { transition: transform .5s cubic-bezier(.25,.8,.25,1); }
.bean.on .lift { transform: translate(var(--lx), var(--ly)); }
.stage.settle .bean { animation: beanSettle .7s cubic-bezier(.3,.7,.3,1) calc(var(--i) * 70ms) both; }
@keyframes beanSettle {
  0% { transform: translate(0, 0); }
  30% { transform: translate(0, -3px); }
  65% { transform: translate(0, .8px); }
  100% { transform: translate(0, 0); }
}

/* a bean's title: on a small paper tag hung from the pod's bottom edge (desktop), or beside the pod (phone) */
.label { opacity: 0; pointer-events: none; outline: none; color: var(--ink); transition: opacity .5s ease; }
.label:hover, .label:focus-visible { text-decoration: none; }
.stage.open .label { opacity: 1; pointer-events: auto; }
.stage.open.settle .label { transition-delay: calc(var(--i) * 70ms); }
.label text { font-family: var(--hand); font-size: 16px; fill: currentColor; }
.label text.sub { font-size: 14px; fill: var(--mute); }
/* the small tag turns about the point it is tied at: it swings in as the pod opens, and again when its bean is pointed at */
.label .swing { transform: rotate(var(--r)); transition: transform .9s cubic-bezier(.3,1.7,.45,1); }
.stage:not(.open) .label .swing { transform: rotate(calc(var(--r) * -3)); }
.label.on .swing, .label:focus-visible .swing { transform: rotate(calc(var(--r) * -1)); }

/* a picked bean's write-up: a paper tag on a string, tied to the pod's branch */
.tag { position: absolute; left: var(--gx); z-index: 2; padding: 42px 22px 24px; transform: rotate(1.4deg); }
.tag[hidden] { display: none; }
.tag { transition: opacity .35s ease; }
.tag.away { opacity: 0; pointer-events: none; } /* its pod has closed */
.tag.swing { animation: tagSwing 1s cubic-bezier(.3,.6,.3,1) both; }
@keyframes tagSwing {
  0% { opacity: 0; transform: rotate(-7deg); }
  30% { opacity: 1; transform: rotate(4deg); }
  60% { transform: rotate(.2deg); }
  80% { transform: rotate(1.9deg); }
  100% { transform: rotate(1.4deg); }
}
.tag-art { position: absolute; inset: 0; pointer-events: none; }
.tag-art svg { width: auto; overflow: visible; }
.tag-text { position: relative; }
.tag h3 { font-size: 23px; line-height: 1.2; }
/* the write-up (data.js writeUp): title, role or venue, a line of facts, what it was built with, then bullets */
.sub { margin-top: 2px; }
.meta { color: var(--mute); font-size: 15px; line-height: 1.4; }
.sub + .meta, h3 + .meta, h1 + .meta { margin-top: 3px; }
.meta span + span::before { content: '·'; margin: 0 7px; }
.points { list-style: none; margin-top: 14px; }
.summary { margin-top: 14px; font-size: 16px; line-height: 1.4; text-wrap: pretty; }
.summary + .points { margin-top: 8px; }
.points a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.points li { position: relative; padding-left: 17px; font-size: 16px; line-height: 1.4; text-wrap: pretty; }
.points li + li { margin-top: 8px; }
.points .nb { white-space: nowrap; }
.points.solo li { padding-left: 0; }
.points.solo li::before { content: none; }
.points li::before { content: ''; position: absolute; left: 1px; top: .55em; width: 7px; height: 5.5px; border-radius: 50%; background: #8DB13F; transform: rotate(-22deg); } /* a very small bean */
.tag img { display: block; width: 100%; height: auto; margin-top: 12px; }
.tag .links { display: flex; gap: 24px; margin-top: 12px; }
/* outside links: a small pen drawing before the word, like the contact links */
.tag .links a { display: inline-flex; align-items: center; gap: 7px; color: var(--link); }
.tag .links .doodle { flex: none; width: 30px; height: 23px; overflow: visible; transform-origin: 50% 80%; transition: transform .5s cubic-bezier(.3,1.7,.45,1); }
.tag .links a:hover .doodle, .tag .links a:focus-visible .doodle { transform: rotate(-9deg) translateY(-2px); }

.classes { position: relative; padding: 84px var(--gr) 0 var(--gx); }
/* desktop: each class is a small paper tag on a branch (drawn by home.js); the list itself is kept for screen readers */
.class-branch { position: relative; margin-top: 12px; }
.class-branch svg { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; }
.ctag text { font-family: var(--hand); font-size: 16px; fill: var(--ink); }
/* a class's tag drops in when its branch has grown out to it */
.grow .ctag { transition: opacity .35s ease; }
.grow .ctag:not(.in) { opacity: 0; pointer-events: none; }
/* a class's tag swings on its string when the pointer brushes past it, away from the side it came from */
.ctag.go .sway { animation: tagSway 1.7s cubic-bezier(.35,.6,.4,1) both; }
@keyframes tagSway {
  0% { transform: rotate(0deg); }
  16% { transform: rotate(calc(var(--dir) * 9deg)); }
  38% { transform: rotate(calc(var(--dir) * -6deg)); }
  58% { transform: rotate(calc(var(--dir) * 3.4deg)); }
  76% { transform: rotate(calc(var(--dir) * -1.6deg)); }
  90% { transform: rotate(calc(var(--dir) * .6deg)); }
  100% { transform: rotate(0deg); }
}
.class-list { list-style: none; }
@media (min-width: 1180px) { .class-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }

/* 豆, signed in the corner like a seal on a painting */
.foot { position: relative; display: flex; justify-content: flex-end; padding: 72px var(--gr) 56px; }
.sign { width: 20px; }

/* phone and tablet: no vine; one column at most 480px wide, the pod vertical down its right edge */
@media (max-width: 1179px) {
  :root { --gx: 26px; --gr: 26px; }
  .top, .pod-sec .sec, .classes, .foot, .nf { width: 100%; max-width: 480px; margin-left: auto; margin-right: auto; }
  .top { flex-direction: column; gap: 12px; padding-top: 36px; }
  .contacts { gap: 0 20px; }
  .contacts a { min-height: 44px; margin: -10px 0; }
  .vine { display: none; }
  .pod-sec, .pod-sec:first-child { margin-top: 44px; }
  .pod-sec .sec { position: relative; left: auto; padding: 0 var(--gx); }
  .stage-wrap { margin-top: 4px; }
  .label { position: absolute; display: flex; flex-direction: column; align-items: flex-end; width: 200px; text-align: right; line-height: 1.25; color: var(--mute); transition: opacity .5s ease, color .2s ease; }
  .label.on, .label:focus-visible { color: var(--ink); }
  .tag { position: relative; left: auto; width: calc(100% - var(--gx) - var(--gr)); max-width: 428px; margin: 40px auto 0; }
  .tag .links a { display: inline-flex; align-items: center; min-height: 44px; }
  .classes { padding-top: 56px; }
  .class-branch { display: none; }
  .class-list { margin-top: 8px; }
  .class-list li { line-height: 29px; }
  .foot { padding-top: 56px; padding-bottom: 44px; }
}

/* ---------- not found ---------- */
.nf { padding: 104px var(--gr) 0 max(330px, 27vw); }
.nf h1 { font-size: 30px; line-height: 1.2; }
.nf p { margin-top: 6px; color: var(--mute); }
.nf a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (max-width: 1179px) { .nf { padding: 48px var(--gr) 0 var(--gx); } }

@media (prefers-reduced-motion: reduce) {
  .stalk, .bean .lift, .label, .label .swing, .contacts .doodle, .tag .links .doodle, .tag, .pod-fine, .pod-lid [data-k="lid"] { transition: none; }
  .stage.settle .bean, .tag.swing, .ctag.go .sway { animation: none; }
}
/* after a redraw the page shows where it has got to at once, without replaying these */
.grow-now .v-leaf, .grow-now .sec, .grow-now .ctag, .grow-now .tag { transition: none; }